From e18471ff6891372d2c6c189e315ade9492264812 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] clean up routing business

---
 .../coach/assets/src/routes/lessonsRoutes.js  |   2 +-
 .../sidePanels/LessonResourceSelection.vue    |  20 ++
 .../ManageSelectedLessonResource.vue          | 222 ++++++++++--------
 .../ManageSelectedLessonResource.vue          | 168 -------------
 4 files changed, 147 insertions(+), 265 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 93ec98fa5f4..d2995edde70 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
@@ -71,6 +71,12 @@
 
     <template #bottomNavigation>
       <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$()"
@@ -91,6 +97,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 { mapState } from 'vuex';
+  import { PageNames } from '../../../../constants';
 
   export default {
     name: 'LessonResourceSelection',
@@ -149,6 +157,14 @@
         saveAndFinishAction$,
       };
     },
+    data(){
+      return {
+        PageNames,
+      }
+    },
+    computed:{
+      ...mapState('lessonSummary', ['workingResources']),
+    },
     methods: {
       closeSidePanel() {
         this.$router.go(-1);
@@ -160,6 +176,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