WIP

src/pages/Worker/Card/WorkerCalendar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -23,11 +23,50 @@ const year = ref(Date.vnNew().getFullYear());
 const events = ref({});
 
 const onFetchActiveContract = (data) => {
+    if (!data) return;
     businessFk.value = data?.businessFk;
     hasWorkCenter.value = Boolean(data?.workCenterFk);
 };
 
-const onEventsUpdated = (ev) => (events.value = ev);
+const addEvent = (day, newEvent) => {
+    const timestamp = new Date(day).getTime();
+    let event = events.value[timestamp];
+
+    if (event) {
+        const oldName = event.name;
+        Object.assign(event, newEvent);
+        event.name = `${oldName}, ${event.name}`;
+    } else events.value[timestamp] = newEvent;
+};
+
+const onFetchAbsences = (data) => {
+    if (!data) return;
+
+    if (data.holidays) {
+        data.holidays.forEach((holiday) => {
+            const holidayDetail = holiday.detail && holiday.detail.name;
+            const holidayType = holiday.type && holiday.type.name;
+            const holidayName = holidayDetail || holidayType;
+
+            addEvent(holiday.dated, {
+                name: holidayName,
+                className: 'festive',
+            });
+        });
+    }
+    if (data.absences) {
+        data.absences.forEach((absence) => {
+            let type = absence.absenceType;
+            addEvent(absence.dated, {
+                name: type.name,
+                color: type.rgb,
+                type: type.code,
+                absenceId: absence.id,
+            });
+        });
+    }
+    console.log('events:: ', events.value);
+};
 
 const onHandleRefresh = () => workerCalendarFilterRef.value.refreshData();
 </script>
@@ -67,7 +106,7 @@ const onHandleRefresh = () => workerCalendarFilterRef.value.refreshData();
                 v-model:business-fk="businessFk"
                 v-model:year="year"
                 v-model:absence-type="absenceType"
-                @update-events="onEventsUpdated"
+                @on-absences-fetched="onFetchAbsences"
             />
         </QScrollArea>
     </QDrawer>

src/pages/Worker/Card/WorkerCalendarFilter.vue

@@ -30,7 +30,7 @@ const emit = defineEmits([
     'update:businessFk',
     'update:year',
     'update:absenceType',
-    'updateEvents',
+    'onAbsencesFetched',
 ]);
 
 const selectedBusinessFk = computed({
@@ -67,8 +67,6 @@ const yearList = ref(generateYears());
 
 const contractHolidays = ref(null);
 const yearHolidays = ref(null);
-const events = reactive({});
-const calendar = ref(null);
 
 const getHolidays = async (params) => {
     try {
@@ -101,7 +99,7 @@ const getAbsences = async () => {
             year: props.year,
         };
         const { data } = await axios.get('Calendars/absences', { params });
-        if (data) onAbsencesFetched(data);
+        if (data) emit('onAbsencesFetched', data);
         return data;
     } catch (error) {
         console.error('Error fetching absences:', error);
@@ -115,48 +113,6 @@ const refreshData = () => {
     getAbsences();
 };
 
-const onAbsencesFetched = (data) => {
-    calendar.value = data.calendar;
-
-    let addEvent = (day, newEvent) => {
-        const timestamp = new Date(day).getTime();
-        let event = events[timestamp];
-
-        if (event) {
-            const oldName = event.name;
-            Object.assign(event, newEvent);
-            event.name = `${oldName}, ${event.name}`;
-        } else events[timestamp] = newEvent;
-    };
-
-    if (data.holidays) {
-        data.holidays.forEach((holiday) => {
-            const holidayDetail = holiday.detail && holiday.detail.name;
-            const holidayType = holiday.type && holiday.type.name;
-            const holidayName = holidayDetail || holidayType;
-
-            addEvent(holiday.dated, {
-                name: holidayName,
-                className: 'festive',
-            });
-        });
-    }
-    if (data.absences) {
-        data.absences.forEach((absence) => {
-            let type = absence.absenceType;
-            addEvent(absence.dated, {
-                name: type.name,
-                color: type.rgb,
-                type: type.code,
-                absenceId: absence.id,
-            });
-        });
-    }
-
-    emit('updateEvents', events);
-    console.log('events:: ', events);
-};
-
 watch([selectedYear, selectedBusinessFk], () => refreshData());
 
 defineExpose({

src/pages/Worker/Card/WorkerCalendarItem.vue

@@ -66,6 +66,8 @@ const createEvent = async (date) => {
             `Workers/${route.params.id}/createAbsence`,
             params
         );
+
+        console.log('CREATE data:: ', data);
         if (data) emit('refresh');
     } catch (error) {
         console.log('error creating event:: ', error);
@@ -85,20 +87,21 @@ const editEvent = async (event) => {
             `Workers/${route.params.id}/updateAbsence`,
             params
         );
-
+        console.log('edit data:: ', data);
         if (data) emit('refresh');
     } catch (error) {
         console.log('error editing event:: ', error);
     }
 };
 
-const deleteEvent = async (date, event) => {
-    console.log('deleteEvent');
+const deleteEvent = async (event) => {
+    console.log('deleteEvent:: ', event);
     const params = { absenceId: event.absenceId };
-
+    console.log('params:: ', params);
     const { data } = await axios.delete(`Workers/${route.params.id}/deleteAbsence`, {
         params,
     });
+    console.log('delete data:: ', data);
 
     if (data) emit('refresh');
 };
@@ -121,7 +124,7 @@ const handleEventSelected = (event, { year, month, day }) => {
     console.log('event:: ', event);
     const date = new Date(year, month - 1, day);
     console.log('date:: ', date);
-    if (event.type == props.absenceType.code) deleteEvent(date, event);
+    if (event.type == props.absenceType.code) deleteEvent(event);
     else editEvent(event);
 };