several changes

src/components/common/VnWeekdayPicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { computed } from 'vue';
 
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 
@@ -14,12 +14,12 @@ const emit = defineEmits(['update:wdays']);
 
 const weekdayStore = useWeekdayStore();
 
-const selectedWDays = ref(props.wdays);
+const selectedWDays = computed({
+    get: () => props.wdays,
+    set: (value) => emit('update:wdays', value),
+});
 
-const toggleDay = (index) => {
-    selectedWDays.value[index] = !selectedWDays.value[index];
-    emit('update:wdays', selectedWDays.value);
-};
+const toggleDay = (index) => (selectedWDays.value[index] = !selectedWDays.value[index]);
 </script>
 
 <template>

src/pages/Zone/Card/ZoneEventExclusionForm.vue

@@ -67,7 +67,7 @@ const exclusionGeoCreate = async () => {
             await axios.post('Zones/exclusionGeo', params);
         } else {
             const params = {
-                zoneExclusionFk: props.event?.id,
+                zoneExclusionFk: props.event?.zoneExclusionFk,
                 geoIds: tickedNodes.value,
             };
             await axios.post('Zones/updateExclusionGeo', params);
@@ -103,9 +103,8 @@ const onSubmit = async () => {
 const deleteEvent = async () => {
     try {
         if (!props.event) return;
-        await axios.delete(
-            `Zones/${route.params.id}/exclusions/${props.event?.zoneExclusionFk}`
-        );
+        const exclusionId = props.event?.zoneExclusionFk || props.event?.id;
+        await axios.delete(`Zones/${route.params.id}/exclusions/${exclusionId}`);
         await refetchEvents();
     } catch (err) {
         console.error('Error deleting event: ', err);
@@ -120,6 +119,7 @@ const refetchEvents = async () => {
 };
 
 onMounted(() => {
+    console.log('event.eventType: ', props.eventType);
     if (props.event) {
         dated.value = props.event?.dated;
         excludeType.value =
@@ -160,9 +160,9 @@ onMounted(() => {
             </div>
             <div v-if="excludeType === 'specificLocations'">
                 <ZoneLocationsTree
-                    :toggle-indeterminate="false"
                     :root-label="t('eventsExclusionForm.rootTreeLabel')"
                     v-model:tickedNodes="tickedNodes"
+                    show-search-bar
                 >
                     <template #content="{ node }">
                         <span>{{ node.name }}</span>

src/pages/Zone/Card/ZoneEventInclusionForm.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import VnInput from 'src/components/common/VnInput.vue';
 import { useRoute } from 'vue-router';
 
 import VnRow from 'components/ui/VnRow.vue';
@@ -9,6 +8,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 VnInput from 'src/components/common/VnInput.vue';
 
 import { useArrayData } from 'src/composables/useArrayData';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
@@ -43,7 +43,7 @@ const weekdayStore = useWeekdayStore();
 const { openConfirmationModal } = useVnConfirm();
 
 const isNew = computed(() => props.isNewMode);
-const eventInclusionFormData = ref({});
+const eventInclusionFormData = ref({ wdays: [] });
 
 const _inclusionType = ref('indefinitely');
 const inclusionType = computed({
@@ -217,7 +217,7 @@ onMounted(() => {
                 v-close-popup
             />
             <QBtn
-                v-if="!isNew && isExclusion === 'event'"
+                v-if="!isNew && eventType === 'event'"
                 :label="t('globals.delete')"
                 color="primary"
                 flat

src/pages/Zone/Card/ZoneEventsPanel.vue

@@ -96,12 +96,13 @@ const deleteEvent = async (id) => {
     }
 };
 
-const openIncludeForm = (event) => {
+const openInclusionForm = (event) => {
     formName.value = 'include';
     emit('openZoneForm', {
         date: event.dated,
         event,
         isNewMode: false,
+        eventType: 'event',
     });
 };
 
@@ -135,7 +136,7 @@ onMounted(async () => {
         }}</span>
         <QList>
             <QItem v-for="(event, index) in events" :key="index" class="event-card">
-                <QItemSection left @click="openIncludeForm(event)">
+                <QItemSection left @click="openInclusionForm(event)">
                     <div v-if="event.type == 'day'" class="q-mb-xs">
                         {{ toDateFormat(event.dated) }}
                     </div>
@@ -173,7 +174,7 @@ onMounted(async () => {
                         <span class="color-vn-text"> {{ dashIfEmpty(event.m3Max) }}</span>
                     </span>
                 </QItemSection>
-                <QItemSection side @click="openIncludeForm(event)">
+                <QItemSection side @click="openInclusionForm(event)">
                     <QBtn
                         icon="delete"
                         flat

src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -3,6 +3,8 @@ import { onMounted, ref, computed, watch, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
+import VnInput from 'src/components/common/VnInput.vue';
+
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
 import { useArrayData } from 'composables/useArrayData';
@@ -16,6 +18,10 @@ const props = defineProps({
         type: Array,
         default: () => [],
     },
+    showSearchBar: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const emit = defineEmits(['update:tickedNodes']);
@@ -131,17 +137,20 @@ watch(storeData, async (val) => {
             formatNodeSelected(n);
         });
     } else {
-        for (let n of state.get('Tree')) {
-            await fetchNodeLeaves(n);
-        }
+        if (!props.showSearchBar)
+            for (let n of state.get('Tree')) await fetchNodeLeaves(n);
         expanded.value = [null, ...fetchedNodeKeys];
     }
     previousExpandedNodes.value = new Set(expanded.value);
 });
 
+const reFetch = async () => {
+    await arrayData.fetch({ append: false });
+};
+
 onMounted(async () => {
     if (store.userParams?.search) {
-        await arrayData.fetch({ append: false });
+        await reFetch();
         return;
     }
     const stateTree = state.get('Tree');
@@ -174,6 +183,16 @@ onUnmounted(() => {
 </script>
 
 <template>
+    <VnInput
+        v-if="showSearchBar"
+        v-model="store.userParams.search"
+        :placeholder="t('globals.search')"
+        @keydown.enter.prevent="reFetch()"
+    >
+        <template #prepend>
+            <QIcon class="cursor-pointer" name="search" />
+        </template>
+    </VnInput>
     <QTree
         ref="treeRef"
         :nodes="nodes"

src/pages/Zone/ZoneCalendarGrid.vue

@@ -9,7 +9,7 @@ import { useArrayData } from 'src/composables/useArrayData';
 
 const props = defineProps({
     dataKey: {
-        type: Number,
+        type: String,
         required: true,
     },
 });