verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

7383-testToMaster #370

Merged
alexm merged 365 commits from 7383-testToMaster into master 2024-05-14 05:46:56 +00:00
Conversation 0 Commits 365 Files Changed 229 +78 -52
2 changed files with 78 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit de912b266c - Show all commits

90
src/components/common/VnCalendarMonth.vue → src/components/WorkerTimeControlCalendar.vue
View File

@ -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>

40
src/pages/Worker/Card/WorkerTimeControl.vue
View File

@ -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">