From fd67e56388ef88d19da96b8ab7a484162808b943 Mon Sep 17 00:00:00 2001 From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" Date: Tue, 16 Jan 2024 15:06:03 +0700 Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20celdar?= =?UTF-8?q?=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3?= =?UTF-8?q?=E0=B8=A5=E0=B8=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/05_leave/components/Calendar.vue | 747 ++++++++++--------- 1 file changed, 374 insertions(+), 373 deletions(-) diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue index 2972d00..b798925 100644 --- a/src/modules/05_leave/components/Calendar.vue +++ b/src/modules/05_leave/components/Calendar.vue @@ -17,8 +17,8 @@ import listPlugin from "@fullcalendar/list"; /** import type*/ import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"; import type { - DataCalendar, - LeaveType, + DataCalendar, + LeaveType, } from "@/modules/05_leave/interface/response/leave"; /** import componest*/ @@ -36,7 +36,7 @@ const emit = defineEmits(["update:dateYear"]); const fullName = ref(""); const mainData = ref([]); const keycloakId = ref( - keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : "" + keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : "" ); const modal = ref(false); const leaveId = ref(""); @@ -46,162 +46,161 @@ const leaveId = ref(""); */ const fullCalendar = ref(); //ref calendar const calendarOptions = ref({ - plugins: [ - dayGridPlugin, - timeGridPlugin, - interactionPlugin, // needed for dateClick - listPlugin, - ], - headerToolbar: false, - initialView: "dayGridMonth", - initialEvents: [], // alternatively, use the `events` setting to fetch from a feed - selectable: true, - dayMaxEvents: true, - weekends: true, - locale: "th", - locales: allLocales, - expandRows: true, - nowIndicator: true, - height: "100%", - eventColor: "#4CAF4F", - eventTextColor: "#fff", - eventBorderColor: "#50a5fc", - displayEventTime: false, - editable: true, - events: [], + plugins: [ + dayGridPlugin, + timeGridPlugin, + interactionPlugin, // needed for dateClick + listPlugin, + ], + headerToolbar: false, + initialView: "dayGridMonth", + initialEvents: [], // alternatively, use the `events` setting to fetch from a feed + selectable: true, + dayMaxEvents: true, + weekends: true, + locale: "th", + locales: allLocales, + expandRows: true, + nowIndicator: true, + height: "100%", + eventColor: "#4CAF4F", + eventTextColor: "#fff", + eventBorderColor: "#50a5fc", + displayEventTime: false, + editable: true, + events: [], }); /**Map ตัวแปร dateMonth */ const dateMonth = ref({ - month: new Date().getMonth(), - year: new Date().getFullYear(), + month: new Date().getMonth(), + year: new Date().getFullYear(), }); /** function เรียกข้อมูล calendar*/ async function fetchDataCalendar() { - showLoader(); - await http - .post(config.API.leaveCalendar(), { - year: dateMonth.value.year, - }) - .then((res) => { - mainData.value = res.data.result; + showLoader(); + await http + .post(config.API.leaveCalendar(), { + year: dateMonth.value.year, + }) + .then((res) => { + mainData.value = res.data.result; - const double_name = [ - ...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId)), - ]; - filterLists.value = []; - for (let i = 1; i <= double_name.length; i++) { - const name = double_name[i - 1]; - const filterName = { - id: name, - name: convertKeycloakId(name), - color: name === keycloakId.value ? "green" : "grey", - }; - filterLists.value.push(filterName); - } - console.log(double_name); - - if (filterVal.value.length !== 0) { - const data = mainData.value.filter( - (e: any) => e.keycloakId === keycloakId.value - ); - - const event = data - .filter((x: any) => x.status != "REJECT" && x.status != "DELETE") - .map((e: DataCalendar) => ({ - id: e.id, - title: `${e.fullName} (${e.leaveTypeName})`, - start: e.leaveStartDate, - end: new Date( - new Date(e.leaveEndDate).setHours(23, 59, 59) - ).toISOString(), - allDay: e.leaveStartDate === e.leaveEndDate ? true : false, - color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC", - textColor: "black", - })); - calendarOptions.value.events = event; - console.log(calendarOptions.value.events); - } - }) - .catch((err) => { - messageError($q, err); - }) - .finally(() => { - hideLoader(); - }); - await fetchData(); + const double_name = [ + ...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId)), + ]; + filterLists.value = []; + for (let i = 1; i <= double_name.length; i++) { + const name = double_name[i - 1]; + const filterName = { + id: name, + name: convertKeycloakId(name), + color: name === keycloakId.value ? "green" : "grey", + }; + filterLists.value.push(filterName); + } + const eventData = filterVal.value.map((item: any) => { + return mainData.value + .filter( + (e: DataCalendar) => + e.keycloakId === item && + e.status != "REJECT" && + e.status != "DELETE" + ) + .map((e) => ({ + id: e.id, + title: `${e.fullName} (${e.leaveTypeName})`, + start: e.leaveStartDate, + end: new Date( + new Date(e.leaveEndDate).setHours(23, 59, 59) + ).toISOString(), + allDay: e.leaveStartDate === e.leaveEndDate ? true : false, + color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC", + textColor: "black", + })); + }); + const allEventData = [].concat(...eventData); + calendarOptions.value.events = allEventData; + // } + }) + .catch((err) => { + messageError($q, err); + }) + .finally(() => { + hideLoader(); + }); } /** * fetch วันหยุดในปฏิทิน */ const fetchData = async () => { - showLoader(); - await http - .get( - config.API.listHolidayHistoryYearMonth( - dateMonth.value.year, - dateMonth.value.month + 1 - ) - ) - .then((res) => { - const dataNormal = res.data.result.normal; - const dataSixDays = res.data.result.sixDays; - const data = dataNormal; - const event = data.map((e: any) => ({ - id: e.id, - title: `${e.name} `, - start: e.holidayDate, - end: new Date( - new Date(e.holidayDate).setHours(23, 59, 59) - ).toISOString(), - allDay: e.holidayDate === e.holidayDate ? true : false, - color: " #CCE5FF", - textColor: "#0080FF", - })); - calendarOptions.value.events = [ - ...calendarOptions.value.events, - ...event, - ]; - // const dataSix = dataSixDays - // const eventSix = dataSix.map((e: any) => ({ - // id: e.id, - // title: `${e.name} `, - // start: e.holidayDate, - // end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(), - // allDay: e.holidayDate === e.holidayDate ? true : false, - // color: "#FFE5CC", - // textColor: "#FF8000", - // })) - // calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix] - console.log(calendarOptions.value.events); - }) - .catch((e) => { - messageError($q, e); - }) - .finally(async () => { - hideLoader(); - }); + showLoader(); + await http + .get( + config.API.listHolidayHistoryYearMonth( + dateMonth.value.year, + dateMonth.value.month + 1 + ) + ) + .then((res) => { + const dataNormal = res.data.result.normal; + const dataSixDays = res.data.result.sixDays; + const data = dataNormal; + const event = data.map((e: any) => ({ + id: e.id, + title: `${e.name} `, + start: e.holidayDate, + end: new Date( + new Date(e.holidayDate).setHours(23, 59, 59) + ).toISOString(), + allDay: e.holidayDate === e.holidayDate ? true : false, + color: " #CCE5FF", + textColor: "#0080FF", + })); + calendarOptions.value.events = [ + ...calendarOptions.value.events, + ...event, + ]; + // const dataSix = dataSixDays + // const eventSix = dataSix.map((e: any) => ({ + // id: e.id, + // title: `${e.name} `, + // start: e.holidayDate, + // end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(), + // allDay: e.holidayDate === e.holidayDate ? true : false, + // color: "#FFE5CC", + // textColor: "#FF8000", + // })) + // calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix] + console.log(calendarOptions.value.events); + }) + .catch((e) => { + messageError($q, e); + }) + .finally(async () => { + hideLoader(); + }); }; /**function แปลงkeycloakId */ function convertKeycloakId(id: any) { - const filterName = mainData.value.find((e: any) => e.keycloakId === id); - return filterName?.fullName; + const filterName = mainData.value.find((e: any) => e.keycloakId === id); + return filterName?.fullName; } /** function เรียกประเภทการลา */ const leaveType = ref([]); async function fectOptionType() { - await http - .get(config.API.leaveType()) - .then(async (res) => { - leaveType.value = res.data.result; - }) - .catch((err) => { - messageError($q, err); - }); + await http + .get(config.API.leaveType()) + .then(async (res) => { + leaveType.value = res.data.result; + }) + .catch((err) => { + messageError($q, err); + }); } /** @@ -209,17 +208,17 @@ async function fectOptionType() { * @param val datepicker แบบเลือกปีและเดือน */ function monthYearThai(val: DataDateMonthObject) { - if (val == null) return ""; - else return monthYear2Thai(val.month, val.year); + if (val == null) return ""; + else return monthYear2Thai(val.month, val.year); } /** function อัปเดท Calendar */ async function updateMonth() { - await fetchDataCalendar(); - await fetchData(); - const calen = fullCalendar.value.getApi(); - const date = new Date(dateMonth.value.year, dateMonth.value.month); - calen.gotoDate(date); + await fetchDataCalendar(); + await fetchData(); + const calen = fullCalendar.value.getApi(); + const date = new Date(dateMonth.value.year, dateMonth.value.month); + calen.gotoDate(date); } /** @@ -227,234 +226,236 @@ async function updateMonth() { * @param id การลา */ async function onCilckview(id: string) { - modal.value = true; - leaveId.value = id; + modal.value = true; + leaveId.value = id; } /** function closePopup*/ async function onClickClose() { - modal.value = false; + modal.value = false; } /** filter calendar left */ const filterLists = ref([]); -const filterVal = ref([]); +const filterVal = ref([keycloakId.value]); /**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่Calendar */ watch( - () => filterVal.value, - () => { - const eventData = filterVal.value.map((item: any) => { - return mainData.value - .filter( - (e: DataCalendar) => - e.keycloakId === item && - e.status != "REJECT" && - e.status != "DELETE" - ) - .map((e) => ({ - id: e.id, - title: `${e.fullName} (${e.leaveTypeName})`, - start: e.leaveStartDate, - end: new Date( - new Date(e.leaveEndDate).setHours(23, 59, 59) - ).toISOString(), - allDay: e.leaveStartDate === e.leaveEndDate ? true : false, - color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC", - textColor: "black", - })); - }); - const allEventData = [].concat(...eventData); - calendarOptions.value.events = allEventData; - } + () => filterVal.value, + () => { + const eventData = filterVal.value.map((item: any) => { + return mainData.value + .filter( + (e: DataCalendar) => + e.keycloakId === item && + e.status != "REJECT" && + e.status != "DELETE" + ) + .map((e) => ({ + id: e.id, + title: `${e.fullName} (${e.leaveTypeName})`, + start: e.leaveStartDate, + end: new Date( + new Date(e.leaveEndDate).setHours(23, 59, 59) + ).toISOString(), + allDay: e.leaveStartDate === e.leaveEndDate ? true : false, + color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC", + textColor: "black", + })); + }); + const allEventData = [].concat(...eventData); + calendarOptions.value.events = allEventData; + fetchData(); + } ); /**Hook */ onMounted(async () => { - filterVal.value.push(keycloakId.value); - await fetchDataCalendar(); - await fectOptionType(); + filterVal.value.push(keycloakId.value); + await fetchDataCalendar(); + await fetchData(); + await fectOptionType(); });