WIP

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -19,7 +19,7 @@ const state = useState();
 const user = state.getUser();
 const stateStore = useStateStore();
 const weekdayStore = useWeekdayStore();
-
+const weekDays = ref([]);
 // const entryDirections = [
 //     { code: 'in', description: t('Entrada') },
 //     { code: 'middle', description: t('Intermedio') },
@@ -43,61 +43,58 @@ const columns = computed(() => {
 
 const fetchWorkerTimeControlRef = ref(null);
 const calendarRef = ref(null);
-// const selectedDate = ref(null);
-const selectedDates = ref([]);
-const endOfWeek = ref(null);
+// Dates formateadas para bindear al componente QDate
+const selectedCalendarDates = ref([]);
 const startOfWeek = ref(null);
+const endOfWeek = ref(null);
 
 const defaultDate = computed(() => {
     const date = Date.vnNew();
-    const year = date.getFullYear();
-    const month = date.getMonth() + 1; // Nota: getMonth devuelve el mes indexado desde 0
-    return `${year}/${month.toString().padStart(2, '0')}`;
+    return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}`;
 });
 
 const handleDateSelection = async (dates, _, selectedDateDetails) => {
     if (!dates.length || !selectedDateDetails) return;
 
-    const selectedDate = new Date(
-        selectedDateDetails.year,
-        selectedDateDetails.month - 1,
-        selectedDateDetails.day
-    );
+    const { year, month, day } = selectedDateDetails;
+    const selectedDate = new Date(year, month - 1, day);
 
-    // Obtener el día de la semana de la fecha seleccionada (0 = Domingo, 1 = Lunes, ..., 6 = Sábado)
+    startOfWeek.value = getStartOfWeek(selectedDate);
+    endOfWeek.value = getEndOfWeek(startOfWeek.value);
+
+    getWeekDates(startOfWeek.value, endOfWeek.value);
+
+    await fetchWorkerTimeControl();
+};
+
+const getStartOfWeek = (selectedDate) => {
     const dayOfWeek = selectedDate.getDay();
+    const startOfWeek = new Date(selectedDate);
+    startOfWeek.setDate(selectedDate.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1));
+    return startOfWeek;
+};
 
-    // Obtener el primer día de la semana (Lunes)
-    const newStartOfWeek = new Date(selectedDate);
-    newStartOfWeek.setDate(
-        selectedDate.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)
-    );
-    startOfWeek.value = newStartOfWeek;
+const getEndOfWeek = (startOfWeek) => {
+    const endOfWeek = new Date(startOfWeek);
+    endOfWeek.setDate(startOfWeek.getDate() + 6);
+    return endOfWeek;
+};
 
-    // Obtener el último día de la semana (Domingo)
-    const newEndOfWeek = new Date(newStartOfWeek);
-    newEndOfWeek.setDate(newStartOfWeek.getDate() + 6);
-    endOfWeek.value = newEndOfWeek;
+const getWeekDates = (startOfWeek, endOfWeek) => {
+    selectedCalendarDates.value = [];
+    let currentDate = new Date(startOfWeek);
 
-    // Crear un array con las fechas de la semana seleccionada
-    const selectedDatesArray = [];
-    for (
-        let date = new Date(newStartOfWeek);
-        date <= newEndOfWeek;
-        date.setDate(date.getDate() + 1)
-    ) {
-        selectedDatesArray.push(new Date(date).toISOString().slice(0, 10));
+    while (currentDate <= endOfWeek) {
+        selectedCalendarDates.value.push(formatDate(currentDate));
+        weekDays.value.push({
+            dated: new Date(currentDate.getTime()),
+        });
+        currentDate = new Date(currentDate.setDate(currentDate.getDate() + 1));
     }
+};
 
-    console.log('start of week:: ', startOfWeek.value);
-    console.log('new end of week:: ', endOfWeek.value);
-
-    // Asignar el array de fechas de la semana seleccionada al valor reactivo
-    selectedDates.value = selectedDatesArray;
-
-    setTimeout(async () => {
-        await fetchWorkerTimeControlRef.value.fetch();
-    }, 1);
+const formatDate = (date) => {
+    return date.toISOString().slice(0, 10);
 };
 
 const workerTimeControlsFilter = computed(() => ({
@@ -106,6 +103,14 @@ const workerTimeControlsFilter = computed(() => ({
     },
 }));
 
+const fetchWorkerTimeControl = async () => {
+    try {
+        await fetchWorkerTimeControlRef.value.fetch();
+    } catch (err) {
+        console.error('Error fetching worker time control');
+    }
+};
+
 const setWorkerTimeControls = (data) => {
     console.log('worker time controls:: ', data);
 };
@@ -135,7 +140,7 @@ onMounted(async () => {
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="300" show-if-above>
         <QDate
             ref="calendarRef"
-            :model-value="selectedDates"
+            :model-value="selectedCalendarDates"
             @update:model-value="handleDateSelection"
             mask="YYYY-MM-DD"
             color="primary"