hrms-edm/Services/client/src/modules/01_user/components/SearchBar.vue

<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import axiosClient from '@/services/HttpService'

import type { EhrFile } from '@/stores/tree-data'
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())
const { getFoundFile } = useSearchDataStore()
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
  value: string
}>({
  field: 'title',
  value: '',
})
const submitSearchData = ref<{
  AND: { field: string; value: string }[]
  OR: { field: string; value: string }[]
}>({
  AND: [],
  OR: [],
})
const props = defineProps<{
  mode: 'admin' | 'user'
}>()

async function searchSubmit() {
  if (searchData.value.value.trim() !== '') {
    submitSearchData.value = { AND: [], OR: [] }
    if (props.mode === 'admin') {
      optionsField.forEach((option) => {
        submitSearchData.value.OR.push({
          field: option.value,
          value: searchData.value.value,
        })
      })
    } 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,
          })
        }
      }
    }

    try {
      loaderStore.show()
      const res = await axiosClient.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="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>
</template>