Merge pull request #11565 from AlexVelezLl/accordioncontainer-code-la…

…yout [Accordion] Add "collapse all"/ "expand all" logic into AccordionContainer
learningequality · Dec 5, 2023 · 3203922 · 3203922
2 parents 1ef0b57 + 83dafdc
commit 3203922
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 75 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
@@ -1,16 +1,49 @@
 <template>
 
-  <div>
+  <div class="accordion">
+    <KGrid
+      :style="{
+        backgroundColor: $themePalette.grey.v_100,
+      }"
+    >
+      <KGridItem
+        :layout4="{ span: 2 }"
+        :layout8="{ span: 4 }"
+        :layout12="{ span: 6 }"
+        class="header-actions"
+      >
+        <div class="header-left-actions">
+          <slot name="left-actions"></slot>
+        </div>
+      </KGridItem>
+      <KGridItem
+        :layout4="{ span: 2 }"
+        :layout8="{ span: 4 }"
+        :layout12="{ span: 6 }"
+        class="header-actions"
+      >
+        <div class="header-right-actions">
+          <KIconButton
+            icon="expandAll"
+            :tooltip="expandAll$()"
+            :disabled="expandedItemIds.length === items.length"
+            @click="expandAll"
+          />
+          <KIconButton
+            icon="collapseAll"
+            :tooltip="collapseAll$()"
+            :disabled="expandedItemIds.length === 0"
+            @click="collapseAll"
+          />
+          <slot name="right-actions"></slot>
+        </div>
+      </KGridItem>
+    </KGrid>
     <transition-group
       tag="div"
       name="list"
       class="wrapper"
     >
-      <slot
-        name="top"
-        :expandAll="expandAll"
-        :collapseAll="collapseAll"
-      ></slot>
       <slot
         :toggleItemState="toggleItemState"
         :isItemExpanded="isItemExpanded"
@@ -24,21 +57,34 @@
 
 <script>
 
+  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+
   export default {
     name: 'AccordionContainer',
-    data() {
+    setup() {
+      const { expandAll$, collapseAll$ } = enhancedQuizManagementStrings;
       return {
-        expandedItemIds: [],
+        expandAll$,
+        collapseAll$,
       };
     },
-    watch: {
-      expandedItemIds() {
-        this.$emit('toggled', this.expandedItemIds);
+    props: {
+      items: {
+        type: Array,
+        required: true,
+        function(value) {
+          return value.every(item => typeof item === 'object' && 'id' in item);
+        },
       },
     },
+    data() {
+      return {
+        expandedItemIds: [],
+      };
+    },
     methods: {
-      expandAll(ids = []) {
-        this.expandedItemIds = ids;
+      expandAll() {
+        this.expandedItemIds = this.items.map(item => item.id);
       },
       collapseAll() {
         this.expandedItemIds = [];
@@ -59,9 +105,44 @@
           const index = this.expandedItemIds.indexOf(id);
           this.expandedItemIds.splice(index, 1);
         }
-        this.$emit('toggled', this.expandedItemIds);
       },
     },
   };
 
 </script>
+
+
+<style lang="scss"  scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .accordion {
+    @extend %dropshadow-1dp;
+  }
+
+  .header-actions {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  .header-left-actions {
+    display: flex;
+  }
+
+  .header-right-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .collapse-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-width: 40px;
+    padding-right: 0;
+    padding-left: 0;
+    border-radius: 50%;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -185,57 +185,34 @@
         </KGrid>
 
         <AccordionContainer
-          :items="quizForge.activeQuestions.value"
-          @toggled="items => expandedQuestionIds = items"
+          :items="quizForge.activeQuestions.value.map(i => ({
+            id: i.question_id,
+          }))"
         >
-          <template #top="{ expandAll, collapseAll }">
-            <KGrid key="top-bar" :style="accordionTopBarStyles">
-              <KGridItem
-                class="left-side-heading"
-                :layout12="{ span: 6 }"
-              >
-                <KCheckbox
-                  ref="selectAllCheckbox"
-                  class="select-all-box"
-                  :label="quizForge.selectAllLabel.value"
-                  :checked="quizForge.allQuestionsSelected.value"
-                  :indeterminate="quizForge.selectAllIsIndeterminate.value"
-                  @change="() => quizForge.selectAllQuestions()"
-                />
-              </KGridItem>
-
-              <KGridItem
-                class="right-side-heading"
-                :layout12="{ span: 6 }"
-              >
-                <KIconButton
-                  icon="expandAll"
-                  :tooltip="expandAll$()"
-                  :disabled="expandedQuestionIds.length === quizForge.activeQuestions.value.length"
-                  @click="expandAll(quizForge.activeQuestions.value.map(i => i.question_id))"
-                />
-                <KIconButton
-                  icon="collapseAll"
-                  :tooltip="collapseAll$()"
-                  :disabled="expandedQuestionIds.length === 0"
-                  @click="collapseAll()"
-                />
-                <KIconButton
-                  icon="refresh"
-                  :tooltip="replaceAction$()"
-                  :disabled="quizForge.selectedActiveQuestions.value.length === 0"
-                  @click="handleReplaceSelection"
-                />
-                <KIconButton
-                  icon="trash"
-                  :tooltip="coreString('deleteAction')"
-                  :aria-label="coreString('deleteAction')"
-                  :disabled="quizForge.selectedActiveQuestions.value.length === 0"
-                  @click="quizForge.deleteActiveSelectedQuestions"
-                />
-              </KGridItem>
-
-            </KGrid>
+          <template #left-actions>
+            <KCheckbox
+              ref="selectAllCheckbox"
+              class="select-all-box"
+              :label="quizForge.selectAllLabel.value"
+              :checked="quizForge.allQuestionsSelected.value"
+              :indeterminate="quizForge.selectAllIsIndeterminate.value"
+              @change="() => quizForge.selectAllQuestions()"
+            />
+          </template>
+          <template #right-actions>
+            <KIconButton
+              icon="refresh"
+              :tooltip="replaceAction$()"
+              :disabled="quizForge.selectedActiveQuestions.value.length === 0"
+              @click="handleReplaceSelection"
+            />
+            <KIconButton
+              icon="trash"
+              :tooltip="coreString('deleteAction')"
+              :aria-label="coreString('deleteAction')"
+              :disabled="quizForge.selectedActiveQuestions.value.length === 0"
+              @click="quizForge.deleteActiveSelectedQuestions"
+            />
           </template>
           <template #default="{ toggleItemState, isItemExpanded }">
             <DragContainer
@@ -372,21 +349,15 @@
         deleteSectionLabel$,
         replaceAction$,
         questionList$,
-        expandAll$,
-        collapseAll$,
       } = enhancedQuizManagementStrings;
 
       // The number we use for the default section title
       const sectionCreationCount = ref(1);
       const dragActive = ref(false);
-      const expandedQuestionIds = ref([]);
 
       return {
-        expandedQuestionIds,
         dragActive,
         sectionCreationCount,
-        expandAll$,
-        collapseAll$,
         sectionLabel$,
         addQuizSections$,
         quizSectionsLabel$,
@@ -411,11 +382,6 @@
           userSelect: get(this.dragActive) ? 'none!important' : 'text',
         };
       },
-      accordionTopBarStyles() {
-        return {
-          backgroundColor: this.$themePalette.grey.v_100,
-        };
-      },
       addQuizSectionsStyles() {
         return {
           margin: '0 0 1rem 0',