From a261de39b44de606a7e6ca8a90ca51941a69e540 Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Wed, 12 Feb 2025 12:26:43 +0100
Subject: [PATCH 1/9] feat: refs #8443 created vehicle events

---
 .../Card/VehicleEventInclusionForm.vue        | 169 ++++++++++++++
 .../Route/Vehicle/Card/VehicleEvents.vue      |  78 +++++++
 .../Route/Vehicle/Card/VehicleEventsPanel.vue | 183 +++++++++++++++
 src/pages/Route/Vehicle/VehicleCalendar.vue   | 145 ++++++++++++
 .../Route/Vehicle/VehicleCalendarGrid.vue     | 210 ++++++++++++++++++
 src/router/modules/route.js                   |  11 +-
 6 files changed, 795 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
 create mode 100644 src/pages/Route/Vehicle/Card/VehicleEvents.vue
 create mode 100644 src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue
 create mode 100644 src/pages/Route/Vehicle/VehicleCalendar.vue
 create mode 100644 src/pages/Route/Vehicle/VehicleCalendarGrid.vue

diff --git a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
new file mode 100644
index 000000000..360dc7830
--- /dev/null
+++ b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
@@ -0,0 +1,169 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FormPopup from 'components/FormPopup.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import axios from 'axios';
+
+const props = defineProps({
+    event: {
+        type: Object,
+        default: null,
+    },
+    isNewMode: {
+        type: Boolean,
+        default: true,
+    },
+    eventType: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const emit = defineEmits(['onSubmit', 'closeForm']);
+
+const route = useRoute();
+const { t } = useI18n();
+const { openConfirmationModal } = useVnConfirm();
+
+const isNew = computed(() => props.isNewMode);
+const vehicleFormData = ref({
+    started: null,
+    finished: null,
+    vehicleStateFk: null,
+    description: '',
+    vehicleFk: null,
+    userFk: null,
+});
+
+const arrayData = useArrayData('VehicleEvents');
+
+const createVehicleEvent = async () => {
+    vehicleFormData.value.vehicleFk = route.params.id;
+    if (isNew.value) {
+        await axios.post(`Vehicles/${route.params.id}/event`, vehicleFormData.value);
+    } else {
+        await axios.put(
+            `Vehicles/${route.params.id}/event/${props.event?.id}`,
+            vehicleFormData.value
+        );
+    }
+
+    await refetchEvents();
+    emit('onSubmit');
+};
+
+const deleteVehicleEvent = async () => {
+    if (!props.event) return;
+    await axios.delete(`Vehicles/${route.params.id}/event/${props.event?.id}`);
+    await refetchEvents();
+};
+
+const closeForm = () => {
+    emit('closeForm');
+};
+
+const refetchEvents = async () => {
+    await arrayData.refresh({ append: false });
+    closeForm();
+};
+
+onMounted(() => {
+    if (props.event) {
+        vehicleFormData.value = { ...props.event };
+    }
+});
+</script>
+
+<template>
+    <FormPopup
+        :title="isNew ? t('Add vehicle event') : t('Edit vehicle event')"
+        @on-submit="createVehicleEvent()"
+        :default-cancel-button="false"
+        :default-submit-button="false"
+    >
+        <template #form-inputs>
+            <VnRow>
+                <VnInputDate
+                    :label="t('Started')"
+                    v-model="vehicleFormData.started"
+                    class="full-width"
+                />
+                <VnInputDate
+                    :label="t('Finished')"
+                    v-model="vehicleFormData.finished"
+                    class="full-width"
+                />
+            </VnRow>
+            <VnRow>
+                <VnInput
+                    v-model="vehicleFormData.description"
+                    :label="t('globals.description')"
+                    type="text"
+                    class="full-width"
+                />
+            </VnRow>
+            <VnRow>
+                <VnInput
+                    v-model="vehicleFormData.vehicleStateFk"
+                    :label="t('globals.state')"
+                    type="number"
+                    min="0"
+                    class="full-width"
+                />
+            </VnRow>
+            <VnRow>
+                <VnInput
+                    v-model="vehicleFormData.userFk"
+                    :label="t('globals.user')"
+                    type="number"
+                    min="0"
+                    class="full-width"
+                />
+            </VnRow>
+        </template>
+        <template #custom-buttons>
+            <QBtn
+                :label="t('globals.cancel')"
+                color="primary"
+                flat
+                class="q-mr-sm"
+                v-close-popup
+            />
+            <QBtn
+                v-if="!isNew"
+                :label="t('globals.delete')"
+                color="primary"
+                flat
+                class="q-mr-sm"
+                @click="
+                    openConfirmationModal(
+                        t('vehicleForm.deleteTitle'),
+                        t('vehicleForm.deleteSubtitle'),
+                        () => deleteVehicleEvent()
+                    )
+                "
+            />
+            <QBtn
+                :label="isNew ? t('globals.save') : t('globals.add')"
+                type="submit"
+                color="primary"
+            />
+        </template>
+    </FormPopup>
+</template>
+
+<i18n>
+    es:
+        Started: Inicio
+        Finished: Fin
+        Add vehicle event: Agregar evento
+        Edit vehicle event: Editar evento
+</i18n>
\ No newline at end of file
diff --git a/src/pages/Route/Vehicle/Card/VehicleEvents.vue b/src/pages/Route/Vehicle/Card/VehicleEvents.vue
new file mode 100644
index 000000000..552bcd2e3
--- /dev/null
+++ b/src/pages/Route/Vehicle/Card/VehicleEvents.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { ref, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VehicleEventsPanel from './VehicleEventsPanel.vue';
+import VehicleCalendarGrid from '../VehicleCalendarGrid.vue';
+import VehicleEventInclusionForm from './VehicleEventInclusionForm.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import RightMenu from 'src/components/common/RightMenu.vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+const firstDay = ref();
+const lastDay = ref();
+const events = ref([]);
+const formModeName = ref('include');
+const showVehicleEventForm = ref(false);
+const vehicleEventsFormProps = reactive({
+    isNewMode: true,
+    date: null,
+    event: null,
+});
+
+const openForm = (data, isBtnAdd) => {
+    const { date = null, isNewMode, event } = data;
+    vehicleEventsFormProps.date = date;
+    vehicleEventsFormProps.isNewMode = isNewMode;
+    vehicleEventsFormProps.event = event;
+
+    showVehicleEventForm.value = true;
+};
+
+const onVehicleEventFormClose = () => {
+    showVehicleEventForm.value = false;
+    vehicleEventsFormProps.value = {};
+};
+</script>
+
+<template>
+        <RightMenu>
+            <template #right-panel v-if="stateStore.isHeaderMounted()">
+                <VehicleEventsPanel
+                    :first-day="firstDay"
+                    :last-day="lastDay"
+                    :events="events"
+                />
+            </template>
+        </RightMenu>
+    <QPage class="q-pa-md flex justify-center">
+        <VehicleCalendarGrid
+            v-model:events="events"
+            v-model:firstDay="firstDay"
+            v-model:lastDay="lastDay"
+            data-key="VehicleEvents"
+            @on-date-selected="openForm"
+        />
+        <QDialog v-model="showVehicleEventForm" @hide="onVehicleEventFormClose()">
+            <VehicleEventInclusionForm
+                v-bind="vehicleEventsFormProps"
+                @close-form="onVehicleEventFormClose()"
+            />
+        </QDialog>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn
+                @click="openForm({ isNewMode: true }, true)"
+                color="primary"
+                fab
+                icon="add"
+                v-shortcut="'+'"
+            />
+            <QTooltip class="text-no-wrap">
+                {{ t('eventsInclusionForm.addEvent') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
diff --git a/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue b/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue
new file mode 100644
index 000000000..9ce2f44b4
--- /dev/null
+++ b/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue
@@ -0,0 +1,183 @@
+<script setup>
+import { onMounted, watch, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { useArrayData } from 'src/composables/useArrayData';
+import axios from 'axios';
+import { toDateFormat } from 'src/filters/date.js';
+import { dashIfEmpty } from 'src/filters';
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import { useVnConfirm } from 'composables/useVnConfirm';
+
+const props = defineProps({
+    firstDay: {
+        type: Date,
+        default: null,
+    },
+    lastDay: {
+        type: Date,
+        default: null,
+    },
+    events: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const emit = defineEmits(['openVehicleForm']);
+const { t } = useI18n();
+const route = useRoute();
+const weekdayStore = useWeekdayStore();
+const { openConfirmationModal } = useVnConfirm();
+const vehicleStates = ref({});
+const users = ref({});
+
+const fetchVehicleState = async () => {
+    const vehicles = await axios.get('VehicleStates');
+    vehicleStates.value = vehicles.data;
+};
+
+const fetchUser = async (userId) => {
+    console.log(userId);
+    if (!userId || users.value[userId]) return;
+
+    const usersData = await axios.get(`Accounts/2/user`);
+    users.value[userId] = usersData.data;
+    console.log(users.value[userId]);
+};
+
+const getVehicleStateName = (id) => {
+    return vehicleStates.value[id - 1] ?? dashIfEmpty(id - 1);
+};
+
+const getUserName = (id) => {
+    console.log(users.value?.nickname);
+    return users.value?.nickname ?? dashIfEmpty(id - 1);
+};
+
+const params = computed(() => ({
+    vehicleFk: route.params.id,
+    started: props.firstDay,
+    finished: props.lastDay,
+}));
+
+const arrayData = useArrayData('VehicleEvents', {
+    params: params,
+    url: `Vehicles/getVehicleEventsFiltered`,
+});
+
+const fetchData = async () => {
+    if (!params.value.vehicleFk || !params.value.started || !params.value.finished)
+        return;
+
+    await arrayData.applyFilter({
+        params: params.value,
+    });
+};
+
+watch(
+    params,
+    async () => {
+        await fetchData();
+    },
+    { immediate: true, deep: true },
+);
+
+const deleteEvent = async (id) => {
+    if (!id) return;
+    await axios.delete(`Vehicles/${route.params.id}/event/${id}`);
+    await fetchData();
+};
+
+const openInclusionForm = (event) => {
+    emit('openVehicleForm', {
+        date: event.dated,
+        event,
+        isNewMode: false,
+    });
+};
+
+onMounted(async () => {
+    weekdayStore.initStore();
+    await fetchVehicleState();
+
+    for (let event of props.events) {
+        await fetchUser(event.userFk);
+    }
+});
+</script>
+
+<template>
+    <QForm @submit="onSubmit()">
+        <div class="column q-pa-md q-gutter-y-sm"></div>
+        <span class="color-vn-label text-subtitle1 q-px-md">{{
+            t('eventsPanel.events')
+        }}</span>
+        <QList>
+            <QItem v-for="(event, index) in events" :key="index" class="event-card">
+                <QItemSection left @click="openInclusionForm(event)">
+                    <div class="q-mb-xs">
+                        <span
+                            >({{ toDateFormat(event.started) }} -
+                            {{ toDateFormat(event.finished) }})</span
+                        >
+                    </div>
+                    <span class="color-vn-label"
+                        >{{ t('globals.description') }}:
+                        <span class="color-vn-text q-ml-xs">{{
+                            dashIfEmpty(event.description)
+                        }}</span>
+                    </span>
+                    <span class="color-vn-label"
+                        >{{ t('globals.state') }}:
+                        <span class="color-vn-text">{{
+                            getVehicleStateName(event.vehicleStateFk).state
+                        }}</span>
+                    </span>
+                    <span class="color-vn-label"
+                        >{{ t('globals.user') }}:
+                        <span class="color-vn-text">{{ getUserName(event.userFk) }}</span>
+                    </span>
+                </QItemSection>
+                <QItemSection side @click="openInclusionForm(event)">
+                    <QBtn
+                        icon="delete"
+                        flat
+                        dense
+                        size="md"
+                        color="primary"
+                        @click.stop="
+                            openConfirmationModal(
+                                t('vehicle.deleteTitle'),
+                                t('vehicle.deleteSubtitle'),
+                                () => deleteEvent(event.id),
+                            )
+                        "
+                    >
+                        <QTooltip>{{ t('eventsPanel.delete') }}</QTooltip>
+                    </QBtn>
+                </QItemSection>
+            </QItem>
+            <span
+                v-if="!events.length"
+                class="flex justify-center text-h5 color-vn-label"
+            >
+                {{ t('globals.noResults') }}
+            </span>
+        </QList>
+    </QForm>
+</template>
+
+<style scoped lang="scss">
+.event-card {
+    display: flex;
+    border-bottom: $border-thin-light;
+    margin: 0;
+
+    &:hover {
+        background-color: var(--vn-accent-color);
+        cursor: pointer;
+    }
+}
+</style>
diff --git a/src/pages/Route/Vehicle/VehicleCalendar.vue b/src/pages/Route/Vehicle/VehicleCalendar.vue
new file mode 100644
index 000000000..a7d51daa1
--- /dev/null
+++ b/src/pages/Route/Vehicle/VehicleCalendar.vue
@@ -0,0 +1,145 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { date } from 'quasar';
+
+import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
+import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
+import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+
+const props = defineProps({
+    year: {
+        type: Number,
+        required: true,
+    },
+    month: {
+        type: Number,
+        required: true,
+    },
+    monthDate: {
+        type: Object,
+        default: null,
+    },
+    daysMap: {
+        type: Object,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['onDateSelected']);
+
+const { locale } = useI18n();
+const weekdayStore = useWeekdayStore();
+const calendarRef = ref(null);
+const today = ref(date.formatDate(Date.vnNew(), 'YYYY-MM-DD'));
+const todayTimestamp = computed(() => {
+    const date = Date.vnNew();
+    date.setHours(0, 0, 0, 0);
+    return date.getTime();
+});
+const _monthDate = computed(() => date.formatDate(props.monthDate, 'YYYY-MM-DD'));
+
+const getEventByTimestamp = ({ year, month, day }) => {
+    const stamp = new Date(year, month - 1, day).getTime();
+    return props.daysMap[stamp] || null;
+};
+
+const getEventAttrs = ({ day }) => {
+    return {
+        class: '--event',
+        label: day,
+    };
+};
+
+const isToday = (timestamp) => {
+    const { year, month, day } = timestamp;
+    return todayTimestamp.value === new Date(year, month - 1, day).getTime();
+};
+
+const calendarHeaderTitle = computed(() => {
+    return `${weekdayStore.getLocaleMonths[props.month - 1].locale} ${props.year}`;
+});
+
+const handleDateClick = (timestamp) => {
+    const event = getEventByTimestamp(timestamp);
+    const { year, month, day } = timestamp;
+    const date = new Date(year, month - 1, day);
+
+    emit('onDateSelected', {
+        date,
+        isNewMode: !event,
+        event: event && event.length > 0 ? event[0] : null,
+    });
+};
+</script>
+
+<template>
+    <QCalendarMonthWrapper
+        style="height: 290px; width: 290px"
+        transparent-background
+        view-customization="workerCalendar"
+    >
+        <template #header>
+            <span class="full-width text-center text-body1 q-py-sm">{{
+                calendarHeaderTitle
+            }}</span>
+        </template>
+        <template #calendar>
+            <QCalendarMonth
+                ref="calendarRef"
+                :model-value="_monthDate"
+                show-work-weeks
+                no-outside-days
+                no-active-date
+                :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+                short-weekday-label
+                :locale="locale"
+                :now="today"
+                @click-date="handleDateClick($event.scope.timestamp)"
+                mini-mode
+            >
+                <template #day="{ scope: { timestamp } }">
+                    <QBtn
+                        v-if="getEventByTimestamp(timestamp)"
+                        v-bind="{ ...getEventAttrs(timestamp) }"
+                        @click="handleDateClick(timestamp)"
+                        rounded
+                        dense
+                        flat
+                        class="calendar-event"
+                        :class="{
+                            '--today': isToday(timestamp),
+                        }"
+                    />
+                </template>
+            </QCalendarMonth>
+        </template>
+    </QCalendarMonthWrapper>
+</template>
+
+<style lang="scss">
+.calendar-event {
+    display: flex;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    font-size: 13px;
+    line-height: 1.715em;
+    cursor: pointer;
+    color: white;
+
+    &.--today {
+        border: 2px solid $info;
+    }
+
+    &.--event {
+        background-color: $positive;
+        color: black;
+    }
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+</style>
diff --git a/src/pages/Route/Vehicle/VehicleCalendarGrid.vue b/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
new file mode 100644
index 000000000..0fc440643
--- /dev/null
+++ b/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
@@ -0,0 +1,210 @@
+<script setup>
+import { computed, onMounted, ref, watch, onUnmounted, nextTick } from 'vue';
+
+import VehicleCalendar from './VehicleCalendar.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import { useArrayData } from 'src/composables/useArrayData';
+
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const emit = defineEmits([
+    'update:firstDay',
+    'update:lastDay',
+    'update:events',
+    'onDateSelected',
+]);
+
+const stateStore = useStateStore();
+const weekdayStore = useWeekdayStore();
+
+const nMonths = ref(4);
+const _date = ref(new Date());
+const _data = ref(null);
+const firstDay = ref(null);
+const lastDay = ref(null);
+const months = ref([]);
+const days = ref({});
+const events = ref([]);
+
+const arrayData = useArrayData(props.dataKey);
+const { store } = arrayData;
+
+const refreshEvents = () => {
+    days.value = {};
+    if (!data.value) return;
+
+    let day = new Date(firstDay.value.getTime());
+    while (day <= lastDay.value) {
+        let stamp = day.getTime();
+        let dayEvents = [];
+        if (events.value) {
+            for (let event of events.value) {
+                let match = (!event.started || stamp >= event.started) && (!event.finished || stamp <= event.finished);
+                
+                if (match) {
+                    dayEvents.push(event);
+                }
+            }
+        }
+        if (dayEvents.length) days.value[stamp] = dayEvents;
+
+        day.setDate(day.getDate() + 1);
+    }
+    emit('update:events', events.value);
+};
+
+const date = computed({
+    get: () => _date.value,
+    set: (value) => {
+        _date.value = value;
+        let stamp = value.getTime();
+
+        firstDay.value = new Date(stamp);
+        firstDay.value.setDate(1);
+
+        lastDay.value = new Date(stamp);
+        lastDay.value.setMonth(lastDay.value.getMonth() + nMonths.value);
+        lastDay.value.setDate(0);
+
+        months.value = [];
+        for (let i = 0; i < nMonths.value; i++) {
+            let monthDate = new Date(stamp);
+            monthDate.setMonth(value.getMonth() + i);
+            months.value.push(monthDate);
+        }
+
+        emit('update:firstDay', firstDay.value);
+        emit('update:lastDay', lastDay.value);
+        refreshEvents();
+    },
+});
+
+const data = computed({
+    get: () => {
+        return _data.value;
+    },
+    set: (value) => {
+        _data.value = value;
+
+        value = value || {};
+
+        events.value = value.events;
+
+        function toStamp(date) {
+            return date && new Date(date).setHours(0, 0, 0, 0);
+        }
+
+        let _events = value.events;
+        if (_events) {
+            for (let event of _events) {
+                event.dated = toStamp(event.dated);
+                event.finished = toStamp(event.finished);
+                event.started = toStamp(event.started);
+            }
+        }
+
+        refreshEvents();
+    },
+});
+
+watch(
+    () => store.data,
+    (value) => {
+        data.value = value;
+    },
+    { immediate: true },
+);
+
+const getMonthNameAndYear = (date) => {
+    const monthName = weekdayStore.getLocaleMonths[date.getMonth()].locale;
+    const year = date.getFullYear();
+    return `${monthName} ${year}`;
+};
+
+const headerTitle = computed(() => {
+    if (!months.value?.length) return '';
+
+    const firstMonth = getMonthNameAndYear(months.value[0]);
+    const lastMonth = getMonthNameAndYear(months.value[months.value.length - 1]);
+
+    return `${firstMonth} - ${lastMonth}`;
+});
+
+const step = (direction) => {
+    const _date = new Date(date.value);
+    _date.setMonth(_date.getMonth() + nMonths.value * direction);
+    date.value = _date;
+};
+
+const onDateSelected = (data) => emit('onDateSelected', data);
+
+onMounted(async () => {
+    let initialDate = new Date();
+    initialDate.setDate(1);
+    initialDate.setHours(0, 0, 0, 0);
+    date.value = initialDate;
+    await nextTick();
+    stateStore.rightDrawer = true;
+});
+
+onUnmounted(() => arrayData.destroy());
+</script>
+
+<template>
+    <QCard style="height: max-content">
+        <div class="calendars-header">
+            <QBtn
+                icon="arrow_left"
+                size="sm"
+                flat
+                class="full-height"
+                @click="step(-1)"
+            />
+            <span>{{ headerTitle }}</span>
+            <QBtn
+                icon="arrow_right"
+                size="sm"
+                flat
+                class="full-height"
+                @click="step(1)"
+            />
+        </div>
+        <div class="calendars-container">
+            <VehicleCalendar
+                v-for="(month, index) in months"
+                :key="index"
+                :month="month.getMonth() + 1"
+                :year="month.getFullYear()"
+                :month-date="month"
+                :days-map="days"
+                @on-date-selected="onDateSelected"
+            />
+        </div>
+    </QCard>
+</template>
+
+<style lang="scss" scoped>
+.calendars-header {
+    height: 45px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: $primary;
+    font-weight: bold;
+    font-size: 16px;
+}
+
+.calendars-container {
+    max-width: 800px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index 835324d20..c14e5f8d0 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -166,7 +166,7 @@ const vehicleCard = {
     component: () => import('src/pages/Route/Vehicle/Card/VehicleCard.vue'),
     redirect: { name: 'VehicleSummary' },
     meta: {
-        menu: ['VehicleBasicData'],
+        menu: ['VehicleBasicData', 'VehicleEvents'],
     },
     children: [
         {
@@ -187,6 +187,15 @@ const vehicleCard = {
             },
             component: () => import('src/pages/Route/Vehicle/Card/VehicleBasicData.vue'),
         },
+        {
+            name: 'VehicleEvents',
+            path: 'events',
+            meta: {
+                title: 'calendar',
+                icon: 'vn:calendar',
+            },
+            component: () => import('src/pages/Route/Vehicle/Card/VehicleEvents.vue'),
+        },
     ],
 };
 

From 398f76c6e7525eaeffcc453391a74e8c893f6b64 Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Thu, 13 Feb 2025 07:49:12 +0100
Subject: [PATCH 2/9] feat: refs #8443 added select in form for vehicle state

---
 .../Card/VehicleEventInclusionForm.vue        | 42 ++++++-------------
 .../Route/Vehicle/Card/VehicleEventsPanel.vue | 22 ----------
 2 files changed, 12 insertions(+), 52 deletions(-)

diff --git a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
index 360dc7830..800ef1b2b 100644
--- a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
@@ -11,6 +11,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const props = defineProps({
     event: {
@@ -47,12 +48,13 @@ const arrayData = useArrayData('VehicleEvents');
 
 const createVehicleEvent = async () => {
     vehicleFormData.value.vehicleFk = route.params.id;
+    vehicleFormData.value.userFk = 3;
     if (isNew.value) {
         await axios.post(`Vehicles/${route.params.id}/event`, vehicleFormData.value);
     } else {
         await axios.put(
             `Vehicles/${route.params.id}/event/${props.event?.id}`,
-            vehicleFormData.value
+            vehicleFormData.value,
         );
     }
 
@@ -90,42 +92,22 @@ onMounted(() => {
         :default-submit-button="false"
     >
         <template #form-inputs>
-            <VnRow>
-                <VnInputDate
-                    :label="t('Started')"
-                    v-model="vehicleFormData.started"
-                    class="full-width"
-                />
-                <VnInputDate
-                    :label="t('Finished')"
-                    v-model="vehicleFormData.finished"
-                    class="full-width"
-                />
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInputDate :label="t('Started')" v-model="vehicleFormData.started" />
+                <VnInputDate :label="t('Finished')" v-model="vehicleFormData.finished" />
             </VnRow>
             <VnRow>
                 <VnInput
                     v-model="vehicleFormData.description"
                     :label="t('globals.description')"
                     type="text"
-                    class="full-width"
                 />
-            </VnRow>
-            <VnRow>
-                <VnInput
+                <VnSelect
+                    url="VehicleStates"
                     v-model="vehicleFormData.vehicleStateFk"
                     :label="t('globals.state')"
-                    type="number"
-                    min="0"
-                    class="full-width"
-                />
-            </VnRow>
-            <VnRow>
-                <VnInput
-                    v-model="vehicleFormData.userFk"
-                    :label="t('globals.user')"
-                    type="number"
-                    min="0"
-                    class="full-width"
+                    option-value="id"
+                    option-label="state"
                 />
             </VnRow>
         </template>
@@ -147,7 +129,7 @@ onMounted(() => {
                     openConfirmationModal(
                         t('vehicleForm.deleteTitle'),
                         t('vehicleForm.deleteSubtitle'),
-                        () => deleteVehicleEvent()
+                        () => deleteVehicleEvent(),
                     )
                 "
             />
@@ -166,4 +148,4 @@ onMounted(() => {
         Finished: Fin
         Add vehicle event: Agregar evento
         Edit vehicle event: Editar evento
-</i18n>
\ No newline at end of file
+</i18n>
diff --git a/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue b/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue
index 9ce2f44b4..3ff849c16 100644
--- a/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue
@@ -38,24 +38,10 @@ const fetchVehicleState = async () => {
     vehicleStates.value = vehicles.data;
 };
 
-const fetchUser = async (userId) => {
-    console.log(userId);
-    if (!userId || users.value[userId]) return;
-
-    const usersData = await axios.get(`Accounts/2/user`);
-    users.value[userId] = usersData.data;
-    console.log(users.value[userId]);
-};
-
 const getVehicleStateName = (id) => {
     return vehicleStates.value[id - 1] ?? dashIfEmpty(id - 1);
 };
 
-const getUserName = (id) => {
-    console.log(users.value?.nickname);
-    return users.value?.nickname ?? dashIfEmpty(id - 1);
-};
-
 const params = computed(() => ({
     vehicleFk: route.params.id,
     started: props.firstDay,
@@ -101,10 +87,6 @@ const openInclusionForm = (event) => {
 onMounted(async () => {
     weekdayStore.initStore();
     await fetchVehicleState();
-
-    for (let event of props.events) {
-        await fetchUser(event.userFk);
-    }
 });
 </script>
 
@@ -135,10 +117,6 @@ onMounted(async () => {
                             getVehicleStateName(event.vehicleStateFk).state
                         }}</span>
                     </span>
-                    <span class="color-vn-label"
-                        >{{ t('globals.user') }}:
-                        <span class="color-vn-text">{{ getUserName(event.userFk) }}</span>
-                    </span>
                 </QItemSection>
                 <QItemSection side @click="openInclusionForm(event)">
                     <QBtn

From 8ffc3e8f2d5588e9fa38fbddbc9a0bf8fe25052d Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Mon, 3 Mar 2025 13:08:19 +0100
Subject: [PATCH 3/9] feat: refs #8443 added notifications and translations

---
 .../Card/VehicleEventInclusionForm.vue        | 21 ++++++++-----
 .../Route/Vehicle/Card/VehicleEventsPanel.vue |  6 +++-
 .../Route/Vehicle/VehicleCalendarGrid.vue     |  4 +--
 src/pages/Route/Vehicle/locale/en.yml         |  2 ++
 src/pages/Route/Vehicle/locale/es.yml         |  2 ++
 .../route/vehicle/vehicleEvents.spec.js       | 30 +++++++++++++++++++
 6 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 test/cypress/integration/route/vehicle/vehicleEvents.spec.js

diff --git a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
index 800ef1b2b..0a21c05a6 100644
--- a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
@@ -10,8 +10,10 @@ import VnInput from 'src/components/common/VnInput.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';
 import { useVnConfirm } from 'composables/useVnConfirm';
+import { useState } from 'src/composables/useState';
 import axios from 'axios';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import useNotify from 'src/composables/useNotify.js';
 
 const props = defineProps({
     event: {
@@ -32,7 +34,10 @@ const emit = defineEmits(['onSubmit', 'closeForm']);
 
 const route = useRoute();
 const { t } = useI18n();
+const { notify } = useNotify();
 const { openConfirmationModal } = useVnConfirm();
+const state = useState();
+const user = state.getUser();
 
 const isNew = computed(() => props.isNewMode);
 const vehicleFormData = ref({
@@ -48,12 +53,13 @@ const arrayData = useArrayData('VehicleEvents');
 
 const createVehicleEvent = async () => {
     vehicleFormData.value.vehicleFk = route.params.id;
-    vehicleFormData.value.userFk = 3;
+    vehicleFormData.value.userFk = user.value.id;
     if (isNew.value) {
-        await axios.post(`Vehicles/${route.params.id}/event`, vehicleFormData.value);
+        await axios.post(`VehicleEvents`, vehicleFormData.value);
+        notify(t('globals.dataSaved'), 'positive');
     } else {
-        await axios.put(
-            `Vehicles/${route.params.id}/event/${props.event?.id}`,
+        await axios.patch(
+            `VehicleEvents/${props.event?.id}`,
             vehicleFormData.value,
         );
     }
@@ -64,7 +70,8 @@ const createVehicleEvent = async () => {
 
 const deleteVehicleEvent = async () => {
     if (!props.event) return;
-    await axios.delete(`Vehicles/${route.params.id}/event/${props.event?.id}`);
+    await axios.delete(`VehicleEvents/${props.event?.id}`);
+    notify(t('globals.dataSaved'), 'positive');
     await refetchEvents();
 };
 
@@ -127,8 +134,8 @@ onMounted(() => {
                 class="q-mr-sm"
                 @click="
                     openConfirmationModal(
-                        t('vehicleForm.deleteTitle'),
-                        t('vehicleForm.deleteSubtitle'),
+                        t('vehicle.deleteTitle'),
+                        t('vehicle.deleteSubtitle'),
                         () => deleteVehicleEvent(),
                     )
                 "
diff --git a/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue b/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue
index 3ff849c16..ead43b908 100644
--- a/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue
@@ -9,6 +9,7 @@ import { toDateFormat } from 'src/filters/date.js';
 import { dashIfEmpty } from 'src/filters';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import { useVnConfirm } from 'composables/useVnConfirm';
+import useNotify from 'src/composables/useNotify.js';
 
 const props = defineProps({
     firstDay: {
@@ -28,6 +29,7 @@ const props = defineProps({
 const emit = defineEmits(['openVehicleForm']);
 const { t } = useI18n();
 const route = useRoute();
+const { notify } = useNotify();
 const weekdayStore = useWeekdayStore();
 const { openConfirmationModal } = useVnConfirm();
 const vehicleStates = ref({});
@@ -72,7 +74,8 @@ watch(
 
 const deleteEvent = async (id) => {
     if (!id) return;
-    await axios.delete(`Vehicles/${route.params.id}/event/${id}`);
+    await axios.delete(`VehicleEvents/${id}`);
+    notify(t('dataSaved'), 'positive');
     await fetchData();
 };
 
@@ -121,6 +124,7 @@ onMounted(async () => {
                 <QItemSection side @click="openInclusionForm(event)">
                     <QBtn
                         icon="delete"
+                        data-cy="delete_event"
                         flat
                         dense
                         size="md"
diff --git a/src/pages/Route/Vehicle/VehicleCalendarGrid.vue b/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
index 0fc440643..4b091980e 100644
--- a/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
+++ b/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
@@ -25,7 +25,7 @@ const stateStore = useStateStore();
 const weekdayStore = useWeekdayStore();
 
 const nMonths = ref(4);
-const _date = ref(new Date());
+const _date = ref(Date.vnNew());
 const _data = ref(null);
 const firstDay = ref(null);
 const lastDay = ref(null);
@@ -146,7 +146,7 @@ const step = (direction) => {
 const onDateSelected = (data) => emit('onDateSelected', data);
 
 onMounted(async () => {
-    let initialDate = new Date();
+    let initialDate = Date.vnNew();
     initialDate.setDate(1);
     initialDate.setHours(0, 0, 0, 0);
     date.value = initialDate;
diff --git a/src/pages/Route/Vehicle/locale/en.yml b/src/pages/Route/Vehicle/locale/en.yml
index c92022f9d..706f77e0c 100644
--- a/src/pages/Route/Vehicle/locale/en.yml
+++ b/src/pages/Route/Vehicle/locale/en.yml
@@ -15,6 +15,8 @@ vehicle:
     remove: Vehicle removed
     search: Search Vehicle
     searchInfo: Search by id or number plate
+    deleteTitle: This item will be deleted
+    deleteSubtitle: Are you sure you want to continue?
     params:
         vehicleTypeFk: Type
         vehicleStateFk: State
diff --git a/src/pages/Route/Vehicle/locale/es.yml b/src/pages/Route/Vehicle/locale/es.yml
index c878f97ac..23d163eaf 100644
--- a/src/pages/Route/Vehicle/locale/es.yml
+++ b/src/pages/Route/Vehicle/locale/es.yml
@@ -15,6 +15,8 @@ vehicle:
     remove: Vehículo eliminado
     search: Buscar Vehículo
     searchInfo: Buscar por id o matrícula
+    deleteTitle: Este elemento será eliminado
+    deleteSubtitle: ¿Seguro que quieres continuar?
     params:
         vehicleTypeFk: Tipo
         vehicleStateFk: Estado
diff --git a/test/cypress/integration/route/vehicle/vehicleEvents.spec.js b/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
new file mode 100644
index 000000000..65d5aa8a1
--- /dev/null
+++ b/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
@@ -0,0 +1,30 @@
+describe('Vehicle', () => {
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('deliveryAssistant');
+        cy.visit(`/#/route/vehicle/3/events`);
+    });
+
+    it('should add a new vehicle event', () => {
+        cy.get('.q-page-sticky > div > .q-btn').click();
+        cy.dataCy('Started_inputDate').type('05/02/2001');
+        cy.dataCy('Finished_inputDate').type('08/02/2001');
+        cy.get(':nth-child(5) > [label="Description"] > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > [data-cy="Description_input"]').type('Test');
+        cy.selectOption(':nth-child(5) > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', 3);
+        cy.get('.q-mt-lg > .q-btn--standard').click();
+    });
+
+    it('should edit a vehicle event', () => {
+        cy.get('[aria-label="Tuesday, February 6, 2001"] .q-btn__content').click();
+        cy.dataCy('Started_inputDate').clear().type('03/02/2001');
+        cy.dataCy('Finished_inputDate').clear().type('15/03/2001');
+        cy.get(':nth-child(5) > [label="Description"] > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > [data-cy="Description_input"]').clear().type('Test2');
+        cy.selectOption(':nth-child(5) > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', 5);
+        cy.get('.q-mt-lg > .q-btn--standard').click();
+    });
+
+    it('should delete a vehicle event', () => {
+        cy.dataCy('delete_event').eq(0).click();
+        cy.dataCy('VnConfirm_confirm').click();
+    });
+});

From 75a99caf510004de410a53926fde9df8046620c7 Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Fri, 21 Mar 2025 12:32:01 +0100
Subject: [PATCH 4/9] feat: refs #8443 changed VehicleEvents to use native
 loopback for events fetch

---
 src/composables/getWeekdays.js                | 10 +++
 src/css/app.scss                              | 17 ++++
 .../Card/VehicleEventInclusionForm.vue        | 49 ++++++++---
 .../Route/Vehicle/Card/VehicleEvents.vue      | 14 +++-
 .../Route/Vehicle/Card/VehicleEventsPanel.vue | 51 ++++++++---
 src/pages/Route/Vehicle/VehicleCalendar.vue   |  4 +-
 .../Route/Vehicle/VehicleCalendarGrid.vue     | 84 ++++++++-----------
 src/pages/Worker/Card/WorkerCalendarItem.vue  |  4 +-
 .../Worker/Card/WorkerTimeControlCalendar.vue |  5 +-
 src/pages/Zone/ZoneCalendar.vue               |  4 +-
 src/pages/Zone/ZoneCalendarGrid.vue           | 19 -----
 .../route/vehicle/vehicleEvents.spec.js       | 10 +--
 12 files changed, 170 insertions(+), 101 deletions(-)
 create mode 100644 src/composables/getWeekdays.js

diff --git a/src/composables/getWeekdays.js b/src/composables/getWeekdays.js
new file mode 100644
index 000000000..d619103da
--- /dev/null
+++ b/src/composables/getWeekdays.js
@@ -0,0 +1,10 @@
+import { ref } from 'vue';
+import moment from 'moment';
+
+export default function useWeekdaysOrder() {
+
+  const firstDay = moment().weekday(1).day();
+  const weekdays = [...Array(7).keys()].map(i => (i + firstDay) % 7);
+
+  return ref(weekdays);
+}
diff --git a/src/css/app.scss b/src/css/app.scss
index 994ae7ff1..7eae00f89 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -339,3 +339,20 @@ input::-webkit-inner-spin-button {
 .containerShrinked {
     width: 80%;
 }
+
+.calendars-header {
+    height: 45px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: $primary;
+    font-weight: bold;
+    font-size: 16px;
+}
+
+.calendars-container {
+    max-width: 800px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
\ No newline at end of file
diff --git a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
index 0a21c05a6..23be4340d 100644
--- a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
@@ -28,9 +28,17 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    firstDay: {
+        type: Date,
+        default: null,
+    },
+    lastDay: {
+        type: Date,
+        default: null,
+    },
 });
 
-const emit = defineEmits(['onSubmit', 'closeForm']);
+const emit = defineEmits(['onSubmit', 'closeForm', 'refresh-events']);
 
 const route = useRoute();
 const { t } = useI18n();
@@ -54,6 +62,7 @@ const arrayData = useArrayData('VehicleEvents');
 const createVehicleEvent = async () => {
     vehicleFormData.value.vehicleFk = route.params.id;
     vehicleFormData.value.userFk = user.value.id;
+    
     if (isNew.value) {
         await axios.post(`VehicleEvents`, vehicleFormData.value);
         notify(t('globals.dataSaved'), 'positive');
@@ -62,10 +71,11 @@ const createVehicleEvent = async () => {
             `VehicleEvents/${props.event?.id}`,
             vehicleFormData.value,
         );
+        notify(t('globals.dataSaved'), 'positive');
     }
-
+    
     await refetchEvents();
-    emit('onSubmit');
+    emit('closeForm');
 };
 
 const deleteVehicleEvent = async () => {
@@ -73,15 +83,35 @@ const deleteVehicleEvent = async () => {
     await axios.delete(`VehicleEvents/${props.event?.id}`);
     notify(t('globals.dataSaved'), 'positive');
     await refetchEvents();
-};
-
-const closeForm = () => {
     emit('closeForm');
 };
 
 const refetchEvents = async () => {
-    await arrayData.refresh({ append: false });
-    closeForm();
+    await arrayData.refresh({ 
+        append: false,
+        params: {
+            filter: {
+                where: {
+                    vehicleFk: route.params.id,
+                    and: [
+                        { 
+                            or: [
+                                { started: { lte: props.lastDay?.toISOString() } },
+                                { started: null }
+                            ]
+                        },
+                        { 
+                            or: [
+                                { finished: { gte: props.firstDay?.toISOString() } },
+                                { finished: null }
+                            ]
+                        }
+                    ]
+                }
+            }
+        }
+    });
+    emit('refresh-events');
 };
 
 onMounted(() => {
@@ -94,7 +124,6 @@ onMounted(() => {
 <template>
     <FormPopup
         :title="isNew ? t('Add vehicle event') : t('Edit vehicle event')"
-        @on-submit="createVehicleEvent()"
         :default-cancel-button="false"
         :default-submit-button="false"
     >
@@ -142,7 +171,7 @@ onMounted(() => {
             />
             <QBtn
                 :label="isNew ? t('globals.save') : t('globals.add')"
-                type="submit"
+                @click="createVehicleEvent"
                 color="primary"
             />
         </template>
diff --git a/src/pages/Route/Vehicle/Card/VehicleEvents.vue b/src/pages/Route/Vehicle/Card/VehicleEvents.vue
index 552bcd2e3..ba6ccad8b 100644
--- a/src/pages/Route/Vehicle/Card/VehicleEvents.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleEvents.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VehicleEventsPanel from './VehicleEventsPanel.vue';
@@ -15,7 +15,7 @@ const stateStore = useStateStore();
 const firstDay = ref();
 const lastDay = ref();
 const events = ref([]);
-const formModeName = ref('include');
+const vehicleEventsPanelRef = ref(null);
 const showVehicleEventForm = ref(false);
 const vehicleEventsFormProps = reactive({
     isNewMode: true,
@@ -23,6 +23,10 @@ const vehicleEventsFormProps = reactive({
     event: null,
 });
 
+const refreshEvents = async () => {
+    await vehicleEventsPanelRef.value.fetchData();    
+};
+
 const openForm = (data, isBtnAdd) => {
     const { date = null, isNewMode, event } = data;
     vehicleEventsFormProps.date = date;
@@ -36,15 +40,18 @@ const onVehicleEventFormClose = () => {
     showVehicleEventForm.value = false;
     vehicleEventsFormProps.value = {};
 };
+
 </script>
 
 <template>
         <RightMenu>
             <template #right-panel v-if="stateStore.isHeaderMounted()">
                 <VehicleEventsPanel
+                    ref="vehicleEventsPanelRef"
                     :first-day="firstDay"
                     :last-day="lastDay"
                     :events="events"
+                    @update:events="events = $event"
                 />
             </template>
         </RightMenu>
@@ -59,7 +66,10 @@ const onVehicleEventFormClose = () => {
         <QDialog v-model="showVehicleEventForm" @hide="onVehicleEventFormClose()">
             <VehicleEventInclusionForm
                 v-bind="vehicleEventsFormProps"
+                :first-day="firstDay"
+                :last-day="lastDay"
                 @close-form="onVehicleEventFormClose()"
+                @refresh-events="refreshEvents()"
             />
         </QDialog>
         <QPageSticky :offset="[20, 20]">
diff --git a/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue b/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue
index ead43b908..e3f22e93b 100644
--- a/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue
@@ -33,8 +33,6 @@ const { notify } = useNotify();
 const weekdayStore = useWeekdayStore();
 const { openConfirmationModal } = useVnConfirm();
 const vehicleStates = ref({});
-const users = ref({});
-
 const fetchVehicleState = async () => {
     const vehicles = await axios.get('VehicleStates');
     vehicleStates.value = vehicles.data;
@@ -52,16 +50,36 @@ const params = computed(() => ({
 
 const arrayData = useArrayData('VehicleEvents', {
     params: params,
-    url: `Vehicles/getVehicleEventsFiltered`,
+    url: `VehicleEvents`,
 });
 
 const fetchData = async () => {
-    if (!params.value.vehicleFk || !params.value.started || !params.value.finished)
-        return;
-
-    await arrayData.applyFilter({
-        params: params.value,
-    });
+    if (!params.value.vehicleFk || !props.firstDay || !props.lastDay) return;
+    
+    try {
+        await arrayData.applyFilter({
+            params: {
+                filter: {
+                    where: {
+                        vehicleFk: route.params.id,
+                        and: [
+                            { or: [
+                                { started: { lte: props.lastDay } },
+                                { started: null }
+                            ]},
+                            { or: [
+                                { finished: { gte: props.firstDay } },
+                                { finished: null }
+                            ]}
+                        ]
+                    }
+                }
+            }
+        });
+        emit('update:events', arrayData.store.data || []);
+    } catch (error) {
+        console.error('Error fetching events:', error);
+    }
 };
 
 watch(
@@ -72,10 +90,18 @@ watch(
     { immediate: true, deep: true },
 );
 
+watch(
+    () => props.events,
+    (newEvents) => {
+        emit('update:events', newEvents);
+    },
+    { deep: true }
+);
+
 const deleteEvent = async (id) => {
     if (!id) return;
     await axios.delete(`VehicleEvents/${id}`);
-    notify(t('dataSaved'), 'positive');
+    notify(t('globals.dataSaved'), 'positive');
     await fetchData();
 };
 
@@ -91,6 +117,11 @@ onMounted(async () => {
     weekdayStore.initStore();
     await fetchVehicleState();
 });
+
+defineExpose({
+    fetchData
+});
+
 </script>
 
 <template>
diff --git a/src/pages/Route/Vehicle/VehicleCalendar.vue b/src/pages/Route/Vehicle/VehicleCalendar.vue
index a7d51daa1..cecbb186e 100644
--- a/src/pages/Route/Vehicle/VehicleCalendar.vue
+++ b/src/pages/Route/Vehicle/VehicleCalendar.vue
@@ -7,6 +7,7 @@ import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
 import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
 import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import useWeekdaysOrder from 'src/composables/getWeekdays';
 
 const props = defineProps({
     year: {
@@ -31,6 +32,7 @@ const emit = defineEmits(['onDateSelected']);
 
 const { locale } = useI18n();
 const weekdayStore = useWeekdayStore();
+const weekDays = useWeekdaysOrder();
 const calendarRef = ref(null);
 const today = ref(date.formatDate(Date.vnNew(), 'YYYY-MM-DD'));
 const todayTimestamp = computed(() => {
@@ -92,7 +94,7 @@ const handleDateClick = (timestamp) => {
                 show-work-weeks
                 no-outside-days
                 no-active-date
-                :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+                :weekdays="weekDays"
                 short-weekday-label
                 :locale="locale"
                 :now="today"
diff --git a/src/pages/Route/Vehicle/VehicleCalendarGrid.vue b/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
index 4b091980e..7fd30dd47 100644
--- a/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
+++ b/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
@@ -38,28 +38,32 @@ const { store } = arrayData;
 
 const refreshEvents = () => {
     days.value = {};
-    if (!data.value) return;
-
+    if (!events.value || !events.value.length) return;
+    
     let day = new Date(firstDay.value.getTime());
     while (day <= lastDay.value) {
         let stamp = day.getTime();
         let dayEvents = [];
-        if (events.value) {
-            for (let event of events.value) {
-                let match = (!event.started || stamp >= event.started) && (!event.finished || stamp <= event.finished);
-                
-                if (match) {
-                    dayEvents.push(event);
-                }
+        
+        for (let event of events.value) {
+            const eventStart = event.started ? new Date(event.started).getTime() : null;
+            const eventEnd = event.finished ? new Date(event.finished).getTime() : null;
+            
+            let match = (!eventStart || stamp >= eventStart) && 
+                        (!eventEnd || stamp <= eventEnd);
+            
+            if (match) {
+                dayEvents.push(event);
             }
         }
-        if (dayEvents.length) days.value[stamp] = dayEvents;
+        
+        if (dayEvents.length) {
+            days.value[stamp] = dayEvents;
+        }
 
         day.setDate(day.getDate() + 1);
     }
-    emit('update:events', events.value);
 };
-
 const date = computed({
     get: () => _date.value,
     set: (value) => {
@@ -86,24 +90,18 @@ const date = computed({
     },
 });
 
-const data = computed({
-    get: () => {
-        return _data.value;
-    },
-    set: (value) => {
+watch(
+    () => store.data,
+    (value) => {
         _data.value = value;
-
-        value = value || {};
-
-        events.value = value.events;
-
+        events.value = Array.isArray(value) ? value : [];
+        
         function toStamp(date) {
             return date && new Date(date).setHours(0, 0, 0, 0);
         }
 
-        let _events = value.events;
-        if (_events) {
-            for (let event of _events) {
+        if (events.value) {
+            for (let event of events.value) {
                 event.dated = toStamp(event.dated);
                 event.finished = toStamp(event.finished);
                 event.started = toStamp(event.started);
@@ -112,14 +110,21 @@ const data = computed({
 
         refreshEvents();
     },
-});
+    { immediate: true },
+);
 
 watch(
-    () => store.data,
-    (value) => {
-        data.value = value;
+    () => events.value,
+    (newEvents) => {
+        if (newEvents && newEvents.length) {
+            for (let event of newEvents) {
+                if (event.started) event.started = new Date(event.started).getTime();
+                if (event.finished) event.finished = new Date(event.finished).getTime();
+            }
+            refreshEvents();
+        }
     },
-    { immediate: true },
+    { deep: true }
 );
 
 const getMonthNameAndYear = (date) => {
@@ -189,22 +194,3 @@ onUnmounted(() => arrayData.destroy());
         </div>
     </QCard>
 </template>
-
-<style lang="scss" scoped>
-.calendars-header {
-    height: 45px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: $primary;
-    font-weight: bold;
-    font-size: 16px;
-}
-
-.calendars-container {
-    max-width: 800px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/Worker/Card/WorkerCalendarItem.vue b/src/pages/Worker/Card/WorkerCalendarItem.vue
index 86d227ad3..071fa06be 100644
--- a/src/pages/Worker/Card/WorkerCalendarItem.vue
+++ b/src/pages/Worker/Card/WorkerCalendarItem.vue
@@ -11,6 +11,7 @@ import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
+import useWeekdaysOrder from 'src/composables/getWeekdays';
 
 const props = defineProps({
     year: {
@@ -44,6 +45,7 @@ const { locale } = useI18n();
 
 const calendarRef = ref(null);
 const weekdayStore = useWeekdayStore();
+const weekDays = useWeekdaysOrder();
 const selectedDate = ref();
 const calendarEventDates = [];
 const today = ref(date.formatDate(Date.vnNew(), 'YYYY-MM-DD'));
@@ -182,7 +184,7 @@ watch(_year, (newValue) => {
                 no-outside-days
                 :selected-dates="calendarEventDates"
                 no-active-date
-                :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+                :weekdays="weekDays"
                 short-weekday-label
                 :locale="locale"
                 :now="today"
diff --git a/src/pages/Worker/Card/WorkerTimeControlCalendar.vue b/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
index 46ae4b698..e9b9cc915 100644
--- a/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
+++ b/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
@@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n';
 
 import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
 import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
+import useWeekdaysOrder from 'src/composables/getWeekdays';
+
 const $props = defineProps({
     modelValue: {
         type: String,
@@ -32,6 +34,7 @@ const emit = defineEmits(['update:modelValue', 'clickDate', 'onMoved']);
 const { locale } = useI18n();
 
 const calendarRef = ref(null);
+const weekDays = useWeekdaysOrder();
 
 const stateClasses = {
     CONFIRMED: {
@@ -135,7 +138,7 @@ const paintWorkWeeks = async () => {
                 ref="calendarRef"
                 v-model="value"
                 show-work-weeks
-                :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+                :weekdays="weekDays"
                 :selected-dates="selectedDates"
                 :min-weekday-label="1"
                 :locale="locale"
diff --git a/src/pages/Zone/ZoneCalendar.vue b/src/pages/Zone/ZoneCalendar.vue
index c2abd15ff..a270a4242 100644
--- a/src/pages/Zone/ZoneCalendar.vue
+++ b/src/pages/Zone/ZoneCalendar.vue
@@ -10,6 +10,7 @@ import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
 import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
 
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import useWeekdaysOrder from 'src/composables/getWeekdays';
 import axios from 'axios';
 
 const props = defineProps({
@@ -46,6 +47,7 @@ const route = useRoute();
 
 const calendarRef = ref(null);
 const weekdayStore = useWeekdayStore();
+const weekDays = useWeekdaysOrder();
 const showZoneClosingTable = ref(false);
 const zoneClosingData = ref(null);
 const today = ref(date.formatDate(Date.vnNew(), 'YYYY-MM-DD'));
@@ -161,7 +163,7 @@ const handleDateClick = (timestamp) => {
                 show-work-weeks
                 no-outside-days
                 no-active-date
-                :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+                :weekdays="weekDays"
                 short-weekday-label
                 :locale="locale"
                 :now="today"
diff --git a/src/pages/Zone/ZoneCalendarGrid.vue b/src/pages/Zone/ZoneCalendarGrid.vue
index 91d2cc7eb..d7f8eb023 100644
--- a/src/pages/Zone/ZoneCalendarGrid.vue
+++ b/src/pages/Zone/ZoneCalendarGrid.vue
@@ -229,22 +229,3 @@ onUnmounted(() => arrayData.destroy());
         </div>
     </QCard>
 </template>
-
-<style lang="scss" scoped>
-.calendars-header {
-    height: 45px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: $primary;
-    font-weight: bold;
-    font-size: 16px;
-}
-
-.calendars-container {
-    max-width: 800px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-}
-</style>
diff --git a/test/cypress/integration/route/vehicle/vehicleEvents.spec.js b/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
index 65d5aa8a1..f6c14ba33 100644
--- a/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
+++ b/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
@@ -5,25 +5,21 @@ describe('Vehicle', () => {
         cy.visit(`/#/route/vehicle/3/events`);
     });
 
-    it('should add a new vehicle event', () => {
+    it('should add, edit and delete a vehicle event', () => {
         cy.get('.q-page-sticky > div > .q-btn').click();
-        cy.dataCy('Started_inputDate').type('05/02/2001');
+        cy.dataCy('Started_inputDate').type('01/01/2001');
         cy.dataCy('Finished_inputDate').type('08/02/2001');
         cy.get(':nth-child(5) > [label="Description"] > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > [data-cy="Description_input"]').type('Test');
         cy.selectOption(':nth-child(5) > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', 3);
         cy.get('.q-mt-lg > .q-btn--standard').click();
-    });
 
-    it('should edit a vehicle event', () => {
-        cy.get('[aria-label="Tuesday, February 6, 2001"] .q-btn__content').click();
+        cy.get('.q-current-day > .q-calendar-month__day--content > .q-btn').click();
         cy.dataCy('Started_inputDate').clear().type('03/02/2001');
         cy.dataCy('Finished_inputDate').clear().type('15/03/2001');
         cy.get(':nth-child(5) > [label="Description"] > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > [data-cy="Description_input"]').clear().type('Test2');
         cy.selectOption(':nth-child(5) > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', 5);
         cy.get('.q-mt-lg > .q-btn--standard').click();
-    });
 
-    it('should delete a vehicle event', () => {
         cy.dataCy('delete_event').eq(0).click();
         cy.dataCy('VnConfirm_confirm').click();
     });

From 47779437d3033dcc186e4323805113bdc35bcbf1 Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Wed, 26 Mar 2025 08:32:29 +0100
Subject: [PATCH 5/9] feat: refs #8443 added EntityCalendar and
 EntityCalendarGrid

---
 src/components/EntityCalendar.vue             | 147 +++++++++++++++++
 src/components/EntityCalendarGrid.vue         | 128 +++++++++++++++
 .../Card/VehicleEventInclusionForm.vue        |  22 ++-
 .../Route/Vehicle/Card/VehicleEvents.vue      |   6 +-
 src/pages/Route/Vehicle/VehicleCalendar.vue   | 147 ++---------------
 .../Route/Vehicle/VehicleCalendarGrid.vue     | 149 +++---------------
 .../route/vehicle/vehicleEvents.spec.js       |   4 +-
 7 files changed, 324 insertions(+), 279 deletions(-)
 create mode 100644 src/components/EntityCalendar.vue
 create mode 100644 src/components/EntityCalendarGrid.vue

diff --git a/src/components/EntityCalendar.vue b/src/components/EntityCalendar.vue
new file mode 100644
index 000000000..ec70acf15
--- /dev/null
+++ b/src/components/EntityCalendar.vue
@@ -0,0 +1,147 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { date } from 'quasar';
+import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
+import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
+import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import useWeekdaysOrder from 'src/composables/getWeekdays';
+
+const props = defineProps({
+    year: {
+        type: Number,
+        required: true,
+    },
+    month: {
+        type: Number,
+        required: true,
+    },
+    monthDate: {
+        type: Object,
+        default: null,
+    },
+    daysMap: {
+        type: Object,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['onDateSelected']);
+
+const { locale } = useI18n();
+const weekdayStore = useWeekdayStore();
+const weekDays = useWeekdaysOrder();
+const calendarRef = ref(null);
+const today = ref(date.formatDate(Date.vnNew(), 'YYYY-MM-DD'));
+const todayTimestamp = computed(() => {
+    const date = Date.vnNew();
+    date.setHours(0, 0, 0, 0);
+    return date.getTime();
+});
+const _monthDate = computed(() => date.formatDate(props.monthDate, 'YYYY-MM-DD'));
+
+const calendarHeaderTitle = computed(() => {
+    return `${weekdayStore.getLocaleMonths[props.month - 1].locale} ${props.year}`;
+});
+
+const isToday = (timestamp) => {
+    const { year, month, day } = timestamp;
+    return todayTimestamp.value === new Date(year, month - 1, day).getTime();
+};
+
+const getEventByTimestamp = ({ year, month, day }) => {
+    const stamp = new Date(year, month - 1, day).getTime();
+    return props.daysMap?.[stamp] || null;
+};
+
+const handleDateClick = (timestamp) => {
+    const event = getEventByTimestamp(timestamp);
+    const { year, month, day } = timestamp;
+    const date = new Date(year, month - 1, day);
+    emit('onDateSelected', { 
+        date, 
+        isNewMode: !event,
+        event: event?.[0] || null 
+    });
+};
+
+const getEventAttrs = (timestamp) => {
+    return {
+        class: '--event',
+        label: timestamp.day,
+    };
+};
+
+defineExpose({ getEventByTimestamp, handleDateClick });
+</script>
+
+<template>
+    <QCalendarMonthWrapper
+        style="height: 290px; width: 290px"
+        transparent-background
+        view-customization="workerCalendar"
+    >
+        <template #header>
+            <span class="full-width text-center text-body1 q-py-sm">{{
+                calendarHeaderTitle
+            }}</span>
+        </template>
+        <template #calendar>
+            <QCalendarMonth
+                ref="calendarRef"
+                :model-value="_monthDate"
+                show-work-weeks
+                no-outside-days
+                no-active-date
+                :weekdays="weekDays"
+                short-weekday-label
+                :locale="locale"
+                :now="today"
+                @click-date="handleDateClick($event.scope.timestamp)"
+                mini-mode
+            >
+                <template #day="{ scope: { timestamp } }">
+                    <slot name="day" :timestamp="timestamp" :getEventAttrs="getEventAttrs">
+                        <QBtn
+                            v-if="getEventByTimestamp(timestamp)"
+                            v-bind="{ ...getEventAttrs(timestamp) }"
+                            @click="handleDateClick(timestamp)"
+                            rounded
+                            dense
+                            flat
+                            class="calendar-event"
+                            :class="{ '--today': isToday(timestamp) }"
+                        />
+                    </slot>
+                </template>
+            </QCalendarMonth>
+        </template>
+    </QCalendarMonthWrapper>
+</template>
+
+<style lang="scss">
+.calendar-event {
+    display: flex;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    font-size: 13px;
+    line-height: 1.715em;
+    cursor: pointer;
+    color: white;
+
+    &.--today {
+        border: 2px solid $info;
+    }
+
+    &.--event {
+        background-color: $positive;
+        color: black;
+    }
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/EntityCalendarGrid.vue b/src/components/EntityCalendarGrid.vue
new file mode 100644
index 000000000..ed2521091
--- /dev/null
+++ b/src/components/EntityCalendarGrid.vue
@@ -0,0 +1,128 @@
+<script setup>
+import { computed, onMounted, ref, watch, onUnmounted, nextTick } from 'vue';
+import { useStateStore } from 'stores/useStateStore';
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import { useArrayData } from 'src/composables/useArrayData';
+
+const props = defineProps({
+  dataKey: {
+    type: String,
+    required: true,
+  },
+  calendarComponent: {
+    type: Object,
+    required: true,
+  },
+  additionalProps: {
+    type: Object,
+    default: () => ({}),
+  }
+});
+
+const stateStore = useStateStore();
+const weekdayStore = useWeekdayStore();
+const nMonths = ref(4);
+const _date = ref(Date.vnNew());
+const firstDay = ref(Date.vnNew());
+const lastDay = ref(Date.vnNew());
+const months = ref([]);
+const arrayData = useArrayData(props.dataKey);
+const { store } = arrayData;
+
+onMounted(async () => {
+  const initialDate = Date.vnNew();
+  initialDate.setDate(1);
+  initialDate.setHours(0, 0, 0, 0);
+  date.value = initialDate;
+  await nextTick();
+  stateStore.rightDrawer = true;
+});
+
+onUnmounted(() => arrayData.destroy());
+
+const emit = defineEmits([
+  'update:firstDay',
+  'update:lastDay',
+  'update:events',
+  'onDateSelected',
+]);
+
+const date = computed({
+  get: () => _date.value,
+  set: (value) => {
+    if (!(value instanceof Date)) return;
+    _date.value = value;
+    const stamp = value.getTime();
+
+    firstDay.value = new Date(stamp);
+    firstDay.value.setDate(1);
+
+    lastDay.value = new Date(stamp);
+    lastDay.value.setMonth(lastDay.value.getMonth() + nMonths.value);
+    lastDay.value.setDate(0);
+
+    months.value = [];
+    for (let i = 0; i < nMonths.value; i++) {
+      const monthDate = new Date(stamp);
+      monthDate.setMonth(value.getMonth() + i);
+      months.value.push(monthDate);
+    }
+
+    emit('update:firstDay', firstDay.value);
+    emit('update:lastDay', lastDay.value);
+    emit('refresh-events');
+  },
+});
+
+const headerTitle = computed(() => {
+  if (!months.value?.length) return '';
+  const getMonthName = date => 
+    `${weekdayStore.getLocaleMonths[date.getMonth()].locale} ${date.getFullYear()}`;
+  return `${getMonthName(months.value[0])} - ${getMonthName(months.value[months.value.length - 1])}`;
+});
+
+const step = (direction) => {
+  const newDate = new Date(date.value);
+  newDate.setMonth(newDate.getMonth() + nMonths.value * direction);
+  date.value = newDate;
+};
+
+defineExpose({
+    firstDay,
+    lastDay
+});
+</script>
+
+<template>
+  <QCard style="height: max-content">
+    <div class="calendars-header">
+      <QBtn
+        icon="arrow_left"
+        size="sm"
+        flat
+        class="full-height"
+        @click="step(-1)"
+      />
+      <span>{{ headerTitle }}</span>
+      <QBtn
+        icon="arrow_right"
+        size="sm"
+        flat
+        class="full-height"
+        @click="step(1)"
+      />
+    </div>
+    <div class="calendars-container">
+      <component
+        :is="calendarComponent"
+        v-for="(month, index) in months"
+        :key="index"
+        :month="month.getMonth() + 1"
+        :year="month.getFullYear()"
+        :month-date="month"
+        v-bind="additionalProps"
+        @on-date-selected="data => emit('onDateSelected', data)"
+      />
+    </div>
+  </QCard>
+</template>
\ No newline at end of file
diff --git a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
index 23be4340d..54ed50c80 100644
--- a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
@@ -59,31 +59,32 @@ const vehicleFormData = ref({
 
 const arrayData = useArrayData('VehicleEvents');
 
+onMounted(() => {
+    if (props.event) {
+        vehicleFormData.value = { ...props.event };
+    }
+});
+
 const createVehicleEvent = async () => {
     vehicleFormData.value.vehicleFk = route.params.id;
     vehicleFormData.value.userFk = user.value.id;
     
     if (isNew.value) {
         await axios.post(`VehicleEvents`, vehicleFormData.value);
-        notify(t('globals.dataSaved'), 'positive');
     } else {
         await axios.patch(
             `VehicleEvents/${props.event?.id}`,
             vehicleFormData.value,
         );
-        notify(t('globals.dataSaved'), 'positive');
     }
-    
     await refetchEvents();
-    emit('closeForm');
+
 };
 
 const deleteVehicleEvent = async () => {
     if (!props.event) return;
     await axios.delete(`VehicleEvents/${props.event?.id}`);
-    notify(t('globals.dataSaved'), 'positive');
     await refetchEvents();
-    emit('closeForm');
 };
 
 const refetchEvents = async () => {
@@ -112,13 +113,11 @@ const refetchEvents = async () => {
         }
     });
     emit('refresh-events');
+    notify(t('globals.dataSaved'), 'positive');
+    emit('closeForm');
 };
 
-onMounted(() => {
-    if (props.event) {
-        vehicleFormData.value = { ...props.event };
-    }
-});
+
 </script>
 
 <template>
@@ -142,7 +141,6 @@ onMounted(() => {
                     url="VehicleStates"
                     v-model="vehicleFormData.vehicleStateFk"
                     :label="t('globals.state')"
-                    option-value="id"
                     option-label="state"
                 />
             </VnRow>
diff --git a/src/pages/Route/Vehicle/Card/VehicleEvents.vue b/src/pages/Route/Vehicle/Card/VehicleEvents.vue
index ba6ccad8b..5a90c9586 100644
--- a/src/pages/Route/Vehicle/Card/VehicleEvents.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleEvents.vue
@@ -27,11 +27,9 @@ const refreshEvents = async () => {
     await vehicleEventsPanelRef.value.fetchData();    
 };
 
-const openForm = (data, isBtnAdd) => {
+const openForm = (data) => {
     const { date = null, isNewMode, event } = data;
-    vehicleEventsFormProps.date = date;
-    vehicleEventsFormProps.isNewMode = isNewMode;
-    vehicleEventsFormProps.event = event;
+    Object.assign(vehicleEventsFormProps, { date, isNewMode, event });
 
     showVehicleEventForm.value = true;
 };
diff --git a/src/pages/Route/Vehicle/VehicleCalendar.vue b/src/pages/Route/Vehicle/VehicleCalendar.vue
index cecbb186e..121ca3435 100644
--- a/src/pages/Route/Vehicle/VehicleCalendar.vue
+++ b/src/pages/Route/Vehicle/VehicleCalendar.vue
@@ -1,147 +1,20 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { date } from 'quasar';
-
-import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
-import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
-import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
-import { useWeekdayStore } from 'src/stores/useWeekdayStore';
-import useWeekdaysOrder from 'src/composables/getWeekdays';
-
-const props = defineProps({
-    year: {
-        type: Number,
-        required: true,
-    },
-    month: {
-        type: Number,
-        required: true,
-    },
-    monthDate: {
-        type: Object,
-        default: null,
-    },
-    daysMap: {
-        type: Object,
-        default: null,
-    },
-});
+import EntityCalendar from 'src/components/EntityCalendar.vue';
 
 const emit = defineEmits(['onDateSelected']);
 
-const { locale } = useI18n();
-const weekdayStore = useWeekdayStore();
-const weekDays = useWeekdaysOrder();
-const calendarRef = ref(null);
-const today = ref(date.formatDate(Date.vnNew(), 'YYYY-MM-DD'));
-const todayTimestamp = computed(() => {
-    const date = Date.vnNew();
-    date.setHours(0, 0, 0, 0);
-    return date.getTime();
-});
-const _monthDate = computed(() => date.formatDate(props.monthDate, 'YYYY-MM-DD'));
-
-const getEventByTimestamp = ({ year, month, day }) => {
-    const stamp = new Date(year, month - 1, day).getTime();
-    return props.daysMap[stamp] || null;
-};
-
-const getEventAttrs = ({ day }) => {
-    return {
-        class: '--event',
-        label: day,
-    };
-};
-
-const isToday = (timestamp) => {
-    const { year, month, day } = timestamp;
-    return todayTimestamp.value === new Date(year, month - 1, day).getTime();
-};
-
-const calendarHeaderTitle = computed(() => {
-    return `${weekdayStore.getLocaleMonths[props.month - 1].locale} ${props.year}`;
+const getEventAttrs = ({ day }) => ({
+    class: '--event',
+    label: day,
 });
 
-const handleDateClick = (timestamp) => {
-    const event = getEventByTimestamp(timestamp);
-    const { year, month, day } = timestamp;
-    const date = new Date(year, month - 1, day);
+defineExpose({ getEventAttrs });
 
-    emit('onDateSelected', {
-        date,
-        isNewMode: !event,
-        event: event && event.length > 0 ? event[0] : null,
-    });
-};
 </script>
 
 <template>
-    <QCalendarMonthWrapper
-        style="height: 290px; width: 290px"
-        transparent-background
-        view-customization="workerCalendar"
-    >
-        <template #header>
-            <span class="full-width text-center text-body1 q-py-sm">{{
-                calendarHeaderTitle
-            }}</span>
-        </template>
-        <template #calendar>
-            <QCalendarMonth
-                ref="calendarRef"
-                :model-value="_monthDate"
-                show-work-weeks
-                no-outside-days
-                no-active-date
-                :weekdays="weekDays"
-                short-weekday-label
-                :locale="locale"
-                :now="today"
-                @click-date="handleDateClick($event.scope.timestamp)"
-                mini-mode
-            >
-                <template #day="{ scope: { timestamp } }">
-                    <QBtn
-                        v-if="getEventByTimestamp(timestamp)"
-                        v-bind="{ ...getEventAttrs(timestamp) }"
-                        @click="handleDateClick(timestamp)"
-                        rounded
-                        dense
-                        flat
-                        class="calendar-event"
-                        :class="{
-                            '--today': isToday(timestamp),
-                        }"
-                    />
-                </template>
-            </QCalendarMonth>
-        </template>
-    </QCalendarMonthWrapper>
-</template>
-
-<style lang="scss">
-.calendar-event {
-    display: flex;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    font-size: 13px;
-    line-height: 1.715em;
-    cursor: pointer;
-    color: white;
-
-    &.--today {
-        border: 2px solid $info;
-    }
-
-    &.--event {
-        background-color: $positive;
-        color: black;
-    }
-
-    &:hover {
-        opacity: 0.8;
-    }
-}
-</style>
+    <EntityCalendar 
+        v-bind="$props" 
+        @onDateSelected="(e) => emit('onDateSelected', e)"
+    />
+</template>
\ No newline at end of file
diff --git a/src/pages/Route/Vehicle/VehicleCalendarGrid.vue b/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
index 7fd30dd47..f88aa0134 100644
--- a/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
+++ b/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
@@ -1,10 +1,7 @@
 <script setup>
-import { computed, onMounted, ref, watch, onUnmounted, nextTick } from 'vue';
-
+import { ref, watch, onMounted } from 'vue';
+import EntityCalendarGrid from 'src/components/EntityCalendarGrid.vue';
 import VehicleCalendar from './VehicleCalendar.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import { useArrayData } from 'src/composables/useArrayData';
 
 const props = defineProps({
@@ -14,34 +11,24 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits([
-    'update:firstDay',
-    'update:lastDay',
-    'update:events',
-    'onDateSelected',
-]);
-
-const stateStore = useStateStore();
-const weekdayStore = useWeekdayStore();
-
-const nMonths = ref(4);
-const _date = ref(Date.vnNew());
-const _data = ref(null);
-const firstDay = ref(null);
-const lastDay = ref(null);
-const months = ref([]);
-const days = ref({});
-const events = ref([]);
+const firstDay = ref(new Date());
+const lastDay = ref(new Date());
+const entityCalendarRef = ref(null);
 
 const arrayData = useArrayData(props.dataKey);
 const { store } = arrayData;
+const _data = ref(null);
+const days = ref({});
+const events = ref([]);
 
 const refreshEvents = () => {
     days.value = {};
-    if (!events.value || !events.value.length) return;
+    if (!events.value?.length || !firstDay.value || !lastDay.value) return;
     
     let day = new Date(firstDay.value.getTime());
-    while (day <= lastDay.value) {
+    let endDate = new Date(lastDay.value.getTime());
+
+    while (day <= endDate) {
         let stamp = day.getTime();
         let dayEvents = [];
         
@@ -64,31 +51,6 @@ const refreshEvents = () => {
         day.setDate(day.getDate() + 1);
     }
 };
-const date = computed({
-    get: () => _date.value,
-    set: (value) => {
-        _date.value = value;
-        let stamp = value.getTime();
-
-        firstDay.value = new Date(stamp);
-        firstDay.value.setDate(1);
-
-        lastDay.value = new Date(stamp);
-        lastDay.value.setMonth(lastDay.value.getMonth() + nMonths.value);
-        lastDay.value.setDate(0);
-
-        months.value = [];
-        for (let i = 0; i < nMonths.value; i++) {
-            let monthDate = new Date(stamp);
-            monthDate.setMonth(value.getMonth() + i);
-            months.value.push(monthDate);
-        }
-
-        emit('update:firstDay', firstDay.value);
-        emit('update:lastDay', lastDay.value);
-        refreshEvents();
-    },
-});
 
 watch(
     () => store.data,
@@ -113,84 +75,23 @@ watch(
     { immediate: true },
 );
 
-watch(
-    () => events.value,
-    (newEvents) => {
-        if (newEvents && newEvents.length) {
-            for (let event of newEvents) {
-                if (event.started) event.started = new Date(event.started).getTime();
-                if (event.finished) event.finished = new Date(event.finished).getTime();
-            }
-            refreshEvents();
-        }
-    },
-    { deep: true }
-);
-
-const getMonthNameAndYear = (date) => {
-    const monthName = weekdayStore.getLocaleMonths[date.getMonth()].locale;
-    const year = date.getFullYear();
-    return `${monthName} ${year}`;
-};
-
-const headerTitle = computed(() => {
-    if (!months.value?.length) return '';
-
-    const firstMonth = getMonthNameAndYear(months.value[0]);
-    const lastMonth = getMonthNameAndYear(months.value[months.value.length - 1]);
-
-    return `${firstMonth} - ${lastMonth}`;
+watch(() => entityCalendarRef.value?.firstDay, (newVal) => {
+    if (newVal) firstDay.value = new Date(newVal);
 });
 
-const step = (direction) => {
-    const _date = new Date(date.value);
-    _date.setMonth(_date.getMonth() + nMonths.value * direction);
-    date.value = _date;
-};
-
-const onDateSelected = (data) => emit('onDateSelected', data);
-
-onMounted(async () => {
-    let initialDate = Date.vnNew();
-    initialDate.setDate(1);
-    initialDate.setHours(0, 0, 0, 0);
-    date.value = initialDate;
-    await nextTick();
-    stateStore.rightDrawer = true;
+watch(() => entityCalendarRef.value?.lastDay, (newVal) => {
+    if (newVal) lastDay.value = new Date(newVal);
 });
 
-onUnmounted(() => arrayData.destroy());
 </script>
 
 <template>
-    <QCard style="height: max-content">
-        <div class="calendars-header">
-            <QBtn
-                icon="arrow_left"
-                size="sm"
-                flat
-                class="full-height"
-                @click="step(-1)"
-            />
-            <span>{{ headerTitle }}</span>
-            <QBtn
-                icon="arrow_right"
-                size="sm"
-                flat
-                class="full-height"
-                @click="step(1)"
-            />
-        </div>
-        <div class="calendars-container">
-            <VehicleCalendar
-                v-for="(month, index) in months"
-                :key="index"
-                :month="month.getMonth() + 1"
-                :year="month.getFullYear()"
-                :month-date="month"
-                :days-map="days"
-                @on-date-selected="onDateSelected"
-            />
-        </div>
-    </QCard>
-</template>
+    <EntityCalendarGrid
+        ref="entityCalendarRef"
+        :data-key="dataKey"
+        :calendar-component="VehicleCalendar"
+        :additional-props="{ daysMap: days }"
+        @refresh-events="refreshEvents"
+        v-bind="$attrs"
+    />
+</template>
\ No newline at end of file
diff --git a/test/cypress/integration/route/vehicle/vehicleEvents.spec.js b/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
index f6c14ba33..c94c6c214 100644
--- a/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
+++ b/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
@@ -9,14 +9,14 @@ describe('Vehicle', () => {
         cy.get('.q-page-sticky > div > .q-btn').click();
         cy.dataCy('Started_inputDate').type('01/01/2001');
         cy.dataCy('Finished_inputDate').type('08/02/2001');
-        cy.get(':nth-child(5) > [label="Description"] > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > [data-cy="Description_input"]').type('Test');
+        cy.get(':nth-child(5)').find('[data-cy="Description_input"]').clear().type('Test');
         cy.selectOption(':nth-child(5) > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', 3);
         cy.get('.q-mt-lg > .q-btn--standard').click();
 
         cy.get('.q-current-day > .q-calendar-month__day--content > .q-btn').click();
         cy.dataCy('Started_inputDate').clear().type('03/02/2001');
         cy.dataCy('Finished_inputDate').clear().type('15/03/2001');
-        cy.get(':nth-child(5) > [label="Description"] > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > [data-cy="Description_input"]').clear().type('Test2');
+        cy.get(':nth-child(5)').find('[data-cy="Description_input"]').clear().type('Test2');
         cy.selectOption(':nth-child(5) > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', 5);
         cy.get('.q-mt-lg > .q-btn--standard').click();
 

From 70c87807823995d633f7bfb0a9a9aa902f9be89e Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Mon, 31 Mar 2025 09:25:25 +0200
Subject: [PATCH 6/9] fix: refs #8443 code and form view fixes

---
 src/components/EntityCalendar.vue                  |  8 ++++++--
 src/components/EntityCalendarGrid.vue              |  4 +---
 .../Vehicle/Card/VehicleEventInclusionForm.vue     | 14 ++++++--------
 src/pages/Route/Vehicle/VehicleCalendar.vue        |  7 -------
 src/pages/Route/Vehicle/VehicleCalendarGrid.vue    |  2 +-
 .../route/vehicle/vehicleEvents.spec.js            |  4 ++--
 6 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/components/EntityCalendar.vue b/src/components/EntityCalendar.vue
index ec70acf15..27c837054 100644
--- a/src/components/EntityCalendar.vue
+++ b/src/components/EntityCalendar.vue
@@ -8,6 +8,10 @@ import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import useWeekdaysOrder from 'src/composables/getWeekdays';
 
+const formatDate = (dateToFormat, format = 'YYYY-MM-DD') => {
+  return date.formatDate(dateToFormat, format);
+};
+
 const props = defineProps({
     year: {
         type: Number,
@@ -33,13 +37,13 @@ const { locale } = useI18n();
 const weekdayStore = useWeekdayStore();
 const weekDays = useWeekdaysOrder();
 const calendarRef = ref(null);
-const today = ref(date.formatDate(Date.vnNew(), 'YYYY-MM-DD'));
+const today = ref(formatDate(Date.vnNew()));
 const todayTimestamp = computed(() => {
     const date = Date.vnNew();
     date.setHours(0, 0, 0, 0);
     return date.getTime();
 });
-const _monthDate = computed(() => date.formatDate(props.monthDate, 'YYYY-MM-DD'));
+const _monthDate = computed(() => formatDate(props.monthDate));
 
 const calendarHeaderTitle = computed(() => {
     return `${weekdayStore.getLocaleMonths[props.month - 1].locale} ${props.year}`;
diff --git a/src/components/EntityCalendarGrid.vue b/src/components/EntityCalendarGrid.vue
index ed2521091..09ccaad07 100644
--- a/src/components/EntityCalendarGrid.vue
+++ b/src/components/EntityCalendarGrid.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch, onUnmounted, nextTick } from 'vue';
+import { computed, onMounted, ref, onUnmounted, nextTick } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -27,8 +27,6 @@ const firstDay = ref(Date.vnNew());
 const lastDay = ref(Date.vnNew());
 const months = ref([]);
 const arrayData = useArrayData(props.dataKey);
-const { store } = arrayData;
-
 onMounted(async () => {
   const initialDate = Date.vnNew();
   initialDate.setDate(1);
diff --git a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
index 54ed50c80..fee9d92dd 100644
--- a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
@@ -61,7 +61,7 @@ const arrayData = useArrayData('VehicleEvents');
 
 onMounted(() => {
     if (props.event) {
-        vehicleFormData.value = { ...props.event };
+        vehicleFormData.value = props.event;
     }
 });
 
@@ -130,13 +130,6 @@ const refetchEvents = async () => {
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnInputDate :label="t('Started')" v-model="vehicleFormData.started" />
                 <VnInputDate :label="t('Finished')" v-model="vehicleFormData.finished" />
-            </VnRow>
-            <VnRow>
-                <VnInput
-                    v-model="vehicleFormData.description"
-                    :label="t('globals.description')"
-                    type="text"
-                />
                 <VnSelect
                     url="VehicleStates"
                     v-model="vehicleFormData.vehicleStateFk"
@@ -144,6 +137,11 @@ const refetchEvents = async () => {
                     option-label="state"
                 />
             </VnRow>
+            <VnInput
+                    v-model="vehicleFormData.description"
+                    :label="t('globals.description')"
+                    type="text"
+            />
         </template>
         <template #custom-buttons>
             <QBtn
diff --git a/src/pages/Route/Vehicle/VehicleCalendar.vue b/src/pages/Route/Vehicle/VehicleCalendar.vue
index 121ca3435..681bb966a 100644
--- a/src/pages/Route/Vehicle/VehicleCalendar.vue
+++ b/src/pages/Route/Vehicle/VehicleCalendar.vue
@@ -3,13 +3,6 @@ import EntityCalendar from 'src/components/EntityCalendar.vue';
 
 const emit = defineEmits(['onDateSelected']);
 
-const getEventAttrs = ({ day }) => ({
-    class: '--event',
-    label: day,
-});
-
-defineExpose({ getEventAttrs });
-
 </script>
 
 <template>
diff --git a/src/pages/Route/Vehicle/VehicleCalendarGrid.vue b/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
index f88aa0134..99b6602c8 100644
--- a/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
+++ b/src/pages/Route/Vehicle/VehicleCalendarGrid.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch } from 'vue';
 import EntityCalendarGrid from 'src/components/EntityCalendarGrid.vue';
 import VehicleCalendar from './VehicleCalendar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
diff --git a/test/cypress/integration/route/vehicle/vehicleEvents.spec.js b/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
index c94c6c214..b806b0af1 100644
--- a/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
+++ b/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
@@ -10,14 +10,14 @@ describe('Vehicle', () => {
         cy.dataCy('Started_inputDate').type('01/01/2001');
         cy.dataCy('Finished_inputDate').type('08/02/2001');
         cy.get(':nth-child(5)').find('[data-cy="Description_input"]').clear().type('Test');
-        cy.selectOption(':nth-child(5) > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', 3);
+        cy.selectOption('.vn-row > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', 3);
         cy.get('.q-mt-lg > .q-btn--standard').click();
 
         cy.get('.q-current-day > .q-calendar-month__day--content > .q-btn').click();
         cy.dataCy('Started_inputDate').clear().type('03/02/2001');
         cy.dataCy('Finished_inputDate').clear().type('15/03/2001');
         cy.get(':nth-child(5)').find('[data-cy="Description_input"]').clear().type('Test2');
-        cy.selectOption(':nth-child(5) > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', 5);
+        cy.selectOption('.vn-row > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', 5);
         cy.get('.q-mt-lg > .q-btn--standard').click();
 
         cy.dataCy('delete_event').eq(0).click();

From 7d6b3e27b4115387d2ebf69b2ae3b35769790068 Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Mon, 31 Mar 2025 13:03:27 +0200
Subject: [PATCH 7/9] refactor: refs #8443 improved code

---
 src/components/EntityCalendar.vue                          | 7 ++++---
 src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue | 1 -
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/EntityCalendar.vue b/src/components/EntityCalendar.vue
index 27c837054..e6e54a832 100644
--- a/src/components/EntityCalendar.vue
+++ b/src/components/EntityCalendar.vue
@@ -8,9 +8,10 @@ import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import useWeekdaysOrder from 'src/composables/getWeekdays';
 
-const formatDate = (dateToFormat, format = 'YYYY-MM-DD') => {
-  return date.formatDate(dateToFormat, format);
-};
+const formatDate = (dateToFormat, format = 'YYYY-MM-DD') => (
+  date.formatDate(dateToFormat, format)
+);
+
 
 const props = defineProps({
     year: {
diff --git a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
index fee9d92dd..350054046 100644
--- a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
@@ -140,7 +140,6 @@ const refetchEvents = async () => {
             <VnInput
                     v-model="vehicleFormData.description"
                     :label="t('globals.description')"
-                    type="text"
             />
         </template>
         <template #custom-buttons>

From 0a299b0fe5609eb7c5d5abedfa25ac670f33abf2 Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Fri, 4 Apr 2025 15:04:57 +0200
Subject: [PATCH 8/9] feat: refs #8443 used data-cy for select in test

---
 src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue | 1 +
 .../integration/route/vehicle/vehicleEvents.spec.js        | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
index 350054046..06141736c 100644
--- a/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
+++ b/src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue
@@ -135,6 +135,7 @@ const refetchEvents = async () => {
                     v-model="vehicleFormData.vehicleStateFk"
                     :label="t('globals.state')"
                     option-label="state"
+                    data-cy="State_input"
                 />
             </VnRow>
             <VnInput
diff --git a/test/cypress/integration/route/vehicle/vehicleEvents.spec.js b/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
index b806b0af1..f03e11b29 100644
--- a/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
+++ b/test/cypress/integration/route/vehicle/vehicleEvents.spec.js
@@ -1,4 +1,5 @@
 describe('Vehicle', () => {
+
     beforeEach(() => {
         cy.viewport(1920, 1080);
         cy.login('deliveryAssistant');
@@ -10,17 +11,17 @@ describe('Vehicle', () => {
         cy.dataCy('Started_inputDate').type('01/01/2001');
         cy.dataCy('Finished_inputDate').type('08/02/2001');
         cy.get(':nth-child(5)').find('[data-cy="Description_input"]').clear().type('Test');
-        cy.selectOption('.vn-row > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', 3);
+        cy.selectOption('[data-cy="State_input"]', 3);
         cy.get('.q-mt-lg > .q-btn--standard').click();
 
         cy.get('.q-current-day > .q-calendar-month__day--content > .q-btn').click();
         cy.dataCy('Started_inputDate').clear().type('03/02/2001');
         cy.dataCy('Finished_inputDate').clear().type('15/03/2001');
         cy.get(':nth-child(5)').find('[data-cy="Description_input"]').clear().type('Test2');
-        cy.selectOption('.vn-row > .q-select > .q-field__inner > .q-field__control > .q-field__control-container', 5);
+        cy.selectOption('[data-cy="State_input"]', 5);
         cy.get('.q-mt-lg > .q-btn--standard').click();
 
         cy.dataCy('delete_event').eq(0).click();
         cy.dataCy('VnConfirm_confirm').click();
     });
-});
+});
\ No newline at end of file

From 58057a8ac2d0dd46422bb3bfe0c72189b8d5faeb Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Thu, 17 Apr 2025 12:50:37 +0200
Subject: [PATCH 9/9] fix: refs #8443 fixed broken route

---
 src/router/modules/route.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index 1bb829662..08ba1701f 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -210,6 +210,15 @@ const vehicleCard = {
             },
             component: () => import('src/pages/Route/Vehicle/VehicleDms.vue'),
         },
+        {
+            name: 'VehicleEvents',
+            path: 'events',
+            meta: {
+                title: 'calendar',
+                icon: 'vn:calendar',
+            },
+            component: () => import('src/pages/Route/Vehicle/Card/VehicleEvents.vue'),
+        },
     ],
 };