quiz side-panel routing updates

learningequality · Nov 11, 2024 · 645afa8 · 645afa8
1 parent 87418dd
commit 645afa8
Show file tree

Hide file tree

Showing 6 changed files with 531 additions and 498 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
@@ -1,149 +1,157 @@
 <template>
 
-  <div class="wrapper">
-    <h1 class="section-header">
-      {{
-        replaceQuestions$({
-          sectionTitle: displaySectionTitle(activeSection, activeSectionIndex),
-        })
-      }}
-    </h1>
-    <p>{{ replaceQuestionsHeading$() }}</p>
-    <span
-      class="divider"
-      :style="{ borderTop: `solid 1px ${$themeTokens.fineLine}` }"
-    >
-    </span>
-    <AccordionContainer :items="replacementQuestionPool">
-      <template #left-actions>
-        <KCheckbox
-          ref="selectAllCheckbox"
-          class="select-all-box"
-          :label="selectAllLabel$()"
-          :checked="selectAllIsChecked"
-          :indeterminate="selectAllIsIndeterminate"
-          @change="selectAllReplacementQuestions"
-        />
-      </template>
-      <template #right-actions>
-        <KIconButton
-          icon="expandAll"
-          :tooltip="expandAll$()"
-          :disabled="!canExpandAll"
-          @click="expandAll"
-        />
-        <KIconButton
-          icon="collapseAll"
-          :tooltip="collapseAll$()"
-          :disabled="!canCollapseAll"
-          @click="collapseAll"
-        />
-      </template>
-      <AccordionItem
-        v-for="(question, index) in replacementQuestionPool"
-        :id="`replacement-question-${question.item}`"
-        :key="`replacement-question-${question.item}`"
-        :title="displayQuestionTitle(question, activeResourceMap[question.exercise_id].title)"
-        :aria-selected="
-          replacements.length && replacements.length === selectedActiveQuestions.length
-        "
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
+  >
+    <template #header>
+      <h1 class="section-header">
+        {{
+          replaceQuestions$({
+            sectionTitle: displaySectionTitle(activeSection, activeSectionIndex),
+          })
+        }}
+      </h1>
+    </template>
+    <div class="wrapper">
+      <p>{{ replaceQuestionsHeading$() }}</p>
+      <span
+        class="divider"
+        :style="{ borderTop: `solid 1px ${$themeTokens.fineLine}` }"
       >
-        <template #heading="{ title }">
-          <h3 class="accordion-header">
-            <KCheckbox
-              class="accordion-checkbox"
-              :checked="replacements.map(r => r.item).includes(question.item)"
-              @change="() => toggleInReplacements(question)"
-            />
-            <KButton
-              tabindex="0"
-              appearance="basic-link"
-              :style="accordionStyleOverrides"
-              class="accordion-header-label"
-              :aria-expanded="isExpanded(question.item)"
-              :aria-controls="`question-panel-${question.item}`"
-              @click="toggle(index)"
-            >
-              <span>{{ title }}</span>
-              <KIcon
-                class="chevron-icon"
-                :icon="isExpanded(index) ? 'chevronUp' : 'chevronRight'"
-              />
-            </KButton>
-          </h3>
+      </span>
+      <AccordionContainer :items="replacementQuestionPool">
+        <template #left-actions>
+          <KCheckbox
+            ref="selectAllCheckbox"
+            class="select-all-box"
+            :label="selectAllLabel$()"
+            :checked="selectAllIsChecked"
+            :indeterminate="selectAllIsIndeterminate"
+            @change="selectAllReplacementQuestions"
+          />
         </template>
-        <template #content>
-          <div
-            v-if="isExpanded(index)"
-            :id="`question-panel-${question.item}`"
-            :ref="`question-panel-${question.item}`"
-            :style="{ userSelect: dragActive ? 'none!important' : 'text' }"
-          >
-            <ContentRenderer
-              :ref="`contentRenderer-${question.item}`"
-              :kind="activeResourceMap[question.exercise_id].kind"
-              :lang="activeResourceMap[question.exercise_id].lang"
-              :files="activeResourceMap[question.exercise_id].files"
-              :available="activeResourceMap[question.exercise_id].available"
-              :itemId="question.question_id"
-              :assessment="true"
-              :allowHints="false"
-              :interactive="false"
-              @interaction="() => null"
-              @updateProgress="() => null"
-              @updateContentState="() => null"
-              @error="err => $emit('error', err)"
-            />
-          </div>
+        <template #right-actions>
+          <KIconButton
+            icon="expandAll"
+            :tooltip="expandAll$()"
+            :disabled="!canExpandAll"
+            @click="expandAll"
+          />
+          <KIconButton
+            icon="collapseAll"
+            :tooltip="collapseAll$()"
+            :disabled="!canCollapseAll"
+            @click="collapseAll"
+          />
         </template>
