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

<script setup lang="ts">
import { ref } from 'vue'

const isAdvncSearchClick = ref<boolean>(false)
const optionsField = [
  { label: 'ชื่อเรื่อง (title)', value: 'title' },
  { label: 'คำสำคัญ (keyword)', value: 'keyword' },
]
const optionsOp = [
  { label: 'และ', value: 'AND' },
  { label: 'หรือ', value: 'OR' },
]
const advSearchData = ref<
  {
    op: 'AND' | 'OR'
    field: 'title' | 'keyword'
    value: string
  }[]
>([])
const props = defineProps<{
  field: string
  value: string
  keyword?: string
  description?: string
  searchSubmit: Function
  submitSearchData: {
    AND: {
      field?: string
      value?: string
    }[]
    OR: {
      field: string
      value: string
    }[]
  }
}>()

defineExpose({
  clearAdvData,
  advSearchData,
})

defineEmits([
  'update:field',
  'update:value',
  'update:keyword',
  'update:description',
])

function addSearchData() {
  advSearchData.value.push({
    op: 'AND',
    field: 'title',
    value: '',
  })
}

function clearAdvData() {
  advSearchData.value = []
}
</script>

<template>
  <div>
    <q-btn
      outline
      color="primary"
      icon="mdi-tools"
      label="ค้นหาขั้นสูง"
      @click="() => (isAdvncSearchClick = true)"
    />
  </div>

  <q-dialog v-model="isAdvncSearchClick">
    <q-card style="width: 1000px; max-width: 80vw">
      <q-toolbar class="bg-grey-1 q-py-sm q-px-lg">
        <q-toolbar-title>
          <span class="text-weight-bold">ค้นหาขั้นสูง</span>
        </q-toolbar-title>
        <q-btn flat round dense icon="close" v-close-popup color="red" />
      </q-toolbar>
      <q-separator />

      <div class="col">
        <q-card-section class="row q-mt-sm">
          <div class="col">
            <div class="row q-col-gutter-md q-mb-md items-center">
              <div class="col-12 col-md-3">
                <q-select
                  dense
                  outlined
                  emit-value
                  map-options
                  :options="optionsField"
                  :model-value="props.field"
                  @update:model-value="(value) => $emit('update:field', value)"
                />
              </div>
              <div class="col-12 col-md-8">
                <q-input
                  dense
                  outlined
                  placeholder="เอกสาร"
                  :model-value="props.value"
                  @update:model-value="(value) => $emit('update:value', value)"
                />
              </div>
              <div class="col-1">
                <q-btn
                  dense
                  color="teal"
                  icon="mdi-plus"
                  v-if="advSearchData.length === 0"
                  @click="addSearchData"
                />
              </div>
            </div>

            <div
              class="row q-col-gutter-md q-mb-md items-center"
              v-for="(_, index) in advSearchData"
            >
              <div class="col-4 col-md-2">
                <q-select
                  dense
                  outlined
                  emit-value
                  map-options
                  v-model="advSearchData[index].op"
                  :options="optionsOp"
                />
              </div>
              <div class="col-8 col-md-3">
                <q-select
                  dense
                  outlined
                  emit-value
                  map-options
                  v-model="advSearchData[index].field"
                  :options="optionsField"
                />
              </div>
              <div class="col-12 col-md-6">
                <q-input
                  dense
                  outlined
                  v-model="advSearchData[index].value"
                  placeholder="เอกสาร"
                />
              </div>
              <div class="col-1">
                <q-btn
                  dense
                  color="teal"
                  icon="mdi-plus"
                  v-if="index === advSearchData.length - 1"
                  @click="addSearchData"
                />
                <q-btn
                  dense
                  flat
                  icon="mdi-minus"
                  color="red"
                  v-if="index === advSearchData.length - 1"
                  @click="() => advSearchData.pop()"
                />
              </div>
            </div>
          </div>
        </q-card-section>

        <q-card-section class="row q-mb-md">
          <div class="col">
            <span>อื่น ๆ</span>
            <q-separator class="q-mb-lg" />
            <div class="row q-col-gutter-md">
              <div class="col-12 col-md-3 q-gutter-y-sm">
                <span class="text-weight-bold">คำสำคัญ</span>
                <q-input
                  dense
                  outlined
                  placeholder="กรอกคำสำคัญ"
                  :model-value="props.keyword"
                  @update:model-value="
                    (value) => $emit('update:keyword', value)
                  "
                />
              </div>
              <div class="col-12 col-md-4 q-gutter-y-sm">
                <span class="text-weight-bold">รายละเอียดของเอกสาร</span>
                <q-input
                  dense
                  outlined
                  placeholder="กรอกรายละเอียด"
                  :model-value="props.description"
                  @update:model-value="
                    (value) => $emit('update:description', value)
                  "
                />
              </div>
            </div>
          </div>
        </q-card-section>
        <q-separator />

        <q-toolbar class="row justify-end">
          <div class="q-py-md">
            <q-btn
              color="primary"
              label="ค้นหา"
              icon="mdi-magnify"
              v-close-popup
              @click="() => props.searchSubmit()"
            />
          </div>
        </q-toolbar>
      </div>
    </q-card>
  </q-dialog>
</template>