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/UpdatedResourceSelection.vue

@@ -85,6 +85,10 @@
         type: Array,
         required: true,
       },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       channelsLink() {
@@ -151,6 +155,9 @@
         }
       },
       contentCheckboxDisabled(resource) {
+        if (this.disabled) {
+          return true;
+        }
         return !this.selectionRules.every(rule => rule(resource) === true);
       },
       contentIsChecked(resource) {

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

@@ -77,7 +77,7 @@
         </KPageContainer>
       </KGridItem>
     </KGrid>
-    <router-view />
+    <router-view @workingResourcesUpdated="workingResourcesBackup = [...workingResources]" />
   </CoachAppBarPage>
 
 </template>

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

@@ -26,11 +26,13 @@
       :setTitle="setTitle"
       :setGoBack="setGoBack"
       :topic="topic"
+      :disabled="isSaving"
       :channelsFetch="channelsFetch"
       :bookmarksFetch="bookmarksFetch"
       :treeFetch="treeFetch"
       :selectionRules="selectionRules"
       :selectedResources="selectedResources"
+      :selectedResourcesSize="selectedResourcesSize"
       @selectResources="selectResources"
       @deselectResources="deselectResources"
       @setSelectedResources="setSelectedResources"
@@ -40,29 +42,50 @@
       <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 }}
           </KRouterLink>
           <KButton
             primary
+            :disabled="isSaving"
             :text="saveAndFinishAction$()"
-            @click="closeSidePanel"
+            @click="save"
           />
         </KButtonGroup>
       </div>
     </template>
+
+    <KModal
+      v-if="isCloseConfirmationOpen"
+      appendToOverlay
+      :submitText="continueAction$()"
+      :cancelText="cancelAction$()"
+      :title="$tr('closeConfirmationTitle')"
+      @cancel="isCloseConfirmationOpen = false"
+      @submit="closeSidePanel(false)"
+    >
+      {{ $tr('closeConfirmationMessage') }}
+    </KModal>
   </SidePanelModal>
 
 </template>
 
 
 <script>
 
+  import uniqBy from 'lodash/uniqBy';
+  import { mapState, mapActions, mapMutations } from 'vuex';
+
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
+  import notificationStrings from 'kolibri/uiText/notificationStrings';
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import bytesForHumans from 'kolibri/uiText/bytesForHumans';
+  import useSnackbar from 'kolibri/composables/useSnackbar';
   import { PageNames } from '../../../../../constants';
   import { coachStrings } from '../../../../common/commonCoachStrings';
   import useResourceSelection from '../../../../../composables/useResourceSelection';
@@ -86,7 +109,18 @@
         setSelectedResources,
       } = useResourceSelection();
 
-      const { saveAndFinishAction$ } = coreStrings;
+      const { createSnackbar } = useSnackbar();
+
+      const { resourcesAddedWithCount$ } = notificationStrings;
+      function notifyResourcesAdded(count) {
+        createSnackbar(resourcesAddedWithCount$({ count }));
+      }
+      const { saveLessonError$ } = coachStrings;
+      function notifySaveLessonError() {
+        createSnackbar(saveLessonError$());
+      }
+
+      const { saveAndFinishAction$, continueAction$, cancelAction$ } = coreStrings;
 
       return {
         loading,
@@ -99,18 +133,25 @@
         selectResources,
         deselectResources,
         setSelectedResources,
+        notifyResourcesAdded,
+        notifySaveLessonError,
+        cancelAction$,
+        continueAction$,
         saveAndFinishAction$,
       };
     },
     data() {
       return {
         title: '',
         goBack: null,
+        isSaving: false,
+        isCloseConfirmationOpen: false,
         PageNames,
       };
     },
     computed: {
-      totalSize() {
+      ...mapState('lessonSummary', ['currentLesson', 'workingResources']),
+      selectedResourcesSize() {
         let size = 0;
         this.selectedResources.forEach(resource => {
           const { files = [] } = resource;
@@ -124,15 +165,71 @@
         const { someResourcesSelected$ } = coachStrings;
         return someResourcesSelected$({
           count: this.selectedResources.length,
-          bytesText: bytesForHumans(this.totalSize),
+          bytesText: bytesForHumans(this.selectedResourcesSize),
         });
       },
     },
     methods: {
-      closeSidePanel() {
-        this.$router.push({
-          name: PageNames.LESSON_SUMMARY_BETTER,
-        });
+      ...mapActions('lessonSummary', ['saveLessonResources', 'addToResourceCache']),
+      ...mapMutations('lessonSummary', {
+        setWorkingResources: 'SET_WORKING_RESOURCES',
+      }),
+      getNewResources() {
+        return uniqBy(
+          [
+            ...this.workingResources,
+            ...this.selectedResources.map(resource => ({
+              contentnode_id: resource.id,
+              content_id: resource.content_id,
+              channel_id: resource.channel_id,
+            })),
+          ],
+          'contentnode_id',
+        );
+      },
+      async save() {
+        if (!this.selectedResources.length) {
+          this.closeSidePanel(false);
+          return;
+        }
+        this.isSaving = true;
+        const newResources = this.getNewResources();
+
+        // As we are just adding resources, we can rely on the difference in length
+        // to determine if there are new resources to save.
+        const countNewResources = newResources.length - this.workingResources.length;
+        if (countNewResources > 0) {
+          try {
+            await this.saveLessonResources({
+              lessonId: this.currentLesson.id,
+              resources: newResources,
+            });
+          } catch (error) {
+            this.notifySaveLessonError();
+            this.isSaving = false;
+            throw error;
+          }
+          for (const resource of this.selectedResources) {
+            this.addToResourceCache({ node: resource });
+          }
+          this.setWorkingResources(newResources);
+          // Notify the lesson summary page that the working resources have been updated
+          // so that it can update the backup resources.
+          this.$emit('workingResourcesUpdated');
+          this.notifyResourcesAdded(countNewResources);
+        }
+        this.closeSidePanel(false);
+      },
+      closeSidePanel(verifyHasNewResources = true) {
+        const newResources = this.getNewResources();
+        const hasNewResources = newResources.length > this.workingResources.length;
+        if (hasNewResources && verifyHasNewResources) {
+          this.isCloseConfirmationOpen = true;
+        } else {
+          this.$router.push({
+            name: PageNames.LESSON_SUMMARY_BETTER,
+          });
+        }
       },
       setTitle(title) {
         this.title = title;
@@ -141,6 +238,18 @@
         this.goBack = goBack;
       },
     },
+    $trs: {
+      closeConfirmationTitle: {
+        message: 'Are you sure you want to leave this page?',
+        context:
+          'The title of a confirmation modal informing the user that they will lose their work if they leave the page',
+      },
+      closeConfirmationMessage: {
+        message: 'You will lose any unsaved edits to your work',
+        context:
+          'Warning message for the user that they will lose their work if they leave the page without saving.',
+      },
+    },
   };
 
 </script>