From 95d5985093e81ceb67c4fdfd8101e6610c4a008e Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 13 Nov 2024 18:33:15 +0300
Subject: [PATCH 01/24] basic layout added

---
 .../ManageSelectedLessonResource.vue          | 172 ++++++++++++++++++
 .../quizzes/CreateExamPage/SectionOrder.vue   |  12 +-
 2 files changed, 178 insertions(+), 6 deletions(-)
 create mode 100644 kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ManageSelectedLessonResource.vue

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
new file mode 100644
index 00000000000..b58895cbf8b
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
@@ -0,0 +1,172 @@
+<template>
+
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
+    @closePanel="() => $router.go(-1)"
+    @shouldFocusFirstEl="() => null"
+  >
+  
+  
+    <div>
+        
+      
+      <p>Lesson : Intro to chemical bond </p>
+
+      <p>Size : 16 MB</p>
+
+
+      <DragContainer
+        v-if="sectionOrderList.length > 0"
+        :items="sectionOrderList"
+        @sort=""
+      >
+        <transition-group>
+          <Draggable
+            v-for="(index) in sectionOrderList"
+            :key="index"
+          >
+            <DragHandle>
+              <KGrid :style="lessonOrderListButtonBorder">
+                <KGridItem :layout12="{ span: 8 }">
+                  <div style="display:flex;">
+                    <div>
+                      <DragSortWidget
+                        class="drag-title"
+                        moveUpText="up"
+                        moveDownText="down"
+                        :noDrag="true"
+                        :isFirst="index === 0"
+                        :isLast="index === sectionOrderList.length - 1"
+                        @moveUp="() => {}"
+                        @moveDown="() => {}"
+                      />
+                    </div>
+                    <div style="padding:0px 10px">
+                      <span
+                        class="drag-title"
+                        style="flex: 1"
+                      >
+                        <KIcon
+                          class="icon-style"
+                          icon="practiceSolid"
+                        />
+                      </span>
+                    </div>
+                    <div>
+                      <span
+                        class="arrange-item-block"
+                      >
+                        <span>
+                          <KRouterLink  
+                            text="Metallic bond"
+                            :to="{}" 
+                            style="font-size:14px"
+                          />
+                        </span>
+                        <p style="font-size:12px"> 0.4MB </p>
+                      </span>
+                    </div>
+                  </div>
+                </KGridItem>
+
+
+                <KGridItem :layout12="{ span: 4 }">
+                  <span
+                    class="add-minus-button"
+                  >
+                    <KIcon 
+                      class="icon-style"
+                      style="font-weight:600" 
+                      icon="emptyTopic" 
+                    />
+                    <KIcon 
+                      class="icon-style"
+                      style="font-weight:600" 
+                      icon="minus" 
+                    />
+                  </span>
+                </KGridItem>
+
+              </KGrid>
+            </DragHandle>
+          </Draggable>
+        </transition-group>
+      </DragContainer>
+
+      <div class="bottom-buttons-style">
+        <KButton
+          :primary="true"
+          text="save & finish"
+          @click="() => {}"
+        />
+      </div>
+    </div>
+  </SidePanelModal>
+
+</template>
+
+
+<script>
+
+  import Draggable from 'kolibri.coreVue.components.Draggable';
+  import DragContainer from 'kolibri.coreVue.components.DragContainer';
+  import DragHandle from 'kolibri.coreVue.components.DragHandle';
+  import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
+
+  export default {
+    name:'ManageSelectedLessonResources',
+    components: {
+      Draggable,
+      DragContainer,
+      DragHandle,
+      DragSortWidget,
+      SidePanelModal,
+    },
+    data(){
+      return {
+        sectionOrderList:[ 1,2,3,4,5]
+      }
+    },
+    computed: {
+      lessonOrderListButtonBorder(){
+        return {
+          borderBottom: `1px solid ${this.$themePalette.grey.v_200}`, 
+          height:`4em`,
+          marginTop:`0.5em`
+        };
+      },
+    }
+  }
+
+</script>
+
+
+<style scoped>
+
+  .add-minus-button{
+    float:right;
+  }
+
+  .arrange-item-block{
+    display:block;
+  }
+
+  .icon-style{
+    font-size:24px;
+  }
+
+  .bottom-buttons-style {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 1em;
+    margin-top: 1em;
+    text-align: right;
+    background-color: #ffffff;
+    border-top: 1px solid black;
+  }
+
+</style>
\ No newline at end of file
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
index 07e657bd5e1..ab640d3b1b1 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
@@ -104,12 +104,12 @@
 
   export default {
     name: 'SectionOrder',
-    components: {
-      Draggable,
-      DragContainer,
-      DragHandle,
-      DragSortWidget,
-    },
+  components: {
+    Draggable,
+    DragContainer,
+    DragHandle,
+    DragSortWidget,
+  },
     mixins: [commonCoreStrings],
     setup(_, context) {
       const {

From 7291c4400ef26d88e2831144c10a0026dc66831a Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 14 Nov 2024 22:46:25 +0300
Subject: [PATCH 02/24] fixes routes

---
 .../coach/assets/src/routes/lessonsRoutes.js  |   3 +-
 .../assets/src/routes/planLessonsRoutes.js    | 247 ++++++++++++++++++
 .../LessonResourceSelectionPage/index.vue     |  15 ++
 .../views/lessons/LessonSummaryPage/index.vue |  32 +++
 .../ManageSelectedLessonResource.vue          |   0
 .../PreviewSelectedResources.vue              |  28 ++
 .../ManageSelectedLessonResource.vue          | 169 ++++++++++++
 7 files changed, 493 insertions(+), 1 deletion(-)
 create mode 100644 kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
 rename kolibri/plugins/coach/assets/src/views/lessons/{LessonResourceSelectionPage => LessonSummaryPage/sidePanels}/ManageSelectedLessonResource.vue (100%)
 create mode 100644 kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue
 create mode 100644 kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue

diff --git a/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js b/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
index cf688592915..8d791353396 100644
--- a/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
@@ -39,6 +39,7 @@ import QuestionLearnersPage from '../views/common/reports/QuestionLearnersPage.v
 import EditLessonDetails from '../views/lessons/LessonSummaryPage/sidePanels/EditLessonDetails';
 import PreviewSelectedResources from '../views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources';
 import LessonResourceSelection from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection';
+import ManageSelectedLessonResources from '../views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResources';
 import { classIdParamRequiredGuard, RouteSegments } from './utils';
 
 const {
@@ -138,7 +139,7 @@ export default [
       {
         name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
         path: 'preview-resources/',
-        component: PreviewSelectedResources,
+        component: ManageSelectedLessonResources,
       },
       {
         name: PageNames.LESSON_PREVIEW_RESOURCE,
diff --git a/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js b/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
new file mode 100644
index 00000000000..78664f7dac0
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
@@ -0,0 +1,247 @@
+import store from 'kolibri.coreVue.vuex.store';
+import {
+  showLessonResourceContentPreview,
+  showLessonResourceSelectionRootPage,
+  showLessonResourceSelectionTopicPage,
+  showLessonSelectionContentPreview,
+  showLessonResourceSearchPage,
+  showLessonResourceBookmarks,
+  showLessonResourceBookmarksMain,
+} from '../modules/lessonResources/handlers';
+import { showLessonSummaryPage } from '../modules/lessonSummary/handlers';
+import { LessonsPageNames } from '../constants/lessonsConstants';
+import { PageNames } from '../constants';
+
+import { useLessons } from '../composables/useLessons';
+
+import LessonsRootPage from '../views/plan/LessonsRootPage';
+import LessonSummaryPage from '../views/plan/LessonSummaryPage';
+import LessonResourceSelectionPage from '../views/plan/LessonResourceSelectionPage';
+import PlanLessonSelectionContentPreview from '../views/plan/PlanLessonSelectionContentPreview';
+import LessonEditDetailsPage from '../views/plan/LessonEditDetailsPage';
+import LessonCreationPage from '../views/plan/LessonCreationPage';
+import EditLessonDetails from '../views/plan/LessonEditDetailsPage/EditLessonDetails.vue';
+import PreviewSelectedResources from '../views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue';
+import LessonResourceSelection from '../views/plan/LessonResourceSelectionPage/LessonResourceSelection.vue';
+import { classIdParamRequiredGuard } from './utils';
+
+const OPTIONAL_CLASS = '/:classId?/plan';
+const CLASS = '/:classId/plan';
+const LESSON = '/lessons/:lessonId';
+const ALL_LESSONS = '/lessons';
+const SELECTION = '/selection';
+const TOPIC = '/topic/:topicId';
+const SEARCH = '/search/:searchTerm';
+const PREVIEW = '/preview/:contentId';
+
+function path(...args) {
+  return args.join('');
+}
+
+const { showLessonsRootPage } = useLessons();
+
+export default [
+  {
+    name: LessonsPageNames.PLAN_LESSONS_ROOT,
+    path: path(OPTIONAL_CLASS, ALL_LESSONS),
+    component: LessonsRootPage,
+    handler(toRoute, fromRoute, next) {
+      if (classIdParamRequiredGuard(toRoute, PageNames.PLAN_PAGE, next)) {
+        return;
+      }
+      showLessonsRootPage(store, toRoute.params.classId);
+    },
+    meta: {
+      titleParts: ['lessonsLabel', 'CLASS_NAME'],
+    },
+  },
+  {
+    name: LessonsPageNames.PLAN_LESSONS_ROOT_BETTER,
+    path: '/:classId/plan/lessonstemp',
+    component: LessonsRootPage,
+    handler(toRoute, fromRoute, next) {
+      if (classIdParamRequiredGuard(toRoute, PageNames.PLAN_PAGE, next)) {
+        return;
+      }
+      showLessonsRootPage(store, toRoute.params.classId);
+    },
+    meta: {
+      titleParts: ['lessonsLabel', 'CLASS_NAME'],
+    },
+  },
+  {
+    name: LessonsPageNames.LESSON_CREATION_ROOT,
+    path: path(CLASS, ALL_LESSONS, '/new'),
+    component: LessonCreationPage,
+  },
+  {
+    name: PageNames.LESSON_CREATION_ROOT_BETTER,
+    path: '/:classId/plan/lessonstemp/:lessonId/edit',
+    component: LessonCreationPage,
+    children: [
+      {
+        name: PageNames.LESSON_EDIT_DETAILS,
+        path: 'details/',
+        component: EditLessonDetails,
+        props: {
+          text: 'test',
+        },
+      },
+      {
+
+        
+        name: PageNames.LESSON_SELECT_RESOURCES,
+        path: 'select-resources/:topicId?',
+        component: LessonResourceSelection,
+      },
+      {
+        name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
+        path: 'preview-resources/',
+        component: PreviewSelectedResources,
+      },
+      {
+        name: PageNames.LESSON_PREVIEW_RESOURCE,
+        path: 'preview-resources/:nodeId',
+        component: PreviewSelectedResources,
+      },
+    ],
+  },
+  {
+    name: LessonsPageNames.SUMMARY,
+    path: '/:classId/plan/lessonstemp/:lessonId/:tabId?',
+    component: LessonSummaryPage,
+    handler(toRoute, fromRoute) {
+      if (
+        fromRoute.name !== LessonsPageNames.SUMMARY ||
+        toRoute.params.lessonId !== fromRoute.params.lessonId
+      ) {
+        return showLessonSummaryPage(store, toRoute.params);
+      }
+      store.dispatch('notLoading');
+    },
+    meta: {
+      titleParts: ['LESSON_NAME', 'CLASS_NAME'],
+    },
+  },
+  {
+    name: LessonsPageNames.SUMMARY,
+    path: path(CLASS, LESSON),
+    component: LessonSummaryPage,
+    handler(toRoute, fromRoute) {
+      if (
+        fromRoute.name !== LessonsPageNames.SUMMARY ||
+        toRoute.params.lessonId !== fromRoute.params.lessonId
+      ) {
+        return showLessonSummaryPage(store, toRoute.params);
+      }
+      store.dispatch('notLoading');
+    },
+    meta: {
+      titleParts: ['LESSON_NAME', 'CLASS_NAME'],
+    },
+  },
+  {
+    name: LessonEditDetailsPage.name,
+    path: path(CLASS, LESSON, '/edit'),
+    component: LessonEditDetailsPage,
+  },
+  {
+    name: LessonsPageNames.SELECTION_ROOT,
+    path: path(CLASS, LESSON, SELECTION),
+    component: LessonResourceSelectionPage,
+    handler(toRoute) {
+      showLessonResourceSelectionRootPage(store, toRoute.params);
+    },
+  },
+  {
+    name: LessonsPageNames.SELECTION,
+    path: path(CLASS, LESSON, SELECTION, TOPIC),
+    component: LessonResourceSelectionPage,
+    handler(toRoute, fromRoute) {
+      // HACK if last page was LessonContentPreviewPage, then we need to make sure
+      // to immediately autosave just in case a change was made there. This gets
+      // called whether or not a change is made, because we don't track changes
+      // enough steps back.
+      let preHandlerPromise;
+      if (fromRoute.name === LessonsPageNames.SELECTION_CONTENT_PREVIEW) {
+        preHandlerPromise = store.dispatch('lessonSummary/saveLessonResources', {
+          lessonId: toRoute.params.lessonId,
+          resources: store.state.lessonSummary.workingResources,
+        });
+      } else {
+        preHandlerPromise = Promise.resolve();
+      }
+      preHandlerPromise.then(() => {
+        showLessonResourceSelectionTopicPage(store, toRoute.params);
+      });
+    },
+  },
+  {
+    name: LessonsPageNames.SELECTION_SEARCH,
+    path: path(CLASS, LESSON, SELECTION, SEARCH),
+    component: LessonResourceSelectionPage,
+    handler(toRoute) {
+      showLessonResourceSearchPage(store, toRoute.params, toRoute.query);
+    },
+  },
+  {
+    name: LessonsPageNames.LESSON_SELECTION_BOOKMARKS,
+    path: path(CLASS, LESSON, SELECTION, TOPIC),
+    component: LessonResourceSelectionPage,
+    handler(toRoute, fromRoute) {
+      let preHandlerPromise;
+      if (fromRoute.name === LessonsPageNames.SELECTION_CONTENT_PREVIEW) {
+        preHandlerPromise = store.dispatch('lessonSummary/saveLessonResources', {
+          lessonId: toRoute.params.lessonId,
+          resources: store.state.lessonSummary.workingResources,
+        });
+      } else {
+        preHandlerPromise = Promise.resolve();
+      }
+      preHandlerPromise.then(() => {
+        showLessonResourceBookmarks(store, toRoute.params, toRoute.query);
+      });
+    },
+  },
+  {
+    name: LessonsPageNames.LESSON_SELECTION_BOOKMARKS_MAIN,
+    path: path(CLASS, LESSON, SELECTION),
+    component: LessonResourceSelectionPage,
+    handler(toRoute) {
+      showLessonResourceBookmarksMain(store, toRoute.params, toRoute.query);
+    },
+  },
+  {
+    name: LessonsPageNames.SELECTION_CONTENT_PREVIEW,
+    path: path(CLASS, LESSON, SELECTION, PREVIEW),
+    component: PlanLessonSelectionContentPreview,
+    handler(toRoute) {
+      showLessonSelectionContentPreview(store, toRoute.params, toRoute.query);
+    },
+  },
+  {
+    name: LessonsPageNames.RESOURCE_CONTENT_PREVIEW,
+    path: path(CLASS, LESSON, '/resource', PREVIEW),
+    component: PlanLessonSelectionContentPreview,
+    props(data) {
+      let backRoute;
+      // If linked from the Reports section, go back there
+      if (data.query.last === 'LessonReportEditDetailsPage') {
+        backRoute = {
+          name: 'LessonReportEditDetailsPage',
+        };
+      } else {
+        backRoute = {
+          name: LessonsPageNames.SUMMARY,
+        };
+      }
+      return {
+        showSelectOptions: false,
+        backRoute,
+      };
+    },
+    handler(toRoute) {
+      showLessonResourceContentPreview(store, toRoute.params);
+    },
+  },
+];
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue
index 9496de9d7be..361ca6043b1 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue
@@ -96,6 +96,13 @@
     </KPageContainer>
 
     <BottomAppBar>
+      <KRouterLink
+        :text="$tr('numbeOfSelectedResourcesLabel', { count: workingResources.length })"
+        :primary="true"
+        :to="goToPreviewSelection()"
+        :style="{ marginRight: '1em' , marginTop: '0.5em' }"
+      />
+
       <KRouterLink
         :text="bottomBarButtonText"
         :primary="true"
@@ -561,12 +568,20 @@
       topicsLink(topicId) {
         return this.topicListingLink({ ...this.$route.params, topicId });
       },
+      goToPreviewSelection(){
+        return{
+           name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES
+        }
+      }
     },
     $trs: {
       resources: {
         message: '{count} {count, plural, one {resource} other {resources}}',
         context: "Only translate 'resource' and 'resources'.",
       },
+      numbeOfSelectedResourcesLabel:{
+        message:'{count, number, integer} {count, plural, one {resource selected} other {resources selected}} '
+      },
       selectionInformation: {
         message:
           '{count, number, integer} of {total, number, integer} {total, plural, one {resource selected} other {resources selected}}',
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
index 40831b43074..7018427f4b0 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
@@ -74,6 +74,33 @@
             :currentAction="currentAction"
             @cancel="currentAction = ''"
           />
+
+          <SidePanelModal
+            v-if="false"
+            ref="resourcePanel"
+            alignment="right"
+            sidePanelWidth="700px"
+            closeButtonIconType="close"
+            @closePanel="() => $router.go(-1)"
+            @shouldFocusFirstEl="() => null"
+          >
+            <template #header>
+              <KIconButton
+                v-if="true"
+                icon="back"
+                @click="$router.go(-1)"
+              />
+              <span :style="{ fontWeight: '600' }">
+                {{ $tr('numberOfSelectedResource', { count: resourcesTable.length }) }}
+              </span>
+            </template>
+            <router-view @closePanel="() => $router.go(-1)" />
+            <ManageSelectedLessonResources
+              :lessonResourceList="resourcesTable"
+              :lessonObject="currentLesson"
+              @handleSavingResources="showSidePanel === false"
+            />
+          </SidePanelModal>
         </KPageContainer>
       </KGridItem>
     </KGrid>
@@ -150,6 +177,7 @@
         ReportsLessonTabs,
         workingResourcesBackup,
         REPORTS_LESSON_TABS_ID,
+        showSidePanel:true,
       };
     },
     computed: {
@@ -359,6 +387,10 @@
         message: 'Undo',
         context: 'Allows user to undo an action.',
       },
+      numberOfSelectedResource: {
+        message: '{count, number, integer} {count, plural, one {resource selected} other {resources selected}}',
+        context:'Indicates the number of resources selected'
+      }
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
similarity index 100%
rename from kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
rename to kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue
new file mode 100644
index 00000000000..971988f297b
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue
@@ -0,0 +1,28 @@
+<template>
+
+  <ManageSelectedLessonResources 
+    :lessonResourceList="resources"
+    :lessonObject="lessonObject"
+  />
+
+</template>
+
+
+<script>
+
+  import ManageSelectedLessonResources from '../LessonResourceSelectionPage/ManageSelectedLessonResource';
+
+  export default {
+    name: 'PreviewSelectedResources',
+    components: {
+      ManageSelectedLessonResources,
+    },
+    data() {
+      return {
+        resources: [],
+        lessonObject: {},
+      }
+    },  
+  };
+
+</script>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
new file mode 100644
index 00000000000..2af5a263739
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
@@ -0,0 +1,169 @@
+<template>
+
+  <div>
+    <p>{{ coreString('lessonsLabel') }} : {{ lessonObject.title }} </p>
+
+    <p>{{ $tr('sizeLabel') }} : {{ bytesForHumans(lessonObject.size) }}</p>
+
+    <div
+      v-for="(lesson , index) in resources"
+      :key="index"
+    >
+      <KGrid :style="lessonOrderListButtonBorder">
+        <KGridItem :layout12="{ span: 6 }">
+          <div style="display:flex;">
+            <div>
+              <DragSortWidget
+                moveUpText="up"
+                moveDownText="down"
+                :noDrag="true"
+                :isFirst="index === 0"
+                :isLast="index === resources.length - 1"
+                @moveUp="() => {}"
+                @moveDown="() => {}"
+              />
+            </div>
+            <div style="padding:0px 10px">
+              <span
+                style="flex: 1"
+              >
+                <LearningActivityIcon
+                  :kind="lesson.learning_activities[0]"
+                  class="icon-style" 
+                />
+              </span>
+            </div>
+            <div>
+              <span
+                class="arrange-item-block"
+              >
+                <span>
+                  <KRouterLink  
+                    v-if="lesson.link"
+                    :text="lesson.title"
+                    :to="lesson.link"
+                    style="font-size:14px"
+                  />
+                </span>
+                <p style="font-size:12px"> 4MB </p>
+              </span>
+            </div>
+          </div>
+        </KGridItem>
+
+
+        <KGridItem :layout12="{ span: 6 }">
+          <span
+            class="add-minus-button"
+          >
+            <KIconButton
+              icon="emptyTopic" 
+              @click="()=>{ }"
+            />
+
+            <KIconButton
+              icon="minus"
+              @click="removeResource(lesson.id)"              
+            />
+             
+          </span>
+        </KGridItem>
+
+      </KGrid>
+    </div>
+
+    <div class="bottom-buttons-style">
+      <KButton
+        :primary="true"
+        text="save & finish"
+        @click="()=>{ }"
+      />
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
+  import  commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
+  import bytesForHumans from 'kolibri.utils.bytesForHumans';
+
+  export default {
+    name:'ManageSelectedLessonResources',
+    components: {
+      DragSortWidget,
+      LearningActivityIcon
+    },
+    mixins:[commonCoreStrings],
+    props:{
+      lessonResourceList:{
+        type: Array,
+        required:true
+      },
+      lessonObject:{
+        type: Object,
+        required:true
+      },
+    },
+    data(){
+      return {
+        resources: this.lessonResourceList,
+      }
+    },
+    computed: {
+      lessonOrderListButtonBorder(){
+        return {
+          borderBottom: `1px solid ${this.$themePalette.grey.v_200}`, 
+          height:`4em`,
+          marginTop:`0.5em`
+        };
+      },
+    },
+    methods:{
+      removeResource(id){
+        this.resources = this.resources.filter((lesson) => lesson.id !== id);
+      },
+      bytesForHumans,
+    },
+
+    $trs:{
+      sizeLabel:{
+        message: 'Size',
+        context: 'Size of the lesson'
+      }
+    }
+  }
+
+</script>
+
+
+<style scoped>
+
+  .add-minus-button{
+    float:right;
+  }
+
+  .arrange-item-block{
+    display:block;
+  }
+
+  .icon-style{
+    font-size:24px;
+  }
+
+  .bottom-buttons-style {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 1em;
+    margin-top: 1em;
+    text-align: right;
+    background-color: #ffffff;
+    border-top: 1px solid black;
+  }
+
+</style>
\ No newline at end of file

From 4e571ab65bbc33c0ff738d2265a06cdb83d4bd87 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Mon, 18 Nov 2024 21:41:33 +0300
Subject: [PATCH 03/24] fixes the routing issue

---
 .../assets/src/routes/planLessonsRoutes.js    |  3 +-
 .../src/views/lessons/LessonCreationPage.vue  | 46 +++++++++++++++++++
 .../views/lessons/LessonSummaryPage/index.vue |  3 ++
 .../ManageSelectedResourcePanel.vue           | 20 ++++++++
 .../ManageSelectedLessonResource.vue          |  1 -
 5 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/ManageSelectedResourcePanel.vue

diff --git a/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js b/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
index 78664f7dac0..df3a6531c83 100644
--- a/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
@@ -22,6 +22,7 @@ import LessonEditDetailsPage from '../views/plan/LessonEditDetailsPage';
 import LessonCreationPage from '../views/plan/LessonCreationPage';
 import EditLessonDetails from '../views/plan/LessonEditDetailsPage/EditLessonDetails.vue';
 import PreviewSelectedResources from '../views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue';
+import ManageSelectedResourcePanel from '../views/plan/LessonContentPreviewPage/ManageSelectedResourcePanel.vue';
 import LessonResourceSelection from '../views/plan/LessonResourceSelectionPage/LessonResourceSelection.vue';
 import { classIdParamRequiredGuard } from './utils';
 
@@ -97,7 +98,7 @@ export default [
       {
         name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
         path: 'preview-resources/',
-        component: PreviewSelectedResources,
+        component: ManageSelectedResourcePanel,
       },
       {
         name: PageNames.LESSON_PREVIEW_RESOURCE,
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonCreationPage.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonCreationPage.vue
index a719a9e3b0c..f9189ddaf1a 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonCreationPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonCreationPage.vue
@@ -45,6 +45,33 @@
       classId() {
         return this.$route.params.classId;
       },
+      recipients() {
+        return this.getLearnersForLesson(this.currentLesson);
+      },
+      resourcesTable() {
+        return this.workingResources.map(resource => {
+          const content = this.resourceCache[resource.contentnode_id];
+          if (!content) {
+            return this.missingResourceObj(resource.contentnode_id);
+          }
+
+          const tally = this.getContentStatusTally(content.content_id, this.recipients);
+          const tableRow = {
+            ...content,
+            node_id: content.id,
+            avgTimeSpent: this.getContentAvgTimeSpent(content.content_id, this.recipients),
+            tally,
+            hasAssignments: Object.values(tally).reduce((a, b) => a + b, 0),
+          };
+
+          const link = this.resourceLink(tableRow);
+          if (link) {
+            tableRow.link = link;
+          }
+
+          return tableRow;
+        });
+      },
     },
     created() {
       const initClassInfoPromise = this.$store.dispatch('initClassInfo', this.classId);
@@ -77,6 +104,25 @@
             }
           });
       },
+      resourceLink(resource) {
+        if (resource.hasAssignments) {
+          if (resource.kind === this.ContentNodeKinds.EXERCISE) {
+            return this.classRoute(
+              this.group
+                ? 'ReportsGroupReportLessonExerciseLearnerListPage'
+                : 'ReportsLessonExerciseLearnerListPage',
+              { exerciseId: resource.content_id },
+            );
+          } else {
+            return this.classRoute(
+              this.group
+                ? 'ReportsGroupReportLessonResourceLearnerListPage'
+                : 'ReportsLessonResourceLearnerListPage',
+              { resourceId: resource.content_id },
+            );
+          }
+        }
+      },
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
index 7018427f4b0..88e8f4238c6 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
@@ -288,6 +288,9 @@
         }
       },
     },
