Merge pull request #12759 from nucleogenesis/0.18--12521--SearchFilte…

…rsPanel-updates

Update SearchFiltersPanel for Coach

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

@@ -4,7 +4,7 @@
     <div v-if="loading && !loadingMore">
       <KCircularLoader />
     </div>
-    <div v-else>
+    <div v-else-if="!showSearch">
       <h1
         v-if="selectPracticeQuiz"
         class="select-folder-style"
@@ -67,7 +67,7 @@
         </div>
       </div>
 
-      <div v-if="!isTopicIdSet && bookmarks.length && !showBookmarks">
+      <div v-if="!isTopicIdSet && bookmarks.length && !showBookmarks && !showSearch">
         <p>{{ coreString('selectFromBookmarks') }}</p>
 
         <div>
@@ -97,12 +97,6 @@
         :topicsLink="topicsLink"
       />
 
-      <LessonsSearchBox
-        v-if="!showBookmarks"
-        @clear="clearSearchTerm"
-        @searchterm="handleSearchTermChange"
-      />
-
       <div
         v-if="showNumberOfQuestionsWarning"
         class="shadow"
@@ -124,6 +118,7 @@
       </div>
 
       <ContentCardList
+        v-if="!showSearch"
         :contentList="contentList"
         :showSelectAll="showSelectAll"
         :viewMoreButtonState="viewMoreButtonState"
@@ -176,6 +171,18 @@
         />
       </div>
     </div>
+
+    <SearchFiltersPanel
+      v-if="showSearch"
+      ref="sidePanel"
+      v-model="searchTerms"
+      data-test="side-panel"
+      width="100%"
+      :accordion="true"
+      :showActivities="false"
+      @close="showSearch = false"
+    />
+
     <KModal
       v-if="showCloseConfirmation"
       :submitText="coreString('continueAction')"
@@ -206,21 +213,22 @@
   import { ContentNodeResource, ChannelResource } from 'kolibri.resources';
   import { ContentNodeKinds, MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri.coreVue.vuex.constants';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import useBaseSearch from 'kolibri-common/composables/useBaseSearch';
+  import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel';
   import { exerciseToQuestionArray } from '../../../utils/selectQuestions';
   import { PageNames, ViewMoreButtonStates } from '../../../constants/index';
   import BookmarkIcon from '../../lessons/LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
   import useQuizResources from '../../../composables/useQuizResources';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
-  import LessonsSearchBox from '../../lessons/LessonResourceSelectionPage/SearchTools/LessonsSearchBox.vue';
   import ContentCardList from '../../lessons/LessonResourceSelectionPage/ContentCardList.vue';
   import ResourceSelectionBreadcrumbs from '../../lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
 
   export default {
     name: 'ResourceSelection',
     components: {
+      SearchFiltersPanel,
       ContentCardList,
       BookmarkIcon,
-      LessonsSearchBox,
       ResourceSelectionBreadcrumbs,
     },
     mixins: [commonCoreStrings],
@@ -482,6 +490,9 @@
         loadingMore,
       } = useQuizResources({ topicId, practiceQuiz: selectPracticeQuiz.value });
 
+      const { searchTerms, search } = useBaseSearch({ descendant: topic });
+      search();
+
       const _loading = ref(true);
 
       const channels = ref([]);
@@ -701,6 +712,7 @@
       }
 
       return {
+        showSearch: ref(false),
         nodeIsSelectableOrUnselectable,
         showCheckbox,
         displaySectionTitle,
@@ -765,6 +777,7 @@
         selectPracticeQuizLabel$,
         numberOfQuestionsLabel$,
         addNumberOfQuestions$,
+        searchTerms,
       };
     },
     props: {
@@ -906,20 +919,6 @@
           count,
         });
       },
-      handleSearchTermChange(searchTerm) {
-        const query = {
-          ...this.$route.query,
-          search: searchTerm,
-        };
-        this.$router.push({ query });
-      },
-      clearSearchTerm() {
-        const query = {
-          ...this.$route.query,
-        };
-        delete query.search;
-        this.$router.push({ query });
-      },
     },
   };
 

kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue

@@ -102,14 +102,28 @@
       </main>
 
       <!-- Side Panels for filtering and searching  -->
-      <SearchFiltersPanel
-        v-if="(!isLocalLibraryEmpty || deviceId) && (windowIsLarge || mobileSidePanelIsOpen)"
-        ref="sidePanel"
-        v-model="searchTerms"
-        data-test="side-panel"
-        :width="`${sidePanelWidth}px`"
-        @close="toggleSidePanelVisibility"
-      />
+      <div v-if="(!isLocalLibraryEmpty || deviceId) && windowIsLarge">
+        <SearchFiltersPanel
+          ref="sidePanel"
+          v-model="searchTerms"
+          :class="windowIsLarge ? 'side-panel' : ''"
+          data-test="side-panel-local"
+          :width="`${sidePanelWidth}px`"
+        />
+      </div>
+
+      <SidePanelModal
+        v-else-if="mobileSidePanelIsOpen && !windowIsLarge"
+        alignment="left"
+        @closePanel="toggleSidePanelVisibility"
+      >
+        <SearchFiltersPanel
+          ref="sidePanel"
+          v-model="searchTerms"
+          data-test="side-panel"
+          :width="`${sidePanelWidth}px`"
+        />
+      </SidePanelModal>
 
       <!-- Side Panel for metadata -->
       <SidePanelModal
