The lesson management workflow is being aligned to use the similar side panel management UX that we introduced in quizzes in 0.17. As we work on extending some of the technical aspects of that work (managing the selection of resources and folders, tracking and updating local state, etc.), we will work in parallel to build out the components and pages that surround those parts of the workflow.
Important note: The exact user interaction, and whether or not this manages the entire lesson state, or a "current selection" of lesson resources is still being discussed with Jessica. Therefore, this issue is narrowly scoped and is focused on an MVP of technical requirements that could be built on to work with either option.
I highly recommend creating some temporary sample content nodes as needed to test the rendering and interactions. Please check in with @marcellamaki when this PR is ready for a strategy for QA team testing.
UX
Requirements
[x] This work assumes an array of contentnodes, all of which are resources (no folders)
[ ] In the bottom bar of the workflow, a link should be displayed whenever the array length is > 0
[ ] On "select" of this link, the "shopping cart" should open
[x] The header should display the number of items in the selection array
[x] The lesson name is rendered in
[ ] The "back" arrow "minimizes" the shopping cart view. The "X" or "ESC" key closes the side panel. For now, adding validation for closing is not required
[x] Each resource in the array should be displayed as an item. right now wrapping these in draggables is NOT required (this may be done in follow up), but otherwise should follow the spec visually in terms of layout
[x] Each item should have a content node icon
[ ] Clicking on the title of the content node should open a preview (this functionality is existing, and can link to the current page). The target on touch screens should NOT just be the link, but rather should be the span from the content icon to the folder icon, so that it is a large enough touch target. (Please ask @marcellamaki and/or @radinamatic for clarification if needed)
[ ] Clicking on the "folder" icon does not need to work right now in terms of what is rendered when following the link, but it should link to the nearest parent folder of the content node and update the URL to that route
[x] the "minus" icon should remove the item from the array, and dynamically rerender the list.
Out of scope
[ ] Rendering the "folder" page for the parent content node
[ ] draggables
[ ] "Saving" actually working / appending any of these resources to a lesson, whether when clicking "save and close" or when "removing" resources
Overview
The lesson management workflow is being aligned to use the similar side panel management UX that we introduced in quizzes in 0.17. As we work on extending some of the technical aspects of that work (managing the selection of resources and folders, tracking and updating local state, etc.), we will work in parallel to build out the components and pages that surround those parts of the workflow.
This issue is to create the "shopping cart" preview. The new temporary routes, added in https://github.com/learningequality/kolibri/pull/12672 should be used.
Important note: The exact user interaction, and whether or not this manages the entire lesson state, or a "current selection" of lesson resources is still being discussed with Jessica. Therefore, this issue is narrowly scoped and is focused on an MVP of technical requirements that could be built on to work with either option.
I highly recommend creating some temporary sample content nodes as needed to test the rendering and interactions. Please check in with @marcellamaki when this PR is ready for a strategy for QA team testing.
UX
Requirements
Out of scope
Resources