From 2ca33553663044061a3bd775bcddc22936cca3b4 Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Wed, 6 Dec 2023 16:41:02 +0700
Subject: [PATCH] fix: show clear icon only when search is input

---
 .../01_user/components/AdvancedSearch.vue     | 23 ++++++++++++++-----
 .../modules/01_user/components/SearchBar.vue  | 14 +++++++++++
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/Services/client/src/modules/01_user/components/AdvancedSearch.vue b/Services/client/src/modules/01_user/components/AdvancedSearch.vue
index abf184c..a01a384 100644
--- a/Services/client/src/modules/01_user/components/AdvancedSearch.vue
+++ b/Services/client/src/modules/01_user/components/AdvancedSearch.vue
@@ -96,7 +96,7 @@ function clearAdvSearchData() {
           <div class="row items-center" style="width: 45px; height: 45px">
             <q-btn
               dense
-              color="teal"
+              color="teal-5"
               icon="mdi-plus"
               v-if="index === advSearchDataRow.length - 1"
               @click="addAdvSearchData"
@@ -135,6 +135,7 @@ function clearAdvSearchData() {
               @keydown.enter.prevent="searchSubmit()"
               ><template v-slot:append>
                 <q-icon
+                  v-if="item.value"
                   name="close"
                   @click="() => (item.value = '')"
                   class="cursor-pointer"
@@ -172,24 +173,34 @@ function clearAdvSearchData() {
               outlined
               dense
               v-model="advSearchDataField.keyword"
-              placeholder="คำสำคัญ"
               use-input
               use-chips
               multiple
               hide-dropdown-icon
               input-debounce="0"
-              new-value-mode="add"
-            />
+              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
-              placeholder="รายละเอียด"
               @keydown.enter.prevent="searchSubmit()"
               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 824bfde..e8bef10 100644
--- a/Services/client/src/modules/01_user/components/SearchBar.vue
+++ b/Services/client/src/modules/01_user/components/SearchBar.vue
@@ -8,8 +8,10 @@ import { useSearchDataStore } from '@/stores/searched-data'
 import { useLoader } from '@/stores/loader'
 
 import AdvancedSearch from '@/modules/01_user/components/AdvancedSearch.vue'
+import { useFileInfoStore } from '@/stores/file-info-data'
 
 const loaderStore = useLoader()
+const { isFilePreview } = storeToRefs(useFileInfoStore())
 const {
   isSearch,
   isAdvSearchCall,
@@ -37,6 +39,7 @@ const props = defineProps<{
 }>()
 
 async function searchSubmit() {
+  isFilePreview.value = false
   if (searchData.value.value.trim() !== '') {
     submitSearchData.value = { AND: [], OR: [] }
     if (props.mode === 'admin') {
@@ -46,6 +49,14 @@ async function searchSubmit() {
           value: searchData.value.value,
         })
       })
+      submitSearchData.value.OR.push({
+        field: 'fileName',
+        value: searchData.value.value,
+      })
+      submitSearchData.value.OR.push({
+        field: 'fileType',
+        value: searchData.value.value,
+      })
     } else {
       submitSearchData.value.OR.push({
         field: searchData.value.field,
@@ -85,6 +96,8 @@ async function searchSubmit() {
         `${import.meta.env.VITE_API_ENDPOINT}/search`,
         submitSearchData.value,
       )
+      console.log(submitSearchData)
+
       getFoundFile(res.data)
       isSearch.value = true
     } catch (error) {
@@ -153,6 +166,7 @@ watch(
           >
             <template v-slot:append>
               <q-icon
+                v-if="searchData.value"
                 name="close"
                 @click="() => ((searchData.value = ''), (isSearch = false))"
                 class="cursor-pointer"