add confirmation modal to sectioneditor, always set panelClosing=fals…

…e when closing
learningequality · Feb 13, 2024 · 42803e0 · 42803e0
1 parent 4fcda2c
commit 42803e0
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 17 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -215,30 +215,96 @@
         </KGridItem>
       </KGrid>
     </div>
+    <ConfirmCancellationModal
+      v-if="showConfirmationModal"
+      @cancel="handleCancelClose"
+      @continue="handleConfirmClose"
+    />
   </div>
 
 </template>
 
 
 <script>
 
-  import { ref } from 'kolibri.lib.vueCompositionApi';
-  import { get } from '@vueuse/core';
+  import isEqual from 'lodash/isEqual';
+  import { computed, ref, toRefs, watch } from 'kolibri.lib.vueCompositionApi';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import Draggable from 'kolibri.coreVue.components.Draggable';
   import DragContainer from 'kolibri.coreVue.components.DragContainer';
   import DragHandle from 'kolibri.coreVue.components.DragHandle';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
+  import ConfirmCancellationModal from './ConfirmCancellationModal.vue';
 
   export default {
     name: 'SectionEditor',
     components: {
+      ConfirmCancellationModal,
       Draggable,
       DragContainer,
       DragHandle,
     },
-    setup() {
+    setup(props, context) {
+      const {
+        activeSection,
+        allSections,
+        updateSection,
+        updateQuiz,
+        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 formDataHasChanged = computed(() => {
+        return !isEqual(
+          {
+            selectedQuestionOrder: selectedQuestionOrder.value,
+            numberOfQuestions: numberOfQuestions.value,
+            descriptionText: descriptionText.value,
+            sectionTitle: sectionTitle.value,
+          },
+          originalFormData
+        );
+      });
+
+      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$,
@@ -258,21 +324,10 @@
         fixedOptionDescription$,
       } = enhancedQuizManagementStrings;
 
-      const {
-        activeSection,
-        allSections,
-        updateSection,
-        updateQuiz,
-        deleteSection,
-      } = injectQuizCreation();
-
-      const selectedQuestionOrder = ref(get(activeSection).learners_see_fixed_order);
-      const numberOfQuestions = ref(get(activeSection).question_count);
-      const descriptionText = ref(get(activeSection).description);
-      const sectionTitle = ref(get(activeSection).section_title);
-
-      const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
       return {
+        showConfirmationModal,
+        handleCancelClose,
+        handleConfirmClose,
         // useQuizCreation
         activeSection,
         allSections,
@@ -306,6 +361,14 @@
         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}`;
@@ -343,6 +406,7 @@
           question_count: this.numberOfQuestions,
           learners_see_fixed_order: this.selectedQuestionOrder,
         });
+        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
@@ -99,6 +99,7 @@
     },
     methods: {
       handleClosePanel() {
+        this.panelClosing = false;
         this.$router.replace(this.closePanelRoute);
       },
       /**