Prevented other popovers from opening when an operation is underway

stores/EventStore.ts

@@ -187,6 +187,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    * EVENT CREATION FUNCTIONS
    */
   const lastActiveEvent = ref<CalendarEvent | null>()
+  const isCreatingEvent = ref<boolean>(false)
+  const isUpdatingEvent = ref<boolean>(false)
+  const isDeletingEvent = ref<boolean>(false)
+  const operationInProgress = computed(() => isCreatingEvent.value || isUpdatingEvent.value || isDeletingEvent.value)
   let abortController: AbortController | null = null
 
   /**
@@ -208,6 +212,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    */
   async function submitSkeleton() {
     abortController = new AbortController()
+    isCreatingEvent.value = true
 
     try {
       const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
@@ -217,17 +222,13 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
       console.log(err)
     } finally {
       abortController = null
-    }
-  }
-
-  function cancelLatestRequest() {
-    if (abortController) {
-      abortController.abort()
+      isCreatingEvent.value = false
     }
   }
 
   async function updateEventFromSkeleton() {
     abortController = new AbortController()
+    isUpdatingEvent.value = true
 
     try {
       const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
@@ -238,11 +239,13 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
       console.log(err)
     } finally {
       abortController = null
+      isUpdatingEvent.value = false
     }
   }
 
   async function deleteEventFromSkeleton() {
     abortController = new AbortController()
+    isDeletingEvent.value = true
 
     try {
       await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'DELETE', signal: abortController.signal })
@@ -253,6 +256,13 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
       console.log(err)
     } finally {
       abortController = null
+      isDeletingEvent.value = false
+    }
+  }
+
+  function cancelLatestRequest() {
+    if (abortController) {
+      abortController.abort()
     }
   }
 
@@ -263,6 +273,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     getRelativeEventFromDate,
     getRelativeEventFromEvent,
     cancelLatestRequest,
+    isCreatingEvent,
+    isUpdatingEvent,
+    isDeletingEvent,
+    operationInProgress,
     eventSkeleton,
     resetSkeleton,
     submitSkeleton,