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 01/35] 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 02/35] 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 03/35] 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 04/35] 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 05/35] 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 ee1fcf75fbf630bcade551f739215d8931071955 Mon Sep 17 00:00:00 2001
From: jtubau <jtubau@verdnatura.es>
Date: Wed, 26 Mar 2025 12:57:02 +0100
Subject: [PATCH 06/35] refactor: refs #7638 enhance CmrList component with
 additional fields and improved formatting

---
 src/pages/Route/Cmr/CmrList.vue | 265 +++++++++++++++++++++++++++-----
 1 file changed, 230 insertions(+), 35 deletions(-)

diff --git a/src/pages/Route/Cmr/CmrList.vue b/src/pages/Route/Cmr/CmrList.vue
index 170f73bc0..3c331ec46 100644
--- a/src/pages/Route/Cmr/CmrList.vue
+++ b/src/pages/Route/Cmr/CmrList.vue
@@ -6,13 +6,18 @@ import { useRoute } from 'vue-router';
 import { useSession } from 'src/composables/useSession';
 import { toDateHourMin } from 'filters/index';
 import { useStateStore } from 'src/stores/useStateStore';
+import { dashIfEmpty } from 'src/filters';
 
+import AgencyDescriptorProxy from '../Agency/Card/AgencyDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import RouteDescriptorProxy from '../Card/RouteDescriptorProxy.vue';
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
-import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -30,39 +35,117 @@ const userParams = {
 
 const columns = computed(() => [
     {
-        align: 'left',
+        align: 'right',
         name: 'cmrFk',
-        label: t('route.cmr.params.cmrFk'),
+        label: t('cmr.params.cmrFk'),
         chip: {
             condition: () => true,
         },
         isId: true,
     },
     {
-        align: 'center',
-        name: 'hasCmrDms',
-        label: t('route.cmr.params.hasCmrDms'),
-        component: 'checkbox',
-        cardVisible: true,
-    },
-    {
-        align: 'left',
-        label: t('route.cmr.params.ticketFk'),
+        align: 'right',
+        label: t('cmr.params.ticketFk'),
         name: 'ticketFk',
     },
     {
-        align: 'left',
-        label: t('route.cmr.params.routeFk'),
+        align: 'right',
+        label: t('cmr.params.routeFk'),
         name: 'routeFk',
     },
     {
-        align: 'left',
-        label: t('route.cmr.params.clientFk'),
+        label: t('cmr.params.client'),
         name: 'clientFk',
+        component: 'select',
+        attrs: {
+            url: 'Clients',
+            fields: ['id', 'name'],
+        },
+        columnFilter: {
+            name: 'clientFk',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+            },
+        },
     },
     {
-        align: 'right',
-        label: t('route.cmr.params.countryFk'),
+        label: t('cmr.params.agency'),
+        name: 'agencyModeFk',
+        component: 'select',
+        attrs: {
+            url: 'Agencies',
+            fields: ['id', 'name'],
+        },
+        columnFilter: {
+            name: 'agencyModeFk',
+            attrs: {
+                url: 'Agencies',
+                fields: ['id', 'name'],
+            },
+        },
+        format: ({ agencyName }) => agencyName,
+    },
+    {
+        label: t('cmr.params.supplier'),
+        name: 'supplierFk',
+        component: 'select',
+        attrs: {
+            url: 'suppliers',
+            fields: ['id', 'name'],
+        },
+        columnFilter: {
+            name: 'supplierFk',
+            attrs: {
+                url: 'suppliers',
+                fields: ['id', 'name'],
+            },
+        },
+    },
+    {
+        label: t('cmr.params.sender'),
+        name: 'addressFromFk',
+        component: 'select',
+        attrs: {
+            url: 'Addresses',
+            fields: ['id', 'nickname'],
+            optionValue: 'id',
+            optionLabel: 'nickname',
+        },
+        columnFilter: {
+            name: 'addressFromFk',
+            attrs: {
+                url: 'Addresses',
+                fields: ['id', 'nickname'],
+                optionValue: 'id',
+                optionLabel: 'nickname',
+            },
+        },
+        format: ({ origin }) => origin,
+    },
+    {
+        label: t('cmr.params.destination'),
+        name: 'addressToFk',
+        component: 'select',
+        attrs: {
+            url: 'addresses',
+            fields: ['id', 'nickname'],
+            optionValue: 'id',
+            optionLabel: 'nickname',
+        },
+        columnFilter: {
+            name: 'addressToFk',
+            attrs: {
+                url: 'addresses',
+                fields: ['id', 'nickname'],
+                optionValue: 'id',
+                optionLabel: 'nickname',
+            },
+        },
+        format: ({ destination }) => destination,
+    },
+    {
+        label: t('cmr.params.country'),
         name: 'countryFk',
         component: 'select',
         attrs: {
@@ -79,16 +162,61 @@ const columns = computed(() => [
         format: ({ countryName }) => countryName,
     },
     {
-        align: 'right',
-        label: t('route.cmr.params.shipped'),
-        name: 'shipped',
-        cardVisible: true,
+        label: t('cmr.params.created'),
+        name: 'created',
         component: 'date',
-        format: ({ shipped }) => toDateHourMin(shipped),
+        format: ({ created }) => dashIfEmpty(toDateHourMin(created)),
     },
     {
-        align: 'right',
-        label: t('route.cmr.params.warehouseFk'),
+        label: t('cmr.params.shipped'),
+        name: 'shipped',
+        component: 'date',
+        format: ({ shipped }) => dashIfEmpty(toDateHourMin(shipped)),
+    },
+    {
+        label: t('cmr.params.etd'),
+        name: 'ead',
+        component: 'date',
+        format: ({ ead }) => dashIfEmpty(toDateHourMin(ead)),
+        toolTip: t('cmr.params.etdTooltip'),
+    },
+    {
+        label: t('globals.landed'),
+        name: 'landed',
+        component: 'date',
+        format: ({ landed }) => dashIfEmpty(toDateHourMin(landed)),
+    },
+    {
+        align: 'left',
+        label: t('cmr.params.packageList'),
+        name: 'packagesList',
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        label: t('cmr.params.observation'),
+        name: 'observation',
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        label: t('cmr.params.senderInstructions'),
+        name: 'senderInstruccions',
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        label: t('cmr.params.paymentInstructions'),
+        name: 'paymentInstruccions',
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        label: t('cmr.params.vehiclePlate'),
+        name: 'truckPlate',
+    },
+    {
+        label: t('cmr.params.warehouse'),
         name: 'warehouseFk',
         component: 'select',
         attrs: {
@@ -96,7 +224,6 @@ const columns = computed(() => [
             fields: ['id', 'name'],
         },
         columnFilter: {
-            inWhere: true,
             name: 'warehouseFk',
             attrs: {
                 url: 'warehouses',
@@ -105,12 +232,23 @@ const columns = computed(() => [
         },
         format: ({ warehouseName }) => warehouseName,
     },
+    {
+        align: 'left',
+        name: 'specialAgreements',
+        label: t('cmr.params.specialAgreements'),
+        columnFilter: false,
+    },
+    {
+        name: 'hasCmrDms',
+        label: t('cmr.params.hasCmrDms'),
+        component: 'checkbox',
+    },
     {
         align: 'center',
         name: 'tableActions',
         actions: [
             {
-                title: t('route.cmr.params.viewCmr'),
+                title: t('cmr.params.viewCmr'),
                 icon: 'visibility',
                 isPrimary: true,
                 action: (row) => window.open(getCmrUrl(row?.cmrFk), '_blank'),
@@ -151,11 +289,7 @@ function downloadPdfs() {
 }
 </script>
 <template>
-    <VnSearchbar
-        :data-key
-        :label="t('route.cmr.search')"
-        :info="t('route.cmr.searchInfo')"
-    />
+    <VnSearchbar :data-key :label="t('cmr.search')" :info="t('cmr.searchInfo')" />
     <VnSubToolbar>
         <template #st-actions>
             <QBtn
@@ -165,7 +299,7 @@ function downloadPdfs() {
                 :disable="!selectedRows?.length"
                 @click="downloadPdfs"
             >
-                <QTooltip>{{ t('route.cmr.params.downloadCmrs') }}</QTooltip>
+                <QTooltip>{{ t('cmr.params.downloadCmrs') }}</QTooltip>
             </QBtn>
         </template>
     </VnSubToolbar>
@@ -174,7 +308,7 @@ function downloadPdfs() {
         :data-key
         url="Cmrs/filter"
         :columns="columns"
-        :order="['shipped DESC', 'cmrFk ASC']"
+        :order="['shipped DESC']"
         :user-params="userParams"
         default-mode="table"
         v-model:selected="selectedRows"
@@ -191,11 +325,72 @@ function downloadPdfs() {
                 <TicketDescriptorProxy :id="row.ticketFk" />
             </span>
         </template>
+        <template #column-routeFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.routeFk }}
+                <RouteDescriptorProxy :id="row.routeFk" />
+            </span>
+        </template>
         <template #column-clientFk="{ row }">
             <span class="link" @click.stop>
-                {{ row.clientFk }}
+                {{ row.clientName }}
                 <CustomerDescriptorProxy :id="row.clientFk" />
             </span>
         </template>
+        <template #column-agencyModeFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.agencyName }}
+                <AgencyDescriptorProxy :id="row.agencyModeFk" />
+            </span>
+        </template>
+        <template #column-supplierFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row.carrierName }}
+                <SupplierDescriptorProxy :id="row.supplierFk" />
+            </span>
+        </template>
+        <template #column-observation="{ row }">
+            <VnInput
+                v-if="row.observation"
+                type="textarea"
+                v-model="row.observation"
+                readonly
+                dense
+                rows="2"
+                style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+            />
+        </template>
+        <template #column-packagesList="{ row }">
+            <span>
+                {{ row.packagesList }}
+                <QTooltip v-if="row.packagesList" :label="row.packagesList">
+                    {{ row.packagesList }}
+                </QTooltip>
+            </span>
+        </template>
+        <template #column-senderInstruccions="{ row }">
+            <span>
+                {{ row.senderInstruccions }}
+                <QTooltip v-if="row.packagesList" :label="row.packagesList">
+                    {{ row.senderInstruccions }}
+                </QTooltip>
+            </span>
+        </template>
+        <template #column-paymentInstruccions="{ row }">
+            <span>
+                {{ row.paymentInstruccions }}
+                <QTooltip v-if="row.packagesList" :label="row.packagesList">
+                    {{ row.paymentInstruccions }}
+                </QTooltip>
+            </span>
+        </template>
+        <template #column-specialAgreements="{ row }">
+            <span>
+                {{ row.specialAgreements }}
+                <QTooltip v-if="row.packagesList" :label="row.packagesList">
+                    {{ row.specialAgreements }}
+                </QTooltip>
+            </span>
+        </template>
     </VnTable>
 </template>

From f2e4fff69aaaddffcebe788e7c7a1b93b0f05b7a Mon Sep 17 00:00:00 2001
From: jtubau <jtubau@verdnatura.es>
Date: Wed, 26 Mar 2025 12:57:14 +0100
Subject: [PATCH 07/35] refactor: refs #7638 add localization support for Cmr
 and Route components in English and Spanish

---
 src/pages/Route/Cmr/locale/en.yml | 31 +++++++++++++++++++++++++++++++
 src/pages/Route/Cmr/locale/es.yml | 31 +++++++++++++++++++++++++++++++
 src/pages/Route/locale/en.yml     | 23 +++++------------------
 src/pages/Route/locale/es.yml     |  7 ++++++-
 4 files changed, 73 insertions(+), 19 deletions(-)
 create mode 100644 src/pages/Route/Cmr/locale/en.yml
 create mode 100644 src/pages/Route/Cmr/locale/es.yml

diff --git a/src/pages/Route/Cmr/locale/en.yml b/src/pages/Route/Cmr/locale/en.yml
new file mode 100644
index 000000000..49b9895f8
--- /dev/null
+++ b/src/pages/Route/Cmr/locale/en.yml
@@ -0,0 +1,31 @@
+cmr:
+  search: Search Cmr
+  searchInfo: You can search Cmr by Id
+  params:
+      agency: Agency
+      client: Client
+      cmrFk: CMR id
+      country: Country
+      created: Created
+      destination: Destination
+      downloadCmrs: Download CMRs
+      etd: ETD
+      etdTooltip: Estimated Time Delivery
+      hasCmrDms: Attached in gestdoc
+      observation: Observation
+      packageList: Package List
+      paymentInstructions: Payment instructions
+      routeFk: Route id
+      results: results
+      search: General search
+      sender: Sender
+      senderInstructions: Sender instructions
+      shipped: Shipped
+      specialAgreements: Special agreements
+      supplier: Carrier
+      ticketFk: Ticket id
+      vehiclePlate: Vehicle plate
+      viewCmr: View CMR
+      warehouse: Warehouse
+      'true': 'Yes'
+      'false': 'No'
\ No newline at end of file
diff --git a/src/pages/Route/Cmr/locale/es.yml b/src/pages/Route/Cmr/locale/es.yml
new file mode 100644
index 000000000..b419a238b
--- /dev/null
+++ b/src/pages/Route/Cmr/locale/es.yml
@@ -0,0 +1,31 @@
+cmr:
+  search: Buscar Cmr
+  searchInfo: Puedes buscar cmr por id
+  params:
+      agency: Agencia
+      client: Cliente
+      cmrFk: Id cmr
+      country: País
+      created: Creado
+      destination: Destinatario
+      downloadCmrs: Descargar CMRs
+      etd: ETD
+      etdTooltip: Fecha estimada de entrega
+      hasCmrDms: Adjunto en gestdoc
+      observation: Observaciones
+      packageList: Listado embalajes
+      paymentInstructions: Instrucciones de pago
+      routeFk: Id ruta
+      results: Resultados
+      search: Busqueda general
+      sender: Remitente
+      senderInstructions: Instrucciones de envío
+      shipped: F. envío
+      specialAgreements: Acuerdos especiales
+      supplier: Transportista
+      ticketFk: Id ticket
+      vehiclePlate: Matrícula
+      viewCmr: Ver CMR
+      warehouse: Almacén
+      'true': 'Si'
+      'false': 'No'
\ No newline at end of file
diff --git a/src/pages/Route/locale/en.yml b/src/pages/Route/locale/en.yml
index 283b61855..206100b6b 100644
--- a/src/pages/Route/locale/en.yml
+++ b/src/pages/Route/locale/en.yml
@@ -51,6 +51,11 @@ route:
         agencyModeName: Agency route
         isOwn: Own
         isAnyVolumeallowed: Any volume allowed
+        created: Created
+        addressFromFk: Sender
+        addressToFk: Destination
+        landed: Landed
+        ead: EAD
     Worker: Worker
     Agency: Agency
     Vehicle: Vehicle
@@ -70,21 +75,3 @@ route:
     searchInfo: You can search by route reference
     dated: Dated
     preview: Preview
-    cmr:
-        search: Search Cmr
-        searchInfo: You can search Cmr by Id
-        params:
-            results: results
-            cmrFk: CMR id
-            hasCmrDms: Attached in gestdoc
-            'true': 'Yes'
-            'false': 'No'
-            ticketFk: Ticketd id
-            routeFk: Route id
-            countryFk: Country
-            clientFk: Client id
-            warehouseFk: Warehouse
-            shipped: Preparation date
-            viewCmr: View CMR
-            downloadCmrs: Download CMRs
-            search: General search
diff --git a/src/pages/Route/locale/es.yml b/src/pages/Route/locale/es.yml
index 2785ded31..fe3ba08be 100644
--- a/src/pages/Route/locale/es.yml
+++ b/src/pages/Route/locale/es.yml
@@ -47,11 +47,16 @@ route:
         routeFk: Id ruta
         clientFk: Id cliente
         countryFk: Pais
-        shipped: Fecha preparación
+        shipped: F. envío
         agencyModeName: Agencia Ruta
         agencyAgreement: Agencia Acuerdo
         isOwn: Propio
         isAnyVolumeAllowed: Cualquier volumen
+        created: Creado
+        addressFromFk: Remitente
+        addressToFk: Destinatario
+        landed: F. entrega
+        ead: ETD
     Worker: Trabajador
     Agency: Agencia
     Vehicle: Vehículo

From af612f937936fa975a8ed414158f2ec53f0ccbab Mon Sep 17 00:00:00 2001
From: jtubau <jtubau@verdnatura.es>
Date: Wed, 26 Mar 2025 13:28:18 +0100
Subject: [PATCH 08/35] test: refs #7638 add route, agency, and carrier pop-up
 redirection tests in CmrList component

---
 .../integration/route/cmr/cmrList.spec.js     | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/test/cypress/integration/route/cmr/cmrList.spec.js b/test/cypress/integration/route/cmr/cmrList.spec.js
index d33508e3a..452a696bd 100644
--- a/test/cypress/integration/route/cmr/cmrList.spec.js
+++ b/test/cypress/integration/route/cmr/cmrList.spec.js
@@ -5,6 +5,9 @@ describe('Cmr list', () => {
     const selectors = {
         ticket: getLinkSelector('ticketFk'),
         client: getLinkSelector('clientFk'),
+        route: getLinkSelector('routeFk'),
+        agency: getLinkSelector('agencyModeFk'),
+        carrier: getLinkSelector('supplierFk'),
         lastRowSelectCheckBox:
             '.q-virtual-scroll__content > tr:last-child > :nth-child(1) > .q-checkbox',
         downloadBtn: '#subToolbar > .q-btn',
@@ -21,6 +24,10 @@ describe('Cmr list', () => {
     const data = {
         ticket: '1',
         client: 'Bruce Wayne',
+        route: 'first route',
+        routeId: '1',
+        agency: 'inhouse pickup',
+        carrier: 'PLANTS SL',
     };
 
     beforeEach(() => {
@@ -69,6 +76,26 @@ describe('Cmr list', () => {
         });
     });
 
+    describe('Route pop-ups', () => {
+        it('Should redirect to the route summary from the route descriptor pop-up', () => {
+            cy.get(selectors.route).should('be.visible').click();
+            cy.containContent(selectors.descriptorId, data.routeId);
+            cy.get(selectors.descriptorGoToSummaryBtn).should('be.visible').click();
+            cy.url().should('include', '/route/1/summary');
+            cy.containContent(selectors.summaryTitle, data.route);
+        });
+
+        it('Should redirect to the route summary from summary pop-up from the route descriptor pop-up', () => {
+            cy.get(selectors.route).should('be.visible').click();
+            cy.containContent(selectors.descriptorId, data.routeId);
+            cy.get(selectors.descriptorOpenSummaryBtn).should('be.visible').click();
+            cy.containContent(selectors.summaryTitle, data.route);
+            cy.get(selectors.summaryGoToSummaryBtn).should('be.visible').click();
+            cy.url().should('include', '/route/1/summary');
+            cy.containContent(selectors.summaryTitle, data.route);
+        });
+    });
+
     describe('Client pop-ups', () => {
         it('Should redirect to the client summary from the client descriptor pop-up', () => {
             cy.get(selectors.client).should('be.visible').click();
@@ -88,4 +115,44 @@ describe('Cmr list', () => {
             cy.containContent(selectors.summaryTitle, data.client);
         });
     });
+
+    describe('Agency pop-ups', () => {
+        it('Should redirect to the agency summary from the agency descriptor pop-up', () => {
+            cy.get(selectors.agency).should('be.visible').click();
+            cy.containContent(selectors.descriptorTitle, data.agency);
+            cy.get(selectors.descriptorGoToSummaryBtn).should('be.visible').click();
+            cy.url().should('include', '/agency/1/summary');
+            cy.containContent(selectors.summaryTitle, data.agency);
+        });
+
+        it('Should redirect to the agency summary from summary pop-up from the agency descriptor pop-up', () => {
+            cy.get(selectors.agency).should('be.visible').click();
+            cy.containContent(selectors.descriptorTitle, data.agency);
+            cy.get(selectors.descriptorOpenSummaryBtn).should('be.visible').click();
+            cy.containContent(selectors.summaryTitle, data.agency);
+            cy.get(selectors.summaryGoToSummaryBtn).should('be.visible').click();
+            cy.url().should('include', '/agency/1/summary');
+            cy.containContent(selectors.summaryTitle, data.agency);
+        });
+    });
+
+    describe('Carrier pop-ups', () => {
+        it('Should redirect to the supplier summary from the supplier descriptor pop-up', () => {
+            cy.get(selectors.carrier).should('be.visible').click();
+            cy.containContent(selectors.descriptorTitle, data.carrier);
+            cy.get(selectors.descriptorGoToSummaryBtn).should('be.visible').click();
+            cy.url().should('include', '/supplier/1/summary');
+            cy.containContent(selectors.summaryTitle, data.carrier);
+        });
+
+        it('Should redirect to the supplier summary from summary pop-up from the supplier descriptor pop-up', () => {
+            cy.get(selectors.carrier).should('be.visible').click();
+            cy.containContent(selectors.descriptorTitle, data.carrier);
+            cy.get(selectors.descriptorOpenSummaryBtn).should('be.visible').click();
+            cy.containContent(selectors.summaryTitle, data.carrier);
+            cy.get(selectors.summaryGoToSummaryBtn).should('be.visible').click();
+            cy.url().should('include', '/supplier/1/summary');
+            cy.containContent(selectors.summaryTitle, data.carrier);
+        });
+    });
 });

From ac19803fcd96410bb955d4b12ed9cb3ce1852491 Mon Sep 17 00:00:00 2001
From: jtubau <jtubau@verdnatura.es>
Date: Wed, 26 Mar 2025 13:28:51 +0100
Subject: [PATCH 09/35] refactor: refs #7638 add cmrFk order

---
 src/pages/Route/Cmr/CmrList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Route/Cmr/CmrList.vue b/src/pages/Route/Cmr/CmrList.vue
index 3c331ec46..98e1bda02 100644
--- a/src/pages/Route/Cmr/CmrList.vue
+++ b/src/pages/Route/Cmr/CmrList.vue
@@ -308,7 +308,7 @@ function downloadPdfs() {
         :data-key
         url="Cmrs/filter"
         :columns="columns"
-        :order="['shipped DESC']"
+        :order="['shipped DESC', 'cmrFk ASC']"
         :user-params="userParams"
         default-mode="table"
         v-model:selected="selectedRows"

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 10/35] 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 11/35] 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 84dbf9691e258f89199bcc8851d9b405666845cd Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Thu, 3 Apr 2025 12:25:11 +0200
Subject: [PATCH 12/35] feat: refs #8828 add warehouse filtering for tickets
 and travels

---
 src/components/FilterTravelForm.vue           | 10 ++++++++++
 src/components/RegularizeStockForm.vue        |  5 +++++
 src/pages/Entry/EntryFilter.vue               | 10 ++++++++++
 .../Card/BasicData/TicketBasicDataForm.vue    |  5 +++++
 .../Ticket/Negative/TicketLackFilter.vue      | 11 ++++++++++-
 src/pages/Ticket/TicketAdvanceFilter.vue      |  5 +++++
 src/pages/Ticket/TicketCreate.vue             | 17 ++++++++++-------
 src/pages/Ticket/TicketCreateDialog.vue       | 19 +++++++++++--------
 src/pages/Ticket/TicketFilter.vue             | 11 ++++++++++-
 src/pages/Ticket/TicketFutureFilter.vue       |  5 +++++
 src/pages/Ticket/TicketList.vue               | 11 ++++++++++-
 src/pages/Ticket/TicketWeekly.vue             |  3 +++
 src/pages/Ticket/locale/en.yml                |  1 +
 src/pages/Travel/Card/TravelBasicData.vue     | 12 ++++++++++--
 src/pages/Travel/ExtraCommunityFilter.vue     |  8 ++++++--
 src/pages/Travel/TravelCreate.vue             | 10 ++++++++++
 src/pages/Travel/TravelFilter.vue             | 10 ++++++++++
 src/pages/Travel/TravelList.vue               |  2 ++
 18 files changed, 133 insertions(+), 22 deletions(-)

diff --git a/src/components/FilterTravelForm.vue b/src/components/FilterTravelForm.vue
index 4aad327b2..8655ad8ad 100644
--- a/src/components/FilterTravelForm.vue
+++ b/src/components/FilterTravelForm.vue
@@ -156,6 +156,11 @@ const selectTravel = ({ id }) => {
                     option-label="name"
                     option-value="id"
                     v-model="travelFilterParams.warehouseOutFk"
+                    :where="{
+                        isOrigin: {
+                            neq: 0,
+                        },
+                    }"
                 />
                 <VnSelect
                     :label="t('globals.warehouseIn')"
@@ -164,6 +169,11 @@ const selectTravel = ({ id }) => {
                     option-label="name"
                     option-value="id"
                     v-model="travelFilterParams.warehouseInFk"
+                    :where="{
+                        isDestiny: {
+                            neq: 0,
+                        },
+                    }"
                 />
                 <VnInputDate
                     :label="t('globals.shipped')"
diff --git a/src/components/RegularizeStockForm.vue b/src/components/RegularizeStockForm.vue
index 91a2e5d39..4093cc7cc 100644
--- a/src/components/RegularizeStockForm.vue
+++ b/src/components/RegularizeStockForm.vue
@@ -40,6 +40,11 @@ const onDataSaved = (data) => {
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
         auto-load
+        :where="{
+            isInventory: {
+                neq: 0,
+            },
+        }"
     />
     <FormModelPopup
         url-create="Items/regularize"
diff --git a/src/pages/Entry/EntryFilter.vue b/src/pages/Entry/EntryFilter.vue
index 19f4bca86..40e3ad33a 100644
--- a/src/pages/Entry/EntryFilter.vue
+++ b/src/pages/Entry/EntryFilter.vue
@@ -162,6 +162,11 @@ const entryFilterPanel = ref();
                         v-model="params.warehouseOutFk"
                         @update:model-value="searchFn()"
                         url="Warehouses"
+                        :where="{
+                            isOrigin: {
+                                neq: 0,
+                            },
+                        }"
                         :fields="['id', 'name']"
                         sort-by="name ASC"
                         hide-selected
@@ -177,6 +182,11 @@ const entryFilterPanel = ref();
                         v-model="params.warehouseInFk"
                         @update:model-value="searchFn()"
                         url="Warehouses"
+                        :where="{
+                            isDestiny: {
+                                neq: 0,
+                            },
+                        }"
                         :fields="['id', 'name']"
                         sort-by="name ASC"
                         hide-selected
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index 61932468c..b01234739 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -239,6 +239,11 @@ async function getZone(options) {
     <FetchData
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
+        :where="{
+            isForTicket: {
+                neq: 0,
+            },
+        }"
         auto-load
     />
     <FetchData
diff --git a/src/pages/Ticket/Negative/TicketLackFilter.vue b/src/pages/Ticket/Negative/TicketLackFilter.vue
index 73d53b247..54b61ce04 100644
--- a/src/pages/Ticket/Negative/TicketLackFilter.vue
+++ b/src/pages/Ticket/Negative/TicketLackFilter.vue
@@ -46,7 +46,16 @@ const setUserParams = (params) => {
 </script>
 
 <template>
-    <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => (warehouses = data)"
+        :where="{
+            isForTicket: {
+                neq: 0,
+            },
+        }"
+        auto-load
+    />
     <FetchData
         url="ItemCategories"
         :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
diff --git a/src/pages/Ticket/TicketAdvanceFilter.vue b/src/pages/Ticket/TicketAdvanceFilter.vue
index f065eaf2e..04cbc0cac 100644
--- a/src/pages/Ticket/TicketAdvanceFilter.vue
+++ b/src/pages/Ticket/TicketAdvanceFilter.vue
@@ -51,6 +51,11 @@ onMounted(async () => await getItemPackingTypes());
     <FetchData
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
+        :where="{
+            isForTicket: {
+                neq: 0,
+            },
+        }"
         auto-load
     />
     <VnFilterPanel
diff --git a/src/pages/Ticket/TicketCreate.vue b/src/pages/Ticket/TicketCreate.vue
index 96d200547..93f85c72b 100644
--- a/src/pages/Ticket/TicketCreate.vue
+++ b/src/pages/Ticket/TicketCreate.vue
@@ -67,14 +67,12 @@ const onClientSelected = async (formData) => {
 
 const fetchAvailableAgencies = async (formData) => {
     resetAgenciesSelector(formData);
-    const response= await getAgencies(formData, selectedClient.value);
+    const response = await getAgencies(formData, selectedClient.value);
     if (!response) return;
-    
-    const { options, agency } =  response
-    if(options)
-        agenciesOptions.value = options;
-    if(agency)
-        formData.agencyModeId = agency;
+
+    const { options, agency } = response;
+    if (options) agenciesOptions.value = options;
+    if (agency) formData.agencyModeId = agency;
 };
 
 const redirectToTicketList = (_, { id }) => {
@@ -92,6 +90,11 @@ const redirectToTicketList = (_, { id }) => {
     <FetchData
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
+        :where="{
+            isForTicket: {
+                neq: 0,
+            },
+        }"
         order="name"
         auto-load
     />
diff --git a/src/pages/Ticket/TicketCreateDialog.vue b/src/pages/Ticket/TicketCreateDialog.vue
index 2245c5c81..dd5444c13 100644
--- a/src/pages/Ticket/TicketCreateDialog.vue
+++ b/src/pages/Ticket/TicketCreateDialog.vue
@@ -40,7 +40,7 @@ onBeforeMount(async () => {
 
 function resetAgenciesSelector(formData) {
     agenciesOptions.value = [];
-    if(formData) formData.agencyModeId = null;
+    if (formData) formData.agencyModeId = null;
 }
 
 const fetchClient = async (formData) => {
@@ -67,14 +67,12 @@ const onClientSelected = async (formData) => {
 
 const fetchAvailableAgencies = async (formData) => {
     resetAgenciesSelector(formData);
-    const response= await getAgencies(formData, selectedClient.value);
+    const response = await getAgencies(formData, selectedClient.value);
     if (!response) return;
-        
-    const { options, agency } =  response
-    if(options)
-        agenciesOptions.value = options;
-    if(agency)
-        formData.agencyModeId = agency;
+
+    const { options, agency } = response;
+    if (options) agenciesOptions.value = options;
+    if (agency) formData.agencyModeId = agency;
 };
 
 const redirectToTicketList = (_, { id }) => {
@@ -86,6 +84,11 @@ const redirectToTicketList = (_, { id }) => {
     <FetchData
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
+        :where="{
+            isForTicket: {
+                neq: 0,
+            },
+        }"
         order="name"
         auto-load
     />
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index d84d1c082..150b06bc5 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -41,7 +41,16 @@ const groupedStates = ref([]);
         @on-fetch="(data) => (agencies = data)"
         auto-load
     />
-    <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => (warehouses = data)"
+        auto-load
+        :where="{
+            isForTicket: {
+                neq: 0,
+            },
+        }"
+    />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
diff --git a/src/pages/Ticket/TicketFutureFilter.vue b/src/pages/Ticket/TicketFutureFilter.vue
index 033b47f72..2b008b3b8 100644
--- a/src/pages/Ticket/TicketFutureFilter.vue
+++ b/src/pages/Ticket/TicketFutureFilter.vue
@@ -55,6 +55,11 @@ onMounted(async () => {
     <FetchData
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
+        :where="{
+            isForTicket: {
+                neq: 0,
+            },
+        }"
         auto-load
     />
     <VnFilterPanel
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 039d3ca9e..a8120d3e2 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -202,6 +202,11 @@ const columns = computed(() => [
         attrs: {
             url: 'warehouses',
             fields: ['id', 'name'],
+            where: {
+                isForTicket: {
+                    neq: 0,
+                },
+            },
         },
         format: (row) => row.warehouse,
         columnField: {
@@ -668,9 +673,13 @@ function setReference(data) {
                                 :sort-by="['name']"
                                 :label="t('globals.warehouse')"
                                 v-model="data.warehouseId"
-                                :options="warehousesOptions"
                                 hide-selected
                                 required
+                                :where="{
+                                    isForTicket: {
+                                        neq: 0,
+                                    },
+                                }"
                                 @update:model-value="() => fetchAvailableAgencies(data)"
                             />
                         </div>
diff --git a/src/pages/Ticket/TicketWeekly.vue b/src/pages/Ticket/TicketWeekly.vue
index d6493550b..afb93d286 100644
--- a/src/pages/Ticket/TicketWeekly.vue
+++ b/src/pages/Ticket/TicketWeekly.vue
@@ -102,6 +102,9 @@ const columns = computed(() => [
             attrs: {
                 url: 'Warehouses',
                 fields: ['id', 'name'],
+                where: {
+                    isForTicket: { neq: 0 },
+                },
             },
             inWhere: true,
         },
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 9eb8ce8cb..591a0a082 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -207,6 +207,7 @@ ticketList:
     ref: Reference
     rounding: Rounding
     noVerifiedData: No verified data
+    warehouse: Warehouse
     purchaseRequest: Purchase request
     notVisible: Not visible
     clientFrozen: Client frozen
diff --git a/src/pages/Travel/Card/TravelBasicData.vue b/src/pages/Travel/Card/TravelBasicData.vue
index a6ef8ad19..8b7adc71e 100644
--- a/src/pages/Travel/Card/TravelBasicData.vue
+++ b/src/pages/Travel/Card/TravelBasicData.vue
@@ -28,13 +28,21 @@ const warehousesOptionsIn = ref([]);
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptionsOut = data)"
         auto-load
-        :filter="{ where: { isOrigin: TRUE } }"
+        :where="{
+            isOrigin: {
+                neq: 0,
+            },
+        }"
     />
     <FetchData
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptionsIn = data)"
         auto-load
-        :filter="{ where: { isDestiny: TRUE } }"
+        :where="{
+            isDestiny: {
+                neq: 0,
+            },
+        }"
     />
     <FormModel :url-update="`Travels/${route.params.id}`" model="Travel">
         <template #form="{ data }">
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index 76ffdba20..ff8e5582d 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -183,7 +183,9 @@ warehouses();
                     <VnSelect
                         :label="t('extraCommunity.filter.warehouseOutFk')"
                         v-model="params.warehouseOutFk"
-                        :options="warehousesOptions"
+                        :options="
+                            warehousesOptions.filter((option) => option.isOrigin !== 0)
+                        "
                         option-value="id"
                         option-label="name"
                         hide-selected
@@ -197,7 +199,9 @@ warehouses();
                     <VnSelect
                         :label="t('extraCommunity.filter.warehouseInFk')"
                         v-model="params.warehouseInFk"
-                        :options="warehousesOptions"
+                        :options="
+                            warehousesOptions.filter((option) => option.isDestiny !== 0)
+                        "
                         option-value="id"
                         option-label="name"
                         hide-selected
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index 35a936134..65b952ccc 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -81,6 +81,11 @@ const redirectToTravelBasicData = (_, { id }) => {
                         option-value="id"
                         option-label="name"
                         hide-selected
+                        :where="{
+                            isOrigin: {
+                                neq: 0,
+                            },
+                        }"
                     />
                     <VnSelect
                         :label="t('globals.warehouseIn')"
@@ -89,6 +94,11 @@ const redirectToTravelBasicData = (_, { id }) => {
                         option-value="id"
                         option-label="name"
                         hide-selected
+                        :where="{
+                            isDestiny: {
+                                neq: 0,
+                            },
+                        }"
                     />
                 </VnRow>
             </template>
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
index 5498fd269..1cc916f5d 100644
--- a/src/pages/Travel/TravelFilter.vue
+++ b/src/pages/Travel/TravelFilter.vue
@@ -64,6 +64,11 @@ defineExpose({ states });
                     option-filter="name"
                     dense
                     filled
+                    :where="{
+                        isDestiny: {
+                            neq: 0,
+                        },
+                    }"
                 />
                 <VnInputDate
                     :label="t('travel.shipped')"
@@ -89,6 +94,11 @@ defineExpose({ states });
                     option-filter="name"
                     dense
                     filled
+                    :where="{
+                        isOrigin: {
+                            neq: 0,
+                        },
+                    }"
                 />
                 <VnInputDate
                     :label="t('travel.landed')"
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 32ddc639a..bad1ab019 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -99,6 +99,7 @@ const columns = computed(() => [
             fields: ['id', 'name'],
             optionLabel: 'name',
             optionValue: 'id',
+            where: { isDestiny: { neq: 0 } },
         },
         format: (row) => row.warehouseInName,
         columnField: {
@@ -133,6 +134,7 @@ const columns = computed(() => [
         attrs: {
             url: 'warehouses',
             fields: ['id', 'name'],
+            where: { isOrigin: { neq: 0 } },
         },
         format: (row) => row.warehouseOutName,
         columnField: {

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 13/35] 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 eaa896852c5a6957030e741b2e60ff823ebfa258 Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Mon, 7 Apr 2025 10:15:37 +0200
Subject: [PATCH 14/35] fix: refs #8828 update warehouse selection in ticket
 list tests

---
 test/cypress/integration/ticket/ticketList.spec.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/test/cypress/integration/ticket/ticketList.spec.js b/test/cypress/integration/ticket/ticketList.spec.js
index 5613a5854..b72f862c4 100644
--- a/test/cypress/integration/ticket/ticketList.spec.js
+++ b/test/cypress/integration/ticket/ticketList.spec.js
@@ -79,16 +79,13 @@ describe('TicketList', () => {
             });
         }).as('ticket');
 
-        cy.get('[data-cy="Warehouse_select"]').type('Warehouse Five');
-        cy.get('.q-menu .q-item').contains('Warehouse Five').click();
+        cy.get('[data-cy="Warehouse_select"]').type('Warehouse One');
+        cy.get('.q-menu .q-item').contains('Warehouse One').click();
         cy.wait('@ticket').then((interception) => {
             const data = interception.response.body[1];
             expect(data.hasComponentLack).to.equal(1);
-            expect(data.isTooLittle).to.equal(1);
-            expect(data.hasItemShortage).to.equal(1);
         });
         cy.get('.icon-components').should('exist');
         cy.get('.icon-unavailable').should('exist');
-        cy.get('.icon-isTooLittle').should('exist');
     });
 });

From 3fa7fe7ae083b50be4592daa6a76b01a70e58b86 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 17 Apr 2025 12:16:02 +0200
Subject: [PATCH 15/35] fix: make setDefault function async axios patch

---
 src/pages/Customer/Card/CustomerAddress.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Customer/Card/CustomerAddress.vue b/src/pages/Customer/Card/CustomerAddress.vue
index f1799d0cc..418c4ec30 100644
--- a/src/pages/Customer/Card/CustomerAddress.vue
+++ b/src/pages/Customer/Card/CustomerAddress.vue
@@ -77,10 +77,10 @@ const isDefaultAddress = (address) => {
     return client?.value?.defaultAddressFk === address.id ? 1 : 0;
 };
 
-const setDefault = (address) => {
+const setDefault = async (address) => {
     const url = `Clients/${route.params.id}`;
     const payload = { defaultAddressFk: address.id };
-    axios.patch(url, payload).then((res) => {
+    await axios.patch(url, payload).then((res) => {
         if (res.data) {
             client.value.defaultAddressFk = res.data.defaultAddressFk;
             sortAddresses();

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 16/35] 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'),
+        },
     ],
 };
 

From 5fa5776ee71d7b25f6054c31abbbb247a2b831aa Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 17 Apr 2025 15:08:30 +0200
Subject: [PATCH 17/35] fix: ensure git fetch is executed with the correct
 encoding in getGitDiff function

---
 test/cypress/docker/find/find.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/test/cypress/docker/find/find.js b/test/cypress/docker/find/find.js
index 4f8063c86..9570dafaa 100644
--- a/test/cypress/docker/find/find.js
+++ b/test/cypress/docker/find/find.js
@@ -6,6 +6,9 @@ const FINDED_PATHS = ['src', E2E_PATH];
 
 function getGitDiff(options) {
     const TARGET_BRANCH = options[2] || 'dev';
+    execSync(`git fetch origin ${TARGET_BRANCH}`, {
+        encoding: 'utf-8',
+    });
     const diff = execSync(`git diff --name-only origin/${TARGET_BRANCH}`, {
         encoding: 'utf-8',
     });

From 83a0a1ab5d074bd26392e31da390cf422ad0b536 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 22 Apr 2025 08:25:53 +0200
Subject: [PATCH 18/35] fix: pass COMPOSE_TAG to find.js script for E2E module
 detection

---
 Jenkinsfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index a9db9d369..59bf09e22 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -125,7 +125,7 @@ pipeline {
                             sh "docker-compose ${env.COMPOSE_PARAMS} pull db"
                             sh "docker-compose ${env.COMPOSE_PARAMS} up -d"
 
-                            def modules = sh(script: 'node test/cypress/docker/find/find.js', returnStdout: true).trim()
+                            def modules = sh(script: "node test/cypress/docker/find/find.js ${env.COMPOSE_TAG}", returnStdout: true).trim()
                             echo "E2E MODULES: ${modules}"
                             image.inside("--network ${env.COMPOSE_PROJECT}_default -e CI -e TZ --init") {
                                 sh "sh test/cypress/docker/cypressParallel.sh 1 '${modules}'"

From 1985ab291031a5908a9c0bbb0fde9f7ec636c6c7 Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Tue, 22 Apr 2025 09:16:01 +0200
Subject: [PATCH 19/35] fix: refs #8909 remove column shippedHour from ticket
 basicdata

---
 src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index 9d70fea38..6ee601ed3 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -416,13 +416,6 @@ async function getZone(options) {
                 :rules="validate('ticketList.shipped')"
                 @update:model-value="setShipped"
             />
-            <VnInputTime
-                :label="t('basicData.shippedHour')"
-                v-model="formData.shipped"
-                :required="true"
-                :rules="validate('basicData.shippedHour')"
-                @update:model-value="setShipped"
-            />
             <VnInputDate
                 :label="t('basicData.landed')"
                 v-model="formData.landed"

From 5eeae1143ce9f5e79584b79e395df5d72712d72d Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Tue, 22 Apr 2025 10:03:22 +0200
Subject: [PATCH 20/35] refactor: refs #8828 update filter logic to use boolean

---
 src/components/FilterTravelForm.vue                     | 8 ++------
 src/components/RegularizeStockForm.vue                  | 4 +---
 src/pages/Entry/EntryFilter.vue                         | 8 ++------
 src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue | 4 +---
 src/pages/Ticket/Negative/TicketLackFilter.vue          | 4 +---
 src/pages/Ticket/TicketAdvanceFilter.vue                | 4 +---
 src/pages/Ticket/TicketCreate.vue                       | 4 +---
 src/pages/Ticket/TicketCreateDialog.vue                 | 4 +---
 src/pages/Ticket/TicketFilter.vue                       | 4 +---
 src/pages/Ticket/TicketFutureFilter.vue                 | 4 +---
 src/pages/Ticket/TicketList.vue                         | 8 ++------
 src/pages/Ticket/TicketWeekly.vue                       | 2 +-
 src/pages/Travel/Card/TravelBasicData.vue               | 8 ++------
 src/pages/Travel/ExtraCommunityFilter.vue               | 6 ++++--
 src/pages/Travel/TravelCreate.vue                       | 8 ++------
 src/pages/Travel/TravelFilter.vue                       | 8 ++------
 src/pages/Travel/TravelList.vue                         | 4 ++--
 17 files changed, 27 insertions(+), 65 deletions(-)

diff --git a/src/components/FilterTravelForm.vue b/src/components/FilterTravelForm.vue
index 8655ad8ad..f2a7a09eb 100644
--- a/src/components/FilterTravelForm.vue
+++ b/src/components/FilterTravelForm.vue
@@ -157,9 +157,7 @@ const selectTravel = ({ id }) => {
                     option-value="id"
                     v-model="travelFilterParams.warehouseOutFk"
                     :where="{
-                        isOrigin: {
-                            neq: 0,
-                        },
+                        isOrigin: true,
                     }"
                 />
                 <VnSelect
@@ -170,9 +168,7 @@ const selectTravel = ({ id }) => {
                     option-value="id"
                     v-model="travelFilterParams.warehouseInFk"
                     :where="{
-                        isDestiny: {
-                            neq: 0,
-                        },
+                        isDestiny: true,
                     }"
                 />
                 <VnInputDate
diff --git a/src/components/RegularizeStockForm.vue b/src/components/RegularizeStockForm.vue
index 4093cc7cc..340a18f9d 100644
--- a/src/components/RegularizeStockForm.vue
+++ b/src/components/RegularizeStockForm.vue
@@ -41,9 +41,7 @@ const onDataSaved = (data) => {
         @on-fetch="(data) => (warehousesOptions = data)"
         auto-load
         :where="{
-            isInventory: {
-                neq: 0,
-            },
+            isInventory: true,
         }"
     />
     <FormModelPopup
diff --git a/src/pages/Entry/EntryFilter.vue b/src/pages/Entry/EntryFilter.vue
index 40e3ad33a..c4d47bb28 100644
--- a/src/pages/Entry/EntryFilter.vue
+++ b/src/pages/Entry/EntryFilter.vue
@@ -163,9 +163,7 @@ const entryFilterPanel = ref();
                         @update:model-value="searchFn()"
                         url="Warehouses"
                         :where="{
-                            isOrigin: {
-                                neq: 0,
-                            },
+                            isOrigin: true,
                         }"
                         :fields="['id', 'name']"
                         sort-by="name ASC"
@@ -183,9 +181,7 @@ const entryFilterPanel = ref();
                         @update:model-value="searchFn()"
                         url="Warehouses"
                         :where="{
-                            isDestiny: {
-                                neq: 0,
-                            },
+                            isDestiny: true,
                         }"
                         :fields="['id', 'name']"
                         sort-by="name ASC"
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index b01234739..c2ed24dbf 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -240,9 +240,7 @@ async function getZone(options) {
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
         :where="{
-            isForTicket: {
-                neq: 0,
-            },
+            isForTicket: true,
         }"
         auto-load
     />
diff --git a/src/pages/Ticket/Negative/TicketLackFilter.vue b/src/pages/Ticket/Negative/TicketLackFilter.vue
index 5761cf70a..8c999e0b4 100644
--- a/src/pages/Ticket/Negative/TicketLackFilter.vue
+++ b/src/pages/Ticket/Negative/TicketLackFilter.vue
@@ -51,9 +51,7 @@ const setUserParams = (params) => {
         url="Warehouses"
         @on-fetch="(data) => (warehouses = data)"
         :where="{
-            isForTicket: {
-                neq: 0,
-            },
+            isForTicket: true,
         }"
         auto-load
     />
diff --git a/src/pages/Ticket/TicketAdvanceFilter.vue b/src/pages/Ticket/TicketAdvanceFilter.vue
index 645ec53d4..5867e8289 100644
--- a/src/pages/Ticket/TicketAdvanceFilter.vue
+++ b/src/pages/Ticket/TicketAdvanceFilter.vue
@@ -52,9 +52,7 @@ onMounted(async () => await getItemPackingTypes());
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
         :where="{
-            isForTicket: {
-                neq: 0,
-            },
+            isForTicket: true,
         }"
         auto-load
     />
diff --git a/src/pages/Ticket/TicketCreate.vue b/src/pages/Ticket/TicketCreate.vue
index 93f85c72b..7510713da 100644
--- a/src/pages/Ticket/TicketCreate.vue
+++ b/src/pages/Ticket/TicketCreate.vue
@@ -91,9 +91,7 @@ const redirectToTicketList = (_, { id }) => {
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
         :where="{
-            isForTicket: {
-                neq: 0,
-            },
+            isForTicket: true,
         }"
         order="name"
         auto-load
diff --git a/src/pages/Ticket/TicketCreateDialog.vue b/src/pages/Ticket/TicketCreateDialog.vue
index dd5444c13..9715da6f9 100644
--- a/src/pages/Ticket/TicketCreateDialog.vue
+++ b/src/pages/Ticket/TicketCreateDialog.vue
@@ -85,9 +85,7 @@ const redirectToTicketList = (_, { id }) => {
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
         :where="{
-            isForTicket: {
-                neq: 0,
-            },
+            isForTicket: true,
         }"
         order="name"
         auto-load
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index a2ddfc671..0616ee8ac 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -46,9 +46,7 @@ const groupedStates = ref([]);
         @on-fetch="(data) => (warehouses = data)"
         auto-load
         :where="{
-            isForTicket: {
-                neq: 0,
-            },
+            isForTicket: true,
         }"
     />
     <VnFilterPanel
diff --git a/src/pages/Ticket/TicketFutureFilter.vue b/src/pages/Ticket/TicketFutureFilter.vue
index 2b008b3b8..a328479eb 100644
--- a/src/pages/Ticket/TicketFutureFilter.vue
+++ b/src/pages/Ticket/TicketFutureFilter.vue
@@ -56,9 +56,7 @@ onMounted(async () => {
         url="Warehouses"
         @on-fetch="(data) => (warehousesOptions = data)"
         :where="{
-            isForTicket: {
-                neq: 0,
-            },
+            isForTicket: true,
         }"
         auto-load
     />
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 64381adb9..b7647260f 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -205,9 +205,7 @@ const columns = computed(() => [
             url: 'warehouses',
             fields: ['id', 'name'],
             where: {
-                isForTicket: {
-                    neq: 0,
-                },
+                isForTicket: true,
             },
         },
         format: (row) => row.warehouse,
@@ -678,9 +676,7 @@ function setReference(data) {
                                 hide-selected
                                 required
                                 :where="{
-                                    isForTicket: {
-                                        neq: 0,
-                                    },
+                                    isForTicket: true,
                                 }"
                                 @update:model-value="() => fetchAvailableAgencies(data)"
                             />
diff --git a/src/pages/Ticket/TicketWeekly.vue b/src/pages/Ticket/TicketWeekly.vue
index afb93d286..3906d6c44 100644
--- a/src/pages/Ticket/TicketWeekly.vue
+++ b/src/pages/Ticket/TicketWeekly.vue
@@ -103,7 +103,7 @@ const columns = computed(() => [
                 url: 'Warehouses',
                 fields: ['id', 'name'],
                 where: {
-                    isForTicket: { neq: 0 },
+                    isForTicket: true,
                 },
             },
             inWhere: true,
diff --git a/src/pages/Travel/Card/TravelBasicData.vue b/src/pages/Travel/Card/TravelBasicData.vue
index 8b7adc71e..6ff73d5fa 100644
--- a/src/pages/Travel/Card/TravelBasicData.vue
+++ b/src/pages/Travel/Card/TravelBasicData.vue
@@ -29,9 +29,7 @@ const warehousesOptionsIn = ref([]);
         @on-fetch="(data) => (warehousesOptionsOut = data)"
         auto-load
         :where="{
-            isOrigin: {
-                neq: 0,
-            },
+            isOrigin: true,
         }"
     />
     <FetchData
@@ -39,9 +37,7 @@ const warehousesOptionsIn = ref([]);
         @on-fetch="(data) => (warehousesOptionsIn = data)"
         auto-load
         :where="{
-            isDestiny: {
-                neq: 0,
-            },
+            isDestiny: true,
         }"
     />
     <FormModel :url-update="`Travels/${route.params.id}`" model="Travel">
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index ff8e5582d..c664c3afd 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -184,7 +184,7 @@ warehouses();
                         :label="t('extraCommunity.filter.warehouseOutFk')"
                         v-model="params.warehouseOutFk"
                         :options="
-                            warehousesOptions.filter((option) => option.isOrigin !== 0)
+                            warehousesOptions.filter((option) => option.isOrigin === true)
                         "
                         option-value="id"
                         option-label="name"
@@ -200,7 +200,9 @@ warehouses();
                         :label="t('extraCommunity.filter.warehouseInFk')"
                         v-model="params.warehouseInFk"
                         :options="
-                            warehousesOptions.filter((option) => option.isDestiny !== 0)
+                            warehousesOptions.filter(
+                                (option) => option.isDestiny === true,
+                            )
                         "
                         option-value="id"
                         option-label="name"
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index 65b952ccc..acadd88c1 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -82,9 +82,7 @@ const redirectToTravelBasicData = (_, { id }) => {
                         option-label="name"
                         hide-selected
                         :where="{
-                            isOrigin: {
-                                neq: 0,
-                            },
+                            isOrigin: true,
                         }"
                     />
                     <VnSelect
@@ -95,9 +93,7 @@ const redirectToTravelBasicData = (_, { id }) => {
                         option-label="name"
                         hide-selected
                         :where="{
-                            isDestiny: {
-                                neq: 0,
-                            },
+                            isDestiny: true,
                         }"
                     />
                 </VnRow>
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
index 1cc916f5d..6d0a1a73a 100644
--- a/src/pages/Travel/TravelFilter.vue
+++ b/src/pages/Travel/TravelFilter.vue
@@ -65,9 +65,7 @@ defineExpose({ states });
                     dense
                     filled
                     :where="{
-                        isDestiny: {
-                            neq: 0,
-                        },
+                        isDestiny: true,
                     }"
                 />
                 <VnInputDate
@@ -95,9 +93,7 @@ defineExpose({ states });
                     dense
                     filled
                     :where="{
-                        isOrigin: {
-                            neq: 0,
-                        },
+                        isOrigin: true,
                     }"
                 />
                 <VnInputDate
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index bad1ab019..65c02a661 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -99,7 +99,7 @@ const columns = computed(() => [
             fields: ['id', 'name'],
             optionLabel: 'name',
             optionValue: 'id',
-            where: { isDestiny: { neq: 0 } },
+            where: { isDestiny: true },
         },
         format: (row) => row.warehouseInName,
         columnField: {
@@ -134,7 +134,7 @@ const columns = computed(() => [
         attrs: {
             url: 'warehouses',
             fields: ['id', 'name'],
-            where: { isOrigin: { neq: 0 } },
+            where: { isOrigin: true },
         },
         format: (row) => row.warehouseOutName,
         columnField: {

From 4033dd472da54fb11a72fbf2bc201fa5e02d8528 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 22 Apr 2025 11:22:18 +0200
Subject: [PATCH 21/35] fix: change disable to readonly for loading state in
 VnSelect component

---
 src/components/common/VnSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index edbee94b2..1bc2f7d1b 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -368,7 +368,7 @@ function getCaption(opt) {
         hide-bottom-space
         :input-debounce="useURL ? '300' : '0'"
         :loading="someIsLoading"
-        :disable="someIsLoading"
+        :readonly="someIsLoading"
         @virtual-scroll="onScroll"
         @keydown="handleKeyDown"
         :data-cy="$attrs.dataCy ?? $attrs.label + '_select'"

From 53bbdf52cfa5f20c45c44dcb0032d2a68ec30217 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 22 Apr 2025 11:35:47 +0200
Subject: [PATCH 22/35] fix(VnFilter): refs #8277 update columnFilter event
 handling on component mount

---
 src/components/VnTable/VnFilter.vue | 14 ++++++++++++--
 src/pages/Entry/EntryPreAccount.vue |  1 +
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index 82d7c772c..2a8ae37fd 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { markRaw, computed } from 'vue';
-import { QCheckbox, QToggle } from 'quasar';
+import { markRaw, computed, onBeforeMount } from 'vue';
+import { QToggle } from 'quasar';
 import { useArrayData } from 'composables/useArrayData';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'components/common/VnInput.vue';
@@ -150,6 +150,16 @@ const showFilter = computed(
 const onTabPressed = async () => {
     if (model.value) enterEvent['keyup.enter']();
 };
+
+onBeforeMount(() => {
+    const columnFilter = $props.column?.columnFilter;
+    const component = columnFilter?.component;
+    const defaultComponent = components[component];
+
+    if (!columnFilter || defaultComponent) return;
+    if (columnFilter.event == 'update') $props.column.columnFilter.event = updateEvent;
+    if (columnFilter.event == 'enter') $props.column.columnFilter.event = enterEvent;
+});
 </script>
 <template>
     <div v-if="showFilter" class="full-width" style="overflow: hidden">
diff --git a/src/pages/Entry/EntryPreAccount.vue b/src/pages/Entry/EntryPreAccount.vue
index cda2ffd5e..805f5cbd9 100644
--- a/src/pages/Entry/EntryPreAccount.vue
+++ b/src/pages/Entry/EntryPreAccount.vue
@@ -133,6 +133,7 @@ const columns = computed(() => [
             label: null,
             name: 'supplierFk',
             class: 'fit',
+            event: 'update',
         },
     },
     {

From 96a517028a15be8e729ae83d990a09afc6e65e62 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 22 Apr 2025 11:38:29 +0200
Subject: [PATCH 23/35] fix(EntryPreAccount): refs #8277 correct translation
 key for Canary Islands in i18n

---
 src/pages/Entry/EntryPreAccount.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Entry/EntryPreAccount.vue b/src/pages/Entry/EntryPreAccount.vue
index 805f5cbd9..26683b6f4 100644
--- a/src/pages/Entry/EntryPreAccount.vue
+++ b/src/pages/Entry/EntryPreAccount.vue
@@ -473,6 +473,6 @@ en:
 es:
     IntraCommunity: Intracomunitaria
     NonCommunity: Extracomunitaria
-    CanaryIsland: Islas Canarias
+    CanaryIslands: Islas Canarias
     National: Nacional
 </i18n>

From 8e62102cc18a4d9b0802b251c7a073747b6641db Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 22 Apr 2025 11:49:13 +0200
Subject: [PATCH 24/35] fix(VnFilter): refs #8277 update event handling for
 columnFilter in onBeforeMount

---
 src/components/VnTable/VnFilter.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index 2a8ae37fd..bdba421da 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -155,10 +155,10 @@ onBeforeMount(() => {
     const columnFilter = $props.column?.columnFilter;
     const component = columnFilter?.component;
     const defaultComponent = components[component];
+    const events = { update: updateEvent, enter: enterEvent };
 
     if (!columnFilter || defaultComponent) return;
-    if (columnFilter.event == 'update') $props.column.columnFilter.event = updateEvent;
-    if (columnFilter.event == 'enter') $props.column.columnFilter.event = enterEvent;
+    $props.column.columnFilter.event = events[columnFilter.event];
 });
 </script>
 <template>

From 6ff71374fcb138b7173185af0c038bfd5c23b0cc Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 22 Apr 2025 12:31:50 +0200
Subject: [PATCH 25/35] fix: rename 'import' column to 'totalWithVat' in
 ticketColumns

---
 src/pages/Ticket/TicketFuture.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Ticket/TicketFuture.vue b/src/pages/Ticket/TicketFuture.vue
index 588379ed9..6ed3afcc6 100644
--- a/src/pages/Ticket/TicketFuture.vue
+++ b/src/pages/Ticket/TicketFuture.vue
@@ -89,7 +89,7 @@ const ticketColumns = computed(() => [
     },
     {
         label: t('advanceTickets.import'),
-        name: 'import',
+        name: 'totalWithVat',
         align: 'left',
         headerClass: 'horizontal-separator',
         columnFilter: false,
@@ -317,7 +317,7 @@ watch(
                 </QBadge>
                 <span v-else> {{ dashIfEmpty(row.state) }}</span>
             </template>
-            <template #column-import="{ row }">
+            <template #column-totalWithVat="{ row }">
                 <QBadge
                     :text-color="
                         totalPriceColor(row.totalWithVat) === 'warning'

From 6b472341a170f4ff7c789ad87f0c3aec0f71b289 Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Tue, 22 Apr 2025 13:40:30 +0200
Subject: [PATCH 26/35] fix: refs #8828 correct response index in ticket filter
 interception

---
 test/cypress/integration/ticket/ticketList.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/cypress/integration/ticket/ticketList.spec.js b/test/cypress/integration/ticket/ticketList.spec.js
index 3569bd71e..95649f51c 100644
--- a/test/cypress/integration/ticket/ticketList.spec.js
+++ b/test/cypress/integration/ticket/ticketList.spec.js
@@ -79,7 +79,7 @@ describe('TicketList', () => {
         cy.get('[data-cy="Warehouse_select"]').type('Warehouse One');
         cy.get('.q-menu .q-item').contains('Warehouse One').click();
         cy.wait('@ticket').then((interception) => {
-            const data = interception.response.body[1];
+            const data = interception.response.body[0];
             expect(data.hasComponentLack).to.equal(1);
         });
         cy.get('.icon-components').should('exist');

From b13bcea3319f260f5f9eed75fc490f3a620c64d5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 22 Apr 2025 17:43:29 +0200
Subject: [PATCH 27/35] feat: add VnMultiCheck component for multi-selection
 functionality

---
 src/components/VnTable/VnTable.vue     | 30 ++++++++++++++-
 src/components/common/VnMultiCheck.vue | 51 ++++++++++++++++++++++++++
 2 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/components/common/VnMultiCheck.vue

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 7e9ab85cb..6af2ccf7e 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -33,7 +33,8 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 import VnTableFilter from './VnTableFilter.vue';
 import { getColAlign } from 'src/composables/getColAlign';
 import RightMenu from '../common/RightMenu.vue';
-import VnScroll from '../common/VnScroll.vue'
+import VnScroll from '../common/VnScroll.vue';
+import VnMultiCheck from '../common/VnMultiCheck.vue';
 
 const arrayData = useArrayData(useAttrs()['data-key']);
 const $props = defineProps({
@@ -157,6 +158,7 @@ const CARD_MODE = 'card';
 const TABLE_MODE = 'table';
 const mode = ref(CARD_MODE);
 const selected = ref([]);
+const selectAll = ref(false);
 const hasParams = ref(false);
 const CrudModelRef = ref({});
 const showForm = ref(false);
@@ -638,6 +640,23 @@ const rowCtrlClickFunction = computed(() => {
         };
     return () => {};
 });
+const handleMultiCheck = (value) => {
+    if (value) {
+        selected.value = tableRef.value.rows;
+    } else {
+        selected.value = [];
+    }
+    emit('update:selected', selected.value);
+};
+
+const handleSelectedAll = (data) => {
+    if (data) {
+        selected.value = data;
+    } else {
+        selected.value = [];
+    }
+    emit('update:selected', selected.value);
+};
 </script>
 <template>
     <RightMenu v-if="$props.rightSearch" :overlay="overlay">
@@ -700,6 +719,15 @@ const rowCtrlClickFunction = computed(() => {
                 :hide-selected-banner="true"
                 :data-cy
             >
+                <template #header-selection>
+                    <VnMultiCheck
+                        v-model="selectAll"
+                        :url="$attrs['url']"
+                        @update:selected="handleMultiCheck"
+                        @select:all="handleSelectedAll"
+                    ></VnMultiCheck>
+                </template>
+
                 <template #top-left v-if="!$props.withoutHeader">
                     <slot name="top-left"> </slot>
                 </template>
diff --git a/src/components/common/VnMultiCheck.vue b/src/components/common/VnMultiCheck.vue
new file mode 100644
index 000000000..d898b97a5
--- /dev/null
+++ b/src/components/common/VnMultiCheck.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from 'vue';
+import VnCheckbox from './VnCheckbox.vue';
+import axios from 'axios';
+import { toRaw } from 'vue';
+
+const model = defineModel({ type: [Boolean] });
+const props = defineProps({
+    url: {
+        type: String,
+        default: null,
+        required: true,
+    },
+});
+const value = ref(false);
+const rows = ref(0);
+defineEmits(['update:selected', 'select:all']);
+const onClick = async () => {
+    if (value.value) {
+        axios
+            .get(props.url, {
+                params: {
+                    filter: null,
+                },
+            })
+            .then((response) => {
+                rows.value = response.data;
+                console.log(response.data);
+            })
+            .catch((error) => {
+                console.error(error);
+            });
+    }
+};
+</script>
+
+<template>
+    <div style="display: flex">
+        <VnCheckbox v-model="value" @click="$emit('update:selected', value)" />
+        <QBtn v-if="value" flat dense icon="expand_more" @click="onClick">
+            <QMenu anchor="bottom right" self="top right">
+                <QList>
+                    <QItem v-ripple clickable @click="$emit('select:all', toRaw(rows))">
+                        Select all({{ rows.length }})</QItem
+                    >
+                    <slot name="more-options"></slot>
+                </QList>
+            </QMenu>
+        </QBtn>
+    </div>
+</template>

From f683d78e0e9ed1fc092f6c85eec2b246aa992b11 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 22 Apr 2025 18:02:54 +0200
Subject: [PATCH 28/35] feat: enhance i18n support for campaign consumption and
 select all functionality

---
 src/components/common/VnMultiCheck.vue         | 18 +++++++++++++++++-
 ...ustomerNotificationsCampaignConsumption.vue |  7 +++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/common/VnMultiCheck.vue b/src/components/common/VnMultiCheck.vue
index d898b97a5..1d4898503 100644
--- a/src/components/common/VnMultiCheck.vue
+++ b/src/components/common/VnMultiCheck.vue
@@ -3,7 +3,9 @@ import { ref } from 'vue';
 import VnCheckbox from './VnCheckbox.vue';
 import axios from 'axios';
 import { toRaw } from 'vue';
+import { useI18n } from 'vue-i18n';
 
+const { t } = useI18n();
 const model = defineModel({ type: [Boolean] });
 const props = defineProps({
     url: {
@@ -41,7 +43,7 @@ const onClick = async () => {
             <QMenu anchor="bottom right" self="top right">
                 <QList>
                     <QItem v-ripple clickable @click="$emit('select:all', toRaw(rows))">
-                        Select all({{ rows.length }})</QItem
+                        {{ t('Select all', { rows: rows.length }) }}</QItem
                     >
                     <slot name="more-options"></slot>
                 </QList>
@@ -49,3 +51,17 @@ const onClick = async () => {
         </QBtn>
     </div>
 </template>
+<i18n lang="yml">
+en:
+    Select all: 'Select all ({rows})'
+fr:
+    Select all: 'Sélectionner tout ({rows})'
+es:
+    Select all: Seleccionar todo ({rows})
+de:
+    Select all: 'Alle auswählen ({rows})'
+it:
+    Select all: 'Seleziona tutto ({rows})'
+pt:
+    Select all: Selecionar tudo ({rows})
+</i18n>
diff --git a/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue b/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue
index f637c7e0a..141a02bfc 100644
--- a/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue
+++ b/src/pages/Customer/Notifications/CustomerNotificationsCampaignConsumption.vue
@@ -98,7 +98,9 @@ onMounted(async () => {
     <QBtn color="primary" icon="show_chart" :disable="!selectedRows">
         <QPopupProxy ref="popupProxyRef">
             <QCard class="column q-pa-md">
-                <span class="text-body1 q-mb-sm">{{ t('Campaign consumption') }}</span>
+                <span class="text-body1 q-mb-sm">{{
+                    t('Campaign consumption', { rows: $props.clients.length })
+                }}</span>
                 <VnRow>
                     <VnSelect
                         :options="moreFields"
@@ -140,12 +142,13 @@ onMounted(async () => {
             valentinesDay: Valentine's Day
             mothersDay: Mother's Day
             allSaints: All Saints' Day
+        Campaign consumption: Campaign consumption ({rows})
     es:
         params:
             valentinesDay: Día de San Valentín
             mothersDay: Día de la Madre
             allSaints: Día de Todos los Santos
-        Campaign consumption: Consumo campaña
+        Campaign consumption: Consumo campaña ({rows})
         Campaign: Campaña
         From: Desde
         To: Hasta

From 33bde1732f11454cd2fe575d1d29f40efbf45de7 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 23 Apr 2025 12:08:26 +0200
Subject: [PATCH 29/35] fix: remove readonly attribute from VnSelect component
 to improve interactivity

---
 src/components/common/VnSelect.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 8649ed068..32fb83cbc 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -368,7 +368,6 @@ function getCaption(opt) {
         hide-bottom-space
         :input-debounce="useURL ? '300' : '0'"
         :loading="someIsLoading"
-        :readonly="someIsLoading"
         @virtual-scroll="onScroll"
         @keydown="handleKeyDown"
         :data-cy="$attrs.dataCy ?? $attrs.label + '_select'"

From 7ec9c44130f07742dd61ab1b9c3a96ee2f79fd0a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 23 Apr 2025 15:09:09 +0200
Subject: [PATCH 30/35] fix: remove v-bind

---
 src/components/ui/VnPaginate.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index b232e6c05..8a3c5a616 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -222,7 +222,7 @@ defineExpose({
 </script>
 
 <template>
-    <div class="full-width" v-bind="attrs">
+    <div class="full-width">
         <div
             v-if="!store.data && !store.data?.length && !isLoading"
             class="info-row q-pa-md text-center"

From c8a9661d50c070004c6dcab2a2d6963112d9261f Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 23 Apr 2025 15:09:26 +0200
Subject: [PATCH 31/35] fix: enhance layout and styling for TicketNotes,
 TicketPackage components

---
 src/pages/Ticket/Card/TicketNotes.vue   | 136 +++++++++----------
 src/pages/Ticket/Card/TicketPackage.vue | 167 ++++++++++++------------
 src/pages/Ticket/TicketAdvance.vue      |  13 +-
 3 files changed, 164 insertions(+), 152 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketNotes.vue b/src/pages/Ticket/Card/TicketNotes.vue
index a3e25d63e..f2b474156 100644
--- a/src/pages/Ticket/Card/TicketNotes.vue
+++ b/src/pages/Ticket/Card/TicketNotes.vue
@@ -55,73 +55,75 @@ async function handleSave(e) {
         auto-load
         url="ObservationTypes"
     />
-    <div class="flex justify-center">
-        <CrudModel
-            ref="ticketNotesCrudRef"
-            data-key="TicketNotes"
-            url="TicketObservations"
-            model="TicketNotes"
-            :filter="crudModelFilter"
-            :data-required="crudModelRequiredData"
-            :default-remove="false"
-            auto-load
-            style="max-width: 800px"
-        >
-            <template #body="{ rows }">
-                <QCard class="q-px-lg q-py-md">
-                    <div
-                        v-for="(row, index) in rows"
-                        :key="index"
-                        class="q-mb-md row q-gutter-x-md"
-                    >
-                        <VnSelect
-                            :label="t('ticketNotes.observationType')"
-                            :options="observationTypes"
-                            hide-selected
-                            option-label="description"
-                            option-value="id"
-                            v-model="row.observationTypeFk"
-                            :disable="!!row.id"
-                            data-cy="ticketNotesObservationType"
-                        />
-                        <VnInput
-                            :label="t('basicData.description')"
-                            v-model="row.description"
-                            class="col"
-                            @keydown.enter.stop="handleSave"
-                            autogrow
-                            data-cy="ticketNotesDescription"
-                        />
-                        <QIcon
-                            name="delete"
-                            size="sm"
-                            class="cursor-pointer"
-                            color="primary"
-                            @click="handleDelete(row)"
-                            data-cy="ticketNotesRemoveNoteBtn"
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
+            <CrudModel
+                class="fit"
+                ref="ticketNotesCrudRef"
+                data-key="TicketNotes"
+                url="TicketObservations"
+                model="TicketNotes"
+                :filter="crudModelFilter"
+                :data-required="crudModelRequiredData"
+                :default-remove="false"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QCard class="q-px-lg q-py-md">
+                        <div
+                            v-for="(row, index) in rows"
+                            :key="index"
+                            class="q-mb-md row items-center q-gutter-x-md"
                         >
-                            <QTooltip>
-                                {{ t('ticketNotes.removeNote') }}
-                            </QTooltip>
-                        </QIcon>
-                    </div>
-                    <VnRow v-if="observationTypes.length > rows.length">
-                        <QBtn
-                            icon="add_circle"
-                            v-shortcut="'+'"
-                            flat
-                            class="fill-icon-on-hover q-ml-md"
-                            color="primary"
-                            @click="ticketNotesCrudRef.insert()"
-                            data-cy="ticketNotesAddNoteBtn"
-                        >
-                            <QTooltip>
-                                {{ t('ticketNotes.addNote') }}
-                            </QTooltip>
-                        </QBtn>
-                    </VnRow>
-                </QCard>
-            </template>
-        </CrudModel>
+                            <VnSelect
+                                :label="t('ticketNotes.observationType')"
+                                :options="observationTypes"
+                                hide-selected
+                                option-label="description"
+                                option-value="id"
+                                v-model="row.observationTypeFk"
+                                :disable="!!row.id"
+                                data-cy="ticketNotesObservationType"
+                            />
+                            <VnInput
+                                :label="t('basicData.description')"
+                                v-model="row.description"
+                                class="col"
+                                @keydown.enter.stop="handleSave"
+                                autogrow
+                                data-cy="ticketNotesDescription"
+                            />
+                            <QIcon
+                                name="delete"
+                                size="sm"
+                                class="cursor-pointer"
+                                color="primary"
+                                @click="handleDelete(row)"
+                                data-cy="ticketNotesRemoveNoteBtn"
+                            >
+                                <QTooltip>
+                                    {{ t('ticketNotes.removeNote') }}
+                                </QTooltip>
+                            </QIcon>
+                        </div>
+                        <VnRow v-if="observationTypes.length > rows.length">
+                            <QBtn
+                                icon="add_circle"
+                                v-shortcut="'+'"
+                                flat
+                                class="fill-icon-on-hover q-ml-md"
+                                color="primary"
+                                @click="ticketNotesCrudRef.insert()"
+                                data-cy="ticketNotesAddNoteBtn"
+                            >
+                                <QTooltip>
+                                    {{ t('ticketNotes.addNote') }}
+                                </QTooltip>
+                            </QBtn>
+                        </VnRow>
+                    </QCard>
+                </template>
+            </CrudModel>
+        </QPage>
     </div>
 </template>
diff --git a/src/pages/Ticket/Card/TicketPackage.vue b/src/pages/Ticket/Card/TicketPackage.vue
index 5fbf4c800..ff55bf9d4 100644
--- a/src/pages/Ticket/Card/TicketPackage.vue
+++ b/src/pages/Ticket/Card/TicketPackage.vue
@@ -49,88 +49,95 @@ watch(
     <FetchData
         @on-fetch="(data) => (listPackagingsOptions = data)"
         auto-load
-        :filter="{ fields: ['packagingFk', 'name'], order: 'name ASC' }"
         url="Packagings/listPackaging"
+        :filter="{
+            fields: ['packagingFk', 'name'],
+            order: ['name ASC'],
+        }"
     />
-    <div class="flex justify-center">
-        <CrudModel
-            ref="ticketPackagingsCrudRef"
-            data-key="TicketPackagings"
-            url="TicketPackagings"
-            model="TicketPackagings"
-            :filter="crudModelFilter"
-            :data-required="crudModelRequiredData"
-            :default-remove="false"
-            auto-load
-            style="max-width: 800px"
-        >
-            <template #body="{ rows, validate }">
-                <QCard class="q-px-lg q-py-md">
-                    <div
-                        v-for="(row, index) in rows"
-                        :key="index"
-                        class="q-mb-md row items-center q-gutter-x-md"
-                    >
-                        <VnSelect
-                            :label="t('package.package')"
-                            :options="listPackagingsOptions"
-                            hide-selected
-                            option-label="name"
-                            option-value="packagingFk"
-                            v-model="row.packagingFk"
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
+            <CrudModel
+                ref="ticketPackagingsCrudRef"
+                data-key="TicketPackagings"
+                url="TicketPackagings"
+                model="TicketPackagings"
+                :filter="crudModelFilter"
+                :data-required="crudModelRequiredData"
+                :default-remove="false"
+                auto-load
+            >
+                <template #body="{ rows, validate }">
+                    <QCard class="q-px-lg q-py-md">
+                        <div
+                            v-for="(row, index) in rows"
+                            :key="index"
+                            class="q-mb-md row items-center q-gutter-x-md"
                         >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>
-                                            {{ scope.opt?.name }}
-                                        </QItemLabel>
-                                        <QItemLabel caption>
-                                            #{{ scope.opt?.itemFk }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                        <VnInput
-                            :label="t('basicData.quantity')"
-                            v-model.number="row.quantity"
-                            class="col"
-                            type="number"
-                            min="1"
-                            :required="true"
-                            @update:model-value="handleInputQuantityClear(row)"
-                            :rules="validate('TicketPackaging.quantity')"
-                        />
-                        <VnInputDate :label="t('package.added')" v-model="row.created" />
-                        <QIcon
-                            name="delete"
-                            size="sm"
-                            class="cursor-pointer"
-                            color="primary"
-                            @click="ticketPackagingsCrudRef.remove([row])"
-                        >
-                            <QTooltip>
-                                {{ t('package.removePackage') }}
-                            </QTooltip>
-                        </QIcon>
-                    </div>
-                    <VnRow>
-                        <QBtn
-                            icon="add_circle"
-                            v-shortcut="'+'"
-                            flat
-                            class="fill-icon-on-hover q-ml-md"
-                            color="primary"
-                            @click="ticketPackagingsCrudRef.insert()"
-                        >
-                            <QTooltip>
-                                {{ t('package.addPackage') }}
-                            </QTooltip>
-                        </QBtn>
-                    </VnRow>
-                </QCard>
-            </template>
-        </CrudModel>
+                            <VnSelect
+                                :label="t('package.package')"
+                                :options="listPackagingsOptions"
+                                hide-selected
+                                option-label="name"
+                                option-value="packagingFk"
+                                v-model="row.packagingFk"
+                            >
+                                <template #option="scope">
+                                    <QItem v-bind="scope.itemProps">
+                                        <QItemSection>
+                                            <QItemLabel>
+                                                {{ scope.opt?.name }}
+                                            </QItemLabel>
+                                            <QItemLabel caption>
+                                                #{{ scope.opt?.itemFk }}
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </template>
+                            </VnSelect>
+                            <VnInput
+                                :label="t('basicData.quantity')"
+                                v-model.number="row.quantity"
+                                class="col"
+                                type="number"
+                                min="1"
+                                :required="true"
+                                @update:model-value="handleInputQuantityClear(row)"
+                                :rules="validate('TicketPackaging.quantity')"
+                            />
+                            <VnInputDate
+                                :label="t('package.added')"
+                                v-model="row.created"
+                            />
+                            <QIcon
+                                name="delete"
+                                size="sm"
+                                class="cursor-pointer"
+                                color="primary"
+                                @click="ticketPackagingsCrudRef.remove([row])"
+                            >
+                                <QTooltip>
+                                    {{ t('package.removePackage') }}
+                                </QTooltip>
+                            </QIcon>
+                        </div>
+                        <VnRow>
+                            <QBtn
+                                icon="add_circle"
+                                v-shortcut="'+'"
+                                flat
+                                class="fill-icon-on-hover q-ml-md"
+                                color="primary"
+                                @click="ticketPackagingsCrudRef.insert()"
+                            >
+                                <QTooltip>
+                                    {{ t('package.addPackage') }}
+                                </QTooltip>
+                            </QBtn>
+                        </VnRow>
+                    </QCard>
+                </template>
+            </CrudModel>
+        </QPage>
     </div>
 </template>
diff --git a/src/pages/Ticket/TicketAdvance.vue b/src/pages/Ticket/TicketAdvance.vue
index ea6c76781..c98484ea3 100644
--- a/src/pages/Ticket/TicketAdvance.vue
+++ b/src/pages/Ticket/TicketAdvance.vue
@@ -385,7 +385,12 @@ watch(
         if (!$el) return;
         const head = $el.querySelector('thead');
         const firstRow = $el.querySelector('thead > tr');
-
+        const headSelectionCol = $el.querySelector(
+            'thead tr.bg-header th.q-table--col-auto-width',
+        );
+        if (headSelectionCol) {
+            headSelectionCol.classList.add('horizontal-separator');
+        }
         const newRow = document.createElement('tr');
         destinationElRef.value = document.createElement('th');
         originElRef.value = document.createElement('th');
@@ -394,8 +399,8 @@ watch(
         destinationElRef.value.classList.add('text-uppercase', 'color-vn-label');
         originElRef.value.classList.add('text-uppercase', 'color-vn-label');
 
-        destinationElRef.value.setAttribute('colspan', '7');
-        originElRef.value.setAttribute('colspan', '9');
+        destinationElRef.value.setAttribute('colspan', '10');
+        originElRef.value.setAttribute('colspan', '10');
 
         destinationElRef.value.textContent = `${t(
             'advanceTickets.destination',
@@ -490,8 +495,6 @@ watch(
                 selection: 'multiple',
             }"
             v-model:selected="selectedTickets"
-            :pagination="{ rowsPerPage: 0 }"
-            :no-data-label="$t('globals.noResults')"
             :right-search="false"
             :order="['futureTotalWithVat ASC']"
             auto-load

From 0c0d21e53e92737ccc39bb2eb8f04b4521b33529 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 23 Apr 2025 19:24:07 +0200
Subject: [PATCH 32/35] feat: add multi-check support to VnTable and
 VnMultiCheck components

---
 src/components/VnTable/VnTable.vue            | 41 ++++++++-------
 src/components/common/VnMultiCheck.vue        | 51 ++++++++++++-------
 .../Notifications/CustomerNotifications.vue   |  3 ++
 3 files changed, 59 insertions(+), 36 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 6af2ccf7e..1a4d5e552 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -114,6 +114,10 @@ const $props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    multiCheck: {
+        type: Object,
+        default: () => ({}),
+    },
     crudModel: {
         type: Object,
         default: () => ({}),
@@ -197,10 +201,10 @@ const onVirtualScroll = ({ to }) => {
     handleScroll();
     const virtualScrollContainer = tableRef.value?.$el?.querySelector('.q-table__middle');
     if (virtualScrollContainer) {
-      virtualScrollContainer.dispatchEvent(new CustomEvent('scroll'));
-      if (vnScrollRef.value) {
-        vnScrollRef.value.updateScrollContainer(virtualScrollContainer);
-      }
+        virtualScrollContainer.dispatchEvent(new CustomEvent('scroll'));
+        if (vnScrollRef.value) {
+            vnScrollRef.value.updateScrollContainer(virtualScrollContainer);
+        }
     }
 };
 
@@ -343,11 +347,11 @@ function handleOnDataSaved(_) {
     else $props.create.onDataSaved(_);
 }
 function handleScroll() {
-    if ($props.crudModel.disableInfiniteScroll) return;		
-    const tMiddle = tableRef.value.$el.querySelector('.q-table__middle');		
-    const { scrollHeight, scrollTop, clientHeight } = tMiddle;		
-    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) <= 40;		
-    if (isAtBottom) CrudModelRef.value.vnPaginateRef.paginate();		
+    if ($props.crudModel.disableInfiniteScroll) return;
+    const tMiddle = tableRef.value.$el.querySelector('.q-table__middle');
+    const { scrollHeight, scrollTop, clientHeight } = tMiddle;
+    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) <= 40;
+    if (isAtBottom) CrudModelRef.value.vnPaginateRef.paginate();
 }
 function handleSelection({ evt, added, rows: selectedRows }, rows) {
     if (evt?.shiftKey && added) {
@@ -680,7 +684,7 @@ const handleSelectedAll = (data) => {
     <CrudModel
         v-bind="$attrs"
         :class="$attrs['class'] ?? 'q-px-md'"
-        :limit="$attrs['limit'] ?? 100"
+        :limit="$attrs['limit'] ?? 10"
         ref="CrudModelRef"
         @on-fetch="(...args) => emit('onFetch', ...args)"
         :search-url="searchUrl"
@@ -698,9 +702,9 @@ const handleSelectedAll = (data) => {
                 ref="tableRef"
                 v-bind="table"
                 :class="[
-                  'vnTable',
-                  table ? 'selection-cell' : '',
-                  $props.footer ? 'last-row-sticky' : '',
+                    'vnTable',
+                    table ? 'selection-cell' : '',
+                    $props.footer ? 'last-row-sticky' : '',
                 ]"
                 wrap-cells
                 :columns="splittedColumns.columns"
@@ -720,7 +724,10 @@ const handleSelectedAll = (data) => {
                 :data-cy
             >
                 <template #header-selection>
+                    {{ $attrs['url'] }}
                     <VnMultiCheck
+                        :searchUrl="searchUrl"
+                        :expand="$props.multiCheck.expand"
                         v-model="selectAll"
                         :url="$attrs['url']"
                         @update:selected="handleMultiCheck"
@@ -1126,10 +1133,10 @@ const handleSelectedAll = (data) => {
             </template>
         </FormModelPopup>
     </QDialog>
-    <VnScroll 
-      ref="vnScrollRef"
-      v-if="isTableMode"
-      :scroll-target="tableRef?.$el?.querySelector('.q-table__middle')"
+    <VnScroll
+        ref="vnScrollRef"
+        v-if="isTableMode"
+        :scroll-target="tableRef?.$el?.querySelector('.q-table__middle')"
     />
 </template>
 <i18n>
diff --git a/src/components/common/VnMultiCheck.vue b/src/components/common/VnMultiCheck.vue
index 1d4898503..19b93ffa9 100644
--- a/src/components/common/VnMultiCheck.vue
+++ b/src/components/common/VnMultiCheck.vue
@@ -4,47 +4,60 @@ import VnCheckbox from './VnCheckbox.vue';
 import axios from 'axios';
 import { toRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
-
+import { useRoute } from 'vue-router';
+const route = useRoute();
 const { t } = useI18n();
 const model = defineModel({ type: [Boolean] });
 const props = defineProps({
+    expand: {
+        type: Boolean,
+        default: false,
+    },
     url: {
         type: String,
         default: null,
         required: true,
     },
+    searchUrl: {
+        type: [String, Boolean],
+        default: 'table',
+    },
 });
 const value = ref(false);
 const rows = ref(0);
-defineEmits(['update:selected', 'select:all']);
-const onClick = async () => {
+const onClick = () => {
     if (value.value) {
+        const { filter } = JSON.parse(route.query[props.searchUrl]);
+        filter.limit = 0;
+        const params = {
+            params: { filter: JSON.stringify(filter) },
+        };
         axios
-            .get(props.url, {
-                params: {
-                    filter: null,
-                },
+            .get(props.url, params)
+            .then(({ data }) => {
+                rows.value = data;
             })
-            .then((response) => {
-                rows.value = response.data;
-                console.log(response.data);
-            })
-            .catch((error) => {
-                console.error(error);
-            });
+            .catch(console.error);
     }
 };
+defineEmits(['update:selected', 'select:all']);
 </script>
 
 <template>
     <div style="display: flex">
         <VnCheckbox v-model="value" @click="$emit('update:selected', value)" />
-        <QBtn v-if="value" flat dense icon="expand_more" @click="onClick">
+        <QBtn
+            v-if="value && $props.expand"
+            flat
+            dense
+            icon="expand_more"
+            @click="onClick"
+        >
             <QMenu anchor="bottom right" self="top right">
                 <QList>
                     <QItem v-ripple clickable @click="$emit('select:all', toRaw(rows))">
-                        {{ t('Select all', { rows: rows.length }) }}</QItem
-                    >
+                        {{ t('Select all', { rows: rows.length }) }}
+                    </QItem>
                     <slot name="more-options"></slot>
                 </QList>
             </QMenu>
@@ -57,11 +70,11 @@ en:
 fr:
     Select all: 'Sélectionner tout ({rows})'
 es:
-    Select all: Seleccionar todo ({rows})
+    Select all: 'Seleccionar todo ({rows})'
 de:
     Select all: 'Alle auswählen ({rows})'
 it:
     Select all: 'Seleziona tutto ({rows})'
 pt:
-    Select all: Selecionar tudo ({rows})
+    Select all: 'Selecionar tudo ({rows})'
 </i18n>
diff --git a/src/pages/Customer/Notifications/CustomerNotifications.vue b/src/pages/Customer/Notifications/CustomerNotifications.vue
index cbbd6d205..02792182c 100644
--- a/src/pages/Customer/Notifications/CustomerNotifications.vue
+++ b/src/pages/Customer/Notifications/CustomerNotifications.vue
@@ -100,6 +100,9 @@ const columns = computed(() => [
             'row-key': 'id',
             selection: 'multiple',
         }"
+        :multi-check="{
+            expand: true,
+        }"
         v-model:selected="selected"
         :right-search="true"
         :columns="columns"

From 2c9f7568712f01c765578c3158f86eab10ff2319 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 23 Apr 2025 19:24:13 +0200
Subject: [PATCH 33/35] fix: update checkbox selector for editing and removing
 items in ItemFixedPrice tests

---
 test/cypress/integration/item/ItemFixedPrice.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/cypress/integration/item/ItemFixedPrice.spec.js b/test/cypress/integration/item/ItemFixedPrice.spec.js
index 41230f570..ea3fb84ff 100644
--- a/test/cypress/integration/item/ItemFixedPrice.spec.js
+++ b/test/cypress/integration/item/ItemFixedPrice.spec.js
@@ -54,7 +54,7 @@ describe('Handle Items FixedPrice', () => {
     });
 
     it('should edit all items', () => {
-        cy.get('.bg-header > :nth-child(1) > .q-checkbox > .q-checkbox__inner').click();
+        cy.get('.bg-header > :nth-child(1) [data-cy="vnCheckbox"]').click();
         cy.dataCy('FixedPriceToolbarEditBtn').should('not.be.disabled');
         cy.dataCy('FixedPriceToolbarEditBtn').click();
         cy.dataCy('EditFixedPriceSelectOption').type(grouping);
@@ -64,8 +64,8 @@ describe('Handle Items FixedPrice', () => {
         cy.checkNotification('Data saved');
     });
 
-    it('should remove all items', () => {
-        cy.get('.bg-header > :nth-child(1) > .q-checkbox > .q-checkbox__inner').click();
+    it.only('should remove all items', () => {
+        cy.get('.bg-header > :nth-child(1) [data-cy="vnCheckbox"]').click();
         cy.dataCy('crudModelDefaultRemoveBtn').should('not.be.disabled');
         cy.dataCy('crudModelDefaultRemoveBtn').click();
         cy.dataCy('VnConfirm_confirm').click();

From a0ceabb5277aeea6eb20436bac6179b6b685c5cd Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 23 Apr 2025 19:25:14 +0200
Subject: [PATCH 34/35] fix: revert test to allow removal of all items in
 ItemFixedPrice tests

---
 test/cypress/integration/item/ItemFixedPrice.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/cypress/integration/item/ItemFixedPrice.spec.js b/test/cypress/integration/item/ItemFixedPrice.spec.js
index ea3fb84ff..2b92c861e 100644
--- a/test/cypress/integration/item/ItemFixedPrice.spec.js
+++ b/test/cypress/integration/item/ItemFixedPrice.spec.js
@@ -64,7 +64,7 @@ describe('Handle Items FixedPrice', () => {
         cy.checkNotification('Data saved');
     });
 
-    it.only('should remove all items', () => {
+    it('should remove all items', () => {
         cy.get('.bg-header > :nth-child(1) [data-cy="vnCheckbox"]').click();
         cy.dataCy('crudModelDefaultRemoveBtn').should('not.be.disabled');
         cy.dataCy('crudModelDefaultRemoveBtn').click();

From ebc235768530fcaf172d04878d3b7f51a05f9603 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 23 Apr 2025 20:14:24 +0200
Subject: [PATCH 35/35] perf: change limit

---
 src/components/VnTable/VnTable.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 1a4d5e552..8915500fc 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -684,7 +684,7 @@ const handleSelectedAll = (data) => {
     <CrudModel
         v-bind="$attrs"
         :class="$attrs['class'] ?? 'q-px-md'"
-        :limit="$attrs['limit'] ?? 10"
+        :limit="$attrs['limit'] ?? 100"
         ref="CrudModelRef"
         @on-fetch="(...args) => emit('onFetch', ...args)"
         :search-url="searchUrl"
@@ -724,7 +724,6 @@ const handleSelectedAll = (data) => {
                 :data-cy
             >
                 <template #header-selection>
-                    {{ $attrs['url'] }}
                     <VnMultiCheck
                         :searchUrl="searchUrl"
                         :expand="$props.multiCheck.expand"