Merge pull request 'feat: #8443 created vehicle events' (!1379) from 8443-vehicleEvent into dev

Reviewed-on: #1379
Reviewed-by: Javi Gallego <jgallego@verdnatura.es>
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>

src/components/EntityCalendar.vue

@@ -0,0 +1,152 @@
+<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 formatDate = (dateToFormat, format = 'YYYY-MM-DD') => (
+  date.formatDate(dateToFormat, format)
+);
+
+
+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(formatDate(Date.vnNew()));
+const todayTimestamp = computed(() => {
+    const date = Date.vnNew();
+    date.setHours(0, 0, 0, 0);
+    return date.getTime();
+});
+const _monthDate = computed(() => formatDate(props.monthDate));
+
+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>

src/components/EntityCalendarGrid.vue

@@ -0,0 +1,126 @@
+<script setup>
+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';
+
+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);
+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>

src/components/FormModel.vue

@@ -12,7 +12,7 @@ import SkeletonForm from 'components/ui/SkeletonForm.vue';
 import VnConfirm from './ui/VnConfirm.vue';
 import { tMobile } from 'src/composables/tMobile';
 import { useArrayData } from 'src/composables/useArrayData';
-import { onBeforeSave } from 'src/filters';
+import { getDifferences, getUpdatedValues } from 'src/filters';
 const { push } = useRouter();
 const quasar = useQuasar();
 const state = useState();
