src/pages/Worker/Card/WorkerCalendar.vue

@@ -176,7 +176,8 @@ watch([year, businessFk], () => refreshData());
         auto-load
     />
     <FetchData
-        :url="`Workers/${route.params.id}`"
+        url="Workers/summary"
+        :filter="{ fields: ['id', 'isFreelance'], where: { id: route.params.id } }"
         @on-fetch="(data) => (workerIsFreelance = data.isFreelance)"
         ref="WorkerFreelanceRef"
         auto-load

src/pages/Worker/Card/WorkerCalendarFilter.vue

@@ -7,10 +7,36 @@ import useNotify from 'src/composables/useNotify';
 import { useRoute } from 'vue-router';
 import { computed, ref, watch } from 'vue';
 import { toDateFormat } from '../../../filters/date';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+import axios from 'axios';
+
+const newPayedHolidays = ref(0);
+
+function openDialog() {
+    holidayDialogRef.value = true;
+}
+
+async function updatePayedHolidays() {
+    try {
+        await axios.patch(`/api/business/${selectedBusinessFk.value}`, {
+            payedHolidays: newPayedHolidays.value,
+        });
+
+        notify(t('Paid holidays updated successfully'), 'positive');
+        holidayDialogRef.value = false;
+        emit('refreshData'); // Si necesitas actualizar la vista
+    } catch (error) {
+        notify(t('Error updating paid holidays'), 'negative');
+        console.error('Update Error:', error);
+    }
+}
+
 const { notify } = useNotify();
 
 const { t } = useI18n();
 const route = useRoute();
+const holidayDialogRef = ref(false);
 
 const props = defineProps({
     businessFk: {
@@ -40,8 +66,9 @@ watch(
     (newValue) => {
         checkHolidays(newValue);
     },
-    { deep: true, immediate: true }
+    { deep: true, immediate: true },
 );
+
 const emit = defineEmits(['update:businessFk', 'update:year', 'update:absenceType']);
 
 const selectedBusinessFk = computed({
@@ -68,7 +95,9 @@ function generateYears() {
 
     return Array.from({ length: 5 }, (_, i) => String(maxYear - i)) || [];
 }
-
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
 function checkHolidays(contractHolidays) {
     if (!contractHolidays) return;
     if (
@@ -83,7 +112,6 @@ const absenceTypeList = ref([]);
 const contractList = ref([]);
 const yearList = ref(generateYears());
 </script>
-
 <template>
     <FetchData
         url="AbsenceTypes"
@@ -96,7 +124,27 @@ const yearList = ref(generateYears());
         @on-fetch="(data) => (contractList = data)"
         auto-load
     />
-
+    <QDialog v-model="holidayDialogRef" :maximized="true" :class="['vn-row', 'wrap']">
+        <FormModelPopup
+            :url-update="`Business/${props.businessFk}`"
+            model="Business"
+            :title="t('paidHolidays')"
+            :form-initial-data="{
+                id: props.businessFk,
+                payedHolidays: contractHolidays.payedHolidays,
+            }"
+            @on-data-saved="onDataSaved"
+        >
+            <template #form-inputs="{ data }">
+                {{ data }}
+                <VnInput
+                    v-model="data.payedHolidays"
+                    :label="t('paidHolidays')"
+                    type="number"
+                />
+            </template>
+        </FormModelPopup>
+    </QDialog>
     <div
         v-if="contractHolidays"
         class="q-pa-md q-mb-md q-ma-md color-vn-text"
@@ -134,6 +182,14 @@ const yearList = ref(generateYears());
                         payedHolidays: contractHolidays.payedHolidays || 0,
                     })
                 }}
+                <QBtn
+                    style="max-width: 20%"
+                    flat
+                    icon="edit"
+                    @click="openDialog()"
+                    :title="t('paidHolidays')"
+                    color="primary"
+                />
             </span>
         </QCardSection>
     </div>