rebase

learningequality · Feb 7, 2025 · 1ca1517 · 1ca1517
1 parent d808a18
commit 1ca1517
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 140 deletions.
diff --git a/kolibri/plugins/coach/assets/src/composables/useFetchExercise.js b/kolibri/plugins/coach/assets/src/composables/useFetchExercise.js
@@ -0,0 +1,15 @@
+import { computed } from 'vue';
+import { exerciseToQuestionArray } from '../utils/selectQuestions';
+
+export default function useFetchExercise(exercise) {
+  const questions = computed(() => exerciseToQuestionArray(exercise));
+
+  const activeResourceMap = computed(() => {
+    return exercise;
+  });
+
+  return {
+    questions,
+    activeResourceMap,
+  };
+}
diff --git a/kolibri/plugins/coach/assets/src/views/common/QuestionsAccordion.vue b/kolibri/plugins/coach/assets/src/views/common/QuestionsAccordion.vue
@@ -5,6 +5,7 @@
       <div class="questions-accordion-header">
         <div>
           <KCheckbox
+            v-if="isCheckBoxVisible"
             ref="selectAllCheckbox"
             class="select-all-box"
             :label="selectAllLabel$()"
@@ -58,26 +59,28 @@
             }"
           >
             <template #leading-actions>
-              <DragHandle>
-                <div>
-                  <DragSortWidget
-                    :moveUpText="upLabel$"
-                    :moveDownText="downLabel$"
-                    :noDrag="true"
-                    :isFirst="index === 0"
-                    :isLast="index === questions.length - 1"
-                    @moveUp="() => handleKeyboardDragUp(index)"
-                    @moveDown="() => handleKeyboardDragDown(index)"
-                  />
-                </div>
-              </DragHandle>
-              <KCheckbox
-                class="accordion-item-checkbox"
-                :checked="selectedQuestions.includes(question.item)"
-                @change="
-                  (value, $event) => handleQuestionCheckboxChange(question.item, value, $event)
-                "
-              />
+              <div v-if="isCheckBoxVisible">
+                <DragHandle>
+                  <div>
+                    <DragSortWidget
+                      :moveUpText="upLabel$"
+                      :moveDownText="downLabel$"
+                      :noDrag="true"
+                      :isFirst="index === 0"
+                      :isLast="index === questions.length - 1"
+                      @moveUp="() => handleKeyboardDragUp(index)"
+                      @moveDown="() => handleKeyboardDragDown(index)"
+                    />
+                  </div>
+                </DragHandle>
+                <KCheckbox
+                  class="accordion-item-checkbox"
+                  :checked="selectedQuestions.includes(question.item)"
+                  @change="
+                    (value, $event) => handleQuestionCheckboxChange(question.item, value, $event)
+                  "
+                />
+              </div>
             </template>
             <template #content>
               <div
@@ -178,6 +181,11 @@
         type: Boolean,
         required: false,
       },
+      isCheckBoxVisible: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     methods: {
       handleDragStart() {

diff --git a/...e/sidePanels/LessonResourceSelection/subPages/PreviewSelectedResources/PreviewContent.vue b/...e/sidePanels/LessonResourceSelection/subPages/PreviewSelectedResources/PreviewContent.vue
@@ -1,50 +1,6 @@
 <template>
 
   <div>
-    <div class="channel-header">
-      <p>
-        {{ coreString('selectFromChannels') }}
-      </p>
-
-      <div>
-        <template v-if="isSelected">
-          <KIcon icon="onDevice" />
-          {{ addedIndicator$() }}
-        </template>
-
-        <KButton
-          v-if="isSelected"
-          :text="coreString('removeAction')"
-          :primary="true"
-          @click="removeResource()"
-        />
-        <KButton
-          v-else
-          :text="addText$()"
-          :primary="false"
-          @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"
@@ -100,37 +56,24 @@
   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 ContentArea from '../../../../../LessonSelectionContentPreviewPage/LessonContentPreview/ContentArea.vue';
   import commonCoach from '../../../../../../common';
-  import { PageNames } from '../../../../../../../constants/index';
-  import ResourceSelectionBreadcrumbs from '../../../../../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
 
   export default {
     name: 'PreviewContent',
     components: {
       ContentArea,
       SlotTruncator,
-      LearningActivityIcon,
-      ResourceSelectionBreadcrumbs,
     },
     mixins: [commonCoreStrings, commonCoach],
     setup() {
-      const {
-        addText$,
-        copyrightHolderDataHeader$,
-        licenseDataHeader$,
-        addedIndicator$,
-        notAvailableLabel$,
-        minutes$,
-      } = searchAndFilterStrings;
+      const { copyrightHolderDataHeader$, licenseDataHeader$, notAvailableLabel$, minutes$ } =
+        searchAndFilterStrings;
 
       return {
-        addText$,
         licenseDataHeader$,
         copyrightHolderDataHeader$,
-        addedIndicator$,
         notAvailableLabel$,
         minutes$,
       };
@@ -140,15 +83,6 @@
         type: Object,
         required: true,
       },
-      ancestors: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-      isSelected: {
-        type: Boolean,
-        required: true,
-      },
       questions: {
         type: Array,
         required: false,
@@ -161,11 +95,6 @@
       };
     },
     computed: {
-      channelsLink() {
-        return {
-          name: PageNames.LESSON_SELECT_RESOURCES_INDEX,
-        };
-      },
       isExercise() {
         return this.currentContentNode.kind === ContentNodeKinds.EXERCISE;
       },
@@ -186,39 +115,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: PageNames.LESSON_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) });
       },
@@ -239,14 +144,4 @@
     max-height: 500px;
   }
 
-  .channel-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .channel-header p {
-    font-weight: 600;
-  }
-
 </style>
diff --git a/...els/LessonResourceSelection/subPages/PreviewSelectedResources/PreviewSelectedExercise.vue b/...els/LessonResourceSelection/subPages/PreviewSelectedResources/PreviewSelectedExercise.vue
@@ -0,0 +1,40 @@
+<template>
+
+  <div>
+    <QuestionsAccordion
+      :questions="questions"
+      :selectedQuestions="[]"
+      :getQuestionContent="() => activeResourceMap"
+      :isCheckBoxVisible="false"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import QuestionsAccordion from '../../../../../../common/QuestionsAccordion.vue';
+  import useFetchExercise from '../../../../../../../composables/useFetchExercise';
+
+  export default {
+    name: 'PreviewSelectedExercise',
+    components: {
+      QuestionsAccordion,
+    },
+    setup(props) {
+      const { questions, activeResourceMap } = useFetchExercise(props.contentNode);
+      return {
+        questions,
+        activeResourceMap,
+      };
+    },
+    props: {
+      contentNode: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+
+</script>