src/components/FormPopup.vue

@@ -74,7 +74,7 @@ const closeForm = () => {
                     :disabled="isLoading"
                     :loading="isLoading"
                 />
-                <slot name="customButtons" />
+                <slot name="custom-buttons" />
             </div>
         </QCard>
     </QForm>

src/i18n/locale/en.yml

@@ -17,6 +17,7 @@ globals:
     date: Date
     dataSaved: Data saved
     dataDeleted: Data deleted
+    delete: Delete
     search: Search
     changes: Changes
     dataCreated: Data created

src/i18n/locale/es.yml

@@ -17,6 +17,7 @@ globals:
     date: Fecha
     dataSaved: Datos guardados
     dataDeleted: Datos eliminados
+    delete: Eliminar
     search: Buscar
     changes: Cambios
     dataCreated: Datos creados

src/pages/Zone/Card/ZoneEventInclusionForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnInput from 'src/components/common/VnInput.vue';
 import { useRoute } from 'vue-router';
@@ -11,8 +11,8 @@ 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';
 import axios from 'axios';
-import { onMounted } from 'vue';
 
 const props = defineProps({
     date: {
@@ -30,11 +30,12 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['onSubmit']);
+const emit = defineEmits(['onSubmit', 'closeForm']);
 
 const route = useRoute();
 const { t } = useI18n();
 const weekdayStore = useWeekdayStore();
+const { openConfirmationModal } = useVnConfirm();
 
 const isNew = computed(() => props.isNewMode);
 const eventInclusionFormData = ref({});
@@ -77,25 +78,35 @@ const createEvent = async () => {
 
         await refetchEvents();
         emit('onSubmit');
-
-        // case 'delete':
-        //     return this.onDelete(this.selected.id).then(
-        //         (response) => response == 'accept'
-        //     );
     } catch (err) {
         console.error('Error creating event', err);
     }
 };
 
+const deleteEvent = async () => {
+    try {
+        if (!props.event) return;
+        await axios.delete(`Zones/${route.params.id}/events/${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) {
         eventInclusionFormData.value = { ...props.event };
-        eventType.value = props.event.type;
+        eventType.value = props.event?.type || 'day';
     } else if (props.date) eventInclusionFormData.value.dated = props.date;
 
     console.log('eventInclusionFormData', eventInclusionFormData.value);
@@ -107,8 +118,9 @@ onMounted(() => {
         :title="
             isNew ? t('eventsInclusionForm.addEvent') : t('eventsInclusionForm.editEvent')
         "
-        :custom-submit-button-label="isNew ? t('globals.save') : t('globals.add')"
         @on-submit="createEvent()"
+        :default-cancel-button="false"
+        :default-submit-button="false"
     >
         <template #form-inputs>
             <div class="column q-gutter-y-sm q-mb-md">
@@ -193,6 +205,34 @@ onMounted(() => {
                 />
             </VnRow>
         </template>
+        <template #custom-buttons>
+            <QBtn
+                :label="t('globals.cancel')"
+                color="primary"
+                flat
+                class="q-mr-sm"
+                v-close-popup
+            />
+            <QBtn
+                v-if="!isNew"
+                :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.save') : t('globals.add')"
+                type="submit"
+                color="primary"
+            />
+        </template>
     </FormPopup>
 </template>
 

src/pages/Zone/Card/ZoneEvents.vue

@@ -201,6 +201,7 @@ const openEventExcludeForm = ({ date, isNewMode }) => {
 };
 
 const onZoneEventFormClose = () => {
+    showZoneEventForm.value = false;
     zoneEventsFormProps.date = null;
 };
 
@@ -283,8 +284,8 @@ onUnmounted(() => arrayData.destroy());
         <QDialog v-model="showZoneEventForm" @hide="onZoneEventFormClose()">
             <ZoneEventInclusionForm
                 v-if="formModeName === 'include'"
-                @on-data-saved="refetch()"
                 v-bind="zoneEventsFormProps"
+                @close-form="onZoneEventFormClose()"
             />
             <ZoneEventExclusionForm v-else />
         </QDialog>

src/pages/Zone/Card/ZoneEventsPanel.vue

@@ -5,7 +5,6 @@ import { useRoute } from 'vue-router';
 
 import { useArrayData } from 'src/composables/useArrayData';
 import axios from 'axios';
-import useNotify from 'src/composables/useNotify.js';
 import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
 import { toCurrency } from 'filters/index';
 import { dashIfEmpty } from 'src/filters';
@@ -38,7 +37,6 @@ const props = defineProps({
 const emit = defineEmits(['openZoneForm', 'update:formModeName']);
 
 const { t } = useI18n();
-const { notify } = useNotify();
 const route = useRoute();
 const weekdayStore = useWeekdayStore();
 const { openConfirmationModal } = useVnConfirm();