Merge branch 'phatt' into development

2023-12-02 17:09:41 +07:00 · 2023-12-02 17:09:41 +07:00 · 9e42d9d574
commit 9e42d9d574
parent eca5430f27 48dc167804
4 changed files with 203 additions and 104 deletions
--- a/Services/client/src/components/FileSearched.vue
+++ b/Services/client/src/components/FileSearched.vue
@ -4,13 +4,19 @@ import { useSearchDataStore } from '@/stores/searched-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
 import FileIcon from '@/components/FileIcon.vue'
 import type { QTableProps } from 'quasar'
+import { onMounted, ref, watch } from 'vue'

 defineProps<{
  viewMode: 'view_list' | 'view_module'
 }>()

 const { foundFile } = storeToRefs(useSearchDataStore())
-const { getFileInfo, getSize, getType, getFileNameFormat } = useFileInfoStore()
+const { getFileInfo, getSize, getType } = useFileInfoStore()
+const keywordList = ref<string[]>([])
+const categoryList = ref<string[]>([])
+const selectKeyword = ref<string[]>([])
+const selectCategory = ref<string[]>([])
+const filterFoundFile = ref<any>()
 const columns: QTableProps['columns'] = [
  {
    name: 'name',
@ -46,12 +52,81 @@ const columns: QTableProps['columns'] = [
    style: 'width: 20px',
  },
 ]
+
+function filterSearch() {
+  function updateList() {
+    keywordList.value = []
+    categoryList.value = []
+    foundFile.value.forEach((obj) => {
+      obj.keyword.forEach((keyword) => {
+        if (!keywordList.value.includes(keyword)) {
+          keywordList.value.push(keyword)
+        }
+      })
+      obj.category.forEach((category) => {
+        if (!categoryList.value.includes(category)) {
+          categoryList.value.push(category)
+        }
+      })
+    })
+  }
+
+  function filterArray() {
+    if (!(selectKeyword.value.length || selectCategory.value.length)) {
+      filterFoundFile.value = foundFile.value
+    } else {
+      filterFoundFile.value = foundFile.value.filter(
+        (entry) =>
+          entry.keyword.some((kw) => selectKeyword.value.includes(kw)) ||
+          entry.category.some((kw) => selectCategory.value.includes(kw)),
+      )
+    }
+  }
+  updateList()
+  filterArray()
+}
+
+watch(
+  [
+    () => foundFile.value,
+    () => selectKeyword.value,
+    () => selectCategory.value,
+  ],
+  filterSearch,
+)
+
+onMounted(() => {
+  filterSearch()
+})
 </script>

 <template>
+  <div class="row grid q-pt-md q-gutter-sm">
+    <q-select
+      outlined
+      dense
+      multiple
+      use-chips
+      v-model="selectKeyword"
+      :options="keywordList"
+      style="width: 100%"
+      label="คำสำคัญ"
+    />
+    <q-select
+      outlined
+      dense
+      multiple
+      use-chips
+      v-model="selectCategory"
+      :options="categoryList"
+      style="width: 100%"
+      label="กลุ่ม/หมวดหมู่"
+    />
+  </div>
+
  <div v-if="viewMode === 'view_list' && foundFile.length > 0">
    <div class="grid q-mt-md">
-      <div v-for="(value, index) in foundFile" :key="value.title">
+      <div v-for="(value, index) in filterFoundFile" :key="value.title">
        <div
          :style="{
            position: 'relative',
@ -63,7 +138,7 @@ const columns: QTableProps['columns'] = [
            maxWidth: '100%',
          }"
          class="box"
-          @click="() => getFileInfo(foundFile[index])"
+          @click="() => getFileInfo(filterFoundFile[index])"
        >
          <div class="q-px-md flex items-center justify-center">
            <file-icon
@ -75,7 +150,7 @@ const columns: QTableProps['columns'] = [
            class="text-overflow-handle block q-px-md text-center"
            style="max-width: 100%"
          >
-            {{ getFileNameFormat(value.fileName) }}
+            {{ value.title }}
          </div>
        </div>
      </div>
@ -86,7 +161,7 @@ const columns: QTableProps['columns'] = [
    <q-table
      flat
      bordered
-      :rows="foundFile"
+      :rows="filterFoundFile"
      :columns="columns"
      row-key="name"
      hide-bottom
--- a/Services/client/src/components/PageLayout.vue
+++ b/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'">
-        <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>
+      <search-bar :mode="mode" v-if="mode === 'admin'" />
    </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">
--- a/Services/client/src/modules/01_user/components/AdvancedSearch.vue
+++ b/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"
            />
--- a/Services/client/src/modules/01_user/components/SearchBar.vue
+++ b/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: [] }
-
-    submitSearchData.value.OR.push({
-      field: searchData.value.field,
-      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 (props.mode === 'admin') {
+      optionsField.forEach((option) => {
+        submitSearchData.value.OR.push({
+          field: option.value,
+          value: searchData.value.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,
+    } else {
+      submitSearchData.value.OR.push({
+        field: searchData.value.field,
+        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() !== '') {
+          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="row items-center q-col-gutter-md">
-      <div class="col-12 col-md-3">
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          class="bg-white"
-          v-model="searchData.field"
-          :options="optionsField"
-        />
-      </div>
-      <div class="col-12 col-md-grow">
-        <q-input
-          class="bg-white"
-          dense
-          outlined
-          v-model="searchData.value"
-          placeholder="เอกสาร"
-          @keydown.enter.prevent="searchSubmit"
-        >
-          <template v-slot:append>
-            <q-icon
-              name="close"
-              @click="() => (searchData.value = '', isSearch = false)"
-              class="cursor-pointer"
-            />
-          </template>
-        </q-input>
-      </div>
-    </div>
-
-    <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 class="col-3" v-if="mode === 'admin'">
+    <q-input
+      rounded
+      outlined
+      dense
+      label="ค้นหา"
+      bg-color="white"
+      v-model="searchData.value"
+      id="inputSearch"
+      @keydown.enter.prevent="searchSubmit"
+    >
+      <template v-slot:append><q-icon name="search" /></template>
+    </q-input>
+  </div>
+
+  <div v-if="mode === 'user'">
+    <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
+            id="searchField"
+            dense
+            outlined
+            emit-value
+            map-options
+            class="bg-white"
+            v-model="searchData.field"
+            :options="optionsField"
+          />
+        </div>
+        <div class="col-12 col-md-grow">
+          <q-input
+            id="searchValue"
+            class="bg-white"
+            dense
+            outlined
+            v-model="searchData.value"
+            placeholder="เอกสาร"
+            @keydown.enter.prevent="searchSubmit"
+          >
+            <template v-slot:append>
+              <q-icon
+                name="close"
+                @click="() => ((searchData.value = ''), (isSearch = false))"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+        </div>
+      </div>
+
+      <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>
+    <q-separator />
  </div>
-  <q-separator />
 </template>