fnitu / edu-hospice Goto Github PK

Decide on supported browsers and update browserslist file

TODO: add details about removing IE11 support

Integrate server API request URL: GET /api/admin/courses

https://edu-hospice-api.herokuapp.com/swagger-ui.html#/course-controller/getCoursesStatsUsingGET

Decide on a template for HTML e-mails and apply it:

1. Header
2. Footer
3. Content

A request must be done to: /api/users/currentUser

The response details should be shown in: user/dashboard

TEST user details button should be removed.

The details about the user should be removed from sessionStorage. Only the token needs to stored in session token.

Create a loading mask / progress bar for http requests. Loading mask prevents user to execute the same action multiple times while the request is in pending.

New card to enter new quiz details:

1. name (input)
2. status (inactive/active) default: inactive
3. Minimum score to pass: input number
4. Shuffle questions (checkbox)
5. Retry attempts input number
6. Time limit: input number (minutes)

Related: issue: https://github.com/danutchindris/edu-hospice-api/issues/127

To decide with design if additional styling is needed for the top toolbar (is the home link needed?) and admin user tabs.

Style user dashboard details information similar to the design branch

A card component with all the needed input params should be created instead of using directly the mat-card component.

The styles related to mat-card from src/styles.scss should be moved to the component scss file

When clicking on the recommended courses tab you should

1. have a link with register
2. Make a request to: https://edu-hospice-api.herokuapp.com/swagger-ui.html#/user-course-controller/userRegisterToCourseUsingPOST
3. Show the result to the user using the notification message (including errors)
4. Refresh the current tab

Style admin dashboard, based on design input

Create route guards to prevent user to access admin routes and vice-versa.

https://angular.io/guide/router#preventing-unauthorized-access

If you try to access a secured link and you are not logged in, it should redirect you to the login page.

After entering the credentials, you should be redirected to the page requested initially.

If you are already logged in, you should access the requested page directly.

Fix console error in course page:

Receive generic error from server (user or password are not recognized).
Display error using form errors mechanism.

Ag-grid component should be upgraded to latest version (24.x)

https://www.ag-grid.com/ag-grid-changelog/

Check how to build the application to use a different URL for the API requests (a production one instead of the current Heroku development).

References: https://www.jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/

Use URL from server for onGoing, finalized and recommended corse

Move Bearer header to http interceptor in order for it to be set in one place
Remove token from URL, to be stored in cookie, localStorage, etc.

https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8

Remove tabs on homepage and add course type to the course card

Implementation of ag-grid with:
pagination (infinite scroll)
search
sorting

Create new page with placeholders for needed shortcuts (cards - title + icon):
Courses
Users

Refactor "Cursanti" usage in translations to "Utilizatori" in order to allow for showing/managing of the admin users in the third tab.

Admin must be able to directly navigate using the shortcuts from dashboard to a specific user tab:

1. pending registrations
2. pending payment
3. all users

Most likely, an URL param must be sent and the tab component to take it into account.

To investigate what pdf viewer can be added to our application to allow for:

1. page forward and back navigation
2. page numbers
3. insertion on the last page of a "finalize content"

Integrate logout API when clicking the logout button.

A request must be done to: /api/auth/logout

The session storage containing the token should be cleared.

In order to help with content adaptation, all string should be entered in one location.

Possible solutions:
http://www.ngx-translate.com/
https://github.com/airbnb/polyglot.js
https://i18njs.com/

On the dashboard of the admin we need to show the information from: https://edu-hospice-api.herokuapp.com/swagger-ui.html#/user-course-controller/getAdminDashboardStatsUsingGET

Implementation of the following URLs:
https://edu-hospice-api.herokuapp.com/swagger-ui.html#/user-course-controller/approveUserCourseUsingPUT
https://edu-hospice-api.herokuapp.com/swagger-ui.html#/user-course-controller/rejectCourseRegistrationUsingPUT

