From 300b355733d4868a68fdb556ff9f079e11543c35 Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Mon, 27 Nov 2023 23:43:27 +0300
Subject: [PATCH] added dragging feature

---
 .../assets/src/composables/useResources.js    | 169 +++--
 .../coach/assets/src/routes/planExamRoutes.js |  22 +-
 .../CreateExamPage/BookMarkedResource.vue     |  11 +-
 .../plan/CreateExamPage/ResourceSelection.vue | 653 +++++++++++++-----
 .../plan/CreateExamPage/SectionSidePanel.vue  |   1 -
 .../src/views/plan/CreateExamPage/index.vue   |   3 +-
 6 files changed, 596 insertions(+), 263 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/composables/useResources.js b/kolibri/plugins/coach/assets/src/composables/useResources.js
index 1c549cfae61..aed6a874d0d 100644
--- a/kolibri/plugins/coach/assets/src/composables/useResources.js
+++ b/kolibri/plugins/coach/assets/src/composables/useResources.js
@@ -1,17 +1,34 @@
 import { ref, onMounted } from 'kolibri.lib.vueCompositionApi';
 import { ChannelResource, ContentNodeResource } from 'kolibri.resources';
-// import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
-// import { getContentNodeThumbnail } from 'kolibri.utils.contentNode';
+import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
+import { getContentNodeThumbnail } from 'kolibri.utils.contentNode';
+import { set } from '@vueuse/core';
+import store from 'kolibri.coreVue.vuex.store';
+
+// import { store } from 'vuex';
 
 export function useResources() {
   const resources = ref(null);
   const channels = ref([]);
   const bookmarks = ref([]);
+  const contentList = ref([]);
 
   function fetchChannelResource() {
     ChannelResource.fetchCollection({ params: { has_exercises: true, available: true } }).then(
       response => {
-        channels.value = response;
+        // channels.value = response;
+        set(
+          channels,
+          response.map(chnl => {
+            return {
+              ...chnl,
+              id: chnl.root,
+              title: chnl.name,
+              kind: ContentNodeKinds.CHANNEL,
+              is_leaf: false,
+            };
+          })
+        );
       }
     );
   }
@@ -22,85 +39,101 @@ export function useResources() {
     });
   }
 
-  //   function _getTopicsWithExerciseDescendants(topicIds = []) {
-  //     return new Promise(resolve => {
-  //       if (!topicIds.length) {
-  //         resolve([]);
-  //         return;
-  //       }
-  //       const topicsNumAssessmentDescendantsPromise
-  //   = ContentNodeResource.fetchDescendantsAssessments(
-  //         topicIds
-  //       );
+  function _getTopicsWithExerciseDescendants(topicIds = []) {
+    return new Promise(resolve => {
+      if (!topicIds.length) {
+        resolve([]);
+        return;
+      }
+      const topicsNumAssessmentDescendantsPromise = ContentNodeResource.fetchDescendantsAssessments(
+        topicIds
+      );
+
+      topicsNumAssessmentDescendantsPromise.then(response => {
+        const topicsWithExerciseDescendants = [];
+        response.data.forEach(descendantAssessments => {
+          if (descendantAssessments.num_assessments > 0) {
+            topicsWithExerciseDescendants.push({
+              id: descendantAssessments.id,
+              numAssessments: descendantAssessments.num_assessments,
+              exercises: [],
+            });
+          }
+        });
 
-  //       topicsNumAssessmentDescendantsPromise.then(response => {
-  //         const topicsWithExerciseDescendants = [];
-  //         response.data.forEach(descendantAssessments => {
-  //           if (descendantAssessments.num_assessments > 0) {
-  //             topicsWithExerciseDescendants.push({
-  //               id: descendantAssessments.id,
-  //               numAssessments: descendantAssessments.num_assessments,
-  //               exercises: [],
-  //             });
-  //           }
-  //         });
+        ContentNodeResource.fetchDescendants(
+          topicsWithExerciseDescendants.map(topic => topic.id),
+          {
+            descendant_kind: ContentNodeKinds.EXERCISE,
+          }
+        ).then(response => {
+          response.data.forEach(exercise => {
+            const topic = topicsWithExerciseDescendants.find(t => t.id === exercise.ancestor_id);
+            topic.exercises.push(exercise);
+          });
+          resolve(topicsWithExerciseDescendants);
+        });
+      });
+    });
+  }
 
