leverage vue-router nested routes for simplified side panel routing

learningequality · Feb 26, 2024 · 7c0d1f8 · 7c0d1f8
1 parent 2fb3142
commit 7c0d1f8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 76 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -112,7 +112,7 @@
   import uniqWith from 'lodash/uniqWith';
   import isEqual from 'lodash/isEqual';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import { toRefs, computed, ref, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
+  import { computed, ref, getCurrentInstance, watch } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { ContentNodeResource, ChannelResource } from 'kolibri.resources';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
@@ -314,29 +314,22 @@
 
       function handleCancelClose() {
         showConfirmationModal.value = false;
-        context.emit('cancelClosePanel');
       }
 
       function handleConfirmClose() {
-        handleCancelClose();
         context.emit('closePanel');
       }
 
-      watch(panelClosing, isClosing => {
-        if (isClosing) {
-          if (
-            workingResourcePool.value.length != activeResourcePool.value.length ||
-            !isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
-          ) {
-            showConfirmationModal.value = true;
-          } else {
-            context.emit('cancelClosePanel');
-            context.emit('closePanel');
-          }
-        }
+      const workingPoolHasChanged = computed(() => {
+        return (
+          workingResourcePool.value.length != activeResourcePool.value.length ||
+          !isEqual(workingResourcePool.value.sort(), activeResourcePool.value.sort())
+        );
       });
 
       return {
+        prevRoute,
+        workingPoolHasChanged,
         handleConfirmClose,
         handleCancelClose,
         topic,
@@ -489,7 +482,7 @@
         //Also reset workingResourcePool
         this.resetWorkingResourcePool();
 
-        this.$emit('closePanel');
+        this.$router.replace(this.prevRoute);
       },
       selectionMetadata(content) {
         if (content.kind === ContentNodeKinds.TOPIC) {

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -246,7 +246,7 @@
       DragContainer,
       DragHandle,
     },
-    setup(props, context) {
+    setup(_, context) {
       const {
         activeSection,
         allSections,
@@ -255,57 +255,40 @@
         deleteSection,
       } = injectQuizCreation();
 
-      const { panelClosing } = toRefs(props);
-
       const showConfirmationModal = ref(false);
 
       function handleCancelClose() {
         showConfirmationModal.value = false;
-        context.emit('cancelClosePanel');
       }
 
       function handleConfirmClose() {
-        handleCancelClose();
         context.emit('closePanel');
       }
 
-      const selectedQuestionOrder = ref(activeSection.value.learners_see_fixed_order);
-      const numberOfQuestions = ref(activeSection.value.question_count);
-      const descriptionText = ref(activeSection.value.description);
-      const sectionTitle = ref(activeSection.value.section_title);
-
-      const originalFormData = {
-        selectedQuestionOrder: activeSection.value.learners_see_fixed_order,
-        numberOfQuestions: activeSection.value.question_count,
-        descriptionText: activeSection.value.description,
-        sectionTitle: activeSection.value.section_title,
-      };
+      const learners_see_fixed_order = ref(activeSection.value.learners_see_fixed_order);
+      const question_count = ref(activeSection.value.question_count);
+      const description = ref(activeSection.value.description);
+      const section_title = ref(activeSection.value.section_title);
 
       const formDataHasChanged = computed(() => {
         return !isEqual(
           {
-            selectedQuestionOrder: selectedQuestionOrder.value,
-            numberOfQuestions: numberOfQuestions.value,
-            descriptionText: descriptionText.value,
-            sectionTitle: sectionTitle.value,
+            learners_see_fixed_order: learners_see_fixed_order.value,
+            question_count: question_count.value,
+            description: description.value,
+            section_title: section_title.value,
           },
-          originalFormData
+          pick(activeSection.value, [
+            'learners_see_fixed_order',
+            'question_count',
+            'description',
+            'section_title',
+          ])
         );
       });
 
       const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
 
-      watch(panelClosing, isClosing => {
-        if (isClosing) {
-          if (formDataHasChanged.value) {
-            showConfirmationModal.value = true;
-          } else {
-            context.emit('cancelClosePanel');
-            context.emit('closePanel');
-          }
-        }
-      });
-
       const {
         sectionSettings$,
         sectionTitle$,
@@ -326,6 +309,7 @@
       } = enhancedQuizManagementStrings;
 
       return {
+        formDataHasChanged,
         showConfirmationModal,
         handleCancelClose,
         handleConfirmClose,
@@ -362,14 +346,6 @@
         fixedOptionDescription$,
       };
     },
-    props: {
-      // eslint-disable-next-line kolibri/vue-no-unused-properties
-      panelClosing: {
-        type: Boolean,
-        default: false,
-        required: true,
-      },
-    },
     computed: {
       borderStyle() {
         return `border: 1px solid ${this.$themeTokens.fineLine}`;
@@ -415,7 +391,6 @@
           question_count: this.question_count,
           learners_see_fixed_order: this.learners_see_fixed_order,
         });
-        this.$emit('closePanel');
       },
     },
   };

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -1,30 +1,21 @@
 <template>
 
-  <div>
-    <SidePanelModal
-      v-if="$route.params.section_id"
-      ref="resourcePanel"
-      alignment="right"
-      sidePanelWidth="700px"
-      :closeButtonIconType="closeIcon"
-      @closePanel="handleClosePanel"
-      @shouldFocusFirstEl="findFirstEl()"
-    >
-      <component :is="panel" :ref="$route.name" :closePanelRoute="closePanelRoute" />
-    </SidePanelModal>
-    <ConfirmCancellationModal
-      v-if="showConfirmationModal"
-      :closePanelRoute="closePanelRoute"
-      @cancel="showConfirmationModal = false"
-    />
-  </div>
+  <SidePanelModal
+    ref="resourcePanel"
+    alignment="right"
+    sidePanelWidth="700px"
+    :closeButtonIconType="closeIcon"
+    @closePanel="handleClosePanel"
+    @shouldFocusFirstEl="findFirstEl()"
+  >
+    <router-view @closePanel="handleClosePanel" />
+  </SidePanelModal>
 
 </template>
 
 
 <script>
 
-  import { ref } from 'kolibri.lib.vueCompositionApi';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { PageNames } from '../../../constants';