Add ability to side-panel preview course materials

Author: marcellamaki

kolibri/plugins/coach/frontend/app.js

@@ -104,9 +104,11 @@ class CoachToolsModule extends KolibriApp {
         PageNames.COURSES_ASSIGN,
         PageNames.COURSES_ASSIGN_INDEX,
         PageNames.COURSES_ASSIGN_COURSE_DETAILS,
+        PageNames.COURSES_ASSIGN_COURSE_PREVIEW,
         PageNames.COURSES_ASSIGN_SELECT_RECIPIENTS,
         PageNames.COURSE_SUMMARY_ASSIGN,
         PageNames.COURSE_SUMMARY_ASSIGN_COURSE_DETAILS,
+        PageNames.COURSE_SUMMARY_ASSIGN_COURSE_PREVIEW,
         PageNames.COURSE_SUMMARY_ASSIGN_SELECT_RECIPIENTS,
         PageNames.UNIT_DETAIL,
         PageNames.UNIT_DETAIL_LESSONS,
@@ -180,9 +182,11 @@ class CoachToolsModule extends KolibriApp {
           PageNames.COURSES_ASSIGN,
           PageNames.COURSES_ASSIGN_INDEX,
           PageNames.COURSES_ASSIGN_COURSE_DETAILS,
+          PageNames.COURSES_ASSIGN_COURSE_PREVIEW,
           PageNames.COURSES_ASSIGN_SELECT_RECIPIENTS,
           PageNames.COURSE_SUMMARY_ASSIGN,
           PageNames.COURSE_SUMMARY_ASSIGN_COURSE_DETAILS,
+          PageNames.COURSE_SUMMARY_ASSIGN_COURSE_PREVIEW,
           PageNames.COURSE_SUMMARY_ASSIGN_SELECT_RECIPIENTS,
           HomeActivityPage.name,
         ].includes(to.name)

kolibri/plugins/coach/frontend/constants/index.js

@@ -83,12 +83,14 @@ export const PageNames = {
   COURSES_ASSIGN: 'COURSES_ASSIGN',
   COURSES_ASSIGN_INDEX: 'COURSES_ASSIGN_INDEX',
   COURSES_ASSIGN_COURSE_DETAILS: 'COURSES_ASSIGN_COURSE_DETAILS',
+  COURSES_ASSIGN_COURSE_PREVIEW: 'COURSES_ASSIGN_COURSE_PREVIEW',
   COURSES_ASSIGN_SELECT_RECIPIENTS: 'COURSES_ASSIGN_SELECT_RECIPIENTS',
   UNIT_DETAIL_LESSONS: 'UNIT_DETAIL_LESSONS',
   UNIT_DETAIL_OBJECTIVES: 'UNIT_DETAIL_OBJECTIVES',
   // Side panel routes accessible from the course summary page
   COURSE_SUMMARY_ASSIGN: 'COURSE_SUMMARY_ASSIGN',
   COURSE_SUMMARY_ASSIGN_COURSE_DETAILS: 'COURSE_SUMMARY_ASSIGN_COURSE_DETAILS',
+  COURSE_SUMMARY_ASSIGN_COURSE_PREVIEW: 'COURSE_SUMMARY_ASSIGN_COURSE_PREVIEW',
   COURSE_SUMMARY_ASSIGN_SELECT_RECIPIENTS: 'COURSE_SUMMARY_ASSIGN_SELECT_RECIPIENTS',
 
   /* Attendance */

kolibri/plugins/coach/frontend/routes/coursesRoutes.js

@@ -7,6 +7,7 @@ import AssignCourseSidePanel from '../views/courses/sidePanels/AssignCourse/inde
 import CourseDetailsSubpage from '../views/courses/sidePanels/AssignCourse/subpages/CourseDetails.vue';
 import SelectRecipientsSubpage from '../views/courses/sidePanels/AssignCourse/subpages/SelectRecipients.vue';
 import AssignCourseIndexSubpage from '../views/courses/sidePanels/AssignCourse/subpages/AssignCourseIndex.vue';
+import CoursePreviewSidePanel from '../views/courses/sidePanels/AssignCourse/subpages/CoursePreviewSidePanel.vue';
 import { classIdParamRequiredGuard, RouteSegments, COMPACT_UUID_PATTERN } from './utils';
 
 const { OPTIONAL_CLASS, ALL_COURSES, CLASS, COURSE_SESSION } = RouteSegments;
@@ -76,6 +77,11 @@ export default [
             path: ':courseId/course-details',
             component: CourseDetailsSubpage,
           },
+          {
+            name: PageNames.COURSE_SUMMARY_ASSIGN_COURSE_PREVIEW,
+            path: ':courseId/preview',
+            component: CoursePreviewSidePanel,
+          },
           {
             name: PageNames.COURSE_SUMMARY_ASSIGN_SELECT_RECIPIENTS,
             path: 'select-recipients',
@@ -144,6 +150,11 @@ export default [
             path: ':courseId/course-details',
             component: CourseDetailsSubpage,
           },
+          {
+            name: PageNames.COURSES_ASSIGN_COURSE_PREVIEW,
+            path: ':courseId/preview',
+            component: CoursePreviewSidePanel,
+          },
           {
             name: PageNames.COURSES_ASSIGN_SELECT_RECIPIENTS,
             path: 'select-recipients',

kolibri/plugins/coach/frontend/views/courses/sidePanels/AssignCourse/subpages/CourseDetails.vue

@@ -29,6 +29,16 @@
           {{ course.description }}
         </div>
       </section>
+      <KButton
+        :primary="false"
+        appearance="raised-button"
+        :text="previewAction$()"
+        :disabled="loading || !course"
+        class="preview-button"
+        data-testid="preview-button"
+        @click="openPreview"
+      />
+
       <KButton
         v-if="descOverflowing"
         class="view-more"
@@ -202,6 +212,7 @@
         selectRecipientsLabel$,
         preTestLabel$,
         postTestLabel$,
+        previewAction$,
       } = coursesStrings;
 
       const { expandAll$, collapseAll$ } = enhancedQuizManagementStrings;
@@ -266,6 +277,13 @@
         return message;
       });
 
+      function openPreview() {
+        const previewRouteName = route.params.courseSessionId
+          ? PageNames.COURSE_SUMMARY_ASSIGN_COURSE_PREVIEW
+          : PageNames.COURSES_ASSIGN_COURSE_PREVIEW;
+        router.push(overrideRoute(route, { name: previewRouteName }));
+      }
+
       // Description expansion
       const descExpanded = ref(false);
       const courseDescriptionRef = templateRef('courseDescriptionRef');
@@ -282,6 +300,8 @@
         selectRecipients,
         numTestQuestions,
         isPreviewMode,
+        openPreview,
+        previewAction$,
 
         courseSubtitle,
         backAction$,
@@ -373,4 +393,8 @@
     text-align: right;
   }
 
+  .preview-button {
+    margin-bottom: 16px;
+  }
+
 </style>