-  //         ContentNodeResource.fetchDescendants(
-  //           topicsWithExerciseDescendants.map(topic => topic.id),
-  //           {
-  //             descendant_kind: ContentNodeKinds.EXERCISE,
-  //           }
-  //         ).then(response => {
-  //           response.data.forEach(exercise => {
-  //             const topic = topicsWithExerciseDescendants.find(t =>
-  //   t.id === exercise.ancestor_id);
-  //             topic.exercises.push(exercise);
-  //           });
-  //           resolve(topicsWithExerciseDescendants);
-  //         });
-  //       });
-  //     });
-  //   }
+  function filterAndAnnotateContentList(childNodes) {
+    return new Promise(resolve => {
+      if (childNodes) {
+        const childTopics = childNodes.filter(({ kind }) => kind === ContentNodeKinds.TOPIC);
+        const topicIds = childTopics.map(({ id }) => id);
+        const topicsThatHaveExerciseDescendants = _getTopicsWithExerciseDescendants(topicIds);
+        topicsThatHaveExerciseDescendants.then(topics => {
+          const childNodesWithExerciseDescendants = childNodes
+            .map(childNode => {
+              const index = topics.findIndex(topic => topic.id === childNode.id);
+              if (index !== -1) {
+                return { ...childNode, ...topics[index] };
+              }
+              return childNode;
+            })
+            .filter(childNode => {
+              if (
+                childNode.kind === ContentNodeKinds.TOPIC &&
+                (childNode.numAssessments || 0) < 1
+              ) {
+                return false;
+              }
+              return true;
+            });
+          const contentList = childNodesWithExerciseDescendants.map(node => ({
+            ...node,
+            thumbnail: getContentNodeThumbnail(node),
+          }));
+          resolve(contentList);
+        });
+      }
+    });
+  }
 
-  function filterAndAnnotateContentList(/*childNodes*/) {
-    // return new Promise(resolve => {
-    // const childTopics = childNodes.filter(({ kind }) => kind === ContentNodeKinds.TOPIC);
-    // const topicIds = childTopics.map(({ id }) => id);
-    // const topicsThatHaveExerciseDescendants = _getTopicsWithExerciseDescendants(topicIds);
-    //   topicsThatHaveExerciseDescendants.then(topics => {
-    //     const childNodesWithExerciseDescendants = childNodes
-    //       .map(childNode => {
-    //         const index = topics.findIndex(topic => topic.id === childNode.id);
-    //         if (index !== -1) {
-    //           return { ...childNode, ...topics[index] };
-    //         }
-    //         return childNode;
-    //       })
-    //       .filter(childNode => {
-    //         if (childNode.kind === ContentNodeKinds.TOPIC &&
-    //    (childNode.numAssessments || 0) < 1) {
-    //           return false;
-    //         }
-    //         return true;
-    //       });
-    //     const contentList = childNodesWithExerciseDescendants.map(node => ({
-    //       ...node,
-    //       thumbnail: getContentNodeThumbnail(node),
-    //     }));
-    //     resolve(contentList);
-    //   });
-    // } );
+  function filterLessonResource(lessonId) {
+    store
+      .dispatch('lessonSummary/saveLessonResources', {
+        lessonId: lessonId,
+        resources: store.state.lessonSummary.workingResources,
+      })
+      .then(content => {
+        console.log(content);
+      });
   }
 
   onMounted(() => {
     fetchChannelResource();
     fetchBookMarkedResource();
     filterAndAnnotateContentList();
+    filterLessonResource();
   });
 
   return {
     resources,
     channels,
     bookmarks,
+    contentList,
+    filterLessonResource,
   };
 }
diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
index 54ae6b9cdd0..bca08102637 100644
--- a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -47,27 +47,25 @@ export default [
         path: ':section_id/replace-questions',
       },
       {
-      // this is basically show how the routing works once you in the select resources page and bookmarked resources page
-      // once you are in the bookmark resources page the only thing that we are interested in is the topic Id that  always  get updated 
         name: PageNames.QUIZ_SELECT_RESOURCES,
         path: ':section_id/select-resources',
 
-        children:[
+        children: [
           {
-            name:PageNames.SELECT_FROM_RESOURCE,
-            path:':topic_id',
-          }
-        ]
+            name: PageNames.SELECT_FROM_RESOURCE,
+            path: ':topic_id',
+          },
+        ],
       },
       {
         name: PageNames.BOOK_MARKED_RESOURCES,
         path: ':section_id/book-marked-resources',
-        children:[
+        children: [
           {
-            name:PageNames.SELECT_FROM_RESOURCE,
-            path:':topic_id',
-          }
-        ]
+            name: PageNames.SELECT_FROM_RESOURCE,
+            path: ':topic_id',
+          },
+        ],
       },
     ],
   },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
