Prevented other popovers from opening when an operation is underway

components/calendar/form/CreateEvent.vue

@@ -3,7 +3,7 @@ import type { RPGDate } from '~/models/Date';
 
 import { PhAlarm, PhCircleNotch, PhMapPinArea } from '@phosphor-icons/vue'
 
-const { eventSkeleton } = storeToRefs(useCalendarEvents())
+const { eventSkeleton, operationInProgress } = storeToRefs(useCalendarEvents())
 const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendarEvents()
 const popoverOpen = ref(false)
 const isLoading = ref(false)
@@ -21,6 +21,14 @@ const props = defineProps<{
  * Opens event creation's popover
  */
 function openEventCreatePopover() {
+  console.log(operationInProgress.value)
+  if (operationInProgress.value) {
+    popoverOpen.value = false
+    return
+  }
+
+  console.log('open still what ?')
+
   resetSkeleton()
 
   popoverOpen.value = true
@@ -55,7 +63,6 @@ async function handleSubmit() {
  * @param e The closing event (can be keydown or click)
  */
 function handleClosing(e: Event) {
-  console.log(e)
   if (isLoading.value) {
     e.preventDefault()
   }

components/calendar/state/monthly/DayTile.vue

@@ -146,7 +146,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
     </ClientOnly>
 
     <ClientOnly>
-      <CalendarFormCreateEvent :date btn-class="absolute inset-0 w-full h-full cursor-default z-0" />
+      <LazyCalendarFormCreateEvent :date btn-class="absolute inset-0 w-full h-full cursor-default z-0" />
     </ClientOnly>
   </div>
 </template>

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
-    }
+      isCreatingEvent.value = false
-  }
-
-  function cancelLatestRequest() {
-    if (abortController) {
-      abortController.abort()
     }
   }
 
   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,