Merge pull request #13032 from AllanOXDi/preview-selected-exercise

 Adds ability to preview  selected exercise

kolibri/plugins/coach/assets/src/composables/useFetchContentNode.js

@@ -1,5 +1,6 @@
-import { ref, getCurrentInstance } from 'vue';
+import { ref, getCurrentInstance, computed } from 'vue';
 import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
+import { exerciseToQuestionArray } from '../utils/selectQuestions';
 
 export default function useFetchContentNode(contentId) {
   const contentNode = ref({});
@@ -30,12 +31,15 @@ export default function useFetchContentNode(contentId) {
       });
   };
 
+  const exerciseQuestions = computed(() => exerciseToQuestionArray(contentNode.value));
+
   fetchContentNode();
 
   return {
     loading,
     ancestors,
     contentNode,
     questions,
+    exerciseQuestions,
   };
 }

kolibri/plugins/coach/assets/src/views/common/QuestionsAccordion.vue

@@ -5,6 +5,7 @@
       <div class="questions-accordion-header">
         <div>
           <KCheckbox
+            v-if="isSelectable"
             ref="selectAllCheckbox"
             class="select-all-box"
             :label="selectAllLabel$()"
@@ -58,7 +59,7 @@
             }"
           >
             <template #leading-actions>
-              <DragHandle>
+              <DragHandle v-if="isSelectable">
                 <div>
                   <DragSortWidget
                     :moveUpText="upLabel$"
@@ -72,6 +73,7 @@
                 </div>
               </DragHandle>
               <KCheckbox
+                v-if="isSelectable"
                 class="accordion-item-checkbox"
                 :checked="selectedQuestions.includes(question.item)"
                 @change="
@@ -172,7 +174,8 @@
       },
       selectedQuestions: {
         type: Array,
-        required: true,
+        required: false,
+        default: () => [],
       },
       selectAllIsChecked: {
         type: Boolean,
@@ -182,6 +185,11 @@
         type: Boolean,
         required: false,
       },
