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

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

/**importType*/
import type {
  QuerySting,
  DateFilter,
} from "@/modules/09_leave/interface/request/leave";

import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";
import CalendarView from "@/modules/09_leave/components/2_Leave/Calendar.vue";

/**importStroe*/
import { useCounterMixin } from "@/stores/mixin";
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";

const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const leaveStore = useLeavelistDataStore();

const { showLoader, hideLoader, messageError } = mixin;

const querySting = reactive<QuerySting>({
  year: leaveStore.filter.year, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
  type: leaveStore.filter.type, //*Id ประเภทการลา
  status: leaveStore.filter.status, //*สถานะการของลา
  page: 1, //*หน้า
  pageSize: 10, //*จำนวนแถวต่อหน้า
  keyword: leaveStore.filter.keyword, //keyword ค้นหา
});
const maxPage = ref<number>(1);
const totalList = ref<number>(0);

//** เรียกข้อมูลจาก API*/
async function fecthLeaveList() {
  querySting.status = await (querySting.status == null
    ? "ALL"
    : querySting.status);
  querySting.type = await (querySting.type == null
    ? "00000000-0000-0000-0000-000000000000"
    : querySting.type);

  if (querySting.status != null && querySting.type != null) {
    showLoader();
    await http
      .post(config.API.leaveList(), querySting)
      .then((res) => {
        const data = res.data.result;
        maxPage.value = Math.ceil(data.total / querySting.pageSize);
        totalList.value = data.total;
        leaveStore.fetchListLeave(data.data); /** ส่งข้อมูลไป stores*/
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  }
  // const data = APIDATA.data;
  // maxPage.value = Math.ceil(data.length / querySting.pageSize);
}

/**
 *
 * @param newPage หน้า
 * @param pageSize จำนวนต่อแถว
 * @param dateFilter ข้อมูลค้นหา
 */
async function updatePaging(
  newPage: number,
  pageSize: number,
  dateFilter: DateFilter
) {
  querySting.year = dateFilter ? dateFilter.year : querySting.year;
  querySting.type = dateFilter ? dateFilter.type : querySting.type;
  querySting.status = dateFilter ? dateFilter.status : querySting.status;
  querySting.page = newPage;
  querySting.pageSize = pageSize ? pageSize : querySting.pageSize;
  querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;

  await fecthLeaveList();
}

onMounted(async () => {
  await fecthLeaveList();
});

watch(
  () => leaveStore.tabView,
  async () => {
    leaveStore.tabView === "list" && (await fecthLeaveList());
  }
);
</script>
<template>
  <q-toolbar class="text-primary" style="padding: 0">
    <q-space />
    <q-btn
      name="list"
      round
      size="12px"
      flat
      icon="mdi-format-list-bulleted"
      @click="leaveStore.tabView = 'list'"
      :color="leaveStore.tabView == 'list' ? 'primary' : 'grey-6'"
      class="q-ml-sm"
    >
      <q-tooltip>รายการ</q-tooltip>
    </q-btn>
    <q-separator vertical inset />
    <q-tabs
      v-model="leaveStore.tabView"
      indicator-color="transparent"
      align="left"
      active-color="activetab"
      class="text-nativetab"
      inline-label
      dense
    >
      <q-btn
        name="calendar"
        round
        size="12px"
        flat
        icon="mdi-calendar-month"
        @click="leaveStore.tabView = 'calendar'"
        :color="leaveStore.tabView == 'calendar' ? 'primary' : 'grey-6'"
        class="q-mr-sm"
      >
        <q-tooltip>ปฏิทิน</q-tooltip>
      </q-btn>
    </q-tabs>
  </q-toolbar>
  <div v-if="leaveStore.tabView === 'list'">
    <ToolBar
      :rowsPerPage="querySting.pageSize"
      @update:querySting="updatePaging"
    />
    <TableList
      :page="querySting.page"
      :rowsPerPage="querySting.pageSize"
      :maxPage="maxPage"
      :totalList="totalList"
      @update:querySting="updatePaging"
    />
  </div>
  <div v-if="leaveStore.tabView === 'calendar'"><CalendarView /></div>
</template>

<style scoped></style>