diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue index 71c9483..ac6cec8 100644 --- a/components/calendar/form/CreateEvent.vue +++ b/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() } diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue index 0ae0b5d..bcd9b15 100644 --- a/components/calendar/state/monthly/DayTile.vue +++ b/components/calendar/state/monthly/DayTile.vue @@ -146,7 +146,7 @@ const eventsNotDisplayed: ComputedRef = computed(() => eventsFo - + diff --git a/stores/EventStore.ts b/stores/EventStore.ts index 47c9785..b3294e9 100644 --- a/stores/EventStore.ts +++ b/stores/EventStore.ts @@ -187,6 +187,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => { * EVENT CREATION FUNCTIONS */ const lastActiveEvent = ref() + const isCreatingEvent = ref(false) + const isUpdatingEvent = ref(false) + const isDeletingEvent = ref(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,