Integrate preview resource in quizzes

learningequality · Feb 7, 2025 · 8d30c6e · 8d30c6e
1 parent 10031d6
commit 8d30c6e
Show file tree

Hide file tree

Showing 13 changed files with 224 additions and 53 deletions.
diff --git a/kolibri/plugins/coach/assets/src/app.js b/kolibri/plugins/coach/assets/src/app.js
@@ -70,6 +70,7 @@ class CoachToolsModule extends KolibriApp {
         PageNames.QUIZ_SELECT_RESOURCES_TOPIC_TREE,
         PageNames.QUIZ_PREVIEW_SELECTED_RESOURCES,
         PageNames.QUIZ_SELECT_RESOURCES_SETTINGS,
+        PageNames.QUIZ_PREVIEW_RESOURCE,
         PageNames.QUIZ_SELECT_RESOURCES_LANDING_SETTINGS,
         PageNames.QUIZ_SECTION_ORDER,
         PageNames.QUIZ_BOOK_MARKED_RESOURCES,

diff --git a/kolibri/plugins/coach/assets/src/constants/index.js b/kolibri/plugins/coach/assets/src/constants/index.js
@@ -19,6 +19,7 @@ export const PageNames = {
   QUIZ_BOOK_MARKED_RESOURCES: 'QUIZ_BOOK_MARKED_RESOURCES',
   QUIZ_SECTION_SIDE_PANEL: 'QUIZ_SECTION_SIDE_PANEL',
   QUIZ_SELECT_RESOURCES: 'QUIZ_SELECT_RESOURCES',
+  QUIZ_PREVIEW_RESOURCE: 'QUIZ_PREVIEW_RESOURCE',
   QUIZ_PREVIEW_SELECTED_RESOURCES: 'QUIZ_PREVIEW_SELECTED_RESOURCES',
   QUIZ_SELECT_RESOURCES_INDEX: 'QUIZ_SELECT_RESOURCES_INDEX',
   QUIZ_SELECT_RESOURCES_SEARCH: 'QUIZ_SELECT_RESOURCES_SEARCH',

diff --git a/kolibri/plugins/coach/assets/src/routes/examRoutes.js b/kolibri/plugins/coach/assets/src/routes/examRoutes.js
@@ -16,6 +16,7 @@ import SelectionIndex from '../views/common/resourceSelection/subPages/Selection
 import SelectFromChannels from '../views/common/resourceSelection/subPages/SelectFromTopicTree.vue';
 import SelectFromBookmarks from '../views/common/resourceSelection/subPages/SelectFromBookmarks.vue';
 import ManageSelectedResources from '../views/common/resourceSelection/subPages/ManageSelectedResources.vue';
+import PreviewSelectedResources from '../views/common/resourceSelection/subPages/PreviewSelectedResources/index.vue';
 import {
   generateQuestionDetailHandler,
   questionRootRedirectHandler,
@@ -118,6 +119,17 @@ export default [
             path: 'settings',
             component: QuestionsSettings,
           },
+          {
+            name: PageNames.QUIZ_PREVIEW_RESOURCE,
+            path: 'preview',
+            component: PreviewSelectedResources,
+            props: toRoute => {
+              const contentId = toRoute.query.contentId;
+              return {
+                contentId,
+              };
+            },
+          },
         ],
       },
       {

diff --git a/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js b/kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
@@ -185,11 +185,6 @@ export default [
           },
         ],
       },
