Lesson Summary children routes refactor

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

@@ -22,8 +22,8 @@ export const PageNames = {
   LESSONS_ROOT: 'LESSONS_ROOT',
   LESSONS_ROOT_BETTER: 'LESSONS_ROOT_BETTER',
   LESSON_SUMMARY: 'LESSON_SUMMARY',
+  LESSON_SUMMARY_BETTER: 'LESSON_SUMMARY_BETTER',
   LESSON_CREATION_ROOT: 'LESSON_CREATION_ROOT',
-  LESSON_CREATION_ROOT_BETTER: 'LESSON_CREATION_ROOT_BETTER',
   RESOURCE_CONTENT_PREVIEW: 'RESOURCE_CONTENT_PREVIEW', // exclusively a route name
   LESSON_RESOURCE_SELECTION_ROOT: 'LESSON_RESOURCE_SELECTION_ROOT',
   LESSON_RESOURCE_SELECTION: 'LESSON_RESOURCE_SELECTION',

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

@@ -19,9 +19,6 @@ import LessonResourceSelectionPage from '../views/lessons/LessonResourceSelectio
 import LessonSelectionContentPreviewPage from '../views/lessons/LessonSelectionContentPreviewPage';
 import LessonEditDetailsPage from '../views/lessons/LessonEditDetailsPage';
 import LessonCreationPage from '../views/lessons/LessonCreationPage';
-import EditLessonDetails from '../views/lessons/LessonEditDetailsPage/EditLessonDetails';
-import PreviewSelectedResources from '../views/lessons/LessonSelectionContentPreviewPage/LessonContentPreview/PreviewSelectedResources';
-import LessonResourceSelection from '../views/lessons/LessonResourceSelectionPage/LessonResourceSelection';
 
 import { generateResourceHandler } from '../modules/resourceDetail/handlers';
 import LessonResourceLearnersPage from '../views/lessons/reports/LessonResourceLearnersPage';
@@ -40,6 +37,9 @@ import {
 } from '../modules/questionDetail/handlers';
 import LessonLearnerExercisePage from '../views/lessons/reports/LessonLearnerExercisePage.vue';
 import QuestionLearnersPage from '../views/common/reports/QuestionLearnersPage.vue';
+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 { classIdParamRequiredGuard, RouteSegments } from './utils';
 
 const {
@@ -105,9 +105,41 @@ export default [
     component: LessonCreationPage,
   },
   {
-    name: PageNames.LESSON_CREATION_ROOT_BETTER,
-    path: CLASS + LESSONS_TEMP + '/edit',
-    component: LessonCreationPage,
+    name: PageNames.LESSON_SUMMARY,
+    path: CLASS + LESSON + '/:tabId?',
+    component: LessonSummaryPage,
+    handler(toRoute, fromRoute) {
+      if (
+        fromRoute.name !== PageNames.LESSON_SUMMARY ||
+        toRoute.params.lessonId !== fromRoute.params.lessonId
+      ) {
+        return showLessonSummaryPage(store, toRoute.params);
+      }
+      store.dispatch('notLoading');
+    },
+    meta: {
+      titleParts: ['LESSON_NAME', 'CLASS_NAME'],
+    },
+  },
+  {
+    name: PageNames.LESSON_SUMMARY_BETTER,
+    path: CLASS + LESSONS_TEMP + '/:tabId?',
+    component: LessonSummaryPage,
+    props: {
+      isTemp: true,
+    },
+    handler(toRoute, fromRoute) {
+      if (
+        fromRoute.name !== PageNames.LESSON_SUMMARY ||
+        toRoute.params.lessonId !== fromRoute.params.lessonId
+      ) {
+        return showLessonSummaryPage(store, toRoute.params);
+      }
+      store.dispatch('notLoading');
+    },
+    meta: {
+      titleParts: ['LESSON_NAME', 'CLASS_NAME'],
+    },
     children: [
       {
         name: PageNames.LESSON_EDIT_DETAILS_BETTER,
@@ -134,23 +166,6 @@ export default [
       },
     ],
   },
-  {
-    name: PageNames.LESSON_SUMMARY,
-    path: CLASS + LESSON + '/:tabId?',
-    component: LessonSummaryPage,
-    handler(toRoute, fromRoute) {
-      if (
-        fromRoute.name !== PageNames.LESSON_SUMMARY ||
-        toRoute.params.lessonId !== fromRoute.params.lessonId
-      ) {
-        return showLessonSummaryPage(store, toRoute.params);
-      }
-      store.dispatch('notLoading');
-    },
-    meta: {
-      titleParts: ['LESSON_NAME', 'CLASS_NAME'],
-    },
-  },
   {
     name: PageNames.LESSON_EDIT_DETAILS,
     path: CLASS + LESSON + '/edit',

kolibri/plugins/coach/assets/src/views/lessons/LessonCreationPage.vue

@@ -20,24 +20,6 @@
         @cancel="() => $router.go(-1)"
       />
     </KPageContainer>
-    <SidePanelModal
-      v-if="showSidePanel"
-      ref="resourcePanel"
-      alignment="right"
-      sidePanelWidth="700px"
-      closeButtonIconType="close"
-      @closePanel="() => $router.go(-1)"
-      @shouldFocusFirstEl="() => null"
-    >
-      <template #header>
-        <KIconButton
-          v-if="true"
-          icon="back"
-          @click="$router.go(-1)"
-        />
-      </template>
-      <router-view @closePanel="() => $router.go(-1)" />
-    </SidePanelModal>
   </CoachImmersivePage>
 
 </template>
@@ -48,24 +30,18 @@
   import { ERROR_CONSTANTS } from 'kolibri/constants';
   import CatchErrors from 'kolibri/utils/CatchErrors';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
-  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import AssignmentDetailsModal from '../common/assignments/AssignmentDetailsModal';
   import commonCoach from '../common';
   import CoachImmersivePage from '../CoachImmersivePage';
-  import { PageNames } from '../../constants';
 
   export default {
     name: 'LessonCreationPage',
     components: {
       AssignmentDetailsModal,
       CoachImmersivePage,
-      SidePanelModal,
     },
     mixins: [commonCoach, commonCoreStrings],
     computed: {
-      showSidePanel() {
-        return this.$route.name === PageNames.LESSON_CREATION_ROOT_BETTER;
-      },
       classId() {
         return this.$route.params.classId;
       },

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

@@ -77,6 +77,7 @@
         </KPageContainer>
       </KGridItem>
     </KGrid>
+    <router-view />
   </CoachAppBarPage>
 
 </template>
@@ -125,6 +126,10 @@
         type: Boolean,
         default: true,
       },
+      isTemp: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       const workingResourcesBackup = [...(this.$store.state.lessonSummary.workingResources || [])];
@@ -150,6 +155,11 @@
         return this.$route.params.lessonId;
       },
       lessonSelectionRootPage() {
+        if (this.isTemp) {
+          return this.classRoute(PageNames.LESSON_SELECT_RESOURCES, {
+            lessonId: this.lessonId,
+          });
+        }
         return this.classRoute(PageNames.LESSON_RESOURCE_SELECTION_ROOT, {
           lessonId: this.lessonId,
         });

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

@@ -0,0 +1,34 @@
+<template>
+
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
+    closeButtonIconType="close"
+    @closePanel="() => $router.go(-1)"
+    @shouldFocusFirstEl="() => null"
+  >
+    <template #header>
+      <KIconButton
+        v-if="true"
+        icon="back"
+        @click="$router.go(-1)"
+      />
+    </template>
+    <h1>EditLessonDetails</h1>
+  </SidePanelModal>
+
+</template>
+
+
+<script>
+
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
+
+  export default {
+    name: 'EditLessonDetails',
+    components: {
+      SidePanelModal,
+    },
+  };
+
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
+    closeButtonIconType="close"
+    @closePanel="() => $router.go(-1)"
+    @shouldFocusFirstEl="() => null"
+  >
+    <template #header>
+      <KIconButton
+        v-if="true"
+        icon="back"
+        @click="$router.go(-1)"
+      />
+    </template>
+    <h1>LessonResourceSelection</h1>
+  </SidePanelModal>
+
+</template>
+
+
+<script>
+
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
+
+  export default {
+    name: 'LessonResourceSelection',
+    components: {
+      SidePanelModal,
+    },
+  };
+
+</script>

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

@@ -0,0 +1,27 @@
+<template>
+
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
+    closeButtonIconType="close"
+    @closePanel="() => $router.go(-1)"
+    @shouldFocusFirstEl="() => null"
+  >
+    <h1>PreviewSelectedResources</h1>
+  </SidePanelModal>
+
+</template>
+
+
+<script>
+
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
+
+  export default {
+    name: 'PreviewSelectedResources',
+    components: {
+      SidePanelModal,
+    },
+  };
+
+</script>