Merge pull request #12432 from nucleogenesis/fix--apply-settings-quietly

EQM: Section re-ordering moved to side panel, remove from section editor
learningequality · Jul 12, 2024 · 791cafc · 791cafc
2 parents 2fa688c + 894ce67
commit 791cafc
Show file tree

Hide file tree

Showing 8 changed files with 477 additions and 80 deletions.
diff --git a/kolibri/plugins/coach/assets/src/app.js b/kolibri/plugins/coach/assets/src/app.js
@@ -39,6 +39,7 @@ class CoachToolsModule extends KolibriApp {
         PageNames.QUIZ_REPLACE_QUESTIONS,
         PageNames.QUIZ_SELECT_PRACTICE_QUIZ,
         PageNames.QUIZ_SELECT_RESOURCES,
+        PageNames.QUIZ_SECTION_ORDER,
         PageNames.BOOK_MARKED_RESOURCES,
         pages.ReportsQuizLearnerPage.name,
       ];

diff --git a/kolibri/plugins/coach/assets/src/composables/quizCreationSpecs.js b/kolibri/plugins/coach/assets/src/composables/quizCreationSpecs.js
@@ -117,7 +117,7 @@ export const QuizQuestion = {
 export const QuizSection = {
   section_id: {
     type: String,
-    default: () => String(performance.now()),
+    default: () => Math.random().toString(36).substring(7), // makes a random 7 digit string
   },
   section_title: {
     type: String,

diff --git a/kolibri/plugins/coach/assets/src/constants/index.js b/kolibri/plugins/coach/assets/src/constants/index.js
@@ -14,6 +14,7 @@ export const PageNames = {
   QUIZ_REPLACE_QUESTIONS: 'QUIZ_REPLACE_QUESTIONS',
   QUIZ_SELECT_RESOURCES: 'QUIZ_SELECT_RESOURCES',
   QUIZ_SELECT_PRACTICE_QUIZ: 'QUIZ_SELECT_PRACTICE_QUIZ',
+  QUIZ_SECTION_ORDER: 'QUIZ_SECTION_ORDER',
   BOOK_MARKED_RESOURCES: 'BOOK_MARKED_RESOURCES',
 
   EXAM_REPORT: 'EXAM_REPORT',

diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -5,6 +5,7 @@ import ResourceSelection from '../views/plan/CreateExamPage/ResourceSelection.vu
 import ReplaceQuestions from '../views/plan/CreateExamPage/ReplaceQuestions.vue';
 import CoachExamsPage from '../views/plan/CoachExamsPage';
 import QuizSummaryPage from '../views/plan/QuizSummaryPage';
+import SectionOrder from '../views/plan/CreateExamPage/SectionOrder';
 
 export default [
   {
@@ -35,6 +36,11 @@ export default [
         path: 'select-resources/:topic_id?',
         component: ResourceSelection,
       },
+      {
+        name: PageNames.QUIZ_SECTION_ORDER,
+        path: 'section-order',
+        component: SectionOrder,
+      },
       {
         name: PageNames.QUIZ_SELECT_PRACTICE_QUIZ,
         path: 'select-quiz/:topic_id?',

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -5,20 +5,20 @@
       <KCircularLoader />
     </div>
     <div v-else>
-      <h5
+      <h1
         v-if="selectPracticeQuiz"
         class="select-folder-style"
       >
         {{ selectPracticeQuizLabel$() }}
-      </h5>
+      </h1>
       <div v-else>
-        <h5 class="select-folder-style">
+        <h1 class="select-folder-style">
           {{
             selectResourcesDescription$({
               sectionTitle: displaySectionTitle(activeSection, activeSectionIndex),
             })
           }}
-        </h5>
+        </h1>
         <p>
           {{ numberOfQuestionsSelected$({ count: activeQuestions.length }) }}
           <span
@@ -999,7 +999,6 @@
   .select-folder-style {
     margin-top: 0.5em;
     margin-bottom: 0.5em;
-    font-size: 18px;
   }
 
   .align-select-folder-style {

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -4,12 +4,9 @@
     v-if="activeSection"
     class="section-settings-content"
   >
-    <h5
-      class="section-settings-top-heading"
-      :style="{ color: $themeTokens.text }"
-    >
+    <h1 :style="{ color: $themeTokens.text }">
       {{ sectionSettings$() }}
-    </h5>
+    </h1>
 
     <KTextbox
       ref="sectionTitle"
@@ -81,49 +78,6 @@
       {{ resourceButtonLabel }}
     </KRouterLink>
 
-    <hr :style="dividerStyle" >
-
-    <h5 class="section-order-style section-settings-heading">
-      {{ sectionOrder$() }}
-    </h5>
-
-    <DragContainer
-      v-if="sectionOrderList.length > 0"
-      :items="sectionOrderList"
-      @sort="handleSectionSort"
-    >
-      <transition-group>
-        <Draggable
-          v-for="(section, index) in sectionOrderList"
-          :key="section.section_id"
-          :style="draggableStyle"
-        >
-          <DragHandle>
-            <div
-              :style="
-                activeSection.section_id === section.section_id ? activeSectionStyles : borderStyle
-              "
-              class="section-order-list"
-            >
-              <DragSortWidget
-                class="drag-title"
-                moveUpText="up"
-                moveDownText="down"
-                :noDrag="true"
-                :isFirst="index === 0"
-                :isLast="index === sectionOrderList.length - 1"
-                @moveUp="() => handleKeyboardDragUp(index, sectionOrderList)"
-                @moveDown="() => handleKeyboardDragDown(index, sectionOrderList)"
-              />
-              <span class="drag-title">
-                {{ sectionOrderingTitle(section) }}
-              </span>
-            </div>
-          </DragHandle>
-        </Draggable>
-      </transition-group>
-    </DragContainer>
-
     <div class="bottom-buttons-style">
       <KGrid>
         <KGridItem
@@ -145,7 +99,7 @@
           <KButton
             :primary="true"
             :text="applySettings$()"
-            @click="applySettings"
+            @click="applySettings()"
           />
         </KGridItem>
       </KGrid>
@@ -217,7 +171,6 @@
         numberOfQuestionsLabel$,
         optionalDescriptionLabel$,
         numberOfQuestionsSelected$,
-        currentSection$,
         deleteSectionLabel$,
         applySettings$,
         sectionOrder$,
@@ -383,7 +336,6 @@
         optionalDescriptionLabel$,
         numberOfQuestionsSelected$,
         sectionDeletedNotification$,
-        currentSection$,
         deleteSectionLabel$,
         applySettings$,
         closeConfirmationTitle$,
@@ -421,13 +373,10 @@
       },
     },
     beforeRouteLeave(to, __, next) {
-      if (!this.showCloseConfirmation && this.formDataHasChanged && !this.showDeleteConfirmation) {
-        if (to.name === PageNames.QUIZ_SELECT_RESOURCES) {
-          // We're going from here to select resources so we'll save settings and move on without
-          // asking for confirmation.
-          // TODO This needs to be updated when/if "autosave" is implemented
-          this.applySettings();
-          next();
+      if (this.formDataHasChanged) {
+        if (!this.showCloseConfirmation && !this.showDeleteConfirmation) {
+          this.applySettings(to.name);
+          next(false);
         } else {
           this.showCloseConfirmation = true;
           next(false);
@@ -444,17 +393,19 @@
           section => section.section_id === reorderedId,
         );
       },
-      applySettings() {
+      applySettings(nextRouteName = PageNames.EXAM_CREATION_ROOT) {
         if (this.sectionTitleInvalid) {
           this.$refs.sectionTitle.focus();
           return;
         }
+
         this.updateSection({
           sectionIndex: this.activeSectionIndex,
           section_title: this.section_title,
           description: this.description,
           learners_see_fixed_order: this.learners_see_fixed_order,
         });
+
         if (this.sectionOrderChanged) {
           // Apply the new sorting to the updated sections,
           // otherwise the edits we just made will be lost
@@ -467,16 +418,19 @@
           });
         }
 
-        if (
-          this.reorderedSectionIndex !== null &&
-          this.reorderedSectionIndex !== this.activeSectionIndex
-        ) {
-          this.$router.replace({
-            name: PageNames.EXAM_CREATION_ROOT,
+        if (nextRouteName) {
+          const sectionIndex =
+            this.reorderedSectionIndex !== null &&
+            this.reorderedSectionIndex !== this.activeSectionIndex
+              ? this.reorderedSectionIndex
+              : this.activeSectionIndex;
+
+          this.$router.push({
+            name: nextRouteName,
             params: {
+              sectionIndex,
               classId: this.$route.params.classId,
               quizId: this.$route.params.quizId,
-              sectionIndex: this.reorderedSectionIndex,
             },
           });
         } else {
@@ -543,10 +497,6 @@
     font-size: 1em;
   }
 
-  .current-section-style {
-    font-size: 1em;
-  }
-
   .drag-title {
     display: inline-block;
     padding: 8px;
@@ -575,8 +525,4 @@
     width: 100%;
   }
 
-  .current-section-text {
-    text-align: right;
-  }
-
 </style>