forked from verdnatura/salix-front
Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 6480-improveCard
This commit is contained in:
commit
d93963e2c8
14490
pnpm-lock.yaml
14490
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -76,6 +76,16 @@ defineExpose({
|
|||
<p>{{ subtitle }}</p>
|
||||
<slot name="form-inputs" :data="data" :validate="validate" />
|
||||
<div class="q-mt-lg row justify-end">
|
||||
<QBtn
|
||||
:label="t('globals.cancel')"
|
||||
:title="t('globals.cancel')"
|
||||
type="reset"
|
||||
color="primary"
|
||||
flat
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
v-close-popup
|
||||
/>
|
||||
<QBtn
|
||||
:label="t('globals.save')"
|
||||
:title="t('globals.save')"
|
||||
|
|
@ -84,17 +94,6 @@ defineExpose({
|
|||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
/>
|
||||
<QBtn
|
||||
:label="t('globals.cancel')"
|
||||
:title="t('globals.cancel')"
|
||||
type="reset"
|
||||
color="primary"
|
||||
flat
|
||||
class="q-ml-sm"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</FormModel>
|
||||
|
|
|
|||
|
|
@ -56,14 +56,6 @@ const closeForm = () => {
|
|||
<p>{{ subtitle }}</p>
|
||||
<slot name="form-inputs" />
|
||||
<div class="q-mt-lg row justify-end">
|
||||
<QBtn
|
||||
v-if="defaultSubmitButton"
|
||||
:label="customSubmitButtonLabel || t('globals.save')"
|
||||
type="submit"
|
||||
color="primary"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
/>
|
||||
<QBtn
|
||||
v-if="defaultCancelButton"
|
||||
:label="t('globals.cancel')"
|
||||
|
|
@ -74,6 +66,14 @@ const closeForm = () => {
|
|||
:loading="isLoading"
|
||||
v-close-popup
|
||||
/>
|
||||
<QBtn
|
||||
v-if="defaultSubmitButton"
|
||||
:label="customSubmitButtonLabel || t('globals.save')"
|
||||
type="submit"
|
||||
color="primary"
|
||||
:disabled="isLoading"
|
||||
:loading="isLoading"
|
||||
/>
|
||||
<slot name="customButtons" />
|
||||
</div>
|
||||
</QCard>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,23 @@ const $props = defineProps({
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
viewCustomization: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
// El objetivo de asignar las clases de personalización desde el wrapper es no tener conflictos entre vistas que usen el mismo componente
|
||||
const viewCustomizationClasses = {
|
||||
workerCalendar: 'worker-calendar-customizations',
|
||||
};
|
||||
|
||||
const containerClasses = computed(() => {
|
||||
const classes = ['main-container-background'];
|
||||
if (viewCustomizationClasses[$props.viewCustomization])
|
||||
classes.push(viewCustomizationClasses[$props.viewCustomization]);
|
||||
if ($props.bordered) classes.push('--bordered');
|
||||
if ($props.transparentBackground) classes.push('transparent-background');
|
||||
else classes.push($q.dark.isActive ? '--dark' : '--light');
|
||||
|
|
@ -33,6 +44,47 @@ const containerClasses = computed(() => {
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../css/quasar.variables.scss';
|
||||
|
||||
:root {
|
||||
// Cambia los colores del día actual del calendario por los de salix
|
||||
--calendar-border-current-dark: #84d0e2 2px solid;
|
||||
--calendar-border-current: #84d0e2 2px solid;
|
||||
--calendar-current-color-dark: #84d0e2;
|
||||
// Colores de fondo del calendario en dark mode
|
||||
--calendar-outside-background-dark: #222;
|
||||
--calendar-background-dark: #222;
|
||||
}
|
||||
|
||||
// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
|
||||
.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
|
||||
background-color: $primary !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
|
||||
background-color: $primary !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.q-calendar-month__head--weekday {
|
||||
// Transforma los nombres de los días de la semana a mayúsculas
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.transparent-background {
|
||||
--calendar-background-dark: transparent;
|
||||
--calendar-background: transparent;
|
||||
--calendar-outside-background-dark: transparent;
|
||||
}
|
||||
|
||||
.q-calendar__button {
|
||||
&:hover {
|
||||
background-color: var(--vn-accent-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container-background {
|
||||
--calendar-current-background-dark: transparent;
|
||||
|
||||
|
|
@ -45,14 +97,64 @@ const containerClasses = computed(() => {
|
|||
}
|
||||
|
||||
&.--bordered {
|
||||
border: 1px solid black;
|
||||
border: 1px solid #222;
|
||||
}
|
||||
}
|
||||
|
||||
.transparent-background {
|
||||
--calendar-background-dark: transparent;
|
||||
--calendar-background: transparent;
|
||||
--calendar-outside-background-dark: transparent;
|
||||
.worker-calendar-customizations {
|
||||
.q-calendar__button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--vn-accent-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.q-calendar-month__week--days > div:nth-child(6),
|
||||
.q-calendar-month__week--days > div:nth-child(7) {
|
||||
// Cambia el color de los días sábado y domingo
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.q-calendar-month__week--wrapper {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.q-calendar-month__workweek {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.q-calendar__button--bordered {
|
||||
color: $info !important;
|
||||
}
|
||||
|
||||
.q-calendar-month__day--content {
|
||||
position: absolute;
|
||||
top: 1;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.q-outside .calendar-event {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.q-calendar-month__workweek,
|
||||
.q-calendar-month__head--workweek,
|
||||
.q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
|
||||
text-transform: capitalize;
|
||||
color: #777;
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
|
|
|
|||
|
|
@ -91,3 +91,24 @@ export function toDateTimeFormat(date, showSeconds = false) {
|
|||
second: showSeconds ? '2-digit' : undefined,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts seconds to a formatted string representing hours and minutes (hh:mm).
|
||||
* @param {number} seconds - The number of seconds to convert.
|
||||
* @param {boolean} includeHSuffix - Optional parameter indicating whether to include "h." after the hour.
|
||||
* @returns {string} A string representing the time in the format "hh:mm" with optional "h." suffix.
|
||||
*/
|
||||
export function secondsToHoursMinutes(seconds, includeHSuffix = true) {
|
||||
if (!seconds) return includeHSuffix ? '00:00 h.' : '00:00';
|
||||
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const remainingMinutes = seconds % 3600;
|
||||
const minutes = Math.floor(remainingMinutes / 60);
|
||||
const formattedHours = hours < 10 ? '0' + hours : hours;
|
||||
const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
|
||||
// Append "h." if includeHSuffix is true
|
||||
const suffix = includeHSuffix ? ' h.' : '';
|
||||
// Return formatted string
|
||||
return formattedHours + ':' + formattedMinutes + suffix;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,6 +83,7 @@ globals:
|
|||
selectFile: Select a file
|
||||
copyClipboard: Copy on clipboard
|
||||
salesPerson: SalesPerson
|
||||
send: Send
|
||||
code: Code
|
||||
pageTitles:
|
||||
summary: Summary
|
||||
|
|
@ -811,6 +812,7 @@ worker:
|
|||
pbx: Private Branch Exchange
|
||||
log: Log
|
||||
calendar: Calendar
|
||||
timeControl: Time control
|
||||
list:
|
||||
name: Name
|
||||
email: Email
|
||||
|
|
|
|||
|
|
@ -83,6 +83,7 @@ globals:
|
|||
selectFile: Seleccione un fichero
|
||||
copyClipboard: Copiar en portapapeles
|
||||
salesPerson: Comercial
|
||||
send: Enviar
|
||||
code: Código
|
||||
pageTitles:
|
||||
summary: Resumen
|
||||
|
|
@ -809,6 +810,7 @@ worker:
|
|||
pbx: Centralita
|
||||
log: Historial
|
||||
calendar: Calendario
|
||||
timeControl: Control de horario
|
||||
list:
|
||||
name: Nombre
|
||||
email: Email
|
||||
|
|
|
|||
|
|
@ -178,6 +178,7 @@ watch(_year, (newValue) => {
|
|||
class="outline"
|
||||
bordered
|
||||
transparent-background
|
||||
view-customization="workerCalendar"
|
||||
>
|
||||
<template #header>
|
||||
<span class="full-width text-center text-body1 q-py-sm">{{
|
||||
|
|
@ -222,58 +223,6 @@ watch(_year, (newValue) => {
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../css/quasar.variables.scss';
|
||||
:root {
|
||||
// Cambia los colores del día actual del calendario por los de salix
|
||||
--calendar-border-current-dark: #84d0e2 2px solid;
|
||||
--calendar-border-current: #84d0e2 2px solid;
|
||||
--calendar-current-color-dark: #ec8916;
|
||||
}
|
||||
|
||||
.q-calendar__button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--vn-accent-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.q-calendar-month__week--days > div:nth-child(6),
|
||||
.q-calendar-month__week--days > div:nth-child(7) {
|
||||
// Cambia el color de los días sábado y domingo
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.q-calendar-month__week--wrapper {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.q-calendar-month__workweek {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.q-calendar__button--bordered {
|
||||
color: $info !important;
|
||||
}
|
||||
|
||||
.q-calendar-month__day--content {
|
||||
position: absolute;
|
||||
top: 1;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.q-outside .calendar-event {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.calendar-event {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -296,15 +245,6 @@ watch(_year, (newValue) => {
|
|||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.q-calendar-month__workweek,
|
||||
.q-calendar-month__head--workweek,
|
||||
.q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
|
||||
text-transform: capitalize;
|
||||
color: #777;
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<script setup>
|
||||
defineProps({
|
||||
color: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
avatarClass: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
});
|
||||
defineEmits(['update:selected']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QChip
|
||||
class="text-white q-ma-none"
|
||||
:selected="selected"
|
||||
:style="{ backgroundColor: selected ? color : 'black' }"
|
||||
@update:selected="$emit('update:selected', $event)"
|
||||
>
|
||||
<QAvatar
|
||||
:color="color"
|
||||
:class="avatarClass"
|
||||
:style="{ backgroundColor: color }"
|
||||
/>
|
||||
<slot />
|
||||
</QChip>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,659 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { onMounted, ref, computed, onBeforeMount, nextTick, reactive } from 'vue';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import WorkerTimeHourChip from 'pages/Worker/Card/WorkerTimeHourChip.vue';
|
||||
import WorkerTimeForm from 'pages/Worker/Card/WorkerTimeForm.vue';
|
||||
import WorkerTimeReasonForm from 'pages/Worker/Card/WorkerTimeReasonForm.vue';
|
||||
import WorkerDateLabel from './WorkerDateLabel.vue';
|
||||
import WorkerTimeControlCalendar from 'pages/Worker/Card/WorkerTimeControlCalendar.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';
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
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();
|
||||
const { notify } = useNotify();
|
||||
const { hasAny } = useRole();
|
||||
const _state = useState();
|
||||
const user = _state.getUser();
|
||||
const stateStore = useStateStore();
|
||||
const weekdayStore = useWeekdayStore();
|
||||
const weekDays = ref([]);
|
||||
const { openConfirmationModal } = useVnConfirm();
|
||||
const { getWeekOfYear } = date;
|
||||
|
||||
const workerTimeFormDialogRef = ref(null);
|
||||
const workerTimeReasonFormDialogRef = ref(null);
|
||||
const workerHoursRef = ref(null);
|
||||
const selectedDate = ref(null);
|
||||
const startOfWeek = ref(null);
|
||||
const endOfWeek = ref(null);
|
||||
const selectedWeekNumber = ref(null);
|
||||
const state = ref(null);
|
||||
const reason = ref(null);
|
||||
const canResend = ref(null);
|
||||
const weekTotalHours = ref(null);
|
||||
const workerTimeControlMails = ref([]);
|
||||
const workerTimeFormProps = reactive({
|
||||
dated: null,
|
||||
entryId: null,
|
||||
entryCode: null,
|
||||
});
|
||||
|
||||
// Array utilizado por QCalendar para seleccionar un rango de fechas
|
||||
const selectedCalendarDates = ref([]);
|
||||
// Date formateada para bindear al componente QDate
|
||||
const selectedDateFormatted = ref(toDateString(Date.vnNew()));
|
||||
|
||||
const arrayData = useArrayData('workerData');
|
||||
|
||||
const worker = computed(() => arrayData.store?.data);
|
||||
|
||||
const isHr = computed(() => hasAny(['hr']));
|
||||
|
||||
const isHimSelf = computed(() => user.value.id === Number(route.params.id));
|
||||
|
||||
const columns = computed(() => {
|
||||
return weekdayStore.getLocales?.map((day, index) => {
|
||||
const obj = {
|
||||
label: day.locale,
|
||||
formattedDate: getHeaderFormattedDate(weekDays.value[index]?.dated),
|
||||
name: day.name,
|
||||
align: 'center',
|
||||
colIndex: index,
|
||||
dayData: weekDays.value[index],
|
||||
};
|
||||
return obj;
|
||||
});
|
||||
});
|
||||
|
||||
const getHeaderFormattedDate = (date) => {
|
||||
const newDate = new Date(date);
|
||||
const day = String(newDate.getDate()).padStart(2, '0');
|
||||
const monthName = newDate.toLocaleString(locale.value, { month: 'long' });
|
||||
return `${day} ${monthName}`;
|
||||
};
|
||||
|
||||
const formattedWeekTotalHours = computed(() =>
|
||||
secondsToHoursMinutes(weekTotalHours.value)
|
||||
);
|
||||
|
||||
const onInputChange = async (date) => {
|
||||
if (!date) return;
|
||||
|
||||
const { year, month, day } = date.scope.timestamp;
|
||||
const _date = new Date(year, month - 1, day);
|
||||
setDate(_date);
|
||||
};
|
||||
|
||||
const setDate = async (date) => {
|
||||
if (!date) return;
|
||||
selectedDate.value = date;
|
||||
selectedDate.value.setHours(0, 0, 0, 0);
|
||||
|
||||
const newStartOfWeek = getStartOfWeek(selectedDate.value); // Obtener el día de inicio de la semana a partir de la fecha seleccionada
|
||||
const newEndOfWeek = getEndOfWeek(newStartOfWeek); // Obtener el fin de la semana a partir de la fecha de inicio de la semana
|
||||
|
||||
startOfWeek.value = newStartOfWeek;
|
||||
endOfWeek.value = newEndOfWeek;
|
||||
selectedWeekNumber.value = getWeekOfYear(newStartOfWeek); // Asignar el número de la semana del año
|
||||
|
||||
getWeekDates(newStartOfWeek, newEndOfWeek);
|
||||
|
||||
await nextTick(); // Esperar actualización del DOM y luego fetchear data necesaria
|
||||
await fetchHours();
|
||||
await fetchWeekData();
|
||||
};
|
||||
|
||||
// Función para obtener el inicio de la semana a partir de una fecha
|
||||
const getStartOfWeek = (selectedDate) => {
|
||||
const dayOfWeek = selectedDate.getDay(); // Obtener el día de la semana de la fecha seleccionada
|
||||
const startOfWeek = new Date(selectedDate);
|
||||
startOfWeek.setDate(selectedDate.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)); // Calcular el inicio de la semana
|
||||
return startOfWeek;
|
||||
};
|
||||
|
||||
// Función para obtener el fin de la semana a partir del inicio de la semana
|
||||
const getEndOfWeek = (startOfWeek) => {
|
||||
const endOfWeek = new Date(startOfWeek);
|
||||
endOfWeek.setHours(23, 59, 59, 59);
|
||||
endOfWeek.setDate(startOfWeek.getDate() + 6); // Calcular el fin de la semana sumando 6 días al inicio de la semana
|
||||
return endOfWeek;
|
||||
};
|
||||
|
||||
// Función para obtener las fechas de la semana seleccionada
|
||||
const getWeekDates = (startOfWeek, endOfWeek) => {
|
||||
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(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
|
||||
}
|
||||
};
|
||||
|
||||
const workerHoursFilter = computed(() => ({
|
||||
where: {
|
||||
and: [{ timed: { gte: startOfWeek.value } }, { timed: { lte: endOfWeek.value } }],
|
||||
},
|
||||
}));
|
||||
|
||||
const getWorkedHours = async (from, to) => {
|
||||
weekTotalHours.value = null;
|
||||
let _weekTotalHours = 0;
|
||||
let params = {
|
||||
from: from,
|
||||
id: route.params.id,
|
||||
to: to,
|
||||
};
|
||||
|
||||
const { data } = await axios.get(`Workers/${route.params.id}/getWorkedHours`, {
|
||||
params,
|
||||
});
|
||||
|
||||
const workDays = data;
|
||||
const map = new Map();
|
||||
|
||||
for (const workDay of workDays) {
|
||||
workDay.dated = new Date(workDay.dated);
|
||||
map.set(workDay.dated, workDay);
|
||||
_weekTotalHours += workDay.workedHours;
|
||||
}
|
||||
|
||||
for (const weekDay of weekDays.value) {
|
||||
const workDay = workDays.find((day) => {
|
||||
let from = new Date(day.dated);
|
||||
from.setHours(0, 0, 0, 0);
|
||||
|
||||
let to = new Date(day.dated);
|
||||
to.setHours(23, 59, 59, 59);
|
||||
|
||||
return weekDay.dated >= from && weekDay.dated <= to;
|
||||
});
|
||||
|
||||
if (workDay) {
|
||||
weekDay.expectedHours = workDay.expectedHours;
|
||||
weekDay.workedHours = workDay.workedHours;
|
||||
}
|
||||
}
|
||||
weekTotalHours.value = _weekTotalHours;
|
||||
};
|
||||
|
||||
const getAbsences = async () => {
|
||||
const params = {
|
||||
workerFk: route.params.id,
|
||||
businessFk: null,
|
||||
year: startOfWeek.value.getFullYear(),
|
||||
};
|
||||
|
||||
const { data } = await axios.get('Calendars/absences', { params });
|
||||
if (data) addEvents(data);
|
||||
};
|
||||
|
||||
const addEvents = (data) => {
|
||||
const events = {};
|
||||
|
||||
const addEvent = (day, event) => {
|
||||
events[new Date(day).getTime()] = event;
|
||||
};
|
||||
|
||||
if (data.holidays) {
|
||||
data.holidays.forEach((holiday) => {
|
||||
const holidayDetail = holiday.detail && holiday.detail.description;
|
||||
const holidayType = holiday.type && holiday.type.name;
|
||||
const holidayName = holidayDetail || holidayType;
|
||||
|
||||
addEvent(holiday.dated, {
|
||||
name: holidayName,
|
||||
color: '#ff0',
|
||||
});
|
||||
});
|
||||
}
|
||||
if (data.absences) {
|
||||
data.absences.forEach((absence) => {
|
||||
const type = absence.absenceType;
|
||||
addEvent(absence.dated, {
|
||||
name: type.name,
|
||||
color: type.rgb,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
weekDays.value.forEach((day) => {
|
||||
const timestamp = day.dated.getTime();
|
||||
if (events[timestamp]) day.event = events[timestamp];
|
||||
});
|
||||
};
|
||||
|
||||
const fetchHours = async () => {
|
||||
try {
|
||||
await workerHoursRef.value.fetch();
|
||||
await getWorkedHours(startOfWeek.value, endOfWeek.value);
|
||||
await getAbsences();
|
||||
} catch (err) {
|
||||
console.error('Error fetching worker hours');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchWorkerTimeControlMails = async (filter) => {
|
||||
try {
|
||||
const { data } = await axios.get('WorkerTimeControlMails', {
|
||||
params: { filter: JSON.stringify(filter) },
|
||||
});
|
||||
|
||||
return data;
|
||||
} catch (err) {
|
||||
console.error('Error fetching worker time control mails');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchWeekData = async () => {
|
||||
try {
|
||||
const filter = {
|
||||
where: {
|
||||
workerFk: route.params.id,
|
||||
year: selectedDate.value ? selectedDate.value?.getFullYear() : null,
|
||||
week: selectedWeekNumber.value,
|
||||
},
|
||||
};
|
||||
|
||||
const data = await fetchWorkerTimeControlMails(filter);
|
||||
if (!data.length) {
|
||||
state.value = null;
|
||||
} else {
|
||||
const [mail] = data;
|
||||
state.value = mail.state;
|
||||
reason.value = mail.reason;
|
||||
}
|
||||
|
||||
await canBeResend();
|
||||
} catch (err) {
|
||||
console.error('Error fetching week data');
|
||||
}
|
||||
};
|
||||
|
||||
const canBeResend = async () => {
|
||||
canResend.value = false;
|
||||
|
||||
const filter = {
|
||||
where: {
|
||||
year: selectedDate.value.getFullYear(),
|
||||
week: selectedWeekNumber.value,
|
||||
},
|
||||
limit: 1,
|
||||
};
|
||||
|
||||
const data = await fetchWorkerTimeControlMails(filter);
|
||||
if (data.length) canResend.value = true;
|
||||
};
|
||||
|
||||
const setHours = (data) => {
|
||||
for (const weekDay of weekDays.value) {
|
||||
if (data) {
|
||||
let day = weekDay.dated.getDay();
|
||||
weekDay.hours = data
|
||||
.filter((hour) => new Date(hour.timed).getDay() == day)
|
||||
.sort((a, b) => new Date(a.timed) - new Date(b.timed));
|
||||
} else weekDay.hours = null;
|
||||
}
|
||||
};
|
||||
|
||||
const getFinishTime = () => {
|
||||
if (!weekDays.value || weekDays.value.length === 0) return;
|
||||
|
||||
let today = Date.vnNew();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
let todayInWeek = weekDays.value.find(
|
||||
(day) => day.dated.getTime() === today.getTime()
|
||||
);
|
||||
|
||||
if (todayInWeek && todayInWeek.hours && todayInWeek.hours.length) {
|
||||
const remainingTime = todayInWeek.workedHours
|
||||
? (todayInWeek.expectedHours - todayInWeek.workedHours) * 1000
|
||||
: null;
|
||||
const lastKnownEntry = todayInWeek.hours[todayInWeek.hours.length - 1];
|
||||
const lastKnownTime = new Date(lastKnownEntry.timed).getTime();
|
||||
const finishTimeStamp =
|
||||
lastKnownTime && remainingTime ? lastKnownTime + remainingTime : null;
|
||||
|
||||
if (finishTimeStamp) return toTimeFormat(finishTimeStamp) + ' h.';
|
||||
}
|
||||
};
|
||||
|
||||
const updateData = async () => {
|
||||
await fetchHours();
|
||||
await getMailStates(selectedDate.value);
|
||||
};
|
||||
|
||||
const getMailStates = async (date) => {
|
||||
const params = {
|
||||
month: date.getMonth() + 1,
|
||||
year: date.getFullYear(),
|
||||
};
|
||||
|
||||
const { data } = await axios.get(
|
||||
`WorkerTimeControls/${route.params.id}/getMailStates`,
|
||||
{ params }
|
||||
);
|
||||
workerTimeControlMails.value = data;
|
||||
};
|
||||
|
||||
const showWorkerTimeForm = (propValue, formType) => {
|
||||
const isEditForm = formType === 'edit';
|
||||
|
||||
workerTimeFormProps.entryId = isEditForm ? propValue.id : null;
|
||||
workerTimeFormProps.entryCode = isEditForm ? propValue.entryCode : null;
|
||||
workerTimeFormProps.dated = isEditForm ? null : propValue;
|
||||
|
||||
workerTimeFormDialogRef.value.show();
|
||||
};
|
||||
|
||||
const showReasonForm = () => {
|
||||
workerTimeReasonFormDialogRef.value.show();
|
||||
};
|
||||
|
||||
const updateWorkerTimeControlMail = async (state, reason) => {
|
||||
try {
|
||||
const params = {
|
||||
workerId: Number(route.params.id),
|
||||
year: selectedDate.value.getFullYear(),
|
||||
week: selectedWeekNumber.value,
|
||||
state,
|
||||
};
|
||||
|
||||
if (reason) params.reason = reason;
|
||||
|
||||
await axios.post('WorkerTimeControls/updateWorkerTimeControlMail', params);
|
||||
await getMailStates(selectedDate.value);
|
||||
await fetchWeekData();
|
||||
notify(t('globals.dataSaved'), 'positive');
|
||||
} catch (err) {
|
||||
console.error('Error updating worker time control mail');
|
||||
}
|
||||
};
|
||||
|
||||
const isSatisfied = async () => {
|
||||
await updateWorkerTimeControlMail('CONFIRMED');
|
||||
};
|
||||
|
||||
const isUnsatisfied = async (reason) => {
|
||||
if (!reason) {
|
||||
notify(t('You must indicate a reason', 'negative'));
|
||||
return;
|
||||
}
|
||||
updateWorkerTimeControlMail('REVISE', reason);
|
||||
};
|
||||
|
||||
const resendEmail = async () => {
|
||||
try {
|
||||
const params = {
|
||||
recipient: worker.value?.user?.email,
|
||||
week: selectedWeekNumber.value,
|
||||
year: selectedDate.value.getFullYear(),
|
||||
workerId: Number(route.params.id),
|
||||
state: 'SENDED',
|
||||
};
|
||||
await axios.post('WorkerTimeControls/weekly-hour-hecord-email', params);
|
||||
await getMailStates(selectedDate.value);
|
||||
notify(t('Email sended'), 'positive');
|
||||
} catch (err) {
|
||||
console.error('Error sending email');
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
weekdayStore.initStore();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await setDate(Date.vnNew());
|
||||
await getMailStates(selectedDate.value);
|
||||
stateStore.rightDrawer = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
ref="workerHoursRef"
|
||||
url="WorkerTimeControls/filter"
|
||||
:filter="workerHoursFilter"
|
||||
:params="{
|
||||
workerFk: route.params.id,
|
||||
}"
|
||||
@on-fetch="(data) => setHours(data)"
|
||||
/>
|
||||
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
|
||||
<div>
|
||||
<QBtnGroup push class="q-gutter-x-sm" flat>
|
||||
<QBtn
|
||||
v-if="isHimSelf && state"
|
||||
:label="t('Satisfied')"
|
||||
color="primary"
|
||||
type="submit"
|
||||
:disabled="state == 'CONFIRMED'"
|
||||
@click="isSatisfied()"
|
||||
/>
|
||||
<QBtn
|
||||
v-if="isHimSelf && state"
|
||||
:label="t('Not satisfied')"
|
||||
color="primary"
|
||||
type="submit"
|
||||
:disabled="state == 'REVISE'"
|
||||
@click="showReasonForm()"
|
||||
style="margin-left: 1px"
|
||||
/>
|
||||
</QBtnGroup>
|
||||
<QBtnGroup push class="q-gutter-x-sm" flat style="margin-left: 0px">
|
||||
<QBtn
|
||||
v-if="reason && state && (isHimSelf || isHr)"
|
||||
:label="t('Reason')"
|
||||
color="primary"
|
||||
type="submit"
|
||||
@click="showReasonForm()"
|
||||
/>
|
||||
<QBtn
|
||||
v-if="isHr && state !== 'CONFIRMED' && canResend"
|
||||
:label="state ? t('Resend') : t('globals.send')"
|
||||
color="primary"
|
||||
type="submit"
|
||||
@click="
|
||||
openConfirmationModal(
|
||||
t('Send time control email'),
|
||||
t('Are you sure you want to send it?'),
|
||||
resendEmail
|
||||
)
|
||||
"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ state ? t('Resend') : t('globals.send') }}
|
||||
{{ t('email of this week to the user') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</QBtnGroup>
|
||||
</div>
|
||||
</Teleport>
|
||||
<template v-if="stateStore.isHeaderMounted()">
|
||||
<Teleport to="#actions-append">
|
||||
<div class="row q-gutter-x-sm">
|
||||
<QBtn
|
||||
flat
|
||||
@click="stateStore.toggleRightDrawer()"
|
||||
round
|
||||
dense
|
||||
icon="menu"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('globals.collapseMenu') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="260" class="q-pa-md">
|
||||
<div class="q-pa-md q-mb-md" style="border: 2px solid #222">
|
||||
<QCardSection horizontal>
|
||||
<span class="text-weight-bold text-subtitle1 text-center full-width">
|
||||
{{ t('Hours') }}
|
||||
</span>
|
||||
</QCardSection>
|
||||
<QCardSection class="column items-center" horizontal>
|
||||
<div>
|
||||
<span class="details-label">{{ t('Total semana') }} </span>
|
||||
<span>: {{ formattedWeekTotalHours }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="details-label">{{ t('Termina a las') }}: </span>
|
||||
<span>{{ dashIfEmpty(getFinishTime()) }}</span>
|
||||
</div>
|
||||
</QCardSection>
|
||||
</div>
|
||||
<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">
|
||||
<QTable :columns="columns" :rows="['']" hide-bottom class="full-width">
|
||||
<template #header="props">
|
||||
<QTr :props="props" no-hover>
|
||||
<QTh
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
auto-width
|
||||
style="vertical-align: top"
|
||||
>
|
||||
<div class="column-title-container">
|
||||
<span class="text-primary">{{ t(col.label) }}</span>
|
||||
<span class="q-mb-xs">{{ col.formattedDate }}</span>
|
||||
<WorkerDateLabel
|
||||
v-if="col.dayData?.event"
|
||||
:color="col.dayData.event.color"
|
||||
>
|
||||
<span>
|
||||
{{ col.dayData.event.name }}
|
||||
</span>
|
||||
</WorkerDateLabel>
|
||||
</div>
|
||||
</QTh>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<QTr no-hover>
|
||||
<QTd
|
||||
v-for="(day, index) in props.cols"
|
||||
:key="index"
|
||||
style="padding: 20px 16px !important"
|
||||
>
|
||||
<div class="full-height full-width column items-center">
|
||||
<WorkerTimeHourChip
|
||||
v-for="(hour, ind) in day.dayData?.hours"
|
||||
:key="ind"
|
||||
:hour="hour.timed"
|
||||
:manual="hour.manual"
|
||||
:direction="hour.direction"
|
||||
:id="hour.id"
|
||||
@on-hour-entry-deleted="updateData()"
|
||||
@show-worker-time-form="
|
||||
showWorkerTimeForm(
|
||||
{ id: hour.id, entryCode: hour.direction },
|
||||
'edit'
|
||||
)
|
||||
"
|
||||
class="hour-chip"
|
||||
/>
|
||||
</div>
|
||||
</QTd>
|
||||
</QTr>
|
||||
<QTr no-hover>
|
||||
<QTd v-for="(day, index) in props.cols" :key="index">
|
||||
<div class="column items-center justify-center">
|
||||
<span class="q-mb-md text-sm text-body1">
|
||||
{{ secondsToHoursMinutes(day.dayData?.workedHours) }}
|
||||
</span>
|
||||
<QIcon
|
||||
name="add_circle"
|
||||
color="primary"
|
||||
class="fill-icon cursor-pointer"
|
||||
size="sm"
|
||||
@click="showWorkerTimeForm(day.dayData?.dated, 'create')"
|
||||
>
|
||||
<QTooltip>{{ t('Add time') }}</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
</QTd>
|
||||
</QTr>
|
||||
</template>
|
||||
</QTable>
|
||||
<QDialog ref="workerTimeFormDialogRef">
|
||||
<WorkerTimeForm v-bind="workerTimeFormProps" @on-data-saved="updateData()" />
|
||||
</QDialog>
|
||||
<QDialog ref="workerTimeReasonFormDialogRef">
|
||||
<WorkerTimeReasonForm
|
||||
@on-submit="isUnsatisfied($event)"
|
||||
:reason="reason"
|
||||
:is-him-self="isHimSelf"
|
||||
/>
|
||||
</QDialog>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.column-title-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.details-label {
|
||||
color: var(--vn-label);
|
||||
}
|
||||
|
||||
.hour-chip {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Hours: Horas
|
||||
Total semana: Total semana
|
||||
Termina a las: Termina a las
|
||||
Add time: Añadir hora
|
||||
Reason: Motivo
|
||||
Not satisfied: No conforme
|
||||
Satisfied: Conforme
|
||||
Resend: Reenviar
|
||||
email of this week to the user: email de esta semana al usuario
|
||||
Email sended: Email enviado
|
||||
Send time control email: Enviar email control horario
|
||||
Are you sure you want to send it?: ¿Seguro que quieres enviarlo?
|
||||
You must indicate a reason: Debes indicar un motivo
|
||||
</i18n>
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
|
||||
import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selectedDates: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
showNavigation: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
activeDate: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
workerTimeControlMails: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'clickDate', 'onMoved']);
|
||||
|
||||
const { locale } = useI18n();
|
||||
|
||||
const calendarRef = ref(null);
|
||||
|
||||
const stateClasses = {
|
||||
CONFIRMED: {
|
||||
className: 'confirmed',
|
||||
title: 'Conforme',
|
||||
},
|
||||
REVISE: {
|
||||
className: 'revise',
|
||||
title: 'No conforme',
|
||||
},
|
||||
SENDED: {
|
||||
className: 'sended',
|
||||
title: 'Pendiente',
|
||||
},
|
||||
};
|
||||
|
||||
const value = computed({
|
||||
get: () => $props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
|
||||
const formattedNavigationLabel = computed(() => {
|
||||
const [year, month, day] = $props.modelValue.split('-');
|
||||
const date = new Date(year, month - 1, day);
|
||||
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();
|
||||
};
|
||||
|
||||
const onNext = () => {
|
||||
calendarRef.value.next();
|
||||
};
|
||||
|
||||
const clickDate = (ev) => {
|
||||
emit('clickDate', ev);
|
||||
};
|
||||
|
||||
const onMoved = (ev) => {
|
||||
emit('onMoved', new Date(ev.year, ev.month - 1, ev.day));
|
||||
};
|
||||
|
||||
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>
|
||||
<QCalendarMonthWrapper>
|
||||
<template #header>
|
||||
<div class="row items-center full-width">
|
||||
<QIcon name="arrow_back_ios" class="nav-arrow col" @click="onPrev" />
|
||||
<span class="col-6 text-no-wrap text-center text-subtitle1">{{
|
||||
formattedNavigationLabel
|
||||
}}</span>
|
||||
<QIcon name="arrow_forward_ios" class="nav-arrow col" @click="onNext" />
|
||||
</div>
|
||||
</template>
|
||||
<template #calendar>
|
||||
<QCalendarMonth
|
||||
ref="calendarRef"
|
||||
v-model="value"
|
||||
show-work-weeks
|
||||
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
|
||||
:selected-dates="selectedDates"
|
||||
:locale="locale"
|
||||
mini-mode
|
||||
enable-outside-days
|
||||
class="q-py-sm"
|
||||
no-active-date
|
||||
@click-date="clickDate"
|
||||
@moved="onMoved"
|
||||
/>
|
||||
</template>
|
||||
</QCalendarMonthWrapper>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.confirmed {
|
||||
color: #97b92f;
|
||||
}
|
||||
|
||||
.revise {
|
||||
color: #f61e1e;
|
||||
}
|
||||
|
||||
.sended {
|
||||
color: #d19b25;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<script setup>
|
||||
import { reactive, ref, computed, onBeforeMount } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||
import FormModelPopup from 'components/FormModelPopup.vue';
|
||||
import VnInputTime from 'components/common/VnInputTime.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
entryId: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
entryCode: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
dated: {
|
||||
type: Date,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['onDataSaved']);
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
let workerHourEntry = reactive({});
|
||||
|
||||
const entryDirections = [
|
||||
{ code: 'in', description: t('Entrada') },
|
||||
{ code: 'middle', description: t('Intermedio') },
|
||||
{ code: 'out', description: t('Salida') },
|
||||
];
|
||||
|
||||
const closeButton = ref(null);
|
||||
|
||||
const onDataSaved = () => {
|
||||
emit('onDataSaved');
|
||||
closeForm();
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
if (closeButton.value) closeButton.value.click();
|
||||
};
|
||||
|
||||
const isEditMode = computed(() => !!$props.entryId);
|
||||
|
||||
const title = computed(() => (isEditMode.value ? t('Edit entry') : t('Add time')));
|
||||
|
||||
const urlCreate = computed(() =>
|
||||
isEditMode.value
|
||||
? `WorkerTimeControls/${$props.entryId}/updateTimeEntry`
|
||||
: `WorkerTimeControls/${route.params.id}/addTimeEntry`
|
||||
);
|
||||
|
||||
onBeforeMount(() => {
|
||||
workerHourEntry = isEditMode.value
|
||||
? { direction: $props.entryCode }
|
||||
: {
|
||||
timed: new Date($props.dated),
|
||||
workerFk: route.params.id,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormModelPopup
|
||||
:form-initial-data="workerHourEntry"
|
||||
:observe-form-changes="false"
|
||||
:default-actions="false"
|
||||
:title="title"
|
||||
:url-create="urlCreate"
|
||||
@on-data-saved="onDataSaved()"
|
||||
>
|
||||
<template #form-inputs="{ data }">
|
||||
<VnInputTime
|
||||
v-if="!isEditMode"
|
||||
:label="t('Hour')"
|
||||
v-model="data.timed"
|
||||
autofocus
|
||||
:required="true"
|
||||
:is-clearable="false"
|
||||
/>
|
||||
<VnSelectFilter
|
||||
:label="t('Type')"
|
||||
v-model="data.direction"
|
||||
:options="entryDirections"
|
||||
option-value="code"
|
||||
option-label="description"
|
||||
hide-selected
|
||||
:required="true"
|
||||
/>
|
||||
</template>
|
||||
</FormModelPopup>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Add time: Añadir hora
|
||||
Edit entry: Editar entrada
|
||||
Hour: Hora
|
||||
Type: Tipo
|
||||
Entrada: Entrada
|
||||
Intermedio: Intermedio
|
||||
Salida: Salida
|
||||
</i18n>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { computed } from 'vue';
|
||||
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||
import { toTimeFormat } from 'filters/date.js';
|
||||
import axios from 'axios';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
manual: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
hour: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['onHourEntryDeleted', 'showWorkerTimeForm']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const { notify } = useNotify();
|
||||
const { openConfirmationModal } = useVnConfirm();
|
||||
|
||||
const directionIconTooltip = computed(() => {
|
||||
const tooltipDictionary = {
|
||||
in: t('Entrada'),
|
||||
out: t('Salida'),
|
||||
};
|
||||
return tooltipDictionary[$props.direction] || null;
|
||||
});
|
||||
|
||||
const directionIconName = computed(() => {
|
||||
const tooltipDictionary = {
|
||||
in: 'arrow_forward',
|
||||
out: 'arrow_back',
|
||||
};
|
||||
return tooltipDictionary[$props.direction] || null;
|
||||
});
|
||||
|
||||
const deleteHourEntry = async () => {
|
||||
try {
|
||||
const { data } = await axios.post(
|
||||
`WorkerTimeControls/${$props.id}/deleteTimeEntry`
|
||||
);
|
||||
|
||||
if (!data) return;
|
||||
emit('onHourEntryDeleted');
|
||||
notify('Entry removed', 'positive');
|
||||
} catch (err) {
|
||||
console.error('Error deleting hour entry');
|
||||
}
|
||||
};
|
||||
|
||||
const showWorkerTimeForm = () => emit('showWorkerTimeForm');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row items-center no-wrap">
|
||||
<QIcon class="direction-icon" :name="directionIconName" size="sm">
|
||||
<QTooltip>{{ directionIconTooltip }}</QTooltip>
|
||||
</QIcon>
|
||||
<QBadge
|
||||
rounded
|
||||
class="chip"
|
||||
:class="{ '--manual': manual }"
|
||||
@click="showWorkerTimeForm()"
|
||||
>
|
||||
<QIcon name="edit" size="sm" class="fill-icon">
|
||||
<QTooltip>{{ t('Edit') }}</QTooltip></QIcon
|
||||
>
|
||||
<span class="q-px-sm text-subtitle2 text-weight-regular">{{
|
||||
toTimeFormat(hour)
|
||||
}}</span>
|
||||
<QIcon
|
||||
v-if="manual"
|
||||
name="cancel"
|
||||
class="remove-icon"
|
||||
size="sm"
|
||||
@click.stop="
|
||||
openConfirmationModal(
|
||||
t('This time entry will be deleted'),
|
||||
t('Are you sure you want to delete this entry?'),
|
||||
deleteHourEntry
|
||||
)
|
||||
"
|
||||
/>
|
||||
</QBadge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chip {
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
color: #eee;
|
||||
background-color: #222;
|
||||
|
||||
&.--manual {
|
||||
color: var(--vn-accent-color);
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.direction-icon {
|
||||
color: var(--vn-label-color);
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
font-variation-settings: 'FILL' 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Entrada: Entrada
|
||||
Salida: Salida
|
||||
Edit: Editar
|
||||
This time entry will be deleted: Se eliminará la hora fichada
|
||||
Are you sure you want to delete this entry?: ¿Seguro que quieres eliminarla?
|
||||
Entry removed: Fichada borrada
|
||||
</i18n>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import FormPopup from 'components/FormPopup.vue';
|
||||
|
||||
const $props = defineProps({
|
||||
reason: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
isHimSelf: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['onSubmit']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const closeButton = ref(null);
|
||||
const reasonFormData = ref($props.reason);
|
||||
|
||||
const onSubmit = () => {
|
||||
emit('onSubmit', reasonFormData.value);
|
||||
closeForm();
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
if (closeButton.value) closeButton.value.click();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormPopup @on-submit="onSubmit()">
|
||||
<template #form-inputs>
|
||||
<QInput
|
||||
:label="t('Reason')"
|
||||
v-model="reasonFormData"
|
||||
type="textarea"
|
||||
autogrow
|
||||
:disable="!isHimSelf"
|
||||
/>
|
||||
</template>
|
||||
</FormPopup>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Reason: Motivo
|
||||
</i18n>
|
||||
|
|
@ -21,6 +21,7 @@ export default {
|
|||
'WorkerLog',
|
||||
'WorkerCalendar',
|
||||
'WorkerDms',
|
||||
'WorkerTimeControl',
|
||||
],
|
||||
departmentCard: ['BasicData'],
|
||||
},
|
||||
|
|
@ -156,6 +157,16 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Worker/Card/WorkerCalendar.vue'),
|
||||
},
|
||||
{
|
||||
name: 'WorkerTimeControl',
|
||||
path: 'time-control',
|
||||
meta: {
|
||||
title: 'timeControl',
|
||||
icon: 'access_time',
|
||||
},
|
||||
component: () =>
|
||||
import('src/pages/Worker/Card/WorkerTimeControl.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -60,11 +60,13 @@ export const useWeekdayStore = defineStore('weekdayStore', () => {
|
|||
// El día de mañana esto permitirá ordenar los weekdays en base a el locale si se lo desea reemplazando localeOrder.es por localeOrder[locale]
|
||||
const locales = [];
|
||||
for (let code of localeOrder.es) {
|
||||
const weekDay = weekdaysMap[code];
|
||||
const locale = t(`weekdays.${weekdaysMap[code].code}`);
|
||||
const obj = {
|
||||
...weekdaysMap[code],
|
||||
locale: t(`weekdays.${weekdaysMap[code].code}`),
|
||||
localeChar: t(`weekdays.${weekdaysMap[code].code}`).substr(0, 1),
|
||||
localeAbr: t(`weekdays.${weekdaysMap[code].code}`).substr(0, 3),
|
||||
...weekDay,
|
||||
locale,
|
||||
localeChar: locale.substr(0, 1),
|
||||
localeAbr: locale.substr(0, 3),
|
||||
};
|
||||
locales.push(obj);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue