fix: search component & data

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

@@ -5,9 +5,9 @@ import { storeToRefs } from 'pinia'
 
 import type { EhrFile } from '@/stores/tree-data'
 
-import AdvancedSearch from '@/modules/01_user/components/AdvancedSearch.vue'
 import { useSearchDataStore } from '@/stores/searched-data'
 import { useLoader } from '@/stores/loader'
+import AdvancedSearch from '@/modules/01_user/components/AdvancedSearch.vue'
 
 const loaderStore = useLoader()
 const { isSearch, isAdvSearchCall } = storeToRefs(useSearchDataStore())
@@ -20,106 +20,71 @@ const optionsField = [
 const searchData = ref<{
   field: string
   value: string
-  keyword?: string
-  description?: string
 }>({
   field: 'title',
   value: '',
-  keyword: '',
-  description: '',
 })
 const submitSearchData = ref<{
-  AND: {
-    field?: string
-    value?: string
-  }[]
+  AND: { field: string; value: string }[]
   OR: { field: string; value: string }[]
 }>({
   AND: [],
   OR: [],
 })
 
-function clearSearchData() {
-  searchData.value = {
-    field: 'title',
-    value: '',
-    keyword: '',
-    description: '',
-  }
-  submitSearchData.value = {
-    AND: [],
-    OR: [],
-  }
-  advSearchComp.value?.clearAdvData()
-  isAdvSearchCall.value = false
-  isSearch.value = false
-}
-
 async function searchSubmit() {
-  submitSearchData.value = {
-    AND: [],
-    OR: [],
-  }
-  if (searchData.value.field && searchData.value) {
-    submitSearchData.value?.AND.push({
+  if (searchData.value.value.trim() !== '') {
+    submitSearchData.value = { AND: [], OR: [] }
+
+    submitSearchData.value.AND.push({
       field: searchData.value.field,
       value: searchData.value.value,
     })
-    if (searchData.value.keyword) {
-      submitSearchData.value?.AND.push({
-        field: 'keyword',
-        value: searchData.value.keyword,
-      })
-    }
-    if (searchData.value.description) {
-      submitSearchData.value?.AND.push({
-        field: 'description',
-        value: searchData.value.description,
-      })
-    }
-  }
 
-  if (isAdvSearchCall.value) {
-    if (
-      advSearchComp.value?.advSearchData &&
-      advSearchComp.value.advSearchData.length > 0
-    ) {
-      advSearchComp.value?.advSearchData.forEach(
-        (d: { field: string; value: string; op: string }) => {
-          if (d.field && d.value) {
-            if (d.op === 'AND') {
-              submitSearchData.value.AND.push({
-                field: d.field,
-                value: d.value,
-              })
-            } else if (d.op === 'OR') {
-              submitSearchData.value.OR.push({ field: d.field, value: d.value })
-            }
-          }
+    if (isAdvSearchCall.value && advSearchComp.value) {
+      const advField = advSearchComp.value.advSearchDataField
+      const advRow = advSearchComp.value.advSearchDataRow
+
+      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 })
         }
-      )
+      })
+      if (advField.keyword.trim() !== '') {
+        submitSearchData.value.AND.push({
+          field: 'keyword',
+          value: advField.keyword,
+        })
+      }
+      if (advField.description.trim() !== '') {
+        submitSearchData.value.AND.push({
+          field: 'description',
+          value: advField.description,
+        })
+      }
+    }
+
+    try {
+      loaderStore.show()
+      const res = await axios.post<EhrFile[]>(
+        `${import.meta.env.VITE_API_ENDPOINT}/search`,
+        submitSearchData.value
+      )
+      getFoundFile(res.data)
+      isSearch.value = true
+    } catch (error) {
+      console.error('Error during the request', error)
+    } finally {
+      loaderStore.hide()
     }
-  }
-  try {
-    loaderStore.show()
-    isAdvSearchCall.value = true
-    const res = await axios.post<EhrFile[]>(
-      `${import.meta.env.VITE_API_ENDPOINT}/search`,
-      submitSearchData.value
-    )
-    getFoundFile(res.data)
-    isSearch.value = true
-  } catch (error) {
-    console.error('Error during the request', error)
-  } finally {
-    loaderStore.hide()
   }
 }
 </script>
 
 <template>
-  <div class="q-py-lg q-px-md bg-grey-1">
-    <div class="row items-center q-gutter-md">
+  <div class="q-pa-md bg-grey-1">
+    <div class="row items-center q-col-gutter-md">
       <div class="col-12 col-md-3">
         <q-select
           dense
@@ -139,47 +104,36 @@ async function searchSubmit() {
           v-model="searchData.value"
           placeholder="เอกสาร"
           @keydown.enter.prevent="searchSubmit"
-        />
-      </div>
-      <div v-if="isAdvSearchCall === false">
-        <q-btn
-          class="col-12 col-md-2"
-          color="primary"
-          label="ค้นหา"
-          icon="mdi-magnify"
-          @click="searchSubmit"
-        />
+        >
+          <template v-slot:append>
+            <q-icon
+              name="close"
+              @click="() => (searchData.value = '')"
+              class="cursor-pointer"
+            />
+          </template>
+        </q-input>
       </div>
     </div>
 
-    <div
-      v-if="isAdvSearchCall"
-      class="row items-center justify-between q-gutter-y-md q-mt-xs"
-    >
-      <div>
-        <advanced-search
-          ref="advSearchComp"
-          :searchSubmit="searchSubmit"
-          :submit-search-data="submitSearchData"
-          v-model:field="searchData.field"
-          v-model:value="searchData.value"
-          v-model:keyword="searchData.keyword"
-          v-model:description="searchData.description"
-        />
-      </div>
-      <div class="q-gutter-x-md">
-        <q-btn
-          color="primary"
-          label="ค้นหา"
-          icon="mdi-magnify"
-          @click="searchSubmit"
-        />
-        <q-btn
-          color="orange-12"
-          label="ล้างข้อมูล"
-          icon="close"
-          @click="clearSearchData"
-        />
+    <div class="column">
+      <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"
+          />
+        </div>
+        <div v-if="isAdvSearchCall === false">
+          <q-btn
+            style="width: 150px"
+            color="primary"
+            label="ค้นหา"
+            icon="mdi-magnify"
+            @click="searchSubmit"
+          />
+        </div>
       </div>
     </div>
   </div>