index 3ec1358e47c..569dc6c76ca 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/BookMarkedResource.vue
@@ -59,10 +59,10 @@
         type: Number,
         required: true,
       },
-      to:{
-        type:Object,
-        required:true,
-      }
+      to: {
+        type: Object,
+        required: true,
+      },
     },
     computed: {
       bookMarkBackgroundColor() {
@@ -71,9 +71,6 @@
         };
       },
     },
-    mounted(){
-      console.log(this.$route.params);
-    }
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index c6229d20cf6..dd9a4b6887e 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -1,41 +1,69 @@
 <template>
 
-  <div class="select-resource">
-    <h5
-      class="title-style"
-    >
-      <KIconButton
-        icon="back"
-      />
-      {{ selectFoldersOrExercises$() }}
-    </h5>
-    <p> {{ selectFromBookmarks$() }}</p>
-
-    <BookMarkedResource
-      v-if="bookmarks.length > 0"
-      kind="bookmark"
-      :isMobile="true"
-      :to="to"
-      :bookMarkedResoures="bookmarks.length"
+  <div v-if="!showChannels">
+    <ContentCardList
+      :contentList="bookmarksContentList"
+      :showSelectAll="selectAllIsVisible"
+      :selectAllChecked="addableContent.length === 0"
+      :contentCardLink="bookmarkLink"
+      :contentIsChecked="contentIsInLesson"
+      :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
+      :viewMoreButtonState="viewMoreButtonState"
+      :contentCardMessage="selectionMetadata"
+      @changeselectall="toggleTopicInWorkingResources"
+      @change_content_card="toggleSelected"
+      @moreresults="handleMoreResults"
     />
-
-    <LessonsSearchBox
-      ref="textbox"
-      placeholder="search by keyword"
+  </div>
+  <div v-else>
+    <div @click="lessonCardClicked">
+      <KRouterLink
+        v-if="bookmarksCount"
+        :appearanceOverrides="{
+          width: '100%',
+          textDecoration: 'none',
+          color: $themeTokens.text }"
+        :to="getBookmarksLink()"
+      >
+        <div :class="windowIsSmall ? 'mobile-bookmark-container' : 'bookmark-container'">
+          <BookmarkIcon :class="windowIsSmall ? 'mobile-bookmark-icon' : ''" />
+          <div :class="windowIsSmall ? 'mobile-text' : 'text'">
+            <h3>{{ coreString('bookmarksLabel') }}</h3>
+            <p>{{ $tr('resources', { count: bookmarksCount }) }}</p>
+          </div>
+        </div>
+      </KRouterLink>
+    </div>
+    <LessonsSearchBox @searchterm="handleSearchTerm" />
+    <LessonsSearchFilters
+      v-if="inSearchMode"
+      v-model="filters"
+      class="search-filters"
       :searchTerm="searchTerm"
-      :inputPlaceHolderStyle="inputPlaceHolderStyle"
-      style="margin-top:1em;margin-bottom:1em;"
-      @searchterm="search"
+      :searchResults="searchResults"
     />
 
+    {{ contentList }}
+
+    <ResourceSelectionBreadcrumbs
+      v-if="!inSearchMode"
+      :ancestors="ancestors"
+      :channelsLink="channelsLink"
+      :topicsLink="topicsLink"
+    />
+
+    <h2>{{ topicTitle }}</h2>
+    <p>{{ topicDescription }}</p>
+
     <ContentCardList
-      :contentList="channels"
+      v-if="!isExiting"
+      :contentList="filteredContentList"
       :showSelectAll="selectAllIsVisible"
       :viewMoreButtonState="viewMoreButtonState"
       :selectAllChecked="addableContent.length === 0"
       :contentIsChecked="contentIsInLesson"
       :contentHasCheckbox="c => !contentIsDirectoryKind(c)"
-      :contentCardMessage="() =>selectionMetadata"
+      :contentCardMessage="selectionMetadata"
       :contentCardLink="contentLink"
       @changeselectall="toggleTopicInWorkingResources"
       @change_content_card="toggleSelected"
@@ -48,116 +76,198 @@
 
 <script>
 
