Merge pull request learningequality#11661 from nucleogenesis/fix--qui…

…z-rebase-regressions Quiz rebase regression fixes
ozer550 · Dec 21, 2023 · c372cd0 · c372cd0
2 parents 439e564 + efb974a
commit c372cd0
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 47 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -43,7 +43,6 @@
           tabsId="quizSectionTabs"
           class="section-tabs"
           :tabs="tabs"
-          :appearanceOverrides="{ padding: '0px', overflow: 'hidden' }"
           :activeTabId="activeSection ?
             activeSection.section_id :
             '' "
@@ -108,36 +107,39 @@
       tabsId="quizSectionTabs"
       :activeTabId="activeSection ? activeSection.section_id : ''"
     >
-      <p>{{ activeSection.section_id }}</p>
-      <!-- TODO This should be a separate component like "empty section container" or something -->
-      <div v-if="!activeQuestions.length" class="no-question-style">
-        <KGrid class="questions-list-label-row">
-          <KGridItem
-            class="right-side-heading"
-            style="padding: 0.7em 0.75em;"
+      <KGrid v-if="!activeQuestions.length" class="questions-list-label-row">
+        <KGridItem
+          class="right-side-heading"
+          style="padding: 0.7em 0.75em;"
+        >
+          <KButton
+            primary
+            :text="coreString('optionsLabel')"
           >
-            <KButton
-              primary
-              :text="coreString('optionsLabel')"
-            >
-              <template #menu>
-                <KDropdownMenu
-                  :primary="false"
-                  :disabled="false"
-                  :hasIcons="true"
-                  :options="activeSectionActions"
-                  @tab="e => (e.preventDefault() || $refs.selectAllCheckbox.focus())"
-                  @select="handleActiveSectionAction"
-                />
-              </template>
-            </KButton>
-          </KGridItem>
-        </KGrid>
+            <template #menu>
+              <KDropdownMenu
+                :primary="false"
+                :disabled="false"
+                :hasIcons="true"
+                :options="activeSectionActions"
+                @tab="e => (e.preventDefault() || $refs.selectAllCheckbox.focus())"
+                @select="handleActiveSectionAction"
+              />
+            </template>
+          </KButton>
+        </KGridItem>
+      </KGrid>
+      <!-- TODO This should be a separate component like "empty section container" or something -->
+      <div
+        v-if="!activeQuestions.length"
+        style="text-align: center; padding: 0 0 1em 0; max-width: 350px; margin: 0 auto;"
+      >
+        <!-- TODO This question mark thing should probably be an SVG for improved a11y -->
         <div class="question-mark-layout">
           <span class="help-icon-style">?</span>
         </div>
 
-        <p class="no-question-style">
+        <p style="margin-top: 1em; font-weight: bold;">
           {{ noQuestionsInSection$() }}
         </p>
 
@@ -146,6 +148,7 @@
         <KButton
           primary
           icon="plus"
+          style="margin-top: 1em;"
           @click="openSelectResources(activeSection.section_id)"
         >
           {{ addQuestionsLabel$() }}
@@ -589,10 +592,11 @@
   }
 
   .question-mark-layout {
-    align-items: center;
     width: 2.5em;
     height: 2.5em;
     margin: auto;
+    line-height: 1.7;
+    text-align: center;
     background-color: #dbc3d4;
   }
 
@@ -602,10 +606,6 @@
     color: #996189;
   }
 
-  .no-question-style {
-    font-weight: bold;
-  }
-
   .kgrid-alignment-style {
     padding-right: 1em;
     padding-left: 0;

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -139,8 +139,8 @@
     >
       <transition-group>
         <Draggable
-          v-for="(section,index) in sectionOrderList"
-          :key="index"
+          v-for="(section) in sectionOrderList"
+          :key="section.section_id"
           :style="draggableStyle"
         >
           <DragHandle>
@@ -175,7 +175,7 @@
                   :style="{ color: $themePalette.grey.v_700 }"
                 >
                   <p
-                    v-if="activeSection.value.section_id === section.section_id"
+                    v-if="activeSection.section_id === section.section_id"
                     class="current-section-text space-content"
                   >
                     {{ currentSection$() }}
@@ -197,7 +197,7 @@
         >
           <KButton
             :text="deleteSectionLabel$()"
-            @click="deleteSection(activeSection.value.section_id)"
+            @click="deleteSection(activeSection.section_id)"
           />
         </KGridItem>
         <KGridItem
@@ -222,6 +222,8 @@
 
 <script>
 
+  import { ref } from 'kolibri.lib.vueCompositionApi';
+  import { get } from '@vueuse/core';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import Draggable from 'kolibri.coreVue.components.Draggable';
@@ -264,15 +266,28 @@
         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 {
+        // useQuizCreation
         activeSection,
         allSections,
         updateSection,
         updateQuiz,
         deleteSection,
+        // Form models
+        selectedQuestionOrder,
+        numberOfQuestions,
+        descriptionText,
+        sectionTitle,
+        // Responsiveness
         windowIsLarge,
         windowIsSmall,
+        // i18n
         sectionSettings$,
         sectionTitle$,
         numberOfQuestionsLabel$,
@@ -291,14 +306,6 @@
         fixedOptionDescription$,
       };
     },
-    data() {
-      return {
-        selectedQuestionOrder: this.activeSection.value.learners_see_fixed_order,
-        numberOfQuestions: this.activeSection.value.question_count,
-        descriptionText: this.activeSection.value.description,
-        sectionTitle: this.activeSection.value.section_title,
-      };
-    },
     computed: {
       borderStyle() {
         return `border: 1px solid ${this.$themeTokens.fineLine}`;
@@ -316,7 +323,7 @@
        * @returns { QuizSection[] }
        */
       sectionOrderList() {
-        return this.allSections.value;
+        return this.allSections;
       },
       draggableStyle() {
         return {
@@ -330,7 +337,7 @@
       },
       applySettings() {
         this.updateSection({
-          section_id: this.activeSection.value.section_id,
+          section_id: this.activeSection.section_id,
           section_title: this.sectionTitle,
           description: this.descriptionText,
           question_count: this.numberOfQuestions,

diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
     "extends browserslist-config-kolibri"
   ],
   "volta": {
-    "node": "16.18.0"
+    "node": "16.18.0",
+    "yarn": "1.12.3"
   }
 }
-