From 9304b511bce405a1c9036401e87fb47ddec1347d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 13 May 2024 10:14:36 -0300
Subject: [PATCH 1/6] Zone delivery

---
 src/pages/Zone/Card/ZoneSummary.vue     |   2 +-
 src/pages/Zone/ZoneClosingTable.vue     | 111 +++++++++++
 src/pages/Zone/ZoneDeliveryCalendar.vue | 197 +++++++++++++++++++
 src/pages/Zone/ZoneDeliveryDays.vue     | 243 +++++++++++++++++++++++-
 src/pages/Zone/ZoneDeliveryPanel.vue    | 158 +++++++++++++++
 src/pages/Zone/locale/en.yml            |  18 +-
 src/pages/Zone/locale/es.yml            |  19 +-
 src/router/modules/zone.js              |  11 +-
 src/stores/useWeekdayStore.js           |  22 +++
 9 files changed, 774 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/Zone/ZoneClosingTable.vue
 create mode 100644 src/pages/Zone/ZoneDeliveryCalendar.vue
 create mode 100644 src/pages/Zone/ZoneDeliveryPanel.vue

diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
index b39d2aaab..d46282c10 100644
--- a/src/pages/Zone/Card/ZoneSummary.vue
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -32,7 +32,7 @@ const filter = computed(() => {
             fields: ['name'],
         },
         where: {
-            id: route.params.id,
+            id: entityId,
         },
     };
     return filter;
