Integrate shopping cart into lesson resource selection side panel

kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js

@@ -39,10 +39,11 @@ 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/ManageSelectedLessonResource';
 import SelectionIndex from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectionIndex.vue';
 import SelectFromBookmarks from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromBookmarks.vue';
 import SelectFromChannels from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/SelectFromChannels.vue';
+import ManageSelectedResources from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/ManageSelectedResources.vue';
+
 import { classIdParamRequiredGuard, RouteSegments } from './utils';
 
 const {
@@ -155,13 +156,13 @@ export default [
             path: 'channels',
             component: SelectFromChannels,
           },
+          {
+            name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
+            path: 'preview-resources',
+            component: ManageSelectedResources,
+          },
         ],
       },
-      {
-        name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
-        path: 'preview-resources/',
-        component: ManageSelectedLessonResources,
-      },
       {
         name: PageNames.LESSON_PREVIEW_RESOURCE,
         path: 'preview-resources/:nodeId',

kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue

@@ -196,6 +196,7 @@
   .content-list {
     display: block;
     padding: 0;
+    margin: 0;
     list-style: none;
   }
 

kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/index.vue

@@ -98,7 +98,7 @@
     <BottomAppBar>
       <KRouterLink
         v-if="workingResources.length > 0"
-        :text="numberOfSelectedResource$({ count: workingResources.length })"
+        :text="numberOfSelectedResources$({ count: workingResources.length })"
         :primary="true"
         :to="goToPreviewSelection()"
         :style="{ marginRight: '1em', marginTop: '0.5em' }"
@@ -163,13 +163,13 @@
       const { windowIsSmall } = useKResponsiveWindow();
       const { getUserPermissions } = useUser();
       const { createSnackbar, clearSnackbar } = useSnackbar();
-      const { numberOfSelectedResource$ } = searchAndFilterStrings;
+      const { numberOfSelectedResources$ } = searchAndFilterStrings;
       return {
         windowIsSmall,
         getUserPermissions,
         createSnackbar,
         clearSnackbar,
-        numberOfSelectedResource$,
+        numberOfSelectedResources$,
       };
     },
     data() {

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/index.vue

@@ -31,6 +31,7 @@
       :treeFetch="treeFetch"
       :selectionRules="selectionRules"
       :selectedResources="selectedResources"
+      :selectedResourcesSize="selectedResourcesSize"
       @selectResources="selectResources"
       @deselectResources="deselectResources"
       @setSelectedResources="setSelectedResources"
@@ -40,7 +41,10 @@
       <div class="bottom-nav-container">
         <KButtonGroup>
           <KRouterLink
-            v-if="selectedResources.length > 0"
+            v-if="
+              selectedResources.length > 0 &&
+                $route.name !== PageNames.LESSON_PREVIEW_SELECTED_RESOURCES
+            "
             :to="{ name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES }"
           >
             {{ selectedResourcesMessage }}
@@ -110,7 +114,7 @@
       };
     },
     computed: {
-      totalSize() {
+      selectedResourcesSize() {
         let size = 0;
         this.selectedResources.forEach(resource => {
           const { files = [] } = resource;
@@ -124,7 +128,7 @@
         const { someResourcesSelected$ } = coachStrings;
         return someResourcesSelected$({
           count: this.selectedResources.length,
-          bytesText: bytesForHumans(this.totalSize),
+          bytesText: bytesForHumans(this.selectedResourcesSize),
         });
       },
     },

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection/subPages/ManageSelectedResources.vue

@@ -0,0 +1,263 @@
+<template>
+
+  <div>
+    <div class="selection-metadata-info">
+      <p>{{ lessonLabel$() }}: {{ currentLesson.title }}</p>
+      <p>{{ sizeLabel$() }}: {{ bytesForHumans(selectedResourcesSize) }}</p>
+    </div>
+    <DragContainer
+      v-if="selectedResources.length > 0"
+      :items="selectedResources"
+      @sort="$emit('setSelectedResources', $event.newArray)"
+    >
+      <transition-group
+        tag="div"
+        name="list"
+      >
+        <Draggable
+          v-for="(resource, index) in selectedResources"
+          :key="resource.id"
+        >
+          <div
+            class="resource-row"
+            :style="lessonOrderListButtonBorder"
+          >
+            <div class="row-content">
+              <DragHandle v-if="selectedResources.length > 1">
+                <DragSortWidget
+                  :moveUpText="upLabel$"
+                  :moveDownText="downLabel$"
+                  :noDrag="true"
+                  :isFirst="index === 0"
+                  :isLast="index === selectedResources.length - 1"
+                  @moveUp="() => {}"
+                  @moveDown="() => {}"
+                />
+              </DragHandle>
+              <LearningActivityIcon
+                :kind="resource.learning_activities[0]"
+                class="icon-style"
+              />
+              <div>
+                <span class="arrange-item-block">
+                  <span>
+                    <KRouterLink
+                      :text="resource.title"
+                      :to="{}"
+                      style="font-size: 14px"
+                    />
+                  </span>
+                  <p
+                    class="resource-size"
+                    :style="{
+                      color: $themeTokens.annotation,
+                    }"
+                  >
+                    {{ bytesForHumans(getResourceSize(resource)) }}
+                  </p>
+                </span>
+              </div>
+            </div>
+            <span class="row-actions">
+              <KIconButton
+                icon="emptyTopic"
+                :ariaLabel="$tr('openParentFolderLabel')"
+                :tooltip="$tr('openParentFolderLabel')"
+                @click="navigateToParent(resource)"
+              />
+
+              <KIconButton
+                icon="minus"
+                :ariaLabel="$tr('removeResourceLabel')"
+                :tooltip="$tr('removeResourceLabel')"
+                @click="removeResource(resource)"
+              />
+            </span>
+          </div>
+        </Draggable>
+      </transition-group>
+    </DragContainer>
+    <p v-else>
+      {{ $tr('emptyResourceList') }}
+    </p>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { mapState } from 'vuex';
+
+  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 LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
+  import bytesForHumans from 'kolibri/uiText/bytesForHumans';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
+  import { getCurrentInstance, onMounted, ref, watch } from 'vue';
+  import { coachStrings } from '../../../../../common/commonCoachStrings.js';
+  import { PageNames } from '../../../../../../constants/index.js';
+
+  export default {
+    name: 'SelectedResources',
+    components: {
+      DragSortWidget,
+      DragContainer,
+      DragHandle,
+      Draggable,
+      LearningActivityIcon,
+    },
+    setup(props) {
+      const prevRoute = ref(null);
+
+      const { upLabel$, downLabel$, numberOfSelectedResources$ } = searchAndFilterStrings;
+      const { lessonLabel$, sizeLabel$ } = coachStrings;
+
+      const instance = getCurrentInstance();
+
+      onMounted(() => {
+        const backRoute = prevRoute.value?.name
+          ? prevRoute.value
+          : {
+            name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+          };
+        if (props.selectedResources.length === 0) {
+          instance.proxy.$router.replace(backRoute);
+        }
+        props.setTitle(numberOfSelectedResources$({ count: props.selectedResources.length }));
+        props.setGoBack(() => {
+          instance.proxy.$router.push(backRoute);
+        });
+      });
+
+      watch(
+        () => props.selectedResources,
+        () => {
+          props.setTitle(numberOfSelectedResources$({ count: props.selectedResources.length }));
+        },
+      );
+
+      return {
+        // eslint-disable-next-line vue/no-unused-properties
+        prevRoute,
+        upLabel$,
+        downLabel$,
+        sizeLabel$,
+        lessonLabel$,
+      };
+    },
+    props: {
+      setTitle: {
+        type: Function,
+        default: () => {},
+      },
+      setGoBack: {
+        type: Function,
+        default: () => {},
+      },
+      selectedResources: {
+        type: Array,
+        required: true,
+      },
+      selectedResourcesSize: {
+        type: Number,
+        required: true,
+      },
+    },
+
+    computed: {
+      ...mapState('lessonSummary', ['currentLesson']),
+      lessonOrderListButtonBorder() {
+        return {
+          borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
+          height: `auto`,
+          width: `100%`,
+        };
+      },
+    },
+    beforeRouteEnter(to, from, next) {
+      next(vm => {
+        vm.prevRoute = from;
+      });
+    },
+    methods: {
+      bytesForHumans,
+      getResourceSize(resource) {
+        return resource.files.reduce((acc, file) => acc + file.file_size, 0);
+      },
+      removeResource(resource) {
+        this.$emit('deselectResources', [resource]);
+      },
+      navigateToParent(resource) {
+        this.$router.push({
+          name: PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE,
+          query: { topicId: resource.parent },
+        });
+      },
+    },
+    $trs: {
+      openParentFolderLabel: {
+        message: 'Open parent folder',
+        context: 'Button label to open the parent folder of a resource',
+      },
+      removeResourceLabel: {
+        message: 'Remove resource',
+        context: 'Button label to remove a resource from the selected resources',
+      },
+      emptyResourceList: {
+        message: 'No resources selected',
+        context: 'Message displayed when no resources are selected',
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped lang="scss">
+
+  .resource-row {
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+
+    &:not(:first-of-type) {
+      margin-top: 16px;
+    }
+
+    &:last-of-type {
+      border-width: 0 !important;
+    }
+
+    .resource-size {
+      margin-top: 10px;
+      margin-bottom: 16px;
+      font-size: 12px;
+    }
+
+    .row-content {
+      display: flex;
+      gap: 16px;
+    }
+
+    .row-actions {
+      flex-shrink: 0;
+    }
+  }
+
+  .arrange-item-block {
+    display: block;
+  }
+
+  .icon-style {
+    font-size: 21px;
+  }
+
+  .selection-metadata-info p {
+    margin-top: 0;
+    margin-bottom: 24px;
+  }
+
+</style>