+      isSelectable: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     methods: {
       handleDragStart() {

kolibri/plugins/coach/assets/src/views/common/resourceSelection/subPages/PreviewSelectedResources/PreviewContent.vue

@@ -1,55 +1,6 @@
 <template>
 
   <div>
-    <div class="channel-header">
-      <p>
-        {{ coreString('selectFromChannels') }}
-      </p>
-
-      <div class="d-flex-center">
-        <span
-          v-if="isSelected"
-          class="mr-16"
-        >
-          <KIcon icon="onDevice" />
-          {{ addedIndicator$() }}
-        </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>
-    </div>
-
-    <ResourceSelectionBreadcrumbs
-      v-if="ancestors.length"
-      :ancestors="[...ancestors, currentContentNode]"
-      :channelsLink="channelsLink"
-      :topicsLink="topicsLink"
-    />
-
-    <h2>
-      <KLabeledIcon :label="currentContentNode.kind">
-        <template #icon>
-          <LearningActivityIcon :kind="learningActivities" />
-        </template>
-        <template>
-          {{ currentContentNode.title }}
-        </template>
-      </KLabeledIcon>
-    </h2>
-
     <ContentArea
       :header="questionLabel(selectedQuestionIndex)"
       :selectedQuestion="selectedQuestion"
@@ -104,13 +55,8 @@
   import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
   import { licenseLongName } from 'kolibri/uiText/licenses';
   import markdownIt from 'markdown-it';
-  import { ContentNodeKinds } from 'kolibri/constants';
-  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import SlotTruncator from 'kolibri-common/components/SlotTruncator';
-  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';
 
@@ -121,25 +67,15 @@
       HeaderTable,
       HeaderTableRow,
       SlotTruncator,
-      LearningActivityIcon,
-      ResourceSelectionBreadcrumbs,
     },
     mixins: [commonCoreStrings],
     setup() {
-      const {
-        addText$,
-        copyrightHolderDataHeader$,
-        licenseDataHeader$,
-        addedIndicator$,
-        notAvailableLabel$,
-        minutes$,
-      } = searchAndFilterStrings;
+      const { copyrightHolderDataHeader$, licenseDataHeader$, notAvailableLabel$, minutes$ } =
+        searchAndFilterStrings;
 
       return {
-        addText$,
         licenseDataHeader$,
         copyrightHolderDataHeader$,
-        addedIndicator$,
         notAvailableLabel$,
         minutes$,
       };
@@ -149,31 +85,13 @@
         type: Object,
         required: true,
       },
-      ancestors: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-      isSelected: {
-        type: Boolean,
-        required: true,
-      },
       questions: {
         type: Array,
         required: false,
         default: () => [],
       },
-      isActionDisabled: {
+      isExercise: {
         type: Boolean,
-        required: false,
-        default: false,
-      },
-      /**
-       * The target entity for the selection.
-       * It can be either 'quiz' or 'lesson'.
-       */
-      target: {
-        type: String,
         required: true,
       },
     },
@@ -183,17 +101,6 @@
       };
     },
     computed: {
-      channelsLink() {
-        return {
-          name:
-            this.target === SelectionTarget.LESSON
-              ? PageNames.LESSON_SELECT_RESOURCES_INDEX
-              : PageNames.QUIZ_SELECT_RESOURCES_INDEX,
-        };
-      },
-      isExercise() {
-        return this.currentContentNode.kind === ContentNodeKinds.EXERCISE;
-      },
       selectedQuestion() {
         if (this.isExercise) {
           return this.questions[this.selectedQuestionIndex];
@@ -211,42 +118,15 @@
 
         return undefined;
       },
-      learningActivities() {
-        if (this.currentContentNode.learning_activities) {
-          return this.currentContentNode.learning_activities;
-        }
-        return [];
-      },
     },
     methods: {
-      topicsLink(topicId) {
-        const { params, query } = this.$route;
-
-        return {
-          name:
-            this.target === SelectionTarget.LESSON
-              ? PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE
-              : PageNames.QUIZ_SELECT_RESOURCES_TOPIC_TREE,
-          params: params,
-          query: {
-            ...query,
-            topicId,
-          },
-        };
-      },
       questionLabel(questionIndex) {
         if (!this.isExercise) {
           return '';
         }
         const questionNumber = questionIndex + 1;
         return this.coreString('questionNumberLabel', { questionNumber });
       },
-      addResource() {
-        this.$emit('addResource', this.currentContentNode);
-      },
-      removeResource() {
-        this.$emit('removeResource', this.currentContentNode);
-      },
       getTime(seconds) {
         return this.minutes$({ value: Math.floor(seconds / 60) });
       },
@@ -258,15 +138,6 @@
 
 <style lang="scss" scoped>
 
-  .mr-16 {
-    margin-right: 16px;
-  }
-
-  .d-flex-center {
-    display: flex;
-    align-items: center;
-  }
-
   .license-detail-style {
     margin-top: 10px;
   }
@@ -276,14 +147,4 @@
     max-height: 500px;
   }
 
-  .channel-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .channel-header p {
-    font-weight: 600;
-  }
-
 </style>

kolibri/plugins/coach/assets/src/views/common/resourceSelection/subPages/PreviewSelectedResources/PreviewExercise.vue

@@ -0,0 +1,36 @@
+<template>
+
+  <div>
+    <QuestionsAccordion
+      :questions="questions"
+      :getQuestionContent="() => contentNode"
+      :isSelectable="false"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import QuestionsAccordion from '../../../QuestionsAccordion.vue';
+
+  export default {
+    name: 'PreviewExercise',
+    components: {
+      QuestionsAccordion,
+    },
+
+    props: {
+      contentNode: {
+        type: Object,
+        required: true,
+      },
+      questions: {
+        type: Array,
+        required: true,
+      },
+    },
+  };
+
+</script>