forked from verdnatura/salix-front
WIP
This commit is contained in:
parent
e1cf13076f
commit
6baaebf6bd
|
|
@ -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',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
});
|
||||
Loading…
Reference in New Issue