refactor: filter by keyword or categ after search

Services/client/src/components/FileSearched.vue

@@ -4,13 +4,19 @@ import { useSearchDataStore } from '@/stores/searched-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
 import FileIcon from '@/components/FileIcon.vue'
 import type { QTableProps } from 'quasar'
+import { onMounted, ref, watch } from 'vue'
 
 defineProps<{
   viewMode: 'view_list' | 'view_module'
 }>()
 
 const { foundFile } = storeToRefs(useSearchDataStore())
-const { getFileInfo, getSize, getType, getFileNameFormat } = useFileInfoStore()
+const { getFileInfo, getSize, getType } = useFileInfoStore()
+const keywordList = ref<string[]>([])
+const categoryList = ref<string[]>([])
+const selectKeyword = ref<string[]>([])
+const selectCategory = ref<string[]>([])
+const filterFoundFile = ref<any>()
 const columns: QTableProps['columns'] = [
   {
     name: 'name',
@@ -46,12 +52,81 @@ const columns: QTableProps['columns'] = [
     style: 'width: 20px',
   },
 ]
+
+function filterSearch() {
+  function updateList() {
+    keywordList.value = []
+    categoryList.value = []
+    foundFile.value.forEach((obj) => {
+      obj.keyword.forEach((keyword) => {
+        if (!keywordList.value.includes(keyword)) {
+          keywordList.value.push(keyword)
+        }
+      })
+      obj.category.forEach((category) => {
+        if (!categoryList.value.includes(category)) {
+          categoryList.value.push(category)
+        }
+      })
+    })
+  }
+
+  function filterArray() {
+    if (!(selectKeyword.value.length || selectCategory.value.length)) {
+      filterFoundFile.value = foundFile.value
+    } else {
+      filterFoundFile.value = foundFile.value.filter(
+        (entry) =>
+          entry.keyword.some((kw) => selectKeyword.value.includes(kw)) ||
+          entry.category.some((kw) => selectCategory.value.includes(kw)),
+      )
+    }
+  }
+  updateList()
+  filterArray()
+}
+
+watch(
+  [
+    () => foundFile.value,
+    () => selectKeyword.value,
+    () => selectCategory.value,
+  ],
+  filterSearch,
+)
+
+onMounted(() => {
+  filterSearch()
+})
 </script>
 
 <template>
+  <div class="row grid q-pt-md q-gutter-sm">
+    <q-select
+      outlined
+      dense
+      multiple
+      use-chips
+      v-model="selectKeyword"
+      :options="keywordList"
+      style="width: 100%"
+      label="คำสำคัญ"
+    />
+    <q-select
+      outlined
+      dense
+      multiple
+      use-chips
+      v-model="selectCategory"
+      :options="categoryList"
+      style="width: 100%"
+      label="กลุ่ม/หมวดหมู่"
+    />
+  </div>
+
   <div v-if="viewMode === 'view_list' && foundFile.length > 0">
     <div class="grid q-mt-md">
-      <div v-for="(value, index) in foundFile" :key="value.title">
+      <div v-for="(value, index) in filterFoundFile" :key="value.title">
         <div
           :style="{
             position: 'relative',
@@ -63,7 +138,7 @@ const columns: QTableProps['columns'] = [
             maxWidth: '100%',
           }"
           class="box"
-          @click="() => getFileInfo(foundFile[index])"
+          @click="() => getFileInfo(filterFoundFile[index])"
         >
           <div class="q-px-md flex items-center justify-center">
             <file-icon
@@ -75,7 +150,7 @@ const columns: QTableProps['columns'] = [
             class="text-overflow-handle block q-px-md text-center"
             style="max-width: 100%"
           >
-            {{ getFileNameFormat(value.fileName) }}
+            {{ value.title }}
           </div>
         </div>
       </div>
@@ -86,7 +161,7 @@ const columns: QTableProps['columns'] = [
     <q-table
       flat
       bordered
-      :rows="foundFile"
+      :rows="filterFoundFile"
       :columns="columns"
       row-key="name"
       hide-bottom