From 2e54da99e19855afdce7e56d9feffb736b7bf3f0 Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Fri, 15 Dec 2023 09:02:39 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E0=B8=84=E0=B9=89=E0=B8=99=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=95=E0=B8=A3=E0=B8=87=E0=B8=95=E0=B8=B1=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01_user/components/AdvancedSearch.vue     | 220 ++++++++++--------
 .../modules/01_user/components/SearchBar.vue  |  47 +++-
 2 files changed, 152 insertions(+), 115 deletions(-)

diff --git a/Services/client/src/modules/01_user/components/AdvancedSearch.vue b/Services/client/src/modules/01_user/components/AdvancedSearch.vue
index 78bfa69..adb3c63 100644
--- a/Services/client/src/modules/01_user/components/AdvancedSearch.vue
+++ b/Services/client/src/modules/01_user/components/AdvancedSearch.vue
@@ -1,4 +1,3 @@
-divdivdivdivdivdiv
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 
@@ -22,10 +21,12 @@ const props = defineProps<{
     AND: {
       field: string
       value: string
+      exact: boolean
     }[]
     OR: {
       field: string
       value: string
+      exact: boolean
     }[]
   }
 }>()
@@ -35,6 +36,7 @@ function addAdvSearchData() {
     op: 'AND',
     field: 'title',
     value: '',
+    exact: false,
   })
 }
 function delAdvSearchData(index: number) {
@@ -47,6 +49,7 @@ function clearAdvSearchData() {
       op: 'AND',
       field: 'title',
       value: '',
+      exact: false,
     },
   ]
   advSearchDataField.value = {
@@ -71,7 +74,7 @@ function clearAdvSearchData() {
   </div>
 
   <div v-if="isAdvSearchCall === true">
-    <div class="column bg-white q-pa-sm">
+    <div class="col bg-white q-pa-sm">
       <div class="row items-center justify-between q-pb-md">
         <span class="text-primary text-weight-medium q-pl-md q-pt-xs"
           ><q-icon name="mdi-tools" class="q-pr-sm" size="sm" />
@@ -87,112 +90,123 @@ function clearAdvSearchData() {
         />
       </div>
 
-      <div class="column q-px-lg">
+      <div
+        class="row q-px-lg items-center justify-start q-pb-md q-col-gutter-md"
+        v-for="(item, index) in advSearchDataRow"
+        :key="index"
+      >
         <div
-          class="row items-center q-pb-xs q-col-gutter-md"
-          v-for="(item, index) in advSearchDataRow"
-          :key="index"
+          class="col-md-1 col-1 row content-center"
+          style="width: 45px; height: 45px"
         >
-          <div class="row content-center" style="width: 45px; height: 45px">
-            <q-btn
-              dense
-              color="teal-5"
-              icon="mdi-plus"
-              v-if="index === advSearchDataRow.length - 1"
-              @click="addAdvSearchData"
-              id="addAdvSearchData"
-            />
-          </div>
-          <div class="col-4 col-md-2">
-            <q-select
-              id="advSearchOp"
-              dense
-              outlined
-              emit-value
-              map-options
-              v-model="item.op"
-              :options="optionsOp"
-            />
-          </div>
-          <div class="col-grow col-md-3">
-            <q-select
-              id="advSearchField"
-              dense
-              outlined
-              emit-value
-              map-options
-              v-model="item.field"
-              :options="optionsField"
-            />
-          </div>
-          <div class="col-grow">
-            <q-input
-              id="advSearchValue"
-              dense
-              outlined
-              v-model="item.value"
-              placeholder="เอกสาร"
-              @keydown.enter.prevent="submitSearch()"
-              ><template v-slot:append>
-                <q-icon
-                  v-if="item.value"
-                  name="close"
-                  @click="() => (item.value = '')"
-                  class="cursor-pointer"
-                />
-              </template>
-            </q-input>
-          </div>
-          <div class="row content-center" style="width: 45px; height: 45px">
-            <q-btn
-              dense
-              flat
-              icon="mdi-trash-can-outline"
-              v-if="advSearchDataRow.length > 1"
-              color="red"
-              @click="() => delAdvSearchData(index)"
-              id="delAdvSearchData"
-            />
-          </div>
+          <q-btn
+            dense
+            color="teal-5"
+            icon="mdi-plus"
+            v-if="index === advSearchDataRow.length - 1"
+            @click="addAdvSearchData"
+            id="addAdvSearchData"
+          />
         </div>
+        <div class="col-4 col-md-2">
+          <q-select
+            id="advSearchOp"
+            dense
+            outlined
+            emit-value
+            map-options
+            v-model="item.op"
+            :options="optionsOp"
+          />
+        </div>
+        <div class="col-grow col-md-3">
+          <q-select
+            id="advSearchField"
+            dense
+            outlined
+            emit-value
+            map-options
+            v-model="item.field"
+            :options="optionsField"
+          />
+        </div>
+        <div class="col-md-grow col-grow">
+          <q-input
+            id="advSearchValue"
+            dense
+            outlined
+            v-model="item.value"
+            placeholder="เอกสาร"
+            @keydown.enter.prevent="submitSearch()"
+            ><template v-slot:append>
+              <q-icon
+                v-if="item.value"
+                name="close"
+                @click="() => (item.value = '')"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+        </div>
+        <div class="col-md-1 q-mr-xl">
+          <q-checkbox
+            id="specificBox"
+            style="width: 200%"
+            v-model="item.exact"
+            label="ค้นหาตรงตัว"
+            color="grey"
+            keep-color
+          />
+        </div>
+        <div class="row content-center">
+          <q-btn
+            dense
+            flat
+            icon="mdi-trash-can-outline"
+            v-if="advSearchDataRow.length > 1"
+            color="red"
+            @click="() => delAdvSearchData(index)"
+            id="delAdvSearchData"
+          />
+        </div>
+      </div>
 
-        <q-separator class="q-mb-md q-mt-sm" />
+      <q-separator class="q-mb-md q-mt-sm" />
 
-        <div class="row q-col-gutter-md q-pb-md">
-          <div class="col-12 col-md-5">
-            <q-select
-              outlined
-              dense
-              v-model="advSearchDataField.keyword"
-              use-input
-              use-chips
-              multiple
-              hide-dropdown-icon
-              input-debounce="0"
-              new-value-mode="add-unique"
-              ><template v-slot:prepend
-                ><span class="text-subtitle2">คำสำคัญ:</span></template
-              ></q-select
-            >
-          </div>
-          <div class="col-12 col-md-grow">
-            <q-input
-              id="advSearchDes"
-              dense
-              outlined
-              @keydown.enter.prevent="submitSearch()"
-              v-model="advSearchDataField.description"
-              ><template v-slot:prepend
-                ><span class="text-subtitle2">รายละเอียด:</span></template
-              ><template v-slot:append>
-                <q-icon
-                  v-if="advSearchDataField.description"
-                  name="close"
-                  @click="() => (advSearchDataField.description = '')"
-                  class="cursor-pointer"
-                /> </template
-            ></q-input>
-          </div>
+      <div class="row q-col-gutter-md q-pb-md q-pt-sm">
+        <div class="col-12 col-md-5">
+          <q-select
+            outlined
+            dense
+            v-model="advSearchDataField.keyword"
+            use-input
+            use-chips
+            multiple
+            hide-dropdown-icon
+            input-debounce="0"
+            new-value-mode="add-unique"
+            ><template v-slot:prepend
+              ><span class="text-subtitle2">คำสำคัญ:</span></template
+            ></q-select
+          >
+        </div>
+        <div class="col-12 col-md-grow">
+          <q-input
+            id="advSearchDes"
+            dense
+            outlined
+            @keydown.enter.prevent="submitSearch()"
+            v-model="advSearchDataField.description"
+            ><template v-slot:prepend
+              ><span class="text-subtitle2">รายละเอียด:</span></template
+            ><template v-slot:append>
+              <q-icon
+                v-if="advSearchDataField.description"
+                name="close"
+                @click="() => (advSearchDataField.description = '')"
+                class="cursor-pointer"
+              /> </template
+          ></q-input>
         </div>
       </div>
     </div>
diff --git a/Services/client/src/modules/01_user/components/SearchBar.vue b/Services/client/src/modules/01_user/components/SearchBar.vue
index c4b35dd..d78ed1f 100644
--- a/Services/client/src/modules/01_user/components/SearchBar.vue
+++ b/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"