hrms-mgt/src/modules/09_leave/components/1_Work/Tab1.vue

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

/** importType*/
import type { QTableProps } from "quasar";
import type {
  DataResTime,
  TableRows,
} from "@/modules/09_leave/interface/response/work";
import type { DataOption } from "@/modules/09_leave/interface/index/Main";

/** importComponents */
import ToolBar from "@/modules/09_leave/components/1_Work/ToolBar.vue";
import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";

/** importStores */
import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
/** useStore */
const mixin = useCounterMixin();
const workStore = useWorklistDataStore();
const { date2Thai, showLoader, hideLoader } = mixin;

const keyword = ref<string>("");
const page = ref<number>(1);
const rowsPerPage = ref<number>(2);
const maxPage = ref<number>(7);

/** ข้อมูลหัวตาราง*/
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fullName",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "fullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkInTime",
    align: "left",
    label: "เวลาเข้างาน",
    sortable: true,
    field: "checkInTime",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkInLocation",
    align: "left",
    label: "พิกัด",
    sortable: true,
    field: "checkInLocation",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkOutTime",
    align: "left",
    label: "เวลาออกงาน",
    sortable: true,
    field: "checkOutTime",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkOutLocation",
    align: "left",
    label: "พิกัด",
    sortable: true,
    field: "checkOutLocation",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkStatus",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "checkStatus",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const visibleColumns = ref<string[]>([
  "no",
  "fullName",
  "checkInTime",
  "checkInLocation",
  "checkOutTime",
  "checkOutLocation",
  "checkStatus",
]);
const rows = ref<TableRows[]>([]);
const optionStatusMain = ref<DataOption[]>([]);
const optionStatus = ref<DataOption[]>([]);
const filetStatus = ref<string>("");

async function fetchListTimeRecord() {
  showLoader();
  const listData: DataResTime[] = [
    // {
    //   id: "00000000-0000-0000-0000-000000000000",
    //   fullName: "นางอมร ใจดี",
    //   checkDate: new Date(),
    //   checkInTime: "08:30",
    //   checkInLocation: "สำนักงงาน",
    //   checkInLat: "18.7903",
    //   checkInLon: "99.0029",
    //   checkOutLocation: "สำนักงงาน",
    //   checkOutTime: "18:04",
    //   checkOutLat: "18.7903",
    //   checkOutLon: "99.0029",
    //   checkStatus: "normal",
    // },
    // {
    //   id: "00000000-0000-0000-0000-000000000000",
    //   fullName: "นางอมร ใจดี",
    //   checkDate: new Date(),
    //   checkInTime: "08:30",
    //   checkInLocation: "สำนักงงาน",
    //   checkInLat: "18.7903",
    //   checkInLon: "99.0029",
    //   checkOutLocation: "สำนักงงาน",
    //   checkOutTime: "18:04",
    //   checkOutLat: "18.7903",
    //   checkOutLon: "99.0029",
    //   checkStatus: "normal",
    // },
    // {
    //   id: "00000000-0000-0000-0000-000000000000",
    //   fullName: "นางอมร ใจดี",
    //   checkDate: new Date(),
    //   checkInTime: "08:30",
    //   checkInLocation: "สำนักงงาน",
    //   checkInLat: "18.7903",
    //   checkInLon: "99.0029",
    //   checkOutLocation: "สำนักงงาน",
    //   checkOutTime: "18:04",
    //   checkOutLat: "18.7903",
    //   checkOutLon: "99.0029",
    //   checkStatus: "normal",
    // },
  ];

  let datalist: TableRows[] = listData.map((e: DataResTime) => ({
    id: e.id,
    fullName: e.fullName,
    checkDate: e.checkDate && date2Thai(e.checkDate),
    checkInTime: e.checkInTime,
    checkInLocation: e.checkInLocation,
    checkInLat: e.checkInLat,
    checkInLon: e.checkInLon,
    checkOutLocation: e.checkOutLocation,
    checkOutTime: e.checkOutTime,
    checkOutLat: e.checkOutLat,
    checkOutLon: e.checkOutLon,
    checkStatus: e.checkStatus && workStore.convertSatatus(e.checkStatus),
  }));
  rows.value = datalist;
  fetchOption(datalist);
  hideLoader();
}

//
function fetchOption(data: TableRows[]) {
  const double_status = [...new Set(data.map((item: any) => item.checkStatus))];
  optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
  for (let i = 1; i <= double_status.length; i++) {
    const status = double_status[i - 1];
    if (typeof status === "string") {
      const listtype: DataOption = {
        id: status,
        name: status,
      };
      optionStatusMain.value.push(listtype);
      optionStatus.value = optionStatusMain.value;
    }
  }
}

/** Hook*/
onMounted(async () => {
  console.log("TAB1");
  workStore.columns = columns.value;
  workStore.visibleColumns = visibleColumns.value;
  await fetchListTimeRecord();
});

onUnmounted(() => {});
</script>
<template>
  <ToolBar :option="optionStatus" :filetStatus="filetStatus" />
  <TableList
    :rows="rows.length > 0 ? rows : []"
    :page="page"
    :rowsPerPage="rowsPerPage"
    :maxPage="maxPage"
  />
</template>

<style lang="sass" scoped></style>