Quiz Creation Select Resources - Keyword search

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue

@@ -26,7 +26,7 @@
         </KGridItem>
       </KGrid>
 
-      <div v-if="!isTopicIdSet && bookmarks.length && !showBookmarks">
+      <div v-if="!searchQuery && !isTopicIdSet && bookmarks.length && !showBookmarks">
 
         <p>{{ selectFromBookmarks$() }}</p>
 
@@ -56,6 +56,12 @@
         :channelsLink="channelsLink"
         :topicsLink="topicsLink"
       />
+
+      <LessonsSearchBox
+        v-if="!showBookmarks"
+        @clear="clearSearchTerm"
+        @searchterm="handleSearchTermChange"
+      />
       <ContentCardList
         :contentList="contentList"
         :showSelectAll="true"
@@ -99,9 +105,9 @@
     </div>
   </div>
 
-</template>
-
-
+</template>
+
+
 <script>
 
   import uniqWith from 'lodash/uniqWith';
@@ -116,6 +122,7 @@
   import BookmarkIcon from '../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
   import useQuizResources from '../../../composables/useQuizResources';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
+  import LessonsSearchBox from '../LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
   import ContentCardList from './../LessonResourceSelectionPage/ContentCardList.vue';
   import ResourceSelectionBreadcrumbs from './../LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
 
@@ -124,6 +131,7 @@
     components: {
       ContentCardList,
       BookmarkIcon,
+      LessonsSearchBox,
       ResourceSelectionBreadcrumbs,
     },
     mixins: [commonCoreStrings],
@@ -135,6 +143,7 @@
       // or the actual exercises that are bookmarked and can be selected
       // to be added to Quiz Section.
       const showBookmarks = computed(() => route.value.query.showBookmarks);
+      const searchQuery = computed(() => route.value.query.search);
       const { updateSection, activeResourcePool, selectAllQuestions } = injectQuizCreation();
 
       const {
@@ -149,7 +158,7 @@
 
       // TODO let's not use text for this
       const viewMoreButtonState = computed(() => {
-        if (hasMore.value) {
+        if (hasMore.value || moreSearchResults.value) {
           return ViewMoreButtonStates.HAS_MORE;
         } else {
           return ViewMoreButtonStates.NO_MORE;
@@ -196,6 +205,27 @@
         return workingResourceIds.includes(content.id);
       }
 
+      function fetchSearchResults() {
+        const getParams = {
+          max_results: 25,
+          keywords: searchQuery.value,
+          kind: ContentNodeKinds.EXERCISE,
+        };
+        return ContentNodeResource.fetchCollection({ getParams }).then(response => {
+          searchResults.value = response.results;
+          moreSearchResults.value = response.more;
+        });
+      }
+
+      function fetchMoreSearchResults() {
+        return ContentNodeResource.fetchCollection({
+          getParams: moreSearchResults.value,
+        }).then(response => {
+          searchResults.value = searchResults.value.concat(response.results);
+          moreSearchResults.value = response.more;
+        });
+      }
+
       const {
         hasCheckbox,
         topic,
@@ -213,32 +243,42 @@
 
       const channels = ref([]);
       const bookmarks = ref([]);
+      const searchResults = ref([]);
+      const moreSearchResults = ref(null);
 
       // Load up the channels
+
       if (!topicId.value) {
         const channelBookmarkPromises = [
-          ChannelResource.fetchCollection({
-            params: { has_exercises: true, available: true },
-          }).then(response => {
-            setResources(
-              response.map(chnl => {
-                return {
-                  ...chnl,
-                  id: chnl.root,
-                  title: chnl.name,
-                  kind: ContentNodeKinds.CHANNEL,
-                  is_leaf: false,
-                };
-              })
-            );
-          }),
           ContentNodeResource.fetchBookmarks({ params: { limit: 25, available: true } }).then(
             data => {
               bookmarks.value = data.results ? data.results : [];
             }
           ),
         ];
 
+        if (searchQuery.value) {
+          channelBookmarkPromises.push(fetchSearchResults());
+        } else {
+          channelBookmarkPromises.push(
+            ChannelResource.fetchCollection({
+              params: { has_exercises: true, available: true },
+            }).then(response => {
+              setResources(
+                response.map(chnl => {
+                  return {
+                    ...chnl,
+                    id: chnl.root,
+                    title: chnl.name,
+                    kind: ContentNodeKinds.CHANNEL,
+                    is_leaf: false,
+                  };
+                })
+              );
+            })
+          );
+        }
+
         Promise.all(channelBookmarkPromises).then(() => {
           // When we don't have a topicId we're setting the value of useQuizResources.resources
           // to the value of the channels (treating those channels as the topics) -- we then
@@ -272,6 +312,10 @@
             .map(item => ({ ...item, is_leaf: true }));
         }
 
+        if (searchQuery.value) {
+          return searchResults.value;
+        }
+
         return resources.value;
       });
 
@@ -283,6 +327,12 @@
         }
       });
 
+      watch(searchQuery, () => {
+        if (searchQuery.value) {
+          fetchSearchResults();
+        }
+      });
+
       return {
         topic,
         topicId,
@@ -292,7 +342,8 @@
         loading,
         hasMore,
         loadingMore,
-        fetchMoreQuizResources,
+        searchQuery,
+        fetchMoreQuizResources: searchQuery ? fetchMoreSearchResults : fetchMoreQuizResources,
         resetWorkingResourcePool,
         contentPresentInWorkingResourcePool,
         //contentList,
@@ -447,12 +498,22 @@
         }
         return '';
       },
+      handleSearchTermChange(searchTerm) {
+        this.$router.push({
+          query: { search: searchTerm },
+        });
+      },
+      clearSearchTerm() {
+        this.$router.push({
+          query: { search: null },
+        });
+      },
     },
   };
 
-</script>
-
-
+</script>
+
+
 <style scoped lang="scss">
 
   @import '~kolibri-design-system/lib/styles/definitions';
@@ -536,4 +597,4 @@
     margin-top: 2em;
   }
 
-</style>
+</style>

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue

@@ -105,7 +105,10 @@
     },
     methods: {
       handleClosePanel() {
-        if (this.workingResourcePool.length > this.activeResourcePool.length) {
+        if (
+          this.workingResourcePool &&
+          this.workingResourcePool.length > this.activeResourcePool.length
+        ) {
           this.showConfirmationModal = true;
         } else {
           this.$router.replace(this.closePanelRoute);

kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue

@@ -65,13 +65,16 @@
     name: 'LessonsSearchBox',
     mixins: [commonCoreStrings],
     data() {
+      const { params, query } = this.$route;
       return {
-        searchTerm: this.$route.params.searchTerm || '',
+        searchTerm: params.searchTerm || query.search || '',
       };
     },
     computed: {
       searchTermHasChanged() {
-        return this.searchTerm !== this.$route.params.searchTerm;
+        const { params, query } = this.$route;
+        const newSearchTerm = params.searchTerm || query.search;
+        return this.searchTerm !== newSearchTerm;
       },
       inputPlaceHolderStyle() {
         return {
@@ -85,6 +88,7 @@
       clearSearchTerm() {
         this.searchTerm = '';
         this.$refs.searchinput.focus();
+        this.$emit('clear');
       },
       search() {
         if (this.searchTerm !== '' && this.searchTermHasChanged) {