Merge pull request #12281 from nucleogenesis/fix--make-eqm-validations-good

EQM: Validation improvements

Author: rtibbles

kolibri/plugins/coach/assets/src/composables/useQuizCreation.js

@@ -44,6 +44,8 @@ export default function useQuizCreation() {
   // Local state
   // -----------
 
+  const quizHasChanged = ref(false);
+
   /** @type {ref<Quiz>}
    * The "source of truth" quiz object from which all reactive properties should derive
    * This will be validated and sent to the API when the user saves the quiz */
@@ -74,6 +76,7 @@ export default function useQuizCreation() {
    * @throws {TypeError} if section is not a valid QuizSection
    **/
   function updateSection({ section_id, ...updates }) {
+    set(quizHasChanged, true);
     const targetSection = get(allSections).find(section => section.section_id === section_id);
     if (!targetSection) {
       throw new TypeError(`Section with id ${section_id} not found; cannot be updated.`);
@@ -300,6 +303,7 @@ export default function useQuizCreation() {
         setActiveSection(get(allSections)[0].section_id);
       }
     }
+    set(quizHasChanged, false);
   }
 
   /**
@@ -349,6 +353,7 @@ export default function useQuizCreation() {
    * @affects _quiz
    * Validates the input type and then updates _quiz with the given updates */
   function updateQuiz(updates) {
+    set(quizHasChanged, true);
     if (!validateQuiz(updates)) {
       throw new TypeError(`Updates are not a valid Quiz object: ${JSON.stringify(updates)}`);
     }
@@ -583,6 +588,7 @@ export default function useQuizCreation() {
     removeQuestionFromSelection,
 
     // Computed
+    quizHasChanged,
     channels,
     replacements,
     quiz,

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue

@@ -324,6 +324,8 @@
       @cancel="handleShowConfirmation"
       @submit="handleConfirmDelete"
     >
+      <!-- TODO Use `displaySectionTitle` here once #12274 is merged as that PR
+        changes how we handle section indexing, which is needed for displaySectionTitle -->
       {{ deleteConfirmation$({ section_title: activeSection.section_title }) }}
     </KModal>
 
@@ -565,6 +567,8 @@
         this.$nextTick(() => {
           this.$store.dispatch(
             'createSnackbar',
+            // TODO Use `displaySectionTitle` here once #12274 is merged as that PR
+            // changes how we handle section indexing
             this.sectionDeletedNotification$({ section_title })
           );
           this.focusActiveSectionTab();

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue

@@ -358,7 +358,7 @@
       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 section_title = ref(activeSection.value.section_title.trim());
 
       const sectionTitleInvalidText = computed(() => {
         if (section_title.value.trim() === '') {
@@ -370,7 +370,7 @@
             // Skip the current section
             return true;
           }
-          return section.section_title !== section_title.value;
+          return section.section_title.trim() !== section_title.value.trim();
         });
         if (!titleIsUnique) {
           return sectionTitleUniqueWarning$();
@@ -383,7 +383,7 @@
             learners_see_fixed_order: learners_see_fixed_order.value,
             question_count: question_count.value,
             description: description.value,
-            section_title: section_title.value,
+            section_title: section_title.value.trim(),
           },
           pick(activeSection.value, [
             'learners_see_fixed_order',

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue

@@ -87,6 +87,19 @@
 
     </KPageContainer>
 
+    <KModal
+      v-if="closeConfirmationToRoute"
+      :submitText="coreString('continueAction')"
+      :cancelText="coreString('cancelAction')"
+      :title="closeConfirmationTitle$()"
+      @cancel="closeConfirmationToRoute = null"
+      @submit="$router.push(closeConfirmationToRoute)"
+    >
+      {{ closeConfirmationMessage$() }}
+    </KModal>
+
+
+
     <router-view v-if="quizInitialized" />
 
   </CoachImmersivePage>
@@ -121,14 +134,24 @@
     },
     mixins: [commonCoreStrings],
     setup() {
+      const closeConfirmationToRoute = ref(null);
       const { classId, groups } = useCoreCoach();
-      const { quiz, updateQuiz, saveQuiz, initializeQuiz, allSectionsEmpty } = useQuizCreation();
+      const {
+        quizHasChanged,
+        quiz,
+        updateQuiz,
+        saveQuiz,
+        initializeQuiz,
+        allSectionsEmpty,
+      } = useQuizCreation();
       const showError = ref(false);
       const quizInitialized = ref(false);
 
       const {
         saveAndClose$,
         allSectionsEmptyWarning$,
+        closeConfirmationTitle$,
+        closeConfirmationMessage$,
         sectionOrderLabel$,
         randomizedLabel$,
         fixedLabel$,
@@ -137,10 +160,14 @@
       } = enhancedQuizManagementStrings;
 
       return {
+        closeConfirmationTitle$,
+        closeConfirmationMessage$,
         classId,
         groups,
+        closeConfirmationToRoute,
         showError,
         quiz,
+        quizHasChanged,
         saveQuiz,
         updateQuiz,
         initializeQuiz,
@@ -202,6 +229,14 @@
         });
       },
     },
+    beforeRouteLeave(to, from, next) {
+      if (this.quizHasChanged && !this.closeConfirmationToRoute) {
+        this.closeConfirmationToRoute = to;
+        next(false);
+      } else {
+        next();
+      }
+    },
     mounted() {
       this.$store.dispatch('notLoading');
     },
@@ -234,7 +269,7 @@
             }
           })
           .catch(error => {
-            const errors = CatchErrors(error, [ERROR_CONSTANTS.UNIQUE]);
+            const errors = CatchErrors(error, [ERROR_CONSTANTS.UNIQUE, 'BLANK']);
             this.$refs.detailsModal.handleSubmitFailure();
             if (errors.length) {
               this.$refs.detailsModal.handleSubmitTitleFailure();

kolibri/plugins/coach/assets/src/views/plan/assignments/AssignmentDetailsModal.vue

@@ -302,7 +302,6 @@
           });
         } else {
           this.formIsSubmitted = false;
-          this.$refs.titleField.focus();
         }
       },
       /**
@@ -318,6 +317,9 @@
       handleSubmitTitleFailure() {
         this.formIsSubmitted = false;
         this.showTitleError = true;
+        this.$refs.titleField.focus();
+        // Scroll to the title field in case focus() didn't do that immediately
+        this.window.scrollTo({ top: 0, behavior: 'smooth' });
       },
     },
   };