WIP

src/i18n/en/index.js

@@ -835,6 +835,7 @@ export default {
             workerCreate: 'New worker',
             department: 'Department',
             pda: 'PDA',
+            timeControl: 'Time control',
         },
         list: {
             name: 'Name',
@@ -1201,4 +1202,13 @@ export default {
         },
         iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789',
     },
+    weekdays: {
+        sun: 'Sunday',
+        mon: 'Monday',
+        tue: 'Tuesday',
+        wed: 'Wednesday',
+        thu: 'Thursday',
+        fri: 'Friday',
+        sat: 'Saturday',
+    },
 };

src/i18n/es/index.js

@@ -835,6 +835,7 @@ export default {
             workerCreate: 'Nuevo trabajador',
             department: 'Departamentos',
             pda: 'PDA',
+            timeControl: 'Control de horario',
         },
         list: {
             name: 'Nombre',
@@ -1201,4 +1202,13 @@ export default {
         },
         iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789',
     },
+    weekdays: {
+        sun: 'Domingo',
+        mon: 'Lunes',
+        tue: 'Martes',
+        wed: 'Miércoles',
+        thu: 'Jueves',
+        fri: 'Viernes',
+        sat: 'Sábado',
+    },
 };

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -0,0 +1,146 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { onMounted, ref, computed, onBeforeMount } from 'vue';
+import FetchData from 'components/FetchData.vue';
+
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+import { useRole } from 'src/composables/useRole';
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import { useStateStore } from 'stores/useStateStore';
+
+const route = useRoute();
+const { t } = useI18n();
+const { notify } = useNotify();
+const { hasAny } = useRole();
+const stateStore = useStateStore();
+const weekdayStore = useWeekdayStore();
+
+const entryDirections = [
+    { code: 'in', description: t('Entrada') },
+    { code: 'middle', description: t('Intermedio') },
+    { code: 'out', description: t('Salida') },
+];
+
+const columns = computed(() => {
+    return weekdayStore.localeWeekdays?.map((day) => {
+        const obj = {
+            label: day.locale,
+            name: day.name,
+            align: 'left',
+        };
+        return obj;
+    });
+});
+
+const calendarRef = ref(null);
+const selectedDate = ref(null);
+const selectedDateRange = ref(null);
+
+const handleDateSelection = (date) => {
+    if (!date) return;
+    console.log('date', date);
+
+    const _date = new Date(date.year, date.month - 1, date.day);
+    console.log('_date', _date);
+
+    const dateRange = { from: '', to: '' };
+
+    // 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 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(),
+    };
+
+    calendarRef.value.setEditingRange(dateRange.from, dateRange.to);
+    console.log('date range:', dateRange);
+};
+
+// const isAllowedToEdit = computed(() => hasAny(['hr', 'productionAssi']));
+// const columns = computed(() => [
+//     {
+//         label: 'asd',
+//         name: 'picture',
+//         align: 'left',
+//     },
+//     {
+//         label: t('entry.latestBuys.tags'),
+//         name: 'tags',
+//         align: 'left',
+//     },
+// ]);
+
+console.log('columns:: ', columns.value);
+
+onBeforeMount(() => {
+    weekdayStore.initStore();
+    console.log('asdasdasd:: ', weekdayStore);
+});
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+});
+</script>
+
+<template>
+    <!-- <FetchData
+        ref="fetchCurrentDeviceRef"
+        url="DeviceProductionUsers"
+        :filter="{
+            where: { userFk: route.params.id },
+            include: { relation: 'deviceProduction' },
+        }"
+        auto-load
+        @on-fetch="(data) => setCurrentPDA(data[0])"
+    /> -->
+    <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> -->
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <QCard class="full-width">
+            <QTable :columns="columns"> </QTable>
+        </QCard>
+    </QPage>
+</template>
+
+<style scoped lang="scss">
+.test {
+    max-width: 100px !important;
+}
+</style>
+
+<i18n>
+es:
+    Entrada: Entrada
+    Intermedio: Intermedio
+    Salida: Salida
+</i18n>

src/router/modules/worker.js

@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'WorkerMain' },
     menus: {
         main: ['WorkerList', 'WorkerDepartment'],
-        card: ['WorkerNotificationsManager', 'WorkerPda'],
+        card: ['WorkerNotificationsManager', 'WorkerPda', 'WorkerTimeControl'],
         departmentCard: ['BasicData'],
     },
     children: [
@@ -85,6 +85,16 @@ export default {
                     },
                     component: () => import('src/pages/Worker/Card/WorkerPda.vue'),
                 },
+                {
+                    name: 'WorkerTimeControl',
+                    path: 'time-control',
+                    meta: {
+                        title: 'timeControl',
+                        icon: 'access_time',
+                    },
+                    component: () =>
+                        import('src/pages/Worker/Card/WorkerTimeControl.vue'),
+                },
             ],
         },
     ],

src/stores/useWeekdayStore.js

@@ -0,0 +1,71 @@
+import { computed, ref, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { defineStore } from 'pinia';
+
+export const useWeekdayStore = defineStore('weekdayStore', () => {
+    const weekdays = [
+        { code: 'sun', name: 'Sunday' },
+        { code: 'mon', name: 'Monday' },
+        { code: 'tue', name: 'Tuesday' },
+        { code: 'wed', name: 'Wednesday' },
+        { code: 'thu', name: 'Thursday' },
+        { code: 'fri', name: 'Friday' },
+        { code: 'sat', name: 'Saturday' },
+    ];
+
+    const localeOrder = {
+        es: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
+        en: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
+    };
+
+    const { t, locale } = useI18n();
+    const localeWeekdays = ref([]);
+    const weekdaysMap = reactive({});
+
+    const initStore = () => {
+        getWeekdaysMap();
+        getLocales();
+        console.log('weekdaysMap:: ', weekdaysMap);
+    };
+
+    const getWeekdaysMap = () => {
+        if (Object.keys(weekdaysMap).length > 0) return weekdaysMap;
+
+        weekdays.forEach((day, i) => {
+            const obj = {
+                ...day,
+                index: i,
+                char: day.name.substr(0, 1),
+                abr: day.name.substr(0, 3),
+                locale: t(`weekdays.${day.code}`),
+                localeChar: t(`weekdays.${day.code}`).substr(0, 1),
+                localeAbr: t(`weekdays.${day.code}`).substr(0, 3),
+            };
+            weekdaysMap[day.code] = obj;
+        });
+    };
+
+    const getLocales = () => {
+        if (localeWeekdays.value.length > 0) return localeWeekdays.value;
+        for (let code of localeOrder.es) {
+            console.log('code:: ', code);
+            localeWeekdays.value.push(weekdaysMap[code]);
+        }
+        console.log('localeWeekdays:: ', localeWeekdays.value);
+        return localeWeekdays.value;
+    };
+
+    // const orderLocales = (weekDaysArray) => {
+    //     const order = localeOrder[locale.value] || localeOrder.en;
+    //     const orderedLocales = [];
+    //     for (let code of order) orderedLocales.push(weekDaysArray[code]);
+    //     // return order.map((code) => localeWeekdays.value.find((day) => day.code === code));
+    // };
+
+    return {
+        initStore,
+        getLocales,
+        localeWeekdays,
+        weekdaysMap,
+    };
+});