WIP

src/css/app.scss

@@ -76,7 +76,7 @@ select:-webkit-autofill {
 }
 
 .color-vn-label {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 
 .color-vn-text {

src/pages/Zone/Card/ZoneCalendarPanel.vue

@@ -1,149 +0,0 @@
-<script setup>
-import { onMounted, ref, reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import FetchData from 'components/FetchData.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-
-import { useArrayData } from 'src/composables/useArrayData';
-import axios from 'axios';
-import useNotify from 'src/composables/useNotify.js';
-import { watch } from 'vue';
-
-const { t } = useI18n();
-const { notify } = useNotify();
-
-const deliveryMethodFk = ref(null);
-const deliveryMethods = ref([]);
-const formData = reactive({});
-
-const arrayData = useArrayData('ZoneDeliveryDays', {
-    url: 'Zones/getEvents',
-});
-
-const fetchDeliveryMethods = async (filter) => {
-    try {
-        const params = { filter: JSON.stringify(filter) };
-        const { data } = await axios.get('DeliveryMethods', { params });
-        return data.map((deliveryMethod) => deliveryMethod.id);
-    } catch (err) {
-        console.error('Error fetching delivery methods: ', err);
-    }
-};
-
-watch(
-    () => deliveryMethodFk.value,
-    async (val) => {
-        let filter;
-        if (val === 'pickUp') filter = { where: { code: 'PICKUP' } };
-        else filter = { where: { code: { inq: ['DELIVERY', 'AGENCY'] } } };
-
-        deliveryMethods.value = await fetchDeliveryMethods(filter);
-    },
-    { immediate: true }
-);
-
-const fetchData = async (params) => {
-    try {
-        const { data } = params
-            ? await arrayData.applyFilter({
-                  params,
-              })
-            : await arrayData.fetch({ append: false });
-        if (!data.events || !data.events.length)
-            notify(t('deliveryPanel.noEventsWarning'), 'warning');
-    } catch (err) {
-        console.error('Error fetching events: ', err);
-    }
-};
-
-const onSubmit = async () => {
-    const params = { deliveryMethodFk: deliveryMethodFk.value, ...formData };
-    await fetchData(params);
-};
-
-onMounted(async () => {
-    deliveryMethodFk.value = 'delivery';
-    formData.geoFk = arrayData.store?.userParams?.geoFk;
-    formData.agencyModeFk = arrayData.store?.userParams?.agencyModeFk;
-    if (formData.geoFk || formData.agencyModeFk) await fetchData();
-});
-</script>
-
-<template>
-    <QForm @submit="onSubmit()" class="q-pa-md">
-        <div class="column q-gutter-y-sm">
-            <QRadio
-                v-model="deliveryMethodFk"
-                dense
-                val="pickUp"
-                :label="t('deliveryPanel.pickup')"
-            />
-            <QRadio
-                v-model="deliveryMethodFk"
-                dense
-                val="delivery"
-                :label="t('deliveryPanel.delivery')"
-                class="q-mb-sm"
-            />
-            <VnSelect
-                v-if="deliveryMethodFk === 'delivery'"
-                :label="t('deliveryPanel.postcode')"
-                v-model="formData.geoFk"
-                url="Postcodes/location"
-                :fields="['geoFk', 'code', 'townFk']"
-                sort-by="code, townFk"
-                option-value="geoFk"
-                option-label="code"
-                option-filter="code"
-                hide-selected
-                dense
-                outlined
-                rounded
-            >
-                <template #option="{ itemProps, opt }">
-                    <QItem v-bind="itemProps">
-                        <QItemSection v-if="opt.code">
-                            <QItemLabel>{{ opt.code }}</QItemLabel>
-                            <QItemLabel caption
-                                >{{ opt.town?.province?.name }},
-                                {{ opt.town?.province?.country?.country }}</QItemLabel
-                            >
-                        </QItemSection>
-                    </QItem>
-                </template>
-            </VnSelect>
-            <VnSelect
-                :label="
-                    t(
-                        deliveryMethodFk === 'delivery'
-                            ? 'deliveryPanel.agency'
-                            : 'deliveryPanel.warehouse'
-                    )
-                "
-                v-model="formData.agencyModeFk"
-                url="AgencyModes/isActive"
-                :fields="['id', 'name']"
-                :where="{
-                    deliveryMethodFk: { inq: deliveryMethods },
-                }"
-                sort-by="name ASC"
-                option-value="id"
-                option-label="name"
-                hide-selected
-                dense
-                outlined
-                rounded
-            />
-        </div>
-        <QBtn
-            :label="t('deliveryPanel.query')"
-            type="submit"
-            color="primary"
-            class="q-mt-md full-width"
-            unelevated
-            rounded
-            dense
-        />
-    </QForm>
-</template>

src/pages/Zone/Card/ZoneCard.vue

@@ -18,7 +18,7 @@ const searchBarDataKeys = {
     ZoneWarehouses: 'ZoneWarehouses',
     ZoneSummary: 'ZoneSummary',
     ZoneLocations: 'ZoneLocations',
-    ZoneCalendar: 'ZoneCalendar',
+    ZoneEvents: 'ZoneEvents',
 };
 </script>
 <template>

src/pages/Zone/Card/ZoneEvents.vue

@@ -2,11 +2,13 @@
 import { computed, onMounted, ref, watch, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import ZoneEventsPanel from './ZoneEventsPanel.vue';
 import ZoneDeliveryCalendar from '../ZoneDeliveryCalendar.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import { useArrayData } from 'src/composables/useArrayData';
+import { nextTick } from 'vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -22,11 +24,11 @@ const days = ref({});
 const exclusions = ref({});
 const geoExclusions = ref({});
 const events = ref([]);
-const arrayData = useArrayData('ZoneDeliveryDays', {
+const arrayData = useArrayData('ZoneEvents');
-    url: 'Zones/getEvents',
-});
 const { store } = arrayData;
 
+// const urlPath = computed(() => `Zones/${route.params.id}/events`);
+
 const refreshEvents = () => {
     days.value = {};
     if (!data.value) return;
@@ -83,6 +85,9 @@ const date = computed({
             monthDate.setMonth(value.getMonth() + i);
             months.value.push(monthDate);
         }
+
+        console.log('firstDay', firstDay.value);
+        console.log('lastDay', lastDay.value);
         refreshEvents();
     },
 });
@@ -166,13 +171,18 @@ const step = (direction) => {
     date.value = _date;
 };
 
+const openEditMode = (mode) => {
+    console.log('openEditMode', mode);
+};
+
 onMounted(async () => {
-    stateStore.rightDrawer = true;
     let initialDate = Date.vnNew();
     initialDate.setDate(1);
     initialDate.setHours(0, 0, 0, 0);
     date.value = initialDate;
     weekdayStore.initStore();
+    await nextTick();
+    stateStore.rightDrawer = true;
 });
 
 onUnmounted(() => arrayData.destroy());
@@ -198,7 +208,12 @@ onUnmounted(() => arrayData.destroy());
     </template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <!-- <ZoneCalendarPanel /> -->
+            <ZoneEventsPanel
+                :first-day="firstDay"
+                :last-day="lastDay"
+                :events="events"
+                @open-edit-mode="openEditMode"
+            />
         </QScrollArea>
     </QDrawer>
     <QPage class="q-pa-md flex justify-center">

src/pages/Zone/Card/ZoneEventsPanel.vue

@@ -0,0 +1,197 @@
+<script setup>
+import { onMounted, ref, computed, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { useArrayData } from 'src/composables/useArrayData';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { toDateFormat } from 'src/filters/date.js';
+import { toCurrency } from 'filters/index';
+import { dashIfEmpty } from 'src/filters';
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import { useVnConfirm } from 'composables/useVnConfirm';
+
+const props = defineProps({
+    firstDay: {
+        type: Date,
+        required: true,
+        default: null,
+    },
+    lastDay: {
+        type: Date,
+        required: true,
+        default: null,
+    },
+    events: {
+        type: Array,
+        required: true,
+        default: () => [],
+    },
+});
+
+const emit = defineEmits(['openEditMode']);
+
+const { t } = useI18n();
+const { notify } = useNotify();
+const route = useRoute();
+const weekdayStore = useWeekdayStore();
+const { openConfirmationModal } = useVnConfirm();
+
+const editMode = ref('include');
+
+const params = computed(() => ({
+    zoneFk: route.params.id,
+    started: props.firstDay,
+    ended: props.lastDay,
+}));
+const arrayData = useArrayData('ZoneEvents', {
+    params: params,
+    url: `Zones/getEventsFiltered`,
+});
+const { store } = arrayData;
+
+const fetchData = async () => {
+    try {
+        await arrayData.applyFilter({
+            params: params.value,
+        });
+    } catch (err) {
+        console.error('Error fetching events: ', err);
+    }
+};
+
+const formatWdays = (event) => {
+    if (!event.weekDays) return;
+
+    let abrWdays = event.weekDays
+        .split(',')
+        .map((wday) => weekdayStore.getLocalesMap[wday].localeAbr);
+
+    return abrWdays.length < 7 ? abrWdays.join(', ') : t('eventsPanel.everyday');
+};
+
+const deleteEvent = async (id) => {
+    try {
+        if (!id) return;
+        await axios.delete(`Zones/${route.params.id}/events/${id}`);
+        await fetchData();
+    } catch (err) {
+        console.error('Error deleting event: ', err);
+    }
+};
+
+const openEditMode = () => {
+    console.log('editMode.value', editMode.value);
+    // emit('openEditMode', editMode.value);
+};
+
+onMounted(async () => {
+    weekdayStore.initStore();
+    console.log('weekdayStore', weekdayStore.getLocalesMap);
+    await nextTick();
+    await fetchData();
+});
+</script>
+
+<template>
+    <pre> {{ params }}</pre>
+    <QForm @submit="onSubmit()">
+        <div class="column q-pa-md q-gutter-y-sm">
+            <span class="color-vn-label">{{ t('eventsPanel.editMode') }}</span>
+            <QRadio
+                v-model="editMode"
+                dense
+                val="include"
+                :label="t('eventsPanel.include')"
+            />
+            <QRadio
+                v-model="editMode"
+                dense
+                val="exclude"
+                :label="t('eventsPanel.exclude')"
+                class="q-mb-sm"
+            />
+        </div>
+        <span class="color-vn-label q-px-md">{{ t('eventsPanel.events') }}</span>
+        <QList>
+            <QItem v-for="(event, index) in events" :key="index" class="event-card">
+                <QItemSection left @click="openEditMode()">
+                    <div v-if="event.type == 'day'" class="vn-mb-sm">
+                        {{ toDateFormat(event.dated) }}
+                    </div>
+                    <div v-if="event.type != 'day'" class="q-mb-sm">
+                        <span v-if="event.weekDays">
+                            {{ formatWdays(event) }}
+                        </span>
+                        <span v-if="event.type == 'range'">
+                            ({{ toDateFormat(event.started) }} -
+                            {{ toDateFormat(event.ended) }})
+                        </span>
+                    </div>
+                    <span class="color-vn-label">
+                        {{ t('eventsPanel.closing') }}:
+                        <span class="color-vn-text q-ml-xs">
+                            {{ dashIfEmpty(event.hour) }}
+                        </span>
+                    </span>
+                    <span class="color-vn-label">
+                        {{ t('eventsPanel.travelingDays') }}:
+                        <span class="color-vn-text">
+                            {{ dashIfEmpty(event.travelingDays) }}
+                        </span>
+                    </span>
+                    <span class="color-vn-label">
+                        {{ t('eventsPanel.price') }}:
+                        <span class="color-vn-text"> {{ dashIfEmpty(event.price) }}</span>
+                    </span>
+                    <span class="color-vn-label">
+                        {{ t('eventsPanel.bonus') }}:
+                        <span class="color-vn-text"> {{ toCurrency(event.bonus) }}</span>
+                    </span>
+                    <span class="color-vn-label">
+                        {{ t('eventsPanel.m3Max') }}:
+                        <span class="color-vn-text"> {{ dashIfEmpty(event.m3Max) }}</span>
+                    </span>
+                </QItemSection>
+                <QItemSection side @click="openEditMode()">
+                    <QBtn
+                        icon="delete"
+                        flat
+                        dense
+                        size="md"
+                        color="primary"
+                        @click.stop="
+                            openConfirmationModal(
+                                t('eventsPanel.deleteTitle'),
+                                t('eventsPanel.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/Zone/locale/en.yml

@@ -65,3 +65,17 @@ warehouses:
     deleteSubtitle: Are you sure you want to continue?
     warehouse: Warehouse
     add: Add
+eventsPanel:
+    editMode: Edit mode
+    include: Include
+    exclude: Exclude
+    events: Events
+    closing: Closing
+    travelingDays: Traveling days
+    price: Price
+    bonus: Bonus
+    m3Max: Max m³
+    everyday: Everyday
+    delete: Delete
+    deleteTitle: This item will be deleted
+    deleteSubtitle: Are you sure you want to continue?

src/pages/Zone/locale/es.yml

@@ -67,3 +67,17 @@ warehouses:
     deleteSubtitle: ¿Seguro que quieres continuar?
     warehouse: Almacén
     add: Añadir
+eventsPanel:
+    editMode: Modo edición
+    include: Incluir
+    exclude: Excluir
+    events: Eventos
+    closing: Cierre
+    travelingDays: Días de viaje
+    price: Precio
+    bonus: Bonificación
+    m3Max: Meidida máxima
+    everyday: Todos los días
+    delete: Eliminar
+    deleteTitle: Este elemento será eliminado
+    deleteSubtitle: ¿Seguro que quieres continuar?

src/router/modules/zone.js

@@ -17,7 +17,7 @@ export default {
             'ZoneWarehouses',
             'ZoneHistory',
             'ZoneLocations',
-            'ZoneCalendar',
+            'ZoneEvents',
         ],
     },
     children: [
@@ -117,13 +117,13 @@ export default {
                     component: () => import('src/pages/Zone/Card/ZoneLog.vue'),
                 },
                 {
-                    name: 'ZoneCalendar',
+                    name: 'ZoneEvents',
                     path: 'events',
                     meta: {
                         title: 'calendar',
                         icon: 'vn:calendar',
                     },
-                    component: () => import('src/pages/Zone/Card/ZoneCalendar.vue'),
+                    component: () => import('src/pages/Zone/Card/ZoneEvents.vue'),
                 },
             ],
         },

src/stores/useWeekdayStore.js

@@ -73,6 +73,22 @@ export const useWeekdayStore = defineStore('weekdayStore', () => {
         return locales;
     });
 
+    const getLocalesMap = computed(() => {
+        const locales = {};
+        for (let code of localeOrder.es) {
+            const weekDay = weekdaysMap[code];
+            const locale = t(`weekdays.${weekdaysMap[code].code}`);
+            const obj = {
+                ...weekDay,
+                locale,
+                localeChar: locale.substr(0, 1),
+                localeAbr: locale.substr(0, 3),
+            };
+            locales[weekDay.code] = obj;
+        }
+        return locales;
+    });
+
     const getLocaleMonths = computed(() => {
         const locales = [];
         for (let code of monthCodes) {
@@ -115,5 +131,6 @@ export const useWeekdayStore = defineStore('weekdayStore', () => {
         monthCodes,
         getLocaleMonths,
         fromSet,
+        getLocalesMap,
     };
 });