can open search results page on the quiz side panel

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

@@ -16,7 +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 { SelectFromSearchResults } from '../views/common/SelectFromSearchResults.vue';
+import SelectFromSearchResults from '../views/common/SelectFromSearchResults.vue';
 import PreviewSelectedResources from '../views/common/resourceSelection/subPages/PreviewSelectedResources/index.vue';
 import {
   generateQuestionDetailHandler,

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

@@ -51,7 +51,7 @@
   import { PageNames } from '../../constants';
   import { coachStrings } from './commonCoachStrings';
   import UpdatedResourceSelection from './resourceSelection/UpdatedResourceSelection.vue';
-
+  import { SelectionTarget } from './resourceSelection/contants';
   /**
    * @typedef {import('../../../../../../composables/useFetch').FetchObject} FetchObject
    */
@@ -68,7 +68,10 @@
         const { topicId } = instance.proxy.$route.query;
         if (topicId) {
           instance.proxy.$router.push({
-            name: PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE,
+            name:
+              this.target === SelectionTarget.LESSON
+                ? PageNames.LESSON_SELECT_RESOURCES_TOPIC_TREE
+                : PageNames.QUIZ_SELECT_RESOURCES,
             query: {
               topicId,
             },
@@ -146,6 +149,10 @@
         type: Function,
         required: true,
       },
+      target: {
+        type: String,
+        required: true,
+      },
     },
     computed: {
       resultsCountMessage() {
@@ -169,10 +176,17 @@
     },
     methods: {
       onSearchClick() {
-        this.$router.push({
-          name: PageNames.LESSON_SELECT_RESOURCES_SEARCH,
-          query: this.$route.query,
-        });
+        if (this.target === SelectionTarget.LESSON) {
+          this.$router.push({
+            name: PageNames.LESSON_SELECT_RESOURCES_SEARCH,
+            query: this.$route.query,
+          });
+        } else {
+          this.$router.push({
+            name: PageNames.QUIZ_SEARCH_PANEL,
+            query: this.$route.query.topicId,
+          });
+        }
       },
       onClearSearch() {
         this.$emit('clearSearch');

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/sidePanels/QuizResourceSelection/index.vue

@@ -45,7 +45,7 @@
         :selectedResources="workingResourcePool"
         :topic="topic"
         :treeFetch="treeFetch"
-        :searchTerms="searchTerms"
+        :searchTerms.sync="searchTerms"
         :searchFetch="searchFetch"
         :channelsFetch="channelsFetch"
         :bookmarksFetch="bookmarksFetch"
@@ -55,6 +55,7 @@
         :target="SelectionTarget.QUIZ"
         :contentCardMessage="contentCardMessage"
         :getResourceLink="getResourceLink"
+        :displayingSearchResults="displayingSearchResults"
         @selectResources="addToWorkingResourcePool"
         @deselectResources="removeFromWorkingResourcePool"
         @setSelectedResources="setWorkingResourcePool"
@@ -251,39 +252,47 @@
       const isPracticeQuiz = item =>
         !selectPracticeQuiz || get(item, ['options', 'modality'], false) === 'QUIZ';
 
-      const { topic, loading, treeFetch, channelsFetch, bookmarksFetch, searchTerms, searchFetch } =
-        useResourceSelection({
-          searchResultsRouteName: PageNames.QUIZ_SEARCH_RESULTS,
-          bookmarks: {
-            filters: { kind: ContentNodeKinds.EXERCISE },
-            annotator: results => results.filter(isPracticeQuiz),
-          },
-          channels: {
-            filters: {
-              contains_exercise: true,
-              contains_quiz: selectPracticeQuiz ? true : null,
-            },
-            annotator: results =>
-              annotateTopicsWithDescendantCounts(
-                results.map(channel => {
-                  return {
-                    ...channel,
-                    id: channel.root,
-                    title: channel.name,
-                    kind: ContentNodeKinds.CHANNEL,
-                    is_leaf: false,
-                  };
-                }),
-              ),
+      const {
+        topic,
+        loading,
+        treeFetch,
+        channelsFetch,
+        bookmarksFetch,
+        searchTerms,
+        searchFetch,
+        displayingSearchResults,
+      } = useResourceSelection({
+        searchResultsRouteName: PageNames.QUIZ_SEARCH_RESULTS,
+        bookmarks: {
+          filters: { kind: ContentNodeKinds.EXERCISE },
+          annotator: results => results.filter(isPracticeQuiz),
+        },
+        channels: {
+          filters: {
+            contains_exercise: true,
+            contains_quiz: selectPracticeQuiz ? true : null,
           },
-          topicTree: {
-            filters: {
-              kind_in: [ContentNodeKinds.EXERCISE, ContentNodeKinds.TOPIC],
-              contains_quiz: selectPracticeQuiz ? true : null,
-            },
-            annotator: annotateTopicsWithDescendantCounts,
+          annotator: results =>
+            annotateTopicsWithDescendantCounts(
+              results.map(channel => {
+                return {
+                  ...channel,
+                  id: channel.root,
+                  title: channel.name,
+                  kind: ContentNodeKinds.CHANNEL,
+                  is_leaf: false,
+                };
+              }),
+            ),
+        },
+        topicTree: {
+          filters: {
+            kind_in: [ContentNodeKinds.EXERCISE, ContentNodeKinds.TOPIC],
+            contains_quiz: selectPracticeQuiz ? true : null,
           },
-        });
+          annotator: annotateTopicsWithDescendantCounts,
+        },
+      });
 
       function handleCancelClose() {
         showCloseConfirmation.value = false;
@@ -397,6 +406,7 @@
         selectQuiz$,
         addNumberOfQuestions$,
         numberOfSelectedResources$,
+        displayingSearchResults,
       };
     },
     beforeRouteLeave(_, __, next) {

kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/sidePanels/QuizResourceSelection/subPages/QuizSearchPanel.vue

@@ -1,26 +1,76 @@
 <template>
 
-  <SearchFilters
+  <SearchFiltersPanel
+    ref="searchFiltersPanel"
     v-model="searchTermsComputed"
-    :topic="topic"
-    :searchTerms="searchTerms"
-    :searchFetch="searchFetch"
-    :setTitle="setTitle"
-    :setGoBack="setGoBack"
-    :target="target"
+    accordion
+    showChannels
+    :showActivities="!isQuiz"
+    :title="topic && searchInFolder$({ folder: topic.title })"
+    @categorySearchOpen="handleCategorySearchOpen"
   />
 
 </template>
 
 
 <script>
 
-  import SearchFilters from '../../../../../common/SearchFilters.vue';
+  import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel/index.vue';
+  import { getCurrentInstance, onMounted, ref } from 'vue';
+  import { searchAndFilterStrings } from 'kolibri-common/strings/searchAndFilterStrings';
+  import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
+  import { PageNames } from '../../../../../../constants';
+  import { SelectionTarget } from '../../../../../common/resourceSelection/contants';
 
   export default {
     name: 'QuizSearchPanel',
     components: {
-      SearchFilters,
+      SearchFiltersPanel,
+    },
+    setup(props) {
+      const prevRoute = ref(null);
+
+      const instance = getCurrentInstance();
+      const goBack = () => {
+        const backRoute = prevRoute.value?.name
+          ? prevRoute.value
+          : {
+            name: PageNames.QUIZ_SELECT_RESOURCES_INDEX,
+          };
+        instance.proxy.$router.push(backRoute);
+      };
+      const { searchLabel$ } = coreStrings;
+      const { chooseACategory$ } = searchAndFilterStrings;
+      const title = searchLabel$();
+      onMounted(() => {
+        props.setTitle(title);
+        props.setGoBack(goBack);
+      });
+
+      function handleCategorySearchOpen(isOpen) {
+        if (isOpen) {
+          props.setTitle(chooseACategory$());
+          props.setGoBack(() => {
+            const searchFiltersPanelRef = instance.proxy.$refs.searchFiltersPanel;
+            searchFiltersPanelRef.closeCategorySearch();
+          });
+        } else {
+          props.setTitle(title);
+          props.setGoBack(goBack);
+        }
+      }
+
+      // Fetch first available labels of the selected topic
+      props.searchFetch.fetchData();
+
+      const { searchInFolder$ } = searchAndFilterStrings;
+
+      return {
+        // eslint-disable-next-line vue/no-unused-properties
+        prevRoute,
+        searchInFolder$,
+        handleCategorySearchOpen,
+      };
     },
     props: {
       searchTerms: {
@@ -59,6 +109,9 @@
           this.$emit('update:searchTerms', value);
         },
       },
+      isQuiz() {
+        return this.target === SelectionTarget.QUIZ;
+      },
     },
   };