hrms-mgt/src/modules/09_leave/stores/WorkTimeStore.ts

import { defineStore } from "pinia";
import { ref } from "vue";
import type { QTableProps } from "quasar";
import type { workingTimeDataRowType } from "@/modules/09_leave/interface/request/workTime";

export const useWorkTimeStore = defineStore("WorkTimeStore", () => {
  const rows = ref<workingTimeDataRowType[]>([]);

  const visibleColumns = ref<string[]>([
    "round",
    "morning",
    "morningEnd",
    "afternoon",
    "afternoonEnd",
    "reason",
    "status",
  ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง

  // หัวตาราง
  const columns = ref<QTableProps["columns"]>([
    {
      name: "round",
      align: "left",
      label: "รอบ",
      sortable: true,
      field: "round",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
    {
      name: "morning",
      align: "left",
      label: "รอบเช้า",
      sortable: true,
      field: "morning",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
      sort: (a: string, b: string) =>
        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
      name: "morningEnd",
      align: "left",
      label: "รอบออก",
      sortable: true,
      field: "morningEnd",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
      sort: (a: string, b: string) =>
        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
      name: "afternoon",
      align: "left",
      label: "รอบบ่าย",
      sortable: true,
      field: "afternoon",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
      sort: (a: string, b: string) =>
        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
      name: "afternoonEnd",
      align: "left",
      label: "รอบออก",
      sortable: true,
      field: "afternoonEnd",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
      sort: (a: string, b: string) =>
        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
      name: "reason",
      align: "left",
      label: "คำอธิบาย",
      sortable: true,
      field: "reason",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
      sort: (a: string, b: string) =>
        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
    },
    {
      name: "status",
      align: "center",
      label: "สถานะการใช้งาน",
      sortable: false,
      field: "status",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
  ]);
  function fecthList(data: workingTimeDataRowType[]) {
    let datalist: workingTimeDataRowType[] = data.map(
      (e: workingTimeDataRowType) => {
        return {
          round: `${e.morning}-${e.afternoonEnd}`,
          morning: e.morning,
          morningEnd: e.morningEnd,
          afternoon: e.afternoon,
          afternoonEnd: e.afternoonEnd,
          reason: e.reason === "" ? "-" : e.reason,
          status: e.status,
        };
      }
    );
    rows.value = datalist;
  }

  return {
    fecthList,
    rows,
    visibleColumns,
    columns,
  };
});