The same URLs are used on both pages to do the actions.

Show the course cards as tabs:

1. Ongoing
2. Pending
3. Finalized
4. Recommended

Route to be modified: user/dashboard

Style user dashboard tabs in order to be more visible.

Enter e-mail page

Verify e-mail is valid, then show the message in an Angular material dialog:
If the user exists in our database, an e-mail link will be sent to the provided address.

In order to reuse the defined colors, they should be extracted to a common location and reused in multiple places.

To be confirmed with UX.

Same list as in #17, but for users:
name
e-mail
status

Angular and Angular material should be upgraded to the latest 11.X version.

https://github.com/angular/angular/blob/master/CHANGELOG.md

For users, the course content should be shown as a sidenav (https://material.angular.io/components/sidenav/overview), the course items inside should be displayed as a tree: https://material.angular.io/components/tree/overview

The course items should contain: icon, name, status and they should ALL be expanded by default.

The sidenav should be collapsible.

Route to be modified: user/course/course/1

Provide two inputs, check if passwords match.

If match, show message with Angular Material dialog: "Password changed successfully", then redirect to login page.

After an user registers to a course, it will be visible in a list that can be accessed from the admin dashboard. The admin can accept the registration. This does not grant access to the course!

#33 needs to be implemented for the user to have access to the course.

Both lists #32 and #33 will be shown as tabs in the same page.

Use: https://edu-hospice-api.herokuapp.com/swagger-ui.html#/course-controller/getAllUsingGET for showing the courses on the home page when you are authenticated.

After an user has been accepted by an admin as registered for a course, it will be visible in a list that can be accessed from the admin dashboard. The admin can validate that the user has made the payment for the course. Only after this step, the user will be able to access the course.

In order to have a consistent build, we should freeze all the dependencies in package.json.

Angular/Angular material should be updated to latest versions.

Integration of a new URL that will contain more user details + statistics.

To be decided with design what other information needs to be displayed.

Update translations.

Create constants for routes in order to be easly maintained when naming is changed.

Create curs card using mat-card and current styling of card

A new page containing the necessary course details:

1. name
2. short description
3. description
4. author(s): text
5. image: text: URL (upload to be later added)
6. price: number
7. currency (EUR/RON) - dropdown (enum)
8. role (medical personnel/multi-disciplinary personnel) - dropdown (enum)
9. course type (always on/with live sessions) - dropdown (enum)
10. course start date - calendar (date)
11. course end date - calendar (date)
12. status: unpublished/published/closed- dropdown (enum)
13. hours: number (in hours)
14. access days: number (in days)
15. credits: number

Prerequisite: A "Create course" button(on a toolbar) in the course list page: https://edu-hospice.herokuapp.com/#/admin/course-list

The toolbar is created in #58

Related issue: https://github.com/danutchindris/edu-hospice-api/issues/125

In the "New quiz page" we should have a section that allow the creation of multiple questions:
Fields:

1. question - input / name in model
2. question type: single choice (radio/select), multiple choice(checkbox group) - 3 types, enum: radio/select/checkbox
3. Define possible options (list of option names + Boolean attribute to mark the correct ones):

[
 {
  name: "question text"
  type: "radio/select/checkboxes"
  options: 
   [ { option: "first option", valid: true},  { option: "second option", valid: false } ]
 }
]

The order of the questions and question options will be given by the order of the array.

A validation (BE/FE) should be done when selecting the question type to have at least one option.

Drag and drop - to be handled in a separate ticket

Lazy loading routes should be added for admin and for regular users (not authenthicated/authenticated)

Three modules should be created:

• admin
• users
• shared

https://angular.io/guide/lazy-loading-ngmodules

Create error page for missing route, in case the user enters manually a wrong url.

https://stackoverflow.com/a/36261194

#14 and #15 must be integrated with server.

On #14 a confirmation message must be displayed when an e-mail is sent successfully.

TODO: Use translation keys.