Basic layout for displaying "resources currently in lesson"

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

@@ -39,6 +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/ManageSelectedLessonResource';
 import { classIdParamRequiredGuard, RouteSegments } from './utils';
 
 const {
@@ -138,7 +139,7 @@ export default [
       {
         name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
         path: 'preview-resources/',
-        component: PreviewSelectedResources,
+        component: ManageSelectedLessonResources,
       },
       {
         name: PageNames.LESSON_PREVIEW_RESOURCE,

kolibri/plugins/coach/assets/src/views/lessons/LessonCreationPage.vue

@@ -45,6 +45,33 @@
       classId() {
         return this.$route.params.classId;
       },
+      recipients() {
+        return this.getLearnersForLesson(this.currentLesson);
+      },
+      resourcesTable() {
+        return this.workingResources.map(resource => {
+          const content = this.resourceCache[resource.contentnode_id];
+          if (!content) {
+            return this.missingResourceObj(resource.contentnode_id);
+          }
+
+          const tally = this.getContentStatusTally(content.content_id, this.recipients);
+          const tableRow = {
+            ...content,
+            node_id: content.id,
+            avgTimeSpent: this.getContentAvgTimeSpent(content.content_id, this.recipients),
+            tally,
+            hasAssignments: Object.values(tally).reduce((a, b) => a + b, 0),
+          };
+
+          const link = this.resourceLink(tableRow);
+          if (link) {
+            tableRow.link = link;
+          }
+
+          return tableRow;
+        });
+      },
     },
     created() {
       const initClassInfoPromise = this.$store.dispatch('initClassInfo', this.classId);
@@ -77,6 +104,25 @@
             }
           });
       },
+      resourceLink(resource) {
+        if (resource.hasAssignments) {
+          if (resource.kind === this.ContentNodeKinds.EXERCISE) {
+            return this.classRoute(
+              this.group
+                ? 'ReportsGroupReportLessonExerciseLearnerListPage'
+                : 'ReportsLessonExerciseLearnerListPage',
+              { exerciseId: resource.content_id },
+            );
+          } else {
+            return this.classRoute(
+              this.group
+                ? 'ReportsGroupReportLessonResourceLearnerListPage'
+                : 'ReportsLessonResourceLearnerListPage',
+              { resourceId: resource.content_id },
+            );
+          }
+        }
+      },
     },
   };
 

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

@@ -96,6 +96,14 @@
     </KPageContainer>
 
     <BottomAppBar>
+      <KRouterLink
+        v-if="workingResources.length > 0"
+        :text="numberOfSelectedResource$({ count: workingResources.length })"
+        :primary="true"
+        :to="goToPreviewSelection()"
+        :style="{ marginRight: '1em', marginTop: '0.5em' }"
+      />
+
       <KRouterLink
         :text="bottomBarButtonText"
         :primary="true"
@@ -121,6 +129,7 @@
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useUser from 'kolibri/composables/useUser';
   import useSnackbar from 'kolibri/composables/useSnackbar';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import commonCoach from '../../common';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import CoachImmersivePage from '../../CoachImmersivePage';
@@ -154,11 +163,13 @@
       const { windowIsSmall } = useKResponsiveWindow();
       const { getUserPermissions } = useUser();
       const { createSnackbar, clearSnackbar } = useSnackbar();
+      const { numberOfSelectedResource$ } = searchAndFilterStrings;
       return {
         windowIsSmall,
         getUserPermissions,
         createSnackbar,
         clearSnackbar,
+        numberOfSelectedResource$,
       };
     },
     data() {
@@ -561,6 +572,11 @@
       topicsLink(topicId) {
         return this.topicListingLink({ ...this.$route.params, topicId });
       },
+      goToPreviewSelection() {
+        return {
+          name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES,
+        };
+      },
     },
     $trs: {
       resources: {

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

@@ -94,10 +94,13 @@
     </div>
 
     <template #bottomNavigation>
-      <div
-        v-if="showSearch"
-        class="bottom-nav-container"
-      >
+      <div class="bottom-nav-container">
+        <KRouterLink
+          :text="numberOfSelectedResource$({ count: workingResources.length })"
+          :primary="true"
+          :to="{ name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES }"
+          :style="{ marginRight: '1em', marginTop: '0.5em' }"
+        />
         <KButton
           primary
           :text="saveAndFinishAction$()"
@@ -118,24 +121,21 @@
   import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
   import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
   import AccessibleChannelCard from 'kolibri-common/components/Cards/AccessibleChannelCard.vue';
-  import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel/index.vue';
-  import useBaseSearch from 'kolibri-common/composables/useBaseSearch';
+  import { mapState } from 'vuex';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
+  import { PageNames } from '../../../../constants';
 
   export default {
     name: 'LessonResourceSelection',
     components: {
       SidePanelModal,
       AccessibleChannelCard,
-      SearchFiltersPanel,
     },
     setup() {
       const loading = ref(false);
       const bookmarks = ref([]);
       const channels = ref([]);
-      const showSearch = ref(true);
-      const topic = ref(null);
-
-      const { searchTerms } = useBaseSearch(topic);
+      const { numberOfSelectedResource$ } = searchAndFilterStrings;
 
       const loadBookmarks = async () => {
         const data = await ContentNodeResource.fetchBookmarks({
@@ -175,16 +175,23 @@
         loading,
         bookmarks,
         channels,
-        showSearch,
-        searchTerms,
         selectFromChannels$,
         numberOfBookmarks$,
         bookmarksLabel$,
         selectFromBookmarks$,
         searchLabel$,
         saveAndFinishAction$,
+        numberOfSelectedResource$,
+      };
+    },
+    data() {
+      return {
+        PageNames,
       };
     },
+    computed: {
+      ...mapState('lessonSummary', ['workingResources']),
+    },
     methods: {
       closeSidePanel() {
         this.$router.go(-1);