WIP

src/pages/Worker/Card/WorkerCalendarFilter.vue

@@ -268,8 +268,8 @@ defineExpose({
         <QItem v-for="type in absenceTypeList" :key="type.id">
             <WorkerDateLabel
                 :color="type.rgb"
-                :selected="selectedAbsenceType === type.id"
+                :selected="selectedAbsenceType?.id === type.id"
-                @click="selectedAbsenceType = type.id"
+                @click="selectedAbsenceType = type"
             >
                 {{ type.name }}
             </WorkerDateLabel>

src/pages/Worker/Card/WorkerCalendarItem.vue

@@ -23,7 +23,7 @@ const props = defineProps({
         required: true,
     },
     absenceType: {
-        type: Number,
+        type: Object,
         default: null,
     },
     businessFk: {
@@ -58,7 +58,7 @@ const createEvent = async (date) => {
     try {
         const params = {
             dated: date,
-            absenceTypeId: props.absenceType,
+            absenceTypeId: props.absenceType.id,
             businessFk: props.businessFk,
         };
 
@@ -66,20 +66,41 @@ const createEvent = async (date) => {
             `Workers/${route.params.id}/createAbsence`,
             params
         );
-        console.log('data:: ', data);
+        if (data) emit('refresh');
-        // TODO: Agregar notify success
-        emit('refresh');
     } catch (error) {
         console.log('error creating event:: ', error);
     }
 };
 
 const editEvent = async (event) => {
-    console.log('editEvent');
+    try {
+        console.log('editEvent');
+        const absenceType = props.absenceType;
+        const params = {
+            absenceId: event.absenceId,
+            absenceTypeId: absenceType.id,
+        };
+
+        const { data } = await axios.patch(
+            `Workers/${route.params.id}/updateAbsence`,
+            params
+        );
+
+        if (data) emit('refresh');
+    } catch (error) {
+        console.log('error editing event:: ', error);
+    }
 };
 
 const deleteEvent = async (date, event) => {
     console.log('deleteEvent');
+    const params = { absenceId: event.absenceId };
+
+    const { data } = await axios.delete(`Workers/${route.params.id}/deleteAbsence`, {
+        params,
+    });
+
+    if (data) emit('refresh');
 };
 
 const handleDateSelected = (date) => {
@@ -93,10 +114,15 @@ const handleDateSelected = (date) => {
     const stamp = _date.getTime();
     const event = props.events[stamp];
 
-    if (event && event.absenceId) {
+    if (!event) createEvent(_date);
-        if (event.type == props.absenceType.code) deleteEvent(_date, event);
+};
-        else editEvent(event);
+
-    } else createEvent(_date);
+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);
+    else editEvent(event);
 };
 
 const getEventByTimestamp = ({ year, month, day }) => {
@@ -109,6 +135,8 @@ const getEventAttrs = (timestamp) => {
     if (!event) return {};
 
     const { name, color } = event;
+
+    // Atributos a asignar a cada slot que representa un evento en el calendario
     return {
         title: name,
         style: `background-color: ${color};`,
@@ -147,9 +175,13 @@ watch(props.year, (newValue) => {
                 mini-mode
             >
                 <template #day="{ scope: { timestamp } }">
+                    <!-- Este slot representa cada día del calendario y muestra un botón representando el correspondiente evento -->
                     <QButton
                         v-if="getEventByTimestamp(timestamp)"
                         v-bind="{ ...getEventAttrs(timestamp) }"
+                        @click="
+                            handleEventSelected(getEventByTimestamp(timestamp), timestamp)
+                        "
                         class="calendar-event"
                     >
                         {{ timestamp.day }}