Build Select Resource Side Panel

[nucleogenesis]

Overview

Here we will provide coaches a way to select the resources they want a quiz section to select from. We will make use of the side panel scaffolding established in #11277 and #11012 we will leverage existing components to build the interface.

Base your work on #11277 if it isn't merged yet

If that PR is not merged, you can check out my branch locally, make your own branch from it and proceed with the work defined here. I believe there is a low potential for conflicts.

Prior art

This section of the old CreateExamPage is where the user used to select the contents for their quiz. Now, we will be making use of the ContentCardList and ResourceSelectionBreadcrumbs components to implement the designs as specced.

About useQuizCreation & quizForge

The useQuizCreation module is instantiated in the CreateExamPage/index.vue file (in #11277) -

The quizForge object provided in the root of the quiz creation page can be injected in any child component (currently in the open #11277 PR) - once injected to a child component, you can make use of the objects/functions returned here by way of this.quizForge.updateSection() or this.quizForge.activeSection.value.

That is basically your API into manipulating the state.

To understand the data structures, you can see this quizCreationSpecs.js file which provides Vue prop-validation-shaped definitions and JSDoc @typedefs indicating what you should expect for each type.

So - if a function says a @param or a @return value should be a QuizSection you should be able to reliable expect the function to work when you pass something shaped like a QuizSection or for that function to return something shaped that way -- in some cases it could be both!

If you identify that you need to store more app-level shared state that isn't already supported feel free to add it to the composable.

FIGMA - Very important notes

The designs linked here include a search bar which will not be included in this pass. Please don't build it.

Acceptance criteria

Coaches can select resources from channels available on the device

• All data architecture management is done with the quizForge / useQuizCreation module tools (you can edit that if you need to just be sure to check the tests!) -- do not save any quiz-specific state in Vuex.
• Ensure that the sidepanel is showing a "Back arrow" when the user has gone down into the tree past the first "Channels" list page. A rule of thumb: If the user is on the first page they were on when the side panel opened, show the X -- otherwise, show a back arrow that, when clicked, goes back to the previous side panel route.
• Breadcrumbs should be included

Coaches can select resources from their bookmarks

• We also need to list the Coach's bookmarks. Take a look at BookmarkPage for information on how it can be populated.

UX Notes

• If the user has made any selections in the side panel, then when they click the X, we need to hit them with a confirmation model a la "You will lose your changes if you don't save them"
• Strings from https://github.com/learningequality/kolibri/pull/11189/files should be used in this file -- any missing strings should be added there as well