From fdaa9a0d573f8fe68054b34e1abbf95698704eac Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 29 Nov 2023 08:39:11 -0500
Subject: [PATCH 1/6] Add collapse logic into AccordionContainer

---
 .../CreateExamPage/AccordionContainer.vue     | 87 ++++++++++++++++++-
 .../plan/CreateExamPage/CreateQuizSection.vue | 81 +++++------------
 2 files changed, 108 insertions(+), 60 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
index b07998825aa..24e61a8a20e 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
@@ -1,6 +1,47 @@
 <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">
+          <KButton
+            @click="collapseAll"
+            class="collapse-button"
+            appearance="flat-button"
+          >
+          <!-- Should be replaced by a KIconButton when the icon is available on KDS -->
+            <KIcon
+              class="reduce-chervon-spacing"
+              icon="chevronDown"
+            />
+            <KIcon
+              class="reduce-chervon-spacing"
+              icon="chevronUp"
+            />
+          </KButton>
+          <slot name="right-actions"></slot>
+        </div>
+      </KGridItem>
+    </KGrid>
     <transition-group
       tag="div"
       name="list"
@@ -44,7 +85,51 @@
           this.expandedItemIds.splice(index, 1);
         }
       },
+      collapseAll() {
+        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;
+  margin-left: 1em;
+}
+
+.header-right-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 1em;
+  /deep/ & > * {
+    margin-left: 1em;
+  }
+}
+
+.collapse-button {
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+  min-width: 40px;
+}
+
+</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
index c5df9cbf5c1..3fb8a6c29a0 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -70,69 +70,32 @@
 
     <hr class="bottom-border">
     <div v-if="isQuestionAvailable">
-      <KGrid>
-        <KGridItem
-          :layout12="{ span: 6 }"
-        >
-          <div class="left-column-alignment-style">
-            <div class="align-kcheckbox-style">
-              <p>
-                <KCheckbox />
-              </p>
-            </div>
-
-            <div>
-              <p>{{ $tr('selectAllLabel') }}</p>
-            </div>
-          </div>
-        </KGridItem>
-
-        <KGridItem
-          :layout12="{ span: 6 }"
-        >
-          <div class="right-alignment-style">
-            <KGrid>
-              <KGridItem :layout12="{ span: 4 }">
-                <button class="icon-container remove-button-style">
-                  <KIcon
-                    class="reduce-chervon-spacing"
-                    icon="chevronDown"
-                  />
-                  <KIcon
-                    class="reduce-chervon-spacing"
-                    icon="chevronUp"
-                  />
-                </button>
-              </KGridItem>
-
-              <KGridItem
-                :layout12="{ span: 4 }"
-              >
-
-                <KIconButton
-                  class="icon-size"
-                  icon="refresh"
-                />
-              </KGridItem>
-
-              <KGridItem
-                :layout12="{ span: 4 }"
-              >
-                <KIconButton
-                  class="icon-size"
-                  icon="trash"
-                />
-              </KGridItem>
-            </KGrid>
-          </div>
-        </KGridItem>
-
-      </KGrid>
       <DragContainer
         :items="placeholderList"
         @sort="handleOrderChange"
       >
         <AccordionContainer>
+          <template #left-actions>
+            <div class="left-column-alignment-style">
+              <div class="align-kcheckbox-style">
+                <p>
+                  <KCheckbox />
+                </p>
+              </div>
+
+              <div>
+                <p>{{ $tr('selectAllLabel') }}</p>
+              </div>
+            </div>
+          </template>
+          <template #right-actions>
+            <KIconButton
+              icon="refresh"
+            />
+            <KIconButton
+              icon="trash"
+            />
+          </template>
           <template
             #default="{ isItemExpanded, toggleItemState, closeAccordionPanel }"
           >
