From 245b46661af891e3c9cd642bb396ae106f994bea Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 24 Aug 2024 21:38:15 +0200
Subject: [PATCH] Added loading state to create calendar form

---
 components/calendar/dialog/Create.vue |  6 +++---
 components/calendar/form/Create.vue   | 26 +++++++++++++++++++++-----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/components/calendar/dialog/Create.vue b/components/calendar/dialog/Create.vue
index b50abe2..44c6653 100644
--- a/components/calendar/dialog/Create.vue
+++ b/components/calendar/dialog/Create.vue
@@ -15,7 +15,7 @@ function onChangedName(newName: string) {
 
 const emit = defineEmits(['on-close'])
 
-function handleCancel() {
+function handleClose() {
   emit('on-close')
 }
 </script>
@@ -34,11 +34,11 @@ function handleCancel() {
         </span>
       </UiAlertDialogTitle>
 
-      <UiButton size="icon" variant="ghost" class="absolute top-4 right-4" title="Fermer la fenêtre" @click="handleCancel">
+      <UiButton size="icon" variant="ghost" class="absolute top-4 right-4" title="Fermer la fenêtre" @click="handleClose">
         <PhX size="20" />
       </UiButton>
 
-      <CalendarFormCreate @on-changed-name="onChangedName" @on-cancel="handleCancel" />
+      <CalendarFormCreate @on-changed-name="onChangedName" @on-close="handleClose" />
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>
diff --git a/components/calendar/form/Create.vue b/components/calendar/form/Create.vue
index 2d1ca9d..76578e7 100644
--- a/components/calendar/form/Create.vue
+++ b/components/calendar/form/Create.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Calendar } from '~/models/CalendarConfig';
-import { PhAlarm, PhCalendarDots, PhWrench } from '@phosphor-icons/vue';
+import { PhAlarm, PhCalendarDots, PhCircleNotch, PhWrench } from '@phosphor-icons/vue';
 
 const defaultSkeleton: Calendar = { name: '', today: { day: 1, month: 0, year: 0 }, months: [], events: []}
 const calendarSkeleton = ref<Calendar>({ ...defaultSkeleton })
@@ -35,8 +35,19 @@ const validSkeletonGeneral = computed(() => calendarSkeleton.value.name)
 const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeletonMonths.value)
 
 /** Send the data to the store for validation */
+const isCreatingCalendar = ref<boolean>(false)
+
 async function handleSubmit() {
-  await $fetch(`/api/calendars/create`, { method: 'POST', body: {...calendarSkeleton.value, worldId: 1 } })
+  try {
+    isCreatingCalendar.value = true
+    await $fetch(`/api/calendars/create`, { method: 'POST', body: {...calendarSkeleton.value, worldId: 1 } })
+
+    emit('on-close')
+  } catch (err) {
+    console.log(err)
+  } finally {
+    isCreatingCalendar.value = false
+  }
 }
 
 /**
@@ -46,7 +57,7 @@ const emit = defineEmits<{
   // eslint-disable-next-line no-unused-vars
   (e: 'on-changed-name', calendarName: string): void
     // eslint-disable-next-line no-unused-vars
-  (e: 'on-cancel'): void
+  (e: 'on-close'): void
 }>()
 
 /** Hook to emit a debounced event for the changed skeleton name */
@@ -55,7 +66,7 @@ const handleNameChange = useDebounceFn(() => {
 }, 400)
 
 function handleFormCancel() {
-  emit('on-cancel')
+  emit('on-close')
 }
 </script>
 
@@ -107,7 +118,12 @@ function handleFormCancel() {
         <UiButton type="button" variant="destructive" @click="handleFormCancel">
           Annuler
         </UiButton>
-        <UiButton type="submit" :disabled="!validSkeleton">
+
+        <UiButton type="submit" :disabled="!validSkeleton || isCreatingCalendar">
+          <Transition name="fade">
+            <PhCircleNotch v-if="isCreatingCalendar" size="20" class="opacity-50 animate-spin"/>
+          </Transition>
+
           Créer
         </UiButton>
       </footer>