From 591a93cf7ec80a5f81b4f9b36ba6b72899ddfc17 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 31 Oct 2023 08:51:58 -0700
Subject: [PATCH 01/50] set not loading when quiz creator comes up

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

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index 41aadf022c..7b57201251 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -108,6 +108,9 @@
     created() {
       this.quizForge.initializeQuiz();
     },
+    mounted() {
+      this.$store.dispatch('notLoading');
+    },
     $trs: {
       createNewExamLabel: {
         message: 'Create new quiz',

From c6c2f8eb40016b327e3888ef9f41ef289af89b6f Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 12 Oct 2023 15:44:31 -0700
Subject: [PATCH 02/50] add DEBUG option to useQuizCreation; bootstrap basic
 accordion setup

---
 .../assets/src/composables/useQuizCreation.js | 44 ++++++++++--
 .../plan/CreateExamPage/AccordionItem.vue     |  2 +-
 .../plan/CreateExamPage/CreateQuizSection.vue | 67 ++++++++++++++-----
 .../src/views/plan/CreateExamPage/index.vue   | 15 +++--
 4 files changed, 100 insertions(+), 28 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index 67e547dc9a..64b6ff280f 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -8,7 +8,7 @@ import { get, set } from '@vueuse/core';
 import { computed, ref } from 'kolibri.lib.vueCompositionApi';
 // TODO: Probably move this to this file's local dir
 import selectQuestions from '../modules/examCreation/selectQuestions.js';
-import { Quiz, QuizSection } from './quizCreationSpecs.js';
+import { Quiz, QuizSection, QuizQuestion } from './quizCreationSpecs.js';
 
 /** Validators **/
 /* objectSpecs expects every property to be available -- but we don't want to have to make an
@@ -30,7 +30,7 @@ function isExercise(o) {
 /**
  * Composable function presenting primary interface for Quiz Creation
  */
-export default () => {
+export default (DEBUG = true) => {
   // -----------
   // Local state
   // -----------
@@ -53,6 +53,38 @@ export default () => {
   /** @type {ref<Number>} A counter for use in naming new sections */
   const _sectionLabelCounter = ref(1);
 
+  // Debug Data Generators
+  function _quizQuestions(num = 5) {
+    const questions = [];
+    for (let i = 0; i <= num; i++) {
+      const overrides = {
+        title: `Quiz Question ${i}`,
+        question_id: `${i}`,
+      };
+      questions.push(objectWithDefaults(overrides, QuizQuestion));
+    }
+    return questions;
+  }
+
+  function _quizSections(num = 5, numQuestions = 5) {
+    const sections = [];
+    for (let i = 0; i <= num; i++) {
+      const overrides = {
+        section_id: `${i}`,
+        section_title: `A section ${i}`,
+        questions: _quizQuestions(numQuestions),
+      };
+      sections.push(objectWithDefaults(overrides, QuizSection));
+    }
+    return sections;
+  }
+
+  function _generateTestData(numSections = 5, numQuestions = 5) {
+    const sections = _quizSections(numSections, numQuestions);
+    updateQuiz({ question_sources: sections });
+    setActiveSection(sections[0].section_id);
+  }
+
   // ------------------
   // Section Management
   // ------------------
@@ -162,8 +194,12 @@ export default () => {
    * use */
   function initializeQuiz() {
     set(_quiz, objectWithDefaults({}, Quiz));
-    const newSection = addSection();
-    setActiveSection(newSection.section_id);
+    if (DEBUG) {
+      _generateTestData();
+    } else {
+      const newSection = addSection();
+      setActiveSection(newSection.section_id);
+    }
     _fetchChannels();
   }
 
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
index f0d32869a5..27e61bc3ad 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
@@ -32,7 +32,7 @@
         required: true,
       },
       id: {
-        type: Number,
+        type: String,
         required: true,
       },
     },
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 6f9dc0adbb..8abe3f331c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -153,28 +153,51 @@
       tabsId="quizSectionTabs"
       :activeTabId="quizForge.activeSection.value ? quizForge.activeSection.value.section_id : ''"
     >
-
-      <p>{{ quizForge.activeSection.value.section_id }}</p>
       <!-- TODO This should be a separate component like "empty section container" or something -->
-      <div class="question-mark-layout">
-        <span class="help-icon-style">?</span>
-      </div>
+      <div v-if="!accordionQuestions.length">
+        <div class="question-mark-layout">
+          <span class="help-icon-style">?</span>
+        </div>
 
-      <p class="no-question-style">
-        {{ noQuestionsInSection$() }}
-      </p>
+        <p class="no-question-style">
+          {{ noQuestionsInSection$() }}
+        </p>
 
-      <p>{{ addQuizSectionQuestionsInstructions$() }}</p>
+        <p>{{ addQuizSectionQuestionsInstructions$() }}</p>
 
-      <KButton
-        primary
-        icon="plus"
-        @click="openSelectResources(quizForge.activeSection.value.section_id)"
-      >
-        {{ addQuestionsLabel$() }}
-      </KButton>
+        <KButton
+          primary
+          icon="plus"
+          @click="openSelectResources(quizForge.activeSection.value.section_id)"
+        >
+          {{ addQuestionsLabel$() }}
+        </KButton>
+      </div>
       <!-- END TODO -->
 
+      <AccordionContainer v-else>
+        <template #default="{ toggleItemState, isItemExpanded, /* closeAccordionPanel */ }">
+          <AccordionItem
+            v-for="question in accordionQuestions"
+            :id="question.id"
+            :key="question.id"
+            :title="question.title"
+          >
+            <template #heading>
+              <button @click="toggleItemState(question.id)">
+                {{ question.title }}
+              </button>
+            </template>
+
+            <template #content>
+              <div v-if="isItemExpanded(question.id)">
+                TODO: Use actual resources, render questions here
+              </div>
+            </template>
+          </AccordionItem>
+        </template>
+      </AccordionContainer>
+
 
     </KTabsPanel>
 
@@ -191,12 +214,16 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import commonCoach from '../../common';
-  import SectionSidePanel from './SectionSidePanel.vue';
-  import TabsWithOverflow from './TabsWithOverflow.vue';
+  import SectionSidePanel from './SectionSidePanel';
+  import TabsWithOverflow from './TabsWithOverflow';
+  import AccordionContainer from './AccordionContainer';
+  import AccordionItem from './AccordionItem';
 
   export default {
     name: 'CreateQuizSection',
     components: {
+      AccordionContainer,
+      AccordionItem,
       TabsWithOverflow,
       SectionSidePanel,
     },
@@ -264,6 +291,10 @@
           },
         ];
       },
+      accordionQuestions() {
+        const mapQuestionToAccordionItem = q => ({ id: q.question_id, title: q.title });
+        return get(this.quizForge.activeQuestions).map(mapQuestionToAccordionItem);
+      },
     },
     methods: {
       tabRefLabel(section_id) {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index 7b57201251..fba6c77f1c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -20,7 +20,7 @@
       :style="{ ...maxContainerHeight, maxWidth: '1000px', margin: '0 auto' }"
     >
 
-      <CreateQuizSection />
+      <CreateQuizSection v-if="quizInitialized" />
 
       <BottomAppBar>
         <KButtonGroup>
@@ -41,6 +41,8 @@
 
 <script>
 
+  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import { ref } from 'kolibri.lib.vueCompositionApi';
   import pickBy from 'lodash/pickBy';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -50,8 +52,6 @@
   import useQuizCreation from '../../../composables/useQuizCreation';
   import CreateQuizSection from './CreateQuizSection.vue';
 
-  const quizForge = useQuizCreation();
-
   export default {
     name: 'CreateExamPage',
     components: {
@@ -59,9 +59,13 @@
       BottomAppBar,
       CreateQuizSection,
     },
-    mixins: [commonCoreStrings, commonCoach],
-    data() {
+    mixins: [commonCoreStrings, commonCoach, responsiveWindowMixin],
+    setup() {
+      const quizForge = useQuizCreation();
+      const quizInitialized = ref(false);
+
       return {
+        quizInitialized,
         quizForge,
       };
     },
@@ -107,6 +111,7 @@
     },
     created() {
       this.quizForge.initializeQuiz();
+      this.quizInitialized = true;
     },
     mounted() {
       this.$store.dispatch('notLoading');

From 29abaca29d3890020b26ca5b4f6ea3e1ff7abb3d Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 16 Oct 2023 12:27:13 -0700
Subject: [PATCH 03/50] uuid for test data ID

---
 .../plugins/coach/assets/src/composables/useQuizCreation.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index 64b6ff280f..7ed7a4f34b 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -59,7 +59,7 @@ export default (DEBUG = true) => {
     for (let i = 0; i <= num; i++) {
       const overrides = {
         title: `Quiz Question ${i}`,
-        question_id: `${i}`,
+        question_id: uuidv4(),
       };
       questions.push(objectWithDefaults(overrides, QuizQuestion));
     }
@@ -70,7 +70,7 @@ export default (DEBUG = true) => {
     const sections = [];
     for (let i = 0; i <= num; i++) {
       const overrides = {
-        section_id: `${i}`,
+        section_id: uuidv4(),
         section_title: `A section ${i}`,
         questions: _quizQuestions(numQuestions),
       };

From 47db90f643b45ab834735974b946ae459eb5e0ac Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 16 Oct 2023 12:27:26 -0700
Subject: [PATCH 04/50] remove unneded prop

---
 .../coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
index 27e61bc3ad..4758f2f207 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionItem.vue
@@ -13,7 +13,6 @@
       <slot
         :id="id"
         name="content"
-        :answers="title"
       >
       </slot>
     </div>

From 6401cdcdd93806659cb66143a469d485ba050753 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 16 Oct 2023 12:27:37 -0700
Subject: [PATCH 05/50] lint

---
 .../assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
index 9808153c58..4317eb057f 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
@@ -81,7 +81,6 @@
                 const containerTop = this.$refs.tabsWrapper.$el.offsetTop;
                 const containerBottom = containerTop + this.$refs.tabsWrapper.$el.clientHeight;
 
-                console.log(tabRef, tabRefTop, containerTop, containerBottom);
                 return tabRefTop >= containerBottom;
               })
             : [];

From f9854a2af46c9d7c3e4780bc2b51e80e757d498b Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 16 Oct 2023 14:33:01 -0700
Subject: [PATCH 06/50] drag-and-drop scaffolding function & design

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 192 +++++++++++++++---
 1 file changed, 163 insertions(+), 29 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
index 8abe3f331c..bc73e45947 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -154,7 +154,7 @@
       :activeTabId="quizForge.activeSection.value ? quizForge.activeSection.value.section_id : ''"
     >
       <!-- TODO This should be a separate component like "empty section container" or something -->
-      <div v-if="!accordionQuestions.length">
+      <div v-if="!quizForge.activeQuestions.value.length">
         <div class="question-mark-layout">
           <span class="help-icon-style">?</span>
         </div>
@@ -175,29 +175,129 @@
       </div>
       <!-- END TODO -->
 
-      <AccordionContainer v-else>
-        <template #default="{ toggleItemState, isItemExpanded, /* closeAccordionPanel */ }">
-          <AccordionItem
-            v-for="question in accordionQuestions"
-            :id="question.id"
-            :key="question.id"
-            :title="question.title"
+
+      <div v-else>
+        <KGrid>
+          <KGridItem
+            :layout12="{ span: 6 }"
           >
-            <template #heading>
-              <button @click="toggleItemState(question.id)">
-                {{ question.title }}
-              </button>
-            </template>
-
-            <template #content>
-              <div v-if="isItemExpanded(question.id)">
-                TODO: Use actual resources, render questions here
+            <div class="left-column-alignment-style">
+              <div class="align-kcheckbox-style">
+                <p>
+                  <KCheckbox />
+                </p>
+              </div>
+
+              <div>
+                <p> "SELECT ALL FIX ME"</p>
               </div>
-            </template>
-          </AccordionItem>
-        </template>
-      </AccordionContainer>
+            </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>
+
+        <AccordionContainer v-slot="{ toggleItemState, isItemExpanded }">
+          <DragContainer
+            key="drag-container"
+            :items="quizForge.activeQuestions.value"
+            @sort="handleQuestionOrderChange"
+          >
+            <transition-group
+              tag="div"
+              name="list"
+              class="wrapper"
+            >
+              <Draggable
+                v-for="(question, index) in quizForge.activeQuestions.value"
+                :key="`drag-${question.question_id}`"
+                tabindex="-1"
+                style="background: white"
+              >
+                <AccordionItem :id="question.question_id" :title="question.title">
+                  <template #heading="{ title }">
+                    <div class="accordion-header">
+                      <DragHandle>
+                        <div>
+                          <DragSortWidget
+                            class="sort-widget"
+                            moveUpText="up"
+                            moveDownText="down"
+                            :isFirst="index === 0"
+                            :isLast="index === quizForge.activeQuestions.value.length - 1"
+                            @moveUp="shiftOne(index, -1)"
+                            @moveDown="shiftOne(index, +1)"
+                          />
+                        </div>
+                      </DragHandle>
+                      <KCheckbox style="padding-left: 0.5em" />
+                      <a
+                        class="accordion-header-label"
+                        @click="toggleItemState(question.question_id)"
+                      >
+                        {{ title }}
+                      </a>
+                      <a
+                        class="accordion-header-chevron"
+                        @click="toggleItemState(question.question_id)"
+                      >
+                        <KIcon
+                          :icon="isItemExpanded(question.question_id) ?
+                            'chevronUp' : 'chevronRight'"
+                        />
+                      </a>
+                    </div>
+                  </template>
+                  <template #content="">
+                    <h1 v-if="isItemExpanded(question.question_id)">
+                      {{ question.title }}
+                    </h1>
+                  </template>
+                </AccordionItem>
+              </Draggable>
+            </transition-group>
+          </DragContainer>
+        </AccordionContainer>
+      </div>
 
     </KTabsPanel>
 
@@ -213,6 +313,10 @@
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import DragContainer from 'kolibri.coreVue.components.DragContainer';
+  import DragHandle from 'kolibri.coreVue.components.DragHandle';
+  import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
+  import Draggable from 'kolibri.coreVue.components.Draggable';
   import commonCoach from '../../common';
   import SectionSidePanel from './SectionSidePanel';
   import TabsWithOverflow from './TabsWithOverflow';
@@ -224,6 +328,10 @@
     components: {
       AccordionContainer,
       AccordionItem,
+      DragContainer,
+      Draggable,
+      DragSortWidget,
+      DragHandle,
       TabsWithOverflow,
       SectionSidePanel,
     },
@@ -291,10 +399,6 @@
           },
         ];
       },
-      accordionQuestions() {
-        const mapQuestionToAccordionItem = q => ({ id: q.question_id, title: q.title });
-        return get(this.quizForge.activeQuestions).map(mapQuestionToAccordionItem);
-      },
     },
     methods: {
       tabRefLabel(section_id) {
@@ -329,6 +433,13 @@
             : 'none',
         };
       },
+      handleQuestionOrderChange({ newArray }) {
+        const payload = {
+          section_id: get(this.quizForge.activeSection).section_id,
+          questions: newArray,
+        };
+        this.quizForge.updateSection(payload);
+      },
       handleAddSection() {
         const newSection = this.quizForge.addSection();
         this.quizForge.setActiveSection(get(newSection).section_id);
@@ -432,10 +543,6 @@
     font-size: 1em;
   }
 
-  .accordion-detail-container {
-    margin-left: 3em;
-  }
-
   .float-item-left-style {
     float: right;
     margin-top: 1em;
@@ -532,4 +639,31 @@
     min-height: 40px;
   }
 
+  .accordion-header {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding: 0 0.5em;
+  }
+
+  .accordion-header-label {
+    flex-grow: 1;
+    align-self: stretch;
+    padding: 0 0 0 1em;
+    line-height: 2.75em;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .accordion-header-chevron {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    cursor: pointer;
+  }
+
+  /deep/ .checkbox-icon {
+    top: 2px;
+  }
+
 </style>

From be1a9106a63ace4d40d3af2d80253e326eb6a195 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 17 Oct 2023 11:46:59 -0700
Subject: [PATCH 07/50] styles on the accordion headers

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 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
index bc73e45947..81f6d2fbdd 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -270,13 +270,18 @@
                         </div>
                       </DragHandle>
                       <KCheckbox style="padding-left: 0.5em" />
-                      <a
+                      <KButton
+                        tabindex="0"
+                        appearance="basic-link"
+                        :style="accordionStyleOverrides"
                         class="accordion-header-label"
                         @click="toggleItemState(question.question_id)"
                       >
                         {{ title }}
-                      </a>
-                      <a
+                      </KButton>
+                      <KButton
+                        appearance="basic-link"
+                        :style="accordionStyleOverrides"
                         class="accordion-header-chevron"
                         @click="toggleItemState(question.question_id)"
                       >
@@ -284,7 +289,7 @@
                           :icon="isItemExpanded(question.question_id) ?
                             'chevronUp' : 'chevronRight'"
                         />
-                      </a>
+                      </KButton>
                     </div>
                   </template>
                   <template #content="">
@@ -367,6 +372,12 @@
     },
     inject: ['quizForge'],
     computed: {
+      accordionStyleOverrides() {
+        return {
+          color: this.$themeTokens.text + '!important',
+          textDecoration: 'none',
+        };
+      },
       noKgridItemPadding() {
         return {
           paddingLeft: '0em',
@@ -666,4 +677,8 @@
     top: 2px;
   }
 
+  /deep/ .grip {
+    top: 2px !important;
+  }
+
 </style>

From 47fbd4f63e23dd60179404afe98358113d09185c Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 19 Oct 2023 16:39:25 -0700
Subject: [PATCH 08/50] section tabs better design parity w/out regression

Ran into some issues w/ the way the overflow calculation was done as I tried to adjust the heights of the tabs and their containers themselves
This ultimately ends up losing some items which were impacting the calculations which will be fixed in a subsequent commit
---
 .../plan/CreateExamPage/CreateQuizSection.vue     | 15 ++++-----------
 .../plan/CreateExamPage/TabsWithOverflow.vue      | 13 ++++++++++---
 2 files changed, 14 insertions(+), 14 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
index 81f6d2fbdd..b8744e0e63 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -34,8 +34,6 @@
       {{ addQuizSections$() }}
     </p>
 
-    <hr class="bottom-border">
-
     <KGrid>
       <KGridItem
         :layout12="{ span: 10 }"
@@ -145,8 +143,6 @@
 
     </KGrid>
 
-    <hr class="bottom-border">
-
     <KTabsPanel
       v-if="quizForge.activeSection.value"
       class="no-question-layout"
@@ -396,6 +392,8 @@
           margin: '0px',
           textOverflow: 'ellipsis',
           maxWidth: '160px',
+          padding: '0px!important',
+          height: '3.25em',
         };
       },
       sectionOptions() {
@@ -528,11 +526,6 @@
     font-weight: bold;
   }
 
-  .bottom-border {
-    margin-block-start: -2px;
-    border: 1px solid #dedede;
-  }
-
   .kgrid-alignment-style {
     padding-right: 1em;
     padding-left: 0;
@@ -633,8 +626,8 @@
   }
 
   .options-button {
-    width: 36px !important;
-    height: 36px !important;
+    width: 3.25em !important;
+    height: 3.25em !important;
     margin: 0;
     border-radius: 0 !important;
   }
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
index 4317eb057f..c3aa49fb49 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
@@ -69,6 +69,9 @@
     mounted() {
       this.mounted = true;
       this.setWrappingButtonTabIndex();
+      this.$nextTick(() => {
+        this.setOverflowTabs();
+      });
     },
     methods: {
       setOverflowTabs() {
@@ -106,13 +109,15 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    height: 2.25em;
+    height: 3rem !important;
+    min-height: 3rem !important;
     overflow: hidden;
   }
 
   /deep/ .tab > button,
   .tab {
     max-width: calc(200px - 40px);
+    height: 3rem !important;
     text-overflow: ellipsis;
 
     /* We *need* the overflow to be hidden for our calculations of which to show work properly.
@@ -123,13 +128,15 @@
 
   /deep/ .tab {
     display: inline-block;
-    height: 2.5em;
+    height: 3rem !important;
+    margin: 0;
     overflow: visible; // Keep outline fully visible
   }
 
   .container {
     position: relative;
-    max-height: 2.25em;
+    height: 3rem !important;
+    padding: 0 1em;
   }
 
 </style>

From f9a8c7686c7f1fa4668ae83a94c6d6a79ec7e47e Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 19 Oct 2023 16:40:24 -0700
Subject: [PATCH 09/50] dragStart event allows dynamic styles when dragging;
 disallow highlighting

---
 .../src/views/sortable/DragContainer.vue      |  1 +
 .../plan/CreateExamPage/CreateQuizSection.vue | 20 ++++++++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/kolibri/core/assets/src/views/sortable/DragContainer.vue b/kolibri/core/assets/src/views/sortable/DragContainer.vue
index 7fb1e54585..1069896604 100644
--- a/kolibri/core/assets/src/views/sortable/DragContainer.vue
+++ b/kolibri/core/assets/src/views/sortable/DragContainer.vue
@@ -56,6 +56,7 @@
       handleStart() {
         // handle cancelation of drags
         // document.addEventListener('keyup', this.triggerMouseUpOnESC);
+        this.$emit('dragStart');
       },
       handleStop(event) {
         const { oldIndex, newIndex } = event.data;
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 b8744e0e63..a7b7e6377c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -237,6 +237,7 @@
             key="drag-container"
             :items="quizForge.activeQuestions.value"
             @sort="handleQuestionOrderChange"
+            @dragStart="handledDragStart"
           >
             <transition-group
               tag="div"
@@ -289,9 +290,11 @@
                     </div>
                   </template>
                   <template #content="">
-                    <h1 v-if="isItemExpanded(question.question_id)">
-                      {{ question.title }}
-                    </h1>
+                    <div :style="{ userSelect: dragActive ? 'none!important' : 'text' }">
+                      <h1 v-if="isItemExpanded(question.question_id)">
+                        {{ question.title }}
+                      </h1>
+                    </div>
                   </template>
                 </AccordionItem>
               </Draggable>
@@ -366,12 +369,19 @@
         deleteSectionLabel$,
       };
     },
+    data() {
+      return {
+        dragActive: false,
+      };
+    },
     inject: ['quizForge'],
     computed: {
       accordionStyleOverrides() {
         return {
           color: this.$themeTokens.text + '!important',
           textDecoration: 'none',
+          // Ensure text doesn't get highlighted as we drag
+          userSelect: this.dragActive ? 'none!important' : 'text',
         };
       },
       noKgridItemPadding() {
@@ -454,7 +464,11 @@
         this.quizForge.setActiveSection(get(newSection).section_id);
         this.sectionCreationCount++;
       },
+      handledDragStart() {
+        this.dragActive = true;
+      },
       handleSectionOptionSelect({ label }, section_id) {
+        this.dragActive = false;
         // Always set the active section to the one that is having its side panel opened
         this.quizForge.setActiveSection(section_id);
 

From 84417009a28ef22e27279c649bd627929c661602 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 19 Oct 2023 21:51:35 -0700
Subject: [PATCH 10/50] design polish

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 40 +++++++++++--------
 .../plan/CreateExamPage/TabsWithOverflow.vue  |  3 +-
 2 files changed, 24 insertions(+), 19 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
index a7b7e6377c..f72e15a079 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -1,9 +1,7 @@
 <template>
 
-  <div>
-    <KGrid
-      class="add-padding"
-    >
+  <div style="padding-top: 2rem;">
+    <KGrid :style="wrapperStyles">
       <KGridItem
         :layout4="{ span: 1 }"
         :layout8="{ span: 1 }"
@@ -30,17 +28,17 @@
       </KGridItem>
     </KGrid>
 
-    <p style="margin-top: 0px;">
+    <p :style="addQuizSectionsStyles">
       {{ addQuizSections$() }}
     </p>
 
-    <KGrid>
+    <KGrid :style="tabsWrapperStyles">
       <KGridItem
         :layout12="{ span: 10 }"
-        :style="noKgridItemPadding"
       >
         <TabsWithOverflow
           tabsId="quizSectionTabs"
+          class="section-tabs"
           :tabs="tabs"
           :appearanceOverrides="{ padding: '0px', overflow: 'hidden' }"
           :activeTabId="quizForge.activeSection.value ?
@@ -81,6 +79,7 @@
             <KIconButton
               v-if="overflowTabs.length"
               tabindex="-1"
+              class="overflow-tabs"
               icon="optionsHorizontal"
               :style="overflowButtonStyles(overflowTabs)"
             >
@@ -130,11 +129,11 @@
 
       <KGridItem
         :layout12="{ span: 2 }"
-        :style="noKgridItemPadding"
       >
         <KButton
           appearance="flat-button"
           icon="plus"
+          style="height: 3rem"
           @click="handleAddSection"
         >
           {{ addSectionLabel$() }}
@@ -384,10 +383,17 @@
           userSelect: this.dragActive ? 'none!important' : 'text',
         };
       },
-      noKgridItemPadding() {
+      addQuizSectionsStyles() {
+        return {
+          margin: '0 0 1rem 0',
+          padding: '0 0 1rem 0',
+          borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
+        };
+      },
+      tabsWrapperStyles() {
         return {
-          paddingLeft: '0em',
-          paddingRight: '0em',
+          paddingTop: '1rem',
+          borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
         };
       },
       tabs() {
@@ -445,8 +451,8 @@
       },
       overflowButtonStyles(overflow) {
         return {
-          height: '40px',
-          width: '40px',
+          height: '2.25rem!important',
+          width: '2.25rem!important',
           border: this.activeSectionIsHidden(overflow)
             ? '2px solid ' + this.$themeTokens.primary
             : 'none',
@@ -532,10 +538,6 @@
     color: #996189;
   }
 
-  .add-padding {
-    padding-top: 16px;
-  }
-
   .no-question-style {
     font-weight: bold;
   }
@@ -688,4 +690,8 @@
     top: 2px !important;
   }
 
+  /deep/ .overflow-tabs svg {
+    top: 7px !important;
+  }
+
 </style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
index c3aa49fb49..cdbdc1aa4f 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
@@ -17,7 +17,7 @@
     <!-- This should be within the KTabsList to simplify rendering, but there is no slot.
       The absolute styling isn't as nice as if it were part of the flex container instead, but
       it ought to work -->
-    <div style="position: absolute; right: 0; top: -7px;">
+    <div style="position: absolute; right: 0; top: 5px;">
       <slot name="overflow" :overflowTabs="overflowTabs"></slot>
     </div>
 
@@ -136,7 +136,6 @@
   .container {
     position: relative;
     height: 3rem !important;
-    padding: 0 1em;
   }
 
 </style>

From b1980dcf06bc20e6ada8aabb481f8d8b7b1f3aa4 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 23 Oct 2023 20:36:32 -0700
Subject: [PATCH 11/50] helpers for select all checkbox props

---
 .../assets/src/composables/useQuizCreation.js | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index 7ed7a4f34b..7221f588ab 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -246,6 +246,25 @@ export default (DEBUG = true) => {
     );
   }
 
+  function toggleQuestionInSelection(question_id) {
+    if (get(_selectedQuestions).includes(question_id)) {
+      removeQuestionFromSelection(question_id);
+    } else {
+      addQuestionToSelection(question_id);
+    }
+  }
+
+  function selectAllQuestions() {
+    if (get(allQuestionsSelected)) {
+      set(_selectedQuestions, []);
+    } else {
+      set(
+        _selectedQuestions,
+        get(activeQuestions).map(q => q.question_id)
+      );
+    }
+  }
+
   /**
    * @affects _channels - Fetches all channels with exercises and sets them to _channels */
   function _fetchChannels() {
@@ -316,6 +335,31 @@ export default (DEBUG = true) => {
   /** @type {ComputedRef<Array>} A list of all channels available which have exercises */
   const channels = computed(() => get(_channels));
 
+  /** Handling the Select All Checkbox
+   * See: remove/toggleQuestionFromSelection() & selectAllQuestions() for more */
+
+  /** @type {ComputedRef<Boolean>} Whether all active questions are selected */
+  const allQuestionsSelected = computed(
+    () => get(selectedActiveQuestions).length === get(activeQuestions).length
+  );
+  const noQuestionsSelected = computed(() => get(selectedActiveQuestions).length === 0);
+  /** @type {ComputedRef<String>} The label that should be shown alongside the "Select all" checkbox
+   */
+  const selectAllLabel = computed(() => {
+    if (get(noQuestionsSelected)) {
+      const { selectAllLabel$ } = enhancedQuizManagementStrings;
+      return selectAllLabel$();
+    } else {
+      const { numberOfSelectedQuestions$ } = enhancedQuizManagementStrings;
+      return numberOfSelectedQuestions$({ count: get(selectedActiveQuestions).length });
+    }
+  });
+
+  /** @type {ComputedRef<Boolean>} Whether the select all checkbox should be indeterminate */
+  const selectAllIsIndeterminate = computed(() => {
+    return !get(allQuestionsSelected) && !get(noQuestionsSelected);
+  });
+
   return {
     // Methods
     saveQuiz,
@@ -328,6 +372,8 @@ export default (DEBUG = true) => {
     updateQuiz,
     addQuestionToSelection,
     removeQuestionFromSelection,
+    toggleQuestionInSelection,
+    selectAllQuestions,
 
     // Computed
     channels,
@@ -340,5 +386,9 @@ export default (DEBUG = true) => {
     activeQuestions,
     selectedActiveQuestions,
     replacementQuestionPool,
+    selectAllIsIndeterminate,
+    selectAllLabel,
+    allQuestionsSelected,
+    noQuestionsSelected,
   };
 };

From 87064a31f857c340a8e33771709fc3b062ae2456 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 23 Oct 2023 20:36:59 -0700
Subject: [PATCH 12/50] enhanced quiz messages updates

---
 .../strings/enhancedQuizManagementStrings.js           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
index 1fbd1afeba..296bbb08e1 100644
--- a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
+++ b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
@@ -1,6 +1,9 @@
 import { createTranslator } from 'kolibri.utils.i18n';
 
 export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManagementStrings', {
+  selectAllLabel: {
+    message: 'Select all',
+  },
   sectionLabel: {
     message: 'Section',
   },
@@ -70,7 +73,7 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
   numberOfSelectedQuestions: {
     message: '{count, number} {count, plural, one {question selected} other {questions selected}}',
   },
-  replqceQuestions: {
+  replaceQuestions: {
     message: 'Replace questions',
   },
   changeResources: {
@@ -88,12 +91,9 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
   expandAll: {
     message: 'Expand all',
   },
-  replace: {
+  replaceAction: {
     message: 'Replace',
   },
-  replaceQuestions: {
-    message: 'Replace questions',
-  },
   replaceQuestionsExplaination: {
     message: 'The new questions you selected will replace the current ones.',
   },

From d1b567adc0bdeab42bb605fd070ee10edffae418 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 23 Oct 2023 20:38:52 -0700
Subject: [PATCH 13/50] pass click event through tabswithoverflow; a11y
 improvements

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 238 +++++++++---------
 .../plan/CreateExamPage/TabsWithOverflow.vue  |   9 +-
 2 files changed, 122 insertions(+), 125 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
index f72e15a079..9562a0aaaf 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div style="padding-top: 2rem;">
-    <KGrid :style="wrapperStyles">
+    <KGrid>
       <KGridItem
         :layout4="{ span: 1 }"
         :layout8="{ span: 1 }"
@@ -40,39 +40,22 @@
           tabsId="quizSectionTabs"
           class="section-tabs"
           :tabs="tabs"
-          :appearanceOverrides="{ padding: '0px', overflow: 'hidden' }"
           :activeTabId="quizForge.activeSection.value ?
             quizForge.activeSection.value.section_id :
             '' "
           backgroundColor="transparent"
           hoverBackgroundColor="transparent"
+          @click="id => quizForge.setActiveSection(id)"
         >
           <template #tab="{ tab }">
-            <KButton
+            <span
               :ref="tabRefLabel(tab.id)"
               appearance="flat-button"
               style="display: inline-block;"
               :appearanceOverrides="tabStyles"
-              @click="() => quizForge.setActiveSection(tab.id)"
             >
               {{ tab.label }}
-            </KButton>
-            <KIconButton
-              icon="optionsVertical"
-              class="options-button"
-              size="small"
-              @click="() => null"
-            >
-              <template #menu>
-                <KDropdownMenu
-                  :primary="false"
-                  :disabled="false"
-                  :hasIcons="true"
-                  :options="sectionOptions"
-                  @select="opt => handleSectionOptionSelect(opt, tab.id)"
-                />
-              </template>
-            </KIconButton>
+            </span>
           </template>
 
           <template #overflow="{ overflowTabs }">
@@ -90,37 +73,7 @@
                   :hasIcons="true"
                   :options="overflowTabs"
                   @select="opt => quizForge.setActiveSection(opt.id)"
-                >
-                  <template #option="{ option }">
-                    <!-- TODO Clean this up by moving it to another component -->
-                    <!-- Maybe not so easy since they're styled differently -->
-                    <KButton
-                      appearance="flat-button"
-                      :primary="quizForge.activeSection.value.section_id === option.id"
-                      :appearanceOverrides="tabStyles"
-                      class="menu-button"
-                      @click="() => quizForge.setActiveSection(option.id)"
-                    >
-                      {{ option.label }}
-                    </KButton>
-                    <KIconButton
-                      icon="optionsVertical"
-                      style="position: absolute; right: 0; border-radius: 0!important;"
-                      @click="() => null"
-                    >
-                      <template #menu>
-                        <KDropdownMenu
-                          :primary="false"
-                          :disabled="false"
-                          :hasIcons="true"
-                          :containFocus="false"
-                          :options="sectionOptions"
-                          @select="opt => handleSectionOptionSelect(opt, option.id)"
-                        />
-                      </template>
-                    </KIconButton>
-                  </template>
-                </KDropdownMenu>
+                />
               </template>
             </KIconButton>
           </template>
@@ -144,12 +97,11 @@
 
     <KTabsPanel
       v-if="quizForge.activeSection.value"
-      class="no-question-layout"
       tabsId="quizSectionTabs"
       :activeTabId="quizForge.activeSection.value ? quizForge.activeSection.value.section_id : ''"
     >
       <!-- TODO This should be a separate component like "empty section container" or something -->
-      <div v-if="!quizForge.activeQuestions.value.length">
+      <div v-if="!quizForge.activeQuestions.value.length" class="no-question-style">
         <div class="question-mark-layout">
           <span class="help-icon-style">?</span>
         </div>
@@ -172,61 +124,63 @@
 
 
       <div v-else>
-        <KGrid>
+        <KGrid class="questions-list-label-row">
           <KGridItem
+            class="left-side-heading"
             :layout12="{ span: 6 }"
           >
-            <div class="left-column-alignment-style">
-              <div class="align-kcheckbox-style">
-                <p>
-                  <KCheckbox />
-                </p>
-              </div>
-
-              <div>
-                <p> "SELECT ALL FIX ME"</p>
-              </div>
-            </div>
+            <h2 :style="{ color: $themeTokens.annotation }">
+              {{ questionList$() }}
+            </h2>
+          </KGridItem>
+          <KGridItem
+            class="right-side-heading"
+            :layout12="{ span: 6 }"
+          >
+            <KButton
+              primary
+              :text="coreString('optionsLabel')"
+            >
+              <template #menu>
+                <KDropdownMenu
+                  :primary="false"
+                  :disabled="false"
+                  :hasIcons="true"
+                  :options="activeSectionActions"
+                  @select="handleActiveSectionAction"
+                />
+              </template>
+            </KButton>
+          </KGridItem>
+        </KGrid>
+        <KGrid :style="accordionTopBarStyles">
+          <KGridItem
+            class="left-side-heading"
+            :layout12="{ span: 6 }"
+          >
+            <KCheckbox
+              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 }"
           >
-            <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>
+            <KIconButton
+              icon="refresh"
+              :tooltip="replaceAction$()"
+              @click="handleReplaceSelection"
+            />
+            <KIconButton
+              icon="trash"
+              :tooltip="coreString('deleteAction')"
+              @click="handleDeleteSelection"
+            />
           </KGridItem>
 
         </KGrid>
@@ -236,7 +190,7 @@
             key="drag-container"
             :items="quizForge.activeQuestions.value"
             @sort="handleQuestionOrderChange"
-            @dragStart="handledDragStart"
+            @dragStart="handleDragStart"
           >
             <transition-group
               tag="div"
@@ -258,6 +212,7 @@
                             class="sort-widget"
                             moveUpText="up"
                             moveDownText="down"
+                            :noDrag="true"
                             :isFirst="index === 0"
                             :isLast="index === quizForge.activeQuestions.value.length - 1"
                             @moveUp="shiftOne(index, -1)"
@@ -265,7 +220,13 @@
                           />
                         </div>
                       </DragHandle>
-                      <KCheckbox style="padding-left: 0.5em" />
+                      <KCheckbox
+                        style="padding-left: 0.5em"
+                        :checked="quizForge.selectedActiveQuestions.value.includes(
+                          question.question_id
+                        )"
+                        @change="() => quizForge.toggleQuestionInSelection(question.question_id)"
+                      />
                       <KButton
                         tabindex="0"
                         appearance="basic-link"
@@ -350,6 +311,8 @@
         addQuizSectionQuestionsInstructions$,
         editSectionLabel$,
         deleteSectionLabel$,
+        replaceAction$,
+        questionList$,
       } = enhancedQuizManagementStrings;
 
       // The number we use for the default section title
@@ -366,6 +329,8 @@
         addQuizSectionQuestionsInstructions$,
         editSectionLabel$,
         deleteSectionLabel$,
+        replaceAction$,
+        questionList$,
       };
     },
     data() {
@@ -383,6 +348,11 @@
           userSelect: this.dragActive ? 'none!important' : 'text',
         };
       },
+      accordionTopBarStyles() {
+        return {
+          backgroundColor: this.$themePalette.grey.v_100,
+        };
+      },
       addQuizSectionsStyles() {
         return {
           margin: '0 0 1rem 0',
@@ -407,25 +377,39 @@
         return {
           margin: '0px',
           textOverflow: 'ellipsis',
-          maxWidth: '160px',
-          padding: '0px!important',
-          height: '3.25em',
+          maxWidth: '10rem',
+          padding: '1rem 0!important',
+          height: '3.25rem',
         };
       },
-      sectionOptions() {
+      activeSectionActions() {
         return [
           {
             label: this.editSectionLabel$(),
             icon: 'edit',
+            id: 'edit',
           },
           {
             label: this.deleteSectionLabel$(),
             icon: 'delete',
+            id: 'delete',
           },
         ];
       },
     },
     methods: {
+      handleActiveSectionAction(opt) {
+        switch (opt.id) {
+          case 'edit':
+            console.log('Editing, ', this.quizForge.activeSection.value.section_id);
+            break;
+          case 'delete':
+            console.log('Deleting, ', this.quizForge.activeSection.value.section_id);
+            break;
+          default:
+            console.error('BAD OPTION GIVEN OHHHHHH NOOOOO');
+        }
+      },
       tabRefLabel(section_id) {
         return `section-tab-${section_id}`;
       },
@@ -470,9 +454,10 @@
         this.quizForge.setActiveSection(get(newSection).section_id);
         this.sectionCreationCount++;
       },
-      handledDragStart() {
+      handleDragStart() {
         this.dragActive = true;
       },
+      /*
       handleSectionOptionSelect({ label }, section_id) {
         this.dragActive = false;
         // Always set the active section to the one that is having its side panel opened
@@ -487,6 +472,7 @@
             break;
         }
       },
+      */
       openSelectResources(section_id) {
         this.$router.replace({ path: 'new/' + section_id + '/select-resources' });
       },
@@ -553,11 +539,6 @@
     margin-left: 1em;
   }
 
-  .right-alignment-style {
-    float: right;
-    margin-top: 1em;
-  }
-
   .drag-icon {
     margin-top: -0.5em;
     font-size: 1em;
@@ -607,10 +588,6 @@
     font-size: 1em;
   }
 
-  .align-kcheckbox-style {
-    margin-left: 3em;
-  }
-
   .remove-button-style {
     width: 100%;
     padding: 0;
@@ -694,4 +671,31 @@
     top: 7px !important;
   }
 
+  .select-all-box {
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 2.5em;
+
+    // Vertical centering here into the KCheckbox
+    /deep/ & label {
+      line-height: 28px;
+    }
+  }
+
+  .right-side-heading {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .left-side-heading {
+    display: flex;
+    align-items: center;
+  }
+
+  .questions-list-label-row {
+    /deep/ & > div {
+      align-items: center;
+    }
+  }
+
 </style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
index cdbdc1aa4f..8375fa0dbc 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
@@ -7,6 +7,7 @@
       v-bind="$attrs"
       :activeTabId="activeTabId"
       :tabs="tabs"
+      @click="id => $emit('click', id)"
     >
       <template #tab="{ tab }">
         <slot name="tab" :tab="tab" :tabIsVisible="tabIsVisible(tab)"></slot>
@@ -62,13 +63,11 @@
       tabs() {
         this.$nextTick(() => {
           this.setOverflowTabs();
-          this.setWrappingButtonTabIndex();
         });
       },
     },
     mounted() {
       this.mounted = true;
-      this.setWrappingButtonTabIndex();
       this.$nextTick(() => {
         this.setOverflowTabs();
       });
@@ -88,12 +87,6 @@
               })
             : [];
       },
-      // The buttons are wrapped with a button that we aren't going to use due to KTabsList
-      setWrappingButtonTabIndex() {
-        for (const child of this.$refs.tabsWrapper.$el.children) {
-          child.setAttribute('tabindex', -1);
-        }
-      },
       tabIsVisible(tab) {
         return !this.overflowTabs.map(t => t.id).includes(tab.id);
       },

From 621503d0f5aa63446606f180eadfd941c1a15a0a Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 23 Oct 2023 21:17:14 -0700
Subject: [PATCH 14/50] repoint kds

---
 kolibri/core/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index fa36241068..2f6110f152 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.0",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#v2.0.0-beta1",
+    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#83c9f97871ce7e09f0a6ebba023b126d51e91931",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",

From b64d29b203595730436aaaf2e8a2a7bb288bdcd1 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 23 Oct 2023 21:25:36 -0700
Subject: [PATCH 15/50] edit & delete buttons work for section tabs

---
 .../views/plan/CreateExamPage/CreateQuizSection.vue  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 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
index 9562a0aaaf..eda7f8313d 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -399,15 +399,15 @@
     },
     methods: {
       handleActiveSectionAction(opt) {
-        switch (opt.id) {
-          case 'edit':
-            console.log('Editing, ', this.quizForge.activeSection.value.section_id);
+        const section_id = this.quizForge.activeSection.value.section_id;
+        switch (opt.label) {
+          case this.editSectionLabel$():
+            this.$router.replace({ path: 'new/' + section_id + '/edit' });
             break;
-          case 'delete':
+          case this.deleteSectionLabel$():
             console.log('Deleting, ', this.quizForge.activeSection.value.section_id);
+            this.quizForge.removeSection(this.quizForge.activeSection.value.section_id);
             break;
-          default:
-            console.error('BAD OPTION GIVEN OHHHHHH NOOOOO');
         }
       },
       tabRefLabel(section_id) {

From 46614c3de6665e9cb27079a3b8e4fa11e9b0734d Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 25 Oct 2023 14:16:14 -0700
Subject: [PATCH 16/50] expandcollapse icon;

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 45 +++++++++++++------
 1 file changed, 31 insertions(+), 14 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
index eda7f8313d..886732e4b7 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -171,6 +171,11 @@
             class="right-side-heading"
             :layout12="{ span: 6 }"
           >
+            <KIconButton
+              :icon="expandOrCollapseAllIcon"
+              :tooltip="replaceAction$()"
+              @click="handleExpandCollapseAll"
+            />
             <KIconButton
               icon="refresh"
               :tooltip="replaceAction$()"
@@ -249,11 +254,17 @@
                       </KButton>
                     </div>
                   </template>
-                  <template #content="">
-                    <div :style="{ userSelect: dragActive ? 'none!important' : 'text' }">
-                      <h1 v-if="isItemExpanded(question.question_id)">
-                        {{ question.title }}
-                      </h1>
+                  <template #content>
+                    <div
+                      :style="{ userSelect: dragActive.value ? 'none!important' : 'text' }"
+                      :aria-expanded="isItemExpanded(question.question_id)"
+                    >
+                      <p
+                        v-if="isItemExpanded(question.question_id) && !dragActive.value"
+                        class="question-content-panel"
+                      >
+                        CONTENT OF {{ question.title }}
+                      </p>
                     </div>
                   </template>
                 </AccordionItem>
@@ -273,7 +284,7 @@
 
 <script>
 
-  import { get } from '@vueuse/core';
+  import { get, set } from '@vueuse/core';
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
@@ -317,8 +328,10 @@
 
       // The number we use for the default section title
       const sectionCreationCount = ref(1);
+      const dragActive = ref(false);
 
       return {
+        dragActive,
         sectionCreationCount,
         sectionLabel$,
         addQuizSections$,
@@ -333,11 +346,6 @@
         questionList$,
       };
     },
-    data() {
-      return {
-        dragActive: false,
-      };
-    },
     inject: ['quizForge'],
     computed: {
       accordionStyleOverrides() {
@@ -345,7 +353,7 @@
           color: this.$themeTokens.text + '!important',
           textDecoration: 'none',
           // Ensure text doesn't get highlighted as we drag
-          userSelect: this.dragActive ? 'none!important' : 'text',
+          userSelect: get(this.dragActive) ? 'none!important' : 'text',
         };
       },
       accordionTopBarStyles() {
@@ -443,6 +451,7 @@
         };
       },
       handleQuestionOrderChange({ newArray }) {
+        set(this.dragActive, false);
         const payload = {
           section_id: get(this.quizForge.activeSection).section_id,
           questions: newArray,
@@ -455,11 +464,11 @@
         this.sectionCreationCount++;
       },
       handleDragStart() {
-        this.dragActive = true;
+        set(this.dragActive, true);
       },
       /*
       handleSectionOptionSelect({ label }, section_id) {
-        this.dragActive = false;
+        set(this.dragActive, false);
         // Always set the active section to the one that is having its side panel opened
         this.quizForge.setActiveSection(section_id);
 
@@ -698,4 +707,12 @@
     }
   }
 
+  .question-content-panel {
+    padding-left: 5.5em;
+  }
+
+  /deep/ .sortable-handled {
+    align-self: flex-end;
+  }
+
 </style>

From 2a85e7df0868bcd97cbf7bd2861ce0d755c2922b Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 25 Oct 2023 21:59:02 -0700
Subject: [PATCH 17/50] root page mostly feature complete; polish; a11y updates

---
 .../assets/src/composables/useQuizCreation.js |  62 ++--
 .../CreateExamPage/AccordionContainer.vue     |  17 ++
 .../plan/CreateExamPage/CreateQuizSection.vue | 289 ++++++++++--------
 .../plan/CreateExamPage/ReplaceQuestions.vue  |   4 +
 .../strings/enhancedQuizManagementStrings.js  |   4 +
 5 files changed, 221 insertions(+), 155 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index 7221f588ab..923fadeff1 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -1,4 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
+import isEqual from 'lodash/isEqual';
 import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
 import uniq from 'lodash/uniq';
 import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
@@ -43,9 +44,9 @@ export default (DEBUG = true) => {
    * The section that is currently selected for editing */
   const _activeSectionId = ref(null);
 
-  /** @type {ref<QuizQuestion[]>}
-   * The questions that are currently selected for action in the active section */
-  const _selectedQuestions = ref([]);
+  /** @type {ref<String[]>}
+   * The question_ids that are currently selected for action in the active section */
+  const _selectedQuestionIds = ref([]);
 
   /** @type {ref<Array>} A list of all channels available which have exercises */
   const _channels = ref([]);
@@ -53,7 +54,9 @@ export default (DEBUG = true) => {
   /** @type {ref<Number>} A counter for use in naming new sections */
   const _sectionLabelCounter = ref(1);
 
+  //--
   // Debug Data Generators
+  //--
   function _quizQuestions(num = 5) {
     const questions = [];
     for (let i = 0; i <= num; i++) {
@@ -71,7 +74,7 @@ export default (DEBUG = true) => {
     for (let i = 0; i <= num; i++) {
       const overrides = {
         section_id: uuidv4(),
-        section_title: `A section ${i}`,
+        section_title: `Test section ${i}`,
         questions: _quizQuestions(numQuestions),
       };
       sections.push(objectWithDefaults(overrides, QuizSection));
@@ -96,6 +99,7 @@ export default (DEBUG = true) => {
    * @throws {TypeError} if section is not a valid QuizSection
    **/
   function updateSection({ section_id, ...updates }) {
+    console.log('updating with...', section_id, updates);
     const targetSection = get(allSections).find(section => section.section_id === section_id);
     if (!targetSection) {
       throw new TypeError(`Section with id ${section_id} not found; cannot be updated.`);
@@ -135,10 +139,10 @@ export default (DEBUG = true) => {
   /**
    * @param {QuizQuestion[]} newQuestions
    * @affects _quiz - Updates the active section's `questions` property
-   * @affects _selectedQuestions - Clears this back to an empty array
+   * @affects _selectedQuestionIds - Clears this back to an empty array
    * @throws {TypeError} if newQuestions is not a valid array of QuizQuestions
    * Updates the active section's `questions` property with the given newQuestions, and clears
-   * _selectedQuestions from it. Then it resets _selectedQuestions to an empty array */
+   * _selectedQuestionIds from it. Then it resets _selectedQuestionIds to an empty array */
   // TODO WRITE THIS FUNCTION
   function replaceSelectedQuestions(newQuestions) {
     return newQuestions;
@@ -231,23 +235,24 @@ export default (DEBUG = true) => {
   // --------------------------------
 
   /** @param {QuizQuestion} question
-   * @affects _selectedQuestions - Adds question to _selectedQuestions if it isn't there already */
+   * @affects _selectedQuestionIds - Adds question to _selectedQuestionIds if it isn't
+   * there already */
   function addQuestionToSelection(question_id) {
-    set(_selectedQuestions, uniq([...get(_selectedQuestions), question_id]));
+    set(_selectedQuestionIds, uniq([...get(_selectedQuestionIds), question_id]));
   }
 
   /**
    * @param {QuizQuestion} question
-   * @affects _selectedQuestions - Removes question from _selectedQuestions if it is there */
+   * @affects _selectedQuestionIds - Removes question from _selectedQuestionIds if it is there */
   function removeQuestionFromSelection(question_id) {
     set(
-      _selectedQuestions,
-      get(_selectedQuestions).filter(id => id !== question_id)
+      _selectedQuestionIds,
+      get(_selectedQuestionIds).filter(id => id !== question_id)
     );
   }
 
   function toggleQuestionInSelection(question_id) {
-    if (get(_selectedQuestions).includes(question_id)) {
+    if (get(_selectedQuestionIds).includes(question_id)) {
       removeQuestionFromSelection(question_id);
     } else {
       addQuestionToSelection(question_id);
@@ -256,10 +261,10 @@ export default (DEBUG = true) => {
 
   function selectAllQuestions() {
     if (get(allQuestionsSelected)) {
-      set(_selectedQuestions, []);
+      set(_selectedQuestionIds, []);
     } else {
       set(
-        _selectedQuestions,
+        _selectedQuestionIds,
         get(activeQuestions).map(q => q.question_id)
       );
     }
@@ -326,9 +331,8 @@ export default (DEBUG = true) => {
   /** @type {ComputedRef<QuizQuestion[]>} All questions in the active section's `questions` property
    *                                      those which are currently set to be used in the section */
   const activeQuestions = computed(() => get(activeSection).questions);
-  /** @type {ComputedRef<QuizQuestion[]>} All questions the user has selected for the active
-   *                                         section */
-  const selectedActiveQuestions = computed(() => get(_selectedQuestions));
+  /** @type {ComputedRef<String[]>} All question_ids the user has selected for the active section */
+  const selectedActiveQuestions = computed(() => get(_selectedQuestionIds));
   /** @type {ComputedRef<QuizQuestion[]>} Questions in the active section's `resource_pool` that
    *                                         are not in `questions` */
   const replacementQuestionPool = computed(() => {});
@@ -339,9 +343,26 @@ export default (DEBUG = true) => {
    * See: remove/toggleQuestionFromSelection() & selectAllQuestions() for more */
 
   /** @type {ComputedRef<Boolean>} Whether all active questions are selected */
-  const allQuestionsSelected = computed(
-    () => get(selectedActiveQuestions).length === get(activeQuestions).length
-  );
+  const allQuestionsSelected = computed(() => {
+    return isEqual(
+      get(selectedActiveQuestions).sort(),
+      get(activeQuestions)
+        .map(q => q.question_id)
+        .sort()
+    );
+  });
+
+  /**
+   * Deletes and clears the selected questions from the active section
+   */
+  function deleteActiveSelectedQuestions() {
+    const { section_id, questions } = get(activeSection);
+    const selectedIds = get(selectedActiveQuestions);
+    const newQuestions = questions.filter(q => !selectedIds.includes(q.question_id));
+    updateSection({ section_id, questions: newQuestions });
+    set(_selectedQuestionIds, []);
+  }
+
   const noQuestionsSelected = computed(() => get(selectedActiveQuestions).length === 0);
   /** @type {ComputedRef<String>} The label that should be shown alongside the "Select all" checkbox
    */
@@ -370,6 +391,7 @@ export default (DEBUG = true) => {
     setActiveSection,
     initializeQuiz,
     updateQuiz,
+    deleteActiveSelectedQuestions,
     addQuestionToSelection,
     removeQuestionFromSelection,
     toggleQuestionInSelection,
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 b07998825a..0f5d53e88c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AccordionContainer.vue
@@ -6,6 +6,11 @@
       name="list"
       class="wrapper"
     >
+      <slot
+        name="top"
+        :expandAll="expandAll"
+        :collapseAll="collapseAll"
+      ></slot>
       <slot
         :toggleItemState="toggleItemState"
         :isItemExpanded="isItemExpanded"
@@ -26,7 +31,18 @@
         expandedItemIds: [],
       };
     },
+    watch: {
+      expandedItemIds() {
+        this.$emit('toggled', this.expandedItemIds);
+      },
+    },
     methods: {
+      expandAll(ids = []) {
+        this.expandedItemIds = ids;
+      },
+      collapseAll() {
+        this.expandedItemIds = [];
+      },
       toggleItemState(id) {
         const index = this.expandedItemIds.indexOf(id);
         if (index === -1) {
@@ -43,6 +59,7 @@
           const index = this.expandedItemIds.indexOf(id);
           this.expandedItemIds.splice(index, 1);
         }
+        this.$emit('toggled', this.expandedItemIds);
       },
     },
   };
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 886732e4b7..25bb10830b 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -34,6 +34,8 @@
 
     <KGrid :style="tabsWrapperStyles">
       <KGridItem
+        :layout4="{ span: 3 }"
+        :layout8="{ span: 6 }"
         :layout12="{ span: 10 }"
       >
         <TabsWithOverflow
@@ -45,6 +47,7 @@
             '' "
           backgroundColor="transparent"
           hoverBackgroundColor="transparent"
+          :aria-label="quizSectionsLabel$()"
           @click="id => quizForge.setActiveSection(id)"
         >
           <template #tab="{ tab }">
@@ -81,6 +84,9 @@
       </KGridItem>
 
       <KGridItem
+        style="padding: 0; margin-right: 0;"
+        :layout4="{ span: 1 }"
+        :layout8="{ span: 2 }"
         :layout12="{ span: 2 }"
       >
         <KButton
@@ -153,124 +159,141 @@
             </KButton>
           </KGridItem>
         </KGrid>
-        <KGrid :style="accordionTopBarStyles">
-          <KGridItem
-            class="left-side-heading"
-            :layout12="{ span: 6 }"
-          >
-            <KCheckbox
-              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="expandOrCollapseAllIcon"
-              :tooltip="replaceAction$()"
-              @click="handleExpandCollapseAll"
-            />
-            <KIconButton
-              icon="refresh"
-              :tooltip="replaceAction$()"
-              @click="handleReplaceSelection"
-            />
-            <KIconButton
-              icon="trash"
-              :tooltip="coreString('deleteAction')"
-              @click="handleDeleteSelection"
-            />
-          </KGridItem>
 
-        </KGrid>
+        <AccordionContainer
+          :items="quizForge.activeQuestions.value"
+          @toggled="items => expandedQuestionIds = items"
+        >
+          <template #top="{ expandAll, collapseAll }">
+            <KGrid key="top-bar" :style="accordionTopBarStyles">
+              <KGridItem
+                class="left-side-heading"
+                :layout12="{ span: 6 }"
+              >
+                <KCheckbox
+                  class="select-all-box"
+                  :label="quizForge.selectAllLabel.value"
+                  :checked="quizForge.allQuestionsSelected.value"
+                  :indeterminate="quizForge.selectAllIsIndeterminate.value"
+                  @change="() => quizForge.selectAllQuestions()"
+                />
+              </KGridItem>
 
-        <AccordionContainer v-slot="{ toggleItemState, isItemExpanded }">
-          <DragContainer
-            key="drag-container"
-            :items="quizForge.activeQuestions.value"
-            @sort="handleQuestionOrderChange"
-            @dragStart="handleDragStart"
-          >
-            <transition-group
-              tag="div"
-              name="list"
-              class="wrapper"
+              <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>
+          <template #default="{ toggleItemState, isItemExpanded }">
+            <DragContainer
+              key="drag-container"
+              :items="quizForge.activeQuestions.value"
+              @sort="handleQuestionOrderChange"
+              @dragStart="handleDragStart"
             >
-              <Draggable
-                v-for="(question, index) in quizForge.activeQuestions.value"
-                :key="`drag-${question.question_id}`"
-                tabindex="-1"
-                style="background: white"
+              <transition-group
+                tag="div"
+                name="list"
+                class="wrapper"
               >
-                <AccordionItem :id="question.question_id" :title="question.title">
-                  <template #heading="{ title }">
-                    <div class="accordion-header">
-                      <DragHandle>
-                        <div>
-                          <DragSortWidget
-                            class="sort-widget"
-                            moveUpText="up"
-                            moveDownText="down"
-                            :noDrag="true"
-                            :isFirst="index === 0"
-                            :isLast="index === quizForge.activeQuestions.value.length - 1"
-                            @moveUp="shiftOne(index, -1)"
-                            @moveDown="shiftOne(index, +1)"
-                          />
-                        </div>
-                      </DragHandle>
-                      <KCheckbox
-                        style="padding-left: 0.5em"
-                        :checked="quizForge.selectedActiveQuestions.value.includes(
-                          question.question_id
-                        )"
-                        @change="() => quizForge.toggleQuestionInSelection(question.question_id)"
-                      />
-                      <KButton
-                        tabindex="0"
-                        appearance="basic-link"
-                        :style="accordionStyleOverrides"
-                        class="accordion-header-label"
-                        @click="toggleItemState(question.question_id)"
-                      >
-                        {{ title }}
-                      </KButton>
-                      <KButton
-                        appearance="basic-link"
-                        :style="accordionStyleOverrides"
-                        class="accordion-header-chevron"
-                        @click="toggleItemState(question.question_id)"
+                <Draggable
+                  v-for="(question, index) in quizForge.activeQuestions.value"
+                  :key="`drag-${question.question_id}`"
+                  tabindex="-1"
+                  style="background: white"
+                >
+                  <AccordionItem :id="question.question_id" :title="question.title">
+                    <template #heading="{ title }">
+                      <h3
+                        class="accordion-header"
                       >
-                        <KIcon
-                          :icon="isItemExpanded(question.question_id) ?
-                            'chevronUp' : 'chevronRight'"
+                        <DragHandle>
+                          <div>
+                            <DragSortWidget
+                              class="sort-widget"
+                              moveUpText="up"
+                              moveDownText="down"
+                              :noDrag="true"
+                              :isFirst="index === 0"
+                              :isLast="index === quizForge.activeQuestions.value.length - 1"
+                              @moveUp="shiftOne(index, -1)"
+                              @moveDown="shiftOne(index, +1)"
+                            />
+                          </div>
+                        </DragHandle>
+                        <KCheckbox
+                          style="padding-left: 0.5em"
+                          :checked="quizForge.selectedActiveQuestions.value.includes(
+                            question.question_id
+                          )"
+                          @change="() => quizForge.toggleQuestionInSelection(question.question_id)"
                         />
-                      </KButton>
-                    </div>
-                  </template>
-                  <template #content>
-                    <div
-                      :style="{ userSelect: dragActive.value ? 'none!important' : 'text' }"
-                      :aria-expanded="isItemExpanded(question.question_id)"
-                    >
-                      <p
-                        v-if="isItemExpanded(question.question_id) && !dragActive.value"
-                        class="question-content-panel"
+                        <KButton
+                          tabindex="0"
+                          appearance="basic-link"
+                          :style="accordionStyleOverrides"
+                          class="accordion-header-label"
+                          :aria-expanded="isItemExpanded(question.question_id)"
+                          :aria-controls="`question-panel-${question.question_id}`"
+                          @click="toggleItemState(question.question_id)"
+                        >
+                          <span>{{ title }}</span>
+                          <KIcon
+                            style="position: absolute; right:0; top: 0.92em"
+                            :icon="isItemExpanded(question.question_id) ?
+                              'chevronUp' : 'chevronRight'"
+                          />
+                        </KButton>
+                      </h3>
+                    </template>
+                    <template #content>
+                      <div
+                        :id="`question-panel-${question.question_id}`"
+                        :ref="`question-panel-${question.question_id}`"
+                        :style="{ userSelect: dragActive.value ? 'none!important' : 'text' }"
                       >
-                        CONTENT OF {{ question.title }}
-                      </p>
-                    </div>
-                  </template>
-                </AccordionItem>
-              </Draggable>
-            </transition-group>
-          </DragContainer>
+                        <p
+                          v-if="isItemExpanded(question.question_id) && !dragActive.value"
+                          class="question-content-panel"
+                        >
+                          CONTENT OF {{ question.title }}
+                        </p>
+                      </div>
+                    </template>
+                  </AccordionItem>
+                </Draggable>
+              </transition-group>
+            </DragContainer>
+          </template>
         </AccordionContainer>
       </div>
 
@@ -317,6 +340,7 @@
         addQuizSections$,
         addSectionLabel$,
         quizTitle$,
+        quizSectionsLabel$,
         addQuestionsLabel$,
         noQuestionsInSection$,
         addQuizSectionQuestionsInstructions$,
@@ -324,17 +348,24 @@
         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$,
         addSectionLabel$,
         quizTitle$,
         addQuestionsLabel$,
@@ -372,6 +403,7 @@
         return {
           paddingTop: '1rem',
           borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
+          flexWrap: 'nowrap',
         };
       },
       tabs() {
@@ -405,7 +437,14 @@
         ];
       },
     },
+    mounted() {
+      this.$store.dispatch('notLoading');
+    },
     methods: {
+      handleReplaceSelection() {
+        const section_id = get(this.quizForge.activeSection).section_id;
+        this.$router.replace({ path: 'new/' + section_id + '/replace-questions' });
+      },
       handleActiveSectionAction(opt) {
         const section_id = this.quizForge.activeSection.value.section_id;
         switch (opt.label) {
@@ -415,6 +454,7 @@
           case this.deleteSectionLabel$():
             console.log('Deleting, ', this.quizForge.activeSection.value.section_id);
             this.quizForge.removeSection(this.quizForge.activeSection.value.section_id);
+            this.focusActiveSectionTab();
             break;
         }
       },
@@ -427,7 +467,7 @@
         // TODO Consider the "Delete section" button on the side panel; maybe we need to await
         // nextTick if we're getting the error
         if (tabRef) {
-          tabRef.$el.focus();
+          tabRef.focus();
         } else {
           console.error(
             'Tried to focus active tab id: ',
@@ -466,22 +506,6 @@
       handleDragStart() {
         set(this.dragActive, true);
       },
-      /*
-      handleSectionOptionSelect({ label }, section_id) {
-        set(this.dragActive, false);
-        // Always set the active section to the one that is having its side panel opened
-        this.quizForge.setActiveSection(section_id);
-
-        switch (label) {
-          case this.editSectionLabel$():
-            this.$router.replace({ path: 'new/' + section_id + '/edit' });
-            break;
-          case this.deleteSectionLabel$():
-            this.quizForge.removeSection(section_id);
-            break;
-        }
-      },
-      */
       openSelectResources(section_id) {
         this.$router.replace({ path: 'new/' + section_id + '/select-resources' });
       },
@@ -649,10 +673,12 @@
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    padding: 0 0.5em;
+    padding: 0 0.5em !important;
+    margin: 0.25em 0;
   }
 
   .accordion-header-label {
+    position: relative;
     flex-grow: 1;
     align-self: stretch;
     padding: 0 0 0 1em;
@@ -661,13 +687,6 @@
     cursor: pointer;
   }
 
-  .accordion-header-chevron {
-    display: flex;
-    align-items: center;
-    align-self: stretch;
-    cursor: pointer;
-  }
-
   /deep/ .checkbox-icon {
     top: 2px;
   }
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
index 7116850ebe..4357c1e4ee 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
@@ -2,6 +2,9 @@
 
   <div>
     <h1>Replace questions</h1>
+    <p v-for="(question,index) in quizForge.selectedActiveQuestions.value" :key="`${index}q`">
+      {{ JSON.stringify(question) }}
+    </p>
     <h2>
       <KRouterLink appearance="raised-button" :to="{ path: 'select-resources' }">
         Select resources
@@ -16,6 +19,7 @@
 
   export default {
     name: 'ReplaceQuestions',
+    inject: ['quizForge'],
   };
 
 </script>
diff --git a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
index 296bbb08e1..c3b0a009a9 100644
--- a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
+++ b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
@@ -10,6 +10,10 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
   createNewQuiz: {
     message: 'Create new quiz',
   },
+  quizSectionsLabel: {
+    message: 'Quiz sections',
+    context: 'Used as an aria-label for screen readers to describe the purpose of the list of tabs',
+  },
   quizTitle: {
     message: 'Quiz title',
   },

From 444909933cc901b9fe8e717287126ffa8d85f9b4 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 25 Oct 2023 22:04:37 -0700
Subject: [PATCH 18/50] handle quiz title field

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

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 25bb10830b..ad0b77be76 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -24,6 +24,7 @@
           :autofocus="true"
           :maxlength="100"
           @blur="e => quizForge.updateQuiz({ title: e.target.value })"
+          @change="title => quizForge.updateQuiz({ title })"
         />
       </KGridItem>
     </KGrid>

From f2b5f0ee62d8915ba6b63aa0528773c36438f114 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 25 Oct 2023 22:22:02 -0700
Subject: [PATCH 19/50] update link to kds commit/pr

---
 kolibri/core/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 2f6110f152..6744c698d4 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.0",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#83c9f97871ce7e09f0a6ebba023b126d51e91931",
+    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#1f497630cbe15e35c777935e1d60632023885d50",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",

From 21e6893e6e35d8290367244c34363b11fee01e60 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 15 Nov 2023 17:54:35 -0800
Subject: [PATCH 20/50] Ensure [Tab]-nav flow works properly when leaving
 Options button

KDS commit 047379f579ad7067381a9576edc21abd12ad8378 is a req for this change
---
 .../assets/src/views/plan/CreateExamPage/CreateQuizSection.vue | 3 ++-
 1 file changed, 2 insertions(+), 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 ad0b77be76..0f21e57384 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -154,6 +154,7 @@
                   :disabled="false"
                   :hasIcons="true"
                   :options="activeSectionActions"
+                  @tab="e => (e.preventDefault() || $refs.selectAllCheckbox.focus())"
                   @select="handleActiveSectionAction"
                 />
               </template>
@@ -161,7 +162,6 @@
           </KGridItem>
         </KGrid>
 
-
         <AccordionContainer
           :items="quizForge.activeQuestions.value"
           @toggled="items => expandedQuestionIds = items"
@@ -173,6 +173,7 @@
                 :layout12="{ span: 6 }"
               >
                 <KCheckbox
+                  ref="selectAllCheckbox"
                   class="select-all-box"
                   :label="quizForge.selectAllLabel.value"
                   :checked="quizForge.allQuestionsSelected.value"

From e621f66b2f1ee3fab7b643694967d6ab74cb3465 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 15 Nov 2023 18:13:55 -0800
Subject: [PATCH 21/50] not debug by default

---
 kolibri/plugins/coach/assets/src/composables/useQuizCreation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index 923fadeff1..db10418e6a 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -31,7 +31,7 @@ function isExercise(o) {
 /**
  * Composable function presenting primary interface for Quiz Creation
  */
-export default (DEBUG = true) => {
+export default (DEBUG = false) => {
   // -----------
   // Local state
   // -----------

From 1ceee065e36925f009a63d2eafd22c5ad0f006bb Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 16 Nov 2023 15:09:41 -0800
Subject: [PATCH 22/50] fix eternal loading state when navigation routes

---
 .../plan/CreateExamPage/CreateQuizSection.vue | 28 +++++++++++++++----
 .../src/views/plan/CreateExamPage/index.vue   |  4 +++
 2 files changed, 27 insertions(+), 5 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
index 0f21e57384..e7b78407e3 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -109,6 +109,28 @@
     >
       <!-- TODO This should be a separate component like "empty section container" or something -->
       <div v-if="!quizForge.activeQuestions.value.length" class="no-question-style">
+        <KGrid class="questions-list-label-row">
+          <KGridItem
+            class="right-side-heading"
+            style="padding: 0.7em 0.75em;"
+          >
+            <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>
         <div class="question-mark-layout">
           <span class="help-icon-style">?</span>
         </div>
@@ -439,9 +461,6 @@
         ];
       },
     },
-    mounted() {
-      this.$store.dispatch('notLoading');
-    },
     methods: {
       handleReplaceSelection() {
         const section_id = get(this.quizForge.activeSection).section_id;
@@ -454,7 +473,6 @@
             this.$router.replace({ path: 'new/' + section_id + '/edit' });
             break;
           case this.deleteSectionLabel$():
-            console.log('Deleting, ', this.quizForge.activeSection.value.section_id);
             this.quizForge.removeSection(this.quizForge.activeSection.value.section_id);
             this.focusActiveSectionTab();
             break;
@@ -698,7 +716,7 @@
   }
 
   /deep/ .overflow-tabs svg {
-    top: 7px !important;
+    top: 5px !important;
   }
 
   .select-all-box {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index fba6c77f1c..0ed911db4a 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -103,6 +103,10 @@
       },
     },
     watch: {
+      $route: function() {
+        // FIXME Coach shouldn't be setting loading in a beforeEach here maybe?
+        this.$store.dispatch('notLoading');
+      },
       filters(newVal) {
         this.$router.push({
           query: { ...this.$route.query, ...pickBy(newVal) },

From 4aa72d2a3f6f07fa97dcbde02b73bb517f9b6d92 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 16 Nov 2023 15:35:12 -0800
Subject: [PATCH 23/50] update kds

---
 kolibri/core/package.json |  2 +-
 yarn.lock                 | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
index 6744c698d4..d1d1535726 100644
--- a/kolibri/core/package.json
+++ b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.0",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#1f497630cbe15e35c777935e1d60632023885d50",
+    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#f19ca3fc5677fc7f3b4cdbfee33950f5adde5290",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",
diff --git a/yarn.lock b/yarn.lock
index 83628e7410..bf2759e20f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7648,6 +7648,22 @@ kolibri-constants@0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.0.tgz#47c9d773894e23251ba5ac4db420822e45603142"
   integrity sha512-WYDMGDzB9gNxRbpX1O2cGe1HrJvLvSZGwMuAv6dqrxJgPf7iO+Hi40/1CXjHM7nk5CRt+hn5bqnMzCBmj1omPA==
 
+"kolibri-design-system@https://github.com/learningequality/kolibri-design-system#f19ca3fc5677fc7f3b4cdbfee33950f5adde5290":
+  version "1.3.0"
+  resolved "https://github.com/learningequality/kolibri-design-system#f19ca3fc5677fc7f3b4cdbfee33950f5adde5290"
+  dependencies:
+    aphrodite "https://github.com/learningequality/aphrodite/"
+    autosize "^3.0.21"
+    css-element-queries "^1.2.0"
+    frame-throttle "^3.0.0"
+    fuzzysearch "^1.0.3"
+    keen-ui "^1.3.0"
+    lodash "^4.17.15"
+    popper.js "^1.14.6"
+    purecss "^0.6.2"
+    tippy.js "^4.2.1"
+    vue-intl "^3.1.0"
+
 "kolibri-design-system@https://github.com/learningequality/kolibri-design-system#v2.0.0-beta1":
   version "1.3.0"
   resolved "https://github.com/learningequality/kolibri-design-system#13e539592fd87508cd32f60e4ad22c1ec320559b"

From b4f196f7b4da056e69af516e5e697ccf16a604d1 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Mon, 6 Nov 2023 22:20:15 +0300
Subject: [PATCH 24/50] fixed loading failure

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

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index 0ed911db4a..8a12850b64 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -120,6 +120,9 @@
     mounted() {
       this.$store.dispatch('notLoading');
     },
+    mounted() {
+      this.$store.dispatch('notLoading');
+    },
     $trs: {
       createNewExamLabel: {
         message: 'Create new quiz',

From 63239d3a63be8d1eee7d7000d4206a2b06af7d26 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Tue, 7 Nov 2023 20:23:15 +0300
Subject: [PATCH 25/50] resource sidepanel header added

---
 .../plan/CreateExamPage/ResourceSelection.vue | 61 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 86e9b8d5f0..4be8e0be68 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -1,14 +1,62 @@
 <template>
 
-  <KTextbox ref="textbox" label="Hit TAB, focus should go here" style="margin-top: 2em;" />
+  <div class="select-resource">
+    <h5
+      class="title-style"
+    >
+      {{ sectionSettings$() }}
+    </h5>
+    <KGrid
+      class="space-bottom-items"
+    >
+      <KGridItem
+        :layout12="{ span: 4 }"
+        :layout8="{ span: 3 }"
+        :layout4="{ span: 1 }"
+      >
+        <KGrid>
+          <KGridItem
+            :layout12="{ span: 6 }"
+            :layout8="{ span: 4 }"
+          >
+            <p>Math</p>
+          </KGridItem>
+
+          <KGridItem
+            :layout12="{ span: 6 }"
+            :layout8="{ span: 4 }"
+          >
+            <p>Early math</p>
+          </KGridItem>
+        </KGrid>
+      </KGridItem>
+
+      <KGridItem
+        :layout12="{ span: 7 }"
+        :layout8="{ span: 5 }"
+        :layout4="{ span: 3 }"
+      >
+        <p>Addition and subtraction within 20A</p>
+      </KGridItem>
+    </KGrid>
+  </div>
 
 </template>
 
 
 <script>
 
+  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+
   export default {
     name: 'ResourceSelection',
+    setup() {
+      const { sectionSettings$ } = enhancedQuizManagementStrings;
+
+      return {
+        sectionSettings$,
+      };
+    },
     methods: {
       /** @public */
       focusFirstEl() {
@@ -18,3 +66,14 @@
   };
 
 </script>
+
+
+<style scoped>
+.select-resource{
+  margin-top: -3em;
+}
+.title-style{
+  font-weight:600;
+  font-size: 1em;
+}
+</style>

From 5c97f6dd867023e75889121535335bd311457385 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Tue, 7 Nov 2023 22:09:49 +0300
Subject: [PATCH 26/50] added search component

---
 .../plan/CreateExamPage/ResourceSelection.vue | 87 ++++++++++++-------
 1 file changed, 54 insertions(+), 33 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 4be8e0be68..11011a1943 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -4,41 +4,42 @@
     <h5
       class="title-style"
     >
-      {{ sectionSettings$() }}
+      <KIcon
+        icon="back"
+      />
+      Select folders or exercises from these channels
     </h5>
-    <KGrid
-      class="space-bottom-items"
-    >
-      <KGridItem
-        :layout12="{ span: 4 }"
-        :layout8="{ span: 3 }"
-        :layout4="{ span: 1 }"
-      >
-        <KGrid>
-          <KGridItem
-            :layout12="{ span: 6 }"
-            :layout8="{ span: 4 }"
-          >
-            <p>Math</p>
-          </KGridItem>
+    <p>Select from bookmarks</p>
+
+    <LessonsSearchBox
+      ref="textbox"
+      placeholder="search by keyword"
+      searchTerm="searchTerm"
+      :inputPlaceHolderStyle="inputPlaceHolderStyle"
+      @searchterm="search"
+    />
 
-          <KGridItem
-            :layout12="{ span: 6 }"
-            :layout8="{ span: 4 }"
-          >
-            <p>Early math</p>
-          </KGridItem>
-        </KGrid>
-      </KGridItem>
+    <p
+      class="section-topic-style"
+    >
+      Addition and subtraction within 20A
+    </p>
+    <p
+      class="section-subtopic-style"
+    >
+      Learn to add and subtract numbers that are 20 or less.
+    </p>
 
-      <KGridItem
-        :layout12="{ span: 7 }"
-        :layout8="{ span: 5 }"
-        :layout4="{ span: 3 }"
+    <div class="select-all-style">
+      <KIcon
+        icon="indeterminateCheck"
+      />
+      <span
+        class="space-content-left"
       >
-        <p>Addition and subtraction within 20A</p>
-      </KGridItem>
-    </KGrid>
+        select all
+      </span>
+    </div>
   </div>
 
 </template>
@@ -47,9 +48,13 @@
 <script>
 
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
 
   export default {
     name: 'ResourceSelection',
+    components: {
+      LessonsSearchBox,
+    },
     setup() {
       const { sectionSettings$ } = enhancedQuizManagementStrings;
 
@@ -70,10 +75,26 @@
 
 <style scoped>
 .select-resource{
-  margin-top: -3em;
+  margin-top: -4em;
 }
 .title-style{
   font-weight:600;
-  font-size: 1em;
+  font-size: 1.4em;
+}
+.section-topic-style{
+  font-weight:600;
+  font-size: 1.4em;
+}
+.section-subtopic-style{
+  font-size: 1.2em;
+}
+.select-all-style{
+  font-size:1.2em;
+  font-weight:600;
+  display: inline-flex;
+  justify-content: space-between;
+}
+.space-content-left{
+  margin-left: .5em;
 }
 </style>

From 07b7724596b2ef2f35c9a3e39a0839ba855e4cb2 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 8 Nov 2023 19:04:28 +0300
Subject: [PATCH 27/50] structured the add resource sidepanel

---
 .../CreateExamPage/BookMarkedResource.vue     | 40 +++++++++++
 .../plan/CreateExamPage/QuizResourceCard.vue  | 65 +++++++++++++++++
 .../plan/CreateExamPage/ResourceSelection.vue | 72 +++++++++----------
 3 files changed, 140 insertions(+), 37 deletions(-)
 create mode 100644 kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
 create mode 100644 kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuizResourceCard.vue

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
new file mode 100644
index 0000000000..f9c52abadc
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
@@ -0,0 +1,40 @@
+<template>
+
+  <div class="">
+    <div class="card-shadow" style="box-shadow:0px 0px 2px 0px;border-radius:5px;">
+      <KGrid>
+        <KGridItem
+          :layout12="{ span: 6 }"
+        >
+          <div
+            style="
+                background-color:#fafafafa;
+                width:100%;
+                height:150px;
+                margin:10px;
+                justify-content: center;"
+          >
+            <KIcon icon="bookmark" size="large" />
+          </div>
+        </KGridItem>
+
+        <KGridItem
+          :layout12="{ span: 6 }"
+        >
+          <p>Bookmarks</p>
+          <p>XX bookmarks</p>
+        </KGridItem>
+      </KGrid>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'BookMarkedResource',
+  };
+
+</script>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuizResourceCard.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuizResourceCard.vue
new file mode 100644
index 0000000000..947e479471
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuizResourceCard.vue
@@ -0,0 +1,65 @@
+<template>
+
+  <div class="">
+    <div class="card-shadow" style="box-shadow:0px 0px 2px 0px;border-radius:5px;">
+      <KGrid>
+        <KGridItem
+          :layout12="{ span: 4 }"
+        >
+          <div
+            style="
+                background-color:#DEDEDE;
+                width:100%;
+                height:150px;
+                margin:10px;
+                justify-content: center;"
+          >
+
+          </div>
+        </KGridItem>
+
+        <KGridItem
+          :layout12="{ span: 8 }"
+        >
+          <p
+            style="font-weight:700"
+          >
+            <KIcon icon="channel" />
+            Channel name
+          </p>
+          <!-- <ChannelCard
+            :isMobile="windowIsSmall"
+            :title="content.title || content.name"
+            :thumbnail="content.thumbnail"
+            :tagline="content.tagline || content.description"
+            :numCoachContents="content.num_coach_contents"
+            :link="genContentLinkBackLinkCurrentPage(content.id, false, deviceId)"
+          /> -->
+        </KGridItem>
+      </KGrid>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  //  import ChannelCard from '/kolibri/plugins/learn/assets/src/views/ChannelCard.vue';
+
+  export default {
+    name: 'QuizResourceCard',
+    components: {
+      // ChannelCard
+    },
+  };
+
+</script>
+
+
+<style>
+
+.card-shadow{
+    margin-top:.5em;
+}
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 11011a1943..f9607efce4 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -11,35 +11,45 @@
     </h5>
     <p>Select from bookmarks</p>
 
+    <BookMarkedResource />
+
     <LessonsSearchBox
       ref="textbox"
       placeholder="search by keyword"
       searchTerm="searchTerm"
       :inputPlaceHolderStyle="inputPlaceHolderStyle"
+      style="margin-top:1em;"
       @searchterm="search"
     />
 
-    <p
-      class="section-topic-style"
-    >
-      Addition and subtraction within 20A
-    </p>
-    <p
-      class="section-subtopic-style"
-    >
-      Learn to add and subtract numbers that are 20 or less.
-    </p>
-
-    <div class="select-all-style">
-      <KIcon
-        icon="indeterminateCheck"
-      />
-      <span
-        class="space-content-left"
-      >
-        select all
-      </span>
-    </div>
+    <!-- <ChannelCard
+      :key="1"
+      channel="channel"
+      searchTerm="searchTerm"
+      searchTermHasChanged="searchTermHasChanged"
+      search="search"
+    />
+    <ChannelCard
+      :key="1"
+      channel="channel"
+      searchTerm="searchTerm"
+      searchTermHasChanged="searchTermHasChanged"
+      search="search"
+    />
+    <ChannelCard
+      :key="1"
+      channel="channel"
+      searchTerm="searchTerm"
+      searchTermHasChanged="searchTermHasChanged"
+      search="search"
+    />
+    <ChannelCard
+      :key="1"
+      channel="channel"
+      searchTerm="searchTerm"
+      searchTermHasChanged="searchTermHasChanged"
+      search="search"
+    /> -->
   </div>
 
 </template>
@@ -49,11 +59,15 @@
 
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
+  import BookMarkedResource from './BookMarkedResource.vue';
+  // import ChannelCard from './ChannelCard.vue';
 
   export default {
     name: 'ResourceSelection',
     components: {
       LessonsSearchBox,
+      BookMarkedResource,
+      // ChannelCard,
     },
     setup() {
       const { sectionSettings$ } = enhancedQuizManagementStrings;
@@ -81,20 +95,4 @@
   font-weight:600;
   font-size: 1.4em;
 }
-.section-topic-style{
-  font-weight:600;
-  font-size: 1.4em;
-}
-.section-subtopic-style{
-  font-size: 1.2em;
-}
-.select-all-style{
-  font-size:1.2em;
-  font-weight:600;
-  display: inline-flex;
-  justify-content: space-between;
-}
-.space-content-left{
-  margin-left: .5em;
-}
 </style>

From 827c0b6a3e2eb58214c1e4db1ea91344d8663c98 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 9 Nov 2023 01:57:09 +0300
Subject: [PATCH 28/50] adds channel cards to select resource side panel

---
 .../plan/CreateExamPage/ResourceSelection.vue | 139 ++++++++++++++----
 1 file changed, 110 insertions(+), 29 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index f9607efce4..073be07c44 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -18,38 +18,58 @@
       placeholder="search by keyword"
       searchTerm="searchTerm"
       :inputPlaceHolderStyle="inputPlaceHolderStyle"
-      style="margin-top:1em;"
+      style="margin-top:1em;margin-bottom:1em;"
       @searchterm="search"
     />
-
-    <!-- <ChannelCard
-      :key="1"
-      channel="channel"
-      searchTerm="searchTerm"
-      searchTermHasChanged="searchTermHasChanged"
-      search="search"
+    <LessonContentCard
+      class="'with-checkbox': needCheckboxes"
+      title="content.title"
+      thumbnail="content.thumbnail"
+      description="content.description"
+      kind="content.kind"
+      message="contentCardMessage(content)"
+      link="contentCardLink(content)"
+      numCoachContents="content.num_coach_contents"
+      isLeaf="content.is_leaf"
     />
-    <ChannelCard
-      :key="1"
-      channel="channel"
-      searchTerm="searchTerm"
-      searchTermHasChanged="searchTermHasChanged"
-      search="search"
+    <LessonContentCard
+      class="'with-checkbox': needCheckboxes"
+      title="content.title"
+      thumbnail="content.thumbnail"
+      description="content.description"
+      kind="content.kind"
+      message="contentCardMessage(content)"
+      link="contentCardLink(content)"
+      numCoachContents="content.num_coach_contents"
+      isLeaf="content.is_leaf"
     />
-    <ChannelCard
-      :key="1"
-      channel="channel"
-      searchTerm="searchTerm"
-      searchTermHasChanged="searchTermHasChanged"
-      search="search"
+
+    <ContentCardList
+      :contentList="filteredContentList"
+      :contentCardMessage="selectionMetadata"
+      :contentCardLink="contentLink"
+      :viewMoreButtonState="viewMoreButtonState"
+      :contentIsChecked="contentIsSelected"
+      :contentHasCheckbox="contentHasCheckbox"
     />
-    <ChannelCard
-      :key="1"
-      channel="channel"
-      searchTerm="searchTerm"
-      searchTermHasChanged="searchTermHasChanged"
-      search="search"
-    /> -->
+
+    <!-- <div
+      v-for="content in filteredContentList"
+    >
+      <LessonContentCard
+        :class="{ 'with-checkbox': needCheckboxes }"
+        :title="content.title"
+        :thumbnail="content.thumbnail"
+        :description="content.description"
+        :kind="content.kind"
+        :message="contentCardMessage(content)"
+        :link="contentCardLink(content)"
+        :numCoachContents="content.num_coach_contents"
+        :isLeaf="content.is_leaf"
+      />
+
+    </div> -->
+
   </div>
 
 </template>
@@ -57,17 +77,22 @@
 
 <script>
 
+  import { mapState } from 'vuex';
+  import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import { PageNames } from '../../../constants';
   import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
   import BookMarkedResource from './BookMarkedResource.vue';
-  // import ChannelCard from './ChannelCard.vue';
+  import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
+  import LessonContentCard from './../LessonResourceSelectionPage/LessonContentCard/index.vue';
 
   export default {
     name: 'ResourceSelection',
     components: {
       LessonsSearchBox,
       BookMarkedResource,
-      // ChannelCard,
+      ContentCardList,
+      LessonContentCard,
     },
     setup() {
       const { sectionSettings$ } = enhancedQuizManagementStrings;
@@ -76,11 +101,67 @@
         sectionSettings$,
       };
     },
+    data() {
+      return {
+        viewMoreButtonState: 'no_more_results',
+        contentHasCheckbox: () => false,
+        contentIsSelected: () => '',
+      };
+    },
+    computed: {
+      ...mapState('examCreation', ['contentList']),
+      filteredContentList() {
+        return this.contentList;
+      },
+    },
+    beforeMount() {
+      console.log(this.contentList.length);
+    },
     methods: {
       /** @public */
       focusFirstEl() {
         this.$refs.textbox.focus();
       },
+      selectionMetadata(content) {
+        if (content.kind === ContentNodeKinds.TOPIC) {
+          const count = content.exercises.filter(exercise =>
+            Boolean(this.selectedExercises[exercise.id])
+          ).length;
+          if (count === 0) {
+            return '';
+          }
+          const total = content.exercises.length;
+          return this.$tr('total_number', { count, total });
+        }
+        return '';
+      },
+      contentLink(content) {
+        if (!content.is_leaf) {
+          return {
+            name: PageNames.EXAM_CREATION_SELECT_PRACTICE_QUIZ_TOPIC,
+            params: {
+              classId: this.classId,
+              topicId: content.id,
+            },
+          };
+        }
+
+        const value = content.assessmentmetadata.assessment_item_ids.length;
+        this.$store.commit('examCreation/SET_NUMBER_OF_QUESTIONS', value);
+
+        return {
+          name: PageNames.EXAM_CREATION_PRACTICE_QUIZ_PREVIEW,
+          params: {
+            classId: this.classId,
+            contentId: content.id,
+          },
+        };
+      },
+    },
+    $trs: {
+      total_number: {
+        message: 'Channels',
+      },
     },
   };
 

From 89efc543b94dec626b96554116a64b67d0420df8 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 9 Nov 2023 12:24:09 +0300
Subject: [PATCH 29/50] added ContentCardList component

---
 .../src/views/plan/CreateExamPage/ResourceSelection.vue    | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 073be07c44..2326d4d592 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -22,7 +22,7 @@
       @searchterm="search"
     />
     <LessonContentCard
-      class="'with-checkbox': needCheckboxes"
+
       title="content.title"
       thumbnail="content.thumbnail"
       description="content.description"
@@ -33,7 +33,6 @@
       isLeaf="content.is_leaf"
     />
     <LessonContentCard
-      class="'with-checkbox': needCheckboxes"
       title="content.title"
       thumbnail="content.thumbnail"
       description="content.description"
@@ -111,12 +110,10 @@
     computed: {
       ...mapState('examCreation', ['contentList']),
       filteredContentList() {
+        console.log(this.contentList);
         return this.contentList;
       },
     },
-    beforeMount() {
-      console.log(this.contentList.length);
-    },
     methods: {
       /** @public */
       focusFirstEl() {

From a429f96b912540980bff9bd0f09701902384492e Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 9 Nov 2023 22:45:32 +0300
Subject: [PATCH 30/50] fetch resources for content

---
 .../CreateExamPage/BookMarkedResource.vue     |  13 +-
 .../plan/CreateExamPage/QuizResourceCard.vue  |  18 +-
 .../plan/CreateExamPage/ResourceSelection.vue | 264 ++++++++++++++----
 .../plan/CreateExamPage/SectionSidePanel.vue  |   9 +-
 .../src/views/plan/CreateExamPage/index.vue   |  48 +++-
 5 files changed, 277 insertions(+), 75 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
index f9c52abadc..709359598f 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
@@ -4,13 +4,13 @@
     <div class="card-shadow" style="box-shadow:0px 0px 2px 0px;border-radius:5px;">
       <KGrid>
         <KGridItem
-          :layout12="{ span: 6 }"
+          :layout12="{ span: 4 }"
         >
           <div
             style="
                 background-color:#fafafafa;
                 width:100%;
-                height:150px;
+                height:123px;
                 margin:10px;
                 justify-content: center;"
           >
@@ -19,7 +19,7 @@
         </KGridItem>
 
         <KGridItem
-          :layout12="{ span: 6 }"
+          :layout12="{ span: 8 }"
         >
           <p>Bookmarks</p>
           <p>XX bookmarks</p>
@@ -38,3 +38,10 @@
   };
 
 </script>
+
+
+<style  lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuizResourceCard.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuizResourceCard.vue
index 947e479471..b80354a763 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuizResourceCard.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuizResourceCard.vue
@@ -27,14 +27,12 @@
             <KIcon icon="channel" />
             Channel name
           </p>
-          <!-- <ChannelCard
-            :isMobile="windowIsSmall"
-            :title="content.title || content.name"
-            :thumbnail="content.thumbnail"
-            :tagline="content.tagline || content.description"
-            :numCoachContents="content.num_coach_contents"
-            :link="genContentLinkBackLinkCurrentPage(content.id, false, deviceId)"
-          /> -->
+          <ResourceSelection
+            :channelId="channelId"
+            :channelName="channelName"
+            :channelThumbnail="channelThumbnail"
+            :channelDescription="channelDescription"
+          />
         </KGridItem>
       </KGrid>
     </div>
@@ -45,12 +43,12 @@
 
 <script>
 
-  //  import ChannelCard from '/kolibri/plugins/learn/assets/src/views/ChannelCard.vue';
+  import ResourceSelection from './ResourceSelection.vue';
 
   export default {
     name: 'QuizResourceCard',
     components: {
-      // ChannelCard
+      ResourceSelection,
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 2326d4d592..14b31ef65b 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -16,12 +16,25 @@
     <LessonsSearchBox
       ref="textbox"
       placeholder="search by keyword"
-      searchTerm="searchTerm"
+      :searchTerm="searchTerm"
       :inputPlaceHolderStyle="inputPlaceHolderStyle"
       style="margin-top:1em;margin-bottom:1em;"
       @searchterm="search"
     />
-    <LessonContentCard
+    <!-- <ResourceSelection
+      :channelId="channelId"
+      :channelName="channelName"
+      :channelThumbnail="channelThumbnail"
+      :channelDescription="channelDescription"
+    />
+    <ResourceSelectionBreadcrumbs
+      :channelId="channelId"
+      :channelName="channelName"
+      :channelThumbnail="channelThumbnail"
+      :channelDescription="channelDescription"
+    />   -->
+
+    <!-- <LessonContentCard
 
       title="content.title"
       thumbnail="content.thumbnail"
@@ -31,8 +44,8 @@
       link="contentCardLink(content)"
       numCoachContents="content.num_coach_contents"
       isLeaf="content.is_leaf"
-    />
-    <LessonContentCard
+    /> -->
+    <!-- <LessonContentCard
       title="content.title"
       thumbnail="content.thumbnail"
       description="content.description"
@@ -40,35 +53,44 @@
       message="contentCardMessage(content)"
       link="contentCardLink(content)"
       numCoachContents="content.num_coach_contents"
-      isLeaf="content.is_leaf"
-    />
+      isLeaf="content.is_leaf" -->
+    <!-- /> -->
 
-    <ContentCardList
+    <!-- <ContentCardList
       :contentList="filteredContentList"
       :contentCardMessage="selectionMetadata"
       :contentCardLink="contentLink"
       :viewMoreButtonState="viewMoreButtonState"
       :contentIsChecked="contentIsSelected"
       :contentHasCheckbox="contentHasCheckbox"
-    />
-
-    <!-- <div
-      v-for="content in filteredContentList"
-    >
-      <LessonContentCard
-        :class="{ 'with-checkbox': needCheckboxes }"
-        :title="content.title"
-        :thumbnail="content.thumbnail"
-        :description="content.description"
-        :kind="content.kind"
-        :message="contentCardMessage(content)"
-        :link="contentCardLink(content)"
-        :numCoachContents="content.num_coach_contents"
-        :isLeaf="content.is_leaf"
-      />
-
-    </div> -->
+    /> -->
 
+    <!-- <LessonContentCard
+      v-for="(content ,index) in filteredContentList"
+      :key="index"
+      :class="{ 'with-checkbox': needCheckboxes }"
+      :title="content.title"
+      :thumbnail="content.thumbnail"
+      :description="content.description"
+      :kind="content.kind"
+      :message="contentCardMessage(content)"
+      :link="contentCardLink(content)"
+      :numCoachContents="content.num_coach_contents"
+      :isLeaf="content.is_leaf"
+    /> -->
+    <ContentCardList
+      :contentList="filteredContentList"
+      :showSelectAll="selectAllIsVisible"
+      :viewMoreButtonState="viewMoreButtonState"
+      :selectAllChecked="addableContent.length === 0"
+      :contentIsChecked="contentIsInLesson"
+      :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
+      :contentCardMessage="selectionMetadata"
+      :contentCardLink="contentLink"
+      @changeselectall="toggleTopicInWorkingResources"
+      @change_content_card="toggleSelected"
+      @moreresults="handleMoreResults"
+    />
   </div>
 
 </template>
@@ -76,14 +98,19 @@
 
 <script>
 
-  import { mapState } from 'vuex';
-  import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
+  // import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import every from 'lodash/every';
+  import pickBy from 'lodash/pickBy';
   import { PageNames } from '../../../constants';
+  import { LessonsPageNames } from '../../../constants/lessonsConstants';
   import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
   import BookMarkedResource from './BookMarkedResource.vue';
   import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
-  import LessonContentCard from './../LessonResourceSelectionPage/LessonContentCard/index.vue';
+  // import LessonContentCard from './../LessonResourceSelectionPage/LessonContentCard/index.vue';
+  // import ResourceSelection from './ResourceSelection.vue';
+  // import  ResourceSelectionBreadcrumbs from './../../../views/plan/LessonResourceS
+  // electionPage/SearchTools/ResourceSelectionBreadcrumbs.vue'
 
   export default {
     name: 'ResourceSelection',
@@ -91,8 +118,11 @@
       LessonsSearchBox,
       BookMarkedResource,
       ContentCardList,
-      LessonContentCard,
+      // ResourceSelection,
+      // ResourceSelectionBreadcrumbs,
+      // LessonContentCard,
     },
+    inject: ['contentList', 'quizForge'],
     setup() {
       const { sectionSettings$ } = enhancedQuizManagementStrings;
 
@@ -103,35 +133,121 @@
     data() {
       return {
         viewMoreButtonState: 'no_more_results',
-        contentHasCheckbox: () => false,
-        contentIsSelected: () => '',
+        // contentHasCheckbox: () => false,
+        // contentIsSelected: () => '',
+        searchTerm: '',
+        search: '',
+        filters: {
+          channel: this.$route.query.channel || null,
+          kind: this.$route.query.kind || null,
+          role: this.$route.query.role || null,
+        },
       };
     },
     computed: {
-      ...mapState('examCreation', ['contentList']),
       filteredContentList() {
-        console.log(this.contentList);
-        return this.contentList;
+        const { role } = this.filters;
+        if (!this.inSearchMode) {
+          return this.contentList;
+        }
+        const list = this.contentList ? this.contentList : this.bookmarksList;
+        return list.filter(contentNode => {
+          let passesFilters = true;
+          if (role === 'nonCoach') {
+            passesFilters = passesFilters && contentNode.num_coach_contents === 0;
+          }
+          if (role === 'coach') {
+            passesFilters = passesFilters && contentNode.num_coach_contents > 0;
+          }
+          return passesFilters;
+        });
+      },
+      inSearchMode() {
+        return this.pageName === LessonsPageNames.SELECTION_SEARCH;
+      },
+      inputPlaceHolderStyle() {
+        return {
+          color: this.$themeTokens.annotation,
+        };
+      },
+      selectAllIsVisible() {
+        // Do not show 'Select All' if on Search Results, on Channels Page,
+        // or if all contents are topics
+        return (
+          !this.inSearchMode &&
+          this.pageName !== LessonsPageNames.SELECTION_ROOT &&
+          !every(this.contentList, this.contentIsDirectoryKind)
+        );
+      },
+      contentIsDirectoryKind({ is_leaf }) {
+        return !is_leaf;
+      },
+      contentIsInLesson() {
+        return ({ id }) =>
+          Boolean(this.workingResources.find(resource => resource.contentnode_id === id));
+      },
+      selectionMetadata(content) {
+        let count = 0;
+        let total = 0;
+        if (this.ancestorCounts[content.id]) {
+          count = this.ancestorCounts[content.id].count;
+          total = this.ancestorCounts[content.id].total;
+        }
+        if (count) {
+          return this.$tr('selectionInformation', {
+            count,
+            total,
+          });
+        }
+        // return '';
+        return function() {
+          console.log('Dynamic function called');
+        };
+      },
+      addableContent() {
+        // Content in the topic that can be added if 'Select All' is clicked
+        const list = this.contentList ? this.contentList : this.bookmarksList;
+        return list.filter(
+          content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
+        );
       },
     },
+    watch: {
+      workingResources(newVal, oldVal) {
+        this.showResourcesDifferenceMessage(newVal.length - oldVal.length);
+        this.debouncedSaveResources();
+      },
+      filters(newVal) {
+        const newQuery = {
+          ...this.$route.query,
+          ...newVal,
+        };
+        this.$router.push({
+          query: pickBy(newQuery),
+        });
+      },
+    },
+    created() {
+      console.log(this.contentList);
+    },
     methods: {
       /** @public */
       focusFirstEl() {
         this.$refs.textbox.focus();
       },
-      selectionMetadata(content) {
-        if (content.kind === ContentNodeKinds.TOPIC) {
-          const count = content.exercises.filter(exercise =>
-            Boolean(this.selectedExercises[exercise.id])
-          ).length;
-          if (count === 0) {
-            return '';
-          }
-          const total = content.exercises.length;
-          return this.$tr('total_number', { count, total });
-        }
-        return '';
-      },
+      // selectionMetadata(content) {
+      //   if (content.kind === ContentNodeKinds.TOPIC) {
+      //     const count = content.exercises.filter(exercise =>
+      //       Boolean(this.selectedExercises[exercise.id])
+      //     ).length;
+      //     if (count === 0) {
+      //       return '';
+      //     }
+      //     const total = content.exercises.length;
+      //     return this.$tr('total_number', { count, total });
+      //   }
+      //   return '';
+      // },
       contentLink(content) {
         if (!content.is_leaf) {
           return {
@@ -154,9 +270,61 @@
           },
         };
       },
+      handleMoreResults() {
+        this.moreResultsState = 'waiting';
+        this.fetchAdditionalSearchResults({
+          searchTerm: this.searchTerm,
+          kind: this.filters.kind,
+          channelId: this.filters.channel,
+          currentResults: this.searchResults.results,
+        })
+          .then(() => {
+            this.moreResultsState = null;
+            this.moreResultsState;
+          })
+          .catch(() => {
+            this.moreResultsState = 'error';
+          });
+      },
+      toggleSelected({ content, checked }) {
+        if (checked) {
+          this.addToSelectedResources(content);
+        } else {
+          this.removeFromSelectedResources([content]);
+        }
+      },
+      toggleTopicInWorkingResources(isChecked) {
+        if (isChecked) {
+          this.addableContent.forEach(resource => {
+            this.addToResourceCache({
+              node: { ...resource },
+            });
+          });
+          this.addToWorkingResources(this.addableContent);
+        } else {
+          this.removeFromSelectedResources(this.contentList);
+        }
+      },
+      // filteredContentList() {
+      //   const { role } = this.filters;
+      //   if (!this.inSearchMode) {
+      //     return this.contentList;
+      //   }
+      //   const list = this.contentList ? this.contentList : this.bookmarksList;
+      //   return list.filter(contentNode => {
+      //     let passesFilters = true;
+      //     if (role === 'nonCoach') {
+      //       passesFilters = passesFilters && contentNode.num_coach_contents === 0;
+      //     }
+      //     if (role === 'coach') {
+      //       passesFilters = passesFilters && contentNode.num_coach_contents > 0;
+      //     }
+      //     return passesFilters;
+      //   });
+      // },
     },
     $trs: {
-      total_number: {
+      selectionInformation: {
         message: 'Channels',
       },
     },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index c3ed566db2..0d88da67d3 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -19,6 +19,7 @@
 
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { PageNames } from '../../../constants';
+  import ResourceSelectionBreadcrumbs from '../../plan/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
   import SectionEditor from './SectionEditor';
   import ReplaceQuestions from './ReplaceQuestions';
   import ResourceSelection from './ResourceSelection';
@@ -31,7 +32,13 @@
 
   export default {
     name: 'SectionSidePanel',
-    components: { SidePanelModal, SectionEditor, ReplaceQuestions, ResourceSelection },
+    components: {
+      SidePanelModal,
+      SectionEditor,
+      ReplaceQuestions,
+      ResourceSelection,
+      ResourceSelectionBreadcrumbs,
+    },
     inject: ['quizForge'],
     data() {
       return {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index 8a12850b64..13ada04040 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -44,7 +44,10 @@
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import pickBy from 'lodash/pickBy';
+  import { ChannelResource, BookmarksResource, ContentNodeResource } from 'kolibri.resources';
+  import chunk from 'lodash/chunk';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
+  import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { PageNames } from '../../../constants';
   import commonCoach from '../../common';
@@ -67,6 +70,8 @@
       return {
         quizInitialized,
         quizForge,
+        contentList: [],
+        bookmarksList: [],
       };
     },
     /**
@@ -80,18 +85,8 @@
       return {
         quizForge: this.quizForge,
         showError: false,
-        moreResultsState: null,
-        // null corresponds to 'All' filter value
-        filters: {
-          channel: this.$route.query.channel || null,
-          kind: this.$route.query.kind || null,
-          role: this.$route.query.role || null,
-        },
-        // numQuestionsBlurred: false,
-        bookmarksCount: 0,
-        bookmarks: [],
-        more: null,
-        // showSectionSettingsMenu:false
+        contentList: this.contentList,
+        bookmarksList: this.bookmarksList,
       };
     },
     computed: {
@@ -121,7 +116,34 @@
       this.$store.dispatch('notLoading');
     },
     mounted() {
-      this.$store.dispatch('notLoading');
+      ChannelResource.fetchCollection({
+        getParams: { available: true, has_exercise: true },
+      }).then(channels => {
+        const channelContentList = channels.map(channel => ({
+          ...channel,
+          id: channel.root,
+          title: channel.name,
+          kind: ContentNodeKinds.CHANNEL,
+          is_leaf: false,
+        }));
+        this.contentList = channelContentList;
+        console.log(this.contentList);
+        this.$store.dispatch('notLoading');
+      });
+      BookmarksResource.fetchCollection()
+        .then(bookmarks => bookmarks.map(bookmark => bookmark.contentnode_id))
+        .then(contentNodeIds => {
+          const chunkedContentNodeIds = chunk(contentNodeIds, 50); // Breaking contentNodeIds into lists no more than 50 in length
+          // Now we will create an array of promises, each of which queries for the 50-id chunk
+          const fetchPromises = chunkedContentNodeIds.map(idsChunk => {
+            return ContentNodeResource.fetchCollection({
+              getParams: {
+                ids: idsChunk, // This filters only the ids we want
+              },
+            });
+          });
+          Promise.all(fetchPromises);
+        });
     },
     $trs: {
       createNewExamLabel: {

From 85ee0d2dae0737042784074020a05d9588dbccc9 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Fri, 10 Nov 2023 17:45:59 +0300
Subject: [PATCH 31/50] Optimize bookmark fetching logic for enhance quiz
 managment

---
 .../assets/src/composables/useQuizCreation.js | 39 +++++++++-
 .../plan/CreateExamPage/ResourceSelection.vue | 71 ++++++++++---------
 2 files changed, 76 insertions(+), 34 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
index db10418e6a..0d245f19d2 100644
--- a/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
+++ b/kolibri/plugins/coach/assets/src/composables/useQuizCreation.js
@@ -3,7 +3,13 @@ import isEqual from 'lodash/isEqual';
 import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
 import uniq from 'lodash/uniq';
 import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
-import { ChannelResource, ExamResource } from 'kolibri.resources';
+import {
+  ChannelResource,
+  ExamResource,
+  BookmarksResource,
+  ContentNodeResource,
+} from 'kolibri.resources';
+import chunk from 'lodash/chunk';
 import { validateObject, objectWithDefaults } from 'kolibri.utils.objectSpecs';
 import { get, set } from '@vueuse/core';
 import { computed, ref } from 'kolibri.lib.vueCompositionApi';
@@ -50,6 +56,7 @@ export default (DEBUG = false) => {
 
   /** @type {ref<Array>} A list of all channels available which have exercises */
   const _channels = ref([]);
+  const _bookmarks = ref([]);
 
   /** @type {ref<Number>} A counter for use in naming new sections */
   const _sectionLabelCounter = ref(1);
@@ -177,8 +184,34 @@ export default (DEBUG = false) => {
     }
     updateQuiz({ question_sources: updatedSections });
   }
+  /**
+   * @affects _bookmarks
+   */
+
+  function _fetchBookMarkedResources() {
+    BookmarksResource.fetchCollection()
+      .then(bookmarks => bookmarks.map(bookmark => bookmark.contentnode_id))
+      .then(contentNodeIds => {
+        const chunkedContentNodeIds = chunk(contentNodeIds, 50); // Breaking contentNodeIds into lists no more than 50 in length
+        // Now we will create an array of promises, each of which queries for the 50-id chunk
+        chunkedContentNodeIds.forEach(idsChunk => {
+          ContentNodeResource.fetchCollection({
+            getParams: {
+              ids: idsChunk, // This filters only the ids we want
+            },
+          }).then(contentNodes => {
+            _updateBookmarks(contentNodes);
+          });
+        });
+      });
+  }
+
+  function _updateBookmarks(bookmarks = []) {
+    set(_bookmarks, [...get(_bookmarks), ...bookmarks]);
+  }
 
   /**
+   *
    * @param {string} [section_id]
    * @affects _activeSectionId
    * Sets the given section_id as the active section ID, however, if the ID is not found or is null
@@ -205,6 +238,7 @@ export default (DEBUG = false) => {
       setActiveSection(newSection.section_id);
     }
     _fetchChannels();
+    _fetchBookMarkedResources();
   }
 
   /**
@@ -338,6 +372,8 @@ export default (DEBUG = false) => {
   const replacementQuestionPool = computed(() => {});
   /** @type {ComputedRef<Array>} A list of all channels available which have exercises */
   const channels = computed(() => get(_channels));
+  /** @type {ComputedRef<Array>} A list of all bookmarks available which have exercises */
+  const bookmarks = computed(() => get(_bookmarks));
 
   /** Handling the Select All Checkbox
    * See: remove/toggleQuestionFromSelection() & selectAllQuestions() for more */
@@ -412,5 +448,6 @@ export default (DEBUG = false) => {
     selectAllLabel,
     allQuestionsSelected,
     noQuestionsSelected,
+    bookmarks,
   };
 };
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 14b31ef65b..91a855c728 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -57,7 +57,7 @@
     <!-- /> -->
 
     <!-- <ContentCardList
-      :contentList="filteredContentList"
+      :quizForge.channels.value="filteredquizForge.channels.value"
       :contentCardMessage="selectionMetadata"
       :contentCardLink="contentLink"
       :viewMoreButtonState="viewMoreButtonState"
@@ -66,7 +66,7 @@
     /> -->
 
     <!-- <LessonContentCard
-      v-for="(content ,index) in filteredContentList"
+      v-for="(content ,index) in filteredquizForge.channels.value"
       :key="index"
       :class="{ 'with-checkbox': needCheckboxes }"
       :title="content.title"
@@ -79,13 +79,13 @@
       :isLeaf="content.is_leaf"
     /> -->
     <ContentCardList
-      :contentList="filteredContentList"
+      :contentList="quizForge.channels.value"
       :showSelectAll="selectAllIsVisible"
       :viewMoreButtonState="viewMoreButtonState"
       :selectAllChecked="addableContent.length === 0"
       :contentIsChecked="contentIsInLesson"
       :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
-      :contentCardMessage="selectionMetadata"
+      :contentCardMessage="() =>selectionMetadata"
       :contentCardLink="contentLink"
       @changeselectall="toggleTopicInWorkingResources"
       @change_content_card="toggleSelected"
@@ -122,7 +122,7 @@
       // ResourceSelectionBreadcrumbs,
       // LessonContentCard,
     },
-    inject: ['contentList', 'quizForge'],
+    inject: ['quizForge'],
     setup() {
       const { sectionSettings$ } = enhancedQuizManagementStrings;
 
@@ -148,9 +148,11 @@
       filteredContentList() {
         const { role } = this.filters;
         if (!this.inSearchMode) {
-          return this.contentList;
+          return this.quizForge.channels.value;
         }
-        const list = this.contentList ? this.contentList : this.bookmarksList;
+        const list = this.quizForge.channels.value
+          ? this.quizForge.channels.value
+          : this.bookmarksList;
         return list.filter(contentNode => {
           let passesFilters = true;
           if (role === 'nonCoach') {
@@ -176,37 +178,37 @@
         return (
           !this.inSearchMode &&
           this.pageName !== LessonsPageNames.SELECTION_ROOT &&
-          !every(this.contentList, this.contentIsDirectoryKind)
+          !every(this.quizForge.channels.value, this.contentIsDirectoryKind)
         );
       },
-      contentIsDirectoryKind({ is_leaf }) {
-        return !is_leaf;
-      },
       contentIsInLesson() {
         return ({ id }) =>
           Boolean(this.workingResources.find(resource => resource.contentnode_id === id));
       },
-      selectionMetadata(content) {
-        let count = 0;
-        let total = 0;
-        if (this.ancestorCounts[content.id]) {
-          count = this.ancestorCounts[content.id].count;
-          total = this.ancestorCounts[content.id].total;
-        }
-        if (count) {
-          return this.$tr('selectionInformation', {
-            count,
-            total,
-          });
-        }
+      selectionMetadata(/*content*/) {
+        return '';
+        // let count = 0;
+        // let total = 0;
+        // if (this.ancestorCounts[content.id]) {
+        //   count = this.ancestorCounts[content.id].count;
+        //   total = this.ancestorCounts[content.id].total;
+        // }
+        // if (count) {
+        //   return this.$tr('selectionInformation', {
+        //     count,
+        //     total,
+        //   });
+        // }
         // return '';
-        return function() {
-          console.log('Dynamic function called');
-        };
+        // return function() {
+        //   console.log('Dynamic function called');
+        // };
       },
       addableContent() {
         // Content in the topic that can be added if 'Select All' is clicked
-        const list = this.contentList ? this.contentList : this.bookmarksList;
+        const list = this.quizForge.channels.value
+          ? this.quizForge.channels.value
+          : this.bookmarksList;
         return list.filter(
           content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
         );
@@ -228,7 +230,7 @@
       },
     },
     created() {
-      console.log(this.contentList);
+      console.log(this.quizForge.channels.value);
     },
     methods: {
       /** @public */
@@ -302,15 +304,18 @@
           });
           this.addToWorkingResources(this.addableContent);
         } else {
-          this.removeFromSelectedResources(this.contentList);
+          this.removeFromSelectedResources(this.quizForge.channels.value);
         }
       },
-      // filteredContentList() {
+      contentIsDirectoryKind({ is_leaf }) {
+        return !is_leaf;
+      },
+      // filteredquizForge.channels.value() {
       //   const { role } = this.filters;
       //   if (!this.inSearchMode) {
-      //     return this.contentList;
+      //     return this.quizForge.channels.value;
       //   }
-      //   const list = this.contentList ? this.contentList : this.bookmarksList;
+      //   const list = this.quizForge.channels.value ? this.quizForge.channels.value : this.bookmarksList;
       //   return list.filter(contentNode => {
       //     let passesFilters = true;
       //     if (role === 'nonCoach') {

From d992550596fa030689bc711aae123febe1d030c8 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Fri, 10 Nov 2023 22:30:55 +0300
Subject: [PATCH 32/50] sets routes for channel resources

---
 .../coach/assets/src/constants/index.js       |  1 +
 .../coach/assets/src/routes/planExamRoutes.js |  7 ++
 .../plan/CreateExamPage/ResourceSelection.vue | 71 ++++++++++++++-----
 3 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/constants/index.js b/kolibri/plugins/coach/assets/src/constants/index.js
index a3dd22e8b4..4dae241107 100644
--- a/kolibri/plugins/coach/assets/src/constants/index.js
+++ b/kolibri/plugins/coach/assets/src/constants/index.js
@@ -16,6 +16,7 @@ export const PageNames = {
   QUIZ_SECTION_EDITOR: 'QUIZ_SECTION_EDITOR',
   QUIZ_REPLACE_QUESTIONS: 'QUIZ_REPLACE_QUESTIONS',
   QUIZ_SELECT_RESOURCES: 'QUIZ_SELECT_RESOURCES',
+  SELECT_FROM_RESOURCE:'SELECT_FROM_RESOURCE',
 
   /** TODO Remove unused */
   EXAM_CREATION_TOPIC: 'EXAM_CREATION_TOPIC',
diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index d76eef2f60..4ac868046c 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -49,6 +49,13 @@ export default [
       {
         name: PageNames.QUIZ_SELECT_RESOURCES,
         path: ':section_id/select-resources',
+
+        children:[
+          {
+            name:PageNames.SELECT_FROM_RESOURCE,
+            path:':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
index 91a855c728..0948a2f5be 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -98,7 +98,7 @@
 
 <script>
 
-  // import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
+  import { ContentNodeKinds , ContentNodeResource} from 'kolibri.coreVue.vuex.constants';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import every from 'lodash/every';
   import pickBy from 'lodash/pickBy';
@@ -142,6 +142,7 @@
           kind: this.$route.query.kind || null,
           role: this.$route.query.role || null,
         },
+        visibleResources:[],
       };
     },
     computed: {
@@ -213,7 +214,8 @@
           content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
         );
       },
-    },
+    }, 
+
     watch: {
       workingResources(newVal, oldVal) {
         this.showResourcesDifferenceMessage(newVal.length - oldVal.length);
@@ -229,9 +231,27 @@
         });
       },
     },
+    beforeRouteEnter (to, from, next) {
+      console.log(to);
+      console.log(from);
+      console.log(to.params.topic_id);
+      if(to.params.topic_id){
+        this.showChannelQuizCreationTopicPage(this.$store,to.params).then(() => {
+          next();
+        });
+      }
+    },
     created() {
       console.log(this.quizForge.channels.value);
     },
+    mounted() {
+      if(this.quizForge.channels.value.length > 0){
+
+        this.visibleResources = this.quizForge.channels.value;
+      }else{
+        this.visibleResources =[];
+      }
+    },
     methods: {
       /** @public */
       focusFirstEl() {
@@ -253,24 +273,12 @@
       contentLink(content) {
         if (!content.is_leaf) {
           return {
-            name: PageNames.EXAM_CREATION_SELECT_PRACTICE_QUIZ_TOPIC,
+            name: PageNames.SELECT_FROM_RESOURCE,
             params: {
-              classId: this.classId,
-              topicId: content.id,
+              topic_id: content.id,
             },
           };
         }
-
-        const value = content.assessmentmetadata.assessment_item_ids.length;
-        this.$store.commit('examCreation/SET_NUMBER_OF_QUESTIONS', value);
-
-        return {
-          name: PageNames.EXAM_CREATION_PRACTICE_QUIZ_PREVIEW,
-          params: {
-            classId: this.classId,
-            contentId: content.id,
-          },
-        };
       },
       handleMoreResults() {
         this.moreResultsState = 'waiting';
@@ -310,6 +318,37 @@
       contentIsDirectoryKind({ is_leaf }) {
         return !is_leaf;
       },
+    showChannelQuizCreationTopicPage(store, params) {
+      return store.dispatch('loading').then(() => {
+        const { topic_id } = params;
+        const topicNodePromise = ContentNodeResource.fetchModel({ id: topic_id });
+        const childNodesPromise = ContentNodeResource.fetchCollection({
+          getParams: {
+            parent: topic_id,
+            kind_in: [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE],
+            contains_quiz: true,
+          },
+        });
+        const loadRequirements = [topicNodePromise, childNodesPromise];
+
+        return Promise.all(loadRequirements).then(([/*topicNoitde*/, childNodes]) => {
+          console.log(childNodes);
+          this.visibleResources = childNodes;
+          // return filterAndAnnotateContentList(childNodes).then(contentList => {
+          //   store.commit('SET_TOOLBAR_ROUTE', {
+          //     name: PageNames.EXAMS,
+          //   });
+
+          //   return showExamCreationPage(store, {
+          //     classId: params.classId,
+          //     contentList,
+          //     pageName: PageNames.EXAM_CREATION_SELECT_CHANNEL_QUIZ_TOPIC,
+          //     ancestors: [...topicNode.ancestors, topicNode],
+          //   });
+          // });
+        });
+  });
+}
       // filteredquizForge.channels.value() {
       //   const { role } = this.filters;
       //   if (!this.inSearchMode) {

From 85d8b0c318180de816e9067fe656dd515ee66a7d Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Fri, 17 Nov 2023 09:11:59 +0300
Subject: [PATCH 33/50] added bookmarked code

---
 .../CreateExamPage/BookMarkedResource.vue     | 312 ++++++++++++++++--
 1 file changed, 286 insertions(+), 26 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
index 709359598f..28b4debe43 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
@@ -1,31 +1,84 @@
 <template>
 
-  <div class="">
-    <div class="card-shadow" style="box-shadow:0px 0px 2px 0px;border-radius:5px;">
-      <KGrid>
-        <KGridItem
-          :layout12="{ span: 4 }"
-        >
-          <div
-            style="
-                background-color:#fafafafa;
-                width:100%;
-                height:123px;
-                margin:10px;
-                justify-content: center;"
-          >
+  <div
+    class="card container drop-shadow"
+    :style="{ backgroundColor: $themeTokens.surface }"
+  >
+    <router-link
+      :to="to"
+      class="card card-link"
+      :style="{ backgroundColor: $themeTokens.surface }"
+    >
+      <div
+        class="card"
+        :style="{ backgroundColor: $themeTokens.surface }"
+      >
+        <KFixedGrid numCols="4">
+          <KFixedGridItem :span="isMobile ? 4 : 1" class="thumb-area">
+            <!-- <CardThumbnail :contentNode="contentNode" :hideDuration="!windowIsLarge" /> -->
             <KIcon icon="bookmark" size="large" />
-          </div>
-        </KGridItem>
-
-        <KGridItem
-          :layout12="{ span: 8 }"
-        >
-          <p>Bookmarks</p>
-          <p>XX bookmarks</p>
-        </KGridItem>
-      </KGrid>
-    </div>
+          </KFixedGridItem>
+
+          <KFixedGridItem :span="isMobile ? 4 : 3" class="text-area">
+            <span :style="{ color: $themeTokens.text }">
+              <div class="metadata-info" :style="{ color: $themePalette.grey.v_700 }">
+                <!-- <LearningActivityLabel
+                  :contentNode="contentNode"
+                  :hideDuration="true"
+                  labelAfter
+                  condensed
+                /> -->
+              </div>
+              <h3 :style="{ marginTop: '4px', marginBottom: '4px' }">
+                <TextTruncatorCss text="ehhhhhh" :maxLines="1" />
+              </h3>
+              <p
+                style="font-size: 14px; margin-top: 4px; margin-bottom: 4px;"
+              >
+                <TextTruncatorCss text="contentNodedescription" :maxLines="2" />
+              </p>
+              <!-- <div class="bottom-items"> -->
+              <!-- <LearningActivityDuration
+                  v-if="!windowIsLarge"
+                  :contentNode="contentNode"
+                  :class="categoryAndLevelString ? 'duration prepends' : 'duration'"
+                  condensed
+                  :style="{ color: $themePalette.grey.v_700, marginTop: 0 }"
+                /> -->
+              <p
+                class="metadata-info"
+                :style="{ color: $themePalette.grey.v_700, marginTop: 0 }"
+              >
+                <!-- {{ categoryAndLevelString }} -->
+              </p>
+              <!-- <div> -->
+              <!-- <img
+                    v-if="channelThumbnail"
+                    :src="channelThumbnail"
+                    :alt="learnString('logo', { channelTitle: channelTitle })"
+                    class="channel-logo"
+                    :style="{ color: $themePalette.grey.v_70 0 }"
+                  > -->
+              <!-- <p
+                    v-else
+                    class="metadata-info"
+                    :style="{ color: $themePalette.grey.v_700, marginTop: 0 }"
+                  >{{ learnString('logo', { channelTitle: channelTitle }) }}</p> -->
+              <!-- <KButton
+                    v-if="contentNode.copies"
+                    appearance="basic-link"
+                    class="copies"
+                    :style="{ color: $themeTokens.text }"
+                    :text="coreString('copies', { num: contentNode.copies.length })"
+                    @click.prevent="$emit('openCopiesModal', contentNode.copies)"
+                  /> -->
+              <!-- </div>
+              </div> -->
+            </span>
+          </KFixedGridItem>
+        </KFixedGrid>
+      </div>
+    </router-link>
   </div>
 
 </template>
@@ -33,15 +86,222 @@
 
 <script>
 
+  // import { validateLinkObject } from 'kolibri.utils.validators';
+  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  // import { now } from 'kolibri.utils.serverClock';
+  // import { ContentLevels, Categories } from 'kolibri.coreVue.vuex.constants';
+  // import camelCase from 'lodash/camelCase';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
+  // import useChannels from '../composables/useChannels';
+  // import LearningActivityLabel from './LearningActivityLabel';
+  // import LearningActivityDuration from './LearningActivityDuration';
+  // import commonLearnStrings from './commonLearnStrings';
+  // import CardThumbnail from './HybridLearningContentCard/CardThumbnail';
+
   export default {
     name: 'BookMarkedResource',
+    components: {
+      // CardThumbnail,
+      TextTruncatorCss,
+      // LearningActivityLabel,
+      // LearningActivityDuration,
+    },
+    mixins: [commonCoreStrings],
+    setup() {
+      // const { getChannelThumbnail, getChannelTitle } = useChannels();
+      const { windowIsLarge } = useKResponsiveWindow();
+      return {
+        // getChannelThumbnail,
+        // getChannelTitle,
+        windowIsLarge,
+      };
+    },
+    props: {
+      // contentNode: {
+      //   type: Object,
+      //   required: true,
+      // },
+      // to: {
+      //   type: Object,
+      //   required: true,
+      //   validator: validateLinkObject,
+      // },
+      isMobile: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data: () => ({
+      // now: now(),
+    }),
+    computed: {
+      // ceilingDate() {
+      //   if (this.createdDate > this.now) {
+      //     return this.now;
+      //   }
+      //   return this.createdDate;
+      // },
+      // bookmarkCreated() {
+      //   const time = this.$formatRelative(this.ceilingDate, { now: this.now });
+      //   return this.coreString('bookmarkedTimeAgoLabel', { time });
+      // },
+      // categoryAndLevelString() {
+      //   if (
+      //     this.levels(this.contentNode.grade_levels) &&
+      //     this.category(this.contentNode.categories)
+      //   ) {
+      //     return (
+      //       this.category(this.contentNode.categories) +
+      //       ' | ' +
+      //       this.levels(this.contentNode.grade_levels)
+      //     );
+      //   } else if (this.category(this.contentNode.categories)) {
+      //     return this.category(this.contentNode.categories);
+      //   } else if (this.levels(this.contentNode.grade_levels)) {
+      //     return this.levels(this.contentNode.grade_levels);
+      //   }
+      //   return null;
+      // },
+      // channelThumbnail() {
+      //   return this.getChannelThumbnail(this.contentNode && this.contentNode.channel_id);
+      // },
+      // channelTitle() {
+      //   return this.getChannelTitle(this.contentNode && this.contentNode.channel_id);
+      // },
+      to() {
+        return { name: 'BOOKMARK_PAGE' };
+      },
+    },
+    methods: {
+      // levels(levels) {
+      //   const matches = Object.keys(ContentLevels)
+      //     .sort()
+      //     .filter(k => levels.includes(ContentLevels[k]));
+      //   if (matches && matches.length > 0) {
+      //     let adjustedMatches = [];
+      //     matches.map(key => {
+      //       let translationKey;
+      //       if (key === 'PROFESSIONAL') {
+      //         translationKey = 'specializedProfessionalTraining';
+      //       } else if (key === 'WORK_SKILLS') {
+      //         translationKey = 'allLevelsWorkSkills';
+      //       } else if (key === 'BASIC_SKILLS') {
+      //         translationKey = 'allLevelsBasicSkills';
+      //       } else {
+      //         translationKey = camelCase(key);
+      //       }
+      //       adjustedMatches.push(translationKey);
+      //     });
+      //     adjustedMatches = adjustedMatches.map(m => this.coreString(m)).join(', ');
+      //     return adjustedMatches;
+      //   }
+      // },
+      // category(options) {
+      //   const matches = Object.keys(Categories)
+      //     .sort()
+      //     .filter(k => options.includes(Categories[k]));
+      //   if (matches && matches.length > 0) {
+      //     return matches.map(m => this.coreString(camelCase(m))).join(', ');
+      //   }
+      // },
+    },
   };
 
 </script>
 
 
-<style  lang="scss" scoped>
+<style lang="scss" scoped>
 
   @import '~kolibri-design-system/lib/styles/definitions';
 
+  $footer-height: 36px;
+  $h-padding: 24px;
+  $v-padding: 16px;
+
+  .drop-shadow {
+    @extend %dropshadow-1dp;
+
+    &:hover {
+      @extend %dropshadow-8dp;
+    }
+  }
+
+  .container {
+    padding: $v-padding $h-padding;
+    margin-top: $h-padding;
+  }
+
+  .card {
+    position: relative;
+    vertical-align: top;
+    border-radius: 8px;
+    transition: box-shadow $core-time ease;
+
+    &:focus {
+      outline-width: 4px;
+      outline-offset: 6px;
+    }
+  }
+
+  .card-link {
+    display: block;
+    width: 100%;
+    text-decoration: none;
+  }
+
+  .metadata-info {
+    display: inline-block;
+    padding-left: 2px;
+    font-size: 13px;
+  }
+
+  .channel-logo {
+    display: inline-block;
+    height: 24px;
+    margin-right: 8px;
+    font-size: 13px;
+  }
+
+  .copies {
+    display: inline-block;
+    padding: 8px;
+    font-size: 13px;
+    text-decoration: none;
+    vertical-align: top;
+  }
+
+  .duration {
+    display: inline-block;
+    margin-top: 4px;
+    font-size: 13px;
+  }
+
+  .prepends {
+    &::after {
+      content: ' | ';
+    }
+  }
+
+  .created-info {
+    font-size: 13px;
+  }
+
+  .bottom-items {
+    margin-top: 8px;
+  }
+
+  .thumb-area {
+    margin-bottom: 16px;
+  }
+
+  .details {
+    max-width: 100%;
+    margin-top: 240px;
+  }
+
+  .text-area {
+    margin-bottom: $footer-height;
+  }
+
 </style>

From 53512bbd17ba6ddc8841d7cec25325dc5f5efd10 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Fri, 17 Nov 2023 21:58:45 +0300
Subject: [PATCH 34/50]  added the bookmark card

---
 .../CreateExamPage/BookMarkedResource.vue     | 267 +++---------------
 .../plan/CreateExamPage/ResourceSelection.vue | 191 +++++--------
 .../strings/enhancedQuizManagementStrings.js  |   3 +
 3 files changed, 115 insertions(+), 346 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
index 28b4debe43..d26f2a8ff2 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
@@ -2,83 +2,28 @@
 
   <div
     class="card container drop-shadow"
-    :style="{ backgroundColor: $themeTokens.surface }"
   >
-    <router-link
-      :to="to"
-      class="card card-link"
-      :style="{ backgroundColor: $themeTokens.surface }"
-    >
-      <div
-        class="card"
-        :style="{ backgroundColor: $themeTokens.surface }"
+    <KGrid>
+      <KGridItem
+        :layout12="{ span: 4 }"
+        :layout8="{ span: 2 }"
+        class="thumb-area"
+        :style="bookMarkBackgroundColor"
       >
-        <KFixedGrid numCols="4">
-          <KFixedGridItem :span="isMobile ? 4 : 1" class="thumb-area">
-            <!-- <CardThumbnail :contentNode="contentNode" :hideDuration="!windowIsLarge" /> -->
-            <KIcon icon="bookmark" size="large" />
-          </KFixedGridItem>
+        <BookmarkIcon style="margin-top:-15px;margin-left:-30px" />
+      </KGridItem>
 
-          <KFixedGridItem :span="isMobile ? 4 : 3" class="text-area">
-            <span :style="{ color: $themeTokens.text }">
-              <div class="metadata-info" :style="{ color: $themePalette.grey.v_700 }">
-                <!-- <LearningActivityLabel
-                  :contentNode="contentNode"
-                  :hideDuration="true"
-                  labelAfter
-                  condensed
-                /> -->
-              </div>
-              <h3 :style="{ marginTop: '4px', marginBottom: '4px' }">
-                <TextTruncatorCss text="ehhhhhh" :maxLines="1" />
-              </h3>
-              <p
-                style="font-size: 14px; margin-top: 4px; margin-bottom: 4px;"
-              >
-                <TextTruncatorCss text="contentNodedescription" :maxLines="2" />
-              </p>
-              <!-- <div class="bottom-items"> -->
-              <!-- <LearningActivityDuration
-                  v-if="!windowIsLarge"
-                  :contentNode="contentNode"
-                  :class="categoryAndLevelString ? 'duration prepends' : 'duration'"
-                  condensed
-                  :style="{ color: $themePalette.grey.v_700, marginTop: 0 }"
-                /> -->
-              <p
-                class="metadata-info"
-                :style="{ color: $themePalette.grey.v_700, marginTop: 0 }"
-              >
-                <!-- {{ categoryAndLevelString }} -->
-              </p>
-              <!-- <div> -->
-              <!-- <img
-                    v-if="channelThumbnail"
-                    :src="channelThumbnail"
-                    :alt="learnString('logo', { channelTitle: channelTitle })"
-                    class="channel-logo"
-                    :style="{ color: $themePalette.grey.v_70 0 }"
-                  > -->
-              <!-- <p
-                    v-else
-                    class="metadata-info"
-                    :style="{ color: $themePalette.grey.v_700, marginTop: 0 }"
-                  >{{ learnString('logo', { channelTitle: channelTitle }) }}</p> -->
-              <!-- <KButton
-                    v-if="contentNode.copies"
-                    appearance="basic-link"
-                    class="copies"
-                    :style="{ color: $themeTokens.text }"
-                    :text="coreString('copies', { num: contentNode.copies.length })"
-                    @click.prevent="$emit('openCopiesModal', contentNode.copies)"
-                  /> -->
-              <!-- </div>
-              </div> -->
-            </span>
-          </KFixedGridItem>
-        </KFixedGrid>
-      </div>
-    </router-link>
+      <KGridItem
+        :layout12="{ span: 8 }"
+        :layout8="{ span: 6 }"
+        class="text-area"
+      >
+        <a :style="{ color: $themeTokens.primary }">
+          <p style="font-weight:600;">{{ bookmarksLabel$() }}</p>
+          <span> {{ numberOfSelectedBookmarks$({ count: numberOfBookMarkedResources }) }}</span>
+        </a>
+      </KGridItem>
+    </KGrid>
   </div>
 
 </template>
@@ -86,125 +31,41 @@
 
 <script>
 
-  // import { validateLinkObject } from 'kolibri.utils.validators';
-  import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
-  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  // import { now } from 'kolibri.utils.serverClock';
-  // import { ContentLevels, Categories } from 'kolibri.coreVue.vuex.constants';
-  // import camelCase from 'lodash/camelCase';
-  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
-  // import useChannels from '../composables/useChannels';
-  // import LearningActivityLabel from './LearningActivityLabel';
-  // import LearningActivityDuration from './LearningActivityDuration';
-  // import commonLearnStrings from './commonLearnStrings';
-  // import CardThumbnail from './HybridLearningContentCard/CardThumbnail';
+  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import { ContentNodeResource } from 'kolibri.resources';
+  import BookmarkIcon from './../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
 
   export default {
     name: 'BookMarkedResource',
     components: {
-      // CardThumbnail,
-      TextTruncatorCss,
-      // LearningActivityLabel,
-      // LearningActivityDuration,
+      BookmarkIcon,
     },
-    mixins: [commonCoreStrings],
     setup() {
-      // const { getChannelThumbnail, getChannelTitle } = useChannels();
-      const { windowIsLarge } = useKResponsiveWindow();
+      const { numberOfSelectedBookmarks$, bookmarksLabel$ } = enhancedQuizManagementStrings;
+
       return {
-        // getChannelThumbnail,
-        // getChannelTitle,
-        windowIsLarge,
+        numberOfSelectedBookmarks$,
+        bookmarksLabel$,
       };
     },
-    props: {
-      // contentNode: {
-      //   type: Object,
-      //   required: true,
-      // },
-      // to: {
-      //   type: Object,
-      //   required: true,
-      //   validator: validateLinkObject,
-      // },
-      isMobile: {
-        type: Boolean,
-        default: false,
-      },
+    data() {
+      return {
+        bookmarks: [],
+        numberOfBookMarkedResources: null,
+      };
     },
-    data: () => ({
-      // now: now(),
-    }),
     computed: {
-      // ceilingDate() {
-      //   if (this.createdDate > this.now) {
-      //     return this.now;
-      //   }
-      //   return this.createdDate;
-      // },
-      // bookmarkCreated() {
-      //   const time = this.$formatRelative(this.ceilingDate, { now: this.now });
-      //   return this.coreString('bookmarkedTimeAgoLabel', { time });
-      // },
-      // categoryAndLevelString() {
-      //   if (
-      //     this.levels(this.contentNode.grade_levels) &&
-      //     this.category(this.contentNode.categories)
-      //   ) {
-      //     return (
-      //       this.category(this.contentNode.categories) +
-      //       ' | ' +
-      //       this.levels(this.contentNode.grade_levels)
-      //     );
-      //   } else if (this.category(this.contentNode.categories)) {
-      //     return this.category(this.contentNode.categories);
-      //   } else if (this.levels(this.contentNode.grade_levels)) {
-      //     return this.levels(this.contentNode.grade_levels);
-      //   }
-      //   return null;
-      // },
-      // channelThumbnail() {
-      //   return this.getChannelThumbnail(this.contentNode && this.contentNode.channel_id);
-      // },
-      // channelTitle() {
-      //   return this.getChannelTitle(this.contentNode && this.contentNode.channel_id);
-      // },
-      to() {
-        return { name: 'BOOKMARK_PAGE' };
+      bookMarkBackgroundColor() {
+        return {
+          backgroundColor: this.$themePalette.grey.v_100,
+        };
       },
     },
-    methods: {
-      // levels(levels) {
-      //   const matches = Object.keys(ContentLevels)
-      //     .sort()
-      //     .filter(k => levels.includes(ContentLevels[k]));
-      //   if (matches && matches.length > 0) {
-      //     let adjustedMatches = [];
-      //     matches.map(key => {
-      //       let translationKey;
-      //       if (key === 'PROFESSIONAL') {
-      //         translationKey = 'specializedProfessionalTraining';
-      //       } else if (key === 'WORK_SKILLS') {
-      //         translationKey = 'allLevelsWorkSkills';
-      //       } else if (key === 'BASIC_SKILLS') {
-      //         translationKey = 'allLevelsBasicSkills';
-      //       } else {
-      //         translationKey = camelCase(key);
-      //       }
-      //       adjustedMatches.push(translationKey);
-      //     });
-      //     adjustedMatches = adjustedMatches.map(m => this.coreString(m)).join(', ');
-      //     return adjustedMatches;
-      //   }
-      // },
-      // category(options) {
-      //   const matches = Object.keys(Categories)
-      //     .sort()
-      //     .filter(k => options.includes(Categories[k]));
-      //   if (matches && matches.length > 0) {
-      //     return matches.map(m => this.coreString(camelCase(m))).join(', ');
-      //   }
-      // },
+    created() {
+      ContentNodeResource.fetchBookmarks({ params: { limit: 25, available: true } }).then(data => {
+        this.bookmarks = data.results ? data.results : [];
+        this.numberOfBookMarkedResources = this.bookmarks.length;
+      });
     },
   };
 
@@ -250,56 +111,10 @@
     text-decoration: none;
   }
 
-  .metadata-info {
-    display: inline-block;
-    padding-left: 2px;
-    font-size: 13px;
-  }
-
-  .channel-logo {
-    display: inline-block;
-    height: 24px;
-    margin-right: 8px;
-    font-size: 13px;
-  }
-
-  .copies {
-    display: inline-block;
-    padding: 8px;
-    font-size: 13px;
-    text-decoration: none;
-    vertical-align: top;
-  }
-
-  .duration {
-    display: inline-block;
-    margin-top: 4px;
-    font-size: 13px;
-  }
-
-  .prepends {
-    &::after {
-      content: ' | ';
-    }
-  }
-
-  .created-info {
-    font-size: 13px;
-  }
-
-  .bottom-items {
-    margin-top: 8px;
-  }
-
   .thumb-area {
     margin-bottom: 16px;
   }
 
-  .details {
-    max-width: 100%;
-    margin-top: 240px;
-  }
-
   .text-area {
     margin-bottom: $footer-height;
   }
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 0948a2f5be..e6ebca0301 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -11,7 +11,10 @@
     </h5>
     <p>Select from bookmarks</p>
 
-    <BookMarkedResource />
+    <BookMarkedResource
+      kind="bookmark"
+      :isMobile="true"
+    />
 
     <LessonsSearchBox
       ref="textbox"
@@ -21,63 +24,7 @@
       style="margin-top:1em;margin-bottom:1em;"
       @searchterm="search"
     />
-    <!-- <ResourceSelection
-      :channelId="channelId"
-      :channelName="channelName"
-      :channelThumbnail="channelThumbnail"
-      :channelDescription="channelDescription"
-    />
-    <ResourceSelectionBreadcrumbs
-      :channelId="channelId"
-      :channelName="channelName"
-      :channelThumbnail="channelThumbnail"
-      :channelDescription="channelDescription"
-    />   -->
-
-    <!-- <LessonContentCard
-
-      title="content.title"
-      thumbnail="content.thumbnail"
-      description="content.description"
-      kind="content.kind"
-      message="contentCardMessage(content)"
-      link="contentCardLink(content)"
-      numCoachContents="content.num_coach_contents"
-      isLeaf="content.is_leaf"
-    /> -->
-    <!-- <LessonContentCard
-      title="content.title"
-      thumbnail="content.thumbnail"
-      description="content.description"
-      kind="content.kind"
-      message="contentCardMessage(content)"
-      link="contentCardLink(content)"
-      numCoachContents="content.num_coach_contents"
-      isLeaf="content.is_leaf" -->
-    <!-- /> -->
-
-    <!-- <ContentCardList
-      :quizForge.channels.value="filteredquizForge.channels.value"
-      :contentCardMessage="selectionMetadata"
-      :contentCardLink="contentLink"
-      :viewMoreButtonState="viewMoreButtonState"
-      :contentIsChecked="contentIsSelected"
-      :contentHasCheckbox="contentHasCheckbox"
-    /> -->
 
-    <!-- <LessonContentCard
-      v-for="(content ,index) in filteredquizForge.channels.value"
-      :key="index"
-      :class="{ 'with-checkbox': needCheckboxes }"
-      :title="content.title"
-      :thumbnail="content.thumbnail"
-      :description="content.description"
-      :kind="content.kind"
-      :message="contentCardMessage(content)"
-      :link="contentCardLink(content)"
-      :numCoachContents="content.num_coach_contents"
-      :isLeaf="content.is_leaf"
-    /> -->
     <ContentCardList
       :contentList="quizForge.channels.value"
       :showSelectAll="selectAllIsVisible"
@@ -98,7 +45,8 @@
 
 <script>
 
-  import { ContentNodeKinds , ContentNodeResource} from 'kolibri.coreVue.vuex.constants';
+  import { ContentNodeKinds, ContentNodeResource } from 'kolibri.coreVue.vuex.constants';
+  import { ContentNodeResource as bookMarkedResource } from 'kolibri.resources';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import every from 'lodash/every';
   import pickBy from 'lodash/pickBy';
@@ -142,29 +90,30 @@
           kind: this.$route.query.kind || null,
           role: this.$route.query.role || null,
         },
-        visibleResources:[],
+        visibleResources: [],
+        bookmarks: [],
       };
     },
     computed: {
-      filteredContentList() {
-        const { role } = this.filters;
-        if (!this.inSearchMode) {
-          return this.quizForge.channels.value;
-        }
-        const list = this.quizForge.channels.value
-          ? this.quizForge.channels.value
-          : this.bookmarksList;
-        return list.filter(contentNode => {
-          let passesFilters = true;
-          if (role === 'nonCoach') {
-            passesFilters = passesFilters && contentNode.num_coach_contents === 0;
-          }
-          if (role === 'coach') {
-            passesFilters = passesFilters && contentNode.num_coach_contents > 0;
-          }
-          return passesFilters;
-        });
-      },
+      // filteredContentList() {
+      //   const { role } = this.filters;
+      //   if (!this.inSearchMode) {
+      //     return this.quizForge.channels.value;
+      //   }
+      //   const list = this.quizForge.channels.value
+      //     ? this.quizForge.channels.value
+      //     : this.bookmarksList;
+      //   return list.filter(contentNode => {
+      //     let passesFilters = true;
+      //     if (role === 'nonCoach') {
+      //       passesFilters = passesFilters && contentNode.num_coach_contents === 0;
+      //     }
+      //     if (role === 'coach') {
+      //       passesFilters = passesFilters && contentNode.num_coach_contents > 0;
+      //     }
+      //     return passesFilters;
+      //   });
+      // },
       inSearchMode() {
         return this.pageName === LessonsPageNames.SELECTION_SEARCH;
       },
@@ -214,7 +163,7 @@
           content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
         );
       },
-    }, 
+    },
 
     watch: {
       workingResources(newVal, oldVal) {
@@ -231,25 +180,31 @@
         });
       },
     },
-    beforeRouteEnter (to, from, next) {
+    beforeRouteEnter(to, from, next) {
       console.log(to);
       console.log(from);
       console.log(to.params.topic_id);
-      if(to.params.topic_id){
-        this.showChannelQuizCreationTopicPage(this.$store,to.params).then(() => {
+      if (to.params.topic_id) {
+        this.showChannelQuizCreationTopicPage(this.$store, to.params).then(() => {
           next();
         });
       }
     },
     created() {
       console.log(this.quizForge.channels.value);
+      bookMarkedResource.fetchBookmarks({ params: { limit: 25, available: true } }).then(data => {
+        this.more = data.more;
+        this.bookmarks = data.results ? data.results : [];
+        console.log(this.bookmarks);
+        this.loading = false;
+        this.fetchContentNodeProgress({ ids: this.bookmarks.map(b => b.id) });
+      });
     },
     mounted() {
-      if(this.quizForge.channels.value.length > 0){
-
+      if (this.quizForge.channels.value.length > 0) {
         this.visibleResources = this.quizForge.channels.value;
-      }else{
-        this.visibleResources =[];
+      } else {
+        this.visibleResources = [];
       }
     },
     methods: {
@@ -318,43 +273,44 @@
       contentIsDirectoryKind({ is_leaf }) {
         return !is_leaf;
       },
-    showChannelQuizCreationTopicPage(store, params) {
-      return store.dispatch('loading').then(() => {
-        const { topic_id } = params;
-        const topicNodePromise = ContentNodeResource.fetchModel({ id: topic_id });
-        const childNodesPromise = ContentNodeResource.fetchCollection({
-          getParams: {
-            parent: topic_id,
-            kind_in: [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE],
-            contains_quiz: true,
-          },
-        });
-        const loadRequirements = [topicNodePromise, childNodesPromise];
+      showChannelQuizCreationTopicPage(store, params) {
+        return store.dispatch('loading').then(() => {
+          const { topic_id } = params;
+          const topicNodePromise = ContentNodeResource.fetchModel({ id: topic_id });
+          const childNodesPromise = ContentNodeResource.fetchCollection({
+            getParams: {
+              parent: topic_id,
+              kind_in: [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE],
+              contains_quiz: true,
+            },
+          });
+          const loadRequirements = [topicNodePromise, childNodesPromise];
 
-        return Promise.all(loadRequirements).then(([/*topicNoitde*/, childNodes]) => {
-          console.log(childNodes);
-          this.visibleResources = childNodes;
-          // return filterAndAnnotateContentList(childNodes).then(contentList => {
-          //   store.commit('SET_TOOLBAR_ROUTE', {
-          //     name: PageNames.EXAMS,
-          //   });
+          return Promise.all(loadRequirements).then(([, /*topicNoitde*/ childNodes]) => {
+            console.log(childNodes);
+            this.visibleResources = childNodes;
+            // return filterAndAnnotateContentList(childNodes).then(contentList => {
+            //   store.commit('SET_TOOLBAR_ROUTE', {
+            //     name: PageNames.EXAMS,
+            //   });
 
-          //   return showExamCreationPage(store, {
-          //     classId: params.classId,
-          //     contentList,
-          //     pageName: PageNames.EXAM_CREATION_SELECT_CHANNEL_QUIZ_TOPIC,
-          //     ancestors: [...topicNode.ancestors, topicNode],
-          //   });
-          // });
+            //   return showExamCreationPage(store, {
+            //     classId: params.classId,
+            //     contentList,
+            //     pageName: PageNames.EXAM_CREATION_SELECT_CHANNEL_QUIZ_TOPIC,
+            //     ancestors: [...topicNode.ancestors, topicNode],
+            //   });
+            // });
+          });
         });
-  });
-}
+      },
       // filteredquizForge.channels.value() {
       //   const { role } = this.filters;
       //   if (!this.inSearchMode) {
       //     return this.quizForge.channels.value;
       //   }
-      //   const list = this.quizForge.channels.value ? this.quizForge.channels.value : this.bookmarksList;
+      //   const list = this.quizForge.channels.value ?
+      // this.quizForge.channels.value : this.bookmarksList;
       //   return list.filter(contentNode => {
       //     let passesFilters = true;
       //     if (role === 'nonCoach') {
@@ -367,11 +323,6 @@
       //   });
       // },
     },
-    $trs: {
-      selectionInformation: {
-        message: 'Channels',
-      },
-    },
   };
 
 </script>
diff --git a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
index c3b0a009a9..8daeee61f0 100644
--- a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
+++ b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
@@ -71,6 +71,9 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
   selectFoldersOrExercises: {
     message: 'Select folders or exercises from these channels',
   },
+  bookmarksLabel: {
+    message: 'Bookmark',
+  },
   numberOfSelectedBookmarks: {
     message: '{ count, number } { count, plural, one { bookmark } other { bookmarks }}',
   },

From c683194b62a6c65c828b08efd848e5c679088e24 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Tue, 21 Nov 2023 20:19:00 +0300
Subject: [PATCH 35/50] replaced quizforge data  with composable

---
 .../assets/src/composables/useResources.js    | 33 ++++++++
 .../CreateExamPage/BookMarkedResource.vue     | 64 +++++++--------
 .../plan/CreateExamPage/ResourceSelection.vue | 80 ++-----------------
 3 files changed, 72 insertions(+), 105 deletions(-)
 create mode 100644 kolibri/plugins/coach/assets/src/composables/useResources.js

diff --git a/kolibri/plugins/coach/assets/src/composables/useResources.js b/kolibri/plugins/coach/assets/src/composables/useResources.js
new file mode 100644
index 0000000000..817a317237
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/composables/useResources.js
@@ -0,0 +1,33 @@
+import { ref, onMounted } from 'kolibri.lib.vueCompositionApi';
+import { ChannelResource, ContentNodeResource as bookMarkedResource } from 'kolibri.resources';
+
+export function useResources() {
+  const resources = ref(null);
+  const channels = ref([]);
+  const bookmarks = ref([]);
+
+  function fetchChannelResource() {
+    ChannelResource.fetchCollection({ params: { has_exercises: true, available: true } }).then(
+      response => {
+        channels.value = response;
+      }
+    );
+  }
+
+  function fetchBookMarkedResource() {
+    bookMarkedResource.fetchBookmarks({ params: { limit: 25, available: true } }).then(data => {
+      bookmarks.value = data.results ? data.results : [];
+    });
+  }
+
+  onMounted(() => {
+    fetchChannelResource();
+    fetchBookMarkedResource();
+  });
+
+  return {
+    resources,
+    channels,
+    bookmarks,
+  };
+}
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
index d26f2a8ff2..732b6f772c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
@@ -3,27 +3,32 @@
   <div
     class="card container drop-shadow"
   >
-    <KGrid>
-      <KGridItem
-        :layout12="{ span: 4 }"
-        :layout8="{ span: 2 }"
-        class="thumb-area"
-        :style="bookMarkBackgroundColor"
-      >
-        <BookmarkIcon style="margin-top:-15px;margin-left:-30px" />
-      </KGridItem>
-
-      <KGridItem
-        :layout12="{ span: 8 }"
-        :layout8="{ span: 6 }"
-        class="text-area"
-      >
-        <a :style="{ color: $themeTokens.primary }">
-          <p style="font-weight:600;">{{ bookmarksLabel$() }}</p>
-          <span> {{ numberOfSelectedBookmarks$({ count: numberOfBookMarkedResources }) }}</span>
-        </a>
-      </KGridItem>
-    </KGrid>
+    <KRouterLink
+      :to="{}"
+      style="width:100%"
+    >
+      <KGrid>
+        <KGridItem
+          :layout12="{ span: 4 }"
+          :layout8="{ span: 2 }"
+          class="thumb-area"
+          :style="bookMarkBackgroundColor"
+        >
+          <BookmarkIcon style="margin-top:-15px;margin-left:-30px" />
+        </KGridItem>
+
+        <KGridItem
+          :layout12="{ span: 8 }"
+          :layout8="{ span: 6 }"
+          class="text-area"
+        >
+          <a :style="{ color: $themeTokens.primary }">
+            <p style="font-weight:600;">{{ bookmarksLabel$() }}</p>
+            <span> {{ numberOfSelectedBookmarks$({ count: bookMarkedResoures }) }}</span>
+          </a>
+        </KGridItem>
+      </KGrid>
+    </KRouterLink>
   </div>
 
 </template>
@@ -32,7 +37,6 @@
 <script>
 
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import { ContentNodeResource } from 'kolibri.resources';
   import BookmarkIcon from './../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
 
   export default {
@@ -48,11 +52,11 @@
         bookmarksLabel$,
       };
     },
-    data() {
-      return {
-        bookmarks: [],
-        numberOfBookMarkedResources: null,
-      };
+    props: {
+      bookMarkedResoures: {
+        type: Number,
+        required: true,
+      },
     },
     computed: {
       bookMarkBackgroundColor() {
@@ -61,12 +65,6 @@
         };
       },
     },
-    created() {
-      ContentNodeResource.fetchBookmarks({ params: { limit: 25, available: true } }).then(data => {
-        this.bookmarks = data.results ? data.results : [];
-        this.numberOfBookMarkedResources = this.bookmarks.length;
-      });
-    },
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index e6ebca0301..c4e498c7e6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -12,8 +12,10 @@
     <p>Select from bookmarks</p>
 
     <BookMarkedResource
+      v-if="bookmarks.length > 0"
       kind="bookmark"
       :isMobile="true"
+      :bookMarkedResoures="bookmarks.length"
     />
 
     <LessonsSearchBox
@@ -26,7 +28,7 @@
     />
 
     <ContentCardList
-      :contentList="quizForge.channels.value"
+      :contentList="channels"
       :showSelectAll="selectAllIsVisible"
       :viewMoreButtonState="viewMoreButtonState"
       :selectAllChecked="addableContent.length === 0"
@@ -46,19 +48,15 @@
 <script>
 
   import { ContentNodeKinds, ContentNodeResource } from 'kolibri.coreVue.vuex.constants';
-  import { ContentNodeResource as bookMarkedResource } from 'kolibri.resources';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import every from 'lodash/every';
   import pickBy from 'lodash/pickBy';
   import { PageNames } from '../../../constants';
   import { LessonsPageNames } from '../../../constants/lessonsConstants';
+  import { useResources } from '../../../composables/useResources';
   import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
   import BookMarkedResource from './BookMarkedResource.vue';
   import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
-  // import LessonContentCard from './../LessonResourceSelectionPage/LessonContentCard/index.vue';
-  // import ResourceSelection from './ResourceSelection.vue';
-  // import  ResourceSelectionBreadcrumbs from './../../../views/plan/LessonResourceS
-  // electionPage/SearchTools/ResourceSelectionBreadcrumbs.vue'
 
   export default {
     name: 'ResourceSelection',
@@ -66,23 +64,21 @@
       LessonsSearchBox,
       BookMarkedResource,
       ContentCardList,
-      // ResourceSelection,
-      // ResourceSelectionBreadcrumbs,
-      // LessonContentCard,
     },
     inject: ['quizForge'],
     setup() {
       const { sectionSettings$ } = enhancedQuizManagementStrings;
+      const { channels, bookmarks } = useResources();
 
       return {
         sectionSettings$,
+        channels,
+        bookmarks,
       };
     },
     data() {
       return {
         viewMoreButtonState: 'no_more_results',
-        // contentHasCheckbox: () => false,
-        // contentIsSelected: () => '',
         searchTerm: '',
         search: '',
         filters: {
@@ -91,29 +87,9 @@
           role: this.$route.query.role || null,
         },
         visibleResources: [],
-        bookmarks: [],
       };
     },
     computed: {
-      // filteredContentList() {
-      //   const { role } = this.filters;
-      //   if (!this.inSearchMode) {
-      //     return this.quizForge.channels.value;
-      //   }
-      //   const list = this.quizForge.channels.value
-      //     ? this.quizForge.channels.value
-      //     : this.bookmarksList;
-      //   return list.filter(contentNode => {
-      //     let passesFilters = true;
-      //     if (role === 'nonCoach') {
-      //       passesFilters = passesFilters && contentNode.num_coach_contents === 0;
-      //     }
-      //     if (role === 'coach') {
-      //       passesFilters = passesFilters && contentNode.num_coach_contents > 0;
-      //     }
-      //     return passesFilters;
-      //   });
-      // },
       inSearchMode() {
         return this.pageName === LessonsPageNames.SELECTION_SEARCH;
       },
@@ -190,16 +166,6 @@
         });
       }
     },
-    created() {
-      console.log(this.quizForge.channels.value);
-      bookMarkedResource.fetchBookmarks({ params: { limit: 25, available: true } }).then(data => {
-        this.more = data.more;
-        this.bookmarks = data.results ? data.results : [];
-        console.log(this.bookmarks);
-        this.loading = false;
-        this.fetchContentNodeProgress({ ids: this.bookmarks.map(b => b.id) });
-      });
-    },
     mounted() {
       if (this.quizForge.channels.value.length > 0) {
         this.visibleResources = this.quizForge.channels.value;
@@ -212,19 +178,7 @@
       focusFirstEl() {
         this.$refs.textbox.focus();
       },
-      // selectionMetadata(content) {
-      //   if (content.kind === ContentNodeKinds.TOPIC) {
-      //     const count = content.exercises.filter(exercise =>
-      //       Boolean(this.selectedExercises[exercise.id])
-      //     ).length;
-      //     if (count === 0) {
-      //       return '';
-      //     }
-      //     const total = content.exercises.length;
-      //     return this.$tr('total_number', { count, total });
-      //   }
-      //   return '';
-      // },
+
       contentLink(content) {
         if (!content.is_leaf) {
           return {
@@ -304,24 +258,6 @@
           });
         });
       },
-      // filteredquizForge.channels.value() {
-      //   const { role } = this.filters;
-      //   if (!this.inSearchMode) {
-      //     return this.quizForge.channels.value;
-      //   }
-      //   const list = this.quizForge.channels.value ?
-      // this.quizForge.channels.value : this.bookmarksList;
-      //   return list.filter(contentNode => {
-      //     let passesFilters = true;
-      //     if (role === 'nonCoach') {
-      //       passesFilters = passesFilters && contentNode.num_coach_contents === 0;
-      //     }
-      //     if (role === 'coach') {
-      //       passesFilters = passesFilters && contentNode.num_coach_contents > 0;
-      //     }
-      //     return passesFilters;
-      //   });
-      // },
     },
   };
 

From 59ab6dd479021a073c0da28927e4cba9e1f5da9d Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Tue, 21 Nov 2023 20:31:05 +0300
Subject: [PATCH 36/50] cleanedup bookmarkicon area

---
 .../CreateExamPage/BookMarkedResource.vue     | 53 ++++++++-----------
 1 file changed, 23 insertions(+), 30 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
index 732b6f772c..ccb3330aa1 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
@@ -3,32 +3,29 @@
   <div
     class="card container drop-shadow"
   >
-    <KRouterLink
-      :to="{}"
-      style="width:100%"
-    >
-      <KGrid>
-        <KGridItem
-          :layout12="{ span: 4 }"
-          :layout8="{ span: 2 }"
-          class="thumb-area"
-          :style="bookMarkBackgroundColor"
-        >
-          <BookmarkIcon style="margin-top:-15px;margin-left:-30px" />
-        </KGridItem>
-
-        <KGridItem
-          :layout12="{ span: 8 }"
-          :layout8="{ span: 6 }"
-          class="text-area"
-        >
-          <a :style="{ color: $themeTokens.primary }">
-            <p style="font-weight:600;">{{ bookmarksLabel$() }}</p>
-            <span> {{ numberOfSelectedBookmarks$({ count: bookMarkedResoures }) }}</span>
-          </a>
-        </KGridItem>
-      </KGrid>
-    </KRouterLink>
+    <KGrid>
+      <KGridItem
+        :layout12="{ span: 4 }"
+        :layout8="{ span: 2 }"
+        class="thumb-area"
+        style="{ margin:auto }"
+        :style="bookMarkBackgroundColor"
+      >
+        <BookmarkIcon />
+      </KGridItem>
+
+      <KGridItem
+        :layout12="{ span: 8 }"
+        :layout8="{ span: 6 }"
+        class="text-area"
+      >
+        <a :style="{ color: $themeTokens.primary }">
+          <p style="font-weight:600;">{{ bookmarksLabel$() }}</p>
+          <span> {{ numberOfSelectedBookmarks$({ count: bookMarkedResoures }) }}</span>
+        </a>
+      </KGridItem>
+    </KGrid>
+
   </div>
 
 </template>
@@ -109,10 +106,6 @@
     text-decoration: none;
   }
 
-  .thumb-area {
-    margin-bottom: 16px;
-  }
-
   .text-area {
     margin-bottom: $footer-height;
   }

From 8ebe621f28deb1fcd420b41290718f33650595d6 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 22 Nov 2023 09:21:40 +0300
Subject: [PATCH 37/50] add show resourc component

---
 .../coach/assets/src/constants/index.js       |   1 +
 .../coach/assets/src/routes/planExamRoutes.js |   4 +
 .../CreateExamPage/BookMarkedResource.vue     |  60 ++++++-----
 .../plan/CreateExamPage/ResourceSelection.vue |  16 ++-
 .../plan/CreateExamPage/SectionSidePanel.vue  |   3 +
 .../ShowBookMarkedResources.vue               | 102 ++++++++++++++++++
 6 files changed, 159 insertions(+), 27 deletions(-)
 create mode 100644 kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue

diff --git a/kolibri/plugins/coach/assets/src/constants/index.js b/kolibri/plugins/coach/assets/src/constants/index.js
index 4dae241107..b9f407758a 100644
--- a/kolibri/plugins/coach/assets/src/constants/index.js
+++ b/kolibri/plugins/coach/assets/src/constants/index.js
@@ -17,6 +17,7 @@ export const PageNames = {
   QUIZ_REPLACE_QUESTIONS: 'QUIZ_REPLACE_QUESTIONS',
   QUIZ_SELECT_RESOURCES: 'QUIZ_SELECT_RESOURCES',
   SELECT_FROM_RESOURCE:'SELECT_FROM_RESOURCE',
+  BOOK_MARKED_RESOURCES:'BOOK_MARKED_RESOURCES',
 
   /** TODO Remove unused */
   EXAM_CREATION_TOPIC: 'EXAM_CREATION_TOPIC',
diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index 4ac868046c..c41c591254 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -57,6 +57,10 @@ export default [
           }
         ]
       },
+      {
+        name: PageNames.BOOK_MARKED_RESOURCES,
+        path: ':section_id/book-marked-resources',
+      },
     ],
   },
   {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
index ccb3330aa1..3ec1358e47 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
@@ -3,29 +3,34 @@
   <div
     class="card container drop-shadow"
   >
-    <KGrid>
-      <KGridItem
-        :layout12="{ span: 4 }"
-        :layout8="{ span: 2 }"
-        class="thumb-area"
-        style="{ margin:auto }"
-        :style="bookMarkBackgroundColor"
-      >
-        <BookmarkIcon />
-      </KGridItem>
-
-      <KGridItem
-        :layout12="{ span: 8 }"
-        :layout8="{ span: 6 }"
-        class="text-area"
-      >
-        <a :style="{ color: $themeTokens.primary }">
-          <p style="font-weight:600;">{{ bookmarksLabel$() }}</p>
-          <span> {{ numberOfSelectedBookmarks$({ count: bookMarkedResoures }) }}</span>
-        </a>
-      </KGridItem>
-    </KGrid>
-
+    <KRouterLink
+      :to="to"
+      style="width:100%"
+    >
+      <KGrid>
+        <KGridItem
+          :layout12="{ span: 4 }"
+          :layout8="{ span: 2 }"
+          class="thumb-area"
+          style="{ margin:auto }"
+          :style="bookMarkBackgroundColor"
+        >
+          <BookmarkIcon />
+        </KGridItem>
+
+        <KGridItem
+          :layout12="{ span: 8 }"
+          :layout8="{ span: 6 }"
+          class="text-area"
+        >
+          <a :style="{ color: $themeTokens.primary }">
+            <p style="font-weight:600;">{{ bookmarksLabel$() }}</p>
+            <span> {{ numberOfSelectedBookmarks$({ count: bookMarkedResoures }) }}</span>
+          </a>
+        </KGridItem>
+      </KGrid>
+
+    </KRouterLink>
   </div>
 
 </template>
@@ -54,6 +59,10 @@
         type: Number,
         required: true,
       },
+      to:{
+        type:Object,
+        required:true,
+      }
     },
     computed: {
       bookMarkBackgroundColor() {
@@ -62,6 +71,9 @@
         };
       },
     },
+    mounted(){
+      console.log(this.$route.params);
+    }
   };
 
 </script>
@@ -91,7 +103,7 @@
   .card {
     position: relative;
     vertical-align: top;
-    border-radius: 8px;
+    border-radius: 2px;
     transition: box-shadow $core-time ease;
 
     &:focus {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index c4e498c7e6..2d95d65b9c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -15,6 +15,7 @@
       v-if="bookmarks.length > 0"
       kind="bookmark"
       :isMobile="true"
+      :to="to"
       :bookMarkedResoures="bookmarks.length"
     />
 
@@ -139,6 +140,15 @@
           content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
         );
       },
+      to(){
+        return {
+          name: PageNames.BOOK_MARKED_RESOURCES,
+          params:{
+            classId: this.$route.params.classId,
+            section_id: this.$route.params.section_id,
+          }
+        }
+      }
     },
 
     watch: {
@@ -157,9 +167,9 @@
       },
     },
     beforeRouteEnter(to, from, next) {
-      console.log(to);
-      console.log(from);
-      console.log(to.params.topic_id);
+      // console.log(to);
+      // console.log(from);
+      // console.log(to.params.topic_id);
       if (to.params.topic_id) {
         this.showChannelQuizCreationTopicPage(this.$store, to.params).then(() => {
           next();
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 0d88da67d3..0ae0338da1 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -23,11 +23,13 @@
   import SectionEditor from './SectionEditor';
   import ReplaceQuestions from './ReplaceQuestions';
   import ResourceSelection from './ResourceSelection';
+  import ShowBookMarkedResources from './ShowBookMarkedResources.vue';
 
   const pageNameComponentMap = {
     [PageNames.QUIZ_SECTION_EDITOR]: SectionEditor,
     [PageNames.QUIZ_REPLACE_QUESTIONS]: ReplaceQuestions,
     [PageNames.QUIZ_SELECT_RESOURCES]: ResourceSelection,
+    [PageNames.BOOK_MARKED_RESOURCES]:ShowBookMarkedResources,
   };
 
   export default {
@@ -38,6 +40,7 @@
       ReplaceQuestions,
       ResourceSelection,
       ResourceSelectionBreadcrumbs,
+      ShowBookMarkedResources,
     },
     inject: ['quizForge'],
     data() {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue
new file mode 100644
index 0000000000..9ed71781b5
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue
@@ -0,0 +1,102 @@
+<template>
+    <div class="">
+
+        <ContentCardList
+            :contentList="bookmarks"
+            :showSelectAll="selectAllIsVisible"
+            :viewMoreButtonState="viewMoreButtonState"
+            :selectAllChecked="bookmarks.length === 0"
+            :contentIsChecked="contentIsInLesson"
+            :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
+            :contentCardMessage="() =>selectionMetadata"
+            :contentCardLink="contentLink"
+            @changeselectall="toggleTopicInWorkingResources"
+            @change_content_card="toggleSelected"
+            @moreresults="handleMoreResults"
+        />
+    </div>
+</template>
+
+<script>
+ import { useResources } from '../../../composables/useResources';
+ import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
+ import { PageNames } from '../../../constants';
+export default {
+    name:"ShowBookMarkedResources",
+    components:{
+        ContentCardList,
+    },
+    setup(){
+        const {
+         bookmarks
+        } = useResources();
+
+        return {
+            bookmarks,
+        }
+    },
+    computed:{
+        selectAllIsVisible(){
+            return true;
+        },
+        addableContent() {
+        // Content in the topic that can be added if 'Select All' is clicked
+            const list = bookmarksList;
+            return list.filter(
+                content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
+            );
+        },
+        contentIsInLesson() {
+            return ({ id }) =>
+                Boolean(this.workingResources.find(resource => resource.contentnode_id === id));
+        },
+        selectionMetadata(){
+            return '';
+        },
+    },
+    data(){
+        return {
+            viewMoreButtonState: 'no_more_results',
+        }
+    },
+    methods:{
+        contentLink(){
+            if (!content.is_leaf) {
+                return {
+                    name: PageNames.SELECT_FROM_RESOURCE,
+                    params: {
+                    topic_id: content.id,
+                    },
+                };
+            }
+        },
+        toggleTopicInWorkingResources(){
+            if (isChecked) {
+            this.addableContent.forEach(resource => {
+                this.addToResourceCache({
+                node: { ...resource },
+                });
+            });
+            this.addToWorkingResources(this.addableContent);
+            } else {
+            this.removeFromSelectedResources(this.quizForge.channels.value);
+            }
+        },
+        toggleSelected(){
+            if (checked) {
+                this.addToSelectedResources(content);
+            } else {
+                this.removeFromSelectedResources([content]);
+            }
+        },
+        handleMoreResults(){
+
+        },
+       
+        contentIsDirectoryKind({ is_leaf }) {
+            return !is_leaf;
+        },
+        
+    }
+}
+</script>
\ No newline at end of file

From b14457f4a848e4ff38a623ed6325cb67121bc41e Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 22 Nov 2023 18:10:42 +0300
Subject: [PATCH 38/50]  implement content filtering for select resource side
 panel

---
 .../assets/src/composables/useResources.js    | 76 ++++++++++++++++++-
 .../coach/assets/src/routes/planExamRoutes.js |  8 ++
 .../ShowBookMarkedResources.vue               |  2 +-
 3 files changed, 83 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useResources.js b/kolibri/plugins/coach/assets/src/composables/useResources.js
index 817a317237..ca9704fac1 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResources.js
+++ b/kolibri/plugins/coach/assets/src/composables/useResources.js
@@ -1,5 +1,7 @@
 import { ref, onMounted } from 'kolibri.lib.vueCompositionApi';
-import { ChannelResource, ContentNodeResource as bookMarkedResource } from 'kolibri.resources';
+import { ChannelResource,ContentNodeResource} from 'kolibri.resources';
+import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
+import { getContentNodeThumbnail } from 'kolibri.utils.contentNode';
 
 export function useResources() {
   const resources = ref(null);
@@ -15,14 +17,84 @@ export function useResources() {
   }
 
   function fetchBookMarkedResource() {
-    bookMarkedResource.fetchBookmarks({ params: { limit: 25, available: true } }).then(data => {
+    ContentNodeResource.fetchBookmarks({ params: { limit: 25, available: true } }).then(data => {
       bookmarks.value = data.results ? data.results : [];
     });
   }
 
+  function _getTopicsWithExerciseDescendants(topicIds = []) {
+    return new Promise(resolve => {
+      if (!topicIds.length) {
+        resolve([]);
+        return;
+      }
+      const topicsNumAssessmentDescendantsPromise = ContentNodeResource.fetchDescendantsAssessments(
+        topicIds
+      );
+  
+      topicsNumAssessmentDescendantsPromise.then(response => {
+        const topicsWithExerciseDescendants = [];
+        response.data.forEach(descendantAssessments => {
+          if (descendantAssessments.num_assessments > 0) {
+            topicsWithExerciseDescendants.push({
+              id: descendantAssessments.id,
+              numAssessments: descendantAssessments.num_assessments,
+              exercises: [],
+            });
+          }
+        });
+  
+        ContentNodeResource.fetchDescendants(
+          topicsWithExerciseDescendants.map(topic => topic.id),
+          {
+            descendant_kind: ContentNodeKinds.EXERCISE,
+          }
+        ).then(response => {
+          response.data.forEach(exercise => {
+            const topic = topicsWithExerciseDescendants.find(t => t.id === exercise.ancestor_id);
+            topic.exercises.push(exercise);
+          });
+          resolve(topicsWithExerciseDescendants);
+        });
+      });
+    });
+  }
+  
+  function filterAndAnnotateContentList(childNodes) {
+    return new Promise(resolve => {
+      const childTopics = childNodes.filter(({ kind }) => kind === ContentNodeKinds.TOPIC);
+      const topicIds = childTopics.map(({ id }) => id);
+      const topicsThatHaveExerciseDescendants = _getTopicsWithExerciseDescendants(topicIds);
+  
+      topicsThatHaveExerciseDescendants.then(topics => {
+        const childNodesWithExerciseDescendants = childNodes
+          .map(childNode => {
+            const index = topics.findIndex(topic => topic.id === childNode.id);
+            if (index !== -1) {
+              return { ...childNode, ...topics[index] };
+            }
+            return childNode;
+          })
+          .filter(childNode => {
+            if (childNode.kind === ContentNodeKinds.TOPIC && (childNode.numAssessments || 0) < 1) {
+              return false;
+            }
+            return true;
+          });
+  
+        const contentList = childNodesWithExerciseDescendants.map(node => ({
+          ...node,
+          thumbnail: getContentNodeThumbnail(node),
+        }));
+        resolve(contentList);
+      });
+    });
+  }
+
   onMounted(() => {
     fetchChannelResource();
     fetchBookMarkedResource();
+    filterAndAnnotateContentList()
   });
 
   return {
diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index c41c591254..54ae6b9cdd 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -47,6 +47,8 @@ export default [
         path: ':section_id/replace-questions',
       },
       {
+      // this is basically show how the routing works once you in the select resources page and bookmarked resources page
+      // once you are in the bookmark resources page the only thing that we are interested in is the topic Id that  always  get updated 
         name: PageNames.QUIZ_SELECT_RESOURCES,
         path: ':section_id/select-resources',
 
@@ -60,6 +62,12 @@ export default [
       {
         name: PageNames.BOOK_MARKED_RESOURCES,
         path: ':section_id/book-marked-resources',
+        children:[
+          {
+            name:PageNames.SELECT_FROM_RESOURCE,
+            path:':topic_id',
+          }
+        ]
       },
     ],
   },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue
index 9ed71781b5..7cdcd67905 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue
@@ -1,4 +1,4 @@
-<template>
+  <template>
     <div class="">
 
         <ContentCardList

From fd7bf8eb134ab16d7a4af229a4f1d336d31d3a0c Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 22 Nov 2023 19:36:48 +0300
Subject: [PATCH 39/50] displays boomarked resources

---
 .../assets/src/composables/useResources.js    | 143 ++++++------
 .../ShowBookMarkedResources.vue               | 205 ++++++++++--------
 2 files changed, 187 insertions(+), 161 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useResources.js b/kolibri/plugins/coach/assets/src/composables/useResources.js
index ca9704fac1..1c549cfae6 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResources.js
+++ b/kolibri/plugins/coach/assets/src/composables/useResources.js
@@ -1,7 +1,7 @@
 import { ref, onMounted } from 'kolibri.lib.vueCompositionApi';
-import { ChannelResource,ContentNodeResource} from 'kolibri.resources';
-import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
-import { getContentNodeThumbnail } from 'kolibri.utils.contentNode';
+import { ChannelResource, ContentNodeResource } from 'kolibri.resources';
+// import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
+// import { getContentNodeThumbnail } from 'kolibri.utils.contentNode';
 
 export function useResources() {
   const resources = ref(null);
@@ -22,79 +22,80 @@ export function useResources() {
     });
   }
 
-  function _getTopicsWithExerciseDescendants(topicIds = []) {
-    return new Promise(resolve => {
-      if (!topicIds.length) {
-        resolve([]);
-        return;
-      }
-      const topicsNumAssessmentDescendantsPromise = ContentNodeResource.fetchDescendantsAssessments(
-        topicIds
-      );
-  
-      topicsNumAssessmentDescendantsPromise.then(response => {
-        const topicsWithExerciseDescendants = [];
-        response.data.forEach(descendantAssessments => {
-          if (descendantAssessments.num_assessments > 0) {
-            topicsWithExerciseDescendants.push({
-              id: descendantAssessments.id,
-              numAssessments: descendantAssessments.num_assessments,
-              exercises: [],
-            });
-          }
-        });
-  
-        ContentNodeResource.fetchDescendants(
-          topicsWithExerciseDescendants.map(topic => topic.id),
-          {
-            descendant_kind: ContentNodeKinds.EXERCISE,
-          }
-        ).then(response => {
-          response.data.forEach(exercise => {
-            const topic = topicsWithExerciseDescendants.find(t => t.id === exercise.ancestor_id);
-            topic.exercises.push(exercise);
-          });
-          resolve(topicsWithExerciseDescendants);
-        });
-      });
-    });
-  }
-  
-  function filterAndAnnotateContentList(childNodes) {
-    return new Promise(resolve => {
-      const childTopics = childNodes.filter(({ kind }) => kind === ContentNodeKinds.TOPIC);
-      const topicIds = childTopics.map(({ id }) => id);
-      const topicsThatHaveExerciseDescendants = _getTopicsWithExerciseDescendants(topicIds);
-  
-      topicsThatHaveExerciseDescendants.then(topics => {
-        const childNodesWithExerciseDescendants = childNodes
-          .map(childNode => {
-            const index = topics.findIndex(topic => topic.id === childNode.id);
-            if (index !== -1) {
-              return { ...childNode, ...topics[index] };
-            }
-            return childNode;
-          })
-          .filter(childNode => {
-            if (childNode.kind === ContentNodeKinds.TOPIC && (childNode.numAssessments || 0) < 1) {
-              return false;
-            }
-            return true;
-          });
-  
-        const contentList = childNodesWithExerciseDescendants.map(node => ({
-          ...node,
-          thumbnail: getContentNodeThumbnail(node),
-        }));
-        resolve(contentList);
-      });
-    });
+  //   function _getTopicsWithExerciseDescendants(topicIds = []) {
+  //     return new Promise(resolve => {
+  //       if (!topicIds.length) {
+  //         resolve([]);
+  //         return;
+  //       }
+  //       const topicsNumAssessmentDescendantsPromise
+  //   = ContentNodeResource.fetchDescendantsAssessments(
+  //         topicIds
+  //       );
+
+  //       topicsNumAssessmentDescendantsPromise.then(response => {
+  //         const topicsWithExerciseDescendants = [];
+  //         response.data.forEach(descendantAssessments => {
+  //           if (descendantAssessments.num_assessments > 0) {
+  //             topicsWithExerciseDescendants.push({
+  //               id: descendantAssessments.id,
+  //               numAssessments: descendantAssessments.num_assessments,
+  //               exercises: [],
+  //             });
+  //           }
+  //         });
+
+  //         ContentNodeResource.fetchDescendants(
+  //           topicsWithExerciseDescendants.map(topic => topic.id),
+  //           {
+  //             descendant_kind: ContentNodeKinds.EXERCISE,
+  //           }
+  //         ).then(response => {
+  //           response.data.forEach(exercise => {
+  //             const topic = topicsWithExerciseDescendants.find(t =>
+  //   t.id === exercise.ancestor_id);
+  //             topic.exercises.push(exercise);
+  //           });
+  //           resolve(topicsWithExerciseDescendants);
+  //         });
+  //       });
+  //     });
+  //   }
+
+  function filterAndAnnotateContentList(/*childNodes*/) {
+    // return new Promise(resolve => {
+    // const childTopics = childNodes.filter(({ kind }) => kind === ContentNodeKinds.TOPIC);
+    // const topicIds = childTopics.map(({ id }) => id);
+    // const topicsThatHaveExerciseDescendants = _getTopicsWithExerciseDescendants(topicIds);
+    //   topicsThatHaveExerciseDescendants.then(topics => {
+    //     const childNodesWithExerciseDescendants = childNodes
+    //       .map(childNode => {
+    //         const index = topics.findIndex(topic => topic.id === childNode.id);
+    //         if (index !== -1) {
+    //           return { ...childNode, ...topics[index] };
+    //         }
+    //         return childNode;
+    //       })
+    //       .filter(childNode => {
+    //         if (childNode.kind === ContentNodeKinds.TOPIC &&
+    //    (childNode.numAssessments || 0) < 1) {
+    //           return false;
+    //         }
+    //         return true;
+    //       });
+    //     const contentList = childNodesWithExerciseDescendants.map(node => ({
+    //       ...node,
+    //       thumbnail: getContentNodeThumbnail(node),
+    //     }));
+    //     resolve(contentList);
+    //   });
+    // } );
   }
 
   onMounted(() => {
     fetchChannelResource();
     fetchBookMarkedResource();
-    filterAndAnnotateContentList()
+    filterAndAnnotateContentList();
   });
 
   return {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue
index 7cdcd67905..3a10e84a89 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue
@@ -1,102 +1,127 @@
-  <template>
-    <div class="">
+<template>
+
+  <div class="">
+    <ContentCardList
+      :contentList="bookmarks"
+      :showSelectAll="selectAllIsVisible"
+      :viewMoreButtonState="viewMoreButtonState"
+      :selectAllChecked="bookmarks.length === 0"
+      :contentIsChecked="contentIsInLesson"
+      :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
+      :contentCardMessage="() =>selectionMetadata"
+      :contentCardLink="contentLink"
+      @changeselectall="toggleTopicInWorkingResources"
+      @change_content_card="toggleSelected"
+      @moreresults="handleMoreResults"
+    />
+  </div>
 
-        <ContentCardList
-            :contentList="bookmarks"
-            :showSelectAll="selectAllIsVisible"
-            :viewMoreButtonState="viewMoreButtonState"
-            :selectAllChecked="bookmarks.length === 0"
-            :contentIsChecked="contentIsInLesson"
-            :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
-            :contentCardMessage="() =>selectionMetadata"
-            :contentCardLink="contentLink"
-            @changeselectall="toggleTopicInWorkingResources"
-            @change_content_card="toggleSelected"
-            @moreresults="handleMoreResults"
-        />
-    </div>
 </template>
 
+
 <script>
- import { useResources } from '../../../composables/useResources';
- import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
- import { PageNames } from '../../../constants';
-export default {
-    name:"ShowBookMarkedResources",
-    components:{
-        ContentCardList,
+
+  import pickBy from 'lodash/pickBy';
+  import { useResources } from '../../../composables/useResources';
+  import { PageNames } from '../../../constants';
+  import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
+
+  export default {
+    name: 'ShowBookMarkedResources',
+    components: {
+      ContentCardList,
     },
-    setup(){
-        const {
-         bookmarks
-        } = useResources();
+    setup() {
+      const { bookmarks } = useResources();
 
-        return {
-            bookmarks,
-        }
+      return {
+        bookmarks,
+      };
+    },
+    data() {
+      return {
+        viewMoreButtonState: 'no_more_results',
+      };
     },
-    computed:{
-        selectAllIsVisible(){
-            return true;
-        },
-        addableContent() {
+    computed: {
+      selectAllIsVisible() {
+        return true;
+      },
+      addableContent() {
         // Content in the topic that can be added if 'Select All' is clicked
-            const list = bookmarksList;
-            return list.filter(
-                content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
-            );
-        },
-        contentIsInLesson() {
-            return ({ id }) =>
-                Boolean(this.workingResources.find(resource => resource.contentnode_id === id));
-        },
-        selectionMetadata(){
-            return '';
-        },
+        const list = this.bookmarks;
+        return list.filter(
+          content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
+        );
+      },
+      contentIsInLesson() {
+        return ({ id }) => Boolean(this.bookmarks.find(resource => resource.contentnode_id === id));
+      },
+      selectionMetadata() {
+        return '';
+      },
     },
-    data(){
-        return {
-            viewMoreButtonState: 'no_more_results',
-        }
+    watch: {
+      workingResources(newVal, oldVal) {
+        this.showResourcesDifferenceMessage(newVal.length - oldVal.length);
+        this.debouncedSaveResources();
+      },
+      filters(newVal) {
+        const newQuery = {
+          ...this.$route.query,
+          ...newVal,
+        };
+        this.$router.push({
+          query: pickBy(newQuery),
+        });
+      },
     },
-    methods:{
-        contentLink(){
-            if (!content.is_leaf) {
-                return {
-                    name: PageNames.SELECT_FROM_RESOURCE,
-                    params: {
-                    topic_id: content.id,
-                    },
-                };
-            }
-        },
-        toggleTopicInWorkingResources(){
-            if (isChecked) {
-            this.addableContent.forEach(resource => {
-                this.addToResourceCache({
-                node: { ...resource },
-                });
+    methods: {
+      contentLink(content) {
+        if (!content.is_leaf) {
+          return {
+            name: PageNames.SELECT_FROM_RESOURCE,
+            params: {
+              topic_id: content.id,
+            },
+          };
+        } else {
+          return {};
+        }
+      },
+      toggleTopicInWorkingResources(isChecked) {
+        if (isChecked) {
+          this.addableContent.forEach(resource => {
+            this.addToResourceCache({
+              node: { ...resource },
             });
-            this.addToWorkingResources(this.addableContent);
-            } else {
-            this.removeFromSelectedResources(this.quizForge.channels.value);
-            }
-        },
-        toggleSelected(){
-            if (checked) {
-                this.addToSelectedResources(content);
-            } else {
-                this.removeFromSelectedResources([content]);
-            }
-        },
-        handleMoreResults(){
+          });
+          this.addToWorkingResources(this.addableContent);
+        } else {
+          this.removeFromSelectedResources(this.quizForge.channels.value);
+        }
+      },
+      toggleSelected({ content, checked }) {
+        if (checked) {
+          this.addToSelectedResources(content);
+        } else {
+          this.removeFromSelectedResources([content]);
+        }
+      },
+      addToSelectedResources(content) {
+        const list =
+          this.contentList && this.contentList.length ? this.contentList : this.bookmarksList;
+        this.addToResourceCache({
+          node: list.find(n => n.id === content.id),
+        });
+        this.addToWorkingResources([content]);
+      },
+      handleMoreResults() {},
+
+      contentIsDirectoryKind({ is_leaf }) {
+        return !is_leaf;
+      },
+    },
+  };
 
-        },
-       
-        contentIsDirectoryKind({ is_leaf }) {
-            return !is_leaf;
-        },
-        
-    }
-}
-</script>
\ No newline at end of file
+</script>

From 776ba5c76916e0e7591100323f83fa4e94c936bd Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 23 Nov 2023 18:07:50 +0300
Subject: [PATCH 40/50] added the component for the channels

---
 .../plan/CreateExamPage/ResourceSelection.vue |  18 +-
 .../plan/CreateExamPage/SectionSidePanel.vue  |   3 +
 .../plan/CreateExamPage/SelectedChannel.vue   | 177 ++++++++++++++++++
 .../strings/enhancedQuizManagementStrings.js  |   3 +
 4 files changed, 197 insertions(+), 4 deletions(-)
 create mode 100644 kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 2d95d65b9c..8300c6b065 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -4,12 +4,12 @@
     <h5
       class="title-style"
     >
-      <KIcon
+      <KIconButton
         icon="back"
       />
-      Select folders or exercises from these channels
+      {{ selectFoldersOrExercises$() }}
     </h5>
-    <p>Select from bookmarks</p>
+    <p> {{ selectFromBookmarks$() }}</p>
 
     <BookMarkedResource
       v-if="bookmarks.length > 0"
@@ -68,11 +68,18 @@
     },
     inject: ['quizForge'],
     setup() {
-      const { sectionSettings$ } = enhancedQuizManagementStrings;
+      const { 
+        sectionSettings$,
+        selectFoldersOrExercises$,
+        selectFromBookmarks$,
+      } = enhancedQuizManagementStrings;
+
       const { channels, bookmarks } = useResources();
 
       return {
         sectionSettings$,
+        selectFoldersOrExercises$,
+        selectFromBookmarks$,
         channels,
         bookmarks,
       };
@@ -182,6 +189,7 @@
       } else {
         this.visibleResources = [];
       }
+      console.log(this.channels);
     },
     methods: {
       /** @public */
@@ -195,6 +203,8 @@
             name: PageNames.SELECT_FROM_RESOURCE,
             params: {
               topic_id: content.id,
+              classId: this.$route.params.classId,
+              section_id: this.$route.params.section_id
             },
           };
         }
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 0ae0338da1..33fa3b9d6f 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -24,12 +24,14 @@
   import ReplaceQuestions from './ReplaceQuestions';
   import ResourceSelection from './ResourceSelection';
   import ShowBookMarkedResources from './ShowBookMarkedResources.vue';
+  import SelectedChannel from './SelectedChannel.vue';
 
   const pageNameComponentMap = {
     [PageNames.QUIZ_SECTION_EDITOR]: SectionEditor,
     [PageNames.QUIZ_REPLACE_QUESTIONS]: ReplaceQuestions,
     [PageNames.QUIZ_SELECT_RESOURCES]: ResourceSelection,
     [PageNames.BOOK_MARKED_RESOURCES]:ShowBookMarkedResources,
+    [PageNames.SELECT_FROM_RESOURCE]:SelectedChannel,
   };
 
   export default {
@@ -39,6 +41,7 @@
       SectionEditor,
       ReplaceQuestions,
       ResourceSelection,
+      SelectedChannel,
       ResourceSelectionBreadcrumbs,
       ShowBookMarkedResources,
     },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
new file mode 100644
index 0000000000..bad43a04f9
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
@@ -0,0 +1,177 @@
+<template>
+    <div class="">
+        <div class="">
+            <KIconButton
+                icon="back"
+            />
+            {{ selectFoldersOrExercises$() }}
+        </div>
+
+        <h2>channel name</h2>
+
+        <ResourceSelectionBreadcrumbs
+          :ancestors="ancestors"
+          :channelsLink="channelsLink"
+          :topicsLink="topicsLink"
+        />
+
+        <ContentCardList
+            :contentList="filteredContentList"
+            :showSelectAll="selectAllIsVisible"
+            :viewMoreButtonState="viewMoreButtonState"
+            :selectAllChecked="filteredContentList.length === 0"
+            :contentIsChecked="contentIsInLesson"
+            :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
+            :contentCardMessage="() =>selectionMetadata"
+            :contentCardLink="contentLink"
+            @changeselectall="toggleTopicInWorkingResources"
+            @change_content_card="toggleSelected"
+            @moreresults="handleMoreResults"
+         />
+        
+    </div>
+</template>
+
+
+<script>
+import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+import { mapState } from 'vuex';
+import { PageNames } from '../../../constants';
+import { useResources } from '../../../composables/useResources';
+import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
+import ResourceSelectionBreadcrumbs from '../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
+
+export default {
+    name:"SelectedChannel",
+    components:{
+        ResourceSelectionBreadcrumbs,
+        ContentCardList
+    },
+    setup(){
+        const { 
+            sectionSettings$,
+            selectFoldersOrExercises$,
+            selectFromBookmarks$,
+        } = enhancedQuizManagementStrings;
+
+        const { channels } = useResources();
+
+        return {
+            sectionSettings$,
+            selectFoldersOrExercises$,
+            selectFromBookmarks$,
+            channels
+        }
+    },
+    data(){
+        return {
+            filters: {
+                channel: this.$route.query.channel || null,
+                kind: this.$route.query.kind || null,
+                role: this.$route.query.role || null,
+            },
+            viewMoreButtonState: 'no_more_results',
+        }
+    },
+    computed:{
+        ...mapState('lessonSummary/resources', [
+        'ancestors',
+        ]),
+        channelsLink() {
+           return this.selectionRootLink();
+        },
+        filteredContentList() {
+            const { role } = this.filters;
+           
+            const list = this.channels ? this.channels : [];
+            return list.filter(contentNode => {
+                let passesFilters = true;
+
+                if (role === 'nonCoach') {
+                    passesFilters = passesFilters && contentNode.num_coach_contents === 0;
+                }
+                if (role === 'coach') {
+                    passesFilters = passesFilters && contentNode.num_coach_contents > 0;
+                }
+                return passesFilters;
+            });
+        },
+        selectAllIsVisible() {
+            return true;
+        },
+        addableContent() {
+            // Content in the topic that can be added if 'Select All' is clicked
+            const list = this.filteredContentList;
+            return list.filter(
+            content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
+            );
+        },
+        contentIsInLesson() {
+            return ({ id }) => Boolean(this.filteredContentList.find(resource => resource.contentnode_id === id));
+        },
+        selectionMetadata() {
+            return '';
+        },
+       
+    },
+    methods:{
+        // ...mapActions('lessonSummary/resources', ['fetchAdditionalSearchResults']),
+        topicsLink(topicId) {
+            return this.topicListingLink({ ...this.$route.params, topicId });
+        },
+        topicListingLink({ topicId }) {
+            return this.$router.getRoute(PageNames.SELECTION, { topicId }, this.$route.query);
+        },
+        selectionRootLink() {
+            return this.$router.getRoute(PageNames.SELECTION_ROOT, {}, this.$route.query);
+        },
+        contentIsDirectoryKind({ is_leaf }) {
+            return !is_leaf;
+        },
+        contentLink(content) {
+            if (!content.is_leaf) {
+            return {
+                name: PageNames.SELECT_FROM_RESOURCE,
+                params: {
+                topic_id: content.id,
+                },
+            };
+            } else {
+            return {};
+            }
+        },
+        toggleTopicInWorkingResources(isChecked) {
+            if (isChecked) {
+            this.addableContent.forEach(resource => {
+                this.addToResourceCache({
+                node: { ...resource },
+                });
+            });
+            this.addToWorkingResources(this.addableContent);
+            } else {
+            this.removeFromSelectedResources(this.quizForge.channels.value);
+            }
+        },
+        toggleSelected({ content, checked }) {
+            if (checked) {
+            this.addToSelectedResources(content);
+            } else {
+            this.removeFromSelectedResources([content]);
+            }
+        },
+        handleMoreResults() {
+            this.fetchAdditionalSearchResults({
+                searchTerm: '',
+                kind: this.filters.kind,
+                channelId: this.filters.channel,
+            })
+            .then(() => {
+                this.moreResultsState = null;
+            })
+            .catch(() => {
+                this.moreResultsState = 'error';
+            });
+      },
+    }
+}
+</script>   
\ No newline at end of file
diff --git a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
index 8daeee61f0..5cdc810bfa 100644
--- a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
+++ b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
@@ -71,6 +71,9 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
   selectFoldersOrExercises: {
     message: 'Select folders or exercises from these channels',
   },
+  selectFromBookmarks:{
+    message:"Select from bookmarks"
+  },
   bookmarksLabel: {
     message: 'Bookmark',
   },

From 75ec4ecbb12402606015f8177f988900b674dad4 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 23 Nov 2023 18:13:28 +0300
Subject: [PATCH 41/50] added the component for the channels

---
 .../plan/CreateExamPage/ResourceSelection.vue |  14 +-
 .../plan/CreateExamPage/SectionSidePanel.vue  |   4 +-
 .../plan/CreateExamPage/SelectedChannel.vue   | 318 +++++++++---------
 .../strings/enhancedQuizManagementStrings.js  |   4 +-
 4 files changed, 171 insertions(+), 169 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 8300c6b065..c6229d20cf 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -68,7 +68,7 @@
     },
     inject: ['quizForge'],
     setup() {
-      const { 
+      const {
         sectionSettings$,
         selectFoldersOrExercises$,
         selectFromBookmarks$,
@@ -147,15 +147,15 @@
           content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
         );
       },
-      to(){
+      to() {
         return {
           name: PageNames.BOOK_MARKED_RESOURCES,
-          params:{
+          params: {
             classId: this.$route.params.classId,
             section_id: this.$route.params.section_id,
-          }
-        }
-      }
+          },
+        };
+      },
     },
 
     watch: {
@@ -204,7 +204,7 @@
             params: {
               topic_id: content.id,
               classId: this.$route.params.classId,
-              section_id: this.$route.params.section_id
+              section_id: this.$route.params.section_id,
             },
           };
         }
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 33fa3b9d6f..724128cf60 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -30,8 +30,8 @@
     [PageNames.QUIZ_SECTION_EDITOR]: SectionEditor,
     [PageNames.QUIZ_REPLACE_QUESTIONS]: ReplaceQuestions,
     [PageNames.QUIZ_SELECT_RESOURCES]: ResourceSelection,
-    [PageNames.BOOK_MARKED_RESOURCES]:ShowBookMarkedResources,
-    [PageNames.SELECT_FROM_RESOURCE]:SelectedChannel,
+    [PageNames.BOOK_MARKED_RESOURCES]: ShowBookMarkedResources,
+    [PageNames.SELECT_FROM_RESOURCE]: SelectedChannel,
   };
 
   export default {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
index bad43a04f9..5216a4c580 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
@@ -1,177 +1,179 @@
 <template>
+
+  <div class="">
     <div class="">
-        <div class="">
-            <KIconButton
-                icon="back"
-            />
-            {{ selectFoldersOrExercises$() }}
-        </div>
+      <KIconButton
+        icon="back"
+      />
+      {{ selectFoldersOrExercises$() }}
+    </div>
 
-        <h2>channel name</h2>
+    <h2>channel name</h2>
 
-        <ResourceSelectionBreadcrumbs
-          :ancestors="ancestors"
-          :channelsLink="channelsLink"
-          :topicsLink="topicsLink"
-        />
+    <ResourceSelectionBreadcrumbs
+      :ancestors="ancestors"
+      :channelsLink="channelsLink"
+      :topicsLink="topicsLink"
+    />
+
+    <ContentCardList
+      :contentList="filteredContentList"
+      :showSelectAll="selectAllIsVisible"
+      :viewMoreButtonState="viewMoreButtonState"
+      :selectAllChecked="filteredContentList.length === 0"
+      :contentIsChecked="contentIsInLesson"
+      :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
+      :contentCardMessage="() =>selectionMetadata"
+      :contentCardLink="contentLink"
+      @changeselectall="toggleTopicInWorkingResources"
+      @change_content_card="toggleSelected"
+      @moreresults="handleMoreResults"
+    />
+
+  </div>
 
-        <ContentCardList
-            :contentList="filteredContentList"
-            :showSelectAll="selectAllIsVisible"
-            :viewMoreButtonState="viewMoreButtonState"
-            :selectAllChecked="filteredContentList.length === 0"
-            :contentIsChecked="contentIsInLesson"
-            :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
-            :contentCardMessage="() =>selectionMetadata"
-            :contentCardLink="contentLink"
-            @changeselectall="toggleTopicInWorkingResources"
-            @change_content_card="toggleSelected"
-            @moreresults="handleMoreResults"
-         />
-        
-    </div>
 </template>
 
 
 <script>
-import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-import { mapState } from 'vuex';
-import { PageNames } from '../../../constants';
-import { useResources } from '../../../composables/useResources';
-import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
-import ResourceSelectionBreadcrumbs from '../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
 
-export default {
-    name:"SelectedChannel",
-    components:{
-        ResourceSelectionBreadcrumbs,
-        ContentCardList
+  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import { mapState } from 'vuex';
+  import { PageNames } from '../../../constants';
+  import { useResources } from '../../../composables/useResources';
+  import ResourceSelectionBreadcrumbs from '../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
+  import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
+
+  export default {
+    name: 'SelectedChannel',
+    components: {
+      ResourceSelectionBreadcrumbs,
+      ContentCardList,
     },
-    setup(){
-        const { 
-            sectionSettings$,
-            selectFoldersOrExercises$,
-            selectFromBookmarks$,
-        } = enhancedQuizManagementStrings;
+    setup() {
+      const {
+        sectionSettings$,
+        selectFoldersOrExercises$,
+        selectFromBookmarks$,
+      } = enhancedQuizManagementStrings;
 
-        const { channels } = useResources();
+      const { channels } = useResources();
 
-        return {
-            sectionSettings$,
-            selectFoldersOrExercises$,
-            selectFromBookmarks$,
-            channels
-        }
-    },
-    data(){
-        return {
-            filters: {
-                channel: this.$route.query.channel || null,
-                kind: this.$route.query.kind || null,
-                role: this.$route.query.role || null,
-            },
-            viewMoreButtonState: 'no_more_results',
-        }
+      return {
+        sectionSettings$,
+        selectFoldersOrExercises$,
+        selectFromBookmarks$,
+        channels,
+      };
     },
-    computed:{
-        ...mapState('lessonSummary/resources', [
-        'ancestors',
-        ]),
-        channelsLink() {
-           return this.selectionRootLink();
+    data() {
+      return {
+        filters: {
+          channel: this.$route.query.channel || null,
+          kind: this.$route.query.kind || null,
+          role: this.$route.query.role || null,
         },
-        filteredContentList() {
-            const { role } = this.filters;
-           
-            const list = this.channels ? this.channels : [];
-            return list.filter(contentNode => {
-                let passesFilters = true;
+        viewMoreButtonState: 'no_more_results',
+      };
+    },
+    computed: {
+      ...mapState('lessonSummary/resources', ['ancestors']),
+      channelsLink() {
+        return this.selectionRootLink();
+      },
+      filteredContentList() {
+        const { role } = this.filters;
 
-                if (role === 'nonCoach') {
-                    passesFilters = passesFilters && contentNode.num_coach_contents === 0;
-                }
-                if (role === 'coach') {
-                    passesFilters = passesFilters && contentNode.num_coach_contents > 0;
-                }
-                return passesFilters;
-            });
-        },
-        selectAllIsVisible() {
-            return true;
-        },
-        addableContent() {
-            // Content in the topic that can be added if 'Select All' is clicked
-            const list = this.filteredContentList;
-            return list.filter(
-            content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
-            );
-        },
-        contentIsInLesson() {
-            return ({ id }) => Boolean(this.filteredContentList.find(resource => resource.contentnode_id === id));
-        },
-        selectionMetadata() {
-            return '';
-        },
-       
+        const list = this.channels ? this.channels : [];
+        return list.filter(contentNode => {
+          let passesFilters = true;
+
+          if (role === 'nonCoach') {
+            passesFilters = passesFilters && contentNode.num_coach_contents === 0;
+          }
+          if (role === 'coach') {
+            passesFilters = passesFilters && contentNode.num_coach_contents > 0;
+          }
+          return passesFilters;
+        });
+      },
+      selectAllIsVisible() {
+        return true;
+      },
+      addableContent() {
+        // Content in the topic that can be added if 'Select All' is clicked
+        const list = this.filteredContentList;
+        return list.filter(
+          content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
+        );
+      },
+      contentIsInLesson() {
+        return ({ id }) =>
+          Boolean(this.filteredContentList.find(resource => resource.contentnode_id === id));
+      },
+      selectionMetadata() {
+        return '';
+      },
     },
-    methods:{
-        // ...mapActions('lessonSummary/resources', ['fetchAdditionalSearchResults']),
-        topicsLink(topicId) {
-            return this.topicListingLink({ ...this.$route.params, topicId });
-        },
-        topicListingLink({ topicId }) {
-            return this.$router.getRoute(PageNames.SELECTION, { topicId }, this.$route.query);
-        },
-        selectionRootLink() {
-            return this.$router.getRoute(PageNames.SELECTION_ROOT, {}, this.$route.query);
-        },
-        contentIsDirectoryKind({ is_leaf }) {
-            return !is_leaf;
-        },
-        contentLink(content) {
-            if (!content.is_leaf) {
-            return {
-                name: PageNames.SELECT_FROM_RESOURCE,
-                params: {
-                topic_id: content.id,
-                },
-            };
-            } else {
-            return {};
-            }
-        },
-        toggleTopicInWorkingResources(isChecked) {
-            if (isChecked) {
-            this.addableContent.forEach(resource => {
-                this.addToResourceCache({
-                node: { ...resource },
-                });
-            });
-            this.addToWorkingResources(this.addableContent);
-            } else {
-            this.removeFromSelectedResources(this.quizForge.channels.value);
-            }
-        },
-        toggleSelected({ content, checked }) {
-            if (checked) {
-            this.addToSelectedResources(content);
-            } else {
-            this.removeFromSelectedResources([content]);
-            }
-        },
-        handleMoreResults() {
-            this.fetchAdditionalSearchResults({
-                searchTerm: '',
-                kind: this.filters.kind,
-                channelId: this.filters.channel,
-            })
-            .then(() => {
-                this.moreResultsState = null;
-            })
-            .catch(() => {
-                this.moreResultsState = 'error';
+    methods: {
+      // ...mapActions('lessonSummary/resources', ['fetchAdditionalSearchResults']),
+      topicsLink(topicId) {
+        return this.topicListingLink({ ...this.$route.params, topicId });
+      },
+      topicListingLink({ topicId }) {
+        return this.$router.getRoute(PageNames.SELECTION, { topicId }, this.$route.query);
+      },
+      selectionRootLink() {
+        return this.$router.getRoute(PageNames.SELECTION_ROOT, {}, this.$route.query);
+      },
+      contentIsDirectoryKind({ is_leaf }) {
+        return !is_leaf;
+      },
+      contentLink(content) {
+        if (!content.is_leaf) {
+          return {
+            name: PageNames.SELECT_FROM_RESOURCE,
+            params: {
+              topic_id: content.id,
+            },
+          };
+        } else {
+          return {};
+        }
+      },
+      toggleTopicInWorkingResources(isChecked) {
+        if (isChecked) {
+          this.addableContent.forEach(resource => {
+            this.addToResourceCache({
+              node: { ...resource },
             });
+          });
+          this.addToWorkingResources(this.addableContent);
+        } else {
+          this.removeFromSelectedResources(this.quizForge.channels.value);
+        }
       },
-    }
-}
-</script>   
\ No newline at end of file
+      toggleSelected({ content, checked }) {
+        if (checked) {
+          this.addToSelectedResources(content);
+        } else {
+          this.removeFromSelectedResources([content]);
+        }
+      },
+      handleMoreResults() {
+        this.fetchAdditionalSearchResults({
+          searchTerm: '',
+          kind: this.filters.kind,
+          channelId: this.filters.channel,
+        })
+          .then(() => {
+            this.moreResultsState = null;
+          })
+          .catch(() => {
+            this.moreResultsState = 'error';
+          });
+      },
+    },
+  };
+
+</script>
diff --git a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
index 5cdc810bfa..4e06fcdedb 100644
--- a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
+++ b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
@@ -71,8 +71,8 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
   selectFoldersOrExercises: {
     message: 'Select folders or exercises from these channels',
   },
-  selectFromBookmarks:{
-    message:"Select from bookmarks"
+  selectFromBookmarks: {
+    message: 'Select from bookmarks',
   },
   bookmarksLabel: {
     message: 'Bookmark',

From 300b355733d4868a68fdb556ff9f079e11543c35 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Mon, 27 Nov 2023 23:43:27 +0300
Subject: [PATCH 42/50] added dragging feature

---
 .../assets/src/composables/useResources.js    | 169 +++--
 .../coach/assets/src/routes/planExamRoutes.js |  22 +-
 .../CreateExamPage/BookMarkedResource.vue     |  11 +-
 .../plan/CreateExamPage/ResourceSelection.vue | 653 +++++++++++++-----
 .../plan/CreateExamPage/SectionSidePanel.vue  |   1 -
 .../src/views/plan/CreateExamPage/index.vue   |   3 +-
 6 files changed, 596 insertions(+), 263 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useResources.js b/kolibri/plugins/coach/assets/src/composables/useResources.js
index 1c549cfae6..aed6a874d0 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResources.js
+++ b/kolibri/plugins/coach/assets/src/composables/useResources.js
@@ -1,17 +1,34 @@
 import { ref, onMounted } from 'kolibri.lib.vueCompositionApi';
 import { ChannelResource, ContentNodeResource } from 'kolibri.resources';
-// import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
-// import { getContentNodeThumbnail } from 'kolibri.utils.contentNode';
+import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
+import { getContentNodeThumbnail } from 'kolibri.utils.contentNode';
+import { set } from '@vueuse/core';
+import store from 'kolibri.coreVue.vuex.store';
+
+// import { store } from 'vuex';
 
 export function useResources() {
   const resources = ref(null);
   const channels = ref([]);
   const bookmarks = ref([]);
+  const contentList = ref([]);
 
   function fetchChannelResource() {
     ChannelResource.fetchCollection({ params: { has_exercises: true, available: true } }).then(
       response => {
-        channels.value = response;
+        // channels.value = response;
+        set(
+          channels,
+          response.map(chnl => {
+            return {
+              ...chnl,
+              id: chnl.root,
+              title: chnl.name,
+              kind: ContentNodeKinds.CHANNEL,
+              is_leaf: false,
+            };
+          })
+        );
       }
     );
   }
@@ -22,85 +39,101 @@ export function useResources() {
     });
   }
 
-  //   function _getTopicsWithExerciseDescendants(topicIds = []) {
-  //     return new Promise(resolve => {
-  //       if (!topicIds.length) {
-  //         resolve([]);
-  //         return;
-  //       }
-  //       const topicsNumAssessmentDescendantsPromise
-  //   = ContentNodeResource.fetchDescendantsAssessments(
-  //         topicIds
-  //       );
+  function _getTopicsWithExerciseDescendants(topicIds = []) {
+    return new Promise(resolve => {
+      if (!topicIds.length) {
+        resolve([]);
+        return;
+      }
+      const topicsNumAssessmentDescendantsPromise = ContentNodeResource.fetchDescendantsAssessments(
+        topicIds
+      );
+
+      topicsNumAssessmentDescendantsPromise.then(response => {
+        const topicsWithExerciseDescendants = [];
+        response.data.forEach(descendantAssessments => {
+          if (descendantAssessments.num_assessments > 0) {
+            topicsWithExerciseDescendants.push({
+              id: descendantAssessments.id,
+              numAssessments: descendantAssessments.num_assessments,
+              exercises: [],
+            });
+          }
+        });
 
-  //       topicsNumAssessmentDescendantsPromise.then(response => {
-  //         const topicsWithExerciseDescendants = [];
-  //         response.data.forEach(descendantAssessments => {
-  //           if (descendantAssessments.num_assessments > 0) {
-  //             topicsWithExerciseDescendants.push({
-  //               id: descendantAssessments.id,
-  //               numAssessments: descendantAssessments.num_assessments,
-  //               exercises: [],
-  //             });
-  //           }
-  //         });
+        ContentNodeResource.fetchDescendants(
+          topicsWithExerciseDescendants.map(topic => topic.id),
+          {
+            descendant_kind: ContentNodeKinds.EXERCISE,
+          }
+        ).then(response => {
+          response.data.forEach(exercise => {
+            const topic = topicsWithExerciseDescendants.find(t => t.id === exercise.ancestor_id);
+            topic.exercises.push(exercise);
+          });
+          resolve(topicsWithExerciseDescendants);
+        });
+      });
+    });
+  }
 
-  //         ContentNodeResource.fetchDescendants(
-  //           topicsWithExerciseDescendants.map(topic => topic.id),
-  //           {
-  //             descendant_kind: ContentNodeKinds.EXERCISE,
-  //           }
-  //         ).then(response => {
-  //           response.data.forEach(exercise => {
-  //             const topic = topicsWithExerciseDescendants.find(t =>
-  //   t.id === exercise.ancestor_id);
-  //             topic.exercises.push(exercise);
-  //           });
-  //           resolve(topicsWithExerciseDescendants);
-  //         });
-  //       });
-  //     });
-  //   }
+  function filterAndAnnotateContentList(childNodes) {
+    return new Promise(resolve => {
+      if (childNodes) {
+        const childTopics = childNodes.filter(({ kind }) => kind === ContentNodeKinds.TOPIC);
+        const topicIds = childTopics.map(({ id }) => id);
+        const topicsThatHaveExerciseDescendants = _getTopicsWithExerciseDescendants(topicIds);
+        topicsThatHaveExerciseDescendants.then(topics => {
+          const childNodesWithExerciseDescendants = childNodes
+            .map(childNode => {
+              const index = topics.findIndex(topic => topic.id === childNode.id);
+              if (index !== -1) {
+                return { ...childNode, ...topics[index] };
+              }
+              return childNode;
+            })
+            .filter(childNode => {
+              if (
+                childNode.kind === ContentNodeKinds.TOPIC &&
+                (childNode.numAssessments || 0) < 1
+              ) {
+                return false;
+              }
+              return true;
+            });
+          const contentList = childNodesWithExerciseDescendants.map(node => ({
+            ...node,
+            thumbnail: getContentNodeThumbnail(node),
+          }));
+          resolve(contentList);
+        });
+      }
+    });
+  }
 
-  function filterAndAnnotateContentList(/*childNodes*/) {
-    // return new Promise(resolve => {
-    // const childTopics = childNodes.filter(({ kind }) => kind === ContentNodeKinds.TOPIC);
-    // const topicIds = childTopics.map(({ id }) => id);
-    // const topicsThatHaveExerciseDescendants = _getTopicsWithExerciseDescendants(topicIds);
-    //   topicsThatHaveExerciseDescendants.then(topics => {
-    //     const childNodesWithExerciseDescendants = childNodes
-    //       .map(childNode => {
-    //         const index = topics.findIndex(topic => topic.id === childNode.id);
-    //         if (index !== -1) {
-    //           return { ...childNode, ...topics[index] };
-    //         }
-    //         return childNode;
-    //       })
-    //       .filter(childNode => {
-    //         if (childNode.kind === ContentNodeKinds.TOPIC &&
-    //    (childNode.numAssessments || 0) < 1) {
-    //           return false;
-    //         }
-    //         return true;
-    //       });
-    //     const contentList = childNodesWithExerciseDescendants.map(node => ({
-    //       ...node,
-    //       thumbnail: getContentNodeThumbnail(node),
-    //     }));
-    //     resolve(contentList);
-    //   });
-    // } );
+  function filterLessonResource(lessonId) {
+    store
+      .dispatch('lessonSummary/saveLessonResources', {
+        lessonId: lessonId,
+        resources: store.state.lessonSummary.workingResources,
+      })
+      .then(content => {
+        console.log(content);
+      });
   }
 
   onMounted(() => {
     fetchChannelResource();
     fetchBookMarkedResource();
     filterAndAnnotateContentList();
+    filterLessonResource();
   });
 
   return {
     resources,
     channels,
     bookmarks,
+    contentList,
+    filterLessonResource,
   };
 }
diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index 54ae6b9cdd..bca0810263 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -47,27 +47,25 @@ export default [
         path: ':section_id/replace-questions',
       },
       {
-      // this is basically show how the routing works once you in the select resources page and bookmarked resources page
-      // once you are in the bookmark resources page the only thing that we are interested in is the topic Id that  always  get updated 
         name: PageNames.QUIZ_SELECT_RESOURCES,
         path: ':section_id/select-resources',
 
-        children:[
+        children: [
           {
-            name:PageNames.SELECT_FROM_RESOURCE,
-            path:':topic_id',
-          }
-        ]
+            name: PageNames.SELECT_FROM_RESOURCE,
+            path: ':topic_id',
+          },
+        ],
       },
       {
         name: PageNames.BOOK_MARKED_RESOURCES,
         path: ':section_id/book-marked-resources',
-        children:[
+        children: [
           {
-            name:PageNames.SELECT_FROM_RESOURCE,
-            path:':topic_id',
-          }
-        ]
+            name: PageNames.SELECT_FROM_RESOURCE,
+            path: ':topic_id',
+          },
+        ],
       },
     ],
   },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
index 3ec1358e47..569dc6c76c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
@@ -59,10 +59,10 @@
         type: Number,
         required: true,
       },
-      to:{
-        type:Object,
-        required:true,
-      }
+      to: {
+        type: Object,
+        required: true,
+      },
     },
     computed: {
       bookMarkBackgroundColor() {
@@ -71,9 +71,6 @@
         };
       },
     },
-    mounted(){
-      console.log(this.$route.params);
-    }
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index c6229d20cf..dd9a4b6887 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -1,41 +1,69 @@
 <template>
 
-  <div class="select-resource">
-    <h5
-      class="title-style"
-    >
-      <KIconButton
-        icon="back"
-      />
-      {{ selectFoldersOrExercises$() }}
-    </h5>
-    <p> {{ selectFromBookmarks$() }}</p>
-
-    <BookMarkedResource
-      v-if="bookmarks.length > 0"
-      kind="bookmark"
-      :isMobile="true"
-      :to="to"
-      :bookMarkedResoures="bookmarks.length"
+  <div v-if="!showChannels">
+    <ContentCardList
+      :contentList="bookmarksContentList"
+      :showSelectAll="selectAllIsVisible"
+      :selectAllChecked="addableContent.length === 0"
+      :contentCardLink="bookmarkLink"
+      :contentIsChecked="contentIsInLesson"
+      :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
+      :viewMoreButtonState="viewMoreButtonState"
+      :contentCardMessage="selectionMetadata"
+      @changeselectall="toggleTopicInWorkingResources"
+      @change_content_card="toggleSelected"
+      @moreresults="handleMoreResults"
     />
-
-    <LessonsSearchBox
-      ref="textbox"
-      placeholder="search by keyword"
+  </div>
+  <div v-else>
+    <div @click="lessonCardClicked">
+      <KRouterLink
+        v-if="bookmarksCount"
+        :appearanceOverrides="{
+          width: '100%',
+          textDecoration: 'none',
+          color: $themeTokens.text }"
+        :to="getBookmarksLink()"
+      >
+        <div :class="windowIsSmall ? 'mobile-bookmark-container' : 'bookmark-container'">
+          <BookmarkIcon :class="windowIsSmall ? 'mobile-bookmark-icon' : ''" />
+          <div :class="windowIsSmall ? 'mobile-text' : 'text'">
+            <h3>{{ coreString('bookmarksLabel') }}</h3>
+            <p>{{ $tr('resources', { count: bookmarksCount }) }}</p>
+          </div>
+        </div>
+      </KRouterLink>
+    </div>
+    <LessonsSearchBox @searchterm="handleSearchTerm" />
+    <LessonsSearchFilters
+      v-if="inSearchMode"
+      v-model="filters"
+      class="search-filters"
       :searchTerm="searchTerm"
-      :inputPlaceHolderStyle="inputPlaceHolderStyle"
-      style="margin-top:1em;margin-bottom:1em;"
-      @searchterm="search"
+      :searchResults="searchResults"
     />
 
+    {{ contentList }}
+
+    <ResourceSelectionBreadcrumbs
+      v-if="!inSearchMode"
+      :ancestors="ancestors"
+      :channelsLink="channelsLink"
+      :topicsLink="topicsLink"
+    />
+
+    <h2>{{ topicTitle }}</h2>
+    <p>{{ topicDescription }}</p>
+
     <ContentCardList
-      :contentList="channels"
+      v-if="!isExiting"
+      :contentList="filteredContentList"
       :showSelectAll="selectAllIsVisible"
       :viewMoreButtonState="viewMoreButtonState"
       :selectAllChecked="addableContent.length === 0"
       :contentIsChecked="contentIsInLesson"
       :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
-      :contentCardMessage="() =>selectionMetadata"
+      :contentCardMessage="selectionMetadata"
       :contentCardLink="contentLink"
       @changeselectall="toggleTopicInWorkingResources"
       @change_content_card="toggleSelected"
@@ -48,116 +76,198 @@
 
 <script>
 
-  import { ContentNodeKinds, ContentNodeResource } from 'kolibri.coreVue.vuex.constants';
-  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
+  import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
+  import { BookmarksResource } from 'kolibri.resources';
+  import debounce from 'lodash/debounce';
   import every from 'lodash/every';
   import pickBy from 'lodash/pickBy';
-  import { PageNames } from '../../../constants';
-  import { LessonsPageNames } from '../../../constants/lessonsConstants';
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { useResources } from '../../../composables/useResources';
-  import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
-  import BookMarkedResource from './BookMarkedResource.vue';
-  import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
+  import commonCoach from '../../common';
+  import { PageNames } from '../../../constants';
+  import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox';
+  import LessonsSearchFilters from './../LessonResourceSelectionPage/SearchTools/LessonsSearchFilters';
+  import ResourceSelectionBreadcrumbs from './../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
+  import ContentCardList from './../LessonResourceSelectionPage/ContentCardList';
+  import BookmarkIcon from './../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon';
 
   export default {
+    // this is inaccurately named because it applies to exams also
     name: 'ResourceSelection',
+    metaInfo() {
+      return {
+        title: this.$tr('documentTitle', { lessonName: this.currentLesson.title }),
+      };
+    },
     components: {
-      LessonsSearchBox,
-      BookMarkedResource,
       ContentCardList,
+      LessonsSearchFilters,
+      LessonsSearchBox,
+      ResourceSelectionBreadcrumbs,
+      BookmarkIcon,
     },
-    inject: ['quizForge'],
+    mixins: [commonCoach, commonCoreStrings],
     setup() {
-      const {
-        sectionSettings$,
-        selectFoldersOrExercises$,
-        selectFromBookmarks$,
-      } = enhancedQuizManagementStrings;
-
-      const { channels, bookmarks } = useResources();
-
+      const { windowIsSmall } = useKResponsiveWindow();
+      const { channels, filterLessonResource } = useResources();
       return {
-        sectionSettings$,
-        selectFoldersOrExercises$,
-        selectFromBookmarks$,
+        windowIsSmall,
         channels,
-        bookmarks,
+        filterLessonResource,
       };
     },
     data() {
       return {
-        viewMoreButtonState: 'no_more_results',
-        searchTerm: '',
-        search: '',
+        // null corresponds to 'All' filter value
         filters: {
           channel: this.$route.query.channel || null,
           kind: this.$route.query.kind || null,
           role: this.$route.query.role || null,
         },
-        visibleResources: [],
+        isExiting: false,
+        moreResultsState: null,
+        resourcesChanged: false,
+        bookmarksCount: 0,
+        showChannels: true,
       };
     },
     computed: {
+      ...mapState(['pageName']),
+      ...mapState('classSummary', { classId: 'id' }),
+      ...mapState('lessonSummary', ['currentLesson', 'workingResources']),
+      ...mapState('lessonSummary/resources', [
+        'ancestorCounts',
+        'contentList',
+        'bookmarksList',
+        'searchResults',
+        'ancestors',
+      ]),
+      ...mapGetters('lessonSummary/resources', ['numRemainingSearchResults']),
+      ...mapGetters(['getUserPermissions']),
+      toolbarRoute() {
+        if (this.$route.query.last) {
+          return this.$router.getRoute(this.$route.query.last);
+        }
+        return this.$store.state.toolbarRoute;
+      },
+      bookmarksContentList() {
+        return this.bookmarksList ? this.bookmarksList : [];
+      },
+      filteredContentList() {
+        const { role } = this.filters;
+        if (!this.inSearchMode) {
+          return this.channels;
+        }
+        console.log(this.contentList);
+        const list = this.channels ? this.channels : this.bookmarksList;
+        return list.filter(contentNode => {
+          let passesFilters = true;
+          if (role === 'nonCoach') {
+            passesFilters = passesFilters && contentNode.num_coach_contents === 0;
+          }
+          if (role === 'coach') {
+            passesFilters = passesFilters && contentNode.num_coach_contents > 0;
+          }
+          return passesFilters;
+        });
+      },
+      lessonId() {
+        return this.currentLesson.id;
+      },
       inSearchMode() {
-        return this.pageName === LessonsPageNames.SELECTION_SEARCH;
+        // return this.pageName === LessonsPageNames.SELECTION_SEARCH;
+        return this.pageName === PageNames.SELECT_FROM_RESOURCE;
       },
-      inputPlaceHolderStyle() {
+      page() {
+        return this.getUserPermissions.can_manage_content
+          ? 'CoachImmersivePage'
+          : 'CoachAppBarPage';
+      },
+      searchTerm() {
+        return this.$route.params.searchTerm || '';
+      },
+      routerParams() {
         return {
-          color: this.$themeTokens.annotation,
+          classId: this.classId,
+          lessonId: this.lessonId ? this.lessonId : this.$route.params.lessonId,
         };
       },
+      debouncedSaveResources() {
+        return debounce(this.saveResources, 1000);
+      },
       selectAllIsVisible() {
         // Do not show 'Select All' if on Search Results, on Channels Page,
         // or if all contents are topics
         return (
           !this.inSearchMode &&
-          this.pageName !== LessonsPageNames.SELECTION_ROOT &&
-          !every(this.quizForge.channels.value, this.contentIsDirectoryKind)
+          this.pageName !== PageNames.SELECT_FROM_RESOURCE &&
+          !every(this.contentList, this.contentIsDirectoryKind)
         );
       },
+      viewMoreButtonState() {
+        if (this.moreResultsState === 'waiting' || this.moreResultsState === 'error') {
+          return this.moreResultsState;
+        }
+        if (!this.inSearchMode || this.numRemainingSearchResults === 0) {
+          return 'no_more_results';
+        }
+        return 'visible';
+      },
       contentIsInLesson() {
         return ({ id }) =>
           Boolean(this.workingResources.find(resource => resource.contentnode_id === id));
       },
-      selectionMetadata(/*content*/) {
-        return '';
-        // let count = 0;
-        // let total = 0;
-        // if (this.ancestorCounts[content.id]) {
-        //   count = this.ancestorCounts[content.id].count;
-        //   total = this.ancestorCounts[content.id].total;
-        // }
-        // if (count) {
-        //   return this.$tr('selectionInformation', {
-        //     count,
-        //     total,
-        //   });
-        // }
-        // return '';
-        // return function() {
-        //   console.log('Dynamic function called');
-        // };
-      },
       addableContent() {
         // Content in the topic that can be added if 'Select All' is clicked
-        const list = this.quizForge.channels.value
-          ? this.quizForge.channels.value
-          : this.bookmarksList;
+        const list = this.contentList ? this.contentList : this.bookmarksList;
         return list.filter(
           content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
         );
       },
-      to() {
-        return {
-          name: PageNames.BOOK_MARKED_RESOURCES,
-          params: {
-            classId: this.$route.params.classId,
-            section_id: this.$route.params.section_id,
-          },
-        };
+      channelsLink() {
+        return this.selectionRootLink();
+      },
+      topicTitle() {
+        if (!this.ancestors.length) {
+          return '';
+        }
+        return this.ancestors[this.ancestors.length - 1].title;
+      },
+      topicDescription() {
+        if (!this.ancestors.length) {
+          return '';
+        }
+        return this.ancestors[this.ancestors.length - 1].description;
+      },
+      exitButtonRoute() {
+        const lastId = this.$route.query.last_id;
+        if (this.inSearchMode && lastId) {
+          const queryCopy = { ...this.$route.query };
+          delete queryCopy.last_id;
+          return this.$router.getRoute(
+            PageNames.SELECT_FROM_RESOURCE,
+            { topicId: lastId },
+            queryCopy
+          );
+        } else if (this.inSearchMode) {
+          return this.selectionRootLink({ ...this.routerParams });
+        } else if (this.$route.query.last === 'ReportsLessonReportPage') {
+          // HACK to fix #7583 and #7584
+          return {
+            name: 'ReportsLessonReportPage',
+          };
+        } else if (this.$route.query.last === 'ReportsLessonLearnerListPage') {
+          // HACK to fix similar bug in Learner version of the report page
+          return {
+            name: 'ReportsLessonLearnerListPage',
+          };
+        } else {
+          return this.toolbarRoute;
+        }
       },
     },
-
     watch: {
       workingResources(newVal, oldVal) {
         this.showResourcesDifferenceMessage(newVal.length - oldVal.length);
@@ -173,65 +283,86 @@
         });
       },
     },
-    beforeRouteEnter(to, from, next) {
-      // console.log(to);
-      // console.log(from);
-      // console.log(to.params.topic_id);
-      if (to.params.topic_id) {
-        this.showChannelQuizCreationTopicPage(this.$store, to.params).then(() => {
-          next();
-        });
-      }
-    },
-    mounted() {
-      if (this.quizForge.channels.value.length > 0) {
-        this.visibleResources = this.quizForge.channels.value;
+    beforeRouteLeave(to, from, next) {
+      // Block the UI and show a notification in case last save takes too long
+      this.isExiting = true;
+
+      // If the working resources array hasn't changed at least once,
+      // just exit without autosaving
+      if (!this.resourcesChanged) {
+        next();
+        this.isExiting = false;
       } else {
-        this.visibleResources = [];
-      }
-      console.log(this.channels);
-    },
-    methods: {
-      /** @public */
-      focusFirstEl() {
-        this.$refs.textbox.focus();
-      },
+        this.resourcesChanged = true;
+        const isSamePage = samePageCheckGenerator(this.$store);
+        setTimeout(() => {
+          if (isSamePage()) {
+            this.createSnackbar(this.$tr('saveBeforeExitSnackbarText'));
+          }
+        }, 500);
 
-      contentLink(content) {
-        if (!content.is_leaf) {
-          return {
-            name: PageNames.SELECT_FROM_RESOURCE,
-            params: {
-              topic_id: content.id,
-              classId: this.$route.params.classId,
-              section_id: this.$route.params.section_id,
-            },
-          };
-        }
-      },
-      handleMoreResults() {
-        this.moreResultsState = 'waiting';
-        this.fetchAdditionalSearchResults({
-          searchTerm: this.searchTerm,
-          kind: this.filters.kind,
-          channelId: this.filters.channel,
-          currentResults: this.searchResults.results,
+        // Cancel any debounced calls
+        this.debouncedSaveResources.cancel();
+        this.saveLessonResources({
+          lessonId: this.lessonId,
+          resources: [...this.workingResources],
         })
           .then(() => {
-            this.moreResultsState = null;
-            this.moreResultsState;
+            this.clearSnackbar();
+            this.isExiting = false;
+            next();
           })
           .catch(() => {
-            this.moreResultsState = 'error';
+            this.showResourcesChangedError();
+            this.isExiting = false;
+            next(false);
           });
+      }
+    },
+    created() {
+      this.getBookmarks().then(count => {
+        this.bookmarksCount = count;
+      });
+    },
+    methods: {
+      ...mapActions(['createSnackbar', 'clearSnackbar']),
+      ...mapActions('lessonSummary', ['saveLessonResources', 'addToResourceCache']),
+      ...mapActions('lessonSummary/resources', ['fetchAdditionalSearchResults']),
+      ...mapMutations('lessonSummary', {
+        addToWorkingResources: 'ADD_TO_WORKING_RESOURCES',
+        removeFromSelectedResources: 'REMOVE_FROM_WORKING_RESOURCES',
+      }),
+      getBookmarks() {
+        return BookmarksResource.fetchCollection().then(bookmarks => {
+          return bookmarks.length;
+        });
       },
-      toggleSelected({ content, checked }) {
-        if (checked) {
-          this.addToSelectedResources(content);
+      getBookmarksLink() {
+        return {
+          name: PageNames.BOOK_MARKED_RESOURCES,
+          params: {
+            classId: this.$route.params.classId,
+            section_id: this.$route.params.section_id,
+          },
+        };
+      },
+      lessonCardClicked() {
+        this.showChannels = false;
+      },
+      showResourcesDifferenceMessage(difference) {
+        if (difference === 0) {
+          return;
+        }
+        this.resourcesChanged = true;
+        if (difference > 0) {
+          this.showSnackbarNotification('resourcesAddedWithCount', { count: difference });
         } else {
-          this.removeFromSelectedResources([content]);
+          this.showSnackbarNotification('resourcesRemovedWithCount', { count: -difference });
         }
       },
+      showResourcesChangedError() {
+        this.createSnackbar(this.coachString('saveLessonError'));
+      },
       toggleTopicInWorkingResources(isChecked) {
         if (isChecked) {
           this.addableContent.forEach(resource => {
@@ -241,55 +372,231 @@
           });
           this.addToWorkingResources(this.addableContent);
         } else {
-          this.removeFromSelectedResources(this.quizForge.channels.value);
+          this.removeFromSelectedResources(this.contentList);
         }
       },
+      addToSelectedResources(content) {
+        const list =
+          this.contentList && this.contentList.length ? this.contentList : this.bookmarksList;
+        this.addToResourceCache({
+          node: list.find(n => n.id === content.id),
+        });
+        this.addToWorkingResources([content]);
+      },
       contentIsDirectoryKind({ is_leaf }) {
         return !is_leaf;
       },
-      showChannelQuizCreationTopicPage(store, params) {
-        return store.dispatch('loading').then(() => {
-          const { topic_id } = params;
-          const topicNodePromise = ContentNodeResource.fetchModel({ id: topic_id });
-          const childNodesPromise = ContentNodeResource.fetchCollection({
-            getParams: {
-              parent: topic_id,
-              kind_in: [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE],
-              contains_quiz: true,
-            },
-          });
-          const loadRequirements = [topicNodePromise, childNodesPromise];
-
-          return Promise.all(loadRequirements).then(([, /*topicNoitde*/ childNodes]) => {
-            console.log(childNodes);
-            this.visibleResources = childNodes;
-            // return filterAndAnnotateContentList(childNodes).then(contentList => {
-            //   store.commit('SET_TOOLBAR_ROUTE', {
-            //     name: PageNames.EXAMS,
-            //   });
-
-            //   return showExamCreationPage(store, {
-            //     classId: params.classId,
-            //     contentList,
-            //     pageName: PageNames.EXAM_CREATION_SELECT_CHANNEL_QUIZ_TOPIC,
-            //     ancestors: [...topicNode.ancestors, topicNode],
-            //   });
-            // });
+      selectionRootLink() {
+        return this.$router.getRoute(PageNames.SELECTION_CONTENT_PREVIEW, {}, this.$route.query);
+      },
+      topicListingLink({ topicId }) {
+        return this.$router.getRoute(
+          PageNames.SELECT_FROM_RESOURCE,
+          { topicId },
+          this.$route.query
+        );
+      },
+      bookmarkListingLink({ topicId }) {
+        return this.$router.getRoute(
+          PageNames.SELECT_FROM_RESOURCE,
+          { topicId },
+          this.$route.query
+        );
+      },
+      bookmarkLink(content) {
+        if (this.contentIsDirectoryKind(content)) {
+          return this.bookmarkListingLink({ ...this.routerParams, topicId: content.id });
+        }
+        const { query } = this.$route;
+        return {
+          name: PageNames.SELECTION_CONTENT_PREVIEW,
+          params: {
+            ...this.routerParams,
+            contentId: content.id,
+          },
+          query: {
+            ...query,
+            ...pickBy({
+              searchTerm: this.$route.params.searchTerm,
+            }),
+          },
+        };
+      },
+      contentLink(content) {
+        if (this.contentIsDirectoryKind(content)) {
+          return this.topicListingLink({ ...this.routerParams, topicId: content.id });
+        }
+        const { query } = this.$route;
+        return {
+          name: PageNames.SELECTION_CONTENT_PREVIEW,
+          params: {
+            ...this.routerParams,
+            contentId: content.id,
+          },
+          query: {
+            ...query,
+            ...pickBy({
+              searchTerm: this.$route.params.searchTerm,
+            }),
+          },
+        };
+      },
+      saveResources() {
+        return this.saveLessonResources({
+          lessonId: this.lessonId,
+          resources: this.workingResources,
+        });
+      },
+      selectionMetadata(content) {
+        let count = 0;
+        let total = 0;
+        if (this.ancestorCounts[content.id]) {
+          count = this.ancestorCounts[content.id].count;
+          total = this.ancestorCounts[content.id].total;
+        }
+        if (count) {
+          return this.$tr('selectionInformation', {
+            count,
+            total,
           });
+        }
+        return '';
+      },
+      toggleSelected({ content, checked }) {
+        if (checked) {
+          this.addToSelectedResources(content);
+        } else {
+          this.removeFromSelectedResources([content]);
+        }
+      },
+      handleSearchTerm(searchTerm) {
+        const query = {
+          last_id: this.$route.query.last_id || this.$route.params.topicId,
+        };
+        const lastPage = this.$route.query.last;
+        if (lastPage) {
+          query.last = lastPage;
+        }
+        this.$router.push({
+          name: PageNames.SELECTION_SEARCH,
+          params: {
+            searchTerm,
+          },
+          query,
         });
       },
+      handleMoreResults() {
+        this.moreResultsState = 'waiting';
+        this.fetchAdditionalSearchResults({
+          searchTerm: this.searchTerm,
+          kind: this.filters.kind,
+          channelId: this.filters.channel,
+          currentResults: this.searchResults.results,
+        })
+          .then(() => {
+            this.moreResultsState = null;
+          })
+          .catch(() => {
+            this.moreResultsState = 'error';
+          });
+      },
+      topicsLink(topicId) {
+        return this.topicListingLink({ ...this.$route.params, topicId });
+      },
+    },
+    $trs: {
+      resources: {
+        message: '{count} {count, plural, one {resource} other {resources}}',
+        context: "Only translate 'resource' and 'resources'.",
+      },
+      selectionInformation: {
+        message:
+          '{count, number, integer} of {total, number, integer} {total, plural, one {resource selected} other {resources selected}}',
+
+        context:
+          "Indicates the amount of resources selected for a lesson in the 'Manage lesson resources' section.\n\nFor example: '7 of 10 resources selected'.",
+      },
+      totalResourcesSelected: {
+        message:
+          '{total, number, integer} {total, plural, one {resource} other {resources}} in this lesson',
+        context:
+          "Indicates the amount of resources for a lesson in the 'Manage lesson resources' section. For example:\n\n'8 resources in this lesson'",
+      },
+      documentTitle: {
+        message: `Manage resources in '{lessonName}'`,
+        context:
+          "Title of window that displays when the user clicks on the 'manage resources' button within an individual lesson.\n\nOn this page the user can add new learning resources to the lesson.",
+      },
+      saveBeforeExitSnackbarText: {
+        message: 'Saving your changes…',
+        context: 'Notification that changes are being saved.',
+      },
+      // only shown on search page
+      exitSearchButtonLabel: {
+        message: 'Exit search',
+        context: "Button to exit the search function of the 'Manage lesson resources' window.",
+      },
+      manageResourcesAction: {
+        message: 'Manage lesson resources',
+        context:
+          "In the 'Manage lesson resources' coaches can add new resource material to a lesson.",
+      },
     },
   };
 
 </script>
 
 
-<style scoped>
-.select-resource{
-  margin-top: -4em;
-}
-.title-style{
-  font-weight:600;
-  font-size: 1.4em;
-}
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .search-filters {
+    margin-top: 24px;
+  }
+
+  .bookmark-container {
+    display: flex;
+    min-height: 141px;
+    margin-bottom: 24px;
+    border-radius: 2px;
+    box-shadow: 0 1px 5px 0 #a1a1a1, 0 2px 2px 0 #e6e6e6, 0 3px 1px -2px #ffffff;
+    transition: box-shadow 0.25s ease;
+  }
+
+  .mobile-bookmark-container {
+    @extend %dropshadow-2dp;
+
+    display: flex;
+    max-width: 100%;
+    min-height: 141px;
+    margin: auto;
+    margin-bottom: 24px;
+    border-radius: 2px;
+
+    .ease:hover {
+      @extend %dropshadow-8dp;
+      @extend %md-decelerate-func;
+
+      transition: all $core-time;
+    }
+  }
+
+  .mobile-bookmark-icon {
+    left: 24px !important;
+  }
+
+  .mobile-text {
+    margin-top: 20px;
+    margin-left: 60px;
+  }
+
+  .bookmark-container:hover {
+    box-shadow: 0 5px 5px -3px #a1a1a1, 0 8px 10px 1px #d1d1d1, 0 3px 14px 2px #d4d4d4;
+  }
+
+  .text {
+    margin-left: 15rem;
+  }
+
 </style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 724128cf60..c4c27aebc8 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -31,7 +31,6 @@
     [PageNames.QUIZ_REPLACE_QUESTIONS]: ReplaceQuestions,
     [PageNames.QUIZ_SELECT_RESOURCES]: ResourceSelection,
     [PageNames.BOOK_MARKED_RESOURCES]: ShowBookMarkedResources,
-    [PageNames.SELECT_FROM_RESOURCE]: SelectedChannel,
   };
 
   export default {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index 13ada04040..8937142296 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -114,8 +114,7 @@
     },
     mounted() {
       this.$store.dispatch('notLoading');
-    },
-    mounted() {
+
       ChannelResource.fetchCollection({
         getParams: { available: true, has_exercise: true },
       }).then(channels => {

From 81300e4b1adcb582f64aabff2b27ca408b3dec08 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Tue, 28 Nov 2023 08:19:26 +0300
Subject: [PATCH 43/50] add bookmarked resources

---
 .../plan/CreateExamPage/ResourceSelection.vue | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index dd9a4b6887..18ecfb43d2 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -1,5 +1,4 @@
 <template>
-
   <div v-if="!showChannels">
     <ContentCardList
       :contentList="bookmarksContentList"
@@ -34,7 +33,18 @@
         </div>
       </KRouterLink>
     </div>
-    <LessonsSearchBox @searchterm="handleSearchTerm" />
+    <!-- <KGrid> -->
+      <!-- <KGridItem :layout12="{ span: 6 }"> -->
+        <LessonsSearchBox @searchterm="handleSearchTerm" />
+      <!-- </KGridItem> -->
+
+      <!-- <KGridItem :layout12="{ span: 6, alignment: 'right' }">
+        <p>
+          {{ $tr('totalResourcesSelected', { total: workingResources.length }) }}
+        </p>
+      </KGridItem> -->
+    <!-- </KGrid> -->
+
     <LessonsSearchFilters
       v-if="inSearchMode"
       v-model="filters"
@@ -43,8 +53,6 @@
       :searchResults="searchResults"
     />
 
-    {{ contentList }}
-
     <ResourceSelectionBreadcrumbs
       v-if="!inSearchMode"
       :ancestors="ancestors"
@@ -115,7 +123,7 @@
       return {
         windowIsSmall,
         channels,
-        filterLessonResource,
+        filterLessonResource
       };
     },
     data() {
@@ -178,7 +186,7 @@
       },
       inSearchMode() {
         // return this.pageName === LessonsPageNames.SELECTION_SEARCH;
-        return this.pageName === PageNames.SELECT_FROM_RESOURCE;
+        return this.pageNames === PageNames.SELECT_FROM_RESOURCE;
       },
       page() {
         return this.getUserPermissions.can_manage_content
@@ -246,11 +254,7 @@
         if (this.inSearchMode && lastId) {
           const queryCopy = { ...this.$route.query };
           delete queryCopy.last_id;
-          return this.$router.getRoute(
-            PageNames.SELECT_FROM_RESOURCE,
-            { topicId: lastId },
-            queryCopy
-          );
+          return this.$router.getRoute(PageNames.SELECT_FROM_RESOURCE, { topicId: lastId }, queryCopy);
         } else if (this.inSearchMode) {
           return this.selectionRootLink({ ...this.routerParams });
         } else if (this.$route.query.last === 'ReportsLessonReportPage') {
@@ -323,6 +327,7 @@
       this.getBookmarks().then(count => {
         this.bookmarksCount = count;
       });
+      console.log(this.filterLessonResource(this.$route.params.lessonId))
     },
     methods: {
       ...mapActions(['createSnackbar', 'clearSnackbar']),
@@ -340,10 +345,10 @@
       getBookmarksLink() {
         return {
           name: PageNames.BOOK_MARKED_RESOURCES,
-          params: {
-            classId: this.$route.params.classId,
-            section_id: this.$route.params.section_id,
-          },
+          params:{
+              classId: this.$route.params.classId,
+              section_id: this.$route.params.section_id,
+          }
         };
       },
       lessonCardClicked() {
@@ -390,11 +395,7 @@
         return this.$router.getRoute(PageNames.SELECTION_CONTENT_PREVIEW, {}, this.$route.query);
       },
       topicListingLink({ topicId }) {
-        return this.$router.getRoute(
-          PageNames.SELECT_FROM_RESOURCE,
-          { topicId },
-          this.$route.query
-        );
+        return this.$router.getRoute(PageNames.SELECT_FROM_RESOURCE, { topicId }, this.$route.query);
       },
       bookmarkListingLink({ topicId }) {
         return this.$router.getRoute(

From 3fc3ba5214c2174b7672b5c67c45a1c021684d2e Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Tue, 28 Nov 2023 20:04:34 +0300
Subject: [PATCH 44/50] can navigate to the first level of the topic tree

---
 .../assets/src/composables/useResources.js    |  76 +-
 .../coach/assets/src/routes/planExamRoutes.js |   5 +-
 .../plan/CreateExamPage/ResourceSelection.vue | 714 +++++++-----------
 .../plan/CreateExamPage/SectionSidePanel.vue  |   1 +
 .../plan/CreateExamPage/SelectedChannel.vue   |  21 +-
 5 files changed, 346 insertions(+), 471 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useResources.js b/kolibri/plugins/coach/assets/src/composables/useResources.js
index aed6a874d0..0274bc89a1 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResources.js
+++ b/kolibri/plugins/coach/assets/src/composables/useResources.js
@@ -11,9 +11,13 @@ export function useResources() {
   const resources = ref(null);
   const channels = ref([]);
   const bookmarks = ref([]);
-  const contentList = ref([]);
+  const channelTopics = ref([]);
+  const contentList = ref([]);  
+
+
 
   function fetchChannelResource() {
+
     ChannelResource.fetchCollection({ params: { has_exercises: true, available: true } }).then(
       response => {
         // channels.value = response;
@@ -45,7 +49,8 @@ export function useResources() {
         resolve([]);
         return;
       }
-      const topicsNumAssessmentDescendantsPromise = ContentNodeResource.fetchDescendantsAssessments(
+      const topicsNumAssessmentDescendantsPromise
+      = ContentNodeResource.fetchDescendantsAssessments(
         topicIds
       );
 
@@ -68,7 +73,9 @@ export function useResources() {
           }
         ).then(response => {
           response.data.forEach(exercise => {
-            const topic = topicsWithExerciseDescendants.find(t => t.id === exercise.ancestor_id);
+            channelTopics.value.push(exercise);
+            const topic = topicsWithExerciseDescendants.find(t =>
+            t.id === exercise.ancestor_id);
             topic.exercises.push(exercise);
           });
           resolve(topicsWithExerciseDescendants);
@@ -79,54 +86,48 @@ export function useResources() {
 
   function filterAndAnnotateContentList(childNodes) {
     return new Promise(resolve => {
-      if (childNodes) {
+      if(childNodes){
         const childTopics = childNodes.filter(({ kind }) => kind === ContentNodeKinds.TOPIC);
         const topicIds = childTopics.map(({ id }) => id);
         const topicsThatHaveExerciseDescendants = _getTopicsWithExerciseDescendants(topicIds);
-        topicsThatHaveExerciseDescendants.then(topics => {
-          const childNodesWithExerciseDescendants = childNodes
-            .map(childNode => {
-              const index = topics.findIndex(topic => topic.id === childNode.id);
-              if (index !== -1) {
-                return { ...childNode, ...topics[index] };
-              }
-              return childNode;
-            })
-            .filter(childNode => {
-              if (
-                childNode.kind === ContentNodeKinds.TOPIC &&
-                (childNode.numAssessments || 0) < 1
-              ) {
+          topicsThatHaveExerciseDescendants.then(topics => {
+            const childNodesWithExerciseDescendants = childNodes
+              .map(childNode => {
+                const index = topics.findIndex(topic => topic.id === childNode.id);
+                if (index !== -1) {
+                  return { ...childNode, ...topics[index] };
+                }
+                return childNode;
+              }).filter(childNode => {
+              if (childNode.kind === ContentNodeKinds.TOPIC &&
+              (childNode.numAssessments || 0) < 1) {
                 return false;
               }
-              return true;
-            });
-          const contentList = childNodesWithExerciseDescendants.map(node => ({
-            ...node,
-            thumbnail: getContentNodeThumbnail(node),
-          }));
-          resolve(contentList);
-        });
+                return true;
+              });
+              const contentList = childNodesWithExerciseDescendants.map(node => ({
+                ...node,
+                thumbnail: getContentNodeThumbnail(node),
+              }));
+            resolve(contentList);
+          });
       }
     });
   }
 
-  function filterLessonResource(lessonId) {
-    store
-      .dispatch('lessonSummary/saveLessonResources', {
-        lessonId: lessonId,
-        resources: store.state.lessonSummary.workingResources,
-      })
-      .then(content => {
-        console.log(content);
-      });
+  function filterLessonResource(lessonId){
+    store.dispatch('lessonSummary/saveLessonResources', {
+      lessonId: lessonId,
+      resources: store.state.lessonSummary.workingResources,
+    }).then((content) => {
+      console.log(content);
+    });
   }
 
   onMounted(() => {
     fetchChannelResource();
     fetchBookMarkedResource();
     filterAndAnnotateContentList();
-    filterLessonResource();
   });
 
   return {
@@ -134,6 +135,7 @@ export function useResources() {
     channels,
     bookmarks,
     contentList,
-    filterLessonResource,
+    channelTopics,
+    _getTopicsWithExerciseDescendants
   };
 }
diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index bca0810263..8953b1304c 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -61,10 +61,7 @@ export default [
         name: PageNames.BOOK_MARKED_RESOURCES,
         path: ':section_id/book-marked-resources',
         children: [
-          {
-            name: PageNames.SELECT_FROM_RESOURCE,
-            path: ':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
index 18ecfb43d2..e4748a6a6e 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -1,82 +1,92 @@
 <template>
-  <div v-if="!showChannels">
-    <ContentCardList
-      :contentList="bookmarksContentList"
-      :showSelectAll="selectAllIsVisible"
-      :selectAllChecked="addableContent.length === 0"
-      :contentCardLink="bookmarkLink"
-      :contentIsChecked="contentIsInLesson"
-      :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
-      :viewMoreButtonState="viewMoreButtonState"
-      :contentCardMessage="selectionMetadata"
-      @changeselectall="toggleTopicInWorkingResources"
-      @change_content_card="toggleSelected"
-      @moreresults="handleMoreResults"
-    />
-  </div>
-  <div v-else>
-    <div @click="lessonCardClicked">
-      <KRouterLink
-        v-if="bookmarksCount"
-        :appearanceOverrides="{
-          width: '100%',
-          textDecoration: 'none',
-          color: $themeTokens.text }"
-        :to="getBookmarksLink()"
-      >
-        <div :class="windowIsSmall ? 'mobile-bookmark-container' : 'bookmark-container'">
-          <BookmarkIcon :class="windowIsSmall ? 'mobile-bookmark-icon' : ''" />
-          <div :class="windowIsSmall ? 'mobile-text' : 'text'">
-            <h3>{{ coreString('bookmarksLabel') }}</h3>
-            <p>{{ $tr('resources', { count: bookmarksCount }) }}</p>
-          </div>
-        </div>
-      </KRouterLink>
-    </div>
-    <!-- <KGrid> -->
-      <!-- <KGridItem :layout12="{ span: 6 }"> -->
-        <LessonsSearchBox @searchterm="handleSearchTerm" />
-      <!-- </KGridItem> -->
 
-      <!-- <KGridItem :layout12="{ span: 6, alignment: 'right' }">
-        <p>
-          {{ $tr('totalResourcesSelected', { total: workingResources.length }) }}
-        </p>
-      </KGridItem> -->
-    <!-- </KGrid> -->
+  <div class="select-resource">
+    <h5
+      class="title-style"
+    >
+      <KIcon
+        icon="back"
+      />
+      Select folders or exercises from these channels
+    </h5>
+    <p>Select from bookmarks</p>
+
+    <div v-if="!showChannels">
+      <ContentCardList
+        :contentList="bookmarksContentList"
+        :showSelectAll="selectAllIsVisible"
+        :selectAllChecked="addableContent.length === 0"
+        :contentCardLink="bookmarkLink"
+        :contentIsChecked="contentIsInLesson"
+        :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
+        :viewMoreButtonState="viewMoreButtonState"
+        :contentCardMessage="selectionMetadata"
+        @changeselectall="toggleTopicInWorkingResources"
+        @change_content_card="toggleSelected"
+        @moreresults="handleMoreResults"
+      />
+    </div>
+    <div v-else>
+      <div @click="lessonCardClicked">
+        <KRouterLink
+          v-if="bookmarksCount"
+          :appearanceOverrides="{
+            width: '100%',
+            textDecoration: 'none',
+            color: $themeTokens.text }"
+          :to="getBookmarksLink()"
+        >
+          <div :class="windowIsSmall ? 'mobile-bookmark-container' : 'bookmark-container'">
+            <BookmarkIcon :class="windowIsSmall ? 'mobile-bookmark-icon' : ''" />
+            <div :class="windowIsSmall ? 'mobile-text' : 'text'">
+              <h3>{{ coreString('bookmarksLabel') }}</h3>
+              <p>{{ numberOfSelectedBookmarks$({ count: bookmarksCount }) }}</p>
+            </div>
+          </div>
+        </KRouterLink>
+      </div>
+      <KGrid>
+        <KGridItem :layout12="{ span: 6 }">
+          <LessonsSearchBox @searchterm="handleSearchTerm" />
+        </KGridItem>
 
-    <LessonsSearchFilters
-      v-if="inSearchMode"
-      v-model="filters"
-      class="search-filters"
-      :searchTerm="searchTerm"
-      :searchResults="searchResults"
-    />
+        <!-- <KGridItem :layout12="{ span: 6, alignment: 'right' }">
+          <p>
+            {{ $tr('totalResourcesSelected', { total: workingResources.length }) }}
+          </p>
+        </KGridItem> -->
+      </KGrid>
 
-    <ResourceSelectionBreadcrumbs
-      v-if="!inSearchMode"
-      :ancestors="ancestors"
-      :channelsLink="channelsLink"
-      :topicsLink="topicsLink"
-    />
+      <LessonsSearchFilters
+        v-if="inSearchMode"
+        v-model="filters"
+        class="search-filters"
+        :searchTerm="searchTerm"
+        :searchResults="searchResults"
+      />
 
-    <h2>{{ topicTitle }}</h2>
-    <p>{{ topicDescription }}</p>
+      <!-- <ResourceSelectionBreadcrumbs
+        v-if="!inSearchMode"
+        :ancestors="ancestors"
+        :channelsLink="channelsLink"
+        :topicsLink="topicsLink"
+      /> -->
 
-    <ContentCardList
-      v-if="!isExiting"
-      :contentList="filteredContentList"
-      :showSelectAll="selectAllIsVisible"
-      :viewMoreButtonState="viewMoreButtonState"
-      :selectAllChecked="addableContent.length === 0"
-      :contentIsChecked="contentIsInLesson"
-      :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
-      :contentCardMessage="selectionMetadata"
-      :contentCardLink="contentLink"
-      @changeselectall="toggleTopicInWorkingResources"
-      @change_content_card="toggleSelected"
-      @moreresults="handleMoreResults"
-    />
+      <ContentCardList
+        v-if="!isExiting"
+        :contentList="filteredContentList"
+        :showSelectAll="selectAllIsVisible"
+        :viewMoreButtonState="viewMoreButtonState"
+        :selectAllChecked="addableContent.length === 0"
+        :contentIsChecked="contentIsInLesson"
+        :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
+        :contentCardMessage="selectionMetadata"
+        :contentCardLink="contentLink"
+        @changeselectall="toggleTopicInWorkingResources"
+        @change_content_card="toggleSelected"
+        @moreresults="handleMoreResults"
+      />
+    </div>
   </div>
 
 </template>
@@ -84,92 +94,80 @@
 
 <script>
 
-  import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
-  import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
-  import { BookmarksResource } from 'kolibri.resources';
-  import debounce from 'lodash/debounce';
+  import { ContentNodeKinds , ContentNodeResource} from 'kolibri.coreVue.vuex.constants';
+  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import every from 'lodash/every';
-  import pickBy from 'lodash/pickBy';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import pickBy from 'lodash/pickBy';
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
-  import { useResources } from '../../../composables/useResources';
-  import commonCoach from '../../common';
+  import { LessonsPageNames } from '../../../constants/lessonsConstants';
   import { PageNames } from '../../../constants';
-  import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox';
+  import BookmarkIcon from '../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue'
+  import { useResources } from './../../../composables/useResources';
+  import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
+  import BookMarkedResource from './BookMarkedResource.vue';
+  import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
+  // import LessonContentCard from './../LessonResourceSelectionPage/LessonContentCard/index.vue';
   import LessonsSearchFilters from './../LessonResourceSelectionPage/SearchTools/LessonsSearchFilters';
-  import ResourceSelectionBreadcrumbs from './../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
-  import ContentCardList from './../LessonResourceSelectionPage/ContentCardList';
-  import BookmarkIcon from './../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon';
+  import  ResourceSelectionBreadcrumbs from './../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
 
   export default {
-    // this is inaccurately named because it applies to exams also
     name: 'ResourceSelection',
-    metaInfo() {
-      return {
-        title: this.$tr('documentTitle', { lessonName: this.currentLesson.title }),
-      };
-    },
     components: {
-      ContentCardList,
-      LessonsSearchFilters,
       LessonsSearchBox,
-      ResourceSelectionBreadcrumbs,
+      BookMarkedResource,
+      ContentCardList,
       BookmarkIcon,
+      // ResourceSelection,
+      ResourceSelectionBreadcrumbs,
+      // LessonContentCard,
+      LessonsSearchFilters
+      
     },
-    mixins: [commonCoach, commonCoreStrings],
+    inject: ['quizForge'],
+    mixins:[commonCoreStrings],
     setup() {
+      const { 
+        sectionSettings$,
+        numberOfSelectedBookmarks$ 
+      } = enhancedQuizManagementStrings;
+      const { bookmarks } = useResources();
       const { windowIsSmall } = useKResponsiveWindow();
-      const { channels, filterLessonResource } = useResources();
+
       return {
+        sectionSettings$,
+        numberOfSelectedBookmarks$,
         windowIsSmall,
-        channels,
-        filterLessonResource
+        bookmarks
       };
     },
     data() {
       return {
-        // null corresponds to 'All' filter value
+        viewMoreButtonState: 'no_more_results',
+        // contentHasCheckbox: () => false,
+        // contentIsSelected: () => '',
+        searchTerm: '',
+        search: '',
+        isExiting: false,
         filters: {
           channel: this.$route.query.channel || null,
           kind: this.$route.query.kind || null,
           role: this.$route.query.role || null,
         },
-        isExiting: false,
-        moreResultsState: null,
-        resourcesChanged: false,
-        bookmarksCount: 0,
-        showChannels: true,
+        visibleResources:[],
+        showChannels:true,
+
       };
     },
     computed: {
-      ...mapState(['pageName']),
-      ...mapState('classSummary', { classId: 'id' }),
-      ...mapState('lessonSummary', ['currentLesson', 'workingResources']),
-      ...mapState('lessonSummary/resources', [
-        'ancestorCounts',
-        'contentList',
-        'bookmarksList',
-        'searchResults',
-        'ancestors',
-      ]),
-      ...mapGetters('lessonSummary/resources', ['numRemainingSearchResults']),
-      ...mapGetters(['getUserPermissions']),
-      toolbarRoute() {
-        if (this.$route.query.last) {
-          return this.$router.getRoute(this.$route.query.last);
-        }
-        return this.$store.state.toolbarRoute;
-      },
-      bookmarksContentList() {
-        return this.bookmarksList ? this.bookmarksList : [];
-      },
       filteredContentList() {
         const { role } = this.filters;
         if (!this.inSearchMode) {
-          return this.channels;
+          return this.quizForge.channels.value;
         }
-        console.log(this.contentList);
-        const list = this.channels ? this.channels : this.bookmarksList;
+        const list = this.quizForge.channels.value
+          ? this.quizForge.channels.value
+          : this.bookmarksList;
         return list.filter(contentNode => {
           let passesFilters = true;
           if (role === 'nonCoach') {
@@ -181,97 +179,57 @@
           return passesFilters;
         });
       },
-      lessonId() {
-        return this.currentLesson.id;
-      },
       inSearchMode() {
-        // return this.pageName === LessonsPageNames.SELECTION_SEARCH;
-        return this.pageNames === PageNames.SELECT_FROM_RESOURCE;
-      },
-      page() {
-        return this.getUserPermissions.can_manage_content
-          ? 'CoachImmersivePage'
-          : 'CoachAppBarPage';
+        return this.pageName === LessonsPageNames.SELECTION_SEARCH;
       },
-      searchTerm() {
-        return this.$route.params.searchTerm || '';
-      },
-      routerParams() {
+      inputPlaceHolderStyle() {
         return {
-          classId: this.classId,
-          lessonId: this.lessonId ? this.lessonId : this.$route.params.lessonId,
+          color: this.$themeTokens.annotation,
         };
       },
-      debouncedSaveResources() {
-        return debounce(this.saveResources, 1000);
-      },
       selectAllIsVisible() {
         // Do not show 'Select All' if on Search Results, on Channels Page,
         // or if all contents are topics
         return (
           !this.inSearchMode &&
-          this.pageName !== PageNames.SELECT_FROM_RESOURCE &&
-          !every(this.contentList, this.contentIsDirectoryKind)
+          this.pageName !== LessonsPageNames.SELECTION_ROOT &&
+          !every(this.quizForge.channels.value, this.contentIsDirectoryKind)
         );
       },
-      viewMoreButtonState() {
-        if (this.moreResultsState === 'waiting' || this.moreResultsState === 'error') {
-          return this.moreResultsState;
-        }
-        if (!this.inSearchMode || this.numRemainingSearchResults === 0) {
-          return 'no_more_results';
-        }
-        return 'visible';
-      },
       contentIsInLesson() {
         return ({ id }) =>
           Boolean(this.workingResources.find(resource => resource.contentnode_id === id));
       },
+      selectionMetadata(/*content*/) {
+        return function(){};
+        // let count = 0;
+        // let total = 0;
+        // if (this.ancestorCounts[content.id]) {
+        //   count = this.ancestorCounts[content.id].count;
+        //   total = this.ancestorCounts[content.id].total;
+        // }
+        // if (count) {
+        //   return this.$tr('selectionInformation', {
+        //     count,
+        //     total,
+        //   });
+        // }
+        // return '';
+        // return function() {
+        //   console.log('Dynamic function called');
+        // };
+      },
       addableContent() {
         // Content in the topic that can be added if 'Select All' is clicked
-        const list = this.contentList ? this.contentList : this.bookmarksList;
+        const list = this.quizForge.channels.value
+          ? this.quizForge.channels.value
+          : this.bookmarksList;
         return list.filter(
           content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
         );
       },
-      channelsLink() {
-        return this.selectionRootLink();
-      },
-      topicTitle() {
-        if (!this.ancestors.length) {
-          return '';
-        }
-        return this.ancestors[this.ancestors.length - 1].title;
-      },
-      topicDescription() {
-        if (!this.ancestors.length) {
-          return '';
-        }
-        return this.ancestors[this.ancestors.length - 1].description;
-      },
-      exitButtonRoute() {
-        const lastId = this.$route.query.last_id;
-        if (this.inSearchMode && lastId) {
-          const queryCopy = { ...this.$route.query };
-          delete queryCopy.last_id;
-          return this.$router.getRoute(PageNames.SELECT_FROM_RESOURCE, { topicId: lastId }, queryCopy);
-        } else if (this.inSearchMode) {
-          return this.selectionRootLink({ ...this.routerParams });
-        } else if (this.$route.query.last === 'ReportsLessonReportPage') {
-          // HACK to fix #7583 and #7584
-          return {
-            name: 'ReportsLessonReportPage',
-          };
-        } else if (this.$route.query.last === 'ReportsLessonLearnerListPage') {
-          // HACK to fix similar bug in Learner version of the report page
-          return {
-            name: 'ReportsLessonLearnerListPage',
-          };
-        } else {
-          return this.toolbarRoute;
-        }
-      },
-    },
+    }, 
+
     watch: {
       workingResources(newVal, oldVal) {
         this.showResourcesDifferenceMessage(newVal.length - oldVal.length);
@@ -287,6 +245,16 @@
         });
       },
     },
+    beforeRouteEnter (to, from, next) {
+      console.log(to);
+      console.log(from);
+      console.log(to.params.topic_id);
+      if(to.params.topic_id){
+        this.showChannelQuizCreationTopicPage(this.$store,to.params).then(() => {
+          next();
+        });
+      }
+    },
     beforeRouteLeave(to, from, next) {
       // Block the UI and show a notification in case last save takes too long
       this.isExiting = true;
@@ -298,12 +266,12 @@
         this.isExiting = false;
       } else {
         this.resourcesChanged = true;
-        const isSamePage = samePageCheckGenerator(this.$store);
-        setTimeout(() => {
-          if (isSamePage()) {
-            this.createSnackbar(this.$tr('saveBeforeExitSnackbarText'));
-          }
-        }, 500);
+        // const isSamePage = samePageCheckGenerator(this.$store);
+        // setTimeout(() => {
+        //   if (isSamePage()) {
+        //     this.createSnackbar(this.$tr('saveBeforeExitSnackbarText'));
+        //   }
+        // }, 500);
 
         // Cancel any debounced calls
         this.debouncedSaveResources.cancel();
@@ -324,150 +292,51 @@
       }
     },
     created() {
-      this.getBookmarks().then(count => {
-        this.bookmarksCount = count;
-      });
-      console.log(this.filterLessonResource(this.$route.params.lessonId))
+      console.log(this.quizForge.channels.value);
+      this.bookmarksCount = this.getBookmarks();
+      
+
+    },
+    mounted() {
+      if(this.quizForge.channels.value.length > 0){
+        this.visibleResources = this.quizForge.channels.value;
+      }else{
+        this.visibleResources =[];
+      }
+      
     },
     methods: {
-      ...mapActions(['createSnackbar', 'clearSnackbar']),
-      ...mapActions('lessonSummary', ['saveLessonResources', 'addToResourceCache']),
-      ...mapActions('lessonSummary/resources', ['fetchAdditionalSearchResults']),
-      ...mapMutations('lessonSummary', {
-        addToWorkingResources: 'ADD_TO_WORKING_RESOURCES',
-        removeFromSelectedResources: 'REMOVE_FROM_WORKING_RESOURCES',
-      }),
+      /** @public */
+      focusFirstEl() {
+        this.$refs.textbox.focus();
+      },
+      // selectionMetadata(content) {
+      //   if (content.kind === ContentNodeKinds.TOPIC) {
+      //     const count = content.exercises.filter(exercise =>
+      //       Boolean(this.selectedExercises[exercise.id])
+      //     ).length;
+      //     if (count === 0) {
+      //       return '';
+      //     }
+      //     const total = content.exercises.length;
+      //     return this.$tr('total_number', { count, total });
+      //   }
+      //   return '';
+      // },
       getBookmarks() {
-        return BookmarksResource.fetchCollection().then(bookmarks => {
-          return bookmarks.length;
-        });
-      },
-      getBookmarksLink() {
-        return {
-          name: PageNames.BOOK_MARKED_RESOURCES,
-          params:{
-              classId: this.$route.params.classId,
-              section_id: this.$route.params.section_id,
-          }
-        };
+          return this.bookmarks.length;
       },
       lessonCardClicked() {
         this.showChannels = false;
       },
-      showResourcesDifferenceMessage(difference) {
-        if (difference === 0) {
-          return;
-        }
-        this.resourcesChanged = true;
-        if (difference > 0) {
-          this.showSnackbarNotification('resourcesAddedWithCount', { count: difference });
-        } else {
-          this.showSnackbarNotification('resourcesRemovedWithCount', { count: -difference });
-        }
-      },
-      showResourcesChangedError() {
-        this.createSnackbar(this.coachString('saveLessonError'));
-      },
-      toggleTopicInWorkingResources(isChecked) {
-        if (isChecked) {
-          this.addableContent.forEach(resource => {
-            this.addToResourceCache({
-              node: { ...resource },
-            });
-          });
-          this.addToWorkingResources(this.addableContent);
-        } else {
-          this.removeFromSelectedResources(this.contentList);
-        }
-      },
-      addToSelectedResources(content) {
-        const list =
-          this.contentList && this.contentList.length ? this.contentList : this.bookmarksList;
-        this.addToResourceCache({
-          node: list.find(n => n.id === content.id),
-        });
-        this.addToWorkingResources([content]);
-      },
-      contentIsDirectoryKind({ is_leaf }) {
-        return !is_leaf;
-      },
-      selectionRootLink() {
-        return this.$router.getRoute(PageNames.SELECTION_CONTENT_PREVIEW, {}, this.$route.query);
-      },
-      topicListingLink({ topicId }) {
-        return this.$router.getRoute(PageNames.SELECT_FROM_RESOURCE, { topicId }, this.$route.query);
-      },
-      bookmarkListingLink({ topicId }) {
-        return this.$router.getRoute(
-          PageNames.SELECT_FROM_RESOURCE,
-          { topicId },
-          this.$route.query
-        );
-      },
-      bookmarkLink(content) {
-        if (this.contentIsDirectoryKind(content)) {
-          return this.bookmarkListingLink({ ...this.routerParams, topicId: content.id });
-        }
-        const { query } = this.$route;
-        return {
-          name: PageNames.SELECTION_CONTENT_PREVIEW,
-          params: {
-            ...this.routerParams,
-            contentId: content.id,
-          },
-          query: {
-            ...query,
-            ...pickBy({
-              searchTerm: this.$route.params.searchTerm,
-            }),
-          },
-        };
-      },
       contentLink(content) {
-        if (this.contentIsDirectoryKind(content)) {
-          return this.topicListingLink({ ...this.routerParams, topicId: content.id });
-        }
-        const { query } = this.$route;
-        return {
-          name: PageNames.SELECTION_CONTENT_PREVIEW,
-          params: {
-            ...this.routerParams,
-            contentId: content.id,
-          },
-          query: {
-            ...query,
-            ...pickBy({
-              searchTerm: this.$route.params.searchTerm,
-            }),
-          },
-        };
-      },
-      saveResources() {
-        return this.saveLessonResources({
-          lessonId: this.lessonId,
-          resources: this.workingResources,
-        });
-      },
-      selectionMetadata(content) {
-        let count = 0;
-        let total = 0;
-        if (this.ancestorCounts[content.id]) {
-          count = this.ancestorCounts[content.id].count;
-          total = this.ancestorCounts[content.id].total;
-        }
-        if (count) {
-          return this.$tr('selectionInformation', {
-            count,
-            total,
-          });
-        }
-        return '';
-      },
-      toggleSelected({ content, checked }) {
-        if (checked) {
-          this.addToSelectedResources(content);
-        } else {
-          this.removeFromSelectedResources([content]);
+        if (!content.is_leaf) {
+          return {
+            name: PageNames.SELECT_FROM_RESOURCE,
+            params: {
+              topic_id: content.id,
+            },
+          };
         }
       },
       handleSearchTerm(searchTerm) {
@@ -479,7 +348,7 @@
           query.last = lastPage;
         }
         this.$router.push({
-          name: PageNames.SELECTION_SEARCH,
+          name: LessonsPageNames.SELECTION_SEARCH,
           params: {
             searchTerm,
           },
@@ -496,51 +365,86 @@
         })
           .then(() => {
             this.moreResultsState = null;
+            this.moreResultsState;
           })
           .catch(() => {
             this.moreResultsState = 'error';
           });
       },
-      topicsLink(topicId) {
-        return this.topicListingLink({ ...this.$route.params, topicId });
+      toggleSelected({ content, checked }) {
+        if (checked) {
+          this.addToSelectedResources(content);
+        } else {
+          this.removeFromSelectedResources([content]);
+        }
       },
+      toggleTopicInWorkingResources(isChecked) {
+        if (isChecked) {
+          this.addableContent.forEach(resource => {
+            this.addToResourceCache({
+              node: { ...resource },
+            });
+          });
+          this.addToWorkingResources(this.addableContent);
+        } else {
+          this.removeFromSelectedResources(this.quizForge.channels.value);
+        }
+      },
+      contentIsDirectoryKind({ is_leaf }) {
+        return !is_leaf;
+      },
+    showChannelQuizCreationTopicPage(store, params) {
+      return store.dispatch('loading').then(() => {
+        const { topic_id } = params;
+        const topicNodePromise = ContentNodeResource.fetchModel({ id: topic_id });
+        const childNodesPromise = ContentNodeResource.fetchCollection({
+          getParams: {
+            parent: topic_id,
+            kind_in: [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE],
+            contains_quiz: true,
+          },
+        });
+        const loadRequirements = [topicNodePromise, childNodesPromise];
+
+        return Promise.all(loadRequirements).then(([/*topicNoitde*/, childNodes]) => {
+          console.log(childNodes);
+          this.visibleResources = childNodes;
+          // return filterAndAnnotateContentList(childNodes).then(contentList => {
+          //   store.commit('SET_TOOLBAR_ROUTE', {
+          //     name: PageNames.EXAMS,
+          //   });
+
+          //   return showExamCreationPage(store, {
+          //     classId: params.classId,
+          //     contentList,
+          //     pageName: PageNames.EXAM_CREATION_SELECT_CHANNEL_QUIZ_TOPIC,
+          //     ancestors: [...topicNode.ancestors, topicNode],
+          //   });
+          // });
+        });
+  });
+}
+      // filteredquizForge.channels.value() {
+      //   const { role } = this.filters;
+      //   if (!this.inSearchMode) {
+      //     return this.quizForge.channels.value;
+      //   }
+      //   const list = this.quizForge.channels.value ? this.quizForge.channels.value : this.bookmarksList;
+      //   return list.filter(contentNode => {
+      //     let passesFilters = true;
+      //     if (role === 'nonCoach') {
+      //       passesFilters = passesFilters && contentNode.num_coach_contents === 0;
+      //     }
+      //     if (role === 'coach') {
+      //       passesFilters = passesFilters && contentNode.num_coach_contents > 0;
+      //     }
+      //     return passesFilters;
+      //   });
+      // },
     },
     $trs: {
-      resources: {
-        message: '{count} {count, plural, one {resource} other {resources}}',
-        context: "Only translate 'resource' and 'resources'.",
-      },
       selectionInformation: {
-        message:
-          '{count, number, integer} of {total, number, integer} {total, plural, one {resource selected} other {resources selected}}',
-
-        context:
-          "Indicates the amount of resources selected for a lesson in the 'Manage lesson resources' section.\n\nFor example: '7 of 10 resources selected'.",
-      },
-      totalResourcesSelected: {
-        message:
-          '{total, number, integer} {total, plural, one {resource} other {resources}} in this lesson',
-        context:
-          "Indicates the amount of resources for a lesson in the 'Manage lesson resources' section. For example:\n\n'8 resources in this lesson'",
-      },
-      documentTitle: {
-        message: `Manage resources in '{lessonName}'`,
-        context:
-          "Title of window that displays when the user clicks on the 'manage resources' button within an individual lesson.\n\nOn this page the user can add new learning resources to the lesson.",
-      },
-      saveBeforeExitSnackbarText: {
-        message: 'Saving your changes…',
-        context: 'Notification that changes are being saved.',
-      },
-      // only shown on search page
-      exitSearchButtonLabel: {
-        message: 'Exit search',
-        context: "Button to exit the search function of the 'Manage lesson resources' window.",
-      },
-      manageResourcesAction: {
-        message: 'Manage lesson resources',
-        context:
-          "In the 'Manage lesson resources' coaches can add new resource material to a lesson.",
+        message: 'Channels',
       },
     },
   };
@@ -548,56 +452,12 @@
 </script>
 
 
-<style lang="scss" scoped>
-
-  @import '~kolibri-design-system/lib/styles/definitions';
-
-  .search-filters {
-    margin-top: 24px;
-  }
-
-  .bookmark-container {
-    display: flex;
-    min-height: 141px;
-    margin-bottom: 24px;
-    border-radius: 2px;
-    box-shadow: 0 1px 5px 0 #a1a1a1, 0 2px 2px 0 #e6e6e6, 0 3px 1px -2px #ffffff;
-    transition: box-shadow 0.25s ease;
-  }
-
-  .mobile-bookmark-container {
-    @extend %dropshadow-2dp;
-
-    display: flex;
-    max-width: 100%;
-    min-height: 141px;
-    margin: auto;
-    margin-bottom: 24px;
-    border-radius: 2px;
-
-    .ease:hover {
-      @extend %dropshadow-8dp;
-      @extend %md-decelerate-func;
-
-      transition: all $core-time;
-    }
-  }
-
-  .mobile-bookmark-icon {
-    left: 24px !important;
-  }
-
-  .mobile-text {
-    margin-top: 20px;
-    margin-left: 60px;
-  }
-
-  .bookmark-container:hover {
-    box-shadow: 0 5px 5px -3px #a1a1a1, 0 8px 10px 1px #d1d1d1, 0 3px 14px 2px #d4d4d4;
-  }
-
-  .text {
-    margin-left: 15rem;
-  }
-
+<style scoped>
+.select-resource{
+  margin-top: -4em;
+}
+.title-style{
+  font-weight:600;
+  font-size: 1.4em;
+}
 </style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index c4c27aebc8..3f3c6e7f31 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -31,6 +31,7 @@
     [PageNames.QUIZ_REPLACE_QUESTIONS]: ReplaceQuestions,
     [PageNames.QUIZ_SELECT_RESOURCES]: ResourceSelection,
     [PageNames.BOOK_MARKED_RESOURCES]: ShowBookMarkedResources,
+    [PageNames.SELECT_FROM_RESOURCE]:SelectedChannel,
   };
 
   export default {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
index 5216a4c580..8044f8980d 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
@@ -2,8 +2,9 @@
 
   <div class="">
     <div class="">
-      <KIconButton
+      <KButton
         icon="back"
+        @click="goBack()"
       />
       {{ selectFoldersOrExercises$() }}
     </div>
@@ -17,7 +18,7 @@
     />
 
     <ContentCardList
-      :contentList="filteredContentList"
+      :contentList="channelTopics"
       :showSelectAll="selectAllIsVisible"
       :viewMoreButtonState="viewMoreButtonState"
       :selectAllChecked="filteredContentList.length === 0"
@@ -57,13 +58,15 @@
         selectFromBookmarks$,
       } = enhancedQuizManagementStrings;
 
-      const { channels } = useResources();
+      const { channels,channelTopics, _getTopicsWithExerciseDescendants } = useResources();
 
       return {
         sectionSettings$,
         selectFoldersOrExercises$,
         selectFromBookmarks$,
         channels,
+        channelTopics,
+        _getTopicsWithExerciseDescendants
       };
     },
     data() {
@@ -115,6 +118,12 @@
         return '';
       },
     },
+    mounted() {
+      console.log(this.topic_id);
+      console.log(this.$route.params.topic_id);
+      this._getTopicsWithExerciseDescendants(this.$route.params.topic_id);
+      console.log(this.channelTopics);
+    },
     methods: {
       // ...mapActions('lessonSummary/resources', ['fetchAdditionalSearchResults']),
       topicsLink(topicId) {
@@ -173,6 +182,12 @@
             this.moreResultsState = 'error';
           });
       },
+      goBack(){
+        console.log("clicked");
+        return {
+          name:PageNames.QUIZ_SELECT_RESOURCES,
+        }
+      }
     },
   };
 

From 8fc9dde932345ef0e6d14184c0cefc153119c5b4 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 29 Nov 2023 19:35:40 +0300
Subject: [PATCH 45/50] removed unused data elements and components

---
 .../plan/CreateExamPage/ResourceSelection.vue | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index e4748a6a6e..beb6ad6af6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -11,7 +11,13 @@
     </h5>
     <p>Select from bookmarks</p>
 
-    <div v-if="!showChannels">
+    <div v-if="bookmarksRoute">
+      <strong>
+        <KRouterLink>
+          :text="coreString"('channelsLabel')"
+          :to="channelsLink"
+        </KRouterLink>
+      </strong>
       <ContentCardList
         :contentList="bookmarksContentList"
         :showSelectAll="selectAllIsVisible"
@@ -105,21 +111,22 @@
   import BookmarkIcon from '../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue'
   import { useResources } from './../../../composables/useResources';
   import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
-  import BookMarkedResource from './BookMarkedResource.vue';
+  // import BookMarkedResource from './BookMarkedResource.vue';
   import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
   // import LessonContentCard from './../LessonResourceSelectionPage/LessonContentCard/index.vue';
   import LessonsSearchFilters from './../LessonResourceSelectionPage/SearchTools/LessonsSearchFilters';
-  import  ResourceSelectionBreadcrumbs from './../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
+  // import  ResourceSelectionBreadcrumbs 
+  // from './../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
 
   export default {
     name: 'ResourceSelection',
     components: {
       LessonsSearchBox,
-      BookMarkedResource,
+      // BookMarkedResource,
       ContentCardList,
       BookmarkIcon,
       // ResourceSelection,
-      ResourceSelectionBreadcrumbs,
+      // ResourceSelectionBreadcrumbs,
       // LessonContentCard,
       LessonsSearchFilters
       
@@ -147,7 +154,7 @@
         // contentHasCheckbox: () => false,
         // contentIsSelected: () => '',
         searchTerm: '',
-        search: '',
+        // search: '',
         isExiting: false,
         filters: {
           channel: this.$route.query.channel || null,
@@ -182,11 +189,11 @@
       inSearchMode() {
         return this.pageName === LessonsPageNames.SELECTION_SEARCH;
       },
-      inputPlaceHolderStyle() {
-        return {
-          color: this.$themeTokens.annotation,
-        };
-      },
+      // inputPlaceHolderStyle() {
+      //   return {
+      //     color: this.$themeTokens.annotation,
+      //   };
+      // },
       selectAllIsVisible() {
         // Do not show 'Select All' if on Search Results, on Channels Page,
         // or if all contents are topics
@@ -429,7 +436,8 @@
       //   if (!this.inSearchMode) {
       //     return this.quizForge.channels.value;
       //   }
-      //   const list = this.quizForge.channels.value ? this.quizForge.channels.value : this.bookmarksList;
+      //   const list = 
+      // this.quizForge.channels.value ? this.quizForge.channels.value : this.bookmarksList;
       //   return list.filter(contentNode => {
       //     let passesFilters = true;
       //     if (role === 'nonCoach') {
@@ -443,9 +451,7 @@
       // },
     },
     $trs: {
-      selectionInformation: {
-        message: 'Channels',
-      },
+     
     },
   };
 

From a389f14a8d6d01a71c46399daadef8f2b097511b Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 30 Nov 2023 10:44:07 +0300
Subject: [PATCH 46/50] changed structure to only allow contentCardlist
 component to update

---
 .../assets/src/composables/useResources.js    | 18 ++---
 .../plan/CreateExamPage/ResourceSelection.vue | 77 ++++++++++++-------
 .../plan/CreateExamPage/SectionSidePanel.vue  |  6 +-
 3 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useResources.js b/kolibri/plugins/coach/assets/src/composables/useResources.js
index 0274bc89a1..5c54b33485 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResources.js
+++ b/kolibri/plugins/coach/assets/src/composables/useResources.js
@@ -3,7 +3,7 @@ import { ChannelResource, ContentNodeResource } from 'kolibri.resources';
 import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
 import { getContentNodeThumbnail } from 'kolibri.utils.contentNode';
 import { set } from '@vueuse/core';
-import store from 'kolibri.coreVue.vuex.store';
+// import store from 'kolibri.coreVue.vuex.store';
 
 // import { store } from 'vuex';
 
@@ -20,7 +20,6 @@ export function useResources() {
 
     ChannelResource.fetchCollection({ params: { has_exercises: true, available: true } }).then(
       response => {
-        // channels.value = response;
         set(
           channels,
           response.map(chnl => {
@@ -78,6 +77,7 @@ export function useResources() {
             t.id === exercise.ancestor_id);
             topic.exercises.push(exercise);
           });
+          channels.value = channelTopics.value;
           resolve(topicsWithExerciseDescendants);
         });
       });
@@ -105,29 +105,24 @@ export function useResources() {
               }
                 return true;
               });
-              const contentList = childNodesWithExerciseDescendants.map(node => ({
+              contentList.value = childNodesWithExerciseDescendants.map(node => ({
                 ...node,
                 thumbnail: getContentNodeThumbnail(node),
               }));
+              channels.value = contentList.value;
             resolve(contentList);
           });
       }
     });
   }
 
-  function filterLessonResource(lessonId){
-    store.dispatch('lessonSummary/saveLessonResources', {
-      lessonId: lessonId,
-      resources: store.state.lessonSummary.workingResources,
-    }).then((content) => {
-      console.log(content);
-    });
-  }
 
   onMounted(() => {
     fetchChannelResource();
     fetchBookMarkedResource();
     filterAndAnnotateContentList();
+    _getTopicsWithExerciseDescendants([]);
+
   });
 
   return {
@@ -136,6 +131,7 @@ export function useResources() {
     bookmarks,
     contentList,
     channelTopics,
+    filterAndAnnotateContentList,
     _getTopicsWithExerciseDescendants
   };
 }
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index beb6ad6af6..837615dbe7 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -11,7 +11,10 @@
     </h5>
     <p>Select from bookmarks</p>
 
-    <div v-if="bookmarksRoute">
+    <p>{{ $route.params.topic_id }}</p>
+    <p>{{ channels }}</p>
+
+    <!-- <div v-if="bookmarksRoute">
       <strong>
         <KRouterLink>
           :text="coreString"('channelsLabel')"
@@ -31,8 +34,9 @@
         @change_content_card="toggleSelected"
         @moreresults="handleMoreResults"
       />
-    </div>
-    <div v-else>
+    </div> -->
+    <div
+    >
       <div @click="lessonCardClicked">
         <KRouterLink
           v-if="bookmarksCount"
@@ -138,14 +142,22 @@
         sectionSettings$,
         numberOfSelectedBookmarks$ 
       } = enhancedQuizManagementStrings;
-      const { bookmarks } = useResources();
+      const { 
+        bookmarks, 
+        channelTopics,
+        channels,
+        _getTopicsWithExerciseDescendants 
+      } = useResources();
       const { windowIsSmall } = useKResponsiveWindow();
 
       return {
         sectionSettings$,
         numberOfSelectedBookmarks$,
         windowIsSmall,
-        bookmarks
+        bookmarks,
+        channels,
+        channelTopics,
+        _getTopicsWithExerciseDescendants,
       };
     },
     data() {
@@ -170,10 +182,11 @@
       filteredContentList() {
         const { role } = this.filters;
         if (!this.inSearchMode) {
-          return this.quizForge.channels.value;
+          return this.channels;
         }
-        const list = this.quizForge.channels.value
-          ? this.quizForge.channels.value
+
+        const list = this.channels
+          ? this.channels
           : this.bookmarksList;
         return list.filter(contentNode => {
           let passesFilters = true;
@@ -187,7 +200,7 @@
         });
       },
       inSearchMode() {
-        return this.pageName === LessonsPageNames.SELECTION_SEARCH;
+        return this.pageName === PageNames.SELECT_FROM_RESOURCE;
       },
       // inputPlaceHolderStyle() {
       //   return {
@@ -241,18 +254,21 @@
       workingResources(newVal, oldVal) {
         this.showResourcesDifferenceMessage(newVal.length - oldVal.length);
         this.debouncedSaveResources();
+        
       },
       filters(newVal) {
         const newQuery = {
           ...this.$route.query,
           ...newVal,
         };
+
+        
         this.$router.push({
           query: pickBy(newQuery),
         });
       },
     },
-    beforeRouteEnter (to, from, next) {
+    beforeEnter (to, from, next) {
       console.log(to);
       console.log(from);
       console.log(to.params.topic_id);
@@ -265,6 +281,7 @@
     beforeRouteLeave(to, from, next) {
       // Block the UI and show a notification in case last save takes too long
       this.isExiting = true;
+      
 
       // If the working resources array hasn't changed at least once,
       // just exit without autosaving
@@ -301,8 +318,6 @@
     created() {
       console.log(this.quizForge.channels.value);
       this.bookmarksCount = this.getBookmarks();
-      
-
     },
     mounted() {
       if(this.quizForge.channels.value.length > 0){
@@ -310,6 +325,10 @@
       }else{
         this.visibleResources =[];
       }
+
+      setTimeout(() => {
+        this.checkRoute();
+      }, 1000);
       
     },
     methods: {
@@ -400,22 +419,26 @@
       contentIsDirectoryKind({ is_leaf }) {
         return !is_leaf;
       },
-    showChannelQuizCreationTopicPage(store, params) {
-      return store.dispatch('loading').then(() => {
-        const { topic_id } = params;
-        const topicNodePromise = ContentNodeResource.fetchModel({ id: topic_id });
-        const childNodesPromise = ContentNodeResource.fetchCollection({
-          getParams: {
-            parent: topic_id,
-            kind_in: [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE],
-            contains_quiz: true,
-          },
-        });
+      checkRoute(){
+        if(this.$route.params.topic_id){
+          this._getTopicsWithExerciseDescendants(this.$route.params.topic_id);
+        }
+      },
+      showChannelQuizCreationTopicPage(store, params) {
+        return store.dispatch('loading').then(() => {
+          const { topic_id } = params;
+          const topicNodePromise = ContentNodeResource.fetchModel({ id: topic_id });
+          const childNodesPromise = ContentNodeResource.fetchCollection({
+            getParams: {
+              parent: topic_id,
+              kind_in: [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE],
+              contains_quiz: true,
+            },
+          });
         const loadRequirements = [topicNodePromise, childNodesPromise];
 
         return Promise.all(loadRequirements).then(([/*topicNoitde*/, childNodes]) => {
-          console.log(childNodes);
-          this.visibleResources = childNodes;
+          this.filterAndAnnotateContentList(childNodes);
           // return filterAndAnnotateContentList(childNodes).then(contentList => {
           //   store.commit('SET_TOOLBAR_ROUTE', {
           //     name: PageNames.EXAMS,
@@ -429,8 +452,8 @@
           //   });
           // });
         });
-  });
-}
+    });
+  }
       // filteredquizForge.channels.value() {
       //   const { role } = this.filters;
       //   if (!this.inSearchMode) {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 3f3c6e7f31..a2938e3b7c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -24,14 +24,14 @@
   import ReplaceQuestions from './ReplaceQuestions';
   import ResourceSelection from './ResourceSelection';
   import ShowBookMarkedResources from './ShowBookMarkedResources.vue';
-  import SelectedChannel from './SelectedChannel.vue';
+  // import SelectedChannel from './SelectedChannel.vue';
 
   const pageNameComponentMap = {
     [PageNames.QUIZ_SECTION_EDITOR]: SectionEditor,
     [PageNames.QUIZ_REPLACE_QUESTIONS]: ReplaceQuestions,
     [PageNames.QUIZ_SELECT_RESOURCES]: ResourceSelection,
     [PageNames.BOOK_MARKED_RESOURCES]: ShowBookMarkedResources,
-    [PageNames.SELECT_FROM_RESOURCE]:SelectedChannel,
+    [PageNames.SELECT_FROM_RESOURCE]: ResourceSelection,
   };
 
   export default {
@@ -41,7 +41,7 @@
       SectionEditor,
       ReplaceQuestions,
       ResourceSelection,
-      SelectedChannel,
+      // SelectedChannel,
       ResourceSelectionBreadcrumbs,
       ShowBookMarkedResources,
     },

From 5d0e71aad421cf5ce9f1629e5c51e6bd3bc219af Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 30 Nov 2023 21:52:45 +0300
Subject: [PATCH 47/50] can navigate backwards using the back arrow

---
 .../assets/src/composables/useResources.js    |  99 +++++++++-----
 .../coach/assets/src/routes/planExamRoutes.js |   6 +-
 .../plan/CreateExamPage/ResourceSelection.vue | 128 +++++++++---------
 .../plan/CreateExamPage/SectionSidePanel.vue  |   4 +-
 .../plan/CreateExamPage/SelectedChannel.vue   |  40 +++---
 5 files changed, 158 insertions(+), 119 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useResources.js b/kolibri/plugins/coach/assets/src/composables/useResources.js
index 5c54b33485..8644d116b6 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResources.js
+++ b/kolibri/plugins/coach/assets/src/composables/useResources.js
@@ -1,8 +1,10 @@
 import { ref, onMounted } from 'kolibri.lib.vueCompositionApi';
-import { ChannelResource, ContentNodeResource } from 'kolibri.resources';
+import { ChannelResource, ContentNodeResource, ContentNodeSearchResource } from 'kolibri.resources';
 import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
 import { getContentNodeThumbnail } from 'kolibri.utils.contentNode';
 import { set } from '@vueuse/core';
+// import pickBy from 'lodash/pickBy';
+import uniq from 'lodash/uniq';
 // import store from 'kolibri.coreVue.vuex.store';
 
 // import { store } from 'vuex';
@@ -12,12 +14,9 @@ export function useResources() {
   const channels = ref([]);
   const bookmarks = ref([]);
   const channelTopics = ref([]);
-  const contentList = ref([]);  
-
-
+  const contentList = ref([]);
 
   function fetchChannelResource() {
-
     ChannelResource.fetchCollection({ params: { has_exercises: true, available: true } }).then(
       response => {
         set(
@@ -48,8 +47,7 @@ export function useResources() {
         resolve([]);
         return;
       }
-      const topicsNumAssessmentDescendantsPromise
-      = ContentNodeResource.fetchDescendantsAssessments(
+      const topicsNumAssessmentDescendantsPromise = ContentNodeResource.fetchDescendantsAssessments(
         topicIds
       );
 
@@ -73,8 +71,7 @@ export function useResources() {
         ).then(response => {
           response.data.forEach(exercise => {
             channelTopics.value.push(exercise);
-            const topic = topicsWithExerciseDescendants.find(t =>
-            t.id === exercise.ancestor_id);
+            const topic = topicsWithExerciseDescendants.find(t => t.id === exercise.ancestor_id);
             topic.exercises.push(exercise);
           });
           channels.value = channelTopics.value;
@@ -86,43 +83,80 @@ export function useResources() {
 
   function filterAndAnnotateContentList(childNodes) {
     return new Promise(resolve => {
-      if(childNodes){
+      if (childNodes) {
         const childTopics = childNodes.filter(({ kind }) => kind === ContentNodeKinds.TOPIC);
         const topicIds = childTopics.map(({ id }) => id);
         const topicsThatHaveExerciseDescendants = _getTopicsWithExerciseDescendants(topicIds);
-          topicsThatHaveExerciseDescendants.then(topics => {
-            const childNodesWithExerciseDescendants = childNodes
-              .map(childNode => {
-                const index = topics.findIndex(topic => topic.id === childNode.id);
-                if (index !== -1) {
-                  return { ...childNode, ...topics[index] };
-                }
-                return childNode;
-              }).filter(childNode => {
-              if (childNode.kind === ContentNodeKinds.TOPIC &&
-              (childNode.numAssessments || 0) < 1) {
+        topicsThatHaveExerciseDescendants.then(topics => {
+          const childNodesWithExerciseDescendants = childNodes
+            .map(childNode => {
+              const index = topics.findIndex(topic => topic.id === childNode.id);
+              if (index !== -1) {
+                return { ...childNode, ...topics[index] };
+              }
+              return childNode;
+            })
+            .filter(childNode => {
+              if (
+                childNode.kind === ContentNodeKinds.TOPIC &&
+                (childNode.numAssessments || 0) < 1
+              ) {
                 return false;
               }
-                return true;
-              });
-              contentList.value = childNodesWithExerciseDescendants.map(node => ({
-                ...node,
-                thumbnail: getContentNodeThumbnail(node),
-              }));
-              channels.value = contentList.value;
-            resolve(contentList);
-          });
+              return true;
+            });
+          contentList.value = childNodesWithExerciseDescendants.map(node => ({
+            ...node,
+            thumbnail: getContentNodeThumbnail(node),
+          }));
+          channels.value = contentList.value;
+          resolve(contentList);
+        });
       }
     });
   }
 
+  function showChannelLevel(store, params, query = {}) {
+    let kinds;
+    if (query.kind) {
+      kinds = [query.kind];
+    } else {
+      kinds = [ContentNodeKinds.EXERCISE, ContentNodeKinds.TOPIC];
+    }
+
+    ContentNodeSearchResource.fetchCollection({
+      getParams: {
+        search: '',
+        kind_in: kinds,
+        // ...pickBy({ channel_id: query.channel }),
+      },
+    }).then(results => {
+      return filterAndAnnotateContentList(results.results).then(contentList => {
+        const searchResults = {
+          ...results,
+          results: contentList,
+          content_kinds: results.content_kinds.filter(kind =>
+            [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE].includes(kind)
+          ),
+          contentIdsFetched: uniq(results.results.map(({ content_id }) => content_id)),
+        };
+        // return showExamCreationPage(store, {
+        //   classId: params.classId,
+        //   contentList: contentList,
+        //   pageName: PageNames.EXAM_CREATION_SEARCH,
+        //   searchResults,
+        // });
+        this.channelTopics.value = searchResults.results;
+        console.log(searchResults.results);
+      });
+    });
+  }
 
   onMounted(() => {
     fetchChannelResource();
     fetchBookMarkedResource();
     filterAndAnnotateContentList();
     _getTopicsWithExerciseDescendants([]);
-
   });
 
   return {
@@ -132,6 +166,7 @@ export function useResources() {
     contentList,
     channelTopics,
     filterAndAnnotateContentList,
-    _getTopicsWithExerciseDescendants
+    _getTopicsWithExerciseDescendants,
+    showChannelLevel,
   };
 }
diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index 8953b1304c..ba09d0e313 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -53,16 +53,14 @@ export default [
         children: [
           {
             name: PageNames.SELECT_FROM_RESOURCE,
-            path: ':topic_id',
+            path: ':topic_id/resource',
           },
         ],
       },
       {
         name: PageNames.BOOK_MARKED_RESOURCES,
         path: ':section_id/book-marked-resources',
-        children: [
-          
-        ],
+        children: [],
       },
     ],
   },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 837615dbe7..9dcdef68f5 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -4,16 +4,17 @@
     <h5
       class="title-style"
     >
-      <KIcon
-        icon="back"
-      />
+      <KRouterLink
+        :to="goBack"
+      >
+        <KIcon
+          icon="back"
+        />
+      </KRouterLink>
       Select folders or exercises from these channels
     </h5>
     <p>Select from bookmarks</p>
 
-    <p>{{ $route.params.topic_id }}</p>
-    <p>{{ channels }}</p>
-
     <!-- <div v-if="bookmarksRoute">
       <strong>
         <KRouterLink>
@@ -35,8 +36,7 @@
         @moreresults="handleMoreResults"
       />
     </div> -->
-    <div
-    >
+    <div>
       <div @click="lessonCardClicked">
         <KRouterLink
           v-if="bookmarksCount"
@@ -104,7 +104,7 @@
 
 <script>
 
-  import { ContentNodeKinds , ContentNodeResource} from 'kolibri.coreVue.vuex.constants';
+  import { ContentNodeKinds, ContentNodeResource } from 'kolibri.coreVue.vuex.constants';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import every from 'lodash/every';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -112,14 +112,14 @@
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { LessonsPageNames } from '../../../constants/lessonsConstants';
   import { PageNames } from '../../../constants';
-  import BookmarkIcon from '../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue'
+  import BookmarkIcon from '../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
   import { useResources } from './../../../composables/useResources';
   import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
   // import BookMarkedResource from './BookMarkedResource.vue';
   import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
   // import LessonContentCard from './../LessonResourceSelectionPage/LessonContentCard/index.vue';
   import LessonsSearchFilters from './../LessonResourceSelectionPage/SearchTools/LessonsSearchFilters';
-  // import  ResourceSelectionBreadcrumbs 
+  // import  ResourceSelectionBreadcrumbs
   // from './../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
 
   export default {
@@ -132,21 +132,17 @@
       // ResourceSelection,
       // ResourceSelectionBreadcrumbs,
       // LessonContentCard,
-      LessonsSearchFilters
-      
+      LessonsSearchFilters,
     },
     inject: ['quizForge'],
-    mixins:[commonCoreStrings],
+    mixins: [commonCoreStrings],
     setup() {
-      const { 
-        sectionSettings$,
-        numberOfSelectedBookmarks$ 
-      } = enhancedQuizManagementStrings;
-      const { 
-        bookmarks, 
+      const { sectionSettings$, numberOfSelectedBookmarks$ } = enhancedQuizManagementStrings;
+      const {
+        bookmarks,
         channelTopics,
         channels,
-        _getTopicsWithExerciseDescendants 
+        _getTopicsWithExerciseDescendants,
       } = useResources();
       const { windowIsSmall } = useKResponsiveWindow();
 
@@ -173,9 +169,8 @@
           kind: this.$route.query.kind || null,
           role: this.$route.query.role || null,
         },
-        visibleResources:[],
-        showChannels:true,
-
+        visibleResources: [],
+        showChannels: true,
       };
     },
     computed: {
@@ -185,9 +180,7 @@
           return this.channels;
         }
 
-        const list = this.channels
-          ? this.channels
-          : this.bookmarksList;
+        const list = this.channels ? this.channels : this.bookmarksList;
         return list.filter(contentNode => {
           let passesFilters = true;
           if (role === 'nonCoach') {
@@ -221,7 +214,7 @@
           Boolean(this.workingResources.find(resource => resource.contentnode_id === id));
       },
       selectionMetadata(/*content*/) {
-        return function(){};
+        return function() {};
         // let count = 0;
         // let total = 0;
         // if (this.ancestorCounts[content.id]) {
@@ -241,20 +234,25 @@
       },
       addableContent() {
         // Content in the topic that can be added if 'Select All' is clicked
-        const list = this.quizForge.channels.value
-          ? this.quizForge.channels.value
-          : this.bookmarksList;
+        const list = this.channels ? this.channels : this.bookmarksList;
         return list.filter(
           content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
         );
       },
-    }, 
+      goBack() {
+        return {
+          name: PageNames.QUIZ_SECTION_EDITOR,
+          params: {
+            section_id: this.$route.params.section_id,
+          },
+        };
+      },
+    },
 
     watch: {
       workingResources(newVal, oldVal) {
         this.showResourcesDifferenceMessage(newVal.length - oldVal.length);
         this.debouncedSaveResources();
-        
       },
       filters(newVal) {
         const newQuery = {
@@ -262,26 +260,25 @@
           ...newVal,
         };
 
-        
         this.$router.push({
           query: pickBy(newQuery),
         });
       },
     },
-    beforeEnter (to, from, next) {
+    beforeEnter(to, from, next) {
       console.log(to);
       console.log(from);
       console.log(to.params.topic_id);
-      if(to.params.topic_id){
-        this.showChannelQuizCreationTopicPage(this.$store,to.params).then(() => {
+      if (to.params.topic_id) {
+        this.showChannelQuizCreationTopicPage(this.$store, to.params).then(() => {
           next();
         });
       }
     },
+
     beforeRouteLeave(to, from, next) {
       // Block the UI and show a notification in case last save takes too long
       this.isExiting = true;
-      
 
       // If the working resources array hasn't changed at least once,
       // just exit without autosaving
@@ -320,16 +317,15 @@
       this.bookmarksCount = this.getBookmarks();
     },
     mounted() {
-      if(this.quizForge.channels.value.length > 0){
+      if (this.quizForge.channels.value.length > 0) {
         this.visibleResources = this.quizForge.channels.value;
-      }else{
-        this.visibleResources =[];
+      } else {
+        this.visibleResources = [];
       }
 
       setTimeout(() => {
         this.checkRoute();
       }, 1000);
-      
     },
     methods: {
       /** @public */
@@ -350,7 +346,7 @@
       //   return '';
       // },
       getBookmarks() {
-          return this.bookmarks.length;
+        return this.bookmarks.length;
       },
       lessonCardClicked() {
         this.showChannels = false;
@@ -361,9 +357,13 @@
             name: PageNames.SELECT_FROM_RESOURCE,
             params: {
               topic_id: content.id,
+              classId: this.$route.params.classId,
+              section_id: this.$route.params.section_id,
             },
           };
         }
+
+        return null; // or return {} if you prefer an empty object
       },
       handleSearchTerm(searchTerm) {
         const query = {
@@ -419,8 +419,8 @@
       contentIsDirectoryKind({ is_leaf }) {
         return !is_leaf;
       },
-      checkRoute(){
-        if(this.$route.params.topic_id){
+      checkRoute() {
+        if (this.$route.params.topic_id) {
           this._getTopicsWithExerciseDescendants(this.$route.params.topic_id);
         }
       },
@@ -435,31 +435,31 @@
               contains_quiz: true,
             },
           });
-        const loadRequirements = [topicNodePromise, childNodesPromise];
+          const loadRequirements = [topicNodePromise, childNodesPromise];
 
-        return Promise.all(loadRequirements).then(([/*topicNoitde*/, childNodes]) => {
-          this.filterAndAnnotateContentList(childNodes);
-          // return filterAndAnnotateContentList(childNodes).then(contentList => {
-          //   store.commit('SET_TOOLBAR_ROUTE', {
-          //     name: PageNames.EXAMS,
-          //   });
+          return Promise.all(loadRequirements).then(([, /*topicNoitde*/ childNodes]) => {
+            this.filterAndAnnotateContentList(childNodes);
+            // return filterAndAnnotateContentList(childNodes).then(contentList => {
+            //   store.commit('SET_TOOLBAR_ROUTE', {
+            //     name: PageNames.EXAMS,
+            //   });
 
-          //   return showExamCreationPage(store, {
-          //     classId: params.classId,
-          //     contentList,
-          //     pageName: PageNames.EXAM_CREATION_SELECT_CHANNEL_QUIZ_TOPIC,
-          //     ancestors: [...topicNode.ancestors, topicNode],
-          //   });
-          // });
+            //   return showExamCreationPage(store, {
+            //     classId: params.classId,
+            //     contentList,
+            //     pageName: PageNames.EXAM_CREATION_SELECT_CHANNEL_QUIZ_TOPIC,
+            //     ancestors: [...topicNode.ancestors, topicNode],
+            //   });
+            // });
+          });
         });
-    });
-  }
+      },
       // filteredquizForge.channels.value() {
       //   const { role } = this.filters;
       //   if (!this.inSearchMode) {
       //     return this.quizForge.channels.value;
       //   }
-      //   const list = 
+      //   const list =
       // this.quizForge.channels.value ? this.quizForge.channels.value : this.bookmarksList;
       //   return list.filter(contentNode => {
       //     let passesFilters = true;
@@ -473,9 +473,7 @@
       //   });
       // },
     },
-    $trs: {
-     
-    },
+    $trs: {},
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index a2938e3b7c..a0833ef5a0 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -24,14 +24,14 @@
   import ReplaceQuestions from './ReplaceQuestions';
   import ResourceSelection from './ResourceSelection';
   import ShowBookMarkedResources from './ShowBookMarkedResources.vue';
-  // import SelectedChannel from './SelectedChannel.vue';
+  import SelectedChannel from './SelectedChannel.vue';
 
   const pageNameComponentMap = {
     [PageNames.QUIZ_SECTION_EDITOR]: SectionEditor,
     [PageNames.QUIZ_REPLACE_QUESTIONS]: ReplaceQuestions,
     [PageNames.QUIZ_SELECT_RESOURCES]: ResourceSelection,
     [PageNames.BOOK_MARKED_RESOURCES]: ShowBookMarkedResources,
-    [PageNames.SELECT_FROM_RESOURCE]: ResourceSelection,
+    [PageNames.SELECT_FROM_RESOURCE]: SelectedChannel,
   };
 
   export default {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
index 8044f8980d..9278ed6264 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
@@ -2,10 +2,11 @@
 
   <div class="">
     <div class="">
-      <KButton
-        icon="back"
-        @click="goBack()"
-      />
+      <KRouterLink
+        :to="goBack"
+      >
+        <KIcon icon="back" />
+      </KRouterLink>
       {{ selectFoldersOrExercises$() }}
     </div>
 
@@ -39,7 +40,7 @@
 <script>
 
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import { mapState } from 'vuex';
+  import { mapState, store } from 'vuex';
   import { PageNames } from '../../../constants';
   import { useResources } from '../../../composables/useResources';
   import ResourceSelectionBreadcrumbs from '../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
@@ -58,7 +59,12 @@
         selectFromBookmarks$,
       } = enhancedQuizManagementStrings;
 
-      const { channels,channelTopics, _getTopicsWithExerciseDescendants } = useResources();
+      const {
+        channels,
+        channelTopics,
+        _getTopicsWithExerciseDescendants,
+        showChannelLevel,
+      } = useResources();
 
       return {
         sectionSettings$,
@@ -66,7 +72,8 @@
         selectFromBookmarks$,
         channels,
         channelTopics,
-        _getTopicsWithExerciseDescendants
+        _getTopicsWithExerciseDescendants,
+        showChannelLevel,
       };
     },
     data() {
@@ -117,12 +124,19 @@
       selectionMetadata() {
         return '';
       },
+      goBack() {
+        return {
+          name: PageNames.QUIZ_SELECT_RESOURCES,
+          params: {
+            section_id: this.$route.params.section_id,
+            classId: this.$route.params.classId,
+          },
+        };
+      },
     },
     mounted() {
-      console.log(this.topic_id);
-      console.log(this.$route.params.topic_id);
+      this.showChannelLevel(store, this.$route.params, {});
       this._getTopicsWithExerciseDescendants(this.$route.params.topic_id);
-      console.log(this.channelTopics);
     },
     methods: {
       // ...mapActions('lessonSummary/resources', ['fetchAdditionalSearchResults']),
@@ -182,12 +196,6 @@
             this.moreResultsState = 'error';
           });
       },
-      goBack(){
-        console.log("clicked");
-        return {
-          name:PageNames.QUIZ_SELECT_RESOURCES,
-        }
-      }
     },
   };
 

From 38687ebbb34759eb0f522cefc58ca54862caeece Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Fri, 1 Dec 2023 21:34:55 +0300
Subject: [PATCH 48/50] adds topic tree navigation

---
 ...seResources.js => useExerciseResources.js} |  67 +++-
 .../coach/assets/src/constants/index.js       |   5 +-
 .../coach/assets/src/routes/planExamRoutes.js |   7 +-
 .../plan/CreateExamPage/ResourceSelection.vue | 318 +++++++++++-------
 .../plan/CreateExamPage/SectionSidePanel.vue  |   4 +-
 .../plan/CreateExamPage/SelectedChannel.vue   |  14 +-
 .../ShowBookMarkedResources.vue               |  47 ++-
 .../ContentCardList.vue                       |   6 +-
 8 files changed, 301 insertions(+), 167 deletions(-)
 rename kolibri/plugins/coach/assets/src/composables/{useResources.js => useExerciseResources.js} (75%)

diff --git a/kolibri/plugins/coach/assets/src/composables/useResources.js b/kolibri/plugins/coach/assets/src/composables/useExerciseResources.js
similarity index 75%
rename from kolibri/plugins/coach/assets/src/composables/useResources.js
rename to kolibri/plugins/coach/assets/src/composables/useExerciseResources.js
index 8644d116b6..c531216a56 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResources.js
+++ b/kolibri/plugins/coach/assets/src/composables/useExerciseResources.js
@@ -7,14 +7,15 @@ import { set } from '@vueuse/core';
 import uniq from 'lodash/uniq';
 // import store from 'kolibri.coreVue.vuex.store';
 
-// import { store } from 'vuex';
-
-export function useResources() {
+export function useExerciseResources() {
   const resources = ref(null);
   const channels = ref([]);
   const bookmarks = ref([]);
   const channelTopics = ref([]);
   const contentList = ref([]);
+  const currentTopicId = ref(null);
+  const currentTopic = ref(null);
+  const currentTopicResource = ref(null);
 
   function fetchChannelResource() {
     ChannelResource.fetchCollection({ params: { has_exercises: true, available: true } }).then(
@@ -81,6 +82,52 @@ export function useResources() {
     });
   }
 
+  // function fetchCurrentTopicId(id) {
+  //   currentTopicId.value = id;
+  //   if (id) {
+  //     currentTopicResource.value = fetchTopicResource(id);
+  //   } else {
+  //     currentTopicId.value = null;
+  //   }
+  // }
+
+  //   // watch(currentTopicId, async (newTopicId, oldTopicId) => {
+  //   //   if (newTopicId !== oldTopicId) {
+  //   //     currentTopicResource.value = await fetchTopicResource(newTopicId);
+  //   //   }
+  //   // });
+
+  // function fetchCurrentTopic(id) {
+  //   currentTopic.value = id;
+  //   if (id) {
+  //     currentTopicResource.value = fetchTopicResource(id);
+  //   } else {
+  //     currentTopic.value = null;
+
+  //   }
+
+  function fetchTopicResource(topicId) {
+    const topicNodePromise = ContentNodeResource.fetchModel({ id: topicId });
+    const childNodesPromise = ContentNodeResource.fetchCollection({
+      getParams: {
+        parent: topicId,
+        kind_in: [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE],
+      },
+    });
+    const loadRequirements = [topicNodePromise, childNodesPromise];
+
+    return Promise.all(loadRequirements).then(([topicNode, childNodes]) => {
+      return filterAndAnnotateContentList(childNodes).then(contentList => {
+        set(topicId, topicNode.id);
+        return {
+          ...topicNode,
+          ...contentList,
+          thumbnail: getContentNodeThumbnail(topicNode),
+        };
+      });
+    });
+  }
+
   function filterAndAnnotateContentList(childNodes) {
     return new Promise(resolve => {
       if (childNodes) {
@@ -140,13 +187,8 @@ export function useResources() {
           ),
           contentIdsFetched: uniq(results.results.map(({ content_id }) => content_id)),
         };
-        // return showExamCreationPage(store, {
-        //   classId: params.classId,
-        //   contentList: contentList,
-        //   pageName: PageNames.EXAM_CREATION_SEARCH,
-        //   searchResults,
-        // });
-        this.channelTopics.value = searchResults.results;
+
+        this.channels.value = searchResults.results;
         console.log(searchResults.results);
       });
     });
@@ -165,8 +207,13 @@ export function useResources() {
     bookmarks,
     contentList,
     channelTopics,
+    currentTopicId,
+    currentTopic,
+    currentTopicResource,
+    fetchChannelResource,
     filterAndAnnotateContentList,
     _getTopicsWithExerciseDescendants,
     showChannelLevel,
+    fetchTopicResource,
   };
 }
diff --git a/kolibri/plugins/coach/assets/src/constants/index.js b/kolibri/plugins/coach/assets/src/constants/index.js
index b9f407758a..d67e422fa9 100644
--- a/kolibri/plugins/coach/assets/src/constants/index.js
+++ b/kolibri/plugins/coach/assets/src/constants/index.js
@@ -16,8 +16,9 @@ export const PageNames = {
   QUIZ_SECTION_EDITOR: 'QUIZ_SECTION_EDITOR',
   QUIZ_REPLACE_QUESTIONS: 'QUIZ_REPLACE_QUESTIONS',
   QUIZ_SELECT_RESOURCES: 'QUIZ_SELECT_RESOURCES',
-  SELECT_FROM_RESOURCE:'SELECT_FROM_RESOURCE',
-  BOOK_MARKED_RESOURCES:'BOOK_MARKED_RESOURCES',
+  SELECT_FROM_RESOURCE: 'SELECT_FROM_RESOURCE',
+  BOOK_MARKED_RESOURCES: 'BOOK_MARKED_RESOURCES',
+  SELECTED_BOOKMARKS: 'SELECTED_BOOKMARKS',
 
   /** TODO Remove unused */
   EXAM_CREATION_TOPIC: 'EXAM_CREATION_TOPIC',
diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index ba09d0e313..1b7a824f9d 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -60,7 +60,12 @@ export default [
       {
         name: PageNames.BOOK_MARKED_RESOURCES,
         path: ':section_id/book-marked-resources',
-        children: [],
+        children: [
+          {
+            name: PageNames.SELECTED_BOOKMARKS,
+            path: ':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
index 9dcdef68f5..7dde913693 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -11,92 +11,69 @@
           icon="back"
         />
       </KRouterLink>
-      Select folders or exercises from these channels
+      {{ selectFoldersOrExercises$() }}
     </h5>
-    <p>Select from bookmarks</p>
 
-    <!-- <div v-if="bookmarksRoute">
-      <strong>
-        <KRouterLink>
-          :text="coreString"('channelsLabel')"
-          :to="channelsLink"
-        </KRouterLink>
-      </strong>
-      <ContentCardList
-        :contentList="bookmarksContentList"
-        :showSelectAll="selectAllIsVisible"
-        :selectAllChecked="addableContent.length === 0"
-        :contentCardLink="bookmarkLink"
-        :contentIsChecked="contentIsInLesson"
-        :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
-        :viewMoreButtonState="viewMoreButtonState"
-        :contentCardMessage="selectionMetadata"
-        @changeselectall="toggleTopicInWorkingResources"
-        @change_content_card="toggleSelected"
-        @moreresults="handleMoreResults"
-      />
-    </div> -->
-    <div>
+    <div v-if="!isTopicIdSet">
+
+      <p>{{ selectFromBookmarks$() }}</p>
+
       <div @click="lessonCardClicked">
         <KRouterLink
-          v-if="bookmarksCount"
+          v-if="bookmarks"
           :appearanceOverrides="{
             width: '100%',
             textDecoration: 'none',
-            color: $themeTokens.text }"
-          :to="getBookmarksLink()"
+            color: $themeTokens.text
+          }"
+          :to="getBookmarksLink"
         >
           <div :class="windowIsSmall ? 'mobile-bookmark-container' : 'bookmark-container'">
             <BookmarkIcon :class="windowIsSmall ? 'mobile-bookmark-icon' : ''" />
             <div :class="windowIsSmall ? 'mobile-text' : 'text'">
               <h3>{{ coreString('bookmarksLabel') }}</h3>
-              <p>{{ numberOfSelectedBookmarks$({ count: bookmarksCount }) }}</p>
+              <p>{{ numberOfSelectedBookmarks$({ count: bookmarks.length }) }}</p>
             </div>
           </div>
         </KRouterLink>
       </div>
+
       <KGrid>
-        <KGridItem :layout12="{ span: 6 }">
+        <KGridItem :layout12="{ span: 12 }">
           <LessonsSearchBox @searchterm="handleSearchTerm" />
         </KGridItem>
-
-        <!-- <KGridItem :layout12="{ span: 6, alignment: 'right' }">
-          <p>
-            {{ $tr('totalResourcesSelected', { total: workingResources.length }) }}
-          </p>
-        </KGridItem> -->
       </KGrid>
-
-      <LessonsSearchFilters
-        v-if="inSearchMode"
-        v-model="filters"
-        class="search-filters"
-        :searchTerm="searchTerm"
-        :searchResults="searchResults"
-      />
-
-      <!-- <ResourceSelectionBreadcrumbs
-        v-if="!inSearchMode"
-        :ancestors="ancestors"
-        :channelsLink="channelsLink"
-        :topicsLink="topicsLink"
-      /> -->
-
-      <ContentCardList
-        v-if="!isExiting"
-        :contentList="filteredContentList"
-        :showSelectAll="selectAllIsVisible"
-        :viewMoreButtonState="viewMoreButtonState"
-        :selectAllChecked="addableContent.length === 0"
-        :contentIsChecked="contentIsInLesson"
-        :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
-        :contentCardMessage="selectionMetadata"
-        :contentCardLink="contentLink"
-        @changeselectall="toggleTopicInWorkingResources"
-        @change_content_card="toggleSelected"
-        @moreresults="handleMoreResults"
-      />
     </div>
+
+    <!-- <LessonsSearchFilters
+      v-if="inSearchMode"
+      v-model="filters"
+      class="search-filters"
+      :searchTerm="searchTerm"
+      :searchResults="searchResults"
+    /> -->
+
+    <!-- <ResourceSelectionBreadcrumbs
+      v-if="!inSearchMode"
+      :ancestors="ancestors"
+      :channelsLink="channelsLink"
+      :topicsLink="topicsLink"
+    /> -->
+
+    <ContentCardList
+      v-if="!isExiting"
+      :contentList="filteredContentList"
+      :showSelectAll="selectAllIsVisible"
+      :viewMoreButtonState="viewMoreButtonState"
+      :selectAllChecked="addableContent.length === 0"
+      :contentIsChecked="contentIsInLesson"
+      :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
+      :contentCardMessage="selectionMetadata"
+      :contentCardLink="contentLink"
+      @changeselectall="toggleTopicInWorkingResources"
+      @change_content_card="toggleSelected"
+      @moreresults="handleMoreResults"
+    />
   </div>
 
 </template>
@@ -104,7 +81,6 @@
 
 <script>
 
-  import { ContentNodeKinds, ContentNodeResource } from 'kolibri.coreVue.vuex.constants';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import every from 'lodash/every';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -113,14 +89,13 @@
   import { LessonsPageNames } from '../../../constants/lessonsConstants';
   import { PageNames } from '../../../constants';
   import BookmarkIcon from '../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
-  import { useResources } from './../../../composables/useResources';
+  import { useExerciseResources } from './../../../composables/useExerciseResources';
   import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
-  // import BookMarkedResource from './BookMarkedResource.vue';
   import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
-  // import LessonContentCard from './../LessonResourceSelectionPage/LessonContentCard/index.vue';
-  import LessonsSearchFilters from './../LessonResourceSelectionPage/SearchTools/LessonsSearchFilters';
-  // import  ResourceSelectionBreadcrumbs
-  // from './../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
+  //import LessonContentCard from './../LessonResourceSelectionPage/LessonContentCard/index.vue';
+  //import LessonsSearchFilters from './../LessonResourceSelectionPage/
+  // SearchTools/LessonsSearchFilters';
+  import ResourceSelectionBreadcrumbs from './../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
 
   export default {
     name: 'ResourceSelection',
@@ -130,30 +105,32 @@
       ContentCardList,
       BookmarkIcon,
       // ResourceSelection,
-      // ResourceSelectionBreadcrumbs,
+      ResourceSelectionBreadcrumbs,
       // LessonContentCard,
-      LessonsSearchFilters,
+      // LessonsSearchFilters,
     },
     inject: ['quizForge'],
     mixins: [commonCoreStrings],
     setup() {
-      const { sectionSettings$, numberOfSelectedBookmarks$ } = enhancedQuizManagementStrings;
       const {
-        bookmarks,
-        channelTopics,
-        channels,
-        _getTopicsWithExerciseDescendants,
-      } = useResources();
+        sectionSettings$,
+        selectFromBookmarks$,
+        numberOfSelectedBookmarks$,
+        selectFoldersOrExercises$,
+      } = enhancedQuizManagementStrings;
+      const { bookmarks, channelTopics, channels, fetchTopicResource } = useExerciseResources();
       const { windowIsSmall } = useKResponsiveWindow();
 
       return {
         sectionSettings$,
+        selectFromBookmarks$,
         numberOfSelectedBookmarks$,
+        selectFoldersOrExercises$,
         windowIsSmall,
         bookmarks,
         channels,
         channelTopics,
-        _getTopicsWithExerciseDescendants,
+        fetchTopicResource,
       };
     },
     data() {
@@ -171,6 +148,8 @@
         },
         visibleResources: [],
         showChannels: true,
+        bookmarksCount: 0,
+        pageName: this.$route.name,
       };
     },
     computed: {
@@ -195,6 +174,9 @@
       inSearchMode() {
         return this.pageName === PageNames.SELECT_FROM_RESOURCE;
       },
+      isTopicIdSet() {
+        return this.$route.params.topic_id;
+      },
       // inputPlaceHolderStyle() {
       //   return {
       //     color: this.$themeTokens.annotation,
@@ -211,7 +193,11 @@
       },
       contentIsInLesson() {
         return ({ id }) =>
-          Boolean(this.workingResources.find(resource => resource.contentnode_id === id));
+          Boolean(
+            this.channels.find(resource => {
+              id === resource.id;
+            })
+          );
       },
       selectionMetadata(/*content*/) {
         return function() {};
@@ -247,6 +233,23 @@
           },
         };
       },
+      getBookmarksLink() {
+        return {
+          name: PageNames.BOOK_MARKED_RESOURCES,
+          params: {
+            section_id: this.$route.params.section_id,
+          },
+        };
+      },
+      channelsLink() {
+        return {
+          // name : PageNames.SELECT_FROM_RESOURCE,
+          // params:{
+          //   section_id: this.$route.params.section_id,
+          //   topic_id: this.$route.params.topic_id
+          // }
+        };
+      },
     },
 
     watch: {
@@ -265,13 +268,10 @@
         });
       },
     },
-    beforeEnter(to, from, next) {
-      console.log(to);
-      console.log(from);
-      console.log(to.params.topic_id);
+    beforeRouteEnter(to, from, next) {
       if (to.params.topic_id) {
-        this.showChannelQuizCreationTopicPage(this.$store, to.params).then(() => {
-          next();
+        next(vm => {
+          vm.updateResource();
         });
       }
     },
@@ -313,7 +313,6 @@
       }
     },
     created() {
-      console.log(this.quizForge.channels.value);
       this.bookmarksCount = this.getBookmarks();
     },
     mounted() {
@@ -322,10 +321,7 @@
       } else {
         this.visibleResources = [];
       }
-
-      setTimeout(() => {
-        this.checkRoute();
-      }, 1000);
+      this.bookmarksCount = this.bookmarks.length;
     },
     methods: {
       /** @public */
@@ -353,6 +349,9 @@
       },
       contentLink(content) {
         if (!content.is_leaf) {
+          this.fetchTopicResource(this.$route.params.topic_id).then(resource => {
+            this.channels = resource.contentList;
+          });
           return {
             name: PageNames.SELECT_FROM_RESOURCE,
             params: {
@@ -363,7 +362,7 @@
           };
         }
 
-        return null; // or return {} if you prefer an empty object
+        return {}; // or return {} if you prefer an empty object
       },
       handleSearchTerm(searchTerm) {
         const query = {
@@ -424,36 +423,42 @@
           this._getTopicsWithExerciseDescendants(this.$route.params.topic_id);
         }
       },
-      showChannelQuizCreationTopicPage(store, params) {
-        return store.dispatch('loading').then(() => {
-          const { topic_id } = params;
-          const topicNodePromise = ContentNodeResource.fetchModel({ id: topic_id });
-          const childNodesPromise = ContentNodeResource.fetchCollection({
-            getParams: {
-              parent: topic_id,
-              kind_in: [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE],
-              contains_quiz: true,
-            },
-          });
-          const loadRequirements = [topicNodePromise, childNodesPromise];
-
-          return Promise.all(loadRequirements).then(([, /*topicNoitde*/ childNodes]) => {
-            this.filterAndAnnotateContentList(childNodes);
-            // return filterAndAnnotateContentList(childNodes).then(contentList => {
-            //   store.commit('SET_TOOLBAR_ROUTE', {
-            //     name: PageNames.EXAMS,
-            //   });
-
-            //   return showExamCreationPage(store, {
-            //     classId: params.classId,
-            //     contentList,
-            //     pageName: PageNames.EXAM_CREATION_SELECT_CHANNEL_QUIZ_TOPIC,
-            //     ancestors: [...topicNode.ancestors, topicNode],
-            //   });
-            // });
-          });
+      // showChannelQuizCreationTopicPage(store, params) {
+      //   return store.dispatch('loading').then(() => {
+      //     const { topic_id } = params;
+      //     const topicNodePromise = ContentNodeResource.fetchModel({ id: topic_id });
+      //     const childNodesPromise = ContentNodeResource.fetchCollection({
+      //       getParams: {
+      //         parent: topic_id,
+      //         kind_in: [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE],
+      //         contains_quiz: true,
+      //       },
+      //     });
+      //     const loadRequirements = [topicNodePromise, childNodesPromise];
+
+      //     return Promise.all(loadRequirements).then(([, /*topicNoitde*/ childNodes]) => {
+      //       this.filterAndAnnotateContentList(childNodes);
+      // return filterAndAnnotateContentList(childNodes).then(contentList => {
+      //   store.commit('SET_TOOLBAR_ROUTE', {
+      //     name: PageNames.EXAMS,
+      //   });
+
+      //   return showExamCreationPage(store, {
+      //     classId: params.classId,
+      //     contentList,
+      //     pageName: PageNames.EXAM_CREATION_SELECT_CHANNEL_QUIZ_TOPIC,
+      //     ancestors: [...topicNode.ancestors, topicNode],
+      //   });
+      // });
+      //     });
+      //   });
+      // },
+      updateResource() {
+        this.fetchTopicResource(this.$route.params.topic_id).then(resource => {
+          this.channels = resource.contentList;
         });
       },
+
       // filteredquizForge.channels.value() {
       //   const { role } = this.filters;
       //   if (!this.inSearchMode) {
@@ -479,12 +484,65 @@
 </script>
 
 
-<style scoped>
-.select-resource{
-  margin-top: -4em;
-}
-.title-style{
-  font-weight:600;
-  font-size: 1.4em;
-}
+<style scoped lang="scss">
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .select-resource {
+    margin-top: -4em;
+  }
+
+  .title-style {
+    font-size: 1.4em;
+    font-weight: 600;
+  }
+
+  .search-filters {
+    margin-top: 24px;
+  }
+
+  .bookmark-container {
+    display: flex;
+    min-height: 141px;
+    margin-bottom: 24px;
+    border-radius: 2px;
+    box-shadow: 0 1px 5px 0 #a1a1a1, 0 2px 2px 0 #e6e6e6, 0 3px 1px -2px #ffffff;
+    transition: box-shadow 0.25s ease;
+  }
+
+  .mobile-bookmark-container {
+    @extend %dropshadow-2dp;
+
+    display: flex;
+    max-width: 100%;
+    min-height: 141px;
+    margin: auto;
+    margin-bottom: 24px;
+    border-radius: 2px;
+
+    .ease:hover {
+      @extend %dropshadow-8dp;
+      @extend %md-decelerate-func;
+
+      transition: all $core-time;
+    }
+  }
+
+  .mobile-bookmark-icon {
+    left: 24px !important;
+  }
+
+  .mobile-text {
+    margin-top: 20px;
+    margin-left: 60px;
+  }
+
+  .bookmark-container:hover {
+    box-shadow: 0 5px 5px -3px #a1a1a1, 0 8px 10px 1px #d1d1d1, 0 3px 14px 2px #d4d4d4;
+  }
+
+  .text {
+    margin-left: 15rem;
+  }
+
 </style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index a0833ef5a0..a2938e3b7c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -24,14 +24,14 @@
   import ReplaceQuestions from './ReplaceQuestions';
   import ResourceSelection from './ResourceSelection';
   import ShowBookMarkedResources from './ShowBookMarkedResources.vue';
-  import SelectedChannel from './SelectedChannel.vue';
+  // import SelectedChannel from './SelectedChannel.vue';
 
   const pageNameComponentMap = {
     [PageNames.QUIZ_SECTION_EDITOR]: SectionEditor,
     [PageNames.QUIZ_REPLACE_QUESTIONS]: ReplaceQuestions,
     [PageNames.QUIZ_SELECT_RESOURCES]: ResourceSelection,
     [PageNames.BOOK_MARKED_RESOURCES]: ShowBookMarkedResources,
-    [PageNames.SELECT_FROM_RESOURCE]: SelectedChannel,
+    [PageNames.SELECT_FROM_RESOURCE]: ResourceSelection,
   };
 
   export default {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
index 9278ed6264..0e30dece1f 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SelectedChannel.vue
@@ -19,7 +19,7 @@
     />
 
     <ContentCardList
-      :contentList="channelTopics"
+      :contentList="channels"
       :showSelectAll="selectAllIsVisible"
       :viewMoreButtonState="viewMoreButtonState"
       :selectAllChecked="filteredContentList.length === 0"
@@ -42,7 +42,7 @@
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import { mapState, store } from 'vuex';
   import { PageNames } from '../../../constants';
-  import { useResources } from '../../../composables/useResources';
+  import { useExerciseResources } from '../../../composables/useExerciseResources';
   import ResourceSelectionBreadcrumbs from '../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
   import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
 
@@ -64,7 +64,7 @@
         channelTopics,
         _getTopicsWithExerciseDescendants,
         showChannelLevel,
-      } = useResources();
+      } = useExerciseResources();
 
       return {
         sectionSettings$,
@@ -155,10 +155,10 @@
       contentLink(content) {
         if (!content.is_leaf) {
           return {
-            name: PageNames.SELECT_FROM_RESOURCE,
-            params: {
-              topic_id: content.id,
-            },
+            name: PageNames.QUIZ_REPLACE_QUESTIONS,
+            // params: {
+            //   topic_id: content.id,
+            // },
           };
         } else {
           return {};
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue
index 3a10e84a89..8215886d9e 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ShowBookMarkedResources.vue
@@ -22,7 +22,7 @@
 <script>
 
   import pickBy from 'lodash/pickBy';
-  import { useResources } from '../../../composables/useResources';
+  import { useExerciseResources } from '../../../composables/useExerciseResources';
   import { PageNames } from '../../../constants';
   import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
 
@@ -32,10 +32,11 @@
       ContentCardList,
     },
     setup() {
-      const { bookmarks } = useResources();
+      const { bookmarks, fetchTopicResource } = useExerciseResources();
 
       return {
         bookmarks,
+        fetchTopicResource,
       };
     },
     data() {
@@ -61,6 +62,13 @@
         return '';
       },
     },
+    beforeEnter(to, from, next) {
+      if (to.params.topic_id) {
+        next(vm => {
+          vm.updateResource();
+        });
+      }
+    },
     watch: {
       workingResources(newVal, oldVal) {
         this.showResourcesDifferenceMessage(newVal.length - oldVal.length);
@@ -76,18 +84,28 @@
         });
       },
     },
+    mounted() {
+      setTimeout(() => {
+        this.updateResource();
+      }, 1000);
+    },
     methods: {
       contentLink(content) {
-        if (!content.is_leaf) {
-          return {
-            name: PageNames.SELECT_FROM_RESOURCE,
-            params: {
-              topic_id: content.id,
-            },
-          };
-        } else {
-          return {};
-        }
+        // if (!content.is_leaf) {
+        this.fetchTopicResource(this.$route.params.topic_id).then(resource => {
+          this.bookmarks = resource.contentList;
+        });
+        return {
+          name: PageNames.SELECTED_BOOKMARKS,
+          params: {
+            topic_id: content.id,
+            classId: this.$route.params.classId,
+            section_id: this.$route.params.section_id,
+          },
+        };
+        // }else{
+        //   return {};
+        // }
       },
       toggleTopicInWorkingResources(isChecked) {
         if (isChecked) {
@@ -121,6 +139,11 @@
       contentIsDirectoryKind({ is_leaf }) {
         return !is_leaf;
       },
+      updateResource() {
+        this.fetchTopicResource(this.$route.params.topic_id).then(resource => {
+          this.bookmarks = resource.contentList;
+        });
+      },
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
index fe321cfb27..0c1f37fda7 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
@@ -10,8 +10,8 @@
         @change="$emit('changeselectall', $event)"
       />
       <li
-        v-for="content in contentList"
-        :key="content.id"
+        v-for="(content, index) in contentList"
+        :key="index"
         class="content-list-item"
       >
         <KCheckbox
@@ -27,7 +27,7 @@
           :class="{ 'with-checkbox': needCheckboxes }"
           :title="content.title"
           :thumbnail="content.thumbnail"
-          :description="content.description"
+          :description="content.description ? content.description : '' "
           :kind="content.kind"
           :message="contentCardMessage(content)"
           :link="contentCardLink(content)"

From 7d62544d43a79c6cae5a5ea4316952471a2b7767 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Fri, 1 Dec 2023 23:03:08 +0300
Subject: [PATCH 49/50] added selection breadcrumbs

---
 .../src/composables/useExerciseResources.js   | 29 +-----
 .../plan/CreateExamPage/ResourceSelection.vue | 93 ++++++-------------
 2 files changed, 31 insertions(+), 91 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useExerciseResources.js b/kolibri/plugins/coach/assets/src/composables/useExerciseResources.js
index c531216a56..32b57ee5bf 100644
--- a/kolibri/plugins/coach/assets/src/composables/useExerciseResources.js
+++ b/kolibri/plugins/coach/assets/src/composables/useExerciseResources.js
@@ -13,6 +13,7 @@ export function useExerciseResources() {
   const bookmarks = ref([]);
   const channelTopics = ref([]);
   const contentList = ref([]);
+  const ancestors = ref([]);
   const currentTopicId = ref(null);
   const currentTopic = ref(null);
   const currentTopicResource = ref(null);
@@ -82,30 +83,6 @@ export function useExerciseResources() {
     });
   }
 
-  // function fetchCurrentTopicId(id) {
-  //   currentTopicId.value = id;
-  //   if (id) {
-  //     currentTopicResource.value = fetchTopicResource(id);
-  //   } else {
-  //     currentTopicId.value = null;
-  //   }
-  // }
-
-  //   // watch(currentTopicId, async (newTopicId, oldTopicId) => {
-  //   //   if (newTopicId !== oldTopicId) {
-  //   //     currentTopicResource.value = await fetchTopicResource(newTopicId);
-  //   //   }
-  //   // });
-
-  // function fetchCurrentTopic(id) {
-  //   currentTopic.value = id;
-  //   if (id) {
-  //     currentTopicResource.value = fetchTopicResource(id);
-  //   } else {
-  //     currentTopic.value = null;
-
-  //   }
-
   function fetchTopicResource(topicId) {
     const topicNodePromise = ContentNodeResource.fetchModel({ id: topicId });
     const childNodesPromise = ContentNodeResource.fetchCollection({
@@ -118,7 +95,8 @@ export function useExerciseResources() {
 
     return Promise.all(loadRequirements).then(([topicNode, childNodes]) => {
       return filterAndAnnotateContentList(childNodes).then(contentList => {
-        set(topicId, topicNode.id);
+        // set(topicId, topicNode.id);
+        ancestors.value = [...topicNode.ancestors, topicNode];
         return {
           ...topicNode,
           ...contentList,
@@ -210,6 +188,7 @@ export function useExerciseResources() {
     currentTopicId,
     currentTopic,
     currentTopicResource,
+    ancestors,
     fetchChannelResource,
     filterAndAnnotateContentList,
     _getTopicsWithExerciseDescendants,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 7dde913693..cabe7ec943 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -53,12 +53,12 @@
       :searchResults="searchResults"
     /> -->
 
-    <!-- <ResourceSelectionBreadcrumbs
-      v-if="!inSearchMode"
+    <ResourceSelectionBreadcrumbs
+      v-if="isTopicIdSet"
       :ancestors="ancestors"
       :channelsLink="channelsLink"
       :topicsLink="topicsLink"
-    /> -->
+    />
 
     <ContentCardList
       v-if="!isExiting"
@@ -118,7 +118,13 @@
         numberOfSelectedBookmarks$,
         selectFoldersOrExercises$,
       } = enhancedQuizManagementStrings;
-      const { bookmarks, channelTopics, channels, fetchTopicResource } = useExerciseResources();
+      const {
+        bookmarks,
+        channelTopics,
+        channels,
+        ancestors,
+        fetchTopicResource,
+      } = useExerciseResources();
       const { windowIsSmall } = useKResponsiveWindow();
 
       return {
@@ -129,6 +135,7 @@
         windowIsSmall,
         bookmarks,
         channels,
+        ancestors,
         channelTopics,
         fetchTopicResource,
       };
@@ -242,13 +249,7 @@
         };
       },
       channelsLink() {
-        return {
-          // name : PageNames.SELECT_FROM_RESOURCE,
-          // params:{
-          //   section_id: this.$route.params.section_id,
-          //   topic_id: this.$route.params.topic_id
-          // }
-        };
+        return this.selectionRootLink();
       },
     },
 
@@ -287,12 +288,6 @@
         this.isExiting = false;
       } else {
         this.resourcesChanged = true;
-        // const isSamePage = samePageCheckGenerator(this.$store);
-        // setTimeout(() => {
-        //   if (isSamePage()) {
-        //     this.createSnackbar(this.$tr('saveBeforeExitSnackbarText'));
-        //   }
-        // }, 500);
 
         // Cancel any debounced calls
         this.debouncedSaveResources.cancel();
@@ -351,6 +346,7 @@
         if (!content.is_leaf) {
           this.fetchTopicResource(this.$route.params.topic_id).then(resource => {
             this.channels = resource.contentList;
+            // this.ancestors = resource.ancestors;
           });
           return {
             name: PageNames.SELECT_FROM_RESOURCE,
@@ -396,6 +392,9 @@
             this.moreResultsState = 'error';
           });
       },
+      selectionRootLink() {
+        return this.$router.getRoute(PageNames.SELECT_FROM_RESOURCE, {}, this.$route.query);
+      },
       toggleSelected({ content, checked }) {
         if (checked) {
           this.addToSelectedResources(content);
@@ -423,60 +422,22 @@
           this._getTopicsWithExerciseDescendants(this.$route.params.topic_id);
         }
       },
-      // showChannelQuizCreationTopicPage(store, params) {
-      //   return store.dispatch('loading').then(() => {
-      //     const { topic_id } = params;
-      //     const topicNodePromise = ContentNodeResource.fetchModel({ id: topic_id });
-      //     const childNodesPromise = ContentNodeResource.fetchCollection({
-      //       getParams: {
-      //         parent: topic_id,
-      //         kind_in: [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE],
-      //         contains_quiz: true,
-      //       },
-      //     });
-      //     const loadRequirements = [topicNodePromise, childNodesPromise];
-
-      //     return Promise.all(loadRequirements).then(([, /*topicNoitde*/ childNodes]) => {
-      //       this.filterAndAnnotateContentList(childNodes);
-      // return filterAndAnnotateContentList(childNodes).then(contentList => {
-      //   store.commit('SET_TOOLBAR_ROUTE', {
-      //     name: PageNames.EXAMS,
-      //   });
-
-      //   return showExamCreationPage(store, {
-      //     classId: params.classId,
-      //     contentList,
-      //     pageName: PageNames.EXAM_CREATION_SELECT_CHANNEL_QUIZ_TOPIC,
-      //     ancestors: [...topicNode.ancestors, topicNode],
-      //   });
-      // });
-      //     });
-      //   });
-      // },
       updateResource() {
         this.fetchTopicResource(this.$route.params.topic_id).then(resource => {
           this.channels = resource.contentList;
+          this.ancestors = resource.ancestors;
         });
       },
-
-      // filteredquizForge.channels.value() {
-      //   const { role } = this.filters;
-      //   if (!this.inSearchMode) {
-      //     return this.quizForge.channels.value;
-      //   }
-      //   const list =
-      // this.quizForge.channels.value ? this.quizForge.channels.value : this.bookmarksList;
-      //   return list.filter(contentNode => {
-      //     let passesFilters = true;
-      //     if (role === 'nonCoach') {
-      //       passesFilters = passesFilters && contentNode.num_coach_contents === 0;
-      //     }
-      //     if (role === 'coach') {
-      //       passesFilters = passesFilters && contentNode.num_coach_contents > 0;
-      //     }
-      //     return passesFilters;
-      //   });
-      // },
+      topicListingLink({ topicId }) {
+        return this.$router.getRoute(
+          PageNames.SELECT_FROM_RESOURCE,
+          { topicId },
+          this.$route.query
+        );
+      },
+      topicsLink(topicId) {
+        return this.topicListingLink({ ...this.$route.params, topicId });
+      },
     },
     $trs: {},
   };

From eea8aeb9af929e68f7f742060f2a34f6a5f252c8 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Sat, 2 Dec 2023 01:20:04 +0300
Subject: [PATCH 50/50] added selection breadcrumbs

---
 .../plan/CreateExamPage/ResourceSelection.vue | 51 +++++++++++++++----
 .../strings/enhancedQuizManagementStrings.js  |  3 ++
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index cabe7ec943..f2eebb53a0 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -74,8 +74,31 @@
       @change_content_card="toggleSelected"
       @moreresults="handleMoreResults"
     />
+    <div class="bottom-navigation">
+      <KGrid>
+        <KGridItem
+          :layout12="{ span: 6 }"
+          :layout8="{ span: 4 }"
+          :layout4="{ span: 2 }"
+        >
+          {{ numberOfResources$({ count: channels.length }) }}
+        </KGridItem>
+        <KGridItem
+          :layout12="{ span: 6 }"
+          :layout8="{ span: 4 }"
+          :layout4="{ span: 2 }"
+        >
+          <KButton
+            :text="coreString('continueAction')"
+            :primary="true"
+            :disabled="disabled || formIsSubmitted"
+          />
+        </KGridItem>
+      </KGrid>
+    </div>
   </div>
 
+
 </template>
 
 
@@ -117,6 +140,8 @@
         selectFromBookmarks$,
         numberOfSelectedBookmarks$,
         selectFoldersOrExercises$,
+        numberOfSelectedResources$,
+        numberOfResources$,
       } = enhancedQuizManagementStrings;
       const {
         bookmarks,
@@ -132,6 +157,8 @@
         selectFromBookmarks$,
         numberOfSelectedBookmarks$,
         selectFoldersOrExercises$,
+        numberOfSelectedResources$,
+        numberOfResources$,
         windowIsSmall,
         bookmarks,
         channels,
@@ -166,8 +193,7 @@
           return this.channels;
         }
 
-        const list = this.channels ? this.channels : this.bookmarksList;
-        return list.filter(contentNode => {
+        return this.channels.filter(contentNode => {
           let passesFilters = true;
           if (role === 'nonCoach') {
             passesFilters = passesFilters && contentNode.num_coach_contents === 0;
@@ -201,9 +227,7 @@
       contentIsInLesson() {
         return ({ id }) =>
           Boolean(
-            this.channels.find(resource => {
-              id === resource.id;
-            })
+            this.channels
           );
       },
       selectionMetadata(/*content*/) {
@@ -417,11 +441,6 @@
       contentIsDirectoryKind({ is_leaf }) {
         return !is_leaf;
       },
-      checkRoute() {
-        if (this.$route.params.topic_id) {
-          this._getTopicsWithExerciseDescendants(this.$route.params.topic_id);
-        }
-      },
       updateResource() {
         this.fetchTopicResource(this.$route.params.topic_id).then(resource => {
           this.channels = resource.contentList;
@@ -439,7 +458,7 @@
         return this.topicListingLink({ ...this.$route.params, topicId });
       },
     },
-    $trs: {},
+
   };
 
 </script>
@@ -506,4 +525,14 @@
     margin-left: 15rem;
   }
 
+  .bottom-navigation {
+    background-color: white;
+    color: black;
+    padding: 10px;
+    position: fixed;
+    bottom: 0;
+    width: 50%;
+    text-align: center;
+  }
+
 </style>
diff --git a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
index 4e06fcdedb..5e1f43cbce 100644
--- a/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
+++ b/packages/kolibri-common/strings/enhancedQuizManagementStrings.js
@@ -150,4 +150,7 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
     message:
       '{ count, number } { count, plural, one { question successfully replaced } other { questions successfully replaced }} ',
   },
+  numberOfResources:{
+    message:'{count, number} {count, plural, one {resource selected} other {resources selected}}',
+  },
 });