refactor: admin search to edit, delete

Services/client/src/modules/01_user/components/SearchBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import axiosClient from '@/services/HttpService'
 
@@ -10,22 +10,21 @@ import { useLoader } from '@/stores/loader'
 import AdvancedSearch from '@/modules/01_user/components/AdvancedSearch.vue'
 
 const loaderStore = useLoader()
-const { isSearch, isAdvSearchCall } = storeToRefs(useSearchDataStore())
+const {
+  isSearch,
+  isAdvSearchCall,
+  isActFoundFile,
+  searchData,
+  advSearchDataField,
+  advSearchDataRow,
+} = storeToRefs(useSearchDataStore())
 const { getFoundFile } = useSearchDataStore()
-const advSearchComp = ref<InstanceType<typeof AdvancedSearch>>()
 const optionsField = [
   { label: 'ชื่อเรื่อง (title)', value: 'title' },
   { label: 'คำสำคัญ (keyword)', value: 'keyword' },
   { label: 'หมวดหมู่ (category)', value: 'category' },
   { label: 'เนื้อหาในไฟล์ (content)', value: 'attachment.content' },
 ]
-const searchData = ref<{
-  field: string
-  value: string
-}>({
-  field: 'title',
-  value: '',
-})
 const submitSearchData = ref<{
   AND: { field: string; value: string }[]
   OR: { field: string; value: string }[]
@@ -53,9 +52,9 @@ async function searchSubmit() {
         value: searchData.value.value,
       })
 
-      if (isAdvSearchCall.value && advSearchComp.value) {
-        const advField = advSearchComp.value.advSearchDataField
-        const advRow = advSearchComp.value.advSearchDataRow
+      if (isAdvSearchCall.value) {
+        let advField = advSearchDataField.value
+        let advRow = advSearchDataRow.value
 
         advRow.forEach((d: { field: string; value: string; op: string }) => {
           if (d.field && d.value.trim() !== '') {
@@ -63,11 +62,13 @@ async function searchSubmit() {
             submitSearchData.value[op].push({ field: d.field, value: d.value })
           }
         })
-        if (advField.keyword.trim() !== '') {
-          submitSearchData.value.AND.push({
-            field: 'keyword',
-            value: advField.keyword,
-          })
+        if (advField.keyword.length > 0) {
+          for (let i = 0; i < advField.keyword.length; i++) {
+            submitSearchData.value.AND.push({
+              field: 'keyword',
+              value: advField.keyword[i],
+            })
+          }
         }
         if (advField.description.trim() !== '') {
           submitSearchData.value.AND.push({
@@ -93,6 +94,18 @@ async function searchSubmit() {
     }
   }
 }
+
+watch(
+  () => isActFoundFile.value,
+  (edited) => {
+    if (edited === true) {
+      searchSubmit()
+      setTimeout(() => {
+        isActFoundFile.value = false
+      }, 300)
+    }
+  },
+)
 </script>
 
 <template>
@@ -154,7 +167,6 @@ async function searchSubmit() {
         <div class="row items-center justify-between q-gutter-y-md q-pt-sm">
           <div class="column col-grow">
             <advanced-search
-              ref="advSearchComp"
               :searchSubmit="searchSubmit"
               :submit-search-data="submitSearchData"
             />