-      </AccordionItem>
-    </AccordionContainer>
-
-    <div class="bottom-navigation">
-      <div>
-        {{ replaceSelectedQuestionsString }}
+        <AccordionItem
+          v-for="(question, index) in replacementQuestionPool"
+          :id="`replacement-question-${question.item}`"
+          :key="`replacement-question-${question.item}`"
+          :title="displayQuestionTitle(question, activeResourceMap[question.exercise_id].title)"
+          :aria-selected="
+            replacements.length && replacements.length === selectedActiveQuestions.length
+          "
+        >
+          <template #heading="{ title }">
+            <h3 class="accordion-header">
+              <KCheckbox
+                class="accordion-checkbox"
+                :checked="replacements.map(r => r.item).includes(question.item)"
+                @change="() => toggleInReplacements(question)"
+              />
+              <KButton
+                tabindex="0"
+                appearance="basic-link"
+                :style="accordionStyleOverrides"
+                class="accordion-header-label"
+                :aria-expanded="isExpanded(question.item)"
+                :aria-controls="`question-panel-${question.item}`"
+                @click="toggle(index)"
+              >
+                <span>{{ title }}</span>
+                <KIcon
+                  class="chevron-icon"
+                  :icon="isExpanded(index) ? 'chevronUp' : 'chevronRight'"
+                />
+              </KButton>
+            </h3>
+          </template>
+          <template #content>
+            <div
+              v-if="isExpanded(index)"
+              :id="`question-panel-${question.item}`"
+              :ref="`question-panel-${question.item}`"
+              :style="{ userSelect: dragActive ? 'none!important' : 'text' }"
+            >
+              <ContentRenderer
+                :ref="`contentRenderer-${question.item}`"
+                :kind="activeResourceMap[question.exercise_id].kind"
+                :lang="activeResourceMap[question.exercise_id].lang"
+                :files="activeResourceMap[question.exercise_id].files"
+                :available="activeResourceMap[question.exercise_id].available"
+                :itemId="question.question_id"
+                :assessment="true"
+                :allowHints="false"
+                :interactive="false"
+                @interaction="() => null"
+                @updateProgress="() => null"
+                @updateContentState="() => null"
+                @error="err => $emit('error', err)"
+              />
+            </div>
+          </template>
+        </AccordionItem>
+      </AccordionContainer>
+
+      <div class="bottom-navigation">
+        <div>
+          {{ replaceSelectedQuestionsString }}
+        </div>
+        <KButton
+          :primary="true"
+          :text="replaceAction$()"
+          :disabled="!canProceedToReplace"
+          @click="confirmReplacement"
+        />
       </div>
-      <KButton
-        :primary="true"
-        :text="replaceAction$()"
-        :disabled="!canProceedToReplace"
-        @click="confirmReplacement"
-      />
+      <KModal
+        v-if="showReplacementConfirmation"
+        :submitText="coreString('confirmAction')"
+        :cancelText="coreString('cancelAction')"
+        :title="
+          replaceQuestions$({
+            sectionTitle: displaySectionTitle(activeSection, activeSectionIndex),
+          })
+        "
+        @cancel="showReplacementConfirmation = false"
+        @submit="submitReplacement"
+      >
+        <div>{{ replaceQuestionsExplaination$() }}</div>
+        <div style="font-weight: bold">
+          {{ noUndoWarning$() }}
+        </div>
+      </KModal>
+      <KModal
+        v-if="showCloseConfirmation"
+        :submitText="coreString('continueAction')"
+        :cancelText="coreString('cancelAction')"
+        :title="closeConfirmationTitle$()"
+        @cancel="showCloseConfirmation = false"
+        @submit="handleConfirmClose"
+      >
+        {{ closeConfirmationMessage$() }}
+      </KModal>
     </div>
-    <KModal
-      v-if="showReplacementConfirmation"
-      :submitText="coreString('confirmAction')"
-      :cancelText="coreString('cancelAction')"
-      :title="
-        replaceQuestions$({
-          sectionTitle: displaySectionTitle(activeSection, activeSectionIndex),
-        })
-      "
-      @cancel="showReplacementConfirmation = false"
-      @submit="submitReplacement"
-    >
-      <div>{{ replaceQuestionsExplaination$() }}</div>
-      <div style="font-weight: bold">
-        {{ noUndoWarning$() }}
-      </div>
-    </KModal>
-    <KModal
-      v-if="showCloseConfirmation"
-      :submitText="coreString('continueAction')"
-      :cancelText="coreString('cancelAction')"
-      :title="closeConfirmationTitle$()"
-      @cancel="showCloseConfirmation = false"
-      @submit="handleConfirmClose"
-    >
-      {{ closeConfirmationMessage$() }}
-    </KModal>
-  </div>
+  </SidePanelModal>
 
 </template>
 
 
 <script>
 
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import {
     displaySectionTitle,
     enhancedQuizManagementStrings,
@@ -165,6 +173,7 @@
     components: {
       AccordionContainer,
       AccordionItem,
+      SidePanelModal,
     },
     mixins: [commonCoreStrings],
     setup(_, context) {