refactor: admin search, opt categ & conten, add id

Services/client/src/components/PageLayout.vue

@@ -58,19 +58,7 @@ onMounted(getCabinet)
         <h5 class="q-my-none" v-if="mode === 'admin'">จัดเก็บเอกสาร</h5>
         <h5 class="q-my-none" v-else>สืบค้นเอกสาร</h5>
       </div>
-      <div class="col-3" v-if="mode === 'admin'">
+      <search-bar :mode="mode" v-if="mode === 'admin'" />
-        <q-input
-          rounded
-          outlined
-          dense
-          label="ค้นหา"
-          bg-color="white"
-          v-model="inputSearch"
-          id="inputSearch"
-        >
-          <template v-slot:append><q-icon name="search" /></template>
-        </q-input>
-      </div>
     </div>
   </section>
   <section
@@ -98,7 +86,7 @@ onMounted(getCabinet)
         class="bg-white rounded-borders shadow-5 relative"
         v-if="isFilePreview === false"
       >
-        <search-bar v-if="mode === 'user'" />
+        <search-bar :mode="mode" v-if="mode === 'user'" />
         <div class="bg-white q-pa-md">
           <div class="row items-center justify-between">
             <span class="text-body1">

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

@@ -9,6 +9,8 @@ const { isAdvSearchCall } = storeToRefs(useSearchDataStore())
 const optionsField = [
   { label: 'ชื่อเรื่อง (title)', value: 'title' },
   { label: 'คำสำคัญ (keyword)', value: 'keyword' },
+  { label: 'หมวดหมู่ (category)', value: 'category' },
+  { label: 'เนื้อหาในไฟล์ (content)', value: 'attachment.content' },
 ]
 const optionsOp = [
   { label: 'และ', value: 'AND' },
@@ -126,6 +128,7 @@ function clearAdvSearchData() {
           </div>
           <div class="col-4 col-md-2">
             <q-select
+              id="advSearchOp"
               dense
               outlined
               emit-value
@@ -136,6 +139,7 @@ function clearAdvSearchData() {
           </div>
           <div class="col-grow col-md-3">
             <q-select
+              id="advSearchField"
               dense
               outlined
               emit-value
@@ -146,6 +150,7 @@ function clearAdvSearchData() {
           </div>
           <div class="col-grow">
             <q-input
+              id="advSearchValue"
               dense
               outlined
               v-model="item.value"
@@ -186,18 +191,20 @@ function clearAdvSearchData() {
         <div class="row q-col-gutter-md q-pb-md">
           <div class="col-12 col-md-5">
             <q-input
+              id="advSearchKeyword"
               dense
               outlined
-              placeholder="คำสำคัญ:"
+              placeholder="คำสำคัญ"
               @keydown.enter.prevent="searchSubmit()"
               v-model="advSearchDataField.keyword"
             />
           </div>
           <div class="col-12 col-md-grow">
             <q-input
+              id="advSearchDes"
               dense
               outlined
-              placeholder="รายละเอียด:"
+              placeholder="รายละเอียด"
               @keydown.enter.prevent="searchSubmit()"
               v-model="advSearchDataField.description"
             />

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

@@ -16,6 +16,8 @@ const advSearchComp = ref<InstanceType<typeof AdvancedSearch>>()
 const optionsField = [
   { label: 'ชื่อเรื่อง (title)', value: 'title' },
   { label: 'คำสำคัญ (keyword)', value: 'keyword' },
+  { label: 'หมวดหมู่ (category)', value: 'category' },
+  { label: 'เนื้อหาในไฟล์ (content)', value: 'attachment.content' },
 ]
 const searchData = ref<{
   field: string
@@ -31,37 +33,48 @@ const submitSearchData = ref<{
   AND: [],
   OR: [],
 })
+const props = defineProps<{
+  mode: 'admin' | 'user'
+}>()
 
 async function searchSubmit() {
   if (searchData.value.value.trim() !== '') {
     submitSearchData.value = { AND: [], OR: [] }
-
+    if (props.mode === 'admin') {
-    submitSearchData.value.OR.push({
+      optionsField.forEach((option) => {
-      field: searchData.value.field,
+        submitSearchData.value.OR.push({
-      value: searchData.value.value,
+          field: option.value,
-    })
+          value: searchData.value.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() !== '') {
+    } else {
-        submitSearchData.value.AND.push({
+      submitSearchData.value.OR.push({
-          field: 'keyword',
+        field: searchData.value.field,
-          value: advField.keyword,
+        value: searchData.value.value,
-        })
+      })
-      }
+
-      if (advField.description.trim() !== '') {
+      if (isAdvSearchCall.value && advSearchComp.value) {
-        submitSearchData.value.AND.push({
+        const advField = advSearchComp.value.advSearchDataField
-          field: 'description',
+        const advRow = advSearchComp.value.advSearchDataRow
-          value: advField.description,
+
+        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,
+          })
+        }
       }
     }
 
@@ -69,11 +82,8 @@ async function searchSubmit() {
       loaderStore.show()
       const res = await axiosClient.post<EhrFile[]>(
         `${import.meta.env.VITE_API_ENDPOINT}/search`,
-        submitSearchData.value
+        submitSearchData.value,
       )
-      console.log(submitSearchData.value);
-      console.log(res.data);
-      
       getFoundFile(res.data)
       isSearch.value = true
     } catch (error) {
@@ -86,59 +96,78 @@ async function searchSubmit() {
 </script>
 
 <template>
-  <div class="q-pa-md bg-grey-1">
+  <div class="col-3" v-if="mode === 'admin'">
-    <div class="row items-center q-col-gutter-md">
+    <q-input
-      <div class="col-12 col-md-3">
+      rounded
-        <q-select
+      outlined
-          dense
+      dense
-          outlined
+      label="ค้นหา"
-          emit-value
+      bg-color="white"
-          map-options
+      v-model="searchData.value"
-          class="bg-white"
+      id="inputSearch"
-          v-model="searchData.field"
+      @keydown.enter.prevent="searchSubmit"
-          :options="optionsField"
+    >
-        />
+      <template v-slot:append><q-icon name="search" /></template>
-      </div>
+    </q-input>
-      <div class="col-12 col-md-grow">
+  </div>
-        <q-input
+
-          class="bg-white"
+  <div v-if="mode === 'user'">
-          dense
+    <div class="q-pa-md bg-grey-1">
-          outlined
+      <div class="row items-center q-col-gutter-md">
-          v-model="searchData.value"
+        <div class="col-12 col-md-3">
-          placeholder="เอกสาร"
+          <q-select
-          @keydown.enter.prevent="searchSubmit"
+            id="searchField"
-        >
+            dense
-          <template v-slot:append>
+            outlined
-            <q-icon
+            emit-value
-              name="close"
+            map-options
-              @click="() => (searchData.value = '', isSearch = false)"
+            class="bg-white"
-              class="cursor-pointer"
+            v-model="searchData.field"
-            />
+            :options="optionsField"
-          </template>
+          />
-        </q-input>
+        </div>
-      </div>
+        <div class="col-12 col-md-grow">
-    </div>
+          <q-input
-
+            id="searchValue"
-    <div class="column">
+            class="bg-white"
-      <div class="row items-center justify-between q-gutter-y-md q-pt-sm">
+            dense
-        <div class="column col-grow">
+            outlined
-          <advanced-search
+            v-model="searchData.value"
-            ref="advSearchComp"
+            placeholder="เอกสาร"
-            :searchSubmit="searchSubmit"
+            @keydown.enter.prevent="searchSubmit"
-            :submit-search-data="submitSearchData"
+          >
-          />
+            <template v-slot:append>
-        </div>
+              <q-icon
-        <div v-if="isAdvSearchCall === false">
+                name="close"
-          <q-btn
+                @click="() => ((searchData.value = ''), (isSearch = false))"
-            style="width: 150px"
+                class="cursor-pointer"
-            color="primary"
+              />
-            label="ค้นหา"
+            </template>
-            icon="mdi-magnify"
+          </q-input>
-            @click="searchSubmit"
+        </div>
-          />
+      </div>
-        </div>
+
-      </div>
+      <div class="column">
-    </div>
+        <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>
+    <q-separator />
   </div>
-  <q-separator />
 </template>