@@ -612,7 +575,7 @@
   }
 
   .align-kcheckbox-style {
-    margin-left: 3em;
+    margin-left: 15px;
   }
 
   .remove-button-style {

From af5528aacfe39b2232b0c21e14a60a1fb1bfff9d Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 29 Nov 2023 08:59:36 -0500
Subject: [PATCH 2/6] Revert CreateQuizSection Component changes

---
 .../assets/src/views/plan/CreateExamPage/CreateQuizSection.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 5a3ef557720..6f9dc0adbb4 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -450,7 +450,7 @@
   }
 
   .align-kcheckbox-style {
-    margin-left: 15px;
+    margin-left: 3em;
   }
 
   .remove-button-style {

From efaf2c972e89d0446b2f100897d9f69e6aa0cbcd Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Wed, 29 Nov 2023 09:09:50 -0500
Subject: [PATCH 3/6] Lint files

---
 .../CreateExamPage/AccordionContainer.vue     | 65 ++++++++++---------
 1 file changed, 33 insertions(+), 32 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
index 24e61a8a20e..895e2c7b511 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
@@ -24,11 +24,11 @@
       >
         <div class="header-right-actions">
           <KButton
-            @click="collapseAll"
             class="collapse-button"
             appearance="flat-button"
+            @click="collapseAll"
           >
-          <!-- Should be replaced by a KIconButton when the icon is available on KDS -->
+            <!-- Should be replaced by a KIconButton when the icon is available on KDS -->
             <KIcon
               class="reduce-chervon-spacing"
               icon="chevronDown"
@@ -96,40 +96,41 @@
 
 <style lang="scss"  scoped>
 
-@import '~kolibri-design-system/lib/styles/definitions';
-
-.accordion {
-  @extend %dropshadow-1dp;
-}
+  @import '~kolibri-design-system/lib/styles/definitions';
 
-.header-actions {
-  margin-top: auto;
-  margin-bottom: auto;
-}
+  .accordion {
+    @extend %dropshadow-1dp;
+  }
 
-.header-left-actions {
-  display: flex;
-  margin-left: 1em;
-}
+  .header-actions {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
 
-.header-right-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-right: 1em;
-  /deep/ & > * {
+  .header-left-actions {
+    display: flex;
     margin-left: 1em;
   }
-}
-
-.collapse-button {
-  border-radius: 50%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-left: 0;
-  padding-right: 0;
-  min-width: 40px;
-}
+
+  .header-right-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 1em;
+
+    /deep/ & > * {
+      margin-left: 1em;
+    }
+  }
+
+  .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>

From db82970c15e22480cedebf9c6f3d2a1728971925 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 4 Dec 2023 10:49:11 -0500
Subject: [PATCH 4/6] Replace expand all/collapse all in CreateQuizSection
 component

---
 .../CreateExamPage/AccordionContainer.vue     | 62 ++++++--------
 .../plan/CreateExamPage/CreateQuizSection.vue | 83 ++++++-------------
 2 files changed, 54 insertions(+), 91 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
index 9b1b2167bac..c9deab556dd 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
@@ -23,21 +23,18 @@
         class="header-actions"
       >
         <div class="header-right-actions">
-          <KButton
-            class="collapse-button"
-            appearance="flat-button"
+          <KIconButton
+            icon="expandAll"
+            :tooltip="expandAll$()"
+            :disabled="expandedItemIds.length === items.length"
+            @click="expandAll"
+          />
+          <KIconButton
+            icon="collapseAll"
+            :tooltip="collapseAll$()"
+            :disabled="expandedItemIds.length === 0"
             @click="collapseAll"
-          >
-            <!-- Should be replaced by a KIconButton when the icon is available on KDS -->
-            <KIcon
-              class="reduce-chervon-spacing"
-              icon="chevronDown"
-            />
-            <KIcon
-              class="reduce-chervon-spacing"
-              icon="chevronUp"
-            />
-          </KButton>
+          />
           <slot name="right-actions"></slot>
         </div>
       </KGridItem>
@@ -47,11 +44,6 @@
       name="list"
       class="wrapper"
     >
-      <slot
-        name="top"
-        :expandAll="expandAll"
-        :collapseAll="collapseAll"
-      ></slot>
       <slot
         :toggleItemState="toggleItemState"
         :isItemExpanded="isItemExpanded"
@@ -65,21 +57,31 @@
 
 <script>
 
+import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+
   export default {
     name: 'AccordionContainer',
+    props: {
+      items: {
+        type: Array,
+        required: true,
+      },
+    },
     data() {
       return {
         expandedItemIds: [],
       };
     },
-    watch: {
-      expandedItemIds() {
-        this.$emit('toggled', this.expandedItemIds);
-      },
+    setup() {
+      const { expandAll$, collapseAll$ } = enhancedQuizManagementStrings;
+      return {
+        expandAll$,
+        collapseAll$,
+      };
     },
     methods: {
-      expandAll(ids = []) {
-        this.expandedItemIds = ids;
+      expandAll() {
+        this.expandedItemIds = this.items.map(item => item.id);
       },
       collapseAll() {
         this.expandedItemIds = [];
@@ -100,10 +102,6 @@
           const index = this.expandedItemIds.indexOf(id);
           this.expandedItemIds.splice(index, 1);
         }
-        this.$emit('toggled', this.expandedItemIds);
-      },
-      collapseAll() {
-        this.expandedItemIds = [];
       },
     },
   };
@@ -126,17 +124,11 @@
 
   .header-left-actions {
     display: flex;
-    margin-left: 1em;
   }
 
   .header-right-actions {
     display: flex;
     justify-content: flex-end;
-    margin-right: 1em;
-
-    /deep/ & > * {
-      margin-left: 1em;
-    }
   }
 
   .collapse-button {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index e7b78407e30..fae39cd0acd 100644
--- 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$,

From 0227c8ad24e14af0d7eb0444c2309487a7678df2 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 4 Dec 2023 10:58:35 -0500
Subject: [PATCH 5/6] Lint files

---
 .../plan/CreateExamPage/AccordionContainer.vue   | 16 ++++++++--------
 .../plan/CreateExamPage/CreateQuizSection.vue    |  5 -----
 2 files changed, 8 insertions(+), 13 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
index c9deab556dd..9cee412ff33 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
@@ -57,10 +57,17 @@
 
 <script>
 
-import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
 
   export default {
     name: 'AccordionContainer',
+    setup() {
+      const { expandAll$, collapseAll$ } = enhancedQuizManagementStrings;
+      return {
+        expandAll$,
+        collapseAll$,
+      };
+    },
     props: {
       items: {
         type: Array,
@@ -72,13 +79,6 @@ import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQu
         expandedItemIds: [],
       };
     },
-    setup() {
-      const { expandAll$, collapseAll$ } = enhancedQuizManagementStrings;
-      return {
-        expandAll$,
-        collapseAll$,
-      };
-    },
     methods: {
       expandAll() {
         this.expandedItemIds = this.items.map(item => item.id);
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index fae39cd0acd..f2b60af63fd 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -382,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',

From 83dafdc9a15a8c9f1560f6b93ec47e54e84161e2 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 4 Dec 2023 11:09:27 -0500
Subject: [PATCH 6/6] Add items validator

---
 .../src/views/plan/CreateExamPage/AccordionContainer.vue       | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
index 9cee412ff33..847ad06075d 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
@@ -72,6 +72,9 @@
       items: {
         type: Array,
         required: true,
+        function(value) {
+          return value.every(item => typeof item === 'object' && 'id' in item);
+        },
       },
     },
     data() {