-      {
-        name: PageNames.LESSON_PREVIEW_RESOURCE,
-        path: 'preview-resources/:nodeId',
-        component: PreviewSelectedResources,
-      },
     ],
   },
   {

diff --git a/kolibri/plugins/coach/assets/src/views/common/resourceSelection/UpdatedResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/common/resourceSelection/UpdatedResourceSelection.vue
@@ -38,9 +38,9 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { ContentNodeKinds } from 'kolibri/constants';
   import { validateObject } from 'kolibri/utils/objectSpecs';
+  import { ViewMoreButtonStates } from '../../../constants';
   import ContentCardList from '../../lessons/LessonResourceSelectionPage/ContentCardList.vue';
   import ResourceSelectionBreadcrumbs from '../../lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
-  import { ViewMoreButtonStates, PageNames } from '../../../constants';
 
   export default {
     name: 'UpdatedResourceSelection',
@@ -174,6 +174,13 @@
         required: false,
         default: () => {},
       },
+      /**
+       * Function that receives a resourceId and returns a link to the resource.
+       */
+      getResourceLink: {
+        type: Function,
+        required: true,
+      },
       hideBreadcrumbs: {
         type: Boolean,
         default: false,
@@ -222,18 +229,10 @@
     },
     methods: {
       contentLink(content) {
-        const { params, query } = this.$route;
         if (!content.is_leaf) {
           return this.topicsLink(content.id);
         }
-        return {
-          name: PageNames.LESSON_PREVIEW_RESOURCE,
-          params: params,
-          query: {
-            ...query,
-            contentId: content.id,
-          },
-        };
+        return this.getResourceLink(content.id);
       },
       topicsLink(topicId) {
         const route = this.getTopicLink?.(topicId);

diff --git a/...gins/coach/assets/src/views/common/resourceSelection/subPages/ManageSelectedResources.vue b/...gins/coach/assets/src/views/common/resourceSelection/subPages/ManageSelectedResources.vue
@@ -46,7 +46,7 @@
                   <span>
                     <KRouterLink
                       :text="resource.title"
-                      :to="{}"
+                      :to="getResourceLink(resource.id)"
                       style="font-size: 14px"
                     />
                   </span>
@@ -99,7 +99,7 @@
   import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import bytesForHumans from 'kolibri/uiText/bytesForHumans';
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
-  import { getCurrentInstance, onMounted, ref, watch } from 'vue';
+  import { getCurrentInstance, ref, watch } from 'vue';
   import { coachStrings } from '../../commonCoachStrings.js';
   import { PageNames } from '../../../../constants/index.js';
   import { SelectionTarget } from '../contants.js';
@@ -127,21 +127,21 @@
       const { lessonLabel$, sizeLabel$ } = coachStrings;
 
       const instance = getCurrentInstance();
+      const router = instance.proxy.$router;
 
-      onMounted(() => {
-        const backRoute = prevRoute.value?.name
-          ? prevRoute.value
-          : {
-            name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
-          };
-        if (props.selectedResources.length === 0) {
-          instance.proxy.$router.replace(backRoute);
+      const redirectBack = () => {
+        if (prevRoute.value?.name) {
+          return router.push(prevRoute.value);
         }
-        props.setTitle(numberOfSelectedResources$({ count: props.selectedResources.length }));
-        props.setGoBack(() => {
-          instance.proxy.$router.push(backRoute);
+        router.push({
+          name:
+            props.target === SelectionTarget.LESSON
+              ? PageNames.LESSON_SELECT_RESOURCES_INDEX
+              : PageNames.QUIZ_SELECT_RESOURCES_INDEX,
         });
-      });
+      };
+      props.setTitle(numberOfSelectedResources$({ count: props.selectedResources.length }));
+      props.setGoBack(redirectBack);
 
       watch(
         () => props.selectedResources,
@@ -198,6 +198,13 @@
         required: false,
         default: null,
       },
+      /**
+       * Function that receives a resourceId and returns a link to the resource.
+       */
+      getResourceLink: {
+        type: Function,
+        required: true,
+      },
     },
 
     computed: {

diff --git a/...s/src/views/common/resourceSelection/subPages/PreviewSelectedResources/PreviewContent.vue b/...s/src/views/common/resourceSelection/subPages/PreviewSelectedResources/PreviewContent.vue
@@ -6,22 +6,27 @@
         {{ coreString('selectFromChannels') }}
       </p>
 
-      <div>
-        <template v-if="isSelected">
+      <div class="d-flex-center">
+        <span
+          v-if="isSelected"
+          class="mr-16"
+        >
           <KIcon icon="onDevice" />
           {{ addedIndicator$() }}
-        </template>
+        </span>
 
         <KButton
           v-if="isSelected"
           :text="coreString('removeAction')"
           :primary="true"
+          :disabled="isActionDisabled"
           @click="removeResource()"
         />
         <KButton
           v-else
           :text="addText$()"
           :primary="false"
+          :disabled="isActionDisabled"
           @click="addResource()"
         />
       </div>
@@ -102,15 +107,19 @@
   import { ContentNodeKinds } from 'kolibri/constants';
   import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import SlotTruncator from 'kolibri-common/components/SlotTruncator';
-  // import commonCoach from '../../../../../../common';
+  import { SelectionTarget } from '../../contants.js';
   import { PageNames } from '../../../../../constants/index.js';
   import ContentArea from '../../../../lessons/LessonSelectionContentPreviewPage/LessonContentPreview/ContentArea.vue';
   import ResourceSelectionBreadcrumbs from '../../../../lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
+  import HeaderTable from '../../../HeaderTable/index.vue';
+  import HeaderTableRow from '../../../HeaderTable/HeaderTableRow.vue';
 
   export default {
     name: 'PreviewContent',
     components: {
       ContentArea,
+      HeaderTable,
+      HeaderTableRow,
       SlotTruncator,
       LearningActivityIcon,
       ResourceSelectionBreadcrumbs,
@@ -154,6 +163,19 @@
         required: false,
         default: () => [],
       },
+      isActionDisabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      /**
+       * The target entity for the selection.
+       * It can be either 'quiz' or 'lesson'.
+       */
+      target: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       return {
@@ -163,7 +185,10 @@
     computed: {
       channelsLink() {
         return {
-          name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
+          name:
+            this.target === SelectionTarget.LESSON
+              ? PageNames.LESSON_SELECT_RESOURCES_INDEX
+              : PageNames.QUIZ_SELECT_RESOURCES_INDEX,
         };
       },
       isExercise() {
@@ -198,7 +223,10 @@
         const { params, query } = this.$route;
 
         return {
-          name: PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE,
+          name:
+            this.target === SelectionTarget.LESSON
+              ? PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE
+              : PageNames.QUIZ_SELECT_RESOURCES_TOPIC_TREE,
           params: params,
           query: {
             ...query,
@@ -230,6 +258,15 @@
 
 <style lang="scss" scoped>
 
+  .mr-16 {
+    margin-right: 16px;
+  }
+
+  .d-flex-center {
+    display: flex;
+    align-items: center;
+  }
+
   .license-detail-style {
     margin-top: 10px;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -185,11 +185,6 @@ export default [ @@
               },
             ],
           },
-          {
-            name: PageNames.LESSON_PREVIEW_RESOURCE,
-            path: 'preview-resources/:nodeId',
-            component: PreviewSelectedResources,
-          },
         ],
       },
       {
@@ Expand Down @@