feat(#9598): add training materials page

[latin-panda]

Description

• Training cards in modal

  • The form title in the modal should be sticky and buttons should always be visible even when loading long content.

• Training materials page

  • Every time a training (completed or uncompleted) is submitted, a report is recorded on the Reports list page (it's like this since before).
  • Trainings are sorted by start date
  • Default page is 50, scrolls to load next page (see test video)
  • Don't show the modal on top of the Training materials page
  • The training material option is always displayed on the hamburger menu, regardless of whether a project has or does not have trainings for CHWs
  • Trainings can be opened multiple times a day (while trainings in modal display once a day)

• Training materials page and training cards in modal

  • If the title isn't defined in the form, show the form ID
  • Show a confirmation message when quitting the training. The message and title is the same for both (page and modal)
  • Should work for old nav and new nav display

Overall functionality - happy path

Screen.Recording.2024-11-11.at.5.41.44.PM.mp4

Pagination on list

Screen.Recording.2024-11-11.at.5.47.14.PM.mp4

#9598

Code review checklist

• Readable: Concise, well named, follows the style guide, documented if necessary.
• Documented: Configuration and user documentation on cht-docs
• Tested: Unit and/or e2e where appropriate
• Internationalised: All user facing text
• Backwards compatible: Works with existing data and configuration or includes a migration. Any breaking changes documented in the release notes.

Compose URLs

If Build CI hasn't passed, these may 404:

• Core
• CouchDB Single
• CouchDB Cluster

License

The software is provided under AGPL-3.0. Contributions to this project are accepted under the same license.

[latin-panda]

@Benmuiruri @kapelo I've finished the unit and e2e test coverage. Can you please review it?

[Benmuiruri]

LGTM!

The 3 suggestions are all optional and not a blocker.

[latin-panda]

Test: No trainings available

Test: Error loading form

Test: Loads other Enketo widgets and saves training in the reports list page.

We dont expect people to use input fields in trainings because trainings are more informative (text, images), but still good that they work fine.

Screen.Recording.2024-11-14.at.6.55.39.PM.mp4

Test: Training materials page shouldn't list expired trainings. Also, it should refresh the list when new trainings are configured by the system admin and the start date is now

Screen.Recording.2024-11-14.at.7.10.38.PM.mp4

Test: Show confirmation message when leaving training

Screen.Recording.2024-11-14.at.7.16.47.PM.mp4

Test: Works fine in the old nav

Screen.Recording.2024-11-14.at.7.30.12.PM.mp4

[latin-panda]

@kapelo I have uploaded testing videos, do you have any feedback?

[latin-panda]

One more test. And that's all

Test: Refresh list to show indicator of recently completed training

Screen.Recording.2024-11-14.at.10.25.28.PM.mp4

[kapelo]

LGTM!
Added 2 comments that should be quick to address