WIP

src/pages/Zone/Card/ZoneEventExclusionForm.vue

@@ -1 +1,171 @@
-<template>Zone event exclusion form</template>
+<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 ZoneLocationsTree from './ZoneLocationsTree.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import axios from 'axios';
+
+const props = defineProps({
+    date: {
+        type: Date,
+        required: true,
+        default: null,
+    },
+    event: {
+        type: Object,
+        default: null,
+    },
+    isNewMode: {
+        type: Boolean,
+        default: true,
+    },
+    isExclusion: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const emit = defineEmits(['onSubmit', 'closeForm']);
+
+const route = useRoute();
+const { t } = useI18n();
+const weekdayStore = useWeekdayStore();
+const { openConfirmationModal } = useVnConfirm();
+
+const isNew = computed(() => props.isNewMode);
+const dated = ref(null);
+
+const _excludeType = ref('all');
+const excludeType = computed({
+    get: () => _excludeType.value,
+    set: (val) => {
+        _excludeType.value = val;
+    },
+});
+
+const arrayData = useArrayData('ZoneEvents');
+
+const exclusionGeoCreate = async () => {
+    try {
+        console.log('exclusionGeoCreate');
+    } catch (err) {
+        console.error('Error creating exclusion geo: ', err);
+    }
+};
+
+const exclusionCreate = async () => {
+    try {
+        if (isNew.value)
+            await axios.post(`Zones/${route.params.id}/exclusions`, [
+                { dated: dated.value },
+            ]);
+        else
+            await axios.put(`Zones/${route.params.id}/exclusions/${props.event?.id}`, {
+                dated: dated.value,
+            });
+
+        await refetchEvents();
+    } catch (err) {
+        console.error('Error creating exclusion: ', err);
+    }
+};
+
+const onSubmit = async () => {
+    if (excludeType.value === 'all') exclusionCreate();
+    else exclusionGeoCreate();
+};
+
+const deleteEvent = async () => {
+    try {
+        if (!props.event) return;
+        await axios.delete(`Zones/${route.params.id}/exclusions/${props.event?.id}`);
+        await refetchEvents();
+    } catch (err) {
+        console.error('Error deleting event: ', err);
+    }
+};
+
+const closeForm = () => emit('closeForm');
+
+const refetchEvents = async () => {
+    await arrayData.refresh({ append: false });
+    closeForm();
+};
+
+onMounted(() => {
+    console.log('props.event', props.event);
+    if (props.event) {
+        dated.value = props.event?.dated;
+        excludeType.value = props.event?.type || 'all';
+    } else if (props.date) dated.value = props.date;
+});
+</script>
+
+<template>
+    <FormPopup
+        :title="
+            isNew
+                ? t('eventsExclusionForm.addExclusion')
+                : t('eventsExclusionForm.editExclusion')
+        "
+        @on-submit="onSubmit()"
+        :default-cancel-button="false"
+        :default-submit-button="false"
+    >
+        <template #form-inputs>
+            <VnRow class="row q-gutter-md q-mb-lg">
+                <VnInputDate :label="t('eventsInclusionForm.day')" v-model="dated" />
+            </VnRow>
+            <div class="column q-gutter-y-sm q-mb-md">
+                <QRadio
+                    v-model="excludeType"
+                    dense
+                    val="all"
+                    :label="t('eventsExclusionForm.all')"
+                />
+                <QRadio
+                    v-model="excludeType"
+                    dense
+                    val="specificLocations"
+                    :label="t('eventsExclusionForm.specificLocations')"
+                />
+            </div>
+        </template>
+        <template #custom-buttons>
+            <QBtn
+                :label="t('globals.cancel')"
+                color="primary"
+                flat
+                class="q-mr-sm"
+                v-close-popup
+            />
+            <QBtn
+                v-if="!isNew && isExclusion"
+                :label="t('globals.delete')"
+                color="primary"
+                flat
+                class="q-mr-sm"
+                @click="
+                    openConfirmationModal(
+                        t('eventsPanel.deleteTitle'),
+                        t('eventsPanel.deleteSubtitle'),
+                        () => deleteEvent()
+                    )
+                "
+            />
+            <QBtn
+                :label="isNew ? t('globals.add') : t('globals.save')"
+                type="submit"
+                color="primary"
+            />
+        </template>
+    </FormPopup>
+</template>

src/pages/Zone/Card/ZoneEventInclusionForm.vue

@@ -9,6 +9,7 @@ import FormPopup from 'components/FormPopup.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnWeekdayPicker from 'src/components/common/VnWeekdayPicker.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
+
 import { useArrayData } from 'src/composables/useArrayData';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import { useVnConfirm } from 'composables/useVnConfirm';
@@ -28,6 +29,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    isExclusion: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const emit = defineEmits(['onSubmit', 'closeForm']);
@@ -103,13 +108,10 @@ const refetchEvents = async () => {
 };
 
 onMounted(() => {
-    console.log('props.event', props.event);
     if (props.event) {
         eventInclusionFormData.value = { ...props.event };
         eventType.value = props.event?.type || 'day';
     } else if (props.date) eventInclusionFormData.value.dated = props.date;
-
-    console.log('eventInclusionFormData', eventInclusionFormData.value);
 });
 </script>
 
@@ -124,8 +126,6 @@ onMounted(() => {
     >
         <template #form-inputs>
             <div class="column q-gutter-y-sm q-mb-md">
-                <pre>{{ isNew }}</pre>
-
                 <QRadio
                     v-model="eventType"
                     dense
@@ -214,7 +214,7 @@ onMounted(() => {
                 v-close-popup
             />
             <QBtn
-                v-if="!isNew"
+                v-if="!isNew && !isExclusion"
                 :label="t('globals.delete')"
                 color="primary"
                 flat
@@ -235,20 +235,3 @@ onMounted(() => {
         </template>
     </FormPopup>
 </template>
-
-<i18n>
-en:
-    title: New bank entity
-    subtitle: Please, ensure you put the correct data!
-    name: Name
-    swift: Swift
-    country: Country
-    id: Entity code
-es:
-    title: Nueva entidad bancaria
-    subtitle: ¡Por favor, asegúrate de poner los datos correctos!
-    name: Nombre
-    swift: Swift
-    country: País
-    id: Código de la entidad
-</i18n>

src/pages/Zone/Card/ZoneEvents.vue

@@ -179,30 +179,17 @@ const step = (direction) => {
     date.value = _date;
 };
 
-const openEventIncludeForm = ({ date, isNewMode, event }) => {
+const openForm = ({ date, isNewMode, event, isExclusion }) => {
     zoneEventsFormProps.date = date;
     zoneEventsFormProps.isNewMode = isNewMode;
     zoneEventsFormProps.event = event;
+    zoneEventsFormProps.isExclusion = isExclusion;
     showZoneEventForm.value = true;
-    console.log('zoneEventsFormProps: ', zoneEventsFormProps);
-};
-
-const handleEventModeOpen = ({ date, isNewMode, event }) => {
-    if (formModeName.value === 'include')
-        openEventIncludeForm({ date, isNewMode, event });
-    else openEventExcludeForm({ date, isNewMode });
-};
-
-const openEventExcludeForm = ({ date, isNewMode }) => {
-    // zoneEventsFormProps.date = date;
-    // zoneEventsFormProps.isNewMode = isNewMode;
-    showZoneEventForm.value = true;
-    // console.log('zoneEventsFormProps: ', zoneEventsFormProps);
 };
 
 const onZoneEventFormClose = () => {
     showZoneEventForm.value = false;
-    zoneEventsFormProps.date = null;
+    zoneEventsFormProps.value = {};
 };
 
 onMounted(async () => {
@@ -243,7 +230,7 @@ onUnmounted(() => arrayData.destroy());
                 :last-day="lastDay"
                 :events="events"
                 v-model:formModeName="formModeName"
-                @open-zone-form="openEventIncludeForm"
+                @open-zone-form="openForm"
             />
         </QScrollArea>
     </QDrawer>
@@ -277,7 +264,7 @@ onUnmounted(() => arrayData.destroy());
                     :exclusions="exclusions"
                     :days-map="days"
                     :form-mode-name="formModeName"
-                    @open-zone-form="handleEventModeOpen"
+                    @open-zone-form="openForm"
                 />
             </div>
         </QCard>
@@ -287,7 +274,11 @@ onUnmounted(() => arrayData.destroy());
                 v-bind="zoneEventsFormProps"
                 @close-form="onZoneEventFormClose()"
             />
-            <ZoneEventExclusionForm v-else />
+            <ZoneEventExclusionForm
+                v-else
+                v-bind="zoneEventsFormProps"
+                @close-form="onZoneEventFormClose()"
+            />
         </QDialog>
     </QPage>
 </template>

src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -0,0 +1,215 @@
+<script setup>
+import { onMounted, ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { useState } from 'src/composables/useState';
+import axios from 'axios';
+import { useArrayData } from 'composables/useArrayData';
+
+const { t } = useI18n();
+const route = useRoute();
+const state = useState();
+
+const treeRef = ref();
+const expanded = ref([]);
+
+const arrayData = useArrayData('ZoneLocations', {
+    url: `Zones/${route.params.id}/getLeaves`,
+});
+const { store } = arrayData;
+const storeData = computed(() => store.data);
+
+const nodes = ref([
+    { id: null, name: t('zoneLocations.locations'), sons: true, children: [{}] },
+]);
+
+const previousExpandedNodes = ref(new Set());
+
+const onNodeExpanded = async (nodeKeysArray) => {
+    const nodeKeysSet = new Set(nodeKeysArray);
+    const lastNodeKey = nodeKeysArray.at(-1);
+    const wasExpanded = !previousExpandedNodes.value.has(lastNodeKey);
+
+    if (wasExpanded) await fetchNodeLeaves(lastNodeKey);
+    else {
+        const difference = new Set(
+            [...previousExpandedNodes.value].filter((x) => !nodeKeysSet.has(x))
+        );
+        const collapsedNode = Array.from(difference).pop();
+        const node = treeRef.value?.getNodeByKey(collapsedNode);
+        const allNodeIds = getNodeIds(node);
+        expanded.value = expanded.value.filter((id) => !allNodeIds.includes(id));
+    }
+
+    previousExpandedNodes.value = nodeKeysSet;
+};
+
+const formatNodeSelected = (node) => {
+    if (node.selected === 1) node.selected = true;
+    else if (node.selected === 0) node.selected = false;
+};
+
+const fetchNodeLeaves = async (nodeKey) => {
+    try {
+        const node = treeRef.value?.getNodeByKey(nodeKey);
+        if (!node || node.sons === 0) return;
+
+        const params = { parentId: node.id };
+        const response = await axios.get(`Zones/${route.params.id}/getLeaves`, {
+            params,
+        });
+        if (response.data) {
+            node.children = response.data.map((n) => {
+                const hasChildrens = n.sons > 0;
+                n.children = hasChildrens ? [{}] : null;
+                formatNodeSelected(n);
+
+                if (n.child && n.child.length > 0) {
+                    n.child.forEach((childNode) => {
+                        formatNodeSelected(childNode);
+                    });
+                }
+                return n;
+            });
+        }
+
+        state.set('Tree', node);
+    } catch (err) {
+        console.error('Error fetching department leaves', err);
+        throw new Error();
+    }
+};
+
+const onSelected = async (val, node) => {
+    try {
+        if (val === null) val = undefined;
+        const params = { geoId: node.id, isIncluded: val };
+        await axios.post(`Zones/${route.params.id}/toggleIsIncluded`, params);
+    } catch (err) {
+        console.error('Error updating included', err);
+    }
+};
+
+function getNodeIds(node) {
+    let ids = [];
+    if (node.id) ids.push(node.id);
+
+    const children = node.childs || node.children;
+    if (children) {
+        children.forEach((child) => {
+            ids = ids.concat(getNodeIds(child));
+        });
+    }
+    return ids;
+}
+
+watch(storeData, async (val) => {
+    // Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar
+    nodes.value[0].children = [...val];
+    const fetchedNodeKeys = val.flatMap(getNodeIds);
+    state.set('Tree', [...fetchedNodeKeys]);
+    for (let n of state.get('Tree')) {
+        await fetchNodeLeaves(n);
+    }
+    expanded.value = [null, 1, ...fetchedNodeKeys];
+});
+
+onMounted(async () => {
+    if (store.userParams?.search) {
+        await arrayData.fetch({ append: false });
+        return;
+    }
+    const stateTree = state.get('Tree');
+    const tree = stateTree ? [...state.get('Tree'), 1] : [null, 1];
+    const lastStateTree = state.get('TreeState');
+    if (tree) {
+        for (let n of tree) {
+            await fetchNodeLeaves(n);
+        }
+        expanded.value = tree;
+
+        if (lastStateTree) {
+            tree.push(lastStateTree);
+            await fetchNodeLeaves(lastStateTree);
+        }
+    }
+
+    setTimeout(() => {
+        if (lastStateTree) {
+            document.getElementById(lastStateTree).scrollIntoView();
+        }
+    }, 1000);
+});
+</script>
+
+<template>
+    <QCard class="full-width" style="max-width: 800px">
+        <QTree
+            ref="treeRef"
+            :nodes="nodes"
+            node-key="id"
+            label-key="name"
+            v-model:expanded="expanded"
+            @update:expanded="onNodeExpanded($event)"
+            :default-expand-all="true"
+        >
+            <template #default-header="{ node }">
+                <div
+                    :id="node.id"
+                    class="qtr row justify-between full-width q-pr-md cursor-pointer"
+                >
+                    <span v-if="!node.id">{{ node.name }}</span>
+                    <QCheckbox
+                        v-else
+                        v-model="node.selected"
+                        :label="node.name"
+                        @update:model-value="($event) => onSelected($event, node)"
+                        toggle-indeterminate
+                        color="transparent"
+                        :class="[
+                            'checkbox',
+                            node.selected
+                                ? '--checked'
+                                : node.selected == false
+                                ? '--unchecked'
+                                : '--indeterminate',
+                        ]"
+                    />
+                </div>
+            </template>
+        </QTree>
+    </QCard>
+</template>
+
+<style lang="scss">
+.checkbox {
+    &.--checked {
+        .q-checkbox__bg {
+            border: 1px solid $info !important;
+        }
+        .q-checkbox__svg {
+            color: white !important;
+            background-color: $info !important;
+        }
+    }
+
+    &.--unchecked {
+        .q-checkbox__bg {
+            border: 1px solid $negative !important;
+        }
+        .q-checkbox__svg {
+            background-color: $negative !important;
+        }
+    }
+
+    &.--indeterminate {
+        .q-checkbox__bg {
+            border: 1px solid $white !important;
+        }
+        .q-checkbox__svg {
+            color: transparent !important;
+        }
+    }
+}
+</style>

src/pages/Zone/ZoneDeliveryCalendar.vue

@@ -93,6 +93,12 @@ const getEventByTimestamp = ({ year, month, day }) => {
     );
 };
 
+const eventIsAnyExclusion = ({ year, month, day }) => {
+    if (!event) return false;
+    const stamp = new Date(year, month - 1, day).getTime();
+    return !!props.exclusions[stamp] || !!props.geoExclusions[stamp];
+};
+
 const getEventAttrs = ({ year, month, day }) => {
     const stamp = new Date(year, month - 1, day).getTime();
 
@@ -128,6 +134,7 @@ const handleDateClick = (timestamp) => {
         date,
         isNewMode: !event,
         event: event && event.length > 0 ? event[0] : null,
+        isExclusion: eventIsAnyExclusion(timestamp),
     });
 };
 </script>

src/pages/Zone/locale/en.yml

@@ -81,6 +81,7 @@ eventsPanel:
     deleteSubtitle: Are you sure you want to continue?
 eventsExclusionForm:
     addExclusion: Add exclusion
+    editExclusion: Edit exclusion
     day: Day
     all: All
     specificLocations: Specific locations

src/pages/Zone/locale/es.yml

@@ -83,6 +83,7 @@ eventsPanel:
     deleteSubtitle: ¿Seguro que quieres continuar?
 eventsExclusionForm:
     addExclusion: Añadir exclusión
+    editExclusion: Editar exclusión
     day: Día
     all: Todo
     specificLocations: Localizaciones concretas