hrms-mgt/src/modules/09_leave/components/2_Leave/ToolBar.vue

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

import type { DateFilter } from "@/modules/09_leave/interface/request/leave";
import type {
  DataOption,
  DataOption2,
} from "@/modules/09_leave/interface/index/Main";
/** importStores*/
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";

const leaveStore = useLeavelistDataStore();

const emit = defineEmits(["update:querySting"]);

/** formFilter*/
const filter = reactive<DateFilter>({
  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
  type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
  status: "ALL", //*สถานะการของลา
  keyword: "", //keyword ค้นหา
});

/**
 * function update ข้อมูลการค้นหา  (QuerySting)
 * @param newPage หน้า
 * @param pageSize ข้อมูลต่อแถว
 * @param dateFilter ข้อมูล Filter
 */
function updateQuerySting(
  newPage: number,
  pageSize: number,
  dateFilter: DateFilter
) {
  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
  emit("update:querySting", newPage, pageSize, dateFilter);
}

/** function ค้นหาข้อมูลใน Table*/
async function filterListLeave() {
  filter.status && filter.type && (await updateQuerySting(1, 10, filter));
}

/** Option*/
const optionYear = ref<DataOption2[]>([
  {
    id: 0,
    name: "ทั้งหมด",
  },
  {
    id: 2023,
    name: "2566",
  },
]);
const optionType = ref<DataOption[]>([
  {
    id: "00000000-0000-0000-0000-000000000000",
    name: "ทั้งหมด",
  },
]);
const optionStatus = ref<DataOption[]>([
  {
    id: "ALL",
    name: "ทั้งหมด",
  },
  {
    id: "NEW",
    name: "ใหม่",
  },
  {
    id: "PENDING ",
    name: "กำลังดำเนินการ",
  },
  {
    id: "APPROVE ",
    name: "อนุมัติ",
  },
  {
    id: "REJECT ",
    name: "ไม่อนุมัติ",
  },
]);
const optionTypeMain = ref<DataOption[]>(optionType.value);
const optionStatusMain = ref<DataOption[]>(optionStatus.value);

async function fetchOption() {
  console.log("loadOption  รอ API");
}

/**
 * ฟังก์ชั่นค้นหาข้อมูลของ 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
      );
    }
  });
}

onMounted(async () => {
  await fetchOption();
});
</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
        for="selectYear"
        emit-value
        map-options
        outlined
        dense
        v-model="filter.year"
        :options="optionYear"
        option-value="id"
        option-label="name"
        label="ปีงบประมาณ"
        @update:model-value="filterListLeave"
      />
    </div>
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-select
        for="selectType"
        emit-value
        map-options
        outlined
        dense
        v-model="filter.type"
        :options="optionType"
        option-value="id"
        option-label="name"
        label="ประเภทการลา"
        @update:model-value="filterListLeave"
        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></q-select
      >
    </div>
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-select
        for="selectStatus"
        emit-value
        map-options
        outlined
        dense
        v-model="filter.status"
        :options="optionStatus"
        option-value="id"
        option-label="name"
        label="สถานะ"
        @update:model-value="filterListLeave"
        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></q-select
      >
    </div>
    <q-space />
    <div class="col-xs-12 col-sm-3 col-md-2">
      <q-input
        for="filterTable"
        dense
        outlined
        v-model="filter.keyword"
        label="ค้นหา"
        @keydown.enter.prevent="filterListLeave"
      />
    </div>
    <div class="col-xs-12 col-sm-3 col-md-2">
      <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"
        options-cover
      />
    </div>
  </div>
</template>