rcos / observatory-client Goto Github PK

Add an update method to src/store/post/actions.js that performs the following REST API call:

PUT /api/achievements/:id

Notes

• Use the $PUT helper function defined in src/store/lib/helpers.js

Consult this example for guidance - implement in the new /components/BlogForm component.

Add a fetchModel method to src/store/post/actions.js that performs the following REST API call:

GET /api/achievements/:id

Notes

• Use the $GET helper function defined in src/store/lib/helpers.js

Set up a basic page and ideally link up the backup to retrieve blog posts

Footer for all the pages

We need to define a new container - admin_attendance that is tied to the route /admin/attendance.

We should also populate the page with a basic mockup of what the page will contain - a static table will suffice for now.

We should be able to search the user base by people who know X, where X is a technology present in the user's tech attribute (specified on the user's profile page)

Steps

• Update the filteredCollection getter in observatory-client/src/store/user/getters.js to filter users by their tech array attribute.

Blocking

• The API call to GET /api/users does not currently return the users' tech attributes. The client application will need that data before this ticket can be completed.

Add a fetchModel method to src/store/blog/actions.js that performs the following REST API call:

GET /api/posts/:id

Notes

• Use the $GET helper function defined in src/store/lib/helpers.js

• Remove default values from User Registration form. Remove default values for register_user in the observatory-client/src/store/auth/state.js file

• Remove hardcoded Successfully Regisetered! message at the bottom of the <template> tag defined in observatory-client/src/containers/auth_register/components/layout.vue

• Replace the <FormSubmit ... /> component in the <template> tag with the following line:

<FormSubmit label='Sign Up' class='btn-success btn-block w-100'/>

See attached:

Don't worry about dynamic content - we'll square those details away later. Just think in broad strokes with the HTML and apply some of the Bootstrap styles and column rules to define the components this page requires.

Copy FormInput component to start.

Should accept name, label, help, multiple, and options props and use the following structure:

<select>
  <option v-for="opt in options" :value="opt.value">{{ opt.label }}</option>
</select>

Define an action in src/store/classyear/actions.js for the following API endpoint:

POST /api/classyear/daycode

body: {
  bonusDay: true/false
}

See attached image for details - an HTML mockup is sufficient for now.

The Edit Profile, Change Password, and Delete Your Account forms should all be individual Vue components.

See attached:

Don't worry about dynamic content - we'll square those details away later. Just think in broad strokes with the HTML and apply some of the Bootstrap styles and column rules to define the components this page requires.

Add a destroy method to src/store/blog/actions.js that performs the following REST API call:

DELETE /api/posts/:id

Notes

• Use the $DEL helper function defined in src/store/lib/helpers.js

You must be logged (username: [email protected], password: abc123) as an admin to see this view.

Add Bootstrap badges to display the number of students and the number of day codes for each small group.

We need to start building out the client-side data layer for the application - it makes the most sense to start with the projects module and work our way out from there.

I'll be focusing on wiring up Projects to the backend, which will serve as a helpful example on how to wire up the rest of the backend to the client.

• Use the code from /containers/blog_new/components/layout to create a generic Blog form defined in /components/BlogForm.
• Replace /containers/blog_new/components/layout with new /components/BlogForm

Run through the temporary site adding click handlers on buttons. Starting first with linking up using the router. For example:

The Blog List container should render each individual blog post's markdown. It currently only displays the raw, un-rendered markdown.

The container is defined in src/containers/blog_list.

Add a destroy method to src/store/post/actions.js that performs the following REST API call:

DELETE /api/achievements/:id

Notes

• Use the $DEL helper function defined in src/store/lib/helpers.js

Working with me directly to get this ticket done..

We're currently using FontAwesome 4.7.

See FontAwesome 5 icons here.

Steps

• Begin by following the TASK comments in observatory-client/index.html This will enable FontAwesome 5.0 and disable FontAwesome 4.7.

• Search through the repository's *.vue files for <i> tags with the fa CSS class.

• If an icon is missing from FA 5.0, it will display a little warning icon (see attached) indicating that the icon being used has been deprecated. Search for a suitable replacement on the FA 5.0 icons page and update the <i> element accordingly.

Missing Sort icon warning indicator

We need to define a Vuex store to encapsulate the state, getters, mutations, actions, and constants to manage Attendance.

I'd begin by copying store/smallgroup into store/attendance and modify things as necessary - be sure to import store/attendance in store/index.js or your work won't get included with the build.

A good first pass would be to implement an action to handle GET /api/attendance/present/me - we'll add the rest of the API handlers in separate issues.

We need to define a new container - admin_users that is tied to the route /admin/users.

We should also populate the page with a basic mockup of what the page will contain - a static table will suffice for now.

See attached image - we need to add the red HERO banner to the main_home container.

See #48

Code of Conduct link below:

https://github.com/rcos/intro/blob/master/docs/code_of_conduct.md

We are going to need search on the following pages:

• Project List
• User List
• Blog List
• Admin User List

