hrms-user/src/modules/05_leave/componenst/ListCalendar.vue

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue";

import type {
  FormDelete,
  FormDeleteRef,
} from "@/modules/05_leave/interface/response/leave";
import Table from "@/modules/05_leave/componenst/Table.vue";

import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";

const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
  mixin;
const LeaveData = useLeaveStore();

const $q = useQuasar();

const year = ref<number>(new Date().getFullYear());
const type = ref<string>("00000000-0000-0000-0000-000000000000");
const status = ref<string>("ALL");
const filter = ref<string>("");

/** pagination*/
const maxPage = ref<number>(1);
const page = ref<number>(1);
const pageSize = ref<number>(10);

async function fetchDataTable() {
  showLoader();
  const body = {
    year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
    type: type.value, //*Id ประเภทการลา
    status: status.value, //*สถานะการของลา
    page: page.value.toString(), //*หน้า
    pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
    keyword: filter.value, //keyword ค้นหา
  };
  await http
    .post(config.API.leaveTableList(), body)
    .then((res) => {
      const data = res.data.result.data;
      LeaveData.fetchListLeave(data);
      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

const leaveType = ref<any>();
async function fectOptionType() {
  await http
    .get(config.API.leaveType())
    .then(async (res) => {
      leaveType.value = res.data.result;
      LeaveData.fetchLeaveType(res.data.result);
    })
    .catch((err) => {
      messageError($q, err);
    });
}

const modal = ref<boolean>(false);
const leaveId = ref<string>("");
const leaveStatus = ref<string>("");

/**
 * ฟังก์ชั่นเปิด model
 * @param text
 */
const onClickView = async (id: string, status: string) => {
  modal.value = true;
  leaveId.value = id;
  leaveStatus.value = status;
};
async function onClickClose() {
  modal.value = false;
}

async function updateFilterTable(y: number, t: string, s: string, k: string) {
  if (t && s) {
    year.value = await y;
    type.value = await t;
    status.value = await s;
    filter.value = await k;
    await fetchDataTable();
  }
}

async function updatePagination(p: number, ps: number) {
  (page.value = await p), (pageSize.value = await ps);
  await fetchDataTable();
}

/**
 * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
 */
onMounted(async () => {
  await fetchDataTable();
  await fectOptionType();
});
</script>
<template>
  <Table
    :style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
    :rows="LeaveData.rows"
    :columns="LeaveData.columns"
    :visible-columns="LeaveData.visibleColumns"
    v-model:inputfilter="filter"
    v-model:inputvisible="LeaveData.visibleColumns"
    :inputShow="true"
    :grid="$q.screen.gt.xs ? false : true"
    @update:filter="updateFilterTable"
    @update:Pagination="updatePagination"
    :maxPage="maxPage"
    :pageSize="pageSize"
    :leaveType="leaveType"
  >
    <template #columns="props">
      <q-tr :props="props" class="cursor-pointer">
        <q-td
          key="no"
          :props="props"
          @click="onClickView(props.row.id, props.row.status)"
        >
          {{ (page - 1) * pageSize + props.rowIndex + 1 }}
        </q-td>
        <q-td
          key="leaveTypeName"
          :props="props"
          @click="onClickView(props.row.id, props.row.status)"
        >
          {{ props.row.leaveTypeName }}
        </q-td>
        <q-td
          key="dateSendLeave"
          :props="props"
          @click="onClickView(props.row.id, props.row.status)"
        >
          {{ props.row.dateSendLeave }}
        </q-td>

        <q-td key="status" :props="props">
          <div class="col-12 row items-center">
            <div @click="onClickView(props.row.id, props.row.status)">
              <q-icon
                v-if="props.row.status == 'APPROVE'"
                size="10px"
                color="light-green"
                name="mdi-circle"
                class="q-mr-sm"
              />
              <q-icon
                v-else-if="props.row.status == 'REJECT'"
                size="10px"
                color="red-6"
                name="mdi-circle"
                class="q-mr-sm"
              />
              <q-icon
                v-else-if="props.row.status == 'PENDING'"
                size="10px"
                color="light-blue-14"
                name="mdi-circle"
                class="q-mr-sm"
              />
              <q-icon
                v-else-if="props.row.status == 'NEW'"
                size="10px"
                color="orange"
                name="mdi-circle"
                class="q-mr-sm"
              />
              <q-icon
                v-if="props.row.status == 'DELETE'"
                size="10px"
                color="grey-10"
                name="mdi-circle"
                class="q-mr-sm"
              />

              <span class="q-pr-md">{{ props.row.statusConvert }}</span>
            </div>
            <q-space />
            <q-btn
              v-if="props.row.status == 'NEW'"
              label="ขอยกเลิก"
              @click="onClickView(props.row.id, 'CANCEL')"
              size="13px"
              class="q-px-sm"
              outline
              dense
              color="orange"
            />
          </div>
        </q-td>
      </q-tr>
    </template>
  </Table>

  <DialogDetail
    :modal="modal"
    :leaveId="leaveId"
    :leaveStatus="leaveStatus"
    :onClickClose="onClickClose"
    :leaveType="leaveType"
    :fetchDataTable="fetchDataTable"
  />
</template>