hrms-user/src/stores/data.ts

import { ref, computed, reactive } from "vue";
import { defineStore } from "pinia";

import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
import { useCounterMixin } from "./mixin";
import type { ProfileData, DataProfile } from "@/interface/Main";

export const useDataStore = defineStore("dataMain", () => {
  const isLoadingMenu = ref<boolean>(false);
  const isLoadingProfile = ref<boolean>(false);
  const dataProfile = ref<any>();
  const storeRegistry = useRegistryInFormationStore();
  const $q = useQuasar();
  const mixin = useCounterMixin();
  const { messageError, showLoader, hideLoader, findPosMasterNo, findOrgName } =
    mixin;
  // ref() คือการประกาศ state เหมือน vuex
  const profileId = ref<string>("");
  const dataprofilePosition = ref<DataProfile | undefined>(undefined);
  const formData = reactive<ProfileData>({
    profileId: "",
    rank: "",
    prefix: "",
    firstName: "",
    lastName: "",
    position: "",
    posExecutiveName: "",
    posTypeName: "",
    posLevelName: "",
    salary: null,
    birthDate: "",
    keycloakId: "",
    posNo: "",
    org: "",
    dateStart: "",
    dateRetireLaw: "",
  });
  const count = ref<number>(0);
  const loader = ref<boolean>(false);
  const isProbation = ref<boolean>(false);
  const profileImg = ref<string>("");
  const expandedReport2 = ref<string[]>([]);
  const selectedReport2 = ref<string>("");
  const officerType = ref<string>("");
  const officerLink = ref<string>("");

  const expandedRegister = ref<string[]>([]);
  const selectedRegister = ref<string>("");
  // computed() คือการประกาศ getters เหมือน vuex
  const doubleCount = computed(() => count.value * 2);
  // function() คือการประกาศ actions เหมือน vuex
  const increment = () => {
    count.value++;
  };
  //  tabData เป็น paramert ใช้เปรียนเทียบ tab ให้ active
  const tabData = ref<string>("");
  /**
   * active tab หน้า รายละเอียดทะเบียนประวัติ
   * @param val string เป็นชื่อของ ตัวนั้นๆ
   */
  const changeTab = (val: string) => {
    tabData.value = val;
  };

  /**
   * active tab หน้า รายละเอียดทะเบียนประวัติ
   * @param val boolean false = close , true = open
   */
  const loaderPage = (val: boolean) => {
    loader.value = val;
  };

  /**
   * เปิด tree จัดการบัญชี2
   * @param val string เป็นชื่อของ ตัวนั้นๆ
   */
  const changeTreeReport2 = (e: string[], s: string) => {
    expandedReport2.value = e;
    selectedReport2.value = s;
  };

  /**
   * เปิด tree ทะเบียนประวัติ
   * @param val string เป็นชื่อของ ตัวนั้นๆ
   */
  const changeTreeRegister = (e: string[], s: string) => {
    expandedRegister.value = e;
    selectedRegister.value = s;
  };

  async function convertEmType(val: string) {
    switch (val) {
      case "OFFICER":
        return "";
      case "PERM":
      case "TEMP":
        return "-employee";
      default:
        return "";
    }
  }

  async function getData(dataPerson: any) {
    isLoadingProfile.value = true;
    const data = await dataPerson;
    dataprofilePosition.value = data;
    profileId.value = data.profileId;
    isProbation.value = data.isProbation;
    formData.profileId = data.profileId;
    formData.rank = data.rank;
    formData.prefix = data.prefix;
    formData.firstName = data.firstName;
    formData.lastName = data.lastName;
    formData.position = data.position;
    formData.salary = data.salary;
    formData.keycloakId = data.keycloak;
    formData.citizenId = data.citizenId;
    formData.birthDate = data.birthDate;
    formData.posTypeName = data.posTypeName;
    formData.posExecutiveName = data.posExecutiveName;
    formData.posLevelName =
      data.profileType === "EMPLOYEE"
        ? data.posTypeShortName
          ? `${data.posTypeShortName} ${data.posLevelName}`
          : `${data.posLevelName}`
        : data.posLevelName;
    formData.dateStart = data.dateStart;
    formData.dateRetireLaw = data.dateRetireLaw;
    formData.posNo = findPosMasterNo(data);
    formData.org = findOrgName(data);
    storeRegistry.profileId = data.profileId;
    storeRegistry.citizenId = data.citizenId;
    isLoadingProfile.value = false;
  }

  async function getProFileType() {
    isLoadingMenu.value = true;
    if (officerType.value == "") {
      await http
        .get(config.API.proFileType)
        .then(async (res) => {
          const data = await res.data.result;
          officerType.value = data;
        })
        .catch((e) => {
          messageError($q, e);
        });
    }

    isLoadingMenu.value = false;
    return convertEmType(officerType.value);
  }

  return {
    count,
    doubleCount,
    increment,
    tabData,
    changeTab,
    loader,
    loaderPage,
    expandedReport2,
    selectedReport2,
    changeTreeReport2,
    expandedRegister,
    selectedRegister,
    changeTreeRegister,
    isProbation,
    officerType,
    convertEmType,
    getData,
    profileImg,
    formData,
    officerLink,
    getProFileType,
    dataProfile,
    profileId,
    dataprofilePosition,
    isLoadingMenu,
    isLoadingProfile,
  };
});

// การเขียนแบบ composition api
// ตัวอย่างการใช้งาน use...Store() ตามชื่อที่ตั้ง

// import { useDataStore } from '@/stores/data'

//storeToRefs ใช้กรณีที่เราจะแปลงค่าเป็น state ใน หน้านั้น

// import { storeToRefs } from 'pinia'

// export default {
//     setup() {
//       const store = useDataStore()

// ***********************************
// พยายามไม่ให้ ชื่อ เหมือนกับ props ** ตัวอย่างปกติ
// const { count, doubleCount, increment } = store
// ***********************************

// ตัวอย่าง แปลงค่า store เป็น state หรือ ref
// const { name, doubleCount } = storeToRefs(store)
// ถ้าเป็น function เรียกแยกอีกทีก็ได้
// const { increment } = store
// ***********************************

//return {
// count,
// doubleCount,
// increment
//       }
//     },
//   }