src/pages/Worker/Card/WorkerTimeControl.vue

@@ -9,19 +9,26 @@ import axios from 'axios';
 import { useRole } from 'src/composables/useRole';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import { useStateStore } from 'stores/useStateStore';
+import { useState } from 'src/composables/useState';
 
 const route = useRoute();
 const { t } = useI18n();
-const { notify } = useNotify();
+// const { notify } = useNotify();
 const { hasAny } = useRole();
+const state = useState();
+const user = state.getUser();
 const stateStore = useStateStore();
 const weekdayStore = useWeekdayStore();
 
-const entryDirections = [
-    { code: 'in', description: t('Entrada') },
-    { code: 'middle', description: t('Intermedio') },
-    { code: 'out', description: t('Salida') },
-];
+// const entryDirections = [
+//     { code: 'in', description: t('Entrada') },
+//     { code: 'middle', description: t('Intermedio') },
+//     { code: 'out', description: t('Salida') },
+// ];
+
+const isHr = computed(() => hasAny(['hr']));
+
+const isHimSelf = computed(() => user.value.id === route.params.id);
 
 const columns = computed(() => {
     return weekdayStore.localeWeekdays?.map((day) => {
@@ -34,54 +41,74 @@ const columns = computed(() => {
     });
 });
 
+const fetchWorkerTimeControlRef = ref(null);
 const calendarRef = ref(null);
-const selectedDate = ref(null);
-const selectedDateRange = ref(null);
+// const selectedDate = ref(null);
+const selectedDates = ref([]);
+const endOfWeek = ref(null);
+const startOfWeek = ref(null);
 
-const handleDateSelection = (date) => {
-    if (!date) return;
-    console.log('date', date);
+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')}`;
+});
 
-    const _date = new Date(date.year, date.month - 1, date.day);
-    console.log('_date', _date);
+const handleDateSelection = async (dates, _, selectedDateDetails) => {
+    if (!dates.length || !selectedDateDetails) return;
 
-    const dateRange = { from: '', to: '' };
+    const selectedDate = new Date(
+        selectedDateDetails.year,
+        selectedDateDetails.month - 1,
+        selectedDateDetails.day
+    );
 
-    // Obtener la fecha de 3 días atrás
-    const threeDaysAgo = new Date(_date);
-    threeDaysAgo.setDate(_date.getDate() - 3);
-    dateRange.from = {
-        year: threeDaysAgo.getFullYear(),
-        month: threeDaysAgo.getMonth() + 1, // Los meses van de 0 a 11, por eso sumamos 1
-        day: threeDaysAgo.getDate(),
-    };
+    // Obtener el día de la semana de la fecha seleccionada (0 = Domingo, 1 = Lunes, ..., 6 = Sábado)
+    const dayOfWeek = selectedDate.getDay();
 
-    // Obtener la fecha de 3 días adelante
-    const threeDaysAhead = new Date(_date);
-    threeDaysAhead.setDate(_date.getDate() + 3);
-    dateRange.to = {
-        year: threeDaysAhead.getFullYear(),
-        month: threeDaysAhead.getMonth() + 1, // Los meses van de 0 a 11, por eso sumamos 1
-        day: threeDaysAhead.getDate(),
-    };
+    // 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;
 
-    calendarRef.value.setEditingRange(dateRange.from, dateRange.to);
-    console.log('date range:', dateRange);
+    // Obtener el último día de la semana (Domingo)
+    const newEndOfWeek = new Date(newStartOfWeek);
+    newEndOfWeek.setDate(newStartOfWeek.getDate() + 6);
+    endOfWeek.value = newEndOfWeek;
+
+    // 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));
+    }
+
+    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 isAllowedToEdit = computed(() => hasAny(['hr', 'productionAssi']));
-// const columns = computed(() => [
-//     {
-//         label: 'asd',
-//         name: 'picture',
-//         align: 'left',
-//     },
-//     {
-//         label: t('entry.latestBuys.tags'),
-//         name: 'tags',
-//         align: 'left',
-//     },
-// ]);
+const workerTimeControlsFilter = computed(() => ({
+    where: {
+        and: [{ timed: { gte: startOfWeek.value } }, { timed: { lte: endOfWeek.value } }],
+    },
+}));
+
+const setWorkerTimeControls = (data) => {
+    console.log('worker time controls:: ', data);
+};
 
 console.log('columns:: ', columns.value);
 
@@ -96,34 +123,28 @@ onMounted(async () => {
 </script>
 
 <template>
-    <!-- <FetchData
-        ref="fetchCurrentDeviceRef"
-        url="DeviceProductionUsers"
-        :filter="{
-            where: { userFk: route.params.id },
-            include: { relation: 'deviceProduction' },
+    <FetchData
+        ref="fetchWorkerTimeControlRef"
+        url="WorkerTimeControls/filter"
+        :filter="workerTimeControlsFilter"
+        :params="{
+            workerFk: route.params.id,
         }"
-        auto-load
-        @on-fetch="(data) => setCurrentPDA(data[0])"
-    /> -->
+        @on-fetch="(data) => setWorkerTimeControls(data)"
+    />
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="300" show-if-above>
-        <!-- <QScrollArea class="fit text-grey-8"> -->
-        <div class="fit">
-            <QDate
-                ref="calendarRef"
-                v-model="selectedDate"
-                @range-start="handleDateSelection"
-                mask="YYYY-MM-DD"
-                color="primary"
-                minimal
-                :years-in-month-view="false"
-                first-day-of-week="1"
-                range
-                class
-            />
-        </div>
-
-        <!-- </QScrollArea> -->
+        <QDate
+            ref="calendarRef"
+            :model-value="selectedDates"
+            @update:model-value="handleDateSelection"
+            mask="YYYY-MM-DD"
+            color="primary"
+            minimal
+            multiple
+            bordered
+            :default-year-month="defaultDate"
+        />
+        <pre>date range: {{ selectedDates }}</pre>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
         <QCard class="full-width">
@@ -132,11 +153,7 @@ onMounted(async () => {
     </QPage>
 </template>
 
-<style scoped lang="scss">
-.test {
-    max-width: 100px !important;
-}
-</style>
+<style scoped lang="scss"></style>
 
 <i18n>
 es: