Information Architecture Refactor: Update the Plan > Lesson Summary

kolibri/core/assets/src/views/CoreTable.vue

@@ -64,7 +64,18 @@
         // if in regular <tbody>
         const tgroupChildren = get(tbody, 'componentOptions.children');
         if (tgroupChildren) {
-          tableHasRows = tgroupChildren.length > 0;
+          if (tgroupChildren.length === 0) {
+            tableHasRows = false;
+          } else if (
+            tgroupChildren.length === 1 &&
+            tgroupChildren[0]?.tag?.includes('transition-group')
+          ) {
+            const [child] = tgroupChildren;
+            const children = child.children || child.componentOptions?.children;
+            tableHasRows = !!children?.length > 0;
+          } else {
+            tableHasRows = true;
+          }
         }
 
         if (tbody.children) {

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

@@ -104,6 +104,17 @@ export default [
       },
     ],
   },
+  {
+    name: LessonsPageNames.SUMMARY,
+    path: '/:classId/plan/lessonstemp/:lessonId/:tabId?',
+    component: LessonSummaryPage,
+    handler(toRoute) {
+      return showLessonSummaryPage(store, toRoute.params);
+    },
+    meta: {
+      titleParts: ['LESSON_NAME', 'CLASS_NAME'],
+    },
+  },
   {
     name: LessonsPageNames.SUMMARY,
     path: path(CLASS, LESSON),

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

@@ -16,7 +16,7 @@
           </template>
         </QuizLessonDetailsHeader>
       </KGridItem>
-      <KGridItem :layout12="{ span: 4 }">
+      <KGridItem :layout12="{ span: $isPrint ? 12 : 4 }">
         <h2 class="visuallyhidden">
           {{ coachString('generalInformationLabel') }}
         </h2>
@@ -26,43 +26,47 @@
           :groupNames="getRecipientNamesForLesson(currentLesson)"
         />
       </KGridItem>
-      <KGridItem :layout12="{ span: 8 }">
-        <KPageContainer>
-          <div class="lesson-summary">
-            <div>
-              <div class="resource-list">
-                <div class="resource-list-header">
-                  <div class="resource-list-header-title-block">
-                    <h2 class="resource-list-header-title">
-                      {{ coreString('resourcesLabel') }}
-                    </h2>
-                  </div>
-                  <div class="resource-list-header-add-resource-button">
-                    <KRouterLink
-                      :to="lessonSelectionRootPage"
-                      :text="coachString('manageResourcesAction')"
-                      :primary="true"
-                      appearance="raised-button"
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <ResourceListTable v-if="workingResources.length" />
-
-              <p
-                v-else
-                class="no-resources-message"
-              >
-                {{ coachString('noResourcesInLessonLabel') }}
-              </p>
-
-              <ManageLessonModals
-                :currentAction="currentAction"
-                @cancel="currentAction = ''"
+      <KGridItem :layout12="{ span: $isPrint ? 12 : 8 }">
+        <KPageContainer
+          v-if="!loading"
+          :topMargin="$isPrint ? 0 : 16"
+        >
+          <KRouterLink
+            :to="lessonSelectionRootPage"
+            :text="coachString('manageResourcesAction')"
+            :primary="true"
+            appearance="raised-button"
+          />
+          <ReportsControls @export="exportCSV" />
+          <HeaderTabs :enablePrint="true">
+            <KTabsList
+              ref="tabList"
+              :tabsId="REPORTS_LESSON_TABS_ID"
+              :ariaLabel="coachString('detailsLabel')"
+              :activeTabId="activeTabId"
+              :tabs="tabs"
+            />
+          </HeaderTabs>
+          <KTabsPanel
+            :tabsId="REPORTS_LESSON_TABS_ID"
+            :activeTabId="activeTabId"
+          >
+            <template #[ReportsLessonTabs.REPORTS]>
+              <ReportsLessonResourcesTable
+                ref="table"
+                :editable="!$isPrint"
+                :entries="resourcesTable"
+                @change="handleResourcesChange"
               />
-            </div>
-          </div>
+            </template>
+            <template #[ReportsLessonTabs.LEARNERS]>
+              <div>Hola mundo</div>
+            </template>
+          </KTabsPanel>
+          <ManageLessonModals
+            :currentAction="currentAction"
+            @cancel="currentAction = ''"
+          />
         </KPageContainer>
       </KGridItem>
     </KGrid>
@@ -73,14 +77,20 @@
 
 <script>
 
-  import { mapState } from 'vuex';
+  import { mapState, mapActions, mapMutations } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import CoachAppBarPage from '../../CoachAppBarPage';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import commonCoach from '../../common';
+  import CoachAppBarPage from '../../CoachAppBarPage';
+  import ReportsControls from '../../reports/ReportsControls';
   import { selectionRootLink } from '../../../routes/planLessonsRouterUtils';
-  import ManageLessonModals from './ManageLessonModals';
-  import ResourceListTable from './ResourceListTable';
+  import { LessonsPageNames } from '../../../constants/lessonsConstants';
+  import { REPORTS_LESSON_TABS_ID, ReportsLessonTabs } from '../../../constants/tabsConstants';
+  import ReportsLessonResourcesTable from '../../reports/ReportsLessonResourcesTable.vue';
   import LessonOptionsDropdownMenu from './LessonOptionsDropdownMenu';
+  import ManageLessonModals from './ManageLessonModals';
+
+  const REMOVAL_SNACKBAR_TIME = 5000;
 
   export default {
     name: 'LessonSummaryPage',
@@ -90,20 +100,33 @@
       };
     },
     components: {
+      ReportsControls,
       CoachAppBarPage,
-      ResourceListTable,
       ManageLessonModals,
       LessonOptionsDropdownMenu,
+      ReportsLessonResourcesTable,
     },
     mixins: [commonCoach, commonCoreStrings],