@@ -249,6 +263,7 @@
         setCategory,
         currentRoute,
       } = useSearch();
+      search();
       const {
         resumableContentNodes,
         moreResumableContentNodes,
@@ -501,6 +516,14 @@
       searchTerms() {
         this.mobileSidePanelIsOpen = false;
       },
+      windowIsLarge(newVal) {
+        // Be sure we set the side panel closed if the screen size changes
+        // otherwise the watcher on mobileSidePanelIsOpen will leave the
+        // document stuck in `position: fixed;` so we won't see the scrollbar
+        if (newVal) {
+          this.mobileSidePanelIsOpen = false;
+        }
+      },
       mobileSidePanelIsOpen() {
         if (this.mobileSidePanelIsOpen) {
           document.documentElement.style.position = 'fixed';
@@ -512,7 +535,6 @@
     created() {
       const welcomeDismissalKey = 'DEVICE_WELCOME_MODAL_DISMISSED';
 
-      this.search();
       if (window.sessionStorage.getItem(welcomeDismissalKey) !== 'true') {
         this.$store.commit('SET_WELCOME_MODAL_VISIBLE', true);
       }
@@ -649,4 +671,25 @@
     margin-left: 8px;
   }
 
+  .side-panel {
+    @extend %dropshadow-2dp;
+
+    position: fixed;
+    top: 60px;
+    left: 0;
+    height: 100%;
+    padding: 24px 24px 0;
+    overflow-y: scroll;
+    font-size: 14px;
+  }
+
+  /*
+  * Work around for https://bugzilla.mozilla.org/show_bug.cgi?id=1417667
+  */
+  .side-panel::after {
+    display: block;
+    padding-bottom: 70px;
+    content: '';
+  }
+
 </style>

kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue

@@ -186,26 +186,24 @@
 
         <!-- The full screen side panel is used on smaller screens, and toggles as an overlay -->
         <template v-if="!windowIsLarge && sidePanelIsOpen">
-          <SearchFiltersPanel
-            v-if="searchActive"
-            ref="embeddedPanel"
-            v-model="searchTerms"
-            class="full-screen-side-panel"
-            :showChannels="false"
-            :style="sidePanelStyleOverrides"
-            @close="sidePanelIsOpen = false"
-          />
-          <TopicsPanelModal
-            v-else
-            ref="embeddedPanel"
-            class="full-screen-side-panel"
-            :topics="topics"
-            :topicMore="Boolean(topicMore)"
-            :topicsLoading="topicMoreLoading"
-            :style="sidePanelStyleOverrides"
-            @loadMoreTopics="handleLoadMoreInTopic"
-            @close="sidePanelIsOpen = false"
-          />
+          <SidePanelModal @closePanel="sidePanelIsOpen = false">
+            <SearchFiltersPanel
+              v-if="searchActive"
+              ref="embeddedPanel"
+              v-model="searchTerms"
+              :showChannels="false"
+              :style="sidePanelStyleOverrides"
+            />
+            <TopicsPanelModal
+              v-else
+              ref="embeddedPanel"
+              :topics="topics"
+              :topicMore="Boolean(topicMore)"
+              :topicsLoading="topicMoreLoading"
+              :style="sidePanelStyleOverrides"
+              @loadMoreTopics="handleLoadMoreInTopic"
+            />
+          </SidePanelModal>
         </template>
       </div>
 
@@ -974,8 +972,11 @@
   .side-panel {
     position: absolute;
     top: $total-height;
+    left: 0;
     min-height: calc(100vh - #{$toolbar-height});
-    padding-top: 16px;
+    // Padding & scroll to ensure user can scroll all the way down
+    padding: 1em 1em 6em;
+    overflow-y: scroll;
   }
 
   .main-content-grid {
@@ -1049,4 +1050,13 @@
     margin-bottom: 24px;
   }
 
+  /deep/ .activities-wrapper {
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  }
+
+  /deep/ .btn-activity {
+    width: 80px;
+    height: 80px;
+  }
+
 </style>

kolibri/plugins/learn/assets/test/views/library-page.spec.js

@@ -140,7 +140,7 @@ describe('LibraryPage', () => {
         options: { stubs: ['SidePanelModal'] },
       });
       // not displayed by default
-      expect(wrapper.findComponent({ name: 'SearchFiltersPanel' }).element).toBeUndefined();
+      expect(wrapper.find('[data-test="side-panel"]').element).toBeUndefined();
       wrapper.find('[data-test="filter-button"]').trigger('click');
       await wrapper.vm.$nextTick();
       expect(wrapper.findComponent({ name: 'SearchFiltersPanel' }).element).toBeTruthy();
@@ -355,7 +355,7 @@ describe('LibraryPage', () => {
         windowIsLarge: true,
       }));
       const wrapper = await makeWrapper();
-      expect(wrapper.find('[data-test="side-panel"').element).toBeTruthy();
+      expect(wrapper.find('[data-test="side-panel-local"').element).toBeTruthy();
     });
   });
 

packages/kolibri-common/components/SearchBox.vue

@@ -25,7 +25,7 @@
         class="search-input"
         :class="$computedClass(searchInputStyle)"
         dir="auto"
-        :placeholder="coreString(placeholder)"
+        :placeholder="placeholder || coreString('searchLabel')"
       >
       <div class="search-buttons-wrapper">
         <KIconButton
@@ -80,7 +80,7 @@
       },
       placeholder: {
         type: String,
-        default: 'searchLabel',
+        default: null,
       },
       value: {
         type: String,