Move data fetching to main component

src/pages/Worker/Card/WorkerCalendar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -8,6 +8,7 @@ import FetchData from 'components/FetchData.vue';
 import WorkerCalendarItem from 'pages/Worker/Card/WorkerCalendarItem.vue';
 
 import { useStateStore } from 'stores/useStateStore';
+import axios from 'axios';
 
 const stateStore = useStateStore();
 const route = useRoute();
@@ -15,11 +16,13 @@ const { t } = useI18n();
 
 const workerCalendarFilterRef = ref(null);
 const workerCalendarRef = ref(null);
-const businessFk = ref(null);
 const absenceType = ref(null);
 const hasWorkCenter = ref(false);
 const isSubordinate = ref(false);
+const businessFk = ref(null);
 const year = ref(Date.vnNew().getFullYear());
+const contractHolidays = ref(null);
+const yearHolidays = ref(null);
 const events = ref({});
 
 const onFetchActiveContract = (data) => {
@@ -42,6 +45,8 @@ const addEvent = (day, newEvent) => {
 const onFetchAbsences = (data) => {
     if (!data) return;
 
+    events.value = {};
+
     if (data.holidays) {
         data.holidays.forEach((holiday) => {
             const holidayDetail = holiday.detail && holiday.detail.name;
@@ -68,7 +73,57 @@ const onFetchAbsences = (data) => {
     console.log('events:: ', events.value);
 };
 
-const onHandleRefresh = () => workerCalendarFilterRef.value.refreshData();
+const getAbsences = async () => {
+    try {
+        const params = {
+            workerFk: route.params.id,
+            businessFk: businessFk.value,
+            year: year.value,
+        };
+        const { data } = await axios.get('Calendars/absences', { params });
+        if (data) onFetchAbsences(data);
+
+        return data;
+    } catch (error) {
+        console.error('Error fetching absences:', error);
+        return null;
+    }
+};
+
+const getHolidays = async (params) => {
+    try {
+        const { data } = await axios.get(`Workers/${route.params.id}/holidays`, {
+            params,
+        });
+        return data;
+    } catch (error) {
+        console.error('Error fetching holidays:', error);
+        return null;
+    }
+};
+
+const updateContractHolidays = async () => {
+    contractHolidays.value = await getHolidays({
+        businessFk: businessFk.value,
+        year: year.value,
+    });
+};
+
+const updateYearHolidays = async () => {
+    yearHolidays.value = await getHolidays({ year: year.value });
+};
+
+const refreshData = () => {
+    updateYearHolidays();
+    updateContractHolidays();
+    getAbsences();
+};
+
+const onDeletedEvent = (timestamp) => {
+    delete events.value[timestamp];
+};
+
+watch([year, businessFk], () => refreshData());
 </script>
 
 <template>
@@ -106,7 +161,6 @@ const onHandleRefresh = () => workerCalendarFilterRef.value.refreshData();
                 v-model:business-fk="businessFk"
                 v-model:year="year"
                 v-model:absence-type="absenceType"
-                @on-absences-fetched="onFetchAbsences"
             />
         </QScrollArea>
     </QDrawer>
@@ -142,7 +196,8 @@ const onHandleRefresh = () => workerCalendarFilterRef.value.refreshData();
                     :absence-type="absenceType"
                     :business-fk="businessFk"
                     :events="events"
-                    @refresh="onHandleRefresh"
+                    @refresh="refreshData"
+                    @on-deleted-event="onDeletedEvent"
                 />
             </div>
         </QCard>

src/pages/Worker/Card/WorkerCalendarFilter.vue

@@ -4,9 +4,8 @@ import FetchData from 'components/FetchData.vue';
 import { useI18n } from 'vue-i18n';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import { useRoute } from 'vue-router';
-import { computed, ref, watch, reactive } from 'vue';
+import { computed, ref } from 'vue';
 import { toDateFormat } from '../../../filters/date';
-import axios from 'axios';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -26,12 +25,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits([
-    'update:businessFk',
-    'update:year',
-    'update:absenceType',
-    'onAbsencesFetched',
-]);
+const emit = defineEmits(['update:businessFk', 'update:year', 'update:absenceType']);
 
 const selectedBusinessFk = computed({
     get: () => props.businessFk,
@@ -64,60 +58,6 @@ const generateYears = () => {
 const absenceTypeList = ref([]);
 const contractList = ref([]);
 const yearList = ref(generateYears());
-
-const contractHolidays = ref(null);
-const yearHolidays = ref(null);
-
-const getHolidays = async (params) => {
-    try {
-        const { data } = await axios.get(`Workers/${route.params.id}/holidays`, {
-            params,
-        });
-        return data;
-    } catch (error) {
-        console.error('Error fetching holidays:', error);
-        return null;
-    }
-};
-
-const updateContractHolidays = async () => {
-    contractHolidays.value = await getHolidays({
-        businessFk: selectedBusinessFk.value,
-        year: selectedYear.value,
-    });
-};
-
-const updateYearHolidays = async () => {
-    yearHolidays.value = await getHolidays({ year: selectedYear.value });
-};
-
-const getAbsences = async () => {
-    try {
-        const params = {
-            workerFk: route.params.id,
-            businessFk: props.businessFk,
-            year: props.year,
-        };
-        const { data } = await axios.get('Calendars/absences', { params });
-        if (data) emit('onAbsencesFetched', data);
-        return data;
-    } catch (error) {
-        console.error('Error fetching absences:', error);
-        return null;
-    }
-};
-
-const refreshData = () => {
-    updateYearHolidays();
-    updateContractHolidays();
-    getAbsences();
-};
-
-watch([selectedYear, selectedBusinessFk], () => refreshData());
-
-defineExpose({
-    refreshData,
-});
 </script>
 
 <template>

src/pages/Worker/Card/WorkerCalendarItem.vue

@@ -36,7 +36,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['refresh']);
+const emit = defineEmits(['refresh', 'onDeletedEvent']);
 
 const route = useRoute();
 const { t } = useI18n();
@@ -76,34 +76,30 @@ const createEvent = async (date) => {
 
 const editEvent = async (event) => {
     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
         );
-        console.log('edit data:: ', data);
+
         if (data) emit('refresh');
     } catch (error) {
         console.log('error editing event:: ', error);
     }
 };
 
-const deleteEvent = async (event) => {
+const deleteEvent = async (event, date) => {
     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');
+    if (data) emit('onDeletedEvent', date.getTime());
 };
 
 const handleDateSelected = (date) => {
@@ -121,10 +117,8 @@ const handleDateSelected = (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(event);
+    if (event.type == props.absenceType.code) deleteEvent(event, date);
     else editEvent(event);
 };