@@ -67,7 +67,7 @@ const $props = defineProps({
     },
     mapper: {
         type: Function,
-        default: onBeforeSave,
+        default: null,
     },
     clearStoreOnUnmount: {
         type: Boolean,
@@ -223,10 +223,25 @@ async function fetch() {
     }
 }
 
-async function handleResponse(response, showCreatedNotification = false) {
-    if (showCreatedNotification) {
-        notify('globals.dataCreated', 'positive');
-    }
+async function save() {
+    if ($props.observeFormChanges && !hasChanges.value)
+        return notify('globals.noChanges', 'negative');
+
+    isLoading.value = true;
+    try {
+        formData.value = trimData(formData.value);
+        const body = $props.mapper
+            ? $props.mapper(formData.value, originalData.value)
+            : formData.value;
+        const method = $props.urlCreate ? 'post' : 'patch';
+        const url =
+            $props.urlCreate || $props.urlUpdate || $props.url || arrayData.store.url;
+        const response = await Promise.resolve(
+            $props.saveFn ? $props.saveFn(body) : axios[method](url, body),
+        );
+
+        if ($props.urlCreate) notify('globals.dataCreated', 'positive');
+
         updateAndEmit('onDataSaved', {
             val: formData.value,
             res: response?.data,
@@ -234,38 +249,6 @@ async function handleResponse(response, showCreatedNotification = false) {
         });
         if ($props.reload) await arrayData.fetch({});
         hasChanges.value = false;
-}
-
-async function create() {
-    formData.value = trimData(formData.value);
-    const url = $props.urlCreate;
-    const response = await Promise.resolve(
-        $props.saveFn ? $props.saveFn(formData.value) : axios.post(url, formData.value),
-    );
-    await handleResponse(response, true);
-}
-
-async function update() {
-    formData.value = trimData(formData.value);
-    const body = $props.mapper(originalData.value, formData.value);
-    const url = $props.urlUpdate || $props.url || arrayData.store.url;
-    const response = await Promise.resolve(
-        $props.saveFn ? $props.saveFn(body) : axios.patch(url, body),
-    );
-    await handleResponse(response);
-}
-
-async function save() {
-    if ($props.observeFormChanges && !hasChanges.value)
-        return notify('globals.noChanges', 'negative');
-
-    isLoading.value = true;
-    try {
-        if ($props.urlCreate != null) {
-            await create();
-        } else {
-            await update();
-        }
     } finally {
         isLoading.value = false;
     }
@@ -314,7 +297,12 @@ function trimData(data) {
     }
     return data;
 }
-
+function onBeforeSave(formData, originalData) {
+    return getUpdatedValues(
+        Object.keys(getDifferences(formData, originalData)),
+        formData,
+    );
+}
 async function onKeyup(evt) {
     if (evt.key === 'Enter' && !$props.preventSubmit) {
         const input = evt.target;
@@ -353,6 +341,8 @@ defineExpose({
             @reset="reset"
             class="q-pa-md"
             :style="maxWidth ? 'max-width: ' + maxWidth : ''"
+            id="formModel"
+            :mapper="onBeforeSave"
         >
             <QCard>
                 <slot

src/components/__tests__/CrudModel.spec.js

@@ -115,7 +115,6 @@ describe('CrudModel', () => {
             expect(result).toEqual({
                 a: null,
                 b: 4,
-                c: 3,
                 d: 5,
             });
         });
@@ -242,7 +241,7 @@ describe('CrudModel', () => {
 
             await vm.saveChanges(data);
 
-            expect(postMock).toHaveBeenCalledWith(`${vm.url}/crud`, data);
+            expect(postMock).toHaveBeenCalledWith(vm.url + '/crud', data);
             expect(vm.isLoading).toBe(false);
             expect(vm.hasChanges).toBe(false);
             expect(vm.originalData).toEqual(JSON.parse(JSON.stringify(vm.formData)));

src/components/__tests__/FormModel.spec.js

@@ -3,17 +3,11 @@ import { createWrapper } from 'app/test/vitest/helper';
 import { default as axios } from 'axios';
 
 import FormModel from 'src/components/FormModel.vue';
-import { useState } from 'src/composables/useState';
 
 describe('FormModel', () => {
     const model = 'mockModel';
     const url = 'mockUrl';
     const formInitialData = { mockKey: 'mockVal' };
-    let state;
-    beforeEach(() => {
-        state = useState();
-        state.set(model, formInitialData);
-    });
 
     describe('modelValue', () => {
         it('should use the provided model', () => {
@@ -100,39 +94,30 @@ describe('FormModel', () => {
             expect(vm.hasChanges).toBe(false);
         });
 
-        it('should call axios.post with the right data', async () => {
-            const spy = vi.spyOn(axios, 'post').mockResolvedValue({ data: {} });
-            const urlCreate = 'mockUrlCreate';
-            const { vm } = mount({ propsData: { url, urlCreate, model } });
+        it('should call axios.patch with the right data', async () => {
+            const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
+            const { vm } = mount({ propsData: { url, model } });
 
             vm.formData = {};
             await vm.$nextTick();
-            const formData = { mockKey: 'newVal', mockKey2: 'newVal2' };
-            vm.formData = formData;
+            vm.formData = { mockKey: 'newVal' };
             await vm.$nextTick();
 
             await vm.save();
             expect(spy).toHaveBeenCalled();
-            expect(spy).toHaveBeenCalledWith(urlCreate, formData);
             vm.formData.mockKey = 'mockVal';
         });
 
-        it('should call axios.patch with the right data', async () => {
-            const spy = vi.spyOn(axios, 'patch').mockResolvedValue({ data: {} });
-
+        it('should call axios.post with the right data', async () => {
+            const spy = vi.spyOn(axios, 'post').mockResolvedValue({ data: {} });
             const { vm } = mount({
-                propsData: {
-                    url,
-                    model,
-                    formInitialData,
-                },
+                propsData: { url, model, formInitialData, urlCreate: 'mockUrlCreate' },
             });
             await vm.$nextTick();
             vm.formData.mockKey = 'newVal';
             await vm.$nextTick();
             await vm.save();
             expect(spy).toHaveBeenCalled();
-            expect(spy).toHaveBeenCalledWith(url, { mockKey: 'newVal' });
             vm.formData.mockKey = 'mockVal';
         });
 

src/components/common/VnLocation.vue

@@ -21,7 +21,7 @@ watch(
     (newValue) => {
         if (!modelValue.value) return;
         modelValue.value = formatLocation(newValue) ?? null;
-    },
+    }
 );
 
 const mixinRules = [requiredFieldRule];
@@ -45,7 +45,7 @@ const formatLocation = (obj, properties = locationProperties) => {
     });
 
     const filteredParts = parts.filter(
-        (part) => part !== null && part !== undefined && part !== '',
+        (part) => part !== null && part !== undefined && part !== ''
     );
 
     return filteredParts.join(', ');

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);
+}

src/css/app.scss

@@ -343,3 +343,20 @@ input::-webkit-inner-spin-button {
 .q-item__section--main ~ .q-item__section--side {
     padding-inline: 0;
 }
+
+.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;
+}

src/filters/__tests__/getDifferences.spec.js

@@ -1,41 +0,0 @@
-import getDifferences from '../getDifferences';
-
-describe('getDifferences', () => {
-    it('should handle empty initialData', () => {
-        const initialData = {};
-        const formData = { name: 'John' };
-        expect(getDifferences(initialData, formData)).toEqual({ name: 'John' });
-    });
-
-    it('should detect when formData has a key not present in initialData', () => {
-        const initialData = { age: 30 };
-        const formData = { name: 'John' };
-        expect(getDifferences(initialData, formData)).toEqual({ age: 30, name: 'John' });
-    });
-
-    it('should detect when formData has different value for existing key', () => {
-        const initialData = { name: 'John', age: 30 };
-        const formData = { name: 'Jane', age: 30 };
-        expect(getDifferences(initialData, formData)).toEqual({ name: 'Jane' });
-    });
-
-    it('should detect when formData has null value for existing key', () => {
-        const initialData = { name: 'John' };
-        const formData = { name: null };
-        expect(getDifferences(initialData, formData)).toEqual({ name: null });
-    });
-
-    it('should handle missing keys in formData', () => {
-        const initialData = { name: 'John', age: 30 };
-        const formData = { name: 'John' };
-        expect(getDifferences(initialData, formData)).toEqual({ age: 30 });
-    });
-
-    it('should handle complex objects', () => {
-        const initialData = { user: { name: 'John', age: 30 } };
-        const formData = { user: { name: 'John', age: 31 } };
-        expect(getDifferences(initialData, formData)).toEqual({
-            user: { name: 'John', age: 31 },
-        });
-    });
-});

src/filters/getDifferences.js

@@ -1,23 +1,19 @@
-export default function getDifferences(initialData = {}, formData = {}) {
-    const diff = {};
-    delete initialData?.$index;
-    delete formData?.$index;
+export default function getDifferences(obj1, obj2) {
+    let diff = {};
+    delete obj1.$index;
+    delete obj2.$index;
 
-    // Añadimos los valores que están en initialData
-    for (const key in initialData) {
-        if (!Object.prototype.hasOwnProperty.call(formData, key)) {
-            // Caso 1: initialData tiene una clave que no tiene formData
-            diff[key] = initialData[key];
-        } else if (JSON.stringify(initialData[key]) !== JSON.stringify(formData[key])) {
-            // Caso 2 y 3: valores diferentes o null en formData
-            diff[key] = formData[key];
+    for (let key in obj1) {
+        if (obj2[key] && JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])) {
+            diff[key] = obj2[key];
         }
     }
-
-    // Añadimos las claves nuevas de formData
-    for (const key in formData) {
-        if (!Object.prototype.hasOwnProperty.call(initialData, key)) {
-            diff[key] = formData[key];
+    for (let key in obj2) {
+        if (
+            obj1[key] === undefined ||
+            JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])
+        ) {
+            diff[key] = obj2[key];
         }
     }
 

src/filters/index.js

@@ -3,7 +3,6 @@ import toDate from './toDate';
 import toDateString from './toDateString';
 import toDateHourMin from './toDateHourMin';
 import toDateHourMinSec from './toDateHourMinSec';
-import onBeforeSave from './onBeforeSave';
 import toRelativeDate from './toRelativeDate';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
@@ -20,7 +19,6 @@ import isDialogOpened from './isDialogOpened';
 import toCelsius from './toCelsius';
 
 export {
-    onBeforeSave,
     getUpdatedValues,
     getDifferences,
     isDialogOpened,

src/filters/onBeforeSave.js

@@ -1,9 +0,0 @@
-import getDifferences from './getDifferences';
-import getUpdatedValues from './getUpdatedValues';
-
-export default function onBeforeSave(originalData, formData) {
-    return getUpdatedValues(
-        Object.keys(getDifferences(originalData, formData)),
-        formData,
-    );
-}

src/pages/Claim/Card/ClaimBasicData.vue

@@ -15,6 +15,13 @@ import VnAvatar from 'src/components/ui/VnAvatar.vue';
 const route = useRoute();
 const { t } = useI18n();
 const workersOptions = ref([]);
+
+function onBeforeSave(formData, originalData) {
+    return getUpdatedValues(
+        Object.keys(getDifferences(formData, originalData)),
+        formData,
+    );
+}
 </script>
 <template>
     <FetchData
@@ -27,6 +34,7 @@ const workersOptions = ref([]);
     <FormModel
         model="Claim"
         :url-update="`Claims/updateClaim/${route.params.id}`"
+        :mapper="onBeforeSave"
         auto-load
     >
         <template #form="{ data, validate }">

src/pages/Customer/Card/CustomerBasicData.vue

@@ -8,12 +8,37 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import { getDifferences, getUpdatedValues } from 'src/filters';
 
 const route = useRoute();
 const { t } = useI18n();
 
 const businessTypes = ref([]);
 const contactChannels = ref([]);
+const handleSalesModelValue = (val) => {
+    if (!val) val = '';
+    return {
+        or: [
+            { id: val },
+            { name: val },
+            { nickname: { like: '%' + val + '%' } },
+            { code: { like: `${val}%` } },
+        ],
+    };
+};
+
+const exprBuilder = (param, value) => {
+    return {
+        and: [{ active: { neq: false } }, handleSalesModelValue(value)],
+    };
+};
+
+function onBeforeSave(formData, originalData) {
+    return getUpdatedValues(
+        Object.keys(getDifferences(formData, originalData)),
+        formData,
+    );
+}
 </script>
 <template>
     <FetchData
@@ -27,7 +52,12 @@ const contactChannels = ref([]);
         @on-fetch="(data) => (businessTypes = data)"
         auto-load
     />
-    <FormModel :url-update="`Clients/${route.params.id}`" auto-load model="Customer">
+    <FormModel
+        :url-update="`Clients/${route.params.id}`"
+        auto-load
+        :mapper="onBeforeSave"
+        model="Customer"
+    >
         <template #form="{ data, validate }">
             <VnRow>
                 <VnInput

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -13,6 +13,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 import VnCheckbox from 'src/components/common/VnCheckbox.vue';
+import { getDifferences, getUpdatedValues } from 'src/filters';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 const quasar = useQuasar();
@@ -30,6 +31,12 @@ function handleLocation(data, location) {
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;
 }
+function onBeforeSave(formData, originalData) {
+    return getUpdatedValues(
+        Object.keys(getDifferences(formData, originalData)),
+        formData,
+    );
+}
 
 async function checkEtChanges(data, _, originalData) {
     const equalizatedHasChanged = originalData.isEqualizated != data.isEqualizated;
@@ -68,6 +75,7 @@ async function acceptPropagate({ isEqualizated }) {
         :url-update="`Clients/${route.params.id}/updateFiscalData`"
         auto-load
         model="Customer"
+        :mapper="onBeforeSave"
         observe-form-changes
         @on-data-saved="checkEtChanges"
     >

src/pages/Route/Vehicle/Card/VehicleEventInclusionForm.vue

@@ -0,0 +1,183 @@
+<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 { 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: {
+        type: Object,
+        default: null,
+    },
+    isNewMode: {
+        type: Boolean,
+        default: true,
+    },
+    eventType: {
+        type: Boolean,
+        default: true,
+    },
+    firstDay: {
+        type: Date,
+        default: null,
+    },
+    lastDay: {
+        type: Date,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['onSubmit', 'closeForm', 'refresh-events']);
+
+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({
+    started: null,
+    finished: null,
+    vehicleStateFk: null,
+    description: '',
+    vehicleFk: null,
+    userFk: null,
+});
+
+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);
+    } else {
+        await axios.patch(
+            `VehicleEvents/${props.event?.id}`,
+            vehicleFormData.value,
+        );
+    }
+    await refetchEvents();
+
+};
+
+const deleteVehicleEvent = async () => {
+    if (!props.event) return;
+    await axios.delete(`VehicleEvents/${props.event?.id}`);
+    await refetchEvents();
+};
+
+const refetchEvents = async () => {
+    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');
+    notify(t('globals.dataSaved'), 'positive');
+    emit('closeForm');
+};
+
+
+</script>
+
+<template>
+    <FormPopup
+        :title="isNew ? t('Add vehicle event') : t('Edit vehicle event')"
+        :default-cancel-button="false"
+        :default-submit-button="false"
+    >
+        <template #form-inputs>
+            <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" />
+                <VnSelect
+                    url="VehicleStates"
+                    v-model="vehicleFormData.vehicleStateFk"
+                    :label="t('globals.state')"
+                    option-label="state"
+                    data-cy="State_input"
+                />
+            </VnRow>
+            <VnInput
+                    v-model="vehicleFormData.description"
+                    :label="t('globals.description')"
+            />
+        </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('vehicle.deleteTitle'),
+                        t('vehicle.deleteSubtitle'),
+                        () => deleteVehicleEvent(),
+                    )
+                "
+            />
+            <QBtn
+                :label="isNew ? t('globals.save') : t('globals.add')"
+                @click="createVehicleEvent"
+                color="primary"
+            />
+        </template>
+    </FormPopup>
+</template>
+
+<i18n>
+    es:
+        Started: Inicio
+        Finished: Fin
+        Add vehicle event: Agregar evento
+        Edit vehicle event: Editar evento
+</i18n>

src/pages/Route/Vehicle/Card/VehicleEvents.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref, reactive, onMounted } 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 vehicleEventsPanelRef = ref(null);
+const showVehicleEventForm = ref(false);
+const vehicleEventsFormProps = reactive({
+    isNewMode: true,
+    date: null,
+    event: null,
+});
+
+const refreshEvents = async () => {
+    await vehicleEventsPanelRef.value.fetchData();    
+};
+
+const openForm = (data) => {
+    const { date = null, isNewMode, event } = data;
+    Object.assign(vehicleEventsFormProps, { date, isNewMode, event });
+
+    showVehicleEventForm.value = true;
+};
+
+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>
+    <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"
+                :first-day="firstDay"
+                :last-day="lastDay"
+                @close-form="onVehicleEventFormClose()"
+                @refresh-events="refreshEvents()"
+            />
+        </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>

src/pages/Route/Vehicle/Card/VehicleEventsPanel.vue

@@ -0,0 +1,196 @@
+<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';
+import useNotify from 'src/composables/useNotify.js';
+
+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 { notify } = useNotify();
+const weekdayStore = useWeekdayStore();
+const { openConfirmationModal } = useVnConfirm();
+const vehicleStates = ref({});
+const fetchVehicleState = async () => {
+    const vehicles = await axios.get('VehicleStates');
+    vehicleStates.value = vehicles.data;
+};
+
+const getVehicleStateName = (id) => {
+    return vehicleStates.value[id - 1] ?? dashIfEmpty(id - 1);
+};
+
+const params = computed(() => ({
+    vehicleFk: route.params.id,
+    started: props.firstDay,
+    finished: props.lastDay,
+}));
+
+const arrayData = useArrayData('VehicleEvents', {
+    params: params,
+    url: `VehicleEvents`,
+});
+
+const fetchData = async () => {
+    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(
+    params,
+    async () => {
+        await fetchData();
+    },
+    { 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('globals.dataSaved'), 'positive');
+    await fetchData();
+};
+
+const openInclusionForm = (event) => {
+    emit('openVehicleForm', {
+        date: event.dated,
+        event,
+        isNewMode: false,
+    });
+};
+
+onMounted(async () => {
+    weekdayStore.initStore();
+    await fetchVehicleState();
+});
+
+defineExpose({
+    fetchData
+});
+
+</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>
+                </QItemSection>
+                <QItemSection side @click="openInclusionForm(event)">
+                    <QBtn
+                        icon="delete"
+                        data-cy="delete_event"
+                        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>

src/pages/Route/Vehicle/VehicleCalendar.vue

@@ -0,0 +1,13 @@
+<script setup>
+import EntityCalendar from 'src/components/EntityCalendar.vue';
+
+const emit = defineEmits(['onDateSelected']);
+
+</script>
+
+<template>
+    <EntityCalendar 
+        v-bind="$props" 
+        @onDateSelected="(e) => emit('onDateSelected', e)"
+    />
+</template>

src/pages/Route/Vehicle/VehicleCalendarGrid.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { ref, watch } from 'vue';
+import EntityCalendarGrid from 'src/components/EntityCalendarGrid.vue';
+import VehicleCalendar from './VehicleCalendar.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+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?.length || !firstDay.value || !lastDay.value) return;
+    
+    let day = new Date(firstDay.value.getTime());
+    let endDate = new Date(lastDay.value.getTime());
+
+    while (day <= endDate) {
+        let stamp = day.getTime();
+        let dayEvents = [];
+        
+        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;
+        }
+
+        day.setDate(day.getDate() + 1);
+    }
+};
+
+watch(
+    () => store.data,
+    (value) => {
+        _data.value = value;
+        events.value = Array.isArray(value) ? value : [];
+        
+        function toStamp(date) {
+            return date && new Date(date).setHours(0, 0, 0, 0);
+        }
+
+        if (events.value) {
+            for (let event of events.value) {
+                event.dated = toStamp(event.dated);
+                event.finished = toStamp(event.finished);
+                event.started = toStamp(event.started);
+            }
+        }
+
+        refreshEvents();
+    },
+    { immediate: true },
+);
+
+watch(() => entityCalendarRef.value?.firstDay, (newVal) => {
+    if (newVal) firstDay.value = new Date(newVal);
+});
+
+watch(() => entityCalendarRef.value?.lastDay, (newVal) => {
+    if (newVal) lastDay.value = new Date(newVal);
+});
+
+</script>
+
+<template>
+    <EntityCalendarGrid
+        ref="entityCalendarRef"
+        :data-key="dataKey"
+        :calendar-component="VehicleCalendar"
+        :additional-props="{ daysMap: days }"
+        @refresh-events="refreshEvents"
+        v-bind="$attrs"
+    />
+</template>

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

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

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"

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"

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"

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>

src/router/modules/route.js

@@ -170,6 +170,7 @@ const vehicleCard = {
             'VehicleBasicData',
             'VehicleNotes',
             'VehicleDms',
+            'VehicleEvents'
         ],
     },
     children: [
@@ -209,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'),
+        },
     ],
 };
 

test/cypress/integration/route/vehicle/vehicleEvents.spec.js

@@ -0,0 +1,27 @@
+describe('Vehicle', () => {
+
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('deliveryAssistant');
+        cy.visit(`/#/route/vehicle/3/events`);
+    });
+
+    it('should add, edit and delete a vehicle event', () => {
+        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)').find('[data-cy="Description_input"]').clear().type('Test');
+        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('[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();
+    });
+});