Add search bar for collections (#1260)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

components/collections/collection.vue

@@ -2,8 +2,8 @@
   <div>
     <div class="row-wrapper">
       <button class="icon" @click="toggleShowChildren">
-        <i class="material-icons" v-show="!showChildren">arrow_right</i>
-        <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
+        <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
+        <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
         <folderIcon class="material-icons" />
         <span>{{ collection.name }}</span>
       </button>
@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <div v-show="showChildren">
+    <div v-show="showChildren || isFiltered">
       <ul class="flex-col">
         <li
           v-for="(folder, index) in collection.folders"
@@ -56,6 +56,7 @@
             :folderIndex="index"
             :collection-index="collectionIndex"
             :doc="doc"
+            :isFiltered="isFiltered"
             @edit-folder="editFolder(collectionIndex, folder, index)"
             @edit-request="$emit('edit-request', $event)"
           />
@@ -105,6 +106,7 @@ export default {
     collectionIndex: Number,
     collection: Object,
     doc: Boolean,
+    isFiltered: Boolean,
   },
   data() {
     return {

components/collections/folder.vue

@@ -3,8 +3,8 @@
     <div class="row-wrapper">
       <div>
         <button class="icon" @click="toggleShowChildren">
-          <i class="material-icons" v-show="!showChildren">arrow_right</i>
-          <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
+          <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
+          <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
           <i class="material-icons">folder_open</i>
           <span>{{ folder.name }}</span>
         </button>
@@ -30,7 +30,7 @@
       </v-popover>
     </div>
 
-    <div v-show="showChildren">
+    <div v-show="showChildren || isFiltered">
       <ul class="flex-col">
         <li
           v-for="(request, index) in folder.requests"
@@ -72,6 +72,7 @@ export default {
     collectionIndex: Number,
     folderIndex: Number,
     doc: Boolean,
+    isFiltered: Boolean,
   },
   data() {
     return {

components/collections/index.vue

@@ -5,6 +5,12 @@ TODO:
 
 <template>
   <pw-section class="yellow" :label="$t('collections')" ref="collections">
+    <div class="show-on-large-screen">
+      <input aria-label="Search" type="search" :placeholder="$t('search')" v-model="filterText" />
+      <!-- <button class="icon">
+        <i class="material-icons">search</i>
+      </button> -->
+    </div>
     <add-collection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <edit-collection
       :show="showModalEdit"
@@ -66,11 +72,12 @@ TODO:
     </p>
     <div class="virtual-list">
       <ul class="flex-col">
-        <li v-for="(collection, index) in collections" :key="collection.name">
+        <li v-for="(collection, index) in filteredCollections" :key="collection.name">
           <collection
             :collection-index="index"
             :collection="collection"
             :doc="doc"
+            :isFiltered="filterText.length > 0"
             @edit-collection="editCollection(collection, index)"
             @add-folder="addFolder(collection, index)"
             @edit-folder="editFolder($event)"
@@ -80,6 +87,11 @@ TODO:
         </li>
       </ul>
     </div>
+    <ul class="flex-col" v-if="filterText && filteredCollections.length === 0">
+      <li>
+        <label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
+      </li>
+    </ul>
   </pw-section>
 </template>
 
@@ -110,6 +122,7 @@ export default {
       editingFolderIndex: undefined,
       editingRequest: undefined,
       editingRequestIndex: undefined,
+      filterText: "",
     }
   },
   computed: {
@@ -118,6 +131,45 @@ export default {
         ? fb.currentCollections
         : this.$store.state.postwoman.collections
     },
+    filteredCollections() {
+      const collections =
+        fb.currentUser !== null ? fb.currentCollections : this.$store.state.postwoman.collections
+
+      if (!this.filterText) return collections
+
+      const filterText = this.filterText.toLowerCase()
+      const filteredCollections = []
+
+      for (let collection of collections) {
+        const filteredRequests = []
+        const filteredFolders = []
+        for (let request of collection.requests) {
+          console.log(request)
+          if (request.name.toLowerCase().includes(filterText)) filteredRequests.push(request)
+        }
+        for (let folder of collection.folders) {
+          const filteredFolderRequests = []
+          for (let request of folder.requests) {
+            if (request.name.toLowerCase().includes(filterText))
+              filteredFolderRequests.push(request)
+          }
+          if (filteredFolderRequests.length > 0) {
+            const filteredFolder = Object.assign({}, folder)
+            filteredFolder.requests = filteredFolderRequests
+            filteredFolders.push(filteredFolder)
+          }
+        }
+
+        if (filteredRequests.length + filteredFolders.length > 0) {
+          const filteredCollection = Object.assign({}, collection)
+          filteredCollection.requests = filteredRequests
+          filteredCollection.folders = filteredFolders
+          filteredCollections.push(filteredCollection)
+        }
+      }
+
+      return filteredCollections
+    },
   },
   async mounted() {
     this._keyListener = function (e) {