Dashboard page - Manage Students

[lloan]

This is a three part task:

• [x] Design the new page
• [x] Create the proof of concept
• [x] Implement the proof of concept

Design

What is the new component or item: Create a design PDF for developers to create a static copy with code. You will be using UIKit components along with Fontawesome PRO icons. Any comments you need to make, make them in the discussion of the issue or the implementation issue for this component.

The expected deliverable will be a design document that shows all the possible states it has. Provide notes as necessary.

Proof of Concept

Create a proof of concept - take the design doc, specs sheet and convert it to code. You will be using UIKit as the CSS library along with Fontawesome PRO icons. Do not worry about logic during this step, just build out the component.

The expected deliverable will be a component that is responsive and mobile-ready. Make sure you address all stories requested (states) - if time permits. The next task will deal with adding any additional logic that might be needing. For example, creating API requests, iterating through data, etc.

Implement the Proof of Concept

Take the proof of concept and add missing logic. This means take it from static and make it dynamic if it requires it. Build it to be modular, add comments and make sure the component is polished.

Design documents:

[JacobSNGoodwin]

@kvera001 and @lloan, are we breaking out the proof on concept and implementation into separate tasks or should I just operate from here and add this to in progress in the MVP project?

I can still work on it for now. But just trying to keep track of it.

-Guy who still knows nothing about project management

[JacobSNGoodwin]

Also, I'm not sure where we want this page to sit. For now I guess anywhere, but so far the navigation system of the dashboard does not have any role awareness (ie, student vs teacher).

[JacobSNGoodwin]

I basically made the design and have the checkboxes and course selection working (some of the callouts don't seem to match the appearance, so I can tweak if needed). Right now I just emit an method on props when manage, view, or delete is called.

I figure this methods will be handled at the page level and reset the component data.

https://github.com/inland-empire-software-development/spark/tree/122-manage-students

Right now I'll probably need some help writing queries to get students for a teacher. Right now I see a single teacher "2" in course_meta.

[lloan]

Checking this out - thanks!

[lloan]

@JacobSNGoodwin this looks great. Going to modify the DB to aid in this.

[JacobSNGoodwin]

I just added a utility method in to the dashboard/students page to map the API data format to the format of the courses property of the ManageStudents component. We could do this in the API as well, it just depends on the architecture we want. Since we're not dealing with a large data set, I'm find with doing this as I have.

I also added basic handlers for clicking managing a user, viewing a user, and deleting a single or multiple users. The manage and view methods basically just push the route of the dynamic page for viewing and managing a student. If we know that path where we'll want these pages, I can update those handler methods quickly.

The main thing we need to do now is create an endpoint and db method for removing users from a course. We might want to think about whether this endpoint should return the courses, or if we should just await this call's completion and the refetch users.

If we want to be realllly fancy, we could use https://github.com/zeit/swr which is recommended for client side fetching in nextjs. This can be used to cache and update data. You can even update the students locally via the mutate, and then validate that with a background request to make sure the cache is valid (sort of an eager update).

After reviewing nextjs documention, I think it's best we handle fetching and removing users client side (currently @lloan set it up with client side fetching).