+    setup() {
+      const { createSnackbar, clearSnackbar } = useSnackbar();
+      return { createSnackbar, clearSnackbar };
+    },
     data() {
+      const workingResourcesBackup = [...this.$store.state.lessonSummary.workingResources];
+
       return {
         currentAction: '',
+        ReportsLessonTabs,
+        workingResourcesBackup,
+        REPORTS_LESSON_TABS_ID,
       };
     },
     computed: {
       ...mapState('classSummary', { classId: 'id' }),
-      ...mapState('lessonSummary', ['currentLesson', 'workingResources']),
+      ...mapState('lessonSummary', ['currentLesson', 'workingResources', 'resourceCache']),
+      classId() {
+        return this.currentLesson.classroom.id;
+      },
       loading() {
         return this.$store.state.core.loading;
       },
@@ -113,15 +136,157 @@
       lessonSelectionRootPage() {
         return selectionRootLink({ lessonId: this.lessonId, classId: this.classId });
       },
+      activeTabId() {
+        const { tabId } = this.$route.params;
+        if (Object.values(ReportsLessonTabs).includes(tabId)) {
+          return tabId;
+        }
+        return ReportsLessonTabs.REPORTS;
+      },
+      tabs() {
+        const tabsList = [
+          {
+            id: ReportsLessonTabs.REPORTS,
+            label: this.coreString('resourcesLabel'),
+          },
+          {
+            id: ReportsLessonTabs.LEARNERS,
+            label: this.coachString('learnersLabel'),
+          },
+        ];
+
+        tabsList.forEach(tab => {
+          tab.to = this.classRoute(LessonsPageNames.SUMMARY, { tabId: tab.id });
+        });
+
+        return tabsList;
+      },
+      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;
+        });
+      },
+      numberOfRemovals() {
+        return this.workingResourcesBackup.length - this.workingResources.length;
+      },
     },
     methods: {
+      ...mapActions('lessonSummary', [
+        'saveLessonResources',
+        'updateCurrentLesson',
+        'fetchLessonsSizes',
+      ]),
+      ...mapMutations('lessonSummary', {
+        setWorkingResources: 'SET_WORKING_RESOURCES',
+      }),
       handleSelectOption(action) {
         if (action === 'EDIT_DETAILS') {
           this.$router.push(this.$router.getRoute('LessonEditDetailsPage'));
         } else {
           this.currentAction = action;
         }
       },
+      exportCSV() {
+        if (typeof this.$refs.table.exportCSV === 'function') {
+          this.$refs.table.exportCSV();
+        }
+      },
+      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 },
+            );
+          }
+        }
+      },
+      showResourcesRemovedNotification() {
+        const undo = () => {
+          this.save(this.workingResourcesBackup);
+          this.clearSnackbar();
+        };
+        const hide = () => {
+          if (this.workingResourcesBackup) {
+            // snackbar might carryover to another page (like select)
+            this.workingResourcesBackup = [...this.workingResources];
+          }
+        };
+        this.showSnackbarNotification(
+          'resourcesRemovedWithCount',
+          { count: this.numberOfRemovals },
+          {
+            autoDismiss: true,
+            duration: REMOVAL_SNACKBAR_TIME,
+            actionText: this.$tr('undoActionPrompt'),
+            actionCallback: undo,
+            hideCallback: hide,
+          },
+        );
+      },
+      async handleResourcesChange({ newArray }) {
+        const newResources = newArray.map(row => {
+          return this.workingResources.find(resource => resource.contentnode_id === row.node_id);
+        });
+        await this.save(newResources);
+        await this.$nextTick();
+        if (this.numberOfRemovals > 0) {
+          this.showResourcesRemovedNotification();
+        } else {
+          this.showSnackbarNotification('resourceOrderSaved');
+        }
+      },
+      async save(resources) {
+        this.setWorkingResources(resources);
+        try {
+          await this.saveLessonResources({
+            lessonId: this.lessonId,
+            resources,
+          });
+        } catch {
+          this.setWorkingResources(this.workingResourcesBackup);
+          this.createSnackbar(this.coachString('saveLessonError'));
+        }
+        await this.updateCurrentLesson(this.lessonId);
+        await this.fetchLessonsSizes({ classId: this.classId });
+      },
+    },
+    $trs: {
+      undoActionPrompt: {
+        message: 'Undo',
+        context: 'Allows user to undo an action.',
+      },
     },
   };
 

kolibri/plugins/coach/assets/src/views/reports/ReportsLessonBase.vue

@@ -44,7 +44,7 @@
               @click="() => saveTabsClick(REPORTS_LESSON_TABS_ID)"
             />
           </HeaderTabs>
-          <ReportsLessonResourcesList
+          <ReportsLessonResourcesTable
             v-if="showResources"
             :entries="contentTable"
           />
@@ -74,7 +74,7 @@
   import { useCoachTabs } from '../../composables/useCoachTabs';
   import ReportsControls from './ReportsControls';
   import ReportsLessonLearnersList from './ReportsLessonLearnersList';
-  import ReportsLessonResourcesList from './ReportsLessonResourcesList';
+  import ReportsLessonResourcesTable from './ReportsLessonResourcesTable.vue';
 
   export default {
     name: 'ReportsLessonBase',
@@ -83,7 +83,7 @@
       ReportsControls,
       LessonOptionsDropdownMenu,
       ReportsLessonLearnersList,
-      ReportsLessonResourcesList,
+      ReportsLessonResourcesTable,
     },
     mixins: [commonCoach, commonCoreStrings],
     setup() {