-  import { ContentNodeKinds, ContentNodeResource } from 'kolibri.coreVue.vuex.constants';
-  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
+  import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
+  import { BookmarksResource } from 'kolibri.resources';
+  import debounce from 'lodash/debounce';
   import every from 'lodash/every';
   import pickBy from 'lodash/pickBy';
-  import { PageNames } from '../../../constants';
-  import { LessonsPageNames } from '../../../constants/lessonsConstants';
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { useResources } from '../../../composables/useResources';
-  import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
-  import BookMarkedResource from './BookMarkedResource.vue';
-  import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
+  import commonCoach from '../../common';
+  import { PageNames } from '../../../constants';
+  import LessonsSearchBox from './../LessonResourceSelectionPage/SearchTools/LessonsSearchBox';
+  import LessonsSearchFilters from './../LessonResourceSelectionPage/SearchTools/LessonsSearchFilters';
+  import ResourceSelectionBreadcrumbs from './../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
+  import ContentCardList from './../LessonResourceSelectionPage/ContentCardList';
+  import BookmarkIcon from './../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon';
 
   export default {
+    // this is inaccurately named because it applies to exams also
     name: 'ResourceSelection',
+    metaInfo() {
+      return {
+        title: this.$tr('documentTitle', { lessonName: this.currentLesson.title }),
+      };
+    },
     components: {
-      LessonsSearchBox,
-      BookMarkedResource,
       ContentCardList,
+      LessonsSearchFilters,
+      LessonsSearchBox,
+      ResourceSelectionBreadcrumbs,
+      BookmarkIcon,
     },
-    inject: ['quizForge'],
+    mixins: [commonCoach, commonCoreStrings],
     setup() {
-      const {
-        sectionSettings$,
-        selectFoldersOrExercises$,
-        selectFromBookmarks$,
-      } = enhancedQuizManagementStrings;
-
-      const { channels, bookmarks } = useResources();
-
+      const { windowIsSmall } = useKResponsiveWindow();
+      const { channels, filterLessonResource } = useResources();
       return {
-        sectionSettings$,
-        selectFoldersOrExercises$,
-        selectFromBookmarks$,
+        windowIsSmall,
         channels,
-        bookmarks,
+        filterLessonResource,
       };
     },
     data() {
       return {
-        viewMoreButtonState: 'no_more_results',
-        searchTerm: '',
-        search: '',
+        // null corresponds to 'All' filter value
         filters: {
           channel: this.$route.query.channel || null,
           kind: this.$route.query.kind || null,
           role: this.$route.query.role || null,
         },
-        visibleResources: [],
+        isExiting: false,
+        moreResultsState: null,
+        resourcesChanged: false,
+        bookmarksCount: 0,
+        showChannels: true,
       };
     },
     computed: {
+      ...mapState(['pageName']),
+      ...mapState('classSummary', { classId: 'id' }),
+      ...mapState('lessonSummary', ['currentLesson', 'workingResources']),
+      ...mapState('lessonSummary/resources', [
+        'ancestorCounts',
+        'contentList',
+        'bookmarksList',
+        'searchResults',
+        'ancestors',
+      ]),
+      ...mapGetters('lessonSummary/resources', ['numRemainingSearchResults']),
+      ...mapGetters(['getUserPermissions']),
+      toolbarRoute() {
+        if (this.$route.query.last) {
+          return this.$router.getRoute(this.$route.query.last);
+        }
+        return this.$store.state.toolbarRoute;
+      },
+      bookmarksContentList() {
+        return this.bookmarksList ? this.bookmarksList : [];
+      },
+      filteredContentList() {
+        const { role } = this.filters;
+        if (!this.inSearchMode) {
+          return this.channels;
+        }
+        console.log(this.contentList);
+        const list = this.channels ? this.channels : this.bookmarksList;
+        return list.filter(contentNode => {
+          let passesFilters = true;
+          if (role === 'nonCoach') {
+            passesFilters = passesFilters && contentNode.num_coach_contents === 0;
+          }
+          if (role === 'coach') {
+            passesFilters = passesFilters && contentNode.num_coach_contents > 0;
+          }
+          return passesFilters;
+        });
+      },
+      lessonId() {
+        return this.currentLesson.id;
+      },
       inSearchMode() {
-        return this.pageName === LessonsPageNames.SELECTION_SEARCH;
+        // return this.pageName === LessonsPageNames.SELECTION_SEARCH;
+        return this.pageName === PageNames.SELECT_FROM_RESOURCE;
       },
-      inputPlaceHolderStyle() {
+      page() {
+        return this.getUserPermissions.can_manage_content
+          ? 'CoachImmersivePage'
+          : 'CoachAppBarPage';
+      },
+      searchTerm() {
+        return this.$route.params.searchTerm || '';
+      },
+      routerParams() {
         return {
-          color: this.$themeTokens.annotation,
+          classId: this.classId,
+          lessonId: this.lessonId ? this.lessonId : this.$route.params.lessonId,
         };
       },
+      debouncedSaveResources() {
+        return debounce(this.saveResources, 1000);
+      },
       selectAllIsVisible() {
         // Do not show 'Select All' if on Search Results, on Channels Page,
         // or if all contents are topics
         return (
           !this.inSearchMode &&
-          this.pageName !== LessonsPageNames.SELECTION_ROOT &&
-          !every(this.quizForge.channels.value, this.contentIsDirectoryKind)
+          this.pageName !== PageNames.SELECT_FROM_RESOURCE &&
+          !every(this.contentList, this.contentIsDirectoryKind)
         );
       },
+      viewMoreButtonState() {
+        if (this.moreResultsState === 'waiting' || this.moreResultsState === 'error') {
+          return this.moreResultsState;
+        }
+        if (!this.inSearchMode || this.numRemainingSearchResults === 0) {
+          return 'no_more_results';
+        }
+        return 'visible';
+      },
       contentIsInLesson() {
         return ({ id }) =>
           Boolean(this.workingResources.find(resource => resource.contentnode_id === id));
       },
-      selectionMetadata(/*content*/) {
-        return '';
-        // let count = 0;
-        // let total = 0;
-        // if (this.ancestorCounts[content.id]) {
-        //   count = this.ancestorCounts[content.id].count;
-        //   total = this.ancestorCounts[content.id].total;
-        // }
-        // if (count) {
-        //   return this.$tr('selectionInformation', {
-        //     count,
-        //     total,
-        //   });
-        // }
-        // return '';
-        // return function() {
-        //   console.log('Dynamic function called');
-        // };
-      },
       addableContent() {
         // Content in the topic that can be added if 'Select All' is clicked
-        const list = this.quizForge.channels.value
-          ? this.quizForge.channels.value
-          : this.bookmarksList;
+        const list = this.contentList ? this.contentList : this.bookmarksList;
         return list.filter(
           content => !this.contentIsDirectoryKind(content) && !this.contentIsInLesson(content)
         );
       },
-      to() {
-        return {
-          name: PageNames.BOOK_MARKED_RESOURCES,
-          params: {
-            classId: this.$route.params.classId,
-            section_id: this.$route.params.section_id,
-          },
-        };
+      channelsLink() {
+        return this.selectionRootLink();
+      },
+      topicTitle() {
+        if (!this.ancestors.length) {
+          return '';
+        }
+        return this.ancestors[this.ancestors.length - 1].title;
+      },
+      topicDescription() {
+        if (!this.ancestors.length) {
+          return '';
+        }
+        return this.ancestors[this.ancestors.length - 1].description;
+      },
+      exitButtonRoute() {
+        const lastId = this.$route.query.last_id;
+        if (this.inSearchMode && lastId) {
+          const queryCopy = { ...this.$route.query };
+          delete queryCopy.last_id;
+          return this.$router.getRoute(
+            PageNames.SELECT_FROM_RESOURCE,
+            { topicId: lastId },
+            queryCopy
+          );
+        } else if (this.inSearchMode) {
+          return this.selectionRootLink({ ...this.routerParams });
+        } else if (this.$route.query.last === 'ReportsLessonReportPage') {
+          // HACK to fix #7583 and #7584
+          return {
+            name: 'ReportsLessonReportPage',
+          };
+        } else if (this.$route.query.last === 'ReportsLessonLearnerListPage') {
+          // HACK to fix similar bug in Learner version of the report page
+          return {
+            name: 'ReportsLessonLearnerListPage',
+          };
+        } else {
+          return this.toolbarRoute;
+        }
       },
     },
-
     watch: {
       workingResources(newVal, oldVal) {
         this.showResourcesDifferenceMessage(newVal.length - oldVal.length);
@@ -173,65 +283,86 @@
         });
       },
     },
-    beforeRouteEnter(to, from, next) {
-      // console.log(to);
-      // console.log(from);
-      // console.log(to.params.topic_id);
-      if (to.params.topic_id) {
-        this.showChannelQuizCreationTopicPage(this.$store, to.params).then(() => {
-          next();
-        });
-      }
-    },
-    mounted() {
-      if (this.quizForge.channels.value.length > 0) {
-        this.visibleResources = this.quizForge.channels.value;
+    beforeRouteLeave(to, from, next) {
+      // Block the UI and show a notification in case last save takes too long
+      this.isExiting = true;
+
+      // If the working resources array hasn't changed at least once,
+      // just exit without autosaving
+      if (!this.resourcesChanged) {
+        next();
+        this.isExiting = false;
       } else {
-        this.visibleResources = [];
-      }
-      console.log(this.channels);
-    },
-    methods: {
-      /** @public */
-      focusFirstEl() {
-        this.$refs.textbox.focus();
-      },
+        this.resourcesChanged = true;
+        const isSamePage = samePageCheckGenerator(this.$store);
+        setTimeout(() => {
+          if (isSamePage()) {
+            this.createSnackbar(this.$tr('saveBeforeExitSnackbarText'));
+          }
+        }, 500);
 
-      contentLink(content) {
-        if (!content.is_leaf) {
-          return {
-            name: PageNames.SELECT_FROM_RESOURCE,
-            params: {
-              topic_id: content.id,
-              classId: this.$route.params.classId,
-              section_id: this.$route.params.section_id,
-            },
-          };
-        }
-      },
-      handleMoreResults() {
-        this.moreResultsState = 'waiting';
-        this.fetchAdditionalSearchResults({
-          searchTerm: this.searchTerm,
-          kind: this.filters.kind,
-          channelId: this.filters.channel,
-          currentResults: this.searchResults.results,
+        // Cancel any debounced calls
+        this.debouncedSaveResources.cancel();
+        this.saveLessonResources({
+          lessonId: this.lessonId,
+          resources: [...this.workingResources],
         })
           .then(() => {
-            this.moreResultsState = null;
-            this.moreResultsState;
+            this.clearSnackbar();
+            this.isExiting = false;
+            next();
           })
           .catch(() => {
-            this.moreResultsState = 'error';
+            this.showResourcesChangedError();
+            this.isExiting = false;
+            next(false);
           });
+      }
+    },
+    created() {
+      this.getBookmarks().then(count => {
+        this.bookmarksCount = count;
+      });
+    },
+    methods: {
+      ...mapActions(['createSnackbar', 'clearSnackbar']),
+      ...mapActions('lessonSummary', ['saveLessonResources', 'addToResourceCache']),
+      ...mapActions('lessonSummary/resources', ['fetchAdditionalSearchResults']),
+      ...mapMutations('lessonSummary', {
+        addToWorkingResources: 'ADD_TO_WORKING_RESOURCES',
+        removeFromSelectedResources: 'REMOVE_FROM_WORKING_RESOURCES',
+      }),
+      getBookmarks() {
+        return BookmarksResource.fetchCollection().then(bookmarks => {
+          return bookmarks.length;
+        });
       },
-      toggleSelected({ content, checked }) {
-        if (checked) {
-          this.addToSelectedResources(content);
+      getBookmarksLink() {
+        return {
+          name: PageNames.BOOK_MARKED_RESOURCES,
+          params: {
+            classId: this.$route.params.classId,
+            section_id: this.$route.params.section_id,
+          },
+        };
+      },
+      lessonCardClicked() {
+        this.showChannels = false;
+      },
+      showResourcesDifferenceMessage(difference) {
+        if (difference === 0) {
+          return;
+        }
+        this.resourcesChanged = true;
+        if (difference > 0) {
+          this.showSnackbarNotification('resourcesAddedWithCount', { count: difference });
         } else {
-          this.removeFromSelectedResources([content]);
+          this.showSnackbarNotification('resourcesRemovedWithCount', { count: -difference });
         }
       },
+      showResourcesChangedError() {
+        this.createSnackbar(this.coachString('saveLessonError'));
+      },
       toggleTopicInWorkingResources(isChecked) {
         if (isChecked) {
           this.addableContent.forEach(resource => {
@@ -241,55 +372,231 @@
           });
           this.addToWorkingResources(this.addableContent);
         } else {
-          this.removeFromSelectedResources(this.quizForge.channels.value);
+          this.removeFromSelectedResources(this.contentList);
         }
       },
+      addToSelectedResources(content) {
+        const list =
+          this.contentList && this.contentList.length ? this.contentList : this.bookmarksList;
+        this.addToResourceCache({
+          node: list.find(n => n.id === content.id),
+        });
+        this.addToWorkingResources([content]);
+      },
       contentIsDirectoryKind({ is_leaf }) {
         return !is_leaf;
       },
-      showChannelQuizCreationTopicPage(store, params) {
-        return store.dispatch('loading').then(() => {
-          const { topic_id } = params;
-          const topicNodePromise = ContentNodeResource.fetchModel({ id: topic_id });
-          const childNodesPromise = ContentNodeResource.fetchCollection({
-            getParams: {
-              parent: topic_id,
-              kind_in: [ContentNodeKinds.TOPIC, ContentNodeKinds.EXERCISE],
-              contains_quiz: true,
-            },
-          });
-          const loadRequirements = [topicNodePromise, childNodesPromise];
-
-          return Promise.all(loadRequirements).then(([, /*topicNoitde*/ childNodes]) => {
-            console.log(childNodes);
-            this.visibleResources = childNodes;
-            // return filterAndAnnotateContentList(childNodes).then(contentList => {
-            //   store.commit('SET_TOOLBAR_ROUTE', {
-            //     name: PageNames.EXAMS,
-            //   });
-
-            //   return showExamCreationPage(store, {
-            //     classId: params.classId,
-            //     contentList,
-            //     pageName: PageNames.EXAM_CREATION_SELECT_CHANNEL_QUIZ_TOPIC,
-            //     ancestors: [...topicNode.ancestors, topicNode],
-            //   });
-            // });
+      selectionRootLink() {
+        return this.$router.getRoute(PageNames.SELECTION_CONTENT_PREVIEW, {}, this.$route.query);
+      },
+      topicListingLink({ topicId }) {
+        return this.$router.getRoute(
+          PageNames.SELECT_FROM_RESOURCE,
+          { topicId },
+          this.$route.query
+        );
+      },
+      bookmarkListingLink({ topicId }) {
+        return this.$router.getRoute(
+          PageNames.SELECT_FROM_RESOURCE,
+          { topicId },
+          this.$route.query
+        );
+      },
+      bookmarkLink(content) {
+        if (this.contentIsDirectoryKind(content)) {
+          return this.bookmarkListingLink({ ...this.routerParams, topicId: content.id });
+        }
+        const { query } = this.$route;
+        return {
+          name: PageNames.SELECTION_CONTENT_PREVIEW,
+          params: {
+            ...this.routerParams,
+            contentId: content.id,
+          },
+          query: {
+            ...query,
+            ...pickBy({
+              searchTerm: this.$route.params.searchTerm,
+            }),
+          },
+        };
+      },
+      contentLink(content) {
+        if (this.contentIsDirectoryKind(content)) {
+          return this.topicListingLink({ ...this.routerParams, topicId: content.id });
+        }
+        const { query } = this.$route;
+        return {
+          name: PageNames.SELECTION_CONTENT_PREVIEW,
+          params: {
+            ...this.routerParams,
+            contentId: content.id,
+          },
+          query: {
+            ...query,
+            ...pickBy({
+              searchTerm: this.$route.params.searchTerm,
+            }),
+          },
+        };
+      },
+      saveResources() {
+        return this.saveLessonResources({
+          lessonId: this.lessonId,
+          resources: this.workingResources,
+        });
+      },
+      selectionMetadata(content) {
+        let count = 0;
+        let total = 0;
+        if (this.ancestorCounts[content.id]) {
+          count = this.ancestorCounts[content.id].count;
+          total = this.ancestorCounts[content.id].total;
+        }
+        if (count) {
+          return this.$tr('selectionInformation', {
+            count,
+            total,
           });
+        }
+        return '';
+      },
+      toggleSelected({ content, checked }) {
+        if (checked) {
+          this.addToSelectedResources(content);
+        } else {
+          this.removeFromSelectedResources([content]);
+        }
+      },
+      handleSearchTerm(searchTerm) {
+        const query = {
+          last_id: this.$route.query.last_id || this.$route.params.topicId,
+        };
+        const lastPage = this.$route.query.last;
+        if (lastPage) {
+          query.last = lastPage;
+        }
+        this.$router.push({
+          name: PageNames.SELECTION_SEARCH,
+          params: {
+            searchTerm,
+          },
+          query,
         });
       },
+      handleMoreResults() {
+        this.moreResultsState = 'waiting';
+        this.fetchAdditionalSearchResults({
+          searchTerm: this.searchTerm,
+          kind: this.filters.kind,
+          channelId: this.filters.channel,
+          currentResults: this.searchResults.results,
+        })
+          .then(() => {
+            this.moreResultsState = null;
+          })
+          .catch(() => {
+            this.moreResultsState = 'error';
+          });
+      },
+      topicsLink(topicId) {
+        return this.topicListingLink({ ...this.$route.params, topicId });
+      },
+    },
+    $trs: {
+      resources: {
+        message: '{count} {count, plural, one {resource} other {resources}}',
+        context: "Only translate 'resource' and 'resources'.",
+      },
+      selectionInformation: {
+        message:
+          '{count, number, integer} of {total, number, integer} {total, plural, one {resource selected} other {resources selected}}',
+
+        context:
+          "Indicates the amount of resources selected for a lesson in the 'Manage lesson resources' section.\n\nFor example: '7 of 10 resources selected'.",
+      },
+      totalResourcesSelected: {
+        message:
+          '{total, number, integer} {total, plural, one {resource} other {resources}} in this lesson',
+        context:
+          "Indicates the amount of resources for a lesson in the 'Manage lesson resources' section. For example:\n\n'8 resources in this lesson'",
+      },
+      documentTitle: {
+        message: `Manage resources in '{lessonName}'`,
+        context:
+          "Title of window that displays when the user clicks on the 'manage resources' button within an individual lesson.\n\nOn this page the user can add new learning resources to the lesson.",
+      },
+      saveBeforeExitSnackbarText: {
+        message: 'Saving your changes…',
+        context: 'Notification that changes are being saved.',
+      },
+      // only shown on search page
+      exitSearchButtonLabel: {
+        message: 'Exit search',
+        context: "Button to exit the search function of the 'Manage lesson resources' window.",
+      },
+      manageResourcesAction: {
+        message: 'Manage lesson resources',
+        context:
+          "In the 'Manage lesson resources' coaches can add new resource material to a lesson.",
+      },
     },
   };
 
 </script>
 
 
-<style scoped>
-.select-resource{
-  margin-top: -4em;
-}
-.title-style{
-  font-weight:600;
-  font-size: 1.4em;
-}
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .search-filters {
+    margin-top: 24px;
+  }
+
+  .bookmark-container {
+    display: flex;
+    min-height: 141px;
+    margin-bottom: 24px;
+    border-radius: 2px;
+    box-shadow: 0 1px 5px 0 #a1a1a1, 0 2px 2px 0 #e6e6e6, 0 3px 1px -2px #ffffff;
+    transition: box-shadow 0.25s ease;
+  }
+
+  .mobile-bookmark-container {
+    @extend %dropshadow-2dp;
+
+    display: flex;
+    max-width: 100%;
+    min-height: 141px;
+    margin: auto;
+    margin-bottom: 24px;
+    border-radius: 2px;
+
+    .ease:hover {
+      @extend %dropshadow-8dp;
+      @extend %md-decelerate-func;
+
+      transition: all $core-time;
+    }
+  }
+
+  .mobile-bookmark-icon {
+    left: 24px !important;
+  }
+
+  .mobile-text {
+    margin-top: 20px;
+    margin-left: 60px;
+  }
+
+  .bookmark-container:hover {
+    box-shadow: 0 5px 5px -3px #a1a1a1, 0 8px 10px 1px #d1d1d1, 0 3px 14px 2px #d4d4d4;
+  }
+
+  .text {
+    margin-left: 15rem;
+  }
+
 </style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
index 724128cf608..c4c27aebc80 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue
@@ -31,7 +31,6 @@
     [PageNames.QUIZ_REPLACE_QUESTIONS]: ReplaceQuestions,
     [PageNames.QUIZ_SELECT_RESOURCES]: ResourceSelection,
     [PageNames.BOOK_MARKED_RESOURCES]: ShowBookMarkedResources,
-    [PageNames.SELECT_FROM_RESOURCE]: SelectedChannel,
   };
 
   export default {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index 13ada04040f..89371422963 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -114,8 +114,7 @@
     },
     mounted() {
       this.$store.dispatch('notLoading');
-    },
-    mounted() {
+
       ChannelResource.fetchCollection({
         getParams: { available: true, has_exercise: true },
       }).then(channels => {