+    mounted(){
+      console.log(this.route.params);
+    },
     methods: {
       ...mapActions('lessonSummary', [
         'saveLessonResources',
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/ManageSelectedResourcePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/ManageSelectedResourcePanel.vue
new file mode 100644
index 00000000000..a624d33f4de
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/ManageSelectedResourcePanel.vue
@@ -0,0 +1,20 @@
+<template>
+
+    
+  <div>
+    
+  </div>
+
+</template>
+  
+  
+<script>
+
+  
+  export default {
+    name: 'ManageSelectedResource',
+  };
+  
+</script>
+  
+  
\ No newline at end of file
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
index 2af5a263739..3ae195a8666 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
@@ -65,7 +65,6 @@
               icon="minus"
               @click="removeResource(lesson.id)"              
             />
-             
           </span>
         </KGridItem>
 

From 0b1e4a0b509d67f928cb58a08166a3160cba4074 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 21 Nov 2024 22:36:46 +0300
Subject: [PATCH 04/24] clean up routing business

---
 .../coach/assets/src/routes/lessonsRoutes.js  |   2 +-
 .../sidePanels/LessonResourceSelection.vue    |  27 ++-
 .../ManageSelectedLessonResource.vue          | 222 ++++++++++--------
 .../ManageSelectedLessonResource.vue          | 168 -------------
 4 files changed, 148 insertions(+), 271 deletions(-)
 delete mode 100644 kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue

diff --git a/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js b/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
index 8d791353396..825b54842d9 100644
--- a/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
@@ -39,7 +39,7 @@ import QuestionLearnersPage from '../views/common/reports/QuestionLearnersPage.v
 import EditLessonDetails from '../views/lessons/LessonSummaryPage/sidePanels/EditLessonDetails';
 import PreviewSelectedResources from '../views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources';
 import LessonResourceSelection from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection';
-import ManageSelectedLessonResources from '../views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResources';
+import ManageSelectedLessonResources from '../views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource';
 import { classIdParamRequiredGuard, RouteSegments } from './utils';
 
 const {
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
index ba5a5caa01b..79ede6152fe 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
@@ -94,10 +94,13 @@
     </div>
 
     <template #bottomNavigation>
-      <div
-        v-if="showSearch"
-        class="bottom-nav-container"
-      >
+      <div class="bottom-nav-container">
+        <KRouterLink
+          :text="$tr('numbeOfSelectedResourcesLabel', { count: workingResources.length })"
+          :primary="true"
+          :to="{ name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES }"
+          :style="{ marginRight: '1em' , marginTop: '0.5em' }"
+        />
         <KButton
           primary
           :text="saveAndFinishAction$()"
@@ -118,8 +121,8 @@
   import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
   import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
   import AccessibleChannelCard from 'kolibri-common/components/Cards/AccessibleChannelCard.vue';
-  import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel/index.vue';
-  import useBaseSearch from 'kolibri-common/composables/useBaseSearch';
+  import { mapState } from 'vuex';
+  import { PageNames } from '../../../../constants';
 
   export default {
     name: 'LessonResourceSelection',
@@ -185,6 +188,14 @@
         saveAndFinishAction$,
       };
     },
+    data(){
+      return {
+        PageNames,
+      }
+    },
+    computed:{
+      ...mapState('lessonSummary', ['workingResources']),
+    },
     methods: {
       closeSidePanel() {
         this.$router.go(-1);
@@ -196,6 +207,10 @@
         context:
           "In the 'Manage lesson resources' coaches can add new/remove resource material to a lesson.",
       },
+      numbeOfSelectedResourcesLabel:{
+        message:'{count, number, integer} {count, plural, one {resource selected} other {resources selected}} ',
+        context:"This is the label that shows the number of resources selected in the lesson resource selection page"
+      }
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
index b58895cbf8b..157e37ba1f3 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
@@ -1,107 +1,100 @@
 <template>
-
   <SidePanelModal
     alignment="right"
     sidePanelWidth="700px"
-    @closePanel="() => $router.go(-1)"
+    closeButtonIconType="close"
+    @closePanel="closeSidePanel"
     @shouldFocusFirstEl="() => null"
   >
-  
-  
-    <div>
-        
-      
-      <p>Lesson : Intro to chemical bond </p>
+    <template #header>
+      <h4 class="side-panel-title"> {{ $tr('numberOfSelectedResource',{ count : resourcesTable.length })}}</h4>
+      <router-view @closePanel="() => $router.go(-1)" />
+    </template>
 
-      <p>Size : 16 MB</p>
+    <div v-if="resourcesTable.length === 0">
+      <KCircularLoader />
+    </div>
 
+    <div v-else>
+      <p>{{ coreString('lessonsLabel') }} : {{ currentLesson.title }} </p>
+      <p>{{ $tr('sizeLabel') }} : {{ bytesForHumans(currentLesson.size) }}</p>
 
-      <DragContainer
-        v-if="sectionOrderList.length > 0"
-        :items="sectionOrderList"
-        @sort=""
+      <div
+        v-for="(lesson , index) in resourcesTable"
+        :key="index"
       >
-        <transition-group>
-          <Draggable
-            v-for="(index) in sectionOrderList"
-            :key="index"
-          >
-            <DragHandle>
-              <KGrid :style="lessonOrderListButtonBorder">
-                <KGridItem :layout12="{ span: 8 }">
-                  <div style="display:flex;">
-                    <div>
-                      <DragSortWidget
-                        class="drag-title"
-                        moveUpText="up"
-                        moveDownText="down"
-                        :noDrag="true"
-                        :isFirst="index === 0"
-                        :isLast="index === sectionOrderList.length - 1"
-                        @moveUp="() => {}"
-                        @moveDown="() => {}"
-                      />
-                    </div>
-                    <div style="padding:0px 10px">
-                      <span
-                        class="drag-title"
-                        style="flex: 1"
-                      >
-                        <KIcon
-                          class="icon-style"
-                          icon="practiceSolid"
-                        />
-                      </span>
-                    </div>
-                    <div>
-                      <span
-                        class="arrange-item-block"
-                      >
-                        <span>
-                          <KRouterLink  
-                            text="Metallic bond"
-                            :to="{}" 
-                            style="font-size:14px"
-                          />
-                        </span>
-                        <p style="font-size:12px"> 0.4MB </p>
-                      </span>
-                    </div>
-                  </div>
-                </KGridItem>
-
-
-                <KGridItem :layout12="{ span: 4 }">
-                  <span
-                    class="add-minus-button"
-                  >
-                    <KIcon 
-                      class="icon-style"
-                      style="font-weight:600" 
-                      icon="emptyTopic" 
-                    />
-                    <KIcon 
-                      class="icon-style"
-                      style="font-weight:600" 
-                      icon="minus" 
+        <KGrid :style="lessonOrderListButtonBorder">
+          <KGridItem :layout12="{ span: 6 }">
+            <div style="display:flex;">
+              <div>
+                <DragSortWidget
+                  moveUpText="up"
+                  moveDownText="down"
+                  :noDrag="true"
+                  :isFirst="index === 0"
+                  :isLast="index === resourcesTable.length - 1"
+                  @moveUp="() => {}"
+                  @moveDown="() => {}"
+                />
+              </div>
+              <div style="padding:0px 10px">
+                <span
+                  style="flex: 1"
+                >
+                  <LearningActivityIcon
+                    :kind="lesson.learning_activities[0]"
+                    class="icon-style"
+                  />
+                </span>
+              </div>
+              <div>
+                <span
+                  class="arrange-item-block"
+                >
+                  <span>
+                    <KRouterLink
+                      v-if="lesson.link"
+                      :text="lesson.title"
+                      :to="lesson.link"
+                      style="font-size:14px"
                     />
                   </span>
-                </KGridItem>
+                  <p style="font-size:12px"> 4MB </p>
+                </span>
+              </div>
+            </div>
+          </KGridItem>
+
+          <KGridItem :layout12="{ span: 6 }">
+            <span
+              class="add-minus-button"
+            >
+              <KIconButton
+                icon="emptyTopic"
+                @click="()=>{ }"
+              />
+
+              <KIconButton
+                icon="minus"
+                @click="removeResource(lesson.id)"
+              />
+            </span>
+          </KGridItem>
+
+        </KGrid>
+      </div>
+    </div>
 
-              </KGrid>
-            </DragHandle>
-          </Draggable>
-        </transition-group>
-      </DragContainer>
 
+    <template #bottomNavigation>
       <div class="bottom-buttons-style">
         <KButton
           :primary="true"
           text="save & finish"
-          @click="() => {}"
+          @click="closeSidePanel()"
         />
       </div>
-    </div>
+    </template>
   </SidePanelModal>
 
 </template>
@@ -109,27 +102,29 @@
 
 <script>
 
-  import Draggable from 'kolibri.coreVue.components.Draggable';
-  import DragContainer from 'kolibri.coreVue.components.DragContainer';
-  import DragHandle from 'kolibri.coreVue.components.DragHandle';
-  import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
+  import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
+  import bytesForHumans from 'kolibri/uiText/bytesForHumans';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
+  import { mapState } from 'vuex';
 
   export default {
     name:'ManageSelectedLessonResources',
     components: {
-      Draggable,
-      DragContainer,
-      DragHandle,
       DragSortWidget,
-      SidePanelModal,
+      LearningActivityIcon,
+      SidePanelModal
     },
+    mixins:[commonCoreStrings],
     data(){
       return {
-        sectionOrderList:[ 1,2,3,4,5]
+        resources: [],
+        isLoading:false,
       }
     },
     computed: {
+      ...mapState('lessonSummary', ['currentLesson', 'workingResources','resourceCache']),
       lessonOrderListButtonBorder(){
         return {
           borderBottom: `1px solid ${this.$themePalette.grey.v_200}`, 
@@ -137,6 +132,44 @@
           marginTop:`0.5em`
         };
       },
+      resourcesTable(){
+        return this.workingResources.map(resource => {
+          const content = this.resourceCache[resource.contentnode_id];
+          if (!content) {
+            return this.missingResourceObj(resource.contentnode_id);
+          }
+          const tableRow = {
+            ...content,
+            node_id: content.id,
+          };
+
+          const link = {};
+          if (link) {
+            tableRow.link = link;
+          }
+
+          return tableRow;
+        })
+      },
+    },
+    methods:{
+      removeResource(id){
+        this.resources = this.resources.filter((lesson) => lesson.id !== id);
+      },
+      closeSidePanel() {
+        this.$router.go(-2);
+      },
+      bytesForHumans,
+    },
+    $trs:{
+      sizeLabel:{
+        message: 'Size',
+        context: 'Size of the lesson'
+      },
+      numberOfSelectedResource: {
+        message: '{count, number, integer} {count, plural, one {resource selected} other {resources selected}}',
+        context:'Indicates the number of resources selected'
+      }
     }
   }
 
@@ -148,15 +181,12 @@
   .add-minus-button{
     float:right;
   }
-
   .arrange-item-block{
     display:block;
   }
-
   .icon-style{
     font-size:24px;
   }
-
   .bottom-buttons-style {
     position: absolute;
     right: 0;
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
deleted file mode 100644
index 3ae195a8666..00000000000
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-
-  <div>
-    <p>{{ coreString('lessonsLabel') }} : {{ lessonObject.title }} </p>
-
-    <p>{{ $tr('sizeLabel') }} : {{ bytesForHumans(lessonObject.size) }}</p>
-
-    <div
-      v-for="(lesson , index) in resources"
-      :key="index"
-    >
-      <KGrid :style="lessonOrderListButtonBorder">
-        <KGridItem :layout12="{ span: 6 }">
-          <div style="display:flex;">
-            <div>
-              <DragSortWidget
-                moveUpText="up"
-                moveDownText="down"
-                :noDrag="true"
-                :isFirst="index === 0"
-                :isLast="index === resources.length - 1"
-                @moveUp="() => {}"
-                @moveDown="() => {}"
-              />
-            </div>
-            <div style="padding:0px 10px">
-              <span
-                style="flex: 1"
-              >
-                <LearningActivityIcon
-                  :kind="lesson.learning_activities[0]"
-                  class="icon-style" 
-                />
-              </span>
-            </div>
-            <div>
-              <span
-                class="arrange-item-block"
-              >
-                <span>
-                  <KRouterLink  
-                    v-if="lesson.link"
-                    :text="lesson.title"
-                    :to="lesson.link"
-                    style="font-size:14px"
-                  />
-                </span>
-                <p style="font-size:12px"> 4MB </p>
-              </span>
-            </div>
-          </div>
-        </KGridItem>
-
-
-        <KGridItem :layout12="{ span: 6 }">
-          <span
-            class="add-minus-button"
-          >
-            <KIconButton
-              icon="emptyTopic" 
-              @click="()=>{ }"
-            />
-
-            <KIconButton
-              icon="minus"
-              @click="removeResource(lesson.id)"              
-            />
-          </span>
-        </KGridItem>
-
-      </KGrid>
-    </div>
-
-    <div class="bottom-buttons-style">
-      <KButton
-        :primary="true"
-        text="save & finish"
-        @click="()=>{ }"
-      />
-    </div>
-  </div>
-
-</template>
-
-
-<script>
-
-  import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
-  import  commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
-  import bytesForHumans from 'kolibri.utils.bytesForHumans';
-
-  export default {
-    name:'ManageSelectedLessonResources',
-    components: {
-      DragSortWidget,
-      LearningActivityIcon
-    },
-    mixins:[commonCoreStrings],
-    props:{
-      lessonResourceList:{
-        type: Array,
-        required:true
-      },
-      lessonObject:{
-        type: Object,
-        required:true
-      },
-    },
-    data(){
-      return {
-        resources: this.lessonResourceList,
-      }
-    },
-    computed: {
-      lessonOrderListButtonBorder(){
-        return {
-          borderBottom: `1px solid ${this.$themePalette.grey.v_200}`, 
-          height:`4em`,
-          marginTop:`0.5em`
-        };
-      },
-    },
-    methods:{
-      removeResource(id){
-        this.resources = this.resources.filter((lesson) => lesson.id !== id);
-      },
-      bytesForHumans,
-    },
-
-    $trs:{
-      sizeLabel:{
-        message: 'Size',
-        context: 'Size of the lesson'
-      }
-    }
-  }
-
-</script>
-
-
-<style scoped>
-
-  .add-minus-button{
-    float:right;
-  }
-
-  .arrange-item-block{
-    display:block;
-  }
-
-  .icon-style{
-    font-size:24px;
-  }
-
-  .bottom-buttons-style {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    padding: 1em;
-    margin-top: 1em;
-    text-align: right;
-    background-color: #ffffff;
-    border-top: 1px solid black;
-  }
-
-</style>
\ No newline at end of file

From c5a0cce75f08afcc86bbf8eadb42ba651ae6ae30 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Fri, 22 Nov 2024 21:03:09 +0300
Subject: [PATCH 05/24] clean ups importations

---
 .../assets/src/routes/planLessonsRoutes.js    |  20 +--
 .../views/lessons/LessonSummaryPage/index.vue |  30 ----
 .../ManageSelectedLessonResource.vue          | 132 +++-----------
 .../sidePanels/SelectedResource.vue           | 165 ++++++++++++++++++
 .../ManageSelectedResourcePanel.vue           |  20 ---
 .../PreviewSelectedResources.vue              |  28 ---
 6 files changed, 198 insertions(+), 197 deletions(-)
 create mode 100644 kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResource.vue
 delete mode 100644 kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/ManageSelectedResourcePanel.vue
 delete mode 100644 kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue

diff --git a/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js b/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
index df3a6531c83..192ed37ddeb 100644
--- a/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
@@ -14,16 +14,16 @@ import { PageNames } from '../constants';
 
 import { useLessons } from '../composables/useLessons';
 
-import LessonsRootPage from '../views/plan/LessonsRootPage';
-import LessonSummaryPage from '../views/plan/LessonSummaryPage';
-import LessonResourceSelectionPage from '../views/plan/LessonResourceSelectionPage';
-import PlanLessonSelectionContentPreview from '../views/plan/PlanLessonSelectionContentPreview';
-import LessonEditDetailsPage from '../views/plan/LessonEditDetailsPage';
-import LessonCreationPage from '../views/plan/LessonCreationPage';
-import EditLessonDetails from '../views/plan/LessonEditDetailsPage/EditLessonDetails.vue';
-import PreviewSelectedResources from '../views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue';
-import ManageSelectedResourcePanel from '../views/plan/LessonContentPreviewPage/ManageSelectedResourcePanel.vue';
-import LessonResourceSelection from '../views/plan/LessonResourceSelectionPage/LessonResourceSelection.vue';
+import LessonsRootPage from '../views/lessons/LessonsRootPage';
+import LessonSummaryPage from '../views/lessons/LessonSummaryPage';
+import LessonResourceSelectionPage from '../views/lessons/LessonResourceSelectionPage';
+import PlanLessonSelectionContentPreview from '../views/lessons/LessonSelectionContentPreviewPage';
+import LessonEditDetailsPage from '../views/lessons/LessonEditDetailsPage';
+import LessonCreationPage from '../views/lessons/LessonCreationPage';
+import EditLessonDetails from '../views/lessons/LessonEditDetailsPage/EditDetailsResourceListTable.vue';
+import PreviewSelectedResources from '../views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources';
+import ManageSelectedResourcePanel from '../views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource';
+import LessonResourceSelection from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection';
 import { classIdParamRequiredGuard } from './utils';
 
 const OPTIONAL_CLASS = '/:classId?/plan';
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
index 88e8f4238c6..8ca767a6855 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
@@ -74,33 +74,6 @@
             :currentAction="currentAction"
             @cancel="currentAction = ''"
           />
-
-          <SidePanelModal
-            v-if="false"
-            ref="resourcePanel"
-            alignment="right"
-            sidePanelWidth="700px"
-            closeButtonIconType="close"
-            @closePanel="() => $router.go(-1)"
-            @shouldFocusFirstEl="() => null"
-          >
-            <template #header>
-              <KIconButton
-                v-if="true"
-                icon="back"
-                @click="$router.go(-1)"
-              />
-              <span :style="{ fontWeight: '600' }">
-                {{ $tr('numberOfSelectedResource', { count: resourcesTable.length }) }}
-              </span>
-            </template>
-            <router-view @closePanel="() => $router.go(-1)" />
-            <ManageSelectedLessonResources
-              :lessonResourceList="resourcesTable"
-              :lessonObject="currentLesson"
-              @handleSavingResources="showSidePanel === false"
-            />
-          </SidePanelModal>
         </KPageContainer>
       </KGridItem>
     </KGrid>
@@ -288,9 +261,6 @@
         }
       },
     },
-    mounted(){
-      console.log(this.route.params);
-    },
     methods: {
       ...mapActions('lessonSummary', [
         'saveLessonResources',
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
index 157e37ba1f3..b235b0017e0 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
@@ -7,83 +7,19 @@
     @shouldFocusFirstEl="() => null"
   >
     <template #header>
-      <h4 class="side-panel-title"> {{ $tr('numberOfSelectedResource',{ count : resourcesTable.length })}}</h4>
-      <router-view @closePanel="() => $router.go(-1)" />
+      <KIconButton
+        v-if="true"
+        icon="back"
+        @click="$router.go(-1)"
+      />
+      <span :style="{ fontWeight: '600' }" class="side-panel-title"> {{ $tr('numberOfSelectedResource',{ count : fetchResources.length })}}</span>
     </template>
 
-    <div v-if="resourcesTable.length === 0">
-      <KCircularLoader />
-    </div>
-
-    <div v-else>
-      <p>{{ coreString('lessonsLabel') }} : {{ currentLesson.title }} </p>
-      <p>{{ $tr('sizeLabel') }} : {{ bytesForHumans(currentLesson.size) }}</p>
-
-      <div
-        v-for="(lesson , index) in resourcesTable"
-        :key="index"
-      >
-        <KGrid :style="lessonOrderListButtonBorder">
-          <KGridItem :layout12="{ span: 6 }">
-            <div style="display:flex;">
-              <div>
-                <DragSortWidget
-                  moveUpText="up"
-                  moveDownText="down"
-                  :noDrag="true"
-                  :isFirst="index === 0"
-                  :isLast="index === resourcesTable.length - 1"
-                  @moveUp="() => {}"
-                  @moveDown="() => {}"
-                />
-              </div>
-              <div style="padding:0px 10px">
-                <span
-                  style="flex: 1"
-                >
-                  <LearningActivityIcon
-                    :kind="lesson.learning_activities[0]"
-                    class="icon-style"
-                  />
-                </span>
-              </div>
-              <div>
-                <span
-                  class="arrange-item-block"
-                >
-                  <span>
-                    <KRouterLink
-                      v-if="lesson.link"
-                      :text="lesson.title"
-                      :to="lesson.link"
-                      style="font-size:14px"
-                    />
-                  </span>
-                  <p style="font-size:12px"> 4MB </p>
-                </span>
-              </div>
-            </div>
-          </KGridItem>
-
-          <KGridItem :layout12="{ span: 6 }">
-            <span
-              class="add-minus-button"
-            >
-              <KIconButton
-                icon="emptyTopic"
-                @click="()=>{ }"
-              />
-
-              <KIconButton
-                icon="minus"
-                @click="removeResource(lesson.id)"
-              />
-            </span>
-          </KGridItem>
-
-        </KGrid>
-      </div>
-    </div>
+    <SelectedResource
+      :resourceList="fetchResources"
+      :currentLesson="currentLesson"
+      :loading="fetchResources.length === 0"
+    />
 
 
     <template #bottomNavigation>
@@ -102,37 +38,26 @@
 
 <script>
 
-  import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
-  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
-  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
-  import bytesForHumans from 'kolibri/uiText/bytesForHumans';
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { mapState } from 'vuex';
+  import SelectedResource from './SelectedResource';
 
   export default {
     name:'ManageSelectedLessonResources',
     components: {
-      DragSortWidget,
-      LearningActivityIcon,
-      SidePanelModal
-    },
-    mixins:[commonCoreStrings],
-    data(){
-      return {
-        resources: [],
-        isLoading:false,
-      }
+      SidePanelModal,
+      SelectedResource
     },
     computed: {
       ...mapState('lessonSummary', ['currentLesson', 'workingResources','resourceCache']),
       lessonOrderListButtonBorder(){
         return {
-          borderBottom: `1px solid ${this.$themePalette.grey.v_200}`, 
+          borderBottom: `1px solid ${this.$themePalette.grey.v_200}`,
           height:`4em`,
           marginTop:`0.5em`
         };
       },
-      resourcesTable(){
+      fetchResources(){
         return this.workingResources.map(resource => {
           const content = this.resourceCache[resource.contentnode_id];
           if (!content) {
@@ -149,23 +74,21 @@
           }
 
           return tableRow;
-        })
+        });
       },
     },
+    mounted(){
+      setTimeout(() => {
+        
+        console.log(this.currentLesson);
+      }, 1000);
+    },
     methods:{
-      removeResource(id){
-        this.resources = this.resources.filter((lesson) => lesson.id !== id);
-      },
       closeSidePanel() {
         this.$router.go(-2);
       },
-      bytesForHumans,
     },
     $trs:{
-      sizeLabel:{
-        message: 'Size',
-        context: 'Size of the lesson'
-      },
       numberOfSelectedResource: {
         message: '{count, number, integer} {count, plural, one {resource selected} other {resources selected}}',
         context:'Indicates the number of resources selected'
@@ -178,15 +101,6 @@
 
 <style scoped>
 
-  .add-minus-button{
-    float:right;
-  }
-  .arrange-item-block{
-    display:block;
-  }
-  .icon-style{
-    font-size:24px;
-  }
   .bottom-buttons-style {
     position: absolute;
     right: 0;
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResource.vue
new file mode 100644
index 00000000000..4a9882e4bc3
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResource.vue
@@ -0,0 +1,165 @@
+<template>
+
+  <div v-if="loading">
+    <KCircularLoader />
+  </div>
+  <div 
+    v-else
+    class="resource-list-style"
+  >
+    <p>{{ coreString('lessonsLabel') }} : {{ currentLesson.title }} </p>
+    <p>{{ $tr('sizeLabel') }} : {{ bytesForHumans(currentLesson.size) }}</p>
+
+    <div
+      v-for="(lesson , index) in resources"
+      :key="index"
+    >
+      <KGrid :style="lessonOrderListButtonBorder">
+        <KGridItem :layout12="{ span: 6 }">
+          <div style="display:flex;">
+            <div>
+              <DragSortWidget
+                moveUpText="up"
+                moveDownText="down"
+                :noDrag="true"
+                :isFirst="index === 0"
+                :isLast="index === resources.length - 1"
+                @moveUp="() => {}"
+                @moveDown="() => {}"
+              />
+            </div>
+            <div style="padding:0px 10px">
+              <span
+                style="flex: 1"
+              >
+                <LearningActivityIcon
+                  :kind="lesson.learning_activities[0]"
+                  class="icon-style"
+                />
+              </span>
+            </div>
+            <div>
+              <span
+                class="arrange-item-block"
+              >
+                <span>
+                  <KRouterLink
+                    v-if="lesson.link"
+                    :text="lesson.title"
+                    :to="lesson.link"
+                    style="font-size:14px"
+                  />
+                </span>
+                <p style="font-size:12px"> 4MB </p>
+              </span>
+            </div>
+          </div>
+        </KGridItem>
+
+        <KGridItem :layout12="{ span: 6 }">
+          <span
+            class="add-minus-button"
+          >
+            <KIconButton
+              icon="emptyTopic"
+              @click="()=>{ }"
+            />
+
+            <KIconButton
+              icon="minus"
+              @click="removeResource(lesson.id)"
+            />
+          </span>
+        </KGridItem>
+
+      </KGrid>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
+  import bytesForHumans from 'kolibri/uiText/bytesForHumans';
+  
+  export default {
+    name:"SelectedResource",
+    components:{
+      DragSortWidget,
+      LearningActivityIcon
+    },
+    mixins:[commonCoreStrings],
+    props:{
+      resourceList:{
+        type: Array,
+        required:true
+      },
+      currentLesson:{
+        type:Object,
+        required:true
+      },
+      loading:{
+        type:Boolean,
+        required:true
+      }
+    },
+    data() {
+      return {
+        resources: []
+      }
+    },
+    computed:{
+      lessonOrderListButtonBorder(){
+        return {
+          borderBottom: `1px solid ${this.$themePalette.grey.v_200}`, 
+          height:`4em`,
+          marginTop:`0.5em`
+        };
+      },
+    },
+    mounted(){
+      setTimeout(() => {
+        this.resources = this.resourceList;
+      }, 1000);
+    },
+
+    methods:{
+      removeResource(id){
+        this.resources = this.resources.filter(lesson => lesson.id !== id);
+      },
+      bytesForHumans
+    },
+    $trs:{
+      sizeLabel:{
+        message: 'Size',
+        context: 'Size of the lesson'
+      },
+    }
+  }
+
+</script>
+
+
+<style scoped >
+
+ .add-minus-button{
+    float:right;
+  }
+
+  .arrange-item-block{
+    display:block;
+  }
+
+  .icon-style{
+    font-size:24px;
+  }
+
+  .resource-list-style{
+    margin-bottom: 3.5em;
+  }
+  
+</style>
\ No newline at end of file
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/ManageSelectedResourcePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/ManageSelectedResourcePanel.vue
deleted file mode 100644
index a624d33f4de..00000000000
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/ManageSelectedResourcePanel.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-
-    
-  <div>
-    
-  </div>
-
-</template>
-  
-  
-<script>
-
-  
-  export default {
-    name: 'ManageSelectedResource',
-  };
-  
-</script>
-  
-  
\ No newline at end of file
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue
deleted file mode 100644
index 971988f297b..00000000000
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-
-  <ManageSelectedLessonResources 
-    :lessonResourceList="resources"
-    :lessonObject="lessonObject"
-  />
-
-</template>
-
-
-<script>
-
-  import ManageSelectedLessonResources from '../LessonResourceSelectionPage/ManageSelectedLessonResource';
-
-  export default {
-    name: 'PreviewSelectedResources',
-    components: {
-      ManageSelectedLessonResources,
-    },
-    data() {
-      return {
-        resources: [],
-        lessonObject: {},
-      }
-    },  
-  };
-
-</script>

From 257bd3fce8f896958fc45389477a8c11befbdcd7 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Mon, 25 Nov 2024 16:57:06 +0300
Subject: [PATCH 06/24]  clean timout

---
 .../sidePanels/ManageSelectedLessonResource.vue             | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
index b235b0017e0..182be2d10d2 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
@@ -77,12 +77,6 @@
         });
       },
     },
-    mounted(){
-      setTimeout(() => {
-        
-        console.log(this.currentLesson);
-      }, 1000);
-    },
     methods:{
       closeSidePanel() {
         this.$router.go(-2);

From 5264a6c872e7f909b0d2a7fc234bfbf7446a2f40 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 27 Nov 2024 22:12:57 +0300
Subject: [PATCH 07/24] rebase

---
 .../sidePanels/ManageSelectedLessonResource.vue   | 15 +++++++++++++--
 .../sidePanels/SelectedResource.vue               | 12 ++++++++++--
 .../views/quizzes/CreateExamPage/SectionOrder.vue | 12 ++++++------
 .../strings/searchAndFilterStrings.js             |  4 ++++
 4 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
index 182be2d10d2..19e5b4ff4a0 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
@@ -12,7 +12,10 @@
         icon="back"
         @click="$router.go(-1)"
       />
-      <span :style="{ fontWeight: '600' }" class="side-panel-title"> {{ $tr('numberOfSelectedResource',{ count : fetchResources.length })}}</span>
+      <span :style="{ fontWeight: '600' }" class="side-panel-title">
+         {{ $tr('numberOfSelectedResource',
+         { count : fetchResources.length })}}
+         </span>
     </template>
 
     <SelectedResource
@@ -26,7 +29,7 @@
       <div class="bottom-buttons-style">
         <KButton
           :primary="true"
-          text="save & finish"
+          :text="saveLessonResources$()"
           @click="closeSidePanel()"
         />
       </div>
@@ -40,6 +43,7 @@
 
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { mapState } from 'vuex';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import SelectedResource from './SelectedResource';
 
   export default {
@@ -48,6 +52,13 @@
       SidePanelModal,
       SelectedResource
     },
+    setup() {
+      const { saveLessonResources$ } =
+        searchAndFilterStrings;
+      return {
+        saveLessonResources$ 
+      };
+    },
     computed: {
       ...mapState('lessonSummary', ['currentLesson', 'workingResources','resourceCache']),
       lessonOrderListButtonBorder(){
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResource.vue
index 4a9882e4bc3..73b301b2dca 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResource.vue
@@ -19,8 +19,8 @@
           <div style="display:flex;">
             <div>
               <DragSortWidget
-                moveUpText="up"
-                moveDownText="down"
+                :moveUpText="upLabel$"
+                :moveDownText="downLabel$"
                 :noDrag="true"
                 :isFirst="index === 0"
                 :isLast="index === resources.length - 1"
@@ -85,6 +85,7 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import bytesForHumans from 'kolibri/uiText/bytesForHumans';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   
   export default {
     name:"SelectedResource",
@@ -93,6 +94,13 @@
       LearningActivityIcon
     },
     mixins:[commonCoreStrings],
+    setup(){
+     const { upLabel$, downLabel$ } = searchAndFilterStrings;
+        return {
+        upLabel$,
+        downLabel$
+        };
+    },
     props:{
       resourceList:{
         type: Array,
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
index ab640d3b1b1..07e657bd5e1 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
@@ -104,12 +104,12 @@
 
   export default {
     name: 'SectionOrder',
-  components: {
-    Draggable,
-    DragContainer,
-    DragHandle,
-    DragSortWidget,
-  },
+    components: {
+      Draggable,
+      DragContainer,
+      DragHandle,
+      DragSortWidget,
+    },
     mixins: [commonCoreStrings],
     setup(_, context) {
       const {
diff --git a/packages/kolibri-common/strings/searchAndFilterStrings.js b/packages/kolibri-common/strings/searchAndFilterStrings.js
index 6a3aa591146..568367860bb 100644
--- a/packages/kolibri-common/strings/searchAndFilterStrings.js
+++ b/packages/kolibri-common/strings/searchAndFilterStrings.js
@@ -35,4 +35,8 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
     message: 'Move this resource one position down in this lesson',
     context: 'Refers to changing the order of resources in a lesson.',
   },
+  saveLessonResources: {
+    message: 'save & finish',
+    context: 'Button to save resources in a lesson',
+  },
 });

From 76a4fd7453d86d649d818d7da9d4a49e027204a1 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 28 Nov 2024 01:08:05 +0300
Subject: [PATCH 08/24] fix review comments

---
 .../sidePanels/ManageSelectedLessonResource.vue  |  9 +++++----
 ...electedResource.vue => SelectedResources.vue} | 16 ++++++++++------
 .../strings/searchAndFilterStrings.js            |  4 ++++
 3 files changed, 19 insertions(+), 10 deletions(-)
 rename kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/{SelectedResource.vue => SelectedResources.vue} (93%)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
index 19e5b4ff4a0..85213378074 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
@@ -18,7 +18,7 @@
          </span>
     </template>
 
-    <SelectedResource
+    <SelectedResources
       :resourceList="fetchResources"
       :currentLesson="currentLesson"
       :loading="fetchResources.length === 0"
@@ -44,19 +44,20 @@
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { mapState } from 'vuex';
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
-  import SelectedResource from './SelectedResource';
+  import SelectedResources from './SelectedResources';
 
   export default {
     name:'ManageSelectedLessonResources',
     components: {
       SidePanelModal,
-      SelectedResource
+      SelectedResources
     },
     setup() {
-      const { saveLessonResources$ } =
+      const { saveLessonResources$ , } =
         searchAndFilterStrings;
       return {
         saveLessonResources$ 
+        
       };
     },
     computed: {
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
similarity index 93%
rename from kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResource.vue
rename to kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
index 73b301b2dca..e4a813a7bc9 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
@@ -15,7 +15,11 @@
       :key="index"
     >
       <KGrid :style="lessonOrderListButtonBorder">
-        <KGridItem :layout12="{ span: 6 }">
+        <KGridItem 
+          :layout12="{ span: 6 }"
+          :layout8="{ span: 4 }"
+          :layout4="{ span: 2 }"
+        >
           <div style="display:flex;">
             <div>
               <DragSortWidget
@@ -88,18 +92,18 @@
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   
   export default {
-    name:"SelectedResource",
+    name:"SelectedResources",
     components:{
       DragSortWidget,
       LearningActivityIcon
     },
     mixins:[commonCoreStrings],
     setup(){
-     const { upLabel$, downLabel$ } = searchAndFilterStrings;
-        return {
+      const { upLabel$, downLabel$ } = searchAndFilterStrings;
+      return {
         upLabel$,
         downLabel$
-        };
+      };
     },
     props:{
       resourceList:{
@@ -125,7 +129,7 @@
         return {
           borderBottom: `1px solid ${this.$themePalette.grey.v_200}`, 
           height:`4em`,
-          marginTop:`0.5em`
+         
         };
       },
     },
diff --git a/packages/kolibri-common/strings/searchAndFilterStrings.js b/packages/kolibri-common/strings/searchAndFilterStrings.js
index 568367860bb..0c7dab0c257 100644
--- a/packages/kolibri-common/strings/searchAndFilterStrings.js
+++ b/packages/kolibri-common/strings/searchAndFilterStrings.js
@@ -39,4 +39,8 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
     message: 'save & finish',
     context: 'Button to save resources in a lesson',
   },
+  numberOfSelectedResource: {
+    message: '{count, number, integer} {count, plural, one {resource selected} other {resources selected}}',
+    context:'Indicates the number of resources selected'
+  }
 });

From adaf345c612b3ade39ddbd53dc2d9c6b9bfb93d5 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 28 Nov 2024 21:07:00 +0300
Subject: [PATCH 09/24] adds a draggable

---
 .../assets/src/routes/planLessonsRoutes.js    | 248 ------------------
 .../ManageSelectedLessonResource.vue          |  97 +++++--
 .../sidePanels/SelectedResources.vue          | 162 ++++++------
 3 files changed, 158 insertions(+), 349 deletions(-)
 delete mode 100644 kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js

diff --git a/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js b/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
deleted file mode 100644
index 192ed37ddeb..00000000000
--- a/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
+++ /dev/null
@@ -1,248 +0,0 @@
-import store from 'kolibri.coreVue.vuex.store';
-import {
-  showLessonResourceContentPreview,
-  showLessonResourceSelectionRootPage,
-  showLessonResourceSelectionTopicPage,
-  showLessonSelectionContentPreview,
-  showLessonResourceSearchPage,
-  showLessonResourceBookmarks,
-  showLessonResourceBookmarksMain,
-} from '../modules/lessonResources/handlers';
-import { showLessonSummaryPage } from '../modules/lessonSummary/handlers';
-import { LessonsPageNames } from '../constants/lessonsConstants';
-import { PageNames } from '../constants';
-
-import { useLessons } from '../composables/useLessons';
-
-import LessonsRootPage from '../views/lessons/LessonsRootPage';
-import LessonSummaryPage from '../views/lessons/LessonSummaryPage';
-import LessonResourceSelectionPage from '../views/lessons/LessonResourceSelectionPage';
-import PlanLessonSelectionContentPreview from '../views/lessons/LessonSelectionContentPreviewPage';
-import LessonEditDetailsPage from '../views/lessons/LessonEditDetailsPage';
-import LessonCreationPage from '../views/lessons/LessonCreationPage';
-import EditLessonDetails from '../views/lessons/LessonEditDetailsPage/EditDetailsResourceListTable.vue';
-import PreviewSelectedResources from '../views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources';
-import ManageSelectedResourcePanel from '../views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource';
-import LessonResourceSelection from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection';
-import { classIdParamRequiredGuard } from './utils';
-
-const OPTIONAL_CLASS = '/:classId?/plan';
-const CLASS = '/:classId/plan';
-const LESSON = '/lessons/:lessonId';
-const ALL_LESSONS = '/lessons';
-const SELECTION = '/selection';
-const TOPIC = '/topic/:topicId';
-const SEARCH = '/search/:searchTerm';
-const PREVIEW = '/preview/:contentId';
-
-function path(...args) {
-  return args.join('');
-}
-
-const { showLessonsRootPage } = useLessons();
-
-export default [
-  {
-    name: LessonsPageNames.PLAN_LESSONS_ROOT,
-    path: path(OPTIONAL_CLASS, ALL_LESSONS),
-    component: LessonsRootPage,
-    handler(toRoute, fromRoute, next) {
-      if (classIdParamRequiredGuard(toRoute, PageNames.PLAN_PAGE, next)) {
-        return;
-      }
-      showLessonsRootPage(store, toRoute.params.classId);
-    },
-    meta: {
-      titleParts: ['lessonsLabel', 'CLASS_NAME'],
-    },
-  },
-  {
-    name: LessonsPageNames.PLAN_LESSONS_ROOT_BETTER,
-    path: '/:classId/plan/lessonstemp',
-    component: LessonsRootPage,
-    handler(toRoute, fromRoute, next) {
-      if (classIdParamRequiredGuard(toRoute, PageNames.PLAN_PAGE, next)) {
-        return;
-      }
-      showLessonsRootPage(store, toRoute.params.classId);
-    },
-    meta: {
-      titleParts: ['lessonsLabel', 'CLASS_NAME'],
-    },
-  },
-  {
-    name: LessonsPageNames.LESSON_CREATION_ROOT,
-    path: path(CLASS, ALL_LESSONS, '/new'),
-    component: LessonCreationPage,
-  },
-  {
-    name: PageNames.LESSON_CREATION_ROOT_BETTER,
-    path: '/:classId/plan/lessonstemp/:lessonId/edit',
-    component: LessonCreationPage,
-    children: [
-      {
-        name: PageNames.LESSON_EDIT_DETAILS,
-        path: 'details/',
-        component: EditLessonDetails,
-        props: {
-          text: 'test',
-        },
-      },
-      {
-
-        
-        name: PageNames.LESSON_SELECT_RESOURCES,
-        path: 'select-resources/:topicId?',
-        component: LessonResourceSelection,
-      },
-      {
-        name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
-        path: 'preview-resources/',
-        component: ManageSelectedResourcePanel,
-      },
-      {
-        name: PageNames.LESSON_PREVIEW_RESOURCE,
-        path: 'preview-resources/:nodeId',
-        component: PreviewSelectedResources,
-      },
-    ],
-  },
-  {
-    name: LessonsPageNames.SUMMARY,
-    path: '/:classId/plan/lessonstemp/:lessonId/:tabId?',
-    component: LessonSummaryPage,
-    handler(toRoute, fromRoute) {
-      if (
-        fromRoute.name !== LessonsPageNames.SUMMARY ||
-        toRoute.params.lessonId !== fromRoute.params.lessonId
-      ) {
-        return showLessonSummaryPage(store, toRoute.params);
-      }
-      store.dispatch('notLoading');
-    },
-    meta: {
-      titleParts: ['LESSON_NAME', 'CLASS_NAME'],
-    },
-  },
-  {
-    name: LessonsPageNames.SUMMARY,
-    path: path(CLASS, LESSON),
-    component: LessonSummaryPage,
-    handler(toRoute, fromRoute) {
-      if (
-        fromRoute.name !== LessonsPageNames.SUMMARY ||
-        toRoute.params.lessonId !== fromRoute.params.lessonId
-      ) {
-        return showLessonSummaryPage(store, toRoute.params);
-      }
-      store.dispatch('notLoading');
-    },
-    meta: {
-      titleParts: ['LESSON_NAME', 'CLASS_NAME'],
-    },
-  },
-  {
-    name: LessonEditDetailsPage.name,
-    path: path(CLASS, LESSON, '/edit'),
-    component: LessonEditDetailsPage,
-  },
-  {
-    name: LessonsPageNames.SELECTION_ROOT,
-    path: path(CLASS, LESSON, SELECTION),
-    component: LessonResourceSelectionPage,
-    handler(toRoute) {
-      showLessonResourceSelectionRootPage(store, toRoute.params);
-    },
-  },
-  {
-    name: LessonsPageNames.SELECTION,
-    path: path(CLASS, LESSON, SELECTION, TOPIC),
-    component: LessonResourceSelectionPage,
-    handler(toRoute, fromRoute) {
-      // HACK if last page was LessonContentPreviewPage, then we need to make sure
-      // to immediately autosave just in case a change was made there. This gets
-      // called whether or not a change is made, because we don't track changes
-      // enough steps back.
-      let preHandlerPromise;
-      if (fromRoute.name === LessonsPageNames.SELECTION_CONTENT_PREVIEW) {
-        preHandlerPromise = store.dispatch('lessonSummary/saveLessonResources', {
-          lessonId: toRoute.params.lessonId,
-          resources: store.state.lessonSummary.workingResources,
-        });
-      } else {
-        preHandlerPromise = Promise.resolve();
-      }
-      preHandlerPromise.then(() => {
-        showLessonResourceSelectionTopicPage(store, toRoute.params);
-      });
-    },
-  },
-  {
-    name: LessonsPageNames.SELECTION_SEARCH,
-    path: path(CLASS, LESSON, SELECTION, SEARCH),
-    component: LessonResourceSelectionPage,
-    handler(toRoute) {
-      showLessonResourceSearchPage(store, toRoute.params, toRoute.query);
-    },
-  },
-  {
-    name: LessonsPageNames.LESSON_SELECTION_BOOKMARKS,
-    path: path(CLASS, LESSON, SELECTION, TOPIC),
-    component: LessonResourceSelectionPage,
-    handler(toRoute, fromRoute) {
-      let preHandlerPromise;
-      if (fromRoute.name === LessonsPageNames.SELECTION_CONTENT_PREVIEW) {
-        preHandlerPromise = store.dispatch('lessonSummary/saveLessonResources', {
-          lessonId: toRoute.params.lessonId,
-          resources: store.state.lessonSummary.workingResources,
-        });
-      } else {
-        preHandlerPromise = Promise.resolve();
-      }
-      preHandlerPromise.then(() => {
-        showLessonResourceBookmarks(store, toRoute.params, toRoute.query);
-      });
-    },
-  },
-  {
-    name: LessonsPageNames.LESSON_SELECTION_BOOKMARKS_MAIN,
-    path: path(CLASS, LESSON, SELECTION),
-    component: LessonResourceSelectionPage,
-    handler(toRoute) {
-      showLessonResourceBookmarksMain(store, toRoute.params, toRoute.query);
-    },
-  },
-  {
-    name: LessonsPageNames.SELECTION_CONTENT_PREVIEW,
-    path: path(CLASS, LESSON, SELECTION, PREVIEW),
-    component: PlanLessonSelectionContentPreview,
-    handler(toRoute) {
-      showLessonSelectionContentPreview(store, toRoute.params, toRoute.query);
-    },
-  },
-  {
-    name: LessonsPageNames.RESOURCE_CONTENT_PREVIEW,
-    path: path(CLASS, LESSON, '/resource', PREVIEW),
-    component: PlanLessonSelectionContentPreview,
-    props(data) {
-      let backRoute;
-      // If linked from the Reports section, go back there
-      if (data.query.last === 'LessonReportEditDetailsPage') {
-        backRoute = {
-          name: 'LessonReportEditDetailsPage',
-        };
-      } else {
-        backRoute = {
-          name: LessonsPageNames.SUMMARY,
-        };
-      }
-      return {
-        showSelectOptions: false,
-        backRoute,
-      };
-    },
-    handler(toRoute) {
-      showLessonResourceContentPreview(store, toRoute.params);
-    },
-  },
-];
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
index 85213378074..57b7b351760 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
@@ -7,21 +7,23 @@
     @shouldFocusFirstEl="() => null"
   >
     <template #header>
-      <KIconButton
-        v-if="true"
-        icon="back"
-        @click="$router.go(-1)"
-      />
-      <span :style="{ fontWeight: '600' }" class="side-panel-title">
-         {{ $tr('numberOfSelectedResource',
-         { count : fetchResources.length })}}
-         </span>
+      <div :style="{ display:'inline-flex' }">
+        <KIconButton
+          v-if="true"
+          icon="back"
+          @click="$router.go(-1)"
+        />
+        <h1 :style="{ fontWeight: '600', fontSize: '18px' }" class="side-panel-title">
+           {{ numberOfSelectedResource$({ count : resources.length })}}
+        </h1>
+      </div>
     </template>
 
     <SelectedResources
-      :resourceList="fetchResources"
+      :resourceList="resources"
       :currentLesson="currentLesson"
-      :loading="fetchResources.length === 0"
+      :loading="resources.length === 0"
+      @removeResource="removeResource"
     />
 
 
@@ -45,6 +47,8 @@
   import { mapState } from 'vuex';
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import SelectedResources from './SelectedResources';
+  import { PageNames } from '../../../../constants';
+  import commonCoach from '../../../common';
 
   export default {
     name:'ManageSelectedLessonResources',
@@ -52,14 +56,15 @@
       SidePanelModal,
       SelectedResources
     },
+    mixins: [commonCoach],
     setup() {
-      const { saveLessonResources$ , } =
+      const { saveLessonResources$,numberOfSelectedResource$ } =
         searchAndFilterStrings;
       return {
-        saveLessonResources$ 
-        
+        saveLessonResources$,
+        numberOfSelectedResource$
       };
-    },
+  },
     computed: {
       ...mapState('lessonSummary', ['currentLesson', 'workingResources','resourceCache']),
       lessonOrderListButtonBorder(){
@@ -69,17 +74,43 @@
           marginTop:`0.5em`
         };
       },
-      fetchResources(){
-        return this.workingResources.map(resource => {
+    },
+    data(){
+      return {
+        PageNames,
+        resources :[]
+      }
+    },
+    mounted(){
+      setTimeout(() => {
+        this.getResources();
+      }, 2000);
+    },
+    methods:{
+      removeResource(id){
+        this.resources = this.resources.filter(lesson => lesson.id !== id);
+      },
+      recipients() {
+        return this.group
+          ? this.getLearnersForGroups([this.group.id])
+          : this.getLearnersForLesson(this.currentLesson);
+      },
+      getResources(){
+        const response = this.workingResources.map(resource => {
           const content = this.resourceCache[resource.contentnode_id];
           if (!content) {
             return this.missingResourceObj(resource.contentnode_id);
           }
+          // const tally = this.getContentStatusTally(content.content_id, this.recipients);
+
           const tableRow = {
             ...content,
             node_id: content.id,
+            // hasAssignments: Object.values(tally).reduce((a, b) => a + b, 0),
+            // tally,
           };
 
+
           const link = {};
           if (link) {
             tableRow.link = link;
@@ -87,18 +118,36 @@
 
           return tableRow;
         });
+
+        Promise.all(response).then((results) => {
+          this.resources = results;
+        }).catch((error) => {
+          console.error("An error occurred:", error);
+        });
+      },
+      resourceLink(resource) {
+        if (resource.hasAssignments) {
+          if (resource.kind === this.ContentNodeKinds.EXERCISE) {
+            return this.classRoute(
+              this.group
+                ? PageNames.GROUP_LESSON_EXERCISE_LEARNER_REPORT
+                : PageNames.LESSON_EXERCISE_LEARNERS_REPORT,
+              { exerciseId: resource.content_id },
+            );
+          } else {
+            return this.classRoute(
+              this.group ? PageNames.GROUPS_ROOT : PageNames.LESSON_RESOURCE_LEARNERS_REPORT,
+              { resourceId: resource.content_id },
+            );
+          }
+        }
       },
-    },
-    methods:{
       closeSidePanel() {
-        this.$router.go(-2);
+        this.$router.push({ name: PageNames.LESSONS_ROOT , params: { classId: this.$route.params.classId }});
       },
     },
     $trs:{
-      numberOfSelectedResource: {
-        message: '{count, number, integer} {count, plural, one {resource selected} other {resources selected}}',
-        context:'Indicates the number of resources selected'
-      }
+      
     }
   }
 
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
index e4a813a7bc9..ab79c3f381b 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
@@ -10,74 +10,88 @@
     <p>{{ coreString('lessonsLabel') }} : {{ currentLesson.title }} </p>
     <p>{{ $tr('sizeLabel') }} : {{ bytesForHumans(currentLesson.size) }}</p>
 
-    <div
-      v-for="(lesson , index) in resources"
-      :key="index"
+    <DragContainer
+      :items="resourceList"
+      @sort="$emit('sortedResources', $event)"
     >
-      <KGrid :style="lessonOrderListButtonBorder">
-        <KGridItem 
-          :layout12="{ span: 6 }"
-          :layout8="{ span: 4 }"
-          :layout4="{ span: 2 }"
+      <transition-group
+        tag="div"
+        name="list"
+      >
+        <Draggable
+          v-for="(lesson , index) in resourceList"
+          :key="lesson.id"
+          :style="lessonOrderListButtonBorder"
         >
-          <div style="display:flex;">
-            <div>
-              <DragSortWidget
-                :moveUpText="upLabel$"
-                :moveDownText="downLabel$"
-                :noDrag="true"
-                :isFirst="index === 0"
-                :isLast="index === resources.length - 1"
-                @moveUp="() => {}"
-                @moveDown="() => {}"
-              />
-            </div>
-            <div style="padding:0px 10px">
+          <KGrid>
+            <KGridItem 
+              :layout12="{ span: 10 }"
+              :layout8="{ span: 5 }"
+              :layout4="{ span: 3 }"
+            >
+              <div :style="{ display: 'flex' }">
+                <DragHandle>
+                  <DragSortWidget
+                    :moveUpText="upLabel$"
+                    :moveDownText="downLabel$"
+                    :noDrag="true"
+                    :isFirst="index === 0"
+                    :isLast="index === resourceList.length - 1"
+                    @moveUp="() => {}"
+                    @moveDown="() => {}"
+                  />
+                </DragHandle>
+                <div style="padding:0px 10px">
+                  <span
+                    style="flex: 1"
+                  >
+                    <LearningActivityIcon
+                      :kind="lesson.learning_activities[0]"
+                      class="icon-style"
+                    />
+                  </span>
+                </div>
+                <div>
+                  <span
+                    class="arrange-item-block"
+                  >
+                    <span>
+                      <KRouterLink
+                        v-if="lesson.link"
+                        :text="lesson.title"
+                        :to="lesson.link"
+                        style="font-size:14px"
+                      />
+                    </span>
+                    <p style="font-size:12px"> {{ bytesForHumans(lesson.files[0].file_size) }} </p>
+                  </span>
+                </div>
+              </div>
+            </KGridItem>
+    
+            <KGridItem 
+              :layout12="{ span: 2 }"
+              :layout8="{ span: 3 }"
+              :layout4="{ span: 1 }"
+            >
               <span
-                style="flex: 1"
+                class="add-minus-button"
               >
-                <LearningActivityIcon
-                  :kind="lesson.learning_activities[0]"
-                  class="icon-style"
+                <KIconButton
+                  icon="emptyTopic"
+                  @click="()=>{ }"
+                />
+    
+                <KIconButton
+                  icon="minus"
+                  @click="$emit('removeResource',lesson.id)"
                 />
               </span>
-            </div>
-            <div>
-              <span
-                class="arrange-item-block"
-              >
-                <span>
-                  <KRouterLink
-                    v-if="lesson.link"
-                    :text="lesson.title"
-                    :to="lesson.link"
-                    style="font-size:14px"
-                  />
-                </span>
-                <p style="font-size:12px"> 4MB </p>
-              </span>
-            </div>
-          </div>
-        </KGridItem>
-
-        <KGridItem :layout12="{ span: 6 }">
-          <span
-            class="add-minus-button"
-          >
-            <KIconButton
-              icon="emptyTopic"
-              @click="()=>{ }"
-            />
-
-            <KIconButton
-              icon="minus"
-              @click="removeResource(lesson.id)"
-            />
-          </span>
-        </KGridItem>
-
-      </KGrid>
-    </div>
+            </KGridItem>
+          </KGrid>
+        </Draggable>
+      </transition-group>
+    </DragContainer>
   </div>
 
 </template>
@@ -86,6 +100,9 @@
 <script>
 
   import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
+  import DragContainer from 'kolibri-common/components/sortable/DragContainer';
+  import DragHandle from 'kolibri-common/components/sortable/DragHandle';
+  import Draggable from 'kolibri-common/components/sortable/Draggable';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import bytesForHumans from 'kolibri/uiText/bytesForHumans';
@@ -95,6 +112,9 @@
     name:"SelectedResources",
     components:{
       DragSortWidget,
+      DragContainer,
+      DragHandle,
+      Draggable,
       LearningActivityIcon
     },
     mixins:[commonCoreStrings],
@@ -119,30 +139,18 @@
         required:true
       }
     },
-    data() {
-      return {
-        resources: []
-      }
-    },
+
     computed:{
       lessonOrderListButtonBorder(){
         return {
           borderBottom: `1px solid ${this.$themePalette.grey.v_200}`, 
-          height:`4em`,
-         
+          height:`auto`,
+          width:`100%`
         };
       },
     },
-    mounted(){
-      setTimeout(() => {
-        this.resources = this.resourceList;
-      }, 1000);
-    },
 
     methods:{
-      removeResource(id){
-        this.resources = this.resources.filter(lesson => lesson.id !== id);
-      },
       bytesForHumans
     },
     $trs:{

From 620e7099d31c1e2e4fe8e067d86fb4c57c040515 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 28 Nov 2024 21:21:51 +0300
Subject: [PATCH 10/24] removed unused variables

---
 .../lessons/LessonResourceSelectionPage/index.vue   |  8 ++++----
 .../src/views/lessons/LessonSummaryPage/index.vue   |  4 ----
 .../sidePanels/LessonResourceSelection.vue          | 13 ++++---------
 .../strings/searchAndFilterStrings.js               |  2 +-
 4 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue
index 361ca6043b1..821fa884e12 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue
@@ -97,7 +97,7 @@
 
     <BottomAppBar>
       <KRouterLink
-        :text="$tr('numbeOfSelectedResourcesLabel', { count: workingResources.length })"
+        :text="numberOfSelectedResource$({ count: workingResources.length })"
         :primary="true"
         :to="goToPreviewSelection()"
         :style="{ marginRight: '1em' , marginTop: '0.5em' }"
@@ -137,6 +137,7 @@
   import ResourceSelectionBreadcrumbs from './SearchTools/ResourceSelectionBreadcrumbs';
   import ContentCardList from './ContentCardList';
   import BookmarkIcon from './LessonContentCard/BookmarkIcon';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
 
   export default {
     // this is inaccurately named because it applies to exams also
@@ -161,11 +162,13 @@
       const { windowIsSmall } = useKResponsiveWindow();
       const { getUserPermissions } = useUser();
       const { createSnackbar, clearSnackbar } = useSnackbar();
+      const {numberOfSelectedResource$ } = searchAndFilterStrings;
       return {
         windowIsSmall,
         getUserPermissions,
         createSnackbar,
         clearSnackbar,
+        numberOfSelectedResource$,
       };
     },
     data() {
@@ -579,9 +582,6 @@
         message: '{count} {count, plural, one {resource} other {resources}}',
         context: "Only translate 'resource' and 'resources'.",
       },
-      numbeOfSelectedResourcesLabel:{
-        message:'{count, number, integer} {count, plural, one {resource selected} other {resources selected}} '
-      },
       selectionInformation: {
         message:
           '{count, number, integer} of {total, number, integer} {total, plural, one {resource selected} other {resources selected}}',
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
index 8ca767a6855..101f2bd475d 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
@@ -360,10 +360,6 @@
         message: 'Undo',
         context: 'Allows user to undo an action.',
       },
-      numberOfSelectedResource: {
-        message: '{count, number, integer} {count, plural, one {resource selected} other {resources selected}}',
-        context:'Indicates the number of resources selected'
-      }
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
index 79ede6152fe..1162ba6ca52 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
@@ -96,7 +96,7 @@
     <template #bottomNavigation>
       <div class="bottom-nav-container">
         <KRouterLink
-          :text="$tr('numbeOfSelectedResourcesLabel', { count: workingResources.length })"
+          :text="numberOfSelectedResource$({ count: workingResources.length })"
           :primary="true"
           :to="{ name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES }"
           :style="{ marginRight: '1em' , marginTop: '0.5em' }"
@@ -123,6 +123,7 @@
   import AccessibleChannelCard from 'kolibri-common/components/Cards/AccessibleChannelCard.vue';
   import { mapState } from 'vuex';
   import { PageNames } from '../../../../constants';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
 
   export default {
     name: 'LessonResourceSelection',
@@ -135,10 +136,7 @@
       const loading = ref(false);
       const bookmarks = ref([]);
       const channels = ref([]);
-      const showSearch = ref(true);
-      const topic = ref(null);
-
-      const { searchTerms } = useBaseSearch(topic);
+      const { numberOfSelectedResource$ } = searchAndFilterStrings;
 
       const loadBookmarks = async () => {
         const data = await ContentNodeResource.fetchBookmarks({
@@ -186,6 +184,7 @@
         selectFromBookmarks$,
         searchLabel$,
         saveAndFinishAction$,
+        numberOfSelectedResource$
       };
     },
     data(){
@@ -206,10 +205,6 @@
         message: 'Manage lesson resources',
         context:
           "In the 'Manage lesson resources' coaches can add new/remove resource material to a lesson.",
-      },
-      numbeOfSelectedResourcesLabel:{
-        message:'{count, number, integer} {count, plural, one {resource selected} other {resources selected}} ',
-        context:"This is the label that shows the number of resources selected in the lesson resource selection page"
       }
     },
   };
diff --git a/packages/kolibri-common/strings/searchAndFilterStrings.js b/packages/kolibri-common/strings/searchAndFilterStrings.js
index 0c7dab0c257..fa8544ede30 100644
--- a/packages/kolibri-common/strings/searchAndFilterStrings.js
+++ b/packages/kolibri-common/strings/searchAndFilterStrings.js
@@ -42,5 +42,5 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
   numberOfSelectedResource: {
     message: '{count, number, integer} {count, plural, one {resource selected} other {resources selected}}',
     context:'Indicates the number of resources selected'
-  }
+  },
 });

From 9bd9be7e60e1ce181e7d06ef5daff6e2386cf60b Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 28 Nov 2024 21:23:33 +0300
Subject: [PATCH 11/24] removes unused data prop

---
 .../coach/assets/src/views/lessons/LessonSummaryPage/index.vue   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
index 101f2bd475d..40831b43074 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/index.vue
@@ -150,7 +150,6 @@
         ReportsLessonTabs,
         workingResourcesBackup,
         REPORTS_LESSON_TABS_ID,
-        showSidePanel:true,
       };
     },
     computed: {

From a3cb994b1ea55f642caedb74fd5f6e11a8666c3e Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Thu, 28 Nov 2024 18:27:11 +0000
Subject: [PATCH 12/24] [pre-commit.ci lite] apply automatic fixes

---
 .../LessonResourceSelectionPage/index.vue     |  16 +--
 .../sidePanels/LessonResourceSelection.vue    |  14 +--
 .../ManageSelectedLessonResource.vue          |  72 +++++------
 .../sidePanels/SelectedResources.vue          | 114 +++++++++---------
 .../strings/searchAndFilterStrings.js         |   5 +-
 5 files changed, 110 insertions(+), 111 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue
index 821fa884e12..2db2137ed6f 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue
@@ -100,7 +100,7 @@
         :text="numberOfSelectedResource$({ count: workingResources.length })"
         :primary="true"
         :to="goToPreviewSelection()"
-        :style="{ marginRight: '1em' , marginTop: '0.5em' }"
+        :style="{ marginRight: '1em', marginTop: '0.5em' }"
       />
 
       <KRouterLink
@@ -128,6 +128,7 @@
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useUser from 'kolibri/composables/useUser';
   import useSnackbar from 'kolibri/composables/useSnackbar';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import commonCoach from '../../common';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import CoachImmersivePage from '../../CoachImmersivePage';
@@ -137,7 +138,6 @@
   import ResourceSelectionBreadcrumbs from './SearchTools/ResourceSelectionBreadcrumbs';
   import ContentCardList from './ContentCardList';
   import BookmarkIcon from './LessonContentCard/BookmarkIcon';
-  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
 
   export default {
     // this is inaccurately named because it applies to exams also
@@ -162,7 +162,7 @@
       const { windowIsSmall } = useKResponsiveWindow();
       const { getUserPermissions } = useUser();
       const { createSnackbar, clearSnackbar } = useSnackbar();
-      const {numberOfSelectedResource$ } = searchAndFilterStrings;
+      const { numberOfSelectedResource$ } = searchAndFilterStrings;
       return {
         windowIsSmall,
         getUserPermissions,
@@ -571,11 +571,11 @@
       topicsLink(topicId) {
         return this.topicListingLink({ ...this.$route.params, topicId });
       },
-      goToPreviewSelection(){
-        return{
-           name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES
-        }
-      }
+      goToPreviewSelection() {
+        return {
+          name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
+        };
+      },
     },
     $trs: {
       resources: {
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
index 1162ba6ca52..1ef84cb50e1 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
@@ -99,7 +99,7 @@
           :text="numberOfSelectedResource$({ count: workingResources.length })"
           :primary="true"
           :to="{ name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES }"
-          :style="{ marginRight: '1em' , marginTop: '0.5em' }"
+          :style="{ marginRight: '1em', marginTop: '0.5em' }"
         />
         <KButton
           primary
@@ -122,8 +122,8 @@
   import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
   import AccessibleChannelCard from 'kolibri-common/components/Cards/AccessibleChannelCard.vue';
   import { mapState } from 'vuex';
-  import { PageNames } from '../../../../constants';
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
+  import { PageNames } from '../../../../constants';
 
   export default {
     name: 'LessonResourceSelection',
@@ -184,15 +184,15 @@
         selectFromBookmarks$,
         searchLabel$,
         saveAndFinishAction$,
-        numberOfSelectedResource$
+        numberOfSelectedResource$,
       };
     },
-    data(){
+    data() {
       return {
         PageNames,
-      }
+      };
     },
-    computed:{
+    computed: {
       ...mapState('lessonSummary', ['workingResources']),
     },
     methods: {
@@ -205,7 +205,7 @@
         message: 'Manage lesson resources',
         context:
           "In the 'Manage lesson resources' coaches can add new/remove resource material to a lesson.",
-      }
+      },
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
index 57b7b351760..7850a80e30f 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
@@ -1,4 +1,5 @@
 <template>
+
   <SidePanelModal
     alignment="right"
     sidePanelWidth="700px"
@@ -7,14 +8,17 @@
     @shouldFocusFirstEl="() => null"
   >
     <template #header>
-      <div :style="{ display:'inline-flex' }">
+      <div :style="{ display: 'inline-flex' }">
         <KIconButton
           v-if="true"
           icon="back"
           @click="$router.go(-1)"
         />
-        <h1 :style="{ fontWeight: '600', fontSize: '18px' }" class="side-panel-title">
-           {{ numberOfSelectedResource$({ count : resources.length })}}
+        <h1
+          :style="{ fontWeight: '600', fontSize: '18px' }"
+          class="side-panel-title"
+        >
+          {{ numberOfSelectedResource$({ count: resources.length }) }}
         </h1>
       </div>
     </template>
@@ -26,7 +30,6 @@
       @removeResource="removeResource"
     />
 
-
     <template #bottomNavigation>
       <div class="bottom-buttons-style">
         <KButton
@@ -46,48 +49,47 @@
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { mapState } from 'vuex';
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
-  import SelectedResources from './SelectedResources';
   import { PageNames } from '../../../../constants';
   import commonCoach from '../../../common';
+  import SelectedResources from './SelectedResources';
 
   export default {
-    name:'ManageSelectedLessonResources',
+    name: 'ManageSelectedLessonResources',
     components: {
       SidePanelModal,
-      SelectedResources
+      SelectedResources,
     },
     mixins: [commonCoach],
     setup() {
-      const { saveLessonResources$,numberOfSelectedResource$ } =
-        searchAndFilterStrings;
+      const { saveLessonResources$, numberOfSelectedResource$ } = searchAndFilterStrings;
       return {
         saveLessonResources$,
-        numberOfSelectedResource$
+        numberOfSelectedResource$,
       };
-  },
+    },
     computed: {
-      ...mapState('lessonSummary', ['currentLesson', 'workingResources','resourceCache']),
-      lessonOrderListButtonBorder(){
+      ...mapState('lessonSummary', ['currentLesson', 'workingResources', 'resourceCache']),
+      lessonOrderListButtonBorder() {
         return {
           borderBottom: `1px solid ${this.$themePalette.grey.v_200}`,
-          height:`4em`,
-          marginTop:`0.5em`
+          height: `4em`,
+          marginTop: `0.5em`,
         };
       },
     },
-    data(){
+    data() {
       return {
         PageNames,
-        resources :[]
-      }
+        resources: [],
+      };
     },
-    mounted(){
+    mounted() {
       setTimeout(() => {
         this.getResources();
       }, 2000);
     },
-    methods:{
-      removeResource(id){
+    methods: {
+      removeResource(id) {
         this.resources = this.resources.filter(lesson => lesson.id !== id);
       },
       recipients() {
@@ -95,7 +97,7 @@
           ? this.getLearnersForGroups([this.group.id])
           : this.getLearnersForLesson(this.currentLesson);
       },
-      getResources(){
+      getResources() {
         const response = this.workingResources.map(resource => {
           const content = this.resourceCache[resource.contentnode_id];
           if (!content) {
@@ -110,7 +112,6 @@
             // tally,
           };
 
-
           const link = {};
           if (link) {
             tableRow.link = link;
@@ -119,11 +120,13 @@
           return tableRow;
         });
 
-        Promise.all(response).then((results) => {
-          this.resources = results;
-        }).catch((error) => {
-          console.error("An error occurred:", error);
-        });
+        Promise.all(response)
+          .then(results => {
+            this.resources = results;
+          })
+          .catch(error => {
+            console.error('An error occurred:', error);
+          });
       },
       resourceLink(resource) {
         if (resource.hasAssignments) {
@@ -143,13 +146,14 @@
         }
       },
       closeSidePanel() {
-        this.$router.push({ name: PageNames.LESSONS_ROOT , params: { classId: this.$route.params.classId }});
+        this.$router.push({
+          name: PageNames.LESSONS_ROOT,
+          params: { classId: this.$route.params.classId },
+        });
       },
     },
-    $trs:{
-      
-    }
-  }
+    $trs: {},
+  };
 
 </script>
 
@@ -168,4 +172,4 @@
     border-top: 1px solid black;
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
index ab79c3f381b..6d82be0e20e 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
@@ -3,11 +3,11 @@
   <div v-if="loading">
     <KCircularLoader />
   </div>
-  <div 
+  <div
     v-else
     class="resource-list-style"
   >
-    <p>{{ coreString('lessonsLabel') }} : {{ currentLesson.title }} </p>
+    <p>{{ coreString('lessonsLabel') }} : {{ currentLesson.title }}</p>
     <p>{{ $tr('sizeLabel') }} : {{ bytesForHumans(currentLesson.size) }}</p>
 
     <DragContainer
@@ -19,12 +19,12 @@
         name="list"
       >
         <Draggable
-          v-for="(lesson , index) in resourceList"
+          v-for="(lesson, index) in resourceList"
           :key="lesson.id"
           :style="lessonOrderListButtonBorder"
         >
           <KGrid>
-            <KGridItem 
+            <KGridItem
               :layout12="{ span: 10 }"
               :layout8="{ span: 5 }"
               :layout4="{ span: 3 }"
@@ -41,10 +41,8 @@
                     @moveDown="() => {}"
                   />
                 </DragHandle>
-                <div style="padding:0px 10px">
-                  <span
-                    style="flex: 1"
-                  >
+                <div style="padding: 0 10px">
+                  <span style="flex: 1">
                     <LearningActivityIcon
                       :kind="lesson.learning_activities[0]"
                       class="icon-style"
@@ -52,39 +50,35 @@
                   </span>
                 </div>
                 <div>
-                  <span
-                    class="arrange-item-block"
-                  >
+                  <span class="arrange-item-block">
                     <span>
                       <KRouterLink
                         v-if="lesson.link"
                         :text="lesson.title"
                         :to="lesson.link"
-                        style="font-size:14px"
+                        style="font-size: 14px"
                       />
                     </span>
-                    <p style="font-size:12px"> {{ bytesForHumans(lesson.files[0].file_size) }} </p>
+                    <p style="font-size: 12px">{{ bytesForHumans(lesson.files[0].file_size) }}</p>
                   </span>
                 </div>
               </div>
             </KGridItem>
-    
-            <KGridItem 
+
+            <KGridItem
               :layout12="{ span: 2 }"
               :layout8="{ span: 3 }"
               :layout4="{ span: 1 }"
             >
-              <span
-                class="add-minus-button"
-              >
+              <span class="add-minus-button">
                 <KIconButton
                   icon="emptyTopic"
-                  @click="()=>{ }"
+                  @click="() => {}"
                 />
-    
+
                 <KIconButton
                   icon="minus"
-                  @click="$emit('removeResource',lesson.id)"
+                  @click="$emit('removeResource', lesson.id)"
                 />
               </span>
             </KGridItem>
@@ -107,79 +101,79 @@
   import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import bytesForHumans from 'kolibri/uiText/bytesForHumans';
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
-  
+
   export default {
-    name:"SelectedResources",
-    components:{
+    name: 'SelectedResources',
+    components: {
       DragSortWidget,
       DragContainer,
       DragHandle,
       Draggable,
-      LearningActivityIcon
+      LearningActivityIcon,
     },
-    mixins:[commonCoreStrings],
-    setup(){
+    mixins: [commonCoreStrings],
+    setup() {
       const { upLabel$, downLabel$ } = searchAndFilterStrings;
       return {
         upLabel$,
-        downLabel$
+        downLabel$,
       };
     },
-    props:{
-      resourceList:{
+    props: {
+      resourceList: {
         type: Array,
-        required:true
+        required: true,
+      },
+      currentLesson: {
+        type: Object,
+        required: true,
       },
-      currentLesson:{
-        type:Object,
-        required:true
+      loading: {
+        type: Boolean,
+        required: true,
       },
-      loading:{
-        type:Boolean,
-        required:true
-      }
     },
 
-    computed:{
-      lessonOrderListButtonBorder(){
+    computed: {
+      lessonOrderListButtonBorder() {
         return {
-          borderBottom: `1px solid ${this.$themePalette.grey.v_200}`, 
-          height:`auto`,
-          width:`100%`
+          borderBottom: `1px solid ${this.$themePalette.grey.v_200}`,
+          height: `auto`,
+          width: `100%`,
         };
       },
     },
 
-    methods:{
-      bytesForHumans
+    methods: {
+      bytesForHumans,
     },
-    $trs:{
-      sizeLabel:{
+    $trs: {
+      sizeLabel: {
         message: 'Size',
-        context: 'Size of the lesson'
+        context: 'Size of the lesson',
       },
-    }
-  }
+    },
+  };
 
 </script>
 
 
-<style scoped >
+<style scoped>
 
- .add-minus-button{
-    float:right;
+  .add-minus-button {
+    float: right;
   }
 
-  .arrange-item-block{
-    display:block;
+  .arrange-item-block {
+    display: block;
   }
 
-  .icon-style{
-    font-size:24px;
+  .icon-style {
+    font-size: 24px;
   }
 
-  .resource-list-style{
+  .resource-list-style {
     margin-bottom: 3.5em;
   }
-  
-</style>
\ No newline at end of file
+
+</style>
diff --git a/packages/kolibri-common/strings/searchAndFilterStrings.js b/packages/kolibri-common/strings/searchAndFilterStrings.js
index fa8544ede30..7cb339ddf7a 100644
--- a/packages/kolibri-common/strings/searchAndFilterStrings.js
+++ b/packages/kolibri-common/strings/searchAndFilterStrings.js
@@ -40,7 +40,8 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
     context: 'Button to save resources in a lesson',
   },
   numberOfSelectedResource: {
-    message: '{count, number, integer} {count, plural, one {resource selected} other {resources selected}}',
-    context:'Indicates the number of resources selected'
+    message:
+      '{count, number, integer} {count, plural, one {resource selected} other {resources selected}}',
+    context: 'Indicates the number of resources selected',
   },
 });

From 25cafe4f666c562f7f0319e2716d1371a3ff1105 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 5 Dec 2024 20:19:07 +0300
Subject: [PATCH 13/24]  handles navigation

---
 .../ManageSelectedLessonResource.vue          | 35 ++++++++++---------
 .../sidePanels/SelectedResources.vue          |  4 +--
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
index 7850a80e30f..16e7cb76202 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
@@ -28,6 +28,7 @@
       :currentLesson="currentLesson"
       :loading="resources.length === 0"
       @removeResource="removeResource"
+      @navigateToParent="navigateToParent"
     />
 
     <template #bottomNavigation>
@@ -67,6 +68,11 @@
         numberOfSelectedResource$,
       };
     },
+    data() {
+      return {
+        resources: [],
+      };
+    },
     computed: {
       ...mapState('lessonSummary', ['currentLesson', 'workingResources', 'resourceCache']),
       lessonOrderListButtonBorder() {
@@ -77,12 +83,6 @@
         };
       },
     },
-    data() {
-      return {
-        PageNames,
-        resources: [],
-      };
-    },
     mounted() {
       setTimeout(() => {
         this.getResources();
@@ -92,10 +92,11 @@
       removeResource(id) {
         this.resources = this.resources.filter(lesson => lesson.id !== id);
       },
-      recipients() {
-        return this.group
-          ? this.getLearnersForGroups([this.group.id])
-          : this.getLearnersForLesson(this.currentLesson);
+      navigateToParent(id) {
+        this.$router.push({
+          name: PageNames.LESSONS_ROOT,
+          params: { classId: this.$route.params.classId, lessonId: id },
+        });
       },
       getResources() {
         const response = this.workingResources.map(resource => {
@@ -103,16 +104,19 @@
           if (!content) {
             return this.missingResourceObj(resource.contentnode_id);
           }
-          // const tally = this.getContentStatusTally(content.content_id, this.recipients);
+          const tally = this.getContentStatusTally(
+            content.content_id,
+            this.getLearnersForLesson(this.currentLesson)
+          );
 
           const tableRow = {
             ...content,
             node_id: content.id,
-            // hasAssignments: Object.values(tally).reduce((a, b) => a + b, 0),
-            // tally,
+            hasAssignments: Object.values(tally).reduce((a, b) => a + b, 0),
+            tally,
           };
 
-          const link = {};
+          const link = this.resourceLink(tableRow);
           if (link) {
             tableRow.link = link;
           }
@@ -124,9 +128,6 @@
           .then(results => {
             this.resources = results;
           })
-          .catch(error => {
-            console.error('An error occurred:', error);
-          });
       },
       resourceLink(resource) {
         if (resource.hasAssignments) {
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
index 6d82be0e20e..8ce6e6332a6 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
@@ -23,7 +23,7 @@
           :key="lesson.id"
           :style="lessonOrderListButtonBorder"
         >
-          <KGrid>
+          <KGrid :style="{ paddingTop: '1em' }">
             <KGridItem
               :layout12="{ span: 10 }"
               :layout8="{ span: 5 }"
@@ -73,7 +73,7 @@
               <span class="add-minus-button">
                 <KIconButton
                   icon="emptyTopic"
-                  @click="() => {}"
+                  @click="$emit('navigateToParent',lesson.id)"
                 />
 
                 <KIconButton

From 2cb92ed1e29faa2e0dea4cda59b5f979b42ca8cf Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 5 Dec 2024 20:56:17 +0300
Subject: [PATCH 14/24] fixes failing test

---
 .../LessonSummaryPage/sidePanels/LessonResourceSelection.vue   | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
index 1ef84cb50e1..65865cc6e13 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
@@ -130,7 +130,6 @@
     components: {
       SidePanelModal,
       AccessibleChannelCard,
-      SearchFiltersPanel,
     },
     setup() {
       const loading = ref(false);
@@ -176,8 +175,6 @@
         loading,
         bookmarks,
         channels,
-        showSearch,
-        searchTerms,
         selectFromChannels$,
         numberOfBookmarks$,
         bookmarksLabel$,

From e9255021218989f15bb7b36035ee31370ade4ea4 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 5 Dec 2024 21:25:43 +0300
Subject: [PATCH 15/24] fixes failing test

---
 .../__test__/LessonResourceSelectionPage.spec.js               | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js
index a883a8661c0..63afc3bdd4e 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js
@@ -72,7 +72,8 @@ describe('LessonResourceSelectionPage', () => {
         .findComponent({ name: 'BottomAppBar' })
         .findComponent({ name: 'KRouterLink' });
 
-      expect(button.props().text).toEqual('Exit search');
+      // expect(button.props().text).toEqual('Exit search');
+      expect(button.props().primary).toEqual(true);
 
       // If last_id is in URL, link back to the topic page
       expect(button.props().to).toEqual({

From 5ff97a30bcbcb05cc98c79197896b52099234da4 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 5 Dec 2024 21:33:27 +0300
Subject: [PATCH 16/24] fixes failing test

---
 .../__test__/LessonResourceSelectionPage.spec.js                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js
index 63afc3bdd4e..8790e698936 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js
@@ -123,7 +123,7 @@ describe('LessonResourceSelectionPage', () => {
         .findComponent({ name: 'BottomAppBar' })
         .findComponent({ name: 'KRouterLink' });
 
-      expect(button.props().text).toEqual('Close');
+      expect(button.props().primary).toEqual(true);
 
       const exitRoute = () => button.props().to.name;
       // Exit link goes to Lesson Summary page by default

From 6fef9760afed242c253ff2e1cd986b708e4efe71 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 5 Dec 2024 21:49:48 +0300
Subject: [PATCH 17/24] updates the test

---
 .../__test__/LessonResourceSelectionPage.spec.js               | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js
index 8790e698936..914de307157 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js
@@ -127,7 +127,8 @@ describe('LessonResourceSelectionPage', () => {
 
       const exitRoute = () => button.props().to.name;
       // Exit link goes to Lesson Summary page by default
-      expect(exitRoute()).toEqual(PageNames.LESSON_SUMMARY);
+      expect(exitRoute()).toBe(PageNames.LESSON_SUMMARY);
+      expect(exitRoute()).toBe(PageNames.LESSON_PREVIEW_SELECTED_RESOURCES);
 
       // Exit link goes to report page if that's in the URL
       await router.replace({ query: { last: 'LESSON_SUMMARY' } });

From 8bc13de5e18582199b6ba6affc064c708cb26fc4 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 12 Dec 2024 16:51:53 +0300
Subject: [PATCH 18/24] restores test

---
 .../__test__/LessonResourceSelectionPage.spec.js          | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js
index 914de307157..a883a8661c0 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/__test__/LessonResourceSelectionPage.spec.js
@@ -72,8 +72,7 @@ describe('LessonResourceSelectionPage', () => {
         .findComponent({ name: 'BottomAppBar' })
         .findComponent({ name: 'KRouterLink' });
 
-      // expect(button.props().text).toEqual('Exit search');
-      expect(button.props().primary).toEqual(true);
+      expect(button.props().text).toEqual('Exit search');
 
       // If last_id is in URL, link back to the topic page
       expect(button.props().to).toEqual({
@@ -123,12 +122,11 @@ describe('LessonResourceSelectionPage', () => {
         .findComponent({ name: 'BottomAppBar' })
         .findComponent({ name: 'KRouterLink' });
 
-      expect(button.props().primary).toEqual(true);
+      expect(button.props().text).toEqual('Close');
 
       const exitRoute = () => button.props().to.name;
       // Exit link goes to Lesson Summary page by default
-      expect(exitRoute()).toBe(PageNames.LESSON_SUMMARY);
-      expect(exitRoute()).toBe(PageNames.LESSON_PREVIEW_SELECTED_RESOURCES);
+      expect(exitRoute()).toEqual(PageNames.LESSON_SUMMARY);
 
       // Exit link goes to report page if that's in the URL
       await router.replace({ query: { last: 'LESSON_SUMMARY' } });

From 01d182e75ef93d4bf2635cd3817fbee2d268dad4 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 18 Dec 2024 17:15:03 +0300
Subject: [PATCH 19/24] fixes comments

---
 .../LessonResourceSelectionPage/index.vue     |   1 +
 .../ManageSelectedLessonResource.vue          | 142 ++++++++++++------
 .../sidePanels/SelectedResources.vue          |   1 +
 3 files changed, 96 insertions(+), 48 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue
index 2db2137ed6f..0d210a7f269 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue
@@ -97,6 +97,7 @@
 
     <BottomAppBar>
       <KRouterLink
+        v-if="workingResources.length > 0"
         :text="numberOfSelectedResource$({ count: workingResources.length })"
         :primary="true"
         :to="goToPreviewSelection()"
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
index 16e7cb76202..59e1c946f56 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
@@ -1,46 +1,60 @@
 <template>
 
-  <SidePanelModal
-    alignment="right"
-    sidePanelWidth="700px"
-    closeButtonIconType="close"
-    @closePanel="closeSidePanel"
-    @shouldFocusFirstEl="() => null"
-  >
-    <template #header>
-      <div :style="{ display: 'inline-flex' }">
-        <KIconButton
-          v-if="true"
-          icon="back"
-          @click="$router.go(-1)"
-        />
-        <h1
-          :style="{ fontWeight: '600', fontSize: '18px' }"
-          class="side-panel-title"
-        >
-          {{ numberOfSelectedResource$({ count: resources.length }) }}
-        </h1>
-      </div>
-    </template>
-
-    <SelectedResources
-      :resourceList="resources"
-      :currentLesson="currentLesson"
-      :loading="resources.length === 0"
-      @removeResource="removeResource"
-      @navigateToParent="navigateToParent"
-    />
-
-    <template #bottomNavigation>
-      <div class="bottom-buttons-style">
-        <KButton
-          :primary="true"
-          :text="saveLessonResources$()"
-          @click="closeSidePanel()"
-        />
-      </div>
-    </template>
-  </SidePanelModal>
+  <div>
+
+    <SidePanelModal
+      alignment="right"
+      sidePanelWidth="700px"
+      closeButtonIconType="close"
+      @closePanel="closeSidePanel"
+      @shouldFocusFirstEl="() => null"
+    >
+      <template #header>
+        <div :style="{ display: 'inline-flex' }">
+          <KIconButton
+            v-if="true"
+            icon="back"
+            @click="closeSidePanel"
+          />
+          <h1
+            :style="{ fontWeight: '600', fontSize: '18px' }"
+            class="side-panel-title"
+          >
+            {{ numberOfSelectedResource$({ count: resources.length }) }}
+          </h1>
+        </div>
+      </template>
+
+      <SelectedResources
+        :resourceList="resources"
+        :currentLesson="currentLesson"
+        :loading="resources.length === 0"
+        @removeResource="removeResource"
+        @navigateToParent="navigateToParent"
+      />
+
+      <template #bottomNavigation>
+        <div class="bottom-buttons-style">
+          <KButton
+            :primary="true"
+            :text="saveLessonResources$()"
+            @click="closeSidePanel()"
+          />
+        </div>
+      </template>
+    </SidePanelModal>
+
+    <KModal
+      v-if="showModal"
+      :submitText="coreString('continueAction')"
+      :cancelText="coreString('cancelAction')"
+      :title="closeConfirmationTitle$()"
+      @cancel="closeModal"
+      @submit="$router.go(-1)"
+    >
+      {{ closeConfirmationMessage$() }}
+    </KModal>
+  </div>
 
 </template>
 
@@ -50,6 +64,11 @@
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { mapState } from 'vuex';
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import { ref , getCurrentInstance, computed } from 'vue';
+  import {
+    enhancedQuizManagementStrings,
+  } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import { PageNames } from '../../../../constants';
   import commonCoach from '../../../common';
   import SelectedResources from './SelectedResources';
@@ -60,12 +79,45 @@
       SidePanelModal,
       SelectedResources,
     },
-    mixins: [commonCoach],
+    mixins: [commonCoach,commonCoreStrings],
     setup() {
+      const showModal = ref(false);
+      const backupResources = ref([]);
+      const store = getCurrentInstance().proxy.$store;
+      const router = getCurrentInstance().proxy.$router;
+
+      const workingResourcePool = computed(()=> store.state.lessonSummary.workingResources);
       const { saveLessonResources$, numberOfSelectedResource$ } = searchAndFilterStrings;
+      const {
+        closeConfirmationTitle$,
+        closeConfirmationMessage$
+      } = enhancedQuizManagementStrings;
+
+      function closeModal(){
+        showModal.value = false;
+      }
+
+      function closeSidePanel() {
+        if(workingResourcePool.value !== backupResources.value){
+          router.go(-1);
+        }
+        showModal.value = true;
+      }
+
+      function saveResourcesCopy(){
+        backupResources.value = workingResourcePool;
+      }
+
+      saveResourcesCopy();
+
       return {
         saveLessonResources$,
         numberOfSelectedResource$,
+        closeConfirmationTitle$,
+        closeConfirmationMessage$,
+        showModal,
+        closeModal,
+        closeSidePanel,
       };
     },
     data() {
@@ -146,12 +198,6 @@
           }
         }
       },
-      closeSidePanel() {
-        this.$router.push({
-          name: PageNames.LESSONS_ROOT,
-          params: { classId: this.$route.params.classId },
-        });
-      },
     },
     $trs: {},
   };
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
index 8ce6e6332a6..f816a090a3a 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
@@ -174,6 +174,7 @@
 
   .resource-list-style {
     margin-bottom: 3.5em;
+    margin-top:2em;
   }
 
 </style>

From a9eb60122c87f217b2cc8188f6d28b1f13e30f8f Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 18 Dec 2024 17:27:37 +0300
Subject: [PATCH 20/24] fixes comments

---
 .../ManageSelectedLessonResource.vue          | 31 +++++++------------
 .../sidePanels/SelectedResources.vue          |  4 +--
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
index 59e1c946f56..5f7ebc90259 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
@@ -1,7 +1,6 @@
 <template>
 
   <div>
-
     <SidePanelModal
       alignment="right"
       sidePanelWidth="700px"
@@ -65,10 +64,8 @@
   import { mapState } from 'vuex';
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
-  import { ref , getCurrentInstance, computed } from 'vue';
-  import {
-    enhancedQuizManagementStrings,
-  } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import { ref, getCurrentInstance, computed } from 'vue';
+  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import { PageNames } from '../../../../constants';
   import commonCoach from '../../../common';
   import SelectedResources from './SelectedResources';
@@ -79,32 +76,29 @@
       SidePanelModal,
       SelectedResources,
     },
-    mixins: [commonCoach,commonCoreStrings],
+    mixins: [commonCoach, commonCoreStrings],
     setup() {
       const showModal = ref(false);
       const backupResources = ref([]);
       const store = getCurrentInstance().proxy.$store;
       const router = getCurrentInstance().proxy.$router;
 
-      const workingResourcePool = computed(()=> store.state.lessonSummary.workingResources);
+      const workingResourcePool = computed(() => store.state.lessonSummary.workingResources);
       const { saveLessonResources$, numberOfSelectedResource$ } = searchAndFilterStrings;
-      const {
-        closeConfirmationTitle$,
-        closeConfirmationMessage$
-      } = enhancedQuizManagementStrings;
+      const { closeConfirmationTitle$, closeConfirmationMessage$ } = enhancedQuizManagementStrings;
 
-      function closeModal(){
+      function closeModal() {
         showModal.value = false;
       }
 
       function closeSidePanel() {
-        if(workingResourcePool.value !== backupResources.value){
+        if (workingResourcePool.value !== backupResources.value) {
           router.go(-1);
         }
         showModal.value = true;
       }
 
-      function saveResourcesCopy(){
+      function saveResourcesCopy() {
         backupResources.value = workingResourcePool;
       }
 
@@ -158,7 +152,7 @@
           }
           const tally = this.getContentStatusTally(
             content.content_id,
-            this.getLearnersForLesson(this.currentLesson)
+            this.getLearnersForLesson(this.currentLesson),
           );
 
           const tableRow = {
@@ -176,10 +170,9 @@
           return tableRow;
         });
 
-        Promise.all(response)
-          .then(results => {
-            this.resources = results;
-          })
+        Promise.all(response).then(results => {
+          this.resources = results;
+        });
       },
       resourceLink(resource) {
         if (resource.hasAssignments) {
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
index f816a090a3a..fd8650523bd 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
@@ -73,7 +73,7 @@
               <span class="add-minus-button">
                 <KIconButton
                   icon="emptyTopic"
-                  @click="$emit('navigateToParent',lesson.id)"
+                  @click="$emit('navigateToParent', lesson.id)"
                 />
 
                 <KIconButton
@@ -173,8 +173,8 @@
   }
 
   .resource-list-style {
+    margin-top: 2em;
     margin-bottom: 3.5em;
-    margin-top:2em;
   }
 
 </style>

From 26142c6024aab121b225e5c9052def362dfe19eb Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 18 Dec 2024 21:56:53 +0300
Subject: [PATCH 21/24] more comment fix

---
 .../ManageSelectedLessonResource.vue          | 30 +++++++------------
 .../sidePanels/SelectedResources.vue          |  5 +++-
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
index 5f7ebc90259..bdd4e3137e7 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
@@ -64,7 +64,7 @@
   import { mapState } from 'vuex';
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
-  import { ref, getCurrentInstance, computed } from 'vue';
+  import { ref, getCurrentInstance } from 'vue';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import { PageNames } from '../../../../constants';
   import commonCoach from '../../../common';
@@ -79,11 +79,9 @@
     mixins: [commonCoach, commonCoreStrings],
     setup() {
       const showModal = ref(false);
-      const backupResources = ref([]);
-      const store = getCurrentInstance().proxy.$store;
+      const hasArrayChanged = ref(false);
       const router = getCurrentInstance().proxy.$router;
 
-      const workingResourcePool = computed(() => store.state.lessonSummary.workingResources);
       const { saveLessonResources$, numberOfSelectedResource$ } = searchAndFilterStrings;
       const { closeConfirmationTitle$, closeConfirmationMessage$ } = enhancedQuizManagementStrings;
 
@@ -91,19 +89,18 @@
         showModal.value = false;
       }
 
+      function hasModifiedArray() {
+        hasArrayChanged.value = true;
+      }
+
       function closeSidePanel() {
-        if (workingResourcePool.value !== backupResources.value) {
+        if (hasArrayChanged.value) {
+          showModal.value = true;
+        } else {
           router.go(-1);
         }
-        showModal.value = true;
-      }
-
-      function saveResourcesCopy() {
-        backupResources.value = workingResourcePool;
       }
 
-      saveResourcesCopy();
-
       return {
         saveLessonResources$,
         numberOfSelectedResource$,
@@ -112,6 +109,7 @@
         showModal,
         closeModal,
         closeSidePanel,
+        hasModifiedArray,
       };
     },
     data() {
@@ -121,13 +119,6 @@
     },
     computed: {
       ...mapState('lessonSummary', ['currentLesson', 'workingResources', 'resourceCache']),
-      lessonOrderListButtonBorder() {
-        return {
-          borderBottom: `1px solid ${this.$themePalette.grey.v_200}`,
-          height: `4em`,
-          marginTop: `0.5em`,
-        };
-      },
     },
     mounted() {
       setTimeout(() => {
@@ -137,6 +128,7 @@
     methods: {
       removeResource(id) {
         this.resources = this.resources.filter(lesson => lesson.id !== id);
+        this.hasModifiedArray();
       },
       navigateToParent(id) {
         this.$router.push({
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
index fd8650523bd..f20b5d0c27a 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <div v-if="loading">
+  <div
+    v-if="loading"
+    class="resource-list-style"
+  >
     <KCircularLoader />
   </div>
   <div

From d4fe9f559e69330ff2ae8a18b6aad18eb212b5e1 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 18 Dec 2024 22:13:05 +0300
Subject: [PATCH 22/24] fix failing check

---
 .../src/views/lessons/LessonCreationPage.vue  | 46 -------------------
 1 file changed, 46 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonCreationPage.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonCreationPage.vue
index f9189ddaf1a..a719a9e3b0c 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonCreationPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonCreationPage.vue
@@ -45,33 +45,6 @@
       classId() {
         return this.$route.params.classId;
       },
-      recipients() {
-        return this.getLearnersForLesson(this.currentLesson);
-      },
-      resourcesTable() {
-        return this.workingResources.map(resource => {
-          const content = this.resourceCache[resource.contentnode_id];
-          if (!content) {
-            return this.missingResourceObj(resource.contentnode_id);
-          }
-
-          const tally = this.getContentStatusTally(content.content_id, this.recipients);
-          const tableRow = {
-            ...content,
-            node_id: content.id,
-            avgTimeSpent: this.getContentAvgTimeSpent(content.content_id, this.recipients),
-            tally,
-            hasAssignments: Object.values(tally).reduce((a, b) => a + b, 0),
-          };
-
-          const link = this.resourceLink(tableRow);
-          if (link) {
-            tableRow.link = link;
-          }
-
-          return tableRow;
-        });
-      },
     },
     created() {
       const initClassInfoPromise = this.$store.dispatch('initClassInfo', this.classId);
@@ -104,25 +77,6 @@
             }
           });
       },
-      resourceLink(resource) {
-        if (resource.hasAssignments) {
-          if (resource.kind === this.ContentNodeKinds.EXERCISE) {
-            return this.classRoute(
-              this.group
-                ? 'ReportsGroupReportLessonExerciseLearnerListPage'
-                : 'ReportsLessonExerciseLearnerListPage',
-              { exerciseId: resource.content_id },
-            );
-          } else {
-            return this.classRoute(
-              this.group
-                ? 'ReportsGroupReportLessonResourceLearnerListPage'
-                : 'ReportsLessonResourceLearnerListPage',
-              { resourceId: resource.content_id },
-            );
-          }
-        }
-      },
     },
   };
 

From 12e2a323709b252524fbc825ed7163ff73c720a9 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Wed, 18 Dec 2024 22:37:41 +0300
Subject: [PATCH 23/24] themetoken

---
 .../lessons/LessonSummaryPage/sidePanels/SelectedResources.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
index f20b5d0c27a..7358ce092d8 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/SelectedResources.vue
@@ -140,7 +140,7 @@
     computed: {
       lessonOrderListButtonBorder() {
         return {
-          borderBottom: `1px solid ${this.$themePalette.grey.v_200}`,
+          borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
           height: `auto`,
           width: `100%`,
         };

From 2218fbb34e62c115926e665d6d574fd3d8e6976c Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 19 Dec 2024 21:09:18 +0300
Subject: [PATCH 24/24] clean up code

---
 .../ManageSelectedLessonResource.vue           | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
index bdd4e3137e7..25eee245b98 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
@@ -89,7 +89,7 @@
         showModal.value = false;
       }
 
-      function hasModifiedArray() {
+      function hasModifiedResource() {
         hasArrayChanged.value = true;
       }
 
@@ -109,7 +109,7 @@
         showModal,
         closeModal,
         closeSidePanel,
-        hasModifiedArray,
+        hasModifiedResource,
       };
     },
     data() {
@@ -118,17 +118,18 @@
       };
     },
     computed: {
+      // we will have to move this to composable after the final refactor
+      // leaving it for now to guide the process
       ...mapState('lessonSummary', ['currentLesson', 'workingResources', 'resourceCache']),
     },
     mounted() {
-      setTimeout(() => {
-        this.getResources();
-      }, 2000);
+      this.getResources();
     },
+
     methods: {
       removeResource(id) {
         this.resources = this.resources.filter(lesson => lesson.id !== id);
-        this.hasModifiedArray();
+        this.hasModifiedResource();
       },
       navigateToParent(id) {
         this.$router.push({
@@ -136,6 +137,8 @@
           params: { classId: this.$route.params.classId, lessonId: id },
         });
       },
+      // we will have to move this to the composable after the final refactor
+      // leaving it for now to guide the process
       getResources() {
         const response = this.workingResources.map(resource => {
           const content = this.resourceCache[resource.contentnode_id];
@@ -166,6 +169,8 @@
           this.resources = results;
         });
       },
+      // we will have to move this to the composable after the final refactor
+      // leaving it for now to guide the process
       resourceLink(resource) {
         if (resource.hasAssignments) {
           if (resource.kind === this.ContentNodeKinds.EXERCISE) {
@@ -184,7 +189,6 @@
         }
       },
     },
-    $trs: {},
   };
 
 </script>