Merge pull request '#7869: Added include and exclude event from list' (!1574) from 7869-ModifyZones into dev

Reviewed-on: #1574
Reviewed-by: Javi Gallego <jgallego@verdnatura.es>

src/pages/Zone/Card/ZoneEventExclusionForm.vue

@@ -1,16 +1,18 @@
 <script setup>
-import { ref, computed, onMounted, reactive } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
+import moment from 'moment';
 
 import VnRow from 'components/ui/VnRow.vue';
 import FormPopup from 'components/FormPopup.vue';
 import ZoneLocationsTree from './ZoneLocationsTree.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-
 import { useArrayData } from 'src/composables/useArrayData';
 import { useVnConfirm } from 'composables/useVnConfirm';
-import axios from 'axios';
+import { toDateFormat } from 'src/filters/date';
 
 const props = defineProps({
     date: {
@@ -34,18 +36,25 @@ const props = defineProps({
         type: Array,
         default: () => [],
     },
+    isMasiveEdit: {
+        type: Boolean,
+        default: false,
+    },
+    zoneIds: {
+        type: Array,
+        default: () => [],
+    },
 });
 
 const emit = defineEmits(['onSubmit', 'closeForm']);
-
+const quasar = useQuasar();
 const route = useRoute();
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 
 const isNew = computed(() => props.isNewMode);
-const dated = reactive(props.date);
+const dated = ref(props.date || Date.vnNew());
 const tickedNodes = ref();
-
 const _excludeType = ref('all');
 const excludeType = computed({
     get: () => _excludeType.value,
@@ -63,16 +72,46 @@ const exclusionGeoCreate = async () => {
         geoIds: tickedNodes.value,
     };
     await axios.post('Zones/exclusionGeo', params);
+    quasar.notify({
+        message: t('globals.dataSaved'),
+        type: 'positive',
+    });
     await refetchEvents();
 };
 
 const exclusionCreate = async () => {
-    const url = `Zones/${route.params.id}/exclusions`;
+    const defaultMonths = await axios.get('ZoneConfigs');
+    const nMonths = defaultMonths.data[0].defaultMonths;
     const body = {
-        dated,
+        dated: dated.value,
     };
-    if (isNew.value || props.event?.type) await axios.post(`${url}`, [body]);
-    else await axios.put(`${url}/${props.event?.id}`, body);
+    const zoneIds = props.zoneIds?.length ? props.zoneIds : [route.params.id];
+    for (const id of zoneIds) {
+        const url = `Zones/${id}/exclusions`;
+        let today = moment(dated.value);
+        let lastDay = today.clone().add(nMonths, 'months').endOf('month');
+
+        const { data } = await axios.get(`Zones/getEventsFiltered`, {
+            params: {
+                zoneFk: id,
+                started: today,
+                ended: lastDay,
+            },
+        });
+        const existsEvent = data.events.find(
+            (event) => toDateFormat(event.dated) === toDateFormat(dated.value),
+        );
+        if (existsEvent) {
+            await axios.delete(`Zones/${existsEvent?.zoneFk}/events/${existsEvent?.id}`);
+        }
+
+        if (isNew.value || props.event?.type) await axios.post(`${url}`, [body]);
+        else await axios.put(`${url}/${props.event?.id}`, body);
+    }
+    quasar.notify({
+        message: t('globals.dataSaved'),
+        type: 'positive',
+    });
     await refetchEvents();
 };
 
@@ -129,6 +168,7 @@ onMounted(() => {
                     :label="t('eventsExclusionForm.all')"
                 />
                 <QRadio
+                    v-if="!props.isMasiveEdit"
                     v-model="excludeType"
                     dense
                     val="specificLocations"

src/pages/Zone/Card/ZoneEventInclusionForm.vue

@@ -2,6 +2,13 @@
 import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+import { useQuasar } from 'quasar';
+import axios from 'axios';
+import moment from 'moment';
+
+import { useArrayData } from 'src/composables/useArrayData';
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import { useVnConfirm } from 'composables/useVnConfirm';
 
 import VnRow from 'components/ui/VnRow.vue';
 import FormPopup from 'components/FormPopup.vue';
@@ -9,11 +16,7 @@ import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnWeekdayPicker from 'src/components/common/VnWeekdayPicker.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-
-import { useArrayData } from 'src/composables/useArrayData';
-import { useWeekdayStore } from 'src/stores/useWeekdayStore';
-import { useVnConfirm } from 'composables/useVnConfirm';
-import axios from 'axios';
+import { toDateFormat } from 'src/filters/date';
 
 const props = defineProps({
     date: {
@@ -32,6 +35,14 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    isMasiveEdit: {
+        type: Boolean,
+        default: false,
+    },
+    zoneIds: {
+        type: Array,
+        default: () => [],
+    },
 });
 
 const emit = defineEmits(['onSubmit', 'closeForm']);
@@ -40,10 +51,10 @@ const route = useRoute();
 const { t } = useI18n();
 const weekdayStore = useWeekdayStore();
 const { openConfirmationModal } = useVnConfirm();
-
+const quasar = useQuasar();
 const isNew = computed(() => props.isNewMode);
 const eventInclusionFormData = ref({ wdays: [] });
-
+const dated = ref(props.date || Date.vnNew());
 const _inclusionType = ref('indefinitely');
 const inclusionType = computed({
     get: () => _inclusionType.value,
@@ -56,8 +67,12 @@ const inclusionType = computed({
 const arrayData = useArrayData('ZoneEvents');
 
 const createEvent = async () => {
+    const defaultMonths = await axios.get('ZoneConfigs');
+    const nMonths = defaultMonths.data[0].defaultMonths;
+
     eventInclusionFormData.value.weekDays = weekdayStore.toSet(
         eventInclusionFormData.value.wdays,
+        eventInclusionFormData.value.wdays,
     );
 
     if (inclusionType.value == 'day') eventInclusionFormData.value.weekDays = '';
@@ -68,14 +83,43 @@ const createEvent = async () => {
         eventInclusionFormData.value.ended = null;
     }
 
-    if (isNew.value)
-        await axios.post(`Zones/${route.params.id}/events`, eventInclusionFormData.value);
-    else
-        await axios.put(
-            `Zones/${route.params.id}/events/${props.event?.id}`,
-            eventInclusionFormData.value,
-        );
+    const zoneIds = props.zoneIds?.length ? props.zoneIds : [route.params.id];
+    for (const id of zoneIds) {
+        let today = eventInclusionFormData.value.dated
+            ? moment(eventInclusionFormData.value.dated)
+            : moment(dated.value);
+        let lastDay = today.clone().add(nMonths, 'months').endOf('month');
 
+        const { data } = await axios.get(`Zones/getEventsFiltered`, {
+            params: {
+                zoneFk: id,
+                started: today,
+                ended: lastDay,
+            },
+        });
+        const existsExclusion = data.exclusions.find(
+            (exclusion) =>
+                toDateFormat(exclusion.dated) ===
+                toDateFormat(eventInclusionFormData.value.dated),
+        );
+        if (existsExclusion) {
+            await axios.delete(
+                `Zones/${existsExclusion?.zoneFk}/exclusions/${existsExclusion?.id}`,
+            );
+        }
+
+        if (isNew.value)
+            await axios.post(`Zones/${id}/events`, eventInclusionFormData.value);
+        else
+            await axios.put(
+                `Zones/${id}/events/${props.event?.id}`,
+                eventInclusionFormData.value,
+            );
+    }
+    quasar.notify({
+        message: t('globals.dataSaved'),
+        type: 'positive',
+    });
     await refetchEvents();
     emit('onSubmit');
 };
@@ -97,9 +141,11 @@ const refetchEvents = async () => {
 
 onMounted(() => {
     if (props.event) {
+        dated.value = props.event?.dated;
         eventInclusionFormData.value = { ...props.event };
         inclusionType.value = props.event?.type || 'day';
     } else if (props.date) {
+        dated.value = props.date;
         eventInclusionFormData.value.dated = props.date;
         inclusionType.value = 'day';
     } else inclusionType.value = 'indefinitely';
@@ -125,6 +171,7 @@ onMounted(() => {
                     data-cy="ZoneEventInclusionDayRadio"
                 />
                 <QRadio
+                    v-if="!props.isMasiveEdit"
                     v-model="inclusionType"
                     dense
                     val="indefinitely"
@@ -132,6 +179,7 @@ onMounted(() => {
                     data-cy="ZoneEventInclusionIndefinitelyRadio"
                 />
                 <QRadio
+                    v-if="!props.isMasiveEdit"
                     v-model="inclusionType"
                     dense
                     val="range"

src/pages/Zone/Card/ZoneLocations.vue

@@ -34,9 +34,10 @@ const onSelected = async (val, node) => {
                             node.selected
                                 ? '--checked'
                                 : node.selected == false
-                                ? '--unchecked'
-                                : '--indeterminate',
+                                  ? '--unchecked'
+                                  : '--indeterminate',
                         ]"
+                        data-cy="ZoneLocationTreeCheckbox"
                     />
                 </template>
             </ZoneLocationsTree>

src/pages/Zone/ZoneCalendarGrid.vue

@@ -42,7 +42,7 @@ const refreshEvents = () => {
     days.value = {};
     if (!data.value) return;
 
-    let day = new Date(firstDay.value.getTime());
+    let day = new Date(firstDay?.value?.getTime());
 
     while (day <= lastDay.value) {
         let stamp = day.getTime();
@@ -156,7 +156,7 @@ watch(
     (value) => {
         data.value = value;
     },
-    { immediate: true }
+    { immediate: true },
 );
 
 const getMonthNameAndYear = (date) => {

src/pages/Zone/ZoneList.vue

@@ -14,7 +14,11 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputTime from 'src/components/common/VnInputTime.vue';
+
 import VnSection from 'src/components/common/VnSection.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import ZoneEventInclusionForm from './Card/ZoneEventInclusionForm.vue';
+import ZoneEventExclusionForm from './Card/ZoneEventExclusionForm.vue';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -24,6 +28,11 @@ const { openConfirmationModal } = useVnConfirm();
 const tableRef = ref();
 const warehouseOptions = ref([]);
 const dataKey = 'ZoneList';
+const selectedRows = ref([]);
+const hasSelectedRows = computed(() => selectedRows.value.length > 0);
+const openInclusionForm = ref();
+const showZoneEventForm = ref(false);
+const zoneIds = ref({});
 const tableFilter = {
     include: [
         {
@@ -191,6 +200,16 @@ const exprBuilder = (param, value) => {
             };
     }
 };
+
+function openForm(value, rows) {
+    zoneIds.value = rows.map((row) => row.id);
+    openInclusionForm.value = value;
+    showZoneEventForm.value = true;
+}
+
+const closeEventForm = () => {
+    showZoneEventForm.value = false;
+};
 </script>
 
 <template>
@@ -206,6 +225,28 @@ const exprBuilder = (param, value) => {
         }"
     >
         <template #body>
+            <VnSubToolbar>
+                <template #st-actions>
+                    <QBtnGroup style="column-gap: 10px">
+                        <QBtn
+                            color="primary"
+                            icon-right="event_available"
+                            :disable="!hasSelectedRows"
+                            @click="openForm(true, selectedRows)"
+                        >
+                            <QTooltip>{{ t('list.includeEvent') }}</QTooltip>
+                        </QBtn>
+                        <QBtn
+                            color="primary"
+                            icon-right="event_busy"
+                            :disable="!hasSelectedRows"
+                            @click="openForm(false, selectedRows)"
+                        >
+                            <QTooltip>{{ t('list.excludeEvent') }}</QTooltip>
+                        </QBtn>
+                    </QBtnGroup>
+                </template>
+            </VnSubToolbar>
             <div class="table-container">
                 <div class="column items-center">
                     <VnTable
@@ -220,6 +261,11 @@ const exprBuilder = (param, value) => {
                             formInitialData: {},
                         }"
                         table-height="85vh"
+                        v-model:selected="selectedRows"
+                        :table="{
+                            'row-key': 'id',
+                            selection: 'multiple',
+                        }"
                     >
                         <template #column-addressFk="{ row }">
                             {{ dashIfEmpty(formatRow(row)) }}
@@ -271,6 +317,21 @@ const exprBuilder = (param, value) => {
             </div>
         </template>
     </VnSection>
+    <QDialog v-model="showZoneEventForm" @hide="closeEventForm()">
+        <ZoneEventInclusionForm
+            v-if="openInclusionForm"
+            :event="'event'"
+            :is-masive-edit="true"
+            :zone-ids="zoneIds"
+            @close-form="closeEventForm"
+        />
+        <ZoneEventExclusionForm
+            v-else
+            :zone-ids="zoneIds"
+            :is-masive-edit="true"
+            @close-form="closeEventForm"
+        />
+    </QDialog>
 </template>
 
 <style lang="scss" scoped>

src/pages/Zone/locale/en.yml

@@ -25,6 +25,7 @@ list:
     agency: Agency
     close: Close
     price: Price
+    priceOptimum: Optimal price
     create: Create zone
     openSummary: Details
     searchZone: Search zones
@@ -37,6 +38,8 @@ list:
     createZone: Create zone
     zoneSummary: Summary
     addressFk: Address
+    includeEvent: Include event
+    excludeEvent: Exclude event
 create:
     name: Name
     closingHour: Closing hour

src/pages/Zone/locale/es.yml

@@ -39,6 +39,8 @@ list:
     createZone: Crear zona
     zoneSummary: Resumen
     addressFk: Consignatario
+    includeEvent: Incluir evento
+    excludeEvent: Excluir evento
 create:
     closingHour: Hora de cierre
     itemMaxSize: Medida máxima

src/stores/useWeekdayStore.js

@@ -77,14 +77,14 @@ export const useWeekdayStore = defineStore('weekdayStore', () => {
         const locales = {};
         for (let code of localeOrder.es) {
             const weekDay = weekdaysMap[code];
-            const locale = t(`weekdays.${weekdaysMap[code].code}`);
+            const locale = t(`weekdays.${weekDay?.code}`);
             const obj = {
                 ...weekDay,
                 locale,
                 localeChar: locale.substr(0, 1),
                 localeAbr: locale.substr(0, 3),
             };
-            locales[weekDay.code] = obj;
+            locales[weekDay?.code] = obj;
         }
         return locales;
     });

test/cypress/integration/zone/zoneCalendar.spec.js

@@ -1,11 +1,10 @@
 describe('ZoneCalendar', () => {
     const addEventBtn = '.q-page-sticky > div > .q-btn';
     const submitBtn = '.q-mt-lg > .q-btn--standard';
-    const deleteBtn = '[data-cy="ZoneEventsPanelDeleteBtn"]';
+    const deleteBtn = 'ZoneEventsPanelDeleteBtn';
 
     beforeEach(() => {
         cy.login('developer');
-        cy.viewport(1920, 1080);
         cy.visit(`/#/zone/13/events`);
     });
 
@@ -14,7 +13,7 @@ describe('ZoneCalendar', () => {
         cy.dataCy('ZoneEventInclusionDayRadio').click();
         cy.get('.q-card > :nth-child(5)').type('01/01/2001');
         cy.get(submitBtn).click();
-        cy.get(deleteBtn).click();
+        cy.dataCy(deleteBtn).click();
         cy.dataCy('VnConfirm_confirm').click();
     });
 
@@ -23,7 +22,7 @@ describe('ZoneCalendar', () => {
         cy.get('.flex > .q-gutter-x-sm > :nth-child(1)').click();
         cy.get('.flex > .q-gutter-x-sm > :nth-child(2)').click();
         cy.get(submitBtn).click();
-        cy.get(deleteBtn).click();
+        cy.dataCy(deleteBtn).click();
         cy.dataCy('VnConfirm_confirm').click();
     });
 
@@ -34,7 +33,7 @@ describe('ZoneCalendar', () => {
         cy.dataCy('From_inputDate').type('01/01/2001');
         cy.dataCy('To_inputDate').type('31/01/2001');
         cy.get(submitBtn).click();
-        cy.get(deleteBtn).click();
+        cy.dataCy(deleteBtn).click();
         cy.dataCy('VnConfirm_confirm').click();
     });
 

test/cypress/integration/zone/zoneDeliveryDays.spec.js

@@ -37,7 +37,6 @@ describe('ZoneDeliveryDays', () => {
                 cy.get('@focusedElement').blur();
             }
         });
-        cy.get('.q-menu').should('not.exist');
 
         cy.dataCy('ZoneDeliveryDaysAgencySelect').type(agency);
         cy.get('.q-menu .q-item').contains(agency).click();
@@ -49,7 +48,6 @@ describe('ZoneDeliveryDays', () => {
                 cy.get('@focusedElement').blur();
             }
         });
-        cy.get('.q-menu').should('not.exist');
 
         cy.get(submitForm).click();
         cy.wait('@events').then((interception) => {

test/cypress/integration/zone/zoneLocations.spec.js

@@ -1,26 +1,59 @@
-describe.skip('ZoneLocations', () => {
-    const data = {
-        Warehouse: { val: 'Warehouse One', type: 'select' },
-    };
-
-    const postalCode =
-        '[style=""] > :nth-child(1) > :nth-child(1) > :nth-child(2) > :nth-child(1) > :nth-child(1) > :nth-child(2) > :nth-child(1) > .q-tree__node--parent > .q-tree__node-collapsible > .q-tree__children';
-
+describe('ZoneLocations', () => {
+    const cp = 46680;
+    const searchIcon = '.router-link-active > .q-icon';
     beforeEach(() => {
-        cy.viewport(1280, 720);
         cy.login('developer');
         cy.visit(`/#/zone/2/location`);
     });
 
-    it('should show all locations on entry', () => {
+    it('should be able to search by postal code', () => {
         cy.get('.q-tree > :nth-child(1) > :nth-child(2) > :nth-child(1)')
-            .children()
-            .should('have.length', 9);
+            .should('exist')
+            .should('be.visible');
+
+        cy.intercept('GET', '**/api/Zones/2/getLeaves*', (req) => {
+            req.headers['cache-control'] = 'no-cache';
+            req.headers['pragma'] = 'no-cache';
+            req.headers['expires'] = '0';
+
+            req.on('response', (res) => {
+                delete res.headers['if-none-match'];
+                delete res.headers['if-modified-since'];
+            });
+        }).as('location');
+        cy.get('#searchbarForm').type(cp);
+        cy.get(searchIcon).click();
+        cy.wait('@location').then((interception) => {
+            const data = interception.response.body;
+            expect(data).to.include(cp);
+        });
     });
 
-    it('should be able to search by postal code', () => {
-        cy.get('#searchbarForm').type('46680');
-        cy.get('.router-link-active > .q-icon').click();
-        cy.get(postalCode).should('include.text', '46680');
+    it('should check, uncheck, and set a location to mixed state', () => {
+        cy.get('#searchbarForm').type(cp);
+        cy.get(searchIcon).click();
+
+        cy.get('.q-tree > :nth-child(1) > :nth-child(2) > :nth-child(1)')
+            .as('tree')
+            .within(() => {
+                cy.get('[data-cy="ZoneLocationTreeCheckbox"] > .q-checkbox__inner')
+                    .last()
+                    .as('lastCheckbox');
+
+                const verifyCheckboxState = (state) => {
+                    cy.get('@lastCheckbox')
+                        .parents('.q-checkbox')
+                        .should('have.attr', 'aria-checked', state);
+                };
+
+                cy.get('@lastCheckbox').click();
+                verifyCheckboxState('true');
+
+                cy.get('@lastCheckbox').click();
+                verifyCheckboxState('false');
+
+                cy.get('@lastCheckbox').click();
+                verifyCheckboxState('mixed');
+            });
     });
 });