hrms-checkin/src/stores/mixin.ts

import { defineStore } from 'pinia'
import CustomComponent from '@/components/CustomDialog.vue'
import { Loading, QSpinnerCube } from 'quasar'
import { logout } from '@/plugins/auth'
import { format, utcToZonedTime } from 'date-fns-tz'

export const useCounterMixin = defineStore('mixin', () => {
  function date2Thai(srcDate: Date, isFullMonth = false, isTime = 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
    )
  }

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

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

  function covertDateObject(date: string) {
    if (date) {
      const dateParts = date.split('/')
      // ประกาศตัวแปรเพื่อเก็บค่าวันที่, เดือน, และ ปี
      const day = parseInt(dateParts[0], 10)
      const month = parseInt(dateParts[1], 10) - 1
      const year = parseInt(dateParts[2], 10) + 2500
      // สร้างอ็อบเจ็กต์ Date ด้วยค่าที่ได้
      const dateObject = new Date(year, month, day)
      return date2Thai(dateObject)
    }
  }

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

  const messageError = (q: any, e: any = '', msg: string = '') => {
    // q.dialog.hide();
    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,
            },
          }).onCancel(async () => {
            showLoader()
            await logout()
            setTimeout(() => {
              hideLoader()
            }, 1000)
          })
        } else {
          const message = e.response.data.result ?? e.response.data.message
          q.dialog({
            component: CustomComponent,
            componentProps: {
              title: `พบข้อผิดพลาด`,
              message: `${message}`,
              icon: 'warning',
              color: 'red',
              onlycancel: true,
            },
          })
        }
      } else {
        if (e.response.status == 401) {
          if (msg !== '') {
            q.dialog({
              component: CustomComponent,
              componentProps: {
                title: `พบข้อผิดพลาด`,
                message: msg,
                icon: 'warning',
                color: 'red',
                onlycancel: true,
              },
            }).onCancel(async () => {
              showLoader()
              await logout()
              setTimeout(() => {
                hideLoader()
              }, 1000)
            })
          } else {
            //invalid_token
            q.dialog({
              component: CustomComponent,
              componentProps: {
                title: `พบข้อผิดพลาด`,
                message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
                icon: 'warning',
                color: 'red',
                onlycancel: true,
              },
            }).onCancel(async () => {
              showLoader()
              await logout()
              setTimeout(() => {
                hideLoader()
              }, 1000)
            })
          }
        } else if (e.response.data.successful === false) {
          q.dialog({
            component: CustomComponent,
            componentProps: {
              title: `พบข้อผิดพลาด`,
              message: e.response.data.message,
              icon: 'warning',
              color: 'red',
              onlycancel: true,
            },
          })
        } else {
          q.dialog({
            component: CustomComponent,
            componentProps: {
              title: `พบข้อผิดพลาด`,
              message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
              icon: 'warning',
              color: 'red',
              onlycancel: true,
            },
          })
        }
      }
    } else {
      if (msg !== '') {
        return q.dialog({
          component: CustomComponent,
          componentProps: {
            title: `พบข้อผิดพลาด`,
            message: msg,
            icon: 'warning',
            color: 'red',
            onlycancel: true,
          },
        })
      }
      q.dialog({
        component: CustomComponent,
        componentProps: {
          title: `พบข้อผิดพลาด`,
          message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
          icon: 'warning',
          color: 'red',
          onlycancel: true,
        },
      })
    }
  }

  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 dialogRemove(
    q: any,
    ok?: () => void,
    title?: string, // ถ้ามี cancel action ใส่เป็น null
    desc?: string, // ถ้ามี cancel action ใส่เป็น null
    cancel?: () => void
  ) {
    q.dialog({
      component: CustomComponent,
      componentProps: {
        title: title && title != null ? title : 'ยืนยันการลบข้อมูล',
        message:
          desc && desc != null
            ? desc
            : 'ต้องการยืนยันการลบข้อมูลนี้ใช่หรือไม่?',
        icon: 'delete',
        color: 'red',
        textOk: 'ตกลง',
        onlycancel: false,
      },
    })
      .onOk(() => {
        if (ok) ok()
      })
      .onCancel(() => {
        if (cancel) cancel()
      })
  }

  function monthYear2Thai(month: number, year: number, isFullMonth = false) {
    if (
      month < 0 ||
      month > 11 ||
      !Number.isFinite(month) ||
      !Number.isFinite(year)
    )
      return ''
    const fullMonthThai = [
      'มกราคม',
      'กุมภาพันธ์',
      'มีนาคม',
      'เมษายน',
      'พฤษภาคม',
      'มิถุนายน',
      'กรกฎาคม',
      'สิงหาคม',
      'กันยายน',
      'ตุลาคม',
      'พฤศจิกายน',
      'ธันวาคม',
    ]
    const abbrMonthThai = [
      'ม.ค.',
      'ก.พ.',
      'มี.ค.',
      'เม.ย.',
      'พ.ค.',
      'มิ.ย.',
      'ก.ค.',
      'ส.ค.',
      'ก.ย.',
      'ต.ค.',
      'พ.ย.',
      'ธ.ค.',
    ]

    // assume year is in BE if > 2500
    let dstYear = year > 2500 ? year : year + 543
    // month is already 0-based
    let dstMonth = isFullMonth ? fullMonthThai[month] : abbrMonthThai[month]
    return `${dstMonth} ${dstYear}`
  }

  // กรณีมีเฉพาะ date
  function convertDateToAPI(date: Date | null) {
    return date
      ? format(utcToZonedTime(date, 'Asia/Bangkok'), 'yyyy-MM-dd')
      : null
  }

  // กรณี datetime
  function convertDatetimeToAPI(date: Date | null) {
    return date
      ? format(utcToZonedTime(date, 'Asia/Bangkok'), 'yyyy-MM-dd HH:mm:ss')
      : null
  }

  return {
    date2Thai,
    monthYear2Thai,
    showLoader,
    hideLoader,
    covertDateObject,
    dialogConfirm,
    messageError,
    success,
    notify,
    dialogRemove,
    convertDateToAPI,
    convertDatetimeToAPI,
  }
})