diff --git a/src/pages/Zone/ZoneClosingTable.vue b/src/pages/Zone/ZoneClosingTable.vue
new file mode 100644
index 000000000..ec8ad48c6
--- /dev/null
+++ b/src/pages/Zone/ZoneClosingTable.vue
@@ -0,0 +1,111 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { computed } from 'vue';
+import { toCurrency } from 'src/filters';
+
+import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
+
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { toTimeFormat } from 'filters/date.js';
+
+const { t } = useI18n();
+const router = useRouter();
+const { viewSummary } = useSummaryDialog();
+
+defineProps({
+    rows: {
+        type: Number,
+        required: true,
+    },
+});
+
+const columns = computed(() => [
+    {
+        label: t('zoneClosingTable.id'),
+        name: 'id',
+        field: 'id',
+        sortable: true,
+        align: 'left',
+    },
+    {
+        label: t('zoneClosingTable.name'),
+        name: 'name',
+        field: 'name',
+        sortable: true,
+        align: 'left',
+    },
+    {
+        label: t('zoneClosingTable.agency'),
+        name: 'agency',
+        field: 'agencyModeName',
+        sortable: true,
+        align: 'left',
+    },
+    {
+        label: t('zoneClosingTable.closing'),
+        name: 'close',
+        field: 'hour',
+        sortable: true,
+        align: 'left',
+        format: (val) => toTimeFormat(val),
+    },
+    {
+        label: t('zoneClosingTable.price'),
+        name: 'price',
+        field: 'price',
+        sortable: true,
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        name: 'actions',
+        align: 'left',
+    },
+]);
+
+const redirectToZoneSummary = (id) => {
+    router.push({ name: 'ZoneSummary', params: { id } });
+};
+</script>
+
+<template>
+    <div>
+        <div class="header">
+            <span>{{ t('zoneClosingTable.zones') }}</span>
+        </div>
+        <QTable
+            :rows="rows"
+            :columns="columns"
+            @row-click="(_, row) => redirectToZoneSummary(row.id)"
+            style="max-height: 400px"
+        >
+            <template #body-cell-actions="props">
+                <QTd :props="props">
+                    <div class="table-actions">
+                        <QIcon
+                            name="preview"
+                            size="sm"
+                            color="primary"
+                            @click.stop="viewSummary(props.row.id, ZoneSummary)"
+                        >
+                            <QTooltip>{{ t('zoneClosingTable.preview') }}</QTooltip>
+                        </QIcon>
+                    </div>
+                </QTd>
+            </template>
+        </QTable>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.header {
+    width: 100%;
+    height: 34px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    background-color: $primary;
+}
+</style>
diff --git a/src/pages/Zone/ZoneDeliveryCalendar.vue b/src/pages/Zone/ZoneDeliveryCalendar.vue
new file mode 100644
index 000000000..7403d86a3
--- /dev/null
+++ b/src/pages/Zone/ZoneDeliveryCalendar.vue
@@ -0,0 +1,197 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { date } from 'quasar';
+
+import ZoneClosingTable from './ZoneClosingTable.vue';
+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.sass';
+
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import axios from 'axios';
+
+const props = defineProps({
+    year: {
+        type: Number,
+        required: true,
+    },
+    month: {
+        type: Number,
+        required: true,
+    },
+    events: {
+        type: Object,
+        default: null,
+    },
+    monthDate: {
+        type: Object,
+        default: null,
+    },
+    geoExclusions: {
+        type: Object,
+        default: () => {},
+    },
+    exclusions: {
+        type: Object,
+        default: () => {},
+    },
+    daysMap: {
+        type: Object,
+        default: null,
+    },
+});
+
+const { locale } = useI18n();
+
+const calendarRef = ref(null);
+const weekdayStore = useWeekdayStore();
+const showZoneClosingTable = ref(false);
+const zoneClosingData = 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 onEventSelection = async ({ year, month, day }) => {
+    const date = new Date(year, month - 1, day);
+    const stamp = date.getTime();
+    const events = props.daysMap[stamp];
+    if (!events) return;
+
+    const zoneIds = [];
+    for (let event of events) zoneIds.push(event.zoneFk);
+
+    const params = {
+        zoneIds: zoneIds,
+        date: date,
+    };
+
+    const { data } = await axios.post('Zones/getZoneClosing', params);
+    zoneClosingData.value = data;
+    showZoneClosingTable.value = true;
+};
+
+const getEventByTimestamp = ({ year, month, day }) => {
+    const stamp = new Date(year, month - 1, day).getTime();
+    return (
+        props.daysMap[stamp] ||
+        props.exclusions[stamp] ||
+        props.geoExclusions[stamp] ||
+        null
+    );
+};
+
+const getEventAttrs = ({ year, month, day }) => {
+    const stamp = new Date(year, month - 1, day).getTime();
+
+    let colorClass = '--event';
+    if (props.geoExclusions[stamp]) colorClass = '--geoExcluded';
+    else if (props.exclusions[stamp]) colorClass = '--excluded';
+
+    const attrs = {
+        class: colorClass,
+        label: day,
+    };
+
+    return attrs;
+};
+
+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}`;
+});
+
+onMounted(() => {});
+</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"
+                mini-mode
+            >
+                <template #day="{ scope: { timestamp } }">
+                    <!-- Este slot representa cada día del calendario y muestra un botón representando el correspondiente evento -->
+                    <QBtn
+                        v-if="getEventByTimestamp(timestamp)"
+                        v-bind="{ ...getEventAttrs(timestamp) }"
+                        @click="onEventSelection(timestamp)"
+                        rounded
+                        dense
+                        flat
+                        class="calendar-event"
+                        :class="{
+                            '--today': isToday(timestamp),
+                        }"
+                    >
+                        <QPopupProxy>
+                            <ZoneClosingTable
+                                v-if="zoneClosingData && zoneClosingData.length"
+                                :rows="zoneClosingData"
+                            />
+                        </QPopupProxy>
+                    </QBtn>
+                </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;
+    }
+
+    &.--excluded {
+        background-color: $negative;
+    }
+
+    &.--geoExcluded {
+        background-color: $primary;
+    }
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+</style>
diff --git a/src/pages/Zone/ZoneDeliveryDays.vue b/src/pages/Zone/ZoneDeliveryDays.vue
index 485500dba..3535eefec 100644
--- a/src/pages/Zone/ZoneDeliveryDays.vue
+++ b/src/pages/Zone/ZoneDeliveryDays.vue
@@ -1 +1,242 @@
-<template>Zone Delivery days</template>
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import ZoneDeliveryPanel from './ZoneDeliveryPanel.vue';
+import ZoneDeliveryCalendar from './ZoneDeliveryCalendar.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+
+const { t } = useI18n();
+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 exclusions = ref({});
+const geoExclusions = ref({});
+const events = ref([]);
+
+const refreshEvents = () => {
+    days.value = {};
+    if (!data.value) return;
+
+    let day = new Date(firstDay.value.getTime());
+
+    while (day <= lastDay.value) {
+        let stamp = day.getTime();
+        let wday = day.getDay();
+        let dayEvents = [];
+        let _exclusions = exclusions.value[stamp] || [];
+
+        if (events.value) {
+            for (let event of events.value) {
+                let match;
+                switch (event.type) {
+                    case 'day':
+                        match = event.dated == stamp;
+                        break;
+                    default:
+                        match =
+                            event.wdays[wday] &&
+                            (!event.started || stamp >= event.started) &&
+                            (!event.ended || stamp <= event.ended);
+                        break;
+                }
+                if (match && !_exclusions.find((e) => e.zoneFk == event.zoneFk)) {
+                    dayEvents.push(event);
+                }
+            }
+        }
+        if (dayEvents.length) days.value[stamp] = dayEvents;
+
+        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);
+        }
+        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);
+        }
+
+        exclusions.value = {};
+        let _exclusions = value.exclusions;
+
+        if (_exclusions) {
+            for (let exclusion of _exclusions) {
+                let stamp = toStamp(exclusion.dated);
+                if (!exclusions[stamp]) exclusions.value[stamp] = [];
+                exclusions.value[stamp].push(exclusion);
+            }
+        }
+
+        geoExclusions.value = {};
+        let _geoExclusions = value.geoExclusions;
+
+        if (_geoExclusions) {
+            for (let geoExclusion of _geoExclusions) {
+                let stamp = toStamp(geoExclusion.dated);
+                if (!geoExclusions[stamp]) geoExclusions.value[stamp] = [];
+                geoExclusions.value[stamp].push(geoExclusion);
+            }
+        }
+
+        let _events = value.events;
+        if (_events) {
+            for (let event of _events) {
+                event.dated = toStamp(event.dated);
+                event.ended = toStamp(event.ended);
+                event.started = toStamp(event.started);
+                event.wdays = weekdayStore.fromSet(event.weekDays || '');
+            }
+        }
+
+        refreshEvents();
+    },
+});
+
+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;
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    let initialDate = Date.vnNew();
+    initialDate.setDate(1);
+    initialDate.setHours(0, 0, 0, 0);
+    date.value = initialDate;
+    weekdayStore.initStore();
+});
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ZoneDeliveryPanel @on-fetch-events="($event) => (data = $event)" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="q-pa-md flex justify-center">
+        <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">
+                <ZoneDeliveryCalendar
+                    v-for="(month, index) in months"
+                    :key="index"
+                    :month="month.getMonth() + 1"
+                    :year="month.getFullYear()"
+                    :month-date="month"
+                    :geo-exclusions="geoExclusions"
+                    :exclusions="exclusions"
+                    :days-map="days"
+                />
+            </div>
+        </QCard>
+    </QPage>
+</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/src/pages/Zone/ZoneDeliveryPanel.vue b/src/pages/Zone/ZoneDeliveryPanel.vue
new file mode 100644
index 000000000..ff2a4c5d5
--- /dev/null
+++ b/src/pages/Zone/ZoneDeliveryPanel.vue
@@ -0,0 +1,158 @@
+<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 axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { watch } from 'vue';
+
+const { t } = useI18n();
+const { notify } = useNotify();
+const emit = defineEmits(['onFetchEvents']);
+
+const deliveryMethodFk = ref(null);
+const postcodesOptions = ref([]);
+const agencyModesOptions = ref([]);
+const formData = reactive({});
+const agencyFilter = ref({
+    fields: ['id', 'name'],
+    where: {
+        deliveryMethodFk: null,
+    },
+    order: 'name ASC',
+    limit: 30,
+});
+
+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'] } } };
+
+        const deliveryMethods = await fetchDeliveryMethods(filter);
+        agencyFilter.value.where = {
+            deliveryMethodFk: { inq: deliveryMethods },
+        };
+        await fetchAgencyModes(agencyFilter.value);
+    },
+    { immediate: true }
+);
+
+const fetchAgencyModes = async (filter) => {
+    try {
+        const params = { filter: JSON.stringify(filter) };
+        const { data } = await axios.get('AgencyModes/isActive', { params });
+        agencyModesOptions.value = data;
+    } catch (err) {
+        console.error('Error fetching agency modes: ', err);
+    }
+};
+
+const fetchData = async () => {
+    try {
+        const params = { deliveryMethodFk: deliveryMethodFk.value, ...formData };
+        const { data } = await axios.get('Zones/getEvents', { params });
+        if (!data.events || !data.events.length) {
+            notify(t('deliveryPanel.noEventsWarning'), 'warning');
+            return;
+        }
+        emit('onFetchEvents', data);
+    } catch (err) {
+        console.error('Error fetching events: ', err);
+    }
+};
+
+onMounted(async () => {
+    deliveryMethodFk.value = 'delivery';
+});
+</script>
+
+<template>
+    <FetchData
+        url="Postcodes/location"
+        :filter="{ fields: ['geoFk', 'code', 'townFk'], order: 'code, townFk' }"
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+    />
+    <QForm @submit="fetchData()" 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"
+                :options="postcodesOptions"
+                option-value="geoFk"
+                option-label="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"
+                :options="agencyModesOptions"
+                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>
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
index d0a22ebcd..61eff5cb2 100644
--- a/src/pages/Zone/locale/en.yml
+++ b/src/pages/Zone/locale/en.yml
@@ -2,7 +2,7 @@ zone:
     pageTitles:
         zones: Zone
         zonesList: Zones
-        deliveryList: Delivery days
+        deliveryDays: Delivery days
         upcomingList: Upcoming deliveries
 list:
     clone: Clone
@@ -38,3 +38,19 @@ summary:
 filterPanel:
     name: Name
     agencyModeFk: Agency
+deliveryPanel:
+    pickup: Pick up
+    delivery: Delivery
+    postcode: Postcode
+    agency: Agency
+    warehouse: Warehouse
+    query: Query
+    noEventsWarning: No service for the specified zone
+zoneClosingTable:
+    id: Id
+    name: Name
+    agency: Agency
+    closing: Closing
+    price: Precio
+    preview: Preview
+    zones: Zones
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index ad740d5f7..7f5df416c 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -2,7 +2,7 @@ zone:
     pageTitles:
         zones: Zonas
         zonesList: Zonas
-        deliveryList: Días de entrega
+        deliveryDays: Días de entrega
         upcomingList: Próximos repartos
 list:
     clone: Clonar
@@ -38,5 +38,18 @@ summary:
 filterPanel:
     name: Nombre
     agencyModeFk: Agencia
-Search zones: Buscar zonas
-You can search by zone reference: Puedes buscar por referencia de la zona
+deliveryPanel:
+    pickup: Recogida
+    delivery: Entrega
+    postcode: Código postal
+    agency: Agencia
+    warehouse: Almacén
+    query: Consultar
+    noEventsWarning: No hay servicio para la zona especificada
+ZoneClosingTable:
+    id: Id
+    name: Nombre
+    agency: Agencia
+    closing: Cierre
+    price: Precio
+    zones: Zonas
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
index d39ed82d0..b6e2822fb 100644
--- a/src/router/modules/zone.js
+++ b/src/router/modules/zone.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'ZoneMain' },
     menus: {
-        main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
+        main: ['ZoneList', 'ZoneDeliveryDays', 'ZoneUpcomingList'],
         card: ['ZoneBasicData'],
     },
     children: [
@@ -30,6 +30,15 @@ export default {
                     },
                     component: () => import('src/pages/Zone/ZoneList.vue'),
                 },
+                {
+                    path: 'delivery-days',
+                    name: 'ZoneDeliveryDays',
+                    meta: {
+                        title: 'deliveryDays',
+                        icon: 'vn:calendar',
+                    },
+                    component: () => import('src/pages/Zone/ZoneDeliveryDays.vue'),
+                },
                 {
                     path: 'create',
                     name: 'ZoneCreate',
diff --git a/src/stores/useWeekdayStore.js b/src/stores/useWeekdayStore.js
index a7b0496c6..ac17356ae 100644
--- a/src/stores/useWeekdayStore.js
+++ b/src/stores/useWeekdayStore.js
@@ -85,6 +85,27 @@ export const useWeekdayStore = defineStore('weekdayStore', () => {
         return locales;
     });
 
+    /**
+     * Transforms weekday set into an array whose indexes are weekday index
+     * with selected days set to %true.
+     *
+     * @param {String} weekDays Weekday codes separated by commas
+     * @return {Array<Boolean>} Array with selected days set to %true
+     */
+    const fromSet = (_weekDays) => {
+        let wdays = [];
+
+        if (_weekDays) {
+            let codes = _weekDays.split(',');
+            for (let code of codes) {
+                let data = weekdaysMap[code];
+                if (data) wdays[data.index] = true;
+            }
+        }
+
+        return wdays;
+    };
+
     return {
         initStore,
         weekdaysMap,
@@ -93,5 +114,6 @@ export const useWeekdayStore = defineStore('weekdayStore', () => {
         weekdays,
         monthCodes,
         getLocaleMonths,
+        fromSet,
     };
 });

From cd8095d3b892a4bc01b187076396917e03e3456b Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 15 May 2024 09:39:15 -0300
Subject: [PATCH 2/6] Last changes

---
 src/composables/useArrayData.js         |  3 ++-
 src/pages/Zone/Card/ZoneDescriptor.vue  |  1 -
 src/pages/Zone/ZoneClosingTable.vue     |  3 ++-
 src/pages/Zone/ZoneDeliveryCalendar.vue |  4 ----
 src/pages/Zone/ZoneDeliveryDays.vue     | 16 +++++++++++--
 src/pages/Zone/ZoneDeliveryPanel.vue    | 32 ++++++++++++++++++-------
 src/pages/Zone/locale/en.yml            |  2 +-
 src/pages/Zone/locale/es.yml            |  3 ++-
 8 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 525cf6e6b..fcaa40ebf 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -127,7 +127,8 @@ export function useArrayData(key, userOptions) {
         store.filter = {};
         if (params) store.userParams = Object.assign({}, params);
 
-        await fetch({ append: false });
+        const response = await fetch({ append: false });
+        return response;
     }
 
     async function addFilter({ filter, params }) {
diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
index 8f0aa9e07..aee6174a3 100644
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -73,7 +73,6 @@ const setData = (entity) => {
             <ZoneDescriptorMenuItems :zone="entity" />
         </template> -->
         <template #body="{ entity }">
-            {{ console.log('entity', entity) }}
             <VnLv :label="t('summary.agency')" :value="entity.agencyMode.name" />
             <VnLv :label="t('summary.closeHour')" :value="toTimeFormat(entity.hour)" />
             <VnLv :label="t('summary.travelingDays')" :value="entity.travelingDays" />
diff --git a/src/pages/Zone/ZoneClosingTable.vue b/src/pages/Zone/ZoneClosingTable.vue
index ec8ad48c6..ce0c91af7 100644
--- a/src/pages/Zone/ZoneClosingTable.vue
+++ b/src/pages/Zone/ZoneClosingTable.vue
@@ -15,8 +15,9 @@ const { viewSummary } = useSummaryDialog();
 
 defineProps({
     rows: {
-        type: Number,
+        type: Array,
         required: true,
+        default: () => [],
     },
 });
 
diff --git a/src/pages/Zone/ZoneDeliveryCalendar.vue b/src/pages/Zone/ZoneDeliveryCalendar.vue
index 7403d86a3..74f4f0a04 100644
--- a/src/pages/Zone/ZoneDeliveryCalendar.vue
+++ b/src/pages/Zone/ZoneDeliveryCalendar.vue
@@ -20,10 +20,6 @@ const props = defineProps({
         type: Number,
         required: true,
     },
-    events: {
-        type: Object,
-        default: null,
-    },
     monthDate: {
         type: Object,
         default: null,
diff --git a/src/pages/Zone/ZoneDeliveryDays.vue b/src/pages/Zone/ZoneDeliveryDays.vue
index 3535eefec..872b62184 100644
--- a/src/pages/Zone/ZoneDeliveryDays.vue
+++ b/src/pages/Zone/ZoneDeliveryDays.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ZoneDeliveryPanel from './ZoneDeliveryPanel.vue';
@@ -7,6 +7,7 @@ import ZoneDeliveryCalendar from './ZoneDeliveryCalendar.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -22,6 +23,9 @@ const days = ref({});
 const exclusions = ref({});
 const geoExclusions = ref({});
 const events = ref([]);
+const { store } = useArrayData('ZoneDeliveryDays', {
+    url: 'Zones/getEvents',
+});
 
 const refreshEvents = () => {
     days.value = {};
@@ -133,6 +137,14 @@ const data = computed({
     },
 });
 
+watch(
+    () => store.data,
+    (value) => {
+        data.value = value;
+    },
+    { immediate: true }
+);
+
 const getMonthNameAndYear = (date) => {
     const monthName = weekdayStore.getLocaleMonths[date.getMonth()].locale;
     const year = date.getFullYear();
@@ -184,7 +196,7 @@ onMounted(async () => {
     </template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <ZoneDeliveryPanel @on-fetch-events="($event) => (data = $event)" />
+            <ZoneDeliveryPanel />
         </QScrollArea>
     </QDrawer>
     <QPage class="q-pa-md flex justify-center">
diff --git a/src/pages/Zone/ZoneDeliveryPanel.vue b/src/pages/Zone/ZoneDeliveryPanel.vue
index ff2a4c5d5..9b307c6ed 100644
--- a/src/pages/Zone/ZoneDeliveryPanel.vue
+++ b/src/pages/Zone/ZoneDeliveryPanel.vue
@@ -5,13 +5,13 @@ 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 emit = defineEmits(['onFetchEvents']);
 
 const deliveryMethodFk = ref(null);
 const postcodesOptions = ref([]);
@@ -26,6 +26,10 @@ const agencyFilter = ref({
     limit: 30,
 });
 
+const arrayData = useArrayData('ZoneDeliveryDays', {
+    url: 'Zones/getEvents',
+});
+
 const fetchDeliveryMethods = async (filter) => {
     try {
         const params = { filter: JSON.stringify(filter) };
@@ -62,22 +66,32 @@ const fetchAgencyModes = async (filter) => {
     }
 };
 
-const fetchData = async () => {
+const fetchData = async (params) => {
     try {
-        const params = { deliveryMethodFk: deliveryMethodFk.value, ...formData };
-        const { data } = await axios.get('Zones/getEvents', { params });
-        if (!data.events || !data.events.length) {
+        const { data } = params
+            ? await arrayData.applyFilter({
+                  params,
+              })
+            : await arrayData.fetch({ append: false });
+        if (!data.events || !data.events.length)
             notify(t('deliveryPanel.noEventsWarning'), 'warning');
-            return;
-        }
-        emit('onFetchEvents', data);
     } 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';
+    await fetchData();
+    if (arrayData?.store?.userParams && arrayData?.store?.userParams) {
+        formData.geoFk = arrayData.store?.userParams?.geoFk;
+        formData.agencyModeFk = arrayData.store?.userParams?.agencyModeFk;
+    }
 });
 </script>
 
@@ -88,7 +102,7 @@ onMounted(async () => {
         @on-fetch="(data) => (postcodesOptions = data)"
         auto-load
     />
-    <QForm @submit="fetchData()" class="q-pa-md">
+    <QForm @submit="onSubmit()" class="q-pa-md">
         <div class="column q-gutter-y-sm">
             <QRadio
                 v-model="deliveryMethodFk"
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
index 61eff5cb2..fb0d7436f 100644
--- a/src/pages/Zone/locale/en.yml
+++ b/src/pages/Zone/locale/en.yml
@@ -51,6 +51,6 @@ zoneClosingTable:
     name: Name
     agency: Agency
     closing: Closing
-    price: Precio
+    price: Price
     preview: Preview
     zones: Zones
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index 7f5df416c..742764e3f 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -46,10 +46,11 @@ deliveryPanel:
     warehouse: Almacén
     query: Consultar
     noEventsWarning: No hay servicio para la zona especificada
-ZoneClosingTable:
+zoneClosingTable:
     id: Id
     name: Nombre
     agency: Agencia
     closing: Cierre
+    preview: Vista previa
     price: Precio
     zones: Zonas

From f3a5ebbcec8cfdd3eb1fedcd4b0c336c223e21f3 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 15 May 2024 10:27:45 -0300
Subject: [PATCH 3/6] Bug fix

---
 src/pages/Zone/ZoneDeliveryDays.vue  | 7 +++++--
 src/pages/Zone/ZoneDeliveryPanel.vue | 8 +++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/pages/Zone/ZoneDeliveryDays.vue b/src/pages/Zone/ZoneDeliveryDays.vue
index 872b62184..d6ce70f6d 100644
--- a/src/pages/Zone/ZoneDeliveryDays.vue
+++ b/src/pages/Zone/ZoneDeliveryDays.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ZoneDeliveryPanel from './ZoneDeliveryPanel.vue';
@@ -23,9 +23,10 @@ const days = ref({});
 const exclusions = ref({});
 const geoExclusions = ref({});
 const events = ref([]);
-const { store } = useArrayData('ZoneDeliveryDays', {
+const arrayData = useArrayData('ZoneDeliveryDays', {
     url: 'Zones/getEvents',
 });
+const { store } = arrayData;
 
 const refreshEvents = () => {
     days.value = {};
@@ -174,6 +175,8 @@ onMounted(async () => {
     date.value = initialDate;
     weekdayStore.initStore();
 });
+
+onUnmounted(() => arrayData.destroy());
 </script>
 
 <template>
diff --git a/src/pages/Zone/ZoneDeliveryPanel.vue b/src/pages/Zone/ZoneDeliveryPanel.vue
index 9b307c6ed..1295bb63d 100644
--- a/src/pages/Zone/ZoneDeliveryPanel.vue
+++ b/src/pages/Zone/ZoneDeliveryPanel.vue
@@ -87,11 +87,9 @@ const onSubmit = async () => {
 
 onMounted(async () => {
     deliveryMethodFk.value = 'delivery';
-    await fetchData();
-    if (arrayData?.store?.userParams && arrayData?.store?.userParams) {
-        formData.geoFk = arrayData.store?.userParams?.geoFk;
-        formData.agencyModeFk = arrayData.store?.userParams?.agencyModeFk;
-    }
+    formData.geoFk = arrayData.store?.userParams?.geoFk;
+    formData.agencyModeFk = arrayData.store?.userParams?.agencyModeFk;
+    if (formData.geoFk || formData.agencyModeFk) await fetchData();
 });
 </script>
 

From 5677a1af1b873bf85aa1cd677d1cdd99207f1f2b Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 15 May 2024 10:31:33 -0300
Subject: [PATCH 4/6] remove unused onMounted

---
 src/pages/Zone/ZoneDeliveryCalendar.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/Zone/ZoneDeliveryCalendar.vue b/src/pages/Zone/ZoneDeliveryCalendar.vue
index 74f4f0a04..c7c7fbd99 100644
--- a/src/pages/Zone/ZoneDeliveryCalendar.vue
+++ b/src/pages/Zone/ZoneDeliveryCalendar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { date } from 'quasar';
 
@@ -104,8 +104,6 @@ const isToday = (timestamp) => {
 const calendarHeaderTitle = computed(() => {
     return `${weekdayStore.getLocaleMonths[props.month - 1].locale} ${props.year}`;
 });
-
-onMounted(() => {});
 </script>
 
 <template>

From dc597f73e25b04b17fc9cad0f5de691ca40b10d8 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 17 May 2024 09:50:18 +0200
Subject: [PATCH 5/6] fix: style

---
 src/components/ui/QCalendarMonthWrapper.vue | 2 +-
 src/pages/Zone/ZoneDeliveryCalendar.vue     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/QCalendarMonthWrapper.vue b/src/components/ui/QCalendarMonthWrapper.vue
index 24255ea1a..3ecea89c2 100644
--- a/src/components/ui/QCalendarMonthWrapper.vue
+++ b/src/components/ui/QCalendarMonthWrapper.vue
@@ -108,7 +108,7 @@ const containerClasses = computed(() => {
         font-size: 13px;
 
         &:hover {
-            background-color: var(--vn-accent-color);
+            background-color: var(--vn-label-color);
             cursor: pointer;
         }
     }
diff --git a/src/pages/Zone/ZoneDeliveryCalendar.vue b/src/pages/Zone/ZoneDeliveryCalendar.vue
index c7c7fbd99..96a62086e 100644
--- a/src/pages/Zone/ZoneDeliveryCalendar.vue
+++ b/src/pages/Zone/ZoneDeliveryCalendar.vue
@@ -174,6 +174,7 @@ const calendarHeaderTitle = computed(() => {
 
     &.--event {
         background-color: $positive;
+        color: black;
     }
 
     &.--excluded {

From 75f3d4f410ae0ebe28698e435c70bf9e5abaa2de Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 17 May 2024 14:32:39 +0200
Subject: [PATCH 6/6] fix: refs #6539 VnSelect use url

---
 src/components/common/VnSelect.vue   | 10 +++++--
 src/pages/Zone/ZoneDeliveryPanel.vue | 45 ++++++++--------------------
 2 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index e8083dec2..493f094ce 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -22,6 +22,10 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    optionFilter: {
+        type: String,
+        default: null,
+    },
     url: {
         type: String,
         default: '',
@@ -59,7 +63,7 @@ const $props = defineProps({
 const { t } = useI18n();
 const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
-const { optionLabel, optionValue, options, modelValue } = toRefs($props);
+const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
@@ -109,9 +113,9 @@ async function fetchFilter(val) {
     const { fields, sortBy, limit } = $props;
     let key = optionLabel.value;
 
-    if (new RegExp(/\d/g).test(val)) key = optionValue.value;
+    if (new RegExp(/\d/g).test(val)) key = optionFilter.value ?? optionValue.value;
 
-    const where = { [key]: { like: `%${val}%` } };
+    const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
     return dataRef.value.fetch({ fields, where, order: sortBy, limit });
 }
 
diff --git a/src/pages/Zone/ZoneDeliveryPanel.vue b/src/pages/Zone/ZoneDeliveryPanel.vue
index 1295bb63d..c754d484f 100644
--- a/src/pages/Zone/ZoneDeliveryPanel.vue
+++ b/src/pages/Zone/ZoneDeliveryPanel.vue
@@ -14,17 +14,8 @@ const { t } = useI18n();
 const { notify } = useNotify();
 
 const deliveryMethodFk = ref(null);
-const postcodesOptions = ref([]);
-const agencyModesOptions = ref([]);
+const deliveryMethods = ref([]);
 const formData = reactive({});
-const agencyFilter = ref({
-    fields: ['id', 'name'],
-    where: {
-        deliveryMethodFk: null,
-    },
-    order: 'name ASC',
-    limit: 30,
-});
 
 const arrayData = useArrayData('ZoneDeliveryDays', {
     url: 'Zones/getEvents',
@@ -47,25 +38,11 @@ watch(
         if (val === 'pickUp') filter = { where: { code: 'PICKUP' } };
         else filter = { where: { code: { inq: ['DELIVERY', 'AGENCY'] } } };
 
-        const deliveryMethods = await fetchDeliveryMethods(filter);
-        agencyFilter.value.where = {
-            deliveryMethodFk: { inq: deliveryMethods },
-        };
-        await fetchAgencyModes(agencyFilter.value);
+        deliveryMethods.value = await fetchDeliveryMethods(filter);
     },
     { immediate: true }
 );
 
-const fetchAgencyModes = async (filter) => {
-    try {
-        const params = { filter: JSON.stringify(filter) };
-        const { data } = await axios.get('AgencyModes/isActive', { params });
-        agencyModesOptions.value = data;
-    } catch (err) {
-        console.error('Error fetching agency modes: ', err);
-    }
-};
-
 const fetchData = async (params) => {
     try {
         const { data } = params
@@ -94,12 +71,6 @@ onMounted(async () => {
 </script>
 
 <template>
-    <FetchData
-        url="Postcodes/location"
-        :filter="{ fields: ['geoFk', 'code', 'townFk'], order: 'code, townFk' }"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
     <QForm @submit="onSubmit()" class="q-pa-md">
         <div class="column q-gutter-y-sm">
             <QRadio
@@ -119,9 +90,12 @@ onMounted(async () => {
                 v-if="deliveryMethodFk === 'delivery'"
                 :label="t('deliveryPanel.postcode')"
                 v-model="formData.geoFk"
-                :options="postcodesOptions"
+                url="Postcodes/location"
+                :fields="['geoFk', 'code', 'townFk']"
+                sort-by="code, townFk"
                 option-value="geoFk"
                 option-label="code"
+                option-filter="code"
                 hide-selected
                 dense
                 outlined
@@ -148,7 +122,12 @@ onMounted(async () => {
                     )
                 "
                 v-model="formData.agencyModeFk"
-                :options="agencyModesOptions"
+                url="AgencyModes/isActive"
+                :fields="['id', 'name']"
+                :where="{
+                    deliveryMethodFk: { inq: deliveryMethods },
+                }"
+                sort-by="name ASC"
                 option-value="id"
                 option-label="name"
                 hide-selected