From 8be2963a3954e774f5d307abb1dd7c42e173f1a5 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] fixes routes

---
 .../assets/src/routes/planLessonsRoutes.js    |   2 +
 .../PreviewSelectedResources.vue              |  18 +-
 .../ManageSelectedLessonResource.vue          | 179 ++++++++++--------
 .../LessonResourceSelectionPage/index.vue     |  17 +-
 .../views/plan/LessonSummaryPage/index.vue    |  36 ++++
 5 files changed, 164 insertions(+), 88 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js b/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
index cb6d90e3e15..78664f7dac0 100644
--- a/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
@@ -88,6 +88,8 @@ export default [
         },
       },
       {
+
+        
         name: PageNames.LESSON_SELECT_RESOURCES,
         path: 'select-resources/:topicId?',
         component: LessonResourceSelection,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue
index 4d69ff11eea..971988f297b 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/PreviewSelectedResources.vue
@@ -1,16 +1,28 @@
 <template>
 
-  <div>
-    <h1>PreviewSelectedResources</h1>
-  </div>
+  <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
index 74fe1b99e85..2af5a263739 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
@@ -1,93 +1,82 @@
 <template>
 
   <div>
-    <p>Lesson : Intro to chemical bond </p>
+    <p>{{ coreString('lessonsLabel') }} : {{ lessonObject.title }} </p>
 
-    <p>Size : 16 MB</p>
+    <p>{{ $tr('sizeLabel') }} : {{ bytesForHumans(lessonObject.size) }}</p>
 
-    <DragContainer
-      v-if="sectionOrderList.length > 0"
-      :items="sectionOrderList"
-      @sort=""
+    <div
+      v-for="(lesson , index) in resources"
+      :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 === 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>
-              </KGridItem>
-
-            </KGrid>
-          </DragHandle>
-        </Draggable>
-      </transition-group>
-    </DragContainer>
+                <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="() => {}"
+        @click="()=>{ }"
       />
     </div>
   </div>
@@ -97,22 +86,31 @@
 
 <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  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: {
-      Draggable,
-      DragContainer,
-      DragHandle,
       DragSortWidget,
+      LearningActivityIcon
+    },
+    mixins:[commonCoreStrings],
+    props:{
+      lessonResourceList:{
+        type: Array,
+        required:true
+      },
+      lessonObject:{
+        type: Object,
+        required:true
+      },
     },
     data(){
       return {
-        sectionOrderList:[ 1,2,3,4,5]
+        resources: this.lessonResourceList,
       }
     },
     computed: {
@@ -123,6 +121,19 @@
           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'
+      }
     }
   }
 
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
index ffb2ee9601d..ebc052ed453 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/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"
@@ -125,7 +132,7 @@
   import CoachAppBarPage from '../../CoachAppBarPage';
   import CoachImmersivePage from '../../CoachImmersivePage';
   import { LessonsPageNames } from '../../../constants/lessonsConstants';
-  import { ViewMoreButtonStates } from '../../../constants/index';
+  import { ViewMoreButtonStates, PageNames } from '../../../constants/index';
   import LessonsSearchBox from './SearchTools/LessonsSearchBox';
   import LessonsSearchFilters from './SearchTools/LessonsSearchFilters';
   import ResourceSelectionBreadcrumbs from './SearchTools/ResourceSelectionBreadcrumbs';
@@ -555,12 +562,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/plan/LessonSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/index.vue
index e54f48dd401..a631b73e144 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/index.vue
@@ -75,6 +75,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>
@@ -87,6 +114,7 @@
 
   import sortBy from 'lodash/sortBy';
   import { mapState, mapActions, mapMutations } from 'vuex';
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import commonCoach from '../../common';
@@ -94,6 +122,7 @@
   import ReportsControls from '../../reports/ReportsControls';
   import { selectionRootLink } from '../../../routes/planLessonsRouterUtils';
   import { LessonsPageNames } from '../../../constants/lessonsConstants';
+  import ManageSelectedLessonResources from '../LessonResourceSelectionPage/ManageSelectedLessonResource';
   import { REPORTS_LESSON_TABS_ID, ReportsLessonTabs } from '../../../constants/tabsConstants';
   import ReportsLessonResourcesTable from '../../reports/ReportsLessonResourcesTable';
   import ReportsLessonLearnersTable from '../../reports/ReportsLessonLearnersTable';
@@ -116,6 +145,8 @@
       LessonOptionsDropdownMenu,
       ReportsLessonLearnersTable,
       ReportsLessonResourcesTable,
+      ManageSelectedLessonResources,
+      SidePanelModal
     },
     mixins: [commonCoach, commonCoreStrings],
     setup() {
@@ -130,6 +161,7 @@
         ReportsLessonTabs,
         workingResourcesBackup,
         REPORTS_LESSON_TABS_ID,
+        showSidePanel:true,
       };
     },
     computed: {
@@ -326,6 +358,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'
+      }
     },
   };