hrms-mgt/src/modules/09_leave/components/05_Leave/ToolBarLeave.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";

import type {
  DateFilter,
  QuerySting,
} from "@/modules/09_leave/interface/request/leave";
import type { DataOption } from "@/modules/09_leave/interface/index/Main";

/** importStores*/
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";

const querySting = defineModel<QuerySting>("querySting", { required: true });

const $q = useQuasar();
const leaveStore = useLeavelistDataStore();

const props = defineProps({
  dataToobar: Array,
  getSearch: Function,
  getList: Function,
});

/** Option*/
const roleMainOp = ref<DataOption[]>([
  { id: "OFFICER", name: "ข้าราชการ กทม. สามัญ" },
  { id: "EMPLOYEE", name: "ลูกจ้างประจำ กทม." },
]);
const roleOp = ref<DataOption[]>();

const optionTypeMain = ref<DataOption[]>([]);
const optionType = ref<DataOption[]>([]);
const optionStatus = ref<DataOption[]>([
  {
    id: "ALL",
    name: "ทั้งหมด",
  },
  {
    id: "NEW",
    name: "ใหม่",
  },
  {
    id: "PENDING",
    name: "กำลังดำเนินการ",
  },
  {
    id: "APPROVE",
    name: "อนุมัติ",
  },
  {
    id: "REJECT",
    name: "ไม่อนุมัติ",
  },
]);
const optionStatus2 = ref<DataOption[]>([
  {
    id: "ALL",
    name: "ทั้งหมด",
  },
  {
    id: "NEW",
    name: "ใหม่",
  },
  {
    id: "APPROVE",
    name: "อนุมัติ",
  },
  {
    id: "REJECT",
    name: "ไม่อนุมัติ",
  },
]);

const optionStatusMain = ref<DataOption[]>(
  leaveStore.tabMenu == "1" ? optionStatus.value : optionStatus2.value
);

/**
 * ฟังก์ชั่นค้นหาข้อมูลของ Option Filter
 * @param val คำที่ค้นหา
 * @param update Function
 * @param name ประเภทของ Select
 */
function filterOption(val: string, update: any, name: string) {
  update(() => {
    const needle = val.toLowerCase();
    if (name === "type") {
      optionType.value = optionTypeMain.value.filter(
        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
      );
    } else if (name === "status") {
      optionStatus.value = optionStatusMain.value.filter(
        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
      );
    }
  });
}

/**
 * function ค้นหาข้อมูลใน option
 * @param val คำค้นหา
 * @param update function
 */
function filterOptionFn(val: string, update: Function) {
  update(() => {
    const data = roleMainOp.value;
    roleOp.value = data.filter((e: any) => e.name.search(val) !== -1);
  });
}

watch(
  async () => props.dataToobar,
  () => {
    if (props.dataToobar) {
      const data = props.dataToobar;
      leaveStore.leaveType = data;
      optionTypeMain.value = [
        { id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
      ];

      const option = data.map((e: any) => ({
        id: e.id,
        name: e.name,
      }));

      optionTypeMain.value.push(...option);
      optionType.value = optionTypeMain.value;
    }
  }
);
</script>

<template>
  <div class="row col-12 q-col-gutter-sm q-mb-sm">
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-select
        emit-value
        map-options
        outlined
        dense
        option-value="id"
        option-label="name"
        label="ประเภทตำแหน่ง"
        use-input
        :model-value="
          querySting.profileType == 'ALL' ? 'ทั้งหมด' : querySting.profileType
        "
        hide-selected
        fill-input
        :options="roleOp"
        @update:model-value="(value:any)=>(querySting.profileType = value,props.getSearch?.())"
        @filter="(inputValue:string,
                    doneFn:Function) => filterOptionFn(inputValue,doneFn)"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template>
        <template v-if="querySting.profileType !== 'ALL'" v-slot:append>
          <q-icon
            name="cancel"
            @click.stop.prevent="
              (querySting.profileType = 'ALL'), props.getSearch?.()
            "
            class="cursor-pointer"
          />
        </template>
      </q-select>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-1">
      <datepicker
        menu-class-name="modalfix"
        v-model="querySting.year"
        class="col-2"
        :locale="'th'"
        autoApply
        year-picker
        :enableTimePicker="false"
        @update:model-value="props.getSearch?.()"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            dense
            outlined
            :model-value="Number(querySting.year) + 543"
            :label="`${'ปีงบประมาณ'}`"
          >
            <template v-slot:prepend>
              <q-icon
                name="event"
                class="cursor-pointer"
                style="color: var(--q-primary)"
              >
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-select
        for="selectType"
        emit-value
        map-options
        outlined
        hide-selected
        fill-input
        dense
        v-model="querySting.type"
        :options="optionType"
        option-value="id"
        option-label="name"
        label="ประเภทการลา"
        @update:model-value="props.getSearch?.()"
        use-input
        @filter="
            (inputValue:any, doneFn:Function) =>
            filterOption(inputValue, doneFn, 'type')
          "
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template>
        <template
          v-if="querySting.type !== '00000000-0000-0000-0000-000000000000'"
          v-slot:append
        >
          <q-icon
            name="cancel"
            @click.stop.prevent="
              (optionType = optionTypeMain),
                (querySting.type = '00000000-0000-0000-0000-000000000000'),
                props.getSearch?.()
            "
            class="cursor-pointer"
          />
        </template>
      </q-select>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-select
        for="selectStatus"
        emit-value
        map-options
        outlined
        hide-selected
        fill-input
        dense
        v-model="querySting.status"
        :options="optionStatus"
        option-value="id"
        option-label="name"
        label="สถานะ"
        @update:model-value="props.getSearch?.()"
        use-input
        @filter="
            (inputValue:any, doneFn:Function) =>
            filterOption(inputValue, doneFn, 'status')
          "
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
          </q-item>
        </template>
        <template v-if="querySting.status !== 'ALL'" v-slot:append>
          <q-icon
            name="cancel"
            @click.stop.prevent="
              (optionStatus = optionStatusMain),
                (querySting.status = 'ALL'),
                props.getSearch?.()
            "
            class="cursor-pointer"
          />
        </template>
      </q-select>
    </div>
    <q-space />
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-input
        for="filterTable"
        dense
        outlined
        v-model="querySting.keyword"
        label="ค้นหา"
        @keydown.enter.prevent="props.getSearch?.()"
      >
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-1">
      <q-select
        for="visibleColumns"
        v-model="leaveStore.visibleColumns"
        multiple
        outlined
        dense
        options-dense
        :display-value="$q.lang.table.columns"
        emit-value
        map-options
        :options="leaveStore.columns"
        option-value="name"
      />
    </div>
  </div>
</template>