hrms-user/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 dateThai(srcDate: Date, isFullMonth: boolean = true, 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",
			})
		}
	}

	const fails = (q: any, val: string) => {
		// useQuasar ไม่สามารถใช้นอกไฟล์ .vue
		if (val !== "") {
			return q.notify({
				message: val,
				color: "red",
				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 = "") => {
		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()
			})
	}

	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,
		dateThai,
		dateToISO,
		notify,
		notifyError,
		dateText,
		monthYear2Thai,
		dateMonth2Thai,
		success,
		weekThai,
		genColor15,
		typeCategoryExam,
		textToPhone,
		textToFax,
		dateThaiRange,
		modalDelete,
		modalConfirm,
		modalError,
		dialogMessage,
		messageError,
		showLoader,
		hideLoader,
		typeRetire,
		typeChangeName,
		statusLeave,
		modalWarning,
		fails,
	}
})