รายละเอียดการลา

src/modules/09_leave/components/2_Leave/Calendar.vue

@@ -11,8 +11,12 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRouter } from "vue-router";
+import keycloak from "@/plugins/keycloak";
 
-import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
+import type {
+  DataDateMonthObject,
+  ResCalendar,
+} from "@/modules/09_leave/interface/response/leave";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
@@ -23,6 +27,10 @@ const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
 
 const $q = useQuasar();
 const router = useRouter();
+
+const keycloakId = ref<string>(
+  keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
+);
 /**
  * Option ของปฏิทิน
  */
@@ -62,7 +70,7 @@ const dateMonth = ref<DataDateMonthObject>({
   month: new Date().getMonth(),
   year: new Date().getFullYear(),
 });
-const mainData = ref<any>([]);
+const mainData = ref<ResCalendar[]>([]);
 
 async function fetchDataCalendar() {
   showLoader();
@@ -74,22 +82,22 @@ async function fetchDataCalendar() {
       mainData.value = res.data.result;
 
       const double_name = [
-        ...new Set(mainData.value.map((item: any) => item.fullName)),
+        ...new Set(mainData.value.map((item: ResCalendar) => item.keycloakId)),
       ];
-
+      filterLists.value = [];
       for (let i = 1; i <= double_name.length; i++) {
-        filterLists.value = [];
         const name = double_name[i - 1];
         const filterName = {
           id: name,
-          name: name,
-          color: name === "นางสาวสาวิตรี ศรีสมัย" ? "green" : "grey",
+          name: convertKeycloakId(name),
+          color: name === keycloakId.value ? "green" : "grey",
         };
+
         filterLists.value.push(filterName);
       }
 
       const data = mainData.value.filter(
-        (e: any) => e.fullName === "นางสาวสาวิตรี ศรีสมัย"
+        (e: any) => e.keycloakId === keycloakId.value
       );
 
       const event = data.map((e: any) => ({
@@ -101,7 +109,6 @@ async function fetchDataCalendar() {
         color: leaveStore.colorType(e.leaveTypeId),
         textColor: "black",
       }));
-      console.log(event);
 
       calendarOptions.value.events = event;
     })
@@ -117,17 +124,24 @@ async function fetchDataCalendar() {
     });
 }
 
+function convertKeycloakId(id: any) {
+  const filterName = mainData.value.find(
+    (e: ResCalendar) => e.keycloakId === id
+  );
+  return filterName?.fullName;
+}
+
 // filter calendar left
 const filterLists = ref<any[]>([]);
-const filterVal = ref(["นางสาวสาวิตรี ศรีสมัย"]);
+const filterVal = ref<any>([]);
 
 watch(
   () => filterVal.value,
   () => {
     const eventData = filterVal.value.map((item: any) => {
       return mainData.value
-        .filter((e: any) => e.fullName === item)
-        .map((e: any) => ({
+        .filter((e: ResCalendar) => e.keycloakId === item)
+        .map((e: ResCalendar) => ({
           id: e.id,
           title: `${e.fullName} (${e.leaveTypeName}) `,
           start: e.leaveStartDate,
@@ -137,7 +151,8 @@ watch(
           allDay: true,
         }));
     });
-    calendarOptions.value.events = eventData[0];
+    const allEventData = [].concat(...eventData);
+    calendarOptions.value.events = allEventData;
   }
 );
 
@@ -149,37 +164,14 @@ function redirectToDetail(id: string) {
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
+  filterVal.value.push(keycloakId.value);
   await fetchDataCalendar();
-  // if (fullCalendar !== undefined) {
-  //   const calen = fullCalendar.value.getApi();
-  //   const date = new Date(dateMonth.value.year, dateMonth.value.month);
-  //   calen.gotoDate(date);
-  // }
 });
 
 async function changCalendar() {
   await fetchDataCalendar();
 }
 
-/**
- * ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
- */
-// watch(props, async (count, prevCount) => {
-//   const calen = fullCalendar.value.getApi();
-//   const date = new Date(props.dateYear, props.dateMonth);
-//   calen.gotoDate(date);
-// });
-
-/**
- * ฟังก์ชั่นยกเลิก model
- * @param text
- */
-
-/**
- * ฟังก์ชั่นเปิด model
- * @param text
- */
-
 const monthYearThai = (val: DataDateMonthObject) => {
   if (val == null) return "";
   else return monthYear2Thai(val.month, val.year);