We currently have unique search components defined for Project List, User List, and Admin User List - we should abstract the common markup and functionality into a new Vue component that can be used across all these views.

Steps

• Copy the contents of
  observatory-client/src/containers/project_list/components/search.vue

  into a new file:
  observatory-client/src/components/search.vue

• Add an additional attribute to the Search.vue component:

  props: ['module']

• Replace all references to project/xyz to ${this.module}/xyz

  NOTE - use JS Template Literals to interpolate ${ this.module } at runtime.

• Replace the <ProjectSearch /> with our new component <Search module="project" /> in the following file:

  /observatory-client/src/containers/project_list/components/layout.vue

• Repeat the replacement procedure above for the following:

  /observatory-client/src/containers/user_list/components/layout.vue

• Delete the now unused files

  /observatory-client/src/containers/project_list/components/search.vue
/observatory-client/src/containers/user_list/components/search.vue

We need to define a new container - admin_settings that is tied to the route /admin/settings.

We should also populate the page with a basic mockup of what the page will contain - some static buttons and headers will suffice for now.

@Frankie-guz See attached:

Don't worry about dynamic content or the header/body/button variants for the three Developers/Projects/Achievements components - we'll square those details away later. Just think in broad strokes with the HTML and apply some of the Bootstrap styles and column rules we were going over yesterday

We need a mockup for the "Edit Blog" page.

The container is currently defined in src/containers/blog_edit.

We need a form fields for the following:

• Blog Title Input
• Project dropdown select (disabled)
• Blog Tags input
• Blog Body (Markdown editor)

This mockup doesn't need to be functional - we just need something to act as a placeholder to wire up the UI to the Blog Vuex store.

Add an update method to src/store/blog/actions.js that performs the following REST API call:

PUT /api/posts/:id

Notes

• Use the $PUT helper function defined in src/store/lib/helpers.js

Add a fetchCollection method to src/store/post/actions.js that performs the following REST API call:

GET /api/achievements

Notes

• Use the $GET helper function defined in src/store/lib/helpers.js

As the title indicates, a Please Enable JavaScript message should be displayed to users who do no have JavaScript enabled.

Don't worry about dynamic content - we'll square those details away later. Just think in broad strokes with the HTML and apply some of the Bootstrap styles and column rules to define the components this page requires.

Add a create method to src/store/blog/actions.js that performs the following REST API call:

POST /api/posts

Notes

• Use the $POST helper function defined in src/store/lib/helpers.js

Each unverified attendance should display some information about what type of attendance it is (i.e. smallgroup, large group, bonus)

Make a list including basic knowledge require and a start-up guide for next semester's dev team learning Vue

The FAQ page should maintain a link to the RCOS Slack channel:

https://rcos.slack.cmo

We need a mockup for the "New Blog" page.

The container is currently defined in src/containers/blog_new.

We need a form fields for the following:

• Blog Title Input
• Project dropdown select
• Blog Tags input
• Blog Body (Markdown editor)

This mockup doesn't need to be functional - we just need something to act as a placeholder to wire up the UI to the Blog Vuex store.

From Observatory3 #674

It might be nice to have a page on this site: https://rcos.io/ for Support (and could include Red Hat, Mozilla, OSI, Microsoft, etc., each with a short description of how they have supported the program.) Same page could also have another link to the Donations page:
https://securelb.imodules.com/s/1225/giving/index.aspx?sid=1225&gid=1&pgid=1947&cid=4524&appealcode=WGAFP&_ga=1.191668650.1206279174.1408978267
as well as a description of what you're looking for from corporate partners.

Steps

• Open observatory-client/src/containers/main_sponsors/components/layout.vue

• For each of the Sponsors listed below we need to display...

  • Sponsor name (i.e. Microsoft)
  • Sponsor company logo
  • Description of affiliation (see below)

The home page has a trio of Developers, Projects, and 'Achievements' UI elements. At the moment they only display static values.

This component should be given a props: ['title'] attribute so unique titles can be passed into each instance.

The container is defined in src/containers/main_home.

Create a new container for FAQ in src/containers/main_faq that's available at the route /faq.

We'll populate the page with content later - for this first ticket let's just get a new route and container wired up :)

See attached:

Link

Should just require some basic updates to package.json

Add a fetchCollection method to src/store/blog/actions.js that performs the following REST API call:

GET /api/posts

Notes

• Use the $GET helper function defined in src/store/lib/helpers.js

Investigate the following:

• Propdoc
• JSDoc + JSDoc Vue

Add a link to the rcos/intro observatory on the FAQ page.

Link:

https://github.com/rcos/intro

Add the link to the <template> tag in the following file:
observatory-client/src/containers/main_faq/components/layout.vue

Add a create method to src/store/achievement/actions.js that performs the following REST API call:

POST /api/achievements

Notes

• Use the $POST helper function defined in src/store/lib/helpers.js

Define a new Vuex store for classyear in src/store/classyear.

Don't forget to include a reference to src/store/classyear in src/store/index.js