Merge pull request #12080 from AlexVelezLl/12038-snackbar-improvements

Quiz creation: Snackbar improvements
learningequality · May 16, 2024 · 446aec6 · 446aec6
2 parents bb85f74 + 4887b4d
commit 446aec6
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 27 deletions.
diff --git a/kolibri/plugins/coach/assets/src/app.js b/kolibri/plugins/coach/assets/src/app.js
@@ -42,11 +42,13 @@ class CoachToolsModule extends KolibriApp {
         this.store.dispatch('loading');
       }
       const promises = [];
+
       // Clear the snackbar at every navigation to prevent it from re-appearing
       // when the next page component mounts.
-      if (this.store.state.core.snackbar.isVisible) {
+      if (this.store.state.core.snackbar.isVisible && !skipLoading.includes(to.name)) {
         this.store.dispatch('clearSnackbar');
       }
+
       this.store.commit('SET_PAGE_NAME', to.name);
       if (
         to.name &&

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -225,7 +225,7 @@
               :tooltip="coreString('deleteAction')"
               :aria-label="coreString('deleteAction')"
               :disabled="selectedActiveQuestions.length === 0"
-              @click="deleteActiveSelectedQuestions()"
+              @click="() => deleteQuestions()"
             />
           </template>
           <template #default="{ toggleItemState, isItemExpanded }">
@@ -396,6 +396,8 @@
         sectionDeletedNotification$,
         deleteConfirmation$,
         updateResources$,
+        changesSavedSuccessfully$,
+        questionsDeletedNotification$,
       } = enhancedQuizManagementStrings;
 
       const {
@@ -452,6 +454,8 @@
         questionList$,
         sectionDeletedNotification$,
         deleteConfirmation$,
+        changesSavedSuccessfully$,
+        questionsDeletedNotification$,
 
         toggleQuestionInSelection,
         selectAllQuestions,
@@ -633,6 +637,7 @@
           questions: newArray,
         };
         this.updateSection(payload);
+        this.$store.dispatch('createSnackbar', this.changesSavedSuccessfully$());
         this.dragActive = false;
       },
       handleAddSection() {
@@ -648,6 +653,16 @@
         const route = this.$router.getRoute(PageNames.QUIZ_SELECT_RESOURCES, { section_id });
         this.$router.push(route);
       },
+      deleteQuestions() {
+        const count = this.selectedActiveQuestions.length;
+        this.deleteActiveSelectedQuestions();
+        this.$store.dispatch(
+          'createSnackbar',
+          this.questionsDeletedNotification$({
+            count,
+          })
+        );
+      },
     },
   };
 

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
@@ -212,10 +212,8 @@
         const count = replacements.value.length;
         router.replace({
           name: PageNames.EXAM_CREATION_ROOT,
-          query: {
-            snackbar: numberOfQuestionsReplaced$({ count }),
-          },
         });
+        this.$store.dispatch('createSnackbar', numberOfQuestionsReplaced$({ count }));
       }
 
       function confirmReplacement() {

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -595,8 +595,8 @@
 
         this.$router.replace({
           ...this.prevRoute,
-          ...{ query: { snackbar: this.changesSavedSuccessfully$() } },
         });
+        this.$store.dispatch('createSnackbar', this.changesSavedSuccessfully$());
       },
       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
@@ -336,8 +336,8 @@
         removeSection(showDeleteConfirmation.value);
         router.replace({
           name: PageNames.EXAM_CREATION_ROOT,
-          query: { snackbar: sectionDeletedNotification$({ section_title }) },
         });
+        this.$store.dispatch('createSnackbar', sectionDeletedNotification$({ section_title }));
       }
 
       function handleDeleteSection(section_id) {
@@ -350,7 +350,7 @@
       const description = ref(activeSection.value.description);
       const section_title = ref(activeSection.value.section_title);
 
-      const formDataHasChanged = computed(() => {
+      const activeSectionChanged = computed(() => {
         return !isEqual(
           {
             learners_see_fixed_order: learners_see_fixed_order.value,
@@ -367,6 +367,19 @@
         );
       });
 
+      const sectionOrderList = ref(allSections.value);
+
+      const sectionOrderChanged = computed(() => {
+        return !isEqual(
+          allSections.value.map(section => section.section_id),
+          sectionOrderList.value.map(section => section.section_id)
+        );
+      });
+
+      const formDataHasChanged = computed(() => {
+        return activeSectionChanged.value || sectionOrderChanged.value;
+      });
+
       const { windowIsLarge, windowIsSmall } = useKResponsiveWindow();
 
       const resourceButtonLabel = computed(() => {
@@ -379,6 +392,7 @@
 
       return {
         formDataHasChanged,
+        sectionOrderChanged,
         showCloseConfirmation,
         showDeleteConfirmation,
         handleCancelClose,
@@ -389,7 +403,7 @@
         channels,
         activeSection,
         activeResourcePool,
-        allSections,
+        sectionOrderList,
         updateSection,
         updateQuiz,
         handleDeleteSection,
@@ -440,12 +454,6 @@
       dividerStyle() {
         return `color : ${this.$themeTokens.fineLine}`;
       },
-      /**
-       * @returns { QuizSection[] }
-       */
-      sectionOrderList() {
-        return this.allSections;
-      },
       draggableStyle() {
         return {
           backgroundColor: this.$themeTokens.surface,
@@ -473,7 +481,7 @@
     },
     methods: {
       handleSectionSort(e) {
-        this.updateQuiz({ question_sources: e.newArray });
+        this.sectionOrderList = e.newArray;
       },
       applySettings() {
         this.updateSection({
@@ -483,6 +491,11 @@
           question_count: this.question_count,
           learners_see_fixed_order: this.learners_see_fixed_order,
         });
+        if (this.sectionOrderChanged) {
+          this.updateQuiz({
+            question_sources: this.sectionOrderList,
+          });
+        }
         this.$store.dispatch('createSnackbar', this.changesSavedSuccessfully$());
       },
     },

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -98,17 +98,6 @@
         });
       },
     },
-    beforeRouteUpdate(to, from, next) {
-      // Handle snackbar query param and show message - particularly for when closing the side panel
-      // and saying "Action Succeeded"
-      if (to.query.snackbar) {
-        this.$store.dispatch('createSnackbar', to.query.snackbar).then(() => {
-          delete to.query.snackbar;
-          next(to);
-        });
-      }
-      next();
-    },
     mounted() {
       this.$store.dispatch('notLoading');
     },

diff --git a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
@@ -190,6 +190,10 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
     message: "Section '{ section_title }' deleted",
     context: 'A snackbar message that appears when the user deletes a section',
   },
+  questionsDeletedNotification: {
+    message: '{ count, number } { count, plural, one { question } other { questions }} deleted',
+    context: 'A snackbar message that appears when the user deletes questions',
+  },
   updateResources: {
     message: 'Update resources',
   },