From 94d1af70ea71e036198fff653ddee31f0151f301 Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Wed, 6 Dec 2023 09:10:44 +0700
Subject: [PATCH] refactor: use-chips in advSearch keyword

---
 .../01_user/components/AdvancedSearch.vue     | 45 +++++--------------
 1 file changed, 12 insertions(+), 33 deletions(-)

diff --git a/Services/client/src/modules/01_user/components/AdvancedSearch.vue b/Services/client/src/modules/01_user/components/AdvancedSearch.vue
index 3326f9e..abf184c 100644
--- a/Services/client/src/modules/01_user/components/AdvancedSearch.vue
+++ b/Services/client/src/modules/01_user/components/AdvancedSearch.vue
@@ -1,11 +1,11 @@
 divdivdivdivdivdiv
 <script setup lang="ts">
-import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 
 import { useSearchDataStore } from '@/stores/searched-data'
 
-const { isAdvSearchCall } = storeToRefs(useSearchDataStore())
+const { isAdvSearchCall, advSearchDataRow, advSearchDataField } =
+  storeToRefs(useSearchDataStore())
 const optionsField = [
   { label: 'ชื่อเรื่อง (title)', value: 'title' },
   { label: 'คำสำคัญ (keyword)', value: 'keyword' },
@@ -16,26 +16,6 @@ const optionsOp = [
   { label: 'และ', value: 'AND' },
   { label: 'หรือ', value: 'OR' },
 ]
-const advSearchDataRow = ref<
-  {
-    op: 'AND' | 'OR'
-    field: 'title' | 'keyword'
-    value: string
-  }[]
->([
-  {
-    op: 'AND',
-    field: 'title',
-    value: '',
-  },
-])
-const advSearchDataField = ref<{
-  keyword: string
-  description: string
-}>({
-  keyword: '',
-  description: '',
-})
 const props = defineProps<{
   searchSubmit: Function
   submitSearchData: {
@@ -50,11 +30,6 @@ const props = defineProps<{
   }
 }>()
 
-defineExpose({
-  advSearchDataRow,
-  advSearchDataField,
-})
-
 function addAdvSearchData() {
   advSearchDataRow.value.push({
     op: 'AND',
@@ -75,7 +50,7 @@ function clearAdvSearchData() {
     },
   ]
   advSearchDataField.value = {
-    keyword: '',
+    keyword: [],
     description: '',
   }
 }
@@ -193,13 +168,17 @@ function clearAdvSearchData() {
 
         <div class="row q-col-gutter-md q-pb-md">
           <div class="col-12 col-md-5">
-            <q-input
-              id="advSearchKeyword"
-              dense
+            <q-select
               outlined
-              placeholder="คำสำคัญ"
-              @keydown.enter.prevent="searchSubmit()"
+              dense
               v-model="advSearchDataField.keyword"
+              placeholder="คำสำคัญ"
+              use-input
+              use-chips
+              multiple
+              hide-dropdown-icon
+              input-debounce="0"
+              new-value-mode="add"
             />
           </div>
           <div class="col-12 col-md-grow">