Merge pull request learningequality#12871 from ozer550/implement-sear…

…chFiltertsPanel-lesson

Add searchFiltersPanel to Lessons

kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue

@@ -8,69 +8,96 @@
     @shouldFocusFirstEl="() => null"
   >
     <template #header>
-      <h1 class="side-panel-title">{{ $tr('manageLessonResourcesTitle') }}</h1>
+      <div :class="{ 'back-button-class': !showSearch }">
+        <KIconButton
+          v-if="!showSearch"
+          icon="back"
+          class="back-button-style"
+          @click="showSearch = true"
+        />
+        <h1 class="side-panel-title">
+          {{ !showSearch ? searchLabel$() : $tr('manageLessonResourcesTitle') }}
+        </h1>
+      </div>
     </template>
-    <div v-if="loading">
-      <KCircularLoader />
+
+    <div v-if="!showSearch">
+      <SearchFiltersPanel
+        ref="SearchPanel"
+        v-model="searchTerms"
+        :accordion="true"
+        :showChannels="true"
+        :showActivities="true"
+        @close="showSearch = true"
+      />
     </div>
     <div v-else>
-      <div v-if="bookmarks.length > 0">
-        <h2 class="side-panel-subtitle">
-          {{ selectFromBookmarks$() }}
-        </h2>
-        <KCardGrid layout="1-1-1">
-          <KCard
-            :title="bookmarksLabel$()"
-            :headingLevel="3"
-            :to="{}"
-            orientation="horizontal"
-            thumbnailDisplay="large"
-            thumbnailAlign="right"
-            :style="{
-              height: '172px',
-            }"
-          >
-            <template #thumbnailPlaceholder>
-              <KIcon
-                :style="{
-                  fontSize: '48px',
-                }"
-                icon="bookmark"
-                :color="$themePalette.grey.v_700"
-              />
-            </template>
-            <template #belowTitle>
-              <span>
-                {{ numberOfBookmarks$({ count: bookmarks.length }) }}
-              </span>
-            </template>
-          </KCard>
-        </KCardGrid>
+      <div v-if="loading">
+        <KCircularLoader />
       </div>
-      <div>
-        <div class="channels-header">
+      <div v-else>
+        <div v-if="bookmarks.length > 0">
           <h2 class="side-panel-subtitle">
-            {{ selectFromChannels$() }}
+            {{ selectFromBookmarks$() }}
           </h2>
-          <KButton
-            icon="filter"
-            :text="searchLabel$()"
-          />
+          <KCardGrid layout="1-1-1">
+            <KCard
+              :title="bookmarksLabel$()"
+              :headingLevel="3"
+              :to="{}"
+              orientation="horizontal"
+              thumbnailDisplay="large"
+              thumbnailAlign="right"
+              :style="{
+                height: '172px',
+              }"
+            >
+              <template #thumbnailPlaceholder>
+                <KIcon
+                  :style="{
+                    fontSize: '48px',
+                  }"
+                  icon="bookmark"
+                  :color="$themePalette.grey.v_700"
+                />
+              </template>
+              <template #belowTitle>
+                <span>
+                  {{ numberOfBookmarks$({ count: bookmarks.length }) }}
+                </span>
+              </template>
+            </KCard>
+          </KCardGrid>
+        </div>
+        <div>
+          <div class="channels-header">
+            <h2 class="side-panel-subtitle">
+              {{ selectFromChannels$() }}
+            </h2>
+            <KButton
+              icon="filter"
+              :text="searchLabel$()"
+              @click="showSearch = false"
+            />
+          </div>
+          <KCardGrid layout="1-1-1">
+            <AccessibleChannelCard
+              v-for="channel of channels"
+              :key="channel.id"
+              :contentNode="channel"
+              :to="{}"
+              :headingLevel="3"
+            />
+          </KCardGrid>
         </div>
-        <KCardGrid layout="1-1-1">
-          <AccessibleChannelCard
-            v-for="channel of channels"
-            :key="channel.id"
-            :contentNode="channel"
-            :to="{}"
-            :headingLevel="3"
-          />
-        </KCardGrid>
       </div>
     </div>
 
     <template #bottomNavigation>
-      <div class="bottom-nav-container">
+      <div
+        v-if="showSearch"
+        class="bottom-nav-container"
+      >
         <KButton
           primary
           :text="saveAndFinishAction$()"
@@ -91,17 +118,24 @@
   import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
   import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
   import AccessibleChannelCard from 'kolibri-common/components/Cards/AccessibleChannelCard.vue';
+  import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel/index.vue';
+  import useBaseSearch from 'kolibri-common/composables/useBaseSearch';
 
   export default {
     name: 'LessonResourceSelection',
     components: {
       SidePanelModal,
       AccessibleChannelCard,
+      SearchFiltersPanel,
     },
     setup() {
       const loading = ref(false);
       const bookmarks = ref([]);
       const channels = ref([]);
+      const showSearch = ref(true);
+      const topic = ref(null);
+
+      const { searchTerms } = useBaseSearch(topic);
 
       const loadBookmarks = async () => {
         const data = await ContentNodeResource.fetchBookmarks({
@@ -141,6 +175,8 @@
         loading,
         bookmarks,
         channels,
+        showSearch,
+        searchTerms,
         selectFromChannels$,
         numberOfBookmarks$,
         bookmarksLabel$,
@@ -191,4 +227,16 @@
     width: 100%;
   }
 
+  .back-button-class {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 6.5rem;
+  }
+
+  .back-button-style {
+    position: relative;
+    top: 3.8px;
+  }
+
 </style>