hrms-mgt/src/stores/mixin.ts

import { defineStore } from "pinia";
import moment from "moment";
import CustomComponent from "@/components/CustomDialog.vue";
import { Loading, QSpinnerCube } from "quasar";

export const useCounterMixin = defineStore("mixin", () => {
  /**
   * ฟังก์ชันกลาง
   */

  const calAge = (
    srcDate: Date,
    birthCal: Date = new Date(),
    eng: boolean = false
  ) => {
    const year = eng ? "years" : "ปี";
    const month = eng ? "months" : "เดือน";
    const day = eng ? "days" : "วัน";

    if (srcDate == null) {
      return `0 ${year} 0 ${month} 0 ${day}`;
    }

    const toDay = birthCal;
    const birth = new Date(srcDate);

    const yearNow = toDay.getFullYear();
    const monthNow = toDay.getMonth();
    const dateNow = toDay.getDate();

    const yearDob = birth.getFullYear();
    const monthDob = birth.getMonth();
    const dateDob = birth.getDate();

    const lastYear = 12;
    const subtractDate: Object = moment().subtract(1, "months").endOf("month");

    const lastMonths = new Date(subtractDate.toString()).getDate();

    let yearAge = yearNow - yearDob;
    let monthAge = 0;
    let dateAge = 0;

    if (monthNow >= monthDob) {
      monthAge = monthNow - monthDob;
    } else {
      yearAge--;
      monthAge = lastYear + monthNow - monthDob;
    }

    if (dateNow >= dateDob) {
      dateAge = dateNow - dateDob;
    } else {
      monthAge--;
      dateAge = lastMonths + dateNow - dateDob;

      if (monthAge < 0) {
        monthAge = 11;
        yearAge--;
      }
    }

    const age = {
      years: yearAge,
      months: monthAge,
      days: dateAge,
    };

    return `${yearAge} ${year} ${monthAge} ${month} ${dateAge} ${day}`;
  };

  function date2Thai(
    srcDate: Date,
    isFullMonth: boolean = false,
    isTime: boolean = false
  ) {
    if (srcDate == null) {
      return null;
      `
    `;
    }
    const date = new Date(srcDate);
    const isValidDate = Boolean(+date);
    if (!isValidDate) return srcDate.toString();
    if (isValidDate && date.getFullYear() < 1000) return srcDate.toString();
    const fullMonthThai = [
      "มกราคม",
      "กุมภาพันธ์",
      "มีนาคม",
      "เมษายน",
      "พฤษภาคม",
      "มิถุนายน",
      "กรกฎาคม",
      "สิงหาคม",
      "กันยายน",
      "ตุลาคม",
      "พฤศจิกายน",
      "ธันวาคม",
    ];
    const abbrMonthThai = [
      "ม.ค.",
      "ก.พ.",
      "มี.ค.",
      "เม.ย.",
      "พ.ค.",
      "มิ.ย.",
      "ก.ค.",
      "ส.ค.",
      "ก.ย.",
      "ต.ค.",
      "พ.ย.",
      "ธ.ค.",
    ];
    let dstYear = 0;
    if (date.getFullYear() > 2500) {
      dstYear = date.getFullYear();
    } else {
      dstYear = date.getFullYear() + 543;
    }
    let dstMonth = "";
    if (isFullMonth) {
      dstMonth = fullMonthThai[date.getMonth()];
    } else {
      dstMonth = abbrMonthThai[date.getMonth()];
    }
    let dstTime = "";
    if (isTime) {
      const H = date.getHours().toString().padStart(2, "0");
      const M = date.getMinutes().toString().padStart(2, "0");
      // const S = date.getSeconds().toString().padStart(2, "0")
      // dstTime = " " + H + ":" + M + ":" + S + " น."
      dstTime = " " + H + ":" + M + " น.";
    }
    return (
      date.getDate().toString().padStart(2, "0") +
      " " +
      dstMonth +
      " " +
      dstYear +
      dstTime
    );
  }

  function dateMonth2Thai(srcDate: Date, isFullMonth = false, isTime = false) {
    if (!srcDate) return srcDate;
    const date = new Date(srcDate);
    const isValidDate = Boolean(+date);
    if (!isValidDate) return srcDate;
    if (isValidDate && date.getFullYear() < 1000) return srcDate;
    const fullMonthThai = [
      "มกราคม",
      "กุมภาพันธ์",
      "มีนาคม",
      "เมษายน",
      "พฤษภาคม",
      "มิถุนายน",
      "กรกฎาคม",
      "สิงหาคม",
      "กันยายน",
      "ตุลาคม",
      "พฤศจิกายน",
      "ธันวาคม",
    ];
    const abbrMonthThai = [
      "ม.ค.",
      "ก.พ.",
      "มี.ค.",
      "เม.ย.",
      "พ.ค.",
      "มิ.ย.",
      "ก.ค.",
      "ส.ค.",
      "ก.ย.",
      "ต.ค.",
      "พ.ย.",
      "ธ.ค.",
    ];
    let dstYear = 0;
    if (date.getFullYear() > 2500) {
      dstYear = date.getFullYear();
    } else {
      dstYear = date.getFullYear() + 543;
    }
    let dstMonth = "";
    if (isFullMonth) {
      dstMonth = fullMonthThai[date.getMonth()];
    } else {
      dstMonth = abbrMonthThai[date.getMonth()];
    }
    let dstTime = "";
    if (isTime) {
      const H = date.getHours().toString().padStart(2, "0");
      const M = date.getMinutes().toString().padStart(2, "0");
      // const S = date.getSeconds().toString().length === 1 ? "0" + date.getSeconds() : date.getSeconds()
      // dstTime = " " + H + ":" + M + ":" + S + " น."
      dstTime = " " + H + ":" + M + " น.";
    }
    return date.getDate().toString().padStart(2, "0") + " " + dstMonth;
  }

  function monthYear2Thai(month: number, year: number, isFullMonth = false) {
    const date = new Date(`${year}-${month + 1}-1`);
    const fullMonthThai = [
      "มกราคม",
      "กุมภาพันธ์",
      "มีนาคม",
      "เมษายน",
      "พฤษภาคม",
      "มิถุนายน",
      "กรกฎาคม",
      "สิงหาคม",
      "กันยายน",
      "ตุลาคม",
      "พฤศจิกายน",
      "ธันวาคม",
    ];
    const abbrMonthThai = [
      "ม.ค.",
      "ก.พ.",
      "มี.ค.",
      "เม.ย.",
      "พ.ค.",
      "มิ.ย.",
      "ก.ค.",
      "ส.ค.",
      "ก.ย.",
      "ต.ค.",
      "พ.ย.",
      "ธ.ค.",
    ];
    let dstYear = 0;
    if (date.getFullYear() > 2500) {
      dstYear = date.getFullYear();
    } else {
      dstYear = date.getFullYear() + 543;
    }
    let dstMonth = "";
    if (isFullMonth) {
      dstMonth = fullMonthThai[date.getMonth()];
    } else {
      dstMonth = abbrMonthThai[date.getMonth()];
    }
    return dstMonth + " " + dstYear;
  }

  function dateToISO(date: Date) {
    return (
      date.getFullYear() +
      "-" +
      appendLeadingZeroes(date.getMonth() + 1) +
      "-" +
      appendLeadingZeroes(date.getDate())
    );
  }

  function appendLeadingZeroes(n: Number) {
    if (n <= 9) return "0" + n;
    return n;
  }

  function textToPhone(n: string) {
    const p = n.substr(0, 3) + "-" + n.substr(3, 3) + "-" + n.substr(6, 4);
    return p;
  }

  function textToFax(n: string) {
    const p = n.substr(0, 2) + "-" + n.substr(2, 3) + "-" + n.substr(5, 4);
    return p;
  }

  const success = (q: any, val: string) => {
    // useQuasar ไม่สามารถใช้นอกไฟล์ .vue
    if (val !== "") {
      return q.notify({
        message: val,
        color: "primary",
        icon: "mdi-information",
        position: "bottom-right",
        multiLine: true,
        timeout: 1000,
        badgeColor: "positive",
        classes: "my-notif-class",
      });
    }
  };

  function notify(q: any, val: string) {
    if (val !== "") {
      q.notify({
        color: "teal-10",
        message: val,
        icon: "mdi-information",
        position: "bottom-right",
        multiLine: true,
        timeout: 7000,
        actions: [{ label: "ปิด", color: "white", handler: () => {} }],
      });
    }
  }
  function notifyError(q: any, val: string) {
    if (val !== "") {
      q.notify({
        color: "negative",
        message: val,
        icon: "mdi-alert-circle",
        position: "top",
        multiLine: true,
        timeout: 12000,
        actions: [{ label: "ปิด", color: "white", handler: () => {} }],
      });
    }
  }

  const messageError = (q: any, e: any = "") => {
    // q.dialog.hide();
    console.log("e.response", e.response);
    if (e.response !== undefined) {
      if (e.response.data.status !== undefined) {
        if (e.response.data.status == 401) {
          //invalid_token
          q.dialog({
            component: CustomComponent,
            componentProps: {
              title: `พบข้อผิดพลาด`,
              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
              icon: "warning",
              color: "red",
              onlycancel: true,
            },
          });
        } else {
          q.dialog({
            component: CustomComponent,
            componentProps: {
              title: `พบข้อผิดพลาด`,
              message: `${e.response.data.message}`,
              icon: "warning",
              color: "red",
              onlycancel: true,
            },
          });
        }
      } else {
        if (e.response.status == 401) {
          //invalid_token
          q.dialog({
            component: CustomComponent,
            componentProps: {
              title: `พบข้อผิดพลาด`,
              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
              icon: "warning",
              color: "red",
              onlycancel: true,
            },
          });
        } else {
          q.dialog({
            component: CustomComponent,
            componentProps: {
              title: `พบข้อผิดพลาด`,
              message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
              icon: "warning",
              color: "red",
              onlycancel: true,
            },
          });
        }
      }
    } else {
      q.dialog({
        component: CustomComponent,
        componentProps: {
          title: `พบข้อผิดพลาด`,
          message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
          icon: "warning",
          color: "red",
          onlycancel: true,
        },
      });
    }
  };

  const dialogMessage = (
    // ไม่เอาใส่ undefined
    q: any,
    title: string | undefined,
    message: string | undefined,
    icon: string | undefined,
    textOk: string | undefined,
    color: string | undefined,
    ok?: Function | undefined,
    cancel?: Function | undefined,
    onlycancel: Boolean = false
  ) => {
    q.dialog({
      component: CustomComponent,
      componentProps: {
        title: title,
        message: message,
        icon: icon,
        color: color,
        textOk: textOk,
        onlycancel: onlycancel,
      },
    })
      .onOk(() => {
        if (ok != undefined) ok();
      })
      .onCancel(() => {
        if (cancel != undefined) cancel();
      });
  };

  //*** Dialog ***//
  const dialogConfirm = (
    q: any,
    ok?: Function,
    title?: string, // ถ้ามี cancel action ใส่เป็น null
    desc?: string, // ถ้ามี cancel action ใส่เป็น null
    cancel?: Function
  ) => {
    q.dialog({
      component: CustomComponent,
      componentProps: {
        title: title && title != null ? title : "ยืนยันการบันทึก",
        message:
          desc && desc != null
            ? desc
            : "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
        icon: "info",
        color: "public",
        textOk: "ตกลง",
        onlycancel: false,
      },
    })
      .onOk(() => {
        if (ok) ok();
      })
      .onCancel(() => {
        if (cancel) cancel();
      });
  };

  const dialogRemove = (q: any, ok?: Function, cancel?: Function) => {
    q.dialog({
      component: CustomComponent,
      componentProps: {
        title: "ยืนยันการลบข้อมูล",
        message: "ต้องการยืนยันการลบข้อมูลนี้ใช่หรือไม่?",
        icon: "delete",
        color: "red",
        textOk: "ตกลง",
        onlycancel: false,
      },
    })
      .onOk(() => {
        if (ok) ok();
      })
      .onCancel(() => {
        if (cancel) cancel();
      });
  };

  const dialogMessageNotify = (
    q: any,
    desc?: string, // ถ้ามี cancel action ใส่เป็น null
    cancel?: Function
  ) => {
    q.dialog({
      component: CustomComponent,
      componentProps: {
        title: "ข้อความแจ้งเตือน",
        message: desc && desc != null ? desc : "กรุณากรอกข้อมูลให้ครบ",
        icon: "warning",
        color: "orange",
        textOk: "ตกลง",
        onlycancel: true,
      },
    }).onCancel(() => {
      if (cancel) cancel();
    });
  };
  //*** END Dialog ***//

  const showLoader = () => {
    Loading.show({
      spinner: QSpinnerCube,
      spinnerSize: 140,
      spinnerColor: "primary",
      backgroundColor: "white",
    });
  };

  const hideLoader = () => {
    Loading.hide();
  };

  function modalDelete(
    q: any,
    title: string,
    message: string,
    ok: Function,
    cancel?: Function
  ) {
    q.dialog({
      title: `<span class="text-red">${title}</span>`,
      message: `<span class="text-black">${message}</span>`,
      cancel: {
        flat: true,
        color: "grey-14",
      },
      ok: {
        color: "red-6",
      },
      focus: "none",
      persistent: true,
      html: true,
    })
      .onOk(() => {
        ok();
      })
      .onCancel(() => {
        if (cancel != undefined) cancel();
      })
      .onDismiss(() => {});
  }

  function modalConfirm(
    q: any,
    title: string,
    message: string,
    ok: Function,
    cancel?: Function
  ) {
    q.dialog({
      title: `<span class="text-primary">${title}</span>`,
      message: `<span class="text-black">${message}</span>`,
      cancel: {
        flat: true,
        color: "grey",
      },
      ok: {
        color: "primary",
      },
      focus: "none",
      persistent: true,
      html: true,
    })
      .onOk(() => {
        ok();
      })
      .onCancel(() => {
        if (cancel != undefined) cancel();
      })
      .onDismiss(() => {});
  }

  function modalWarning(q: any, title: string, message: string, ok?: Function) {
    // q.dialog({
    //   title: `<span class="text-red">${title}</span>`,
    //   message: `<span class="text-black">${message}</span>`,
    //   ok: {
    //     push: true,
    //     color: "primary",
    //   },
    //   focus: "none",
    //   persistent: true,
    //   html: true,
    // })
    //   .onOk(() => {
    //     if (ok != undefined) ok();
    //   })
    //   .onCancel(() => {})
    //   .onDismiss(() => {});

    q.dialog({
      component: CustomComponent,
      componentProps: {
        title: title,
        message: message,
        icon: "warning",
        color: "warning",
        onlycancel: true,
      },
    });
  }

  function modalError(q: any, title: string, message: string, ok?: Function) {
    // q.dialog({
    //   title: `<span class="text-red">${title}</span>`,
    //   message: `<span class="text-black">${message}</span>`,
    //   ok: {
    //     push: true,
    //     color: "primary",
    //   },
    //   focus: "none",
    //   persistent: true,
    //   html: true,
    // })
    //   .onOk(() => {
    //     if (ok != undefined) ok();
    //   })
    //   .onCancel(() => {})
    //   .onDismiss(() => {});

    q.dialog({
      component: CustomComponent,
      componentProps: {
        title: title,
        message: message,
        icon: "warning",
        color: "red",
        onlycancel: true,
      },
    });
  }

  const dateText = (val: Date) => {
    if (val != null) {
      return date2Thai(val);
    } else {
      return "-";
    }
  };

  /**
   * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
   * @param val ช่วงวันที่
   */
  const dateThaiRange = (val: [Date, Date]) => {
    if (val === null) {
      return "";
    } else if (date2Thai(val[0]) === date2Thai(val[1])) {
      return `${date2Thai(val[0])}`;
    } else {
      return `${date2Thai(val[0])} - ${date2Thai(val[1])}`;
    }
  };

  const weekThai = (val: Number) => {
    switch (val) {
      case 0:
        return "วันอาทิตย์";
      case 1:
        return "วันจันทร์";
      case 2:
        return "วันอังคาร";
      case 3:
        return "วันพุธ";
      case 4:
        return "วันพฤหัสบดี";
      case 5:
        return "วันศุกร์";
      case 6:
        return "วันเสาร์";
      default:
        return "-";
    }
  };

  const genColor15 = (val: number) => {
    val = val % 15;
    switch (val) {
      case 1:
        return "pink";
      case 2:
        return "purple";
      case 3:
        return "deep-purple";
      case 4:
        return "indigo";
      case 5:
        return "blue";
      case 6:
        return "light-blue";
      case 7:
        return "cyan";
      case 8:
        return "teal";
      case 9:
        return "green";
      case 10:
        return "light-green";
      case 11:
        return "amber";
      case 12:
        return "orange";
      case 13:
        return "deep-orange";
      case 14:
        return "brown";
      case 0:
        return "blue-grey";
      default:
        return "";
    }
  };

  const typeCategoryExam = (val: string) => {
    switch (val) {
      case "hygiene":
        return "สำนักอนามัย";
      case "physician":
        return "สำนักการแพทย์";
      case "city":
        return "สำนักผังเมือง";
      case "culture":
        return "สำนักวัฒนธรรม กีฬา และการท่องเที่ยว";
      default:
        return "-";
    }
  };

  const typeRetire = (val: string) => {
    switch (val) {
      case "retire":
        return "เกษียณอายุราชการ";
      case "resign":
        return "ลาออก";
      case "transfer":
        return "ให้โอน";
      case "death":
        return "ถึงแก่กรรม";
      case "layoff":
        return "ให้ออก";
      case "discharge":
        return "ปลดออก";
      case "dismiss":
        return "ไล่ออก";
      case "other":
        return "อื่นๆ";
      default:
        return "-";
    }
  };

  const typeChangeName = (val: string) => {
    switch (val) {
      case "firstName":
        return "เปลี่ยนชื่อ";
      case "lastName":
        return "เปลี่ยนนามสกุล";
      case "all":
        return "เปลี่ยนชื่อ-นามสกุล";
      default:
        return "-";
    }
  };

  const statusLeave = (val: string) => {
    switch (val) {
      case "waitting":
        return "รออนุมัติ";
      case "reject":
        return "ไม่ผ่านการอนุมัติ";
      case "approve":
        return "ผ่านการอนุมัติ";
      case "cancel":
        return "ยกเลิก";
      default:
        return "-";
    }
  };

  return {
    calAge,
    date2Thai,
    dateToISO,
    notify,
    notifyError,
    dateText,
    monthYear2Thai,
    dateMonth2Thai,
    success,
    weekThai,
    genColor15,
    typeCategoryExam,
    textToPhone,
    textToFax,
    dateThaiRange,
    modalDelete,
    modalConfirm,
    modalError,
    dialogMessage,
    messageError,
    showLoader,
    hideLoader,
    typeRetire,
    typeChangeName,
    statusLeave,
    modalWarning,
    // common dialog
    dialogConfirm,
    dialogRemove,
    dialogMessageNotify
  };
});