feat: ค้นหาตรงตัว

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

@@ -16,6 +16,7 @@ const loaderStore = useLoader()
 const { isFilePreview } = storeToRefs(useFileInfoStore())
 const {
   foundFile,
+  isExact,
   isSearch,
   isAdvSearchCall,
   isActFoundFile,
@@ -31,8 +32,8 @@ const optionsField = [
   { label: 'เนื้อหาในไฟล์ (content)', value: 'attachment.content' },
 ]
 const submitSearchData = ref<{
-  AND: { field: string; value: string }[]
-  OR: { field: string; value: string }[]
+  AND: { field: string; value: string; exact: boolean }[]
+  OR: { field: string; value: string; exact: boolean }[]
 }>({
   AND: [],
   OR: [],
@@ -40,7 +41,6 @@ const submitSearchData = ref<{
 const props = defineProps<{
   mode: 'admin' | 'user'
 }>()
-
 const socket = io(import.meta.env.VITE_API_HOST)
 
 socket.on('FileUpdate', (data: StorageFile) =>
@@ -68,36 +68,47 @@ async function submitSearch() {
         submitSearchData.value.OR.push({
           field: option.value,
           value: searchData.value.value,
+          exact: true,
         })
       })
       submitSearchData.value.OR.push({
         field: 'fileName',
         value: searchData.value.value,
+        exact: true,
       })
       submitSearchData.value.OR.push({
         field: 'fileType',
         value: mime.getType(searchData.value.value) || '',
+        exact: true,
       })
     } else {
       submitSearchData.value.OR.push({
         field: searchData.value.field,
         value: searchData.value.value,
+        exact: isExact.value,
       })
       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() !== '') {
-            const op = d.op === 'AND' ? 'AND' : 'OR'
-            submitSearchData.value[op].push({ field: d.field, value: d.value })
-          }
-        })
+        advRow.forEach(
+          (d: { field: string; value: string; op: string; exact: boolean }) => {
+            if (d.field && d.value.trim() !== '') {
+              const op = d.op === 'AND' ? 'AND' : 'OR'
+              submitSearchData.value[op].push({
+                field: d.field,
+                value: d.value,
+                exact: d.exact,
+              })
+            }
+          },
+        )
         if (advField.keyword.length > 0) {
           for (let i = 0; i < advField.keyword.length; i++) {
             submitSearchData.value.AND.push({
               field: 'keyword',
               value: advField.keyword[i],
+              exact: true,
             })
           }
         }
@@ -105,6 +116,7 @@ async function submitSearch() {
           submitSearchData.value.AND.push({
             field: 'description',
             value: advField.description,
+            exact: true,
           })
         }
       }
@@ -116,6 +128,7 @@ async function submitSearch() {
         `${import.meta.env.VITE_API_ENDPOINT}/search`,
         submitSearchData.value,
       )
+
       getFoundFile(res.data)
       isSearch.value = true
     } catch (error) {
@@ -133,7 +146,7 @@ watch(
       submitSearch()
       setTimeout(() => {
         isActFoundFile.value = false
-      }, 300)
+      }, 1000)
     }
   },
 )
@@ -206,11 +219,20 @@ watch(
             </template>
           </q-input>
         </div>
+        <div>
+          <q-checkbox
+            id="specificBox"
+            v-model="isExact"
+            label="ค้นหาตรงตัว"
+            color="grey"
+            keep-color
+          />
+        </div>
       </div>
 
-      <div class="column">
+      <div class="col">
         <div class="row items-center justify-between q-gutter-y-md q-pt-sm">
-          <div class="column col-grow">
+          <div class="col-grow">
             <advanced-search
               :submitSearch="submitSearch"
               :submit-search-data="submitSearchData"
@@ -221,6 +243,7 @@ watch(
               style="width: 150px"
               color="primary"
               label="ค้นหา"
+              class="q-mt-sm"
               icon="mdi-magnify"
               @click="submitSearch"
               id="submitSearch"