feat: refs #8443 created vehicle events

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>

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>

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>

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>

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>

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