src/components/WorkerTimeControlCalendar.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
 import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';
-import { onMounted } from 'vue';
 
 const $props = defineProps({
     modelValue: {
@@ -29,18 +28,26 @@ const $props = defineProps({
     },
 });
 
-const emit = defineEmits(['update:modelValue', 'clickDate']);
+const emit = defineEmits(['update:modelValue', 'clickDate', 'onMoved']);
 
 const { locale } = useI18n();
 
 const calendarRef = ref(null);
 
-const workerTimeControlMailsMap = computed(() => {
-    if (!$props.workerTimeControlMails || $props.workerTimeControlMails.length === 0)
-        return {};
-    const obj = {};
-    return obj;
-});
+const stateClasses = {
+    CONFIRMED: {
+        className: 'confirmed',
+        title: 'Conforme',
+    },
+    REVISE: {
+        className: 'revise',
+        title: 'No conforme',
+    },
+    SENDED: {
+        className: 'sended',
+        title: 'Pendiente',
+    },
+};
 
 const value = computed({
     get: () => $props.modelValue,
@@ -50,10 +57,19 @@ const value = computed({
 const formattedNavigationLabel = computed(() => {
     const [year, month, day] = $props.modelValue.split('-');
     const date = new Date(year, month - 1, day);
-    const _month = date.toLocaleString(locale, { month: 'long' });
+    const _month = date.toLocaleString(locale.value, { month: 'long' });
     return `${_month.charAt(0).toUpperCase() + _month.slice(1)} ${year}`;
 });
 
+const workerTimeControlMailsMap = computed(() => {
+    if (!$props.workerTimeControlMails || !$props.workerTimeControlMails.length)
+        return new Map();
+
+    const map = new Map();
+    $props.workerTimeControlMails.forEach((mail) => map.set(mail.week, mail.state));
+    return map;
+});
+
 const onPrev = () => {
     calendarRef.value.prev();
 };
@@ -66,18 +82,44 @@ const clickDate = (ev) => {
     emit('clickDate', ev);
 };
 
-const workWeeks = ref(null);
+const onMoved = (ev) => {
+    emit('onMoved', new Date(ev.year, ev.month - 1, ev.day));
+};
 
-onMounted(async () => {
-    workWeeks.value = document.getElementsByClassName('q-calendar-month__workweek');
-    setTimeout(() => {
-        const firstElement = workWeeks.value[0];
-        console.log('firstElement:: ', firstElement);
-        console.log('workWeeks:: ', workWeeks.value);
-        firstElement.style.backgroundColor = 'lightBlue';
-        firstElement.style.color = 'red';
-    }, 1);
-});
+const workWeeksElements = ref([]);
+
+watch(
+    () => $props.workerTimeControlMails,
+    () => {
+        getWorkWeekElements();
+        paintWorkWeeks();
+    }
+);
+
+const getWorkWeekElements = () => {
+    workWeeksElements.value = document.getElementsByClassName(
+        'q-calendar-month__workweek'
+    );
+};
+
+const paintWorkWeeks = async () => {
+    for (var i = 0; i < workWeeksElements.value.length; i++) {
+        const element = workWeeksElements.value[i];
+        const week = Number(element.innerHTML);
+        const weekState = workerTimeControlMailsMap.value.get(week);
+
+        const { className, title } = stateClasses[weekState] || {};
+
+        element.classList.remove('confirmed', 'revise', 'sended');
+
+        if (className) {
+            element.classList.add(className);
+            element.setAttribute('title', title);
+        } else {
+            element.removeAttribute('title');
+        }
+    }
+};
 </script>
 
 <template>
@@ -91,18 +133,18 @@ onMounted(async () => {
         </div>
         <QCalendarMonth
             ref="calendarRef"
+            v-model="value"
             show-work-weeks
             :weekdays="[1, 2, 3, 4, 5, 6, 0]"
-            v-model="value"
             :selected-dates="selectedDates"
             :locale="locale"
             mini-mode
             enable-outside-days
             no-active-date
+            class="q-py-md"
             @click-date="clickDate"
+            @moved="onMoved"
         />
-
-        <pre> {{ workerTimeControlMailsMap }}</pre>
     </div>
 </template>
 

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -8,7 +8,7 @@ import WorkerTimeHourChip from 'components/WorkerTimeHourChip.vue';
 import WorkerTimeForm from 'components/WorkerTimeForm.vue';
 import WorkerTimeReasonForm from 'components/WorkerTimeReasonForm.vue';
 import WorkerDateLabel from './WorkerDateLabel.vue';
-import VnCalendarMonth from 'components/common/VnCalendarMonth.vue';
+import WorkerTimeControlCalendar from 'components/WorkerTimeControlCalendar.vue';
 
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
@@ -21,6 +21,7 @@ import { useVnConfirm } from 'composables/useVnConfirm';
 import { useArrayData } from 'composables/useArrayData';
 import { toTimeFormat, secondsToHoursMinutes } from 'filters/date.js';
 import toDateString from 'filters/toDateString.js';
+import { date } from 'quasar';
 
 const route = useRoute();
 const { t, locale } = useI18n();
@@ -32,6 +33,7 @@ const stateStore = useStateStore();
 const weekdayStore = useWeekdayStore();
 const weekDays = ref([]);
 const { openConfirmationModal } = useVnConfirm();
+const { getWeekOfYear } = date;
 
 const workerTimeFormDialogRef = ref(null);
 const workerTimeReasonFormDialogRef = ref(null);
@@ -106,7 +108,7 @@ const setDate = async (date) => {
 
     startOfWeek.value = newStartOfWeek;
     endOfWeek.value = newEndOfWeek;
-    selectedWeekNumber.value = getWeekNumber(newStartOfWeek); // Asignar el número de la semana
+    selectedWeekNumber.value = getWeekOfYear(newStartOfWeek); // Asignar el número de la semana del año
 
     getWeekDates(newStartOfWeek, newEndOfWeek);
 
@@ -133,43 +135,24 @@ const getEndOfWeek = (startOfWeek) => {
 
 // Función para obtener las fechas de la semana seleccionada
 const getWeekDates = (startOfWeek, endOfWeek) => {
-    selectedCalendarDates.value = []; // Limpiar las fechas seleccionadas previamente usadas por QCalendar
+    selectedCalendarDates.value = [];
     weekDays.value = []; // Limpiar la información de las fechas seleccionadas previamente
     let currentDate = new Date(startOfWeek);
 
     while (currentDate <= endOfWeek) {
         // Iterar sobre los días de la semana
-        selectedCalendarDates.value.push(formatDate(currentDate)); // Agregar fecha formateada para el array de fechas bindeado al componente QCalendar
+        selectedCalendarDates.value.push(toDateString(currentDate)); // Agregar fecha formateada para el array de fechas bindeado al componente QCalendar
         weekDays.value.push({ dated: new Date(currentDate.getTime()) }); // Agregar el día de la semana al array información de días de la semana
         currentDate = new Date(currentDate.setDate(currentDate.getDate() + 1)); // Avanzar al siguiente día
     }
 };
 
-// Función para Convertir la fecha al formato que acepta el componente QCalendar: '2001-01-01'
-const formatDate = (date) => {
-    return date.toISOString().slice(0, 10);
-};
-
 const workerHoursFilter = computed(() => ({
     where: {
         and: [{ timed: { gte: startOfWeek.value } }, { timed: { lte: endOfWeek.value } }],
     },
 }));
 
-const getWeekNumber = (date) => {
-    if (!date) return;
-    const startOfYear = new Date(date.getFullYear(), 0, 1);
-    const dayOfWeek = startOfYear.getDay();
-    const offset = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-    const firstWeekMilliseconds = startOfYear.getTime() - offset * 24 * 60 * 60 * 1000;
-    const dateMilliseconds = date.getTime();
-    const weekNumber =
-        Math.floor(
-            (dateMilliseconds - firstWeekMilliseconds) / (7 * 24 * 60 * 60 * 1000)
-        ) + 1;
-    return weekNumber;
-};
-
 const getWorkedHours = async (from, to) => {
     weekTotalHours.value = null;
     let _weekTotalHours = 0;
@@ -273,7 +256,6 @@ const fetchWorkerTimeControlMails = async (filter) => {
             params: { filter: JSON.stringify(filter) },
         });
 
-        console.log('data:: ', data);
         return data;
     } catch (err) {
         console.error('Error fetching worker time control mails');
@@ -286,7 +268,7 @@ const fetchWeekData = async () => {
             where: {
                 workerFk: route.params.id,
                 year: selectedDate.value ? selectedDate.value?.getFullYear() : null,
-                week: getWeekNumber(selectedDate.value),
+                week: selectedWeekNumber.value,
             },
         };
 
@@ -312,7 +294,7 @@ const canBeResend = async () => {
     const filter = {
         where: {
             year: selectedDate.value.getFullYear(),
-            week: getWeekNumber(selectedDate.value),
+            week: selectedWeekNumber.value,
         },
         limit: 1,
     };
@@ -441,7 +423,8 @@ onBeforeMount(() => {
 });
 
 onMounted(async () => {
-    setDate(Date.vnNew());
+    await setDate(Date.vnNew());
+    await getMailStates(selectedDate.value);
     stateStore.rightDrawer = true;
 });
 </script>
@@ -523,12 +506,13 @@ onMounted(async () => {
                 <span></span>
             </QCardSection>
         </div>
-        <VnCalendarMonth
+        <WorkerTimeControlCalendar
             v-model:model-value="selectedDateFormatted"
             :selected-dates="selectedCalendarDates"
             :active-date="false"
             :worker-time-control-mails="workerTimeControlMails"
             @click-date="onInputChange"
+            @on-moved="getMailStates"
         />
     </QDrawer>
     <QPage class="column items-center q-pa-md">