use vue router to manage side panels sub pages

kolibri/plugins/coach/assets/src/app.js

@@ -71,6 +71,9 @@ class CoachToolsModule extends KolibriApp {
         PageNames.LESSON_EDIT_DETAILS_BETTER,
         PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
         PageNames.LESSON_PREVIEW_RESOURCE,
+        PageNames.LESSON_SELECT_RESOURCES_INDEX,
+        PageNames.LESSON_SELECT_RESOURCES_BOOKMARKS,
+        PageNames.LESSON_SELECT_RESOURCES_CHANNELS,
       ];
       // If we're navigating to the same page for a quiz summary page, don't set loading
       if (

kolibri/plugins/coach/assets/src/constants/index.js

@@ -35,6 +35,9 @@ export const PageNames = {
   LESSON_EDIT_DETAILS: 'LESSON_EDIT_DETAILS',
   LESSON_EDIT_DETAILS_BETTER: 'LESSON_EDIT_DETAILS_BETTER',
   LESSON_SELECT_RESOURCES: 'LESSON_SELECT_RESOURCES',
+  LESSON_SELECT_RESOURCES_INDEX: 'LESSON_SELECT_RESOURCES_INDEX',
+  LESSON_SELECT_RESOURCES_BOOKMARKS: 'LESSON_SELECT_RESOURCES_BOOKMARKS',
+  LESSON_SELECT_RESOURCES_CHANNELS: 'LESSON_SELECT_RESOURCES_CHANNELS',
   LESSON_PREVIEW_SELECTED_RESOURCES: 'LESSON_PREVIEW_SELECTED_RESOURCES',
   LESSON_PREVIEW_RESOURCE: 'LESSON_PREVIEW_RESOURCE',
   LESSON_LEARNER_REPORT: 'LESSON_LEARNER_REPORT',

kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js

@@ -39,6 +39,9 @@ import QuestionLearnersPage from '../views/common/reports/QuestionLearnersPage.v
 import EditLessonDetails from '../views/lessons/LessonSummaryPage/sidePanels/EditLessonDetails';
 import PreviewSelectedResources from '../views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources';
 import LessonResourceSelection from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection';
+import SelectionIndex from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectionIndex.vue';
+import SelectFromBookmarks from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromBookmarks.vue';
+import SelectFromChannels from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromChannels.vue';
 import { classIdParamRequiredGuard, RouteSegments } from './utils';
 
 const {
@@ -132,8 +135,26 @@ export default [
       },
       {
         name: PageNames.LESSON_SELECT_RESOURCES,
-        path: 'select-resources/:viewId?',
+        path: 'select-resources/',
         component: LessonResourceSelection,
+        redirect: 'select-resources/index',
+        children: [
+          {
+            name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+            path: 'index',
+            component: SelectionIndex,
+          },
+          {
+            name: PageNames.LESSON_SELECT_RESOURCES_BOOKMARKS,
+            path: 'bookmarks',
+            component: SelectFromBookmarks,
+          },
+          {
+            name: PageNames.LESSON_SELECT_RESOURCES_CHANNELS,
+            path: 'channels',
+            component: SelectFromChannels,
+          },
+        ],
       },
       {
         name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,

kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js

@@ -630,6 +630,11 @@ const coachStrings = createTranslator('CommonCoachStrings', {
     context:
       "Indicates the amount of resources selected along with the file size. For example:\n\n'727 resources selected (22 GB)'",
   },
+  manageLessonResourcesTitle: {
+    message: 'Manage lesson resources',
+    context:
+      "In the 'Manage lesson resources' coaches can add new/remove resource material to a lesson.",
+  },
 });
 
 // Strings for the Missing Content modals, tooltips, alerts, etc.

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/UpdatedResourceSelection.vue

@@ -38,11 +38,9 @@
   import { ContentNodeKinds } from 'kolibri/constants';
   import ContentCardList from '../../lessons/LessonResourceSelectionPage/ContentCardList.vue';
   import ResourceSelectionBreadcrumbs from '../../lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
+  import { PageNames } from '../../../constants';
   import { injectResourceSelection } from './sidePanels/LessonResourceSelection/useResourceSelection';
-  import {
-    ResourceContentSource,
-    ResourceSelectionView,
-  } from './sidePanels/LessonResourceSelection/constants';
+  import { ResourceContentSource } from './sidePanels/LessonResourceSelection/constants';
 
   export default {
     name: 'UpdatedResourceSelection',
@@ -119,10 +117,7 @@
     computed: {
       channelsLink() {
         return {
-          name: this.$route.name,
-          params: {
-            viewId: ResourceSelectionView.SELECTION_INDEX,
-          },
+          name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
         };
       },
       selectAllIndeterminate() {

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/constants.js

@@ -1,9 +1,3 @@
-export const ResourceSelectionView = {
-  SELECTION_INDEX: 'selectionIndex',
-  SELECT_FROM_BOOKMARKS: 'selectFromBookmarks',
-  SELECT_FROM_CHANNELS: 'selectFromChannels',
-};
-
 export const ResourceContentSource = {
   BOOKMARKS: 'bookmarks',
   TOPIC_TREE: 'topicTree',

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue

@@ -12,18 +12,24 @@
         <KIconButton
           v-if="goBack"
           icon="back"
-          @click="goBack"
+          @click="goBack()"
         />
-        <h1 class="side-panel-title">{{ view.title }}</h1>
+        <h1 class="side-panel-title">{{ title }}</h1>
       </div>
     </template>
     <div v-if="loading">
       <KCircularLoader />
     </div>
-    <component
+
+    <router-view
+      v-else
+      :setTitle="setTitle"
+      :setGoBack="setGoBack"
+    />
+    <!-- <component
       :is="view.component"
       v-else-if="!view.guard || view.guard()"
-    />
+    /> -->
 
     <template #bottomNavigation>
       <div class="bottom-nav-container">
@@ -54,19 +60,12 @@
   import bytesForHumans from 'kolibri/uiText/bytesForHumans';
   import { PageNames } from '../../../../../constants';
   import { coachStrings } from '../../../../common/commonCoachStrings';
-  import SelectionIndex from './subPages/SelectionIndex';
   import useResourceSelection from './useResourceSelection';
-  import SelectFromBookmarks from './subPages/SelectFromBookmarks.vue';
-  import SelectFromChannels from './subPages/SelectFromChannels.vue';
-  import { ResourceSelectionView } from './constants';
 
   export default {
     name: 'LessonResourceSelection',
     components: {
       SidePanelModal,
-      SelectionIndex,
-      SelectFromBookmarks,
-      SelectFromChannels,
     },
     setup() {
       const { selectedResources, loading } = useResourceSelection();
@@ -80,48 +79,17 @@
         saveAndFinishAction$,
       };
     },
+    data() {
+      return {
+        title: '',
+        goBack: null,
+      };
+    },
     computed: {
       topicId() {
         const { topicId } = this.$route.query;
         return topicId;
       },
-      viewId() {
-        const { viewId } = this.$route.params;
-        if (Object.values(ResourceSelectionView).includes(viewId)) {
-          return viewId;
-        }
-        return ResourceSelectionView.SELECTION_INDEX;
-      },
-      view() {
-        const componentMap = {
-          [ResourceSelectionView.SELECTION_INDEX]: {
-            title: this.$tr('manageLessonResourcesTitle'),
-            component: SelectionIndex,
-          },
-          [ResourceSelectionView.SELECT_FROM_BOOKMARKS]: {
-            title: this.selectFromBookmarks$(),
-            component: SelectFromBookmarks,
-            back: ResourceSelectionView.SELECTION_INDEX,
-          },
-          [ResourceSelectionView.SELECT_FROM_CHANNELS]: {
-            title: this.$tr('manageLessonResourcesTitle'),
-            component: SelectFromChannels,
-            back: ResourceSelectionView.SELECTION_INDEX,
-            guard: () => !!this.topicId,
-          },
-        };
-
-        return componentMap[this.viewId];
-      },
-      goBack() {
-        const { back } = this.view;
-        if (!back) {
-          return null;
-        }
-        return () => {
-          this.$router.push({ name: 'LESSON_SELECT_RESOURCES', params: { viewId: back } });
-        };
-      },
       totalSize() {
         let size = 0;
         this.selectedResources.forEach(resource => {
@@ -140,32 +108,17 @@
         });
       },
     },
-    watch: {
-      view(newView) {
-        if (newView.guard && !newView.guard()) {
-          if (this.goBack) {
-            this.goBack();
-          } else {
-            this.$router.push({
-              name: PageNames.LESSON_SELECT_RESOURCES,
-              params: { viewId: ResourceSelectionView.SELECTION_INDEX },
-            });
-          }
-        }
-      },
-    },
     methods: {
       closeSidePanel() {
         this.$router.push({
           name: PageNames.LESSON_SUMMARY_BETTER,
         });
       },
-    },
-    $trs: {
-      manageLessonResourcesTitle: {
-        message: 'Manage lesson resources',
-        context:
-          "In the 'Manage lesson resources' coaches can add new/remove resource material to a lesson.",
+      setTitle(title) {
+        this.title = title;
+      },
+      setGoBack(goBack) {
+        this.goBack = goBack;
       },
     },
   };

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromBookmarks.vue

@@ -12,19 +12,51 @@
 
 <script>
 
+  import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import UpdatedResourceSelection from '../../../UpdatedResourceSelection.vue';
   import { ResourceContentSource } from '../constants';
+  import { PageNames } from '../../../../../../constants';
 
   export default {
     name: 'SelectFromBookmarks',
     components: {
       UpdatedResourceSelection,
     },
+    setup(props, { root }) {
+      const { selectFromBookmarks$ } = coreStrings;
+
+      props.setTitle(selectFromBookmarks$());
+      props.setGoBack(() => {
+        root.$router.push({
+          name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+        });
+      });
+    },
+    props: {
+      setTitle: {
+        type: Function,
+        default: () => {},
+      },
+      setGoBack: {
+        type: Function,
+        default: () => {},
+      },
+    },
     data() {
       return {
         ResourceContentSource,
       };
     },
+    methods: {
+      /**
+       * @public
+       */
+      goBack() {
+        this.$router.push({
+          name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+        });
+      },
+    },
   };
 
 </script>

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromChannels.vue

@@ -41,27 +41,59 @@
   import { ResourceContentSource } from '../constants';
   import UpdatedResourceSelection from '../../../UpdatedResourceSelection.vue';
   import { injectResourceSelection } from '../useResourceSelection';
+  import { coachStrings } from '../../../../../common/commonCoachStrings';
+  import { PageNames } from '../../../../../../constants';
 
   export default {
     name: 'SelectFromChannels',
     components: {
       UpdatedResourceSelection,
     },
-    setup() {
+    setup(props, { root }) {
       const { selectFromChannels$, searchLabel$ } = coreStrings;
+      const { manageLessonResourcesTitle$ } = coachStrings;
       const { topic } = injectResourceSelection();
 
+      props.setTitle(manageLessonResourcesTitle$());
+      props.setGoBack(() => {
+        root.$router.push({
+          name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+        });
+      });
+
       return {
         topic,
         searchLabel$,
         selectFromChannels$,
       };
     },
+    props: {
+      setTitle: {
+        type: Function,
+        default: () => {},
+      },
+      setGoBack: {
+        type: Function,
+        default: () => {},
+      },
+    },
     data() {
       return {
         ResourceContentSource,
       };
     },
+    beforeRouteEnter(to, _, next) {
+      const { topicId } = to.query;
+      if (!topicId) {
+        return next({
+          name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+          params: {
+            ...to.params,
+          },
+        });
+      }
+      return next();
+    },
   };
 
 </script>