From 4ddbfd9855b9c80f7fadbacb63ec6ea7179fbb58 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 3 Dec 2024 15:29:06 +0100
Subject: [PATCH] Changed organization for 2 mixed components

---
 components/calendar/Calendar.vue              |   4 +-
 components/calendar/dialog/DeleteEvent.vue    |  45 +++
 .../calendar/dialog/QuickCreateEvent.vue      |   2 +-
 components/calendar/dialog/UpdateEvent.vue    |  49 +++
 components/calendar/form/DeleteEvent.vue      |  90 ++---
 components/calendar/form/UpdateEvent.vue      | 323 ++++++++----------
 6 files changed, 265 insertions(+), 248 deletions(-)
 create mode 100644 components/calendar/dialog/DeleteEvent.vue
 create mode 100644 components/calendar/dialog/UpdateEvent.vue

diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index 2dd6b7f..37c312b 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -53,8 +53,8 @@ onMounted(() => {
       <component :is="currentViewComponent" />
 
       <CalendarSearch />
-      <CalendarFormUpdateEvent />
-      <CalendarFormDeleteEvent />
+      <CalendarDialogUpdateEvent />
+      <CalendarDialogDeleteEvent />
     </div>
   </div>
 </template>
diff --git a/components/calendar/dialog/DeleteEvent.vue b/components/calendar/dialog/DeleteEvent.vue
new file mode 100644
index 0000000..1e02d55
--- /dev/null
+++ b/components/calendar/dialog/DeleteEvent.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
+
+const isLoading = ref<boolean>(false)
+
+// Watch the popover state
+watch(isDeleteEventModalOpen, (hasOpened, _o) => {
+  if (hasOpened && lastActiveEvent.value) {
+    eventSkeleton.value = { ...lastActiveEvent.value }
+  }
+})
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing(e: Event): void {
+  if (isLoading.value) {
+    e.preventDefault()
+  }
+}
+</script>
+
+<template>
+  <UiAlertDialog v-model:open="isDeleteEventModalOpen">
+    <UiAlertDialogContent
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
+      class="min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="handleClosing"
+    >
+      <UiAlertDialogTitle>{{ $t('entity.calendar.event.deleteDialog.title') }}</UiAlertDialogTitle>
+
+      <UiAlertDialogDescription>
+        {{ $t('entity.calendar.event.deleteDialog.subtitle') }}
+      </UiAlertDialogDescription>
+
+      <CalendarFormDeleteEvent />
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>
diff --git a/components/calendar/dialog/QuickCreateEvent.vue b/components/calendar/dialog/QuickCreateEvent.vue
index ac202bd..3e487e7 100644
--- a/components/calendar/dialog/QuickCreateEvent.vue
+++ b/components/calendar/dialog/QuickCreateEvent.vue
@@ -19,7 +19,7 @@ function toggleDialog() {
   </UiButton>
 
   <UiDialog v-model:open="isDialogOpen">
-    <UiDialogContent>
+    <UiDialogContent class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950">
       <UiDialogTitle>
         {{ $t("entity.calendar.event.addSingle") }}
       </UiDialogTitle>
diff --git a/components/calendar/dialog/UpdateEvent.vue b/components/calendar/dialog/UpdateEvent.vue
new file mode 100644
index 0000000..46003e6
--- /dev/null
+++ b/components/calendar/dialog/UpdateEvent.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
+
+const isLoading = ref(false)
+
+// Watch the popover state
+watch(isEditEventModalOpen, (hasOpened, _o) => {
+  if (hasOpened && lastActiveEvent.value) {
+    eventSkeleton.value = { ...lastActiveEvent.value }
+  }
+})
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing(e: Event) {
+  if (isLoading.value) {
+    e.preventDefault()
+  }
+}
+</script>
+
+<template>
+  <UiDialog v-model:open="isEditEventModalOpen">
+    <UiDialogContent
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
+      class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="(e) => e.preventDefault()"
+    >
+      <header class="pl-8 grid gap-y-2">
+        <UiDialogTitle>
+          {{ $t('entity.calendar.event.editDialog.title') }}
+        </UiDialogTitle>
+
+        <UiDialogDescription>
+          {{ $t('entity.calendar.event.editDialog.subtitle') }}
+        </UiDialogDescription>
+      </header>
+
+      <CalendarFormUpdateEvent />
+    </UiDialogContent>
+  </UiDialog>
+</template>
diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index 065a4f5..f9e68f0 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -3,7 +3,7 @@ import { PhCircleNotch } from "@phosphor-icons/vue";
 import { useToast } from "~/components/ui/toast";
 
 const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendar()
-const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
+const { isDeleteEventModalOpen, eventSkeleton } = storeToRefs(useCalendar())
 
 const { toast } = useToast()
 const { t } = useI18n()
@@ -14,13 +14,6 @@ const formErrors = reactive<{ message: string | null }>({
   message: null
 })
 
-// Watch the popover state
-watch(isDeleteEventModalOpen, (hasOpened, _o) => {
-  if (hasOpened && lastActiveEvent.value) {
-    eventSkeleton.value = { ...lastActiveEvent.value }
-  }
-})
-
 async function handleAction(): Promise<void> {
   if (isLoading.value) return
 
@@ -48,17 +41,6 @@ async function handleAction(): Promise<void> {
   }
 }
 
-/**
- * Prevents the modal from closing if's still loading
- *
- * @param e The closing event (can be keydown or click)
- */
-function handleClosing(e: Event): void {
-  if (isLoading.value) {
-    e.preventDefault()
-  }
-}
-
 /**
  * Click on the cancel button
  *
@@ -71,53 +53,35 @@ function handleCancel(): void {
 </script>
 
 <template>
-  <UiAlertDialog v-model:open="isDeleteEventModalOpen">
-    <UiAlertDialogContent
-      :disable-outside-pointer-events="true"
-      :trap-focus="true"
-      class="min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
-      @escape-key-down="handleClosing"
-      @focus-outside="handleClosing"
-      @interact-outside="handleClosing"
-      @pointer-down-outside="handleClosing"
-    >
-      <UiAlertDialogTitle>{{ $t('entity.calendar.event.deleteDialog.title') }}</UiAlertDialogTitle>
+  <form @submit.prevent="handleAction">
+    <div class="grid grid-cols-2 gap-y-4">
+      <div class="text-red-500 ml-8">
+        <span class="text-sm">
+          {{ formErrors.message }}
+        </span>
+      </div>
+    </div>
 
-      <UiAlertDialogDescription>
-        {{ $t('entity.calendar.event.deleteDialog.subtitle') }}
-      </UiAlertDialogDescription>
+    <footer class="flex gap-2 justify-between">
+      <UiButton type="button" size="sm" variant="outline" @click="() => isDeleteEventModalOpen = false">
+        {{ $t('ui.action.back') }}
+      </UiButton>
 
-      <form @submit.prevent="handleAction">
-        <div class="grid grid-cols-2 gap-y-4">
-          <div class="text-red-500 ml-8">
-            <span class="text-sm">
-              {{ formErrors.message }}
-            </span>
-          </div>
-        </div>
-
-        <footer class="flex gap-2 justify-between">
-          <UiButton type="button" size="sm" variant="outline" @click="() => isDeleteEventModalOpen = false">
-            {{ $t('ui.action.back') }}
+      <div class="flex gap-2 justify-end">
+        <Transition name="fade-delay">
+          <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
+            {{ $t('ui.action.cancel') }}
           </UiButton>
+        </Transition>
 
-          <div class="flex gap-2 justify-end">
-            <Transition name="fade-delay">
-              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
-                {{ $t('ui.action.cancel') }}
-              </UiButton>
-            </Transition>
+        <UiButton size="sm" variant="destructive" :disabled="isLoading">
+          <Transition name="fade">
+            <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+          </Transition>
 
-            <UiButton size="sm" variant="destructive" :disabled="isLoading">
-              <Transition name="fade">
-                <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
-              </Transition>
-
-              {{ $t('ui.action.delete') }}
-            </UiButton>
-          </div>
-        </footer>
-      </form>
-    </UiAlertDialogContent>
-  </UiAlertDialog>
+          {{ $t('ui.action.delete') }}
+        </UiButton>
+      </div>
+    </footer>
+  </form>
 </template>
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 1f8615f..716cf4c 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -4,7 +4,7 @@ import { useToast } from "~/components/ui/toast";
 import type { APIError } from "~/models/Errors";
 
 const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
-const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
+const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
 
 const { toast } = useToast()
 const { t } = useI18n()
@@ -15,13 +15,6 @@ const formErrors = reactive<{ message: string | null }>({
   message: null
 })
 
-// Watch the popover state
-watch(isEditEventModalOpen, (hasOpened, _o) => {
-  if (hasOpened && lastActiveEvent.value) {
-    eventSkeleton.value = { ...lastActiveEvent.value }
-  }
-})
-
 async function handleAction() {
   if (isLoading.value) return
 
@@ -44,18 +37,6 @@ async function handleAction() {
   } finally {
     resetSkeleton()
     isLoading.value = false
-    isEditEventModalOpen.value = false
-  }
-}
-
-/**
- * Prevents the modal from closing if's still loading
- *
- * @param e The closing event (can be keydown or click)
- */
-function handleClosing(e: Event) {
-  if (isLoading.value) {
-    e.preventDefault()
   }
 }
 
@@ -71,174 +52,152 @@ function handleCancel() {
 </script>
 
 <template>
-  <UiDialog v-model:open="isEditEventModalOpen">
-    <UiDialogContent
-      :disable-outside-pointer-events="true"
-      :trap-focus="true"
-      class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
-      @escape-key-down="handleClosing"
-      @focus-outside="handleClosing"
-      @interact-outside="handleClosing"
-      @pointer-down-outside="(e) => e.preventDefault()"
-    >
-      <header class="pl-8 grid gap-y-2">
-        <UiDialogTitle>
-          {{ $t('entity.calendar.event.editDialog.title') }}
-        </UiDialogTitle>
+  <form @submit.prevent="handleAction">
+    <div class="grid grid-cols-2 gap-y-3">
+      <div class="col-span-2">
+        <div class="flex items-center gap-4">
+          <PhPencilSimpleLine size="20" weight="fill" />
 
-        <UiDialogDescription>
-          {{ $t('entity.calendar.event.editDialog.subtitle') }}
-        </UiDialogDescription>
-      </header>
-
-      <form @submit.prevent="handleAction">
-        <div class="grid grid-cols-2 gap-y-3">
-          <div class="col-span-2">
-            <div class="flex items-center gap-4">
-              <PhPencilSimpleLine size="20" weight="fill" />
-
-              <div class="grow">
-                <input
-                  id="new-event-title"
-                  v-model="eventSkeleton.title"
-                  type="text"
-                  name="new-event-title"
-                  required
-                  :placeholder="$t('entity.calendar.event.title')"
-                  :minlength="3"
-                  :maxlength="120"
-                  class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
-                >
-                <div class="mt-2 mb-1 text-xs opacity-50">
-                  {{ t('entity.calendar.event.patterns.title') }}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-span-2 my-2 ml-8">
-            <textarea
-              id="new-event-description"
-              v-model="eventSkeleton.description"
-              name="new-event-description"
-              :placeholder="$t('entity.addDescription')"
-              :maxlength="1200"
-              class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
-            />
+          <div class="grow">
+            <input
+              id="new-event-title"
+              v-model="eventSkeleton.title"
+              type="text"
+              name="new-event-title"
+              required
+              :placeholder="$t('entity.calendar.event.title')"
+              :minlength="3"
+              :maxlength="120"
+              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
+            >
             <div class="mt-2 mb-1 text-xs opacity-50">
-              {{ t('entity.calendar.event.patterns.description') }}
+              {{ t('entity.calendar.event.patterns.title') }}
             </div>
           </div>
-
-          <div class="col-span-2">
-            <div class="flex items-center gap-4">
-              <PhAlarm size="18" weight="fill" />
-
-              <CalendarInputRPGDate
-                v-model:model-value="eventSkeleton.startDate"
-                :placeholder="$t('entity.calendar.date.start')"
-                :initial-date="lastActiveEvent?.startDate"
-                :required="true"
-              />
-
-              <span>—</span>
-
-              <CalendarInputRPGDate
-                v-model:model-value="eventSkeleton.endDate"
-                :placeholder="$t('entity.calendar.date.end')"
-                :initial-date="lastActiveEvent?.endDate"
-              />
-            </div>
-          </div>
-
-          <div class="col-span-2">
-            <div class="flex items-center gap-4">
-              <PhTag size="18" weight="fill" />
-
-              <div class="w-1/2">
-                <CalendarInputEventCategory
-                  v-model="eventSkeleton.category"
-                  :placeholder="$t('entity.category.addPrimary')"
-                />
-              </div>
-            </div>
-          </div>
-
-          <!-- <div class="col-span-2">
-            <div class="flex items-center gap-4">
-              <PhTag size="18" weight="fill" />
-
-              <div class="w-1/2">
-                <CalendarInputEventCategories v-model="eventSkeleton.secondaryCategories" placeholder="Ajouter des catégories secondaires" />
-              </div>
-            </div>
-          </div> -->
-
-          <div class="col-span-2 mb-2">
-            <div class="flex items-center gap-4">
-              <PhMapPinArea size="18" weight="fill" />
-
-              <div class="grow">
-                <input
-                  id="new-event-location"
-                  v-model="eventSkeleton.location"
-                  type="text"
-                  name="new-event-location"
-                  :placeholder="$t('entity.calendar.event.addLocation')"
-                  :minlength="3"
-                  :maxlength="160"
-                  class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
-                >
-
-                <div class="mt-2 mb-1 text-xs opacity-50">
-                  {{ t('entity.calendar.event.patterns.location') }}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="col-span-2">
-            <div class="flex items-center gap-4">
-              <PhEye v-if="!eventSkeleton.hidden" size="18" weight="fill" />
-              <PhEyeClosed v-else size="18" />
-
-              <div class="flex items-center gap-x-2">
-                <UiSwitch id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
-                <UiLabel for="new-event-visibility">
-                  <template v-if="!eventSkeleton.hidden">
-                    {{ $t('entity.calendar.event.isPublic') }}
-                  </template>
-                  <template v-else>
-                    {{ $t('entity.calendar.event.isHidden') }}
-                  </template>
-                </UiLabel>
-              </div>
-            </div>
-          </div>
-
-          <div class="text-red-500 ml-8">
-            <span class="text-sm">
-              {{ formErrors.message }}
-            </span>
-          </div>
         </div>
+      </div>
 
-        <footer class="flex gap-2 justify-end">
-          <Transition name="fade-delay">
-            <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
-              {{ $t('ui.action.cancel') }}
-            </UiButton>
-          </Transition>
+      <div class="col-span-2 my-2 ml-8">
+        <textarea
+          id="new-event-description"
+          v-model="eventSkeleton.description"
+          name="new-event-description"
+          :placeholder="$t('entity.addDescription')"
+          :maxlength="1200"
+          class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
+        />
+        <div class="mt-2 mb-1 text-xs opacity-50">
+          {{ t('entity.calendar.event.patterns.description') }}
+        </div>
+      </div>
 
-          <UiButton size="sm" :disabled="isLoading">
-            <Transition name="fade">
-              <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
-            </Transition>
+      <div class="col-span-2">
+        <div class="flex items-center gap-4">
+          <PhAlarm size="18" weight="fill" />
 
-            {{ $t('ui.action.save') }}
-          </UiButton>
-        </footer>
-      </form>
-    </UiDialogContent>
-  </UiDialog>
+          <CalendarInputRPGDate
+            v-model:model-value="eventSkeleton.startDate"
+            :placeholder="$t('entity.calendar.date.start')"
+            :initial-date="lastActiveEvent?.startDate"
+            :required="true"
+          />
+
+          <span>—</span>
+
+          <CalendarInputRPGDate
+            v-model:model-value="eventSkeleton.endDate"
+            :placeholder="$t('entity.calendar.date.end')"
+            :initial-date="lastActiveEvent?.endDate"
+          />
+        </div>
+      </div>
+
+      <div class="col-span-2">
+        <div class="flex items-center gap-4">
+          <PhTag size="18" weight="fill" />
+
+          <div class="w-1/2">
+            <CalendarInputEventCategory
+              v-model="eventSkeleton.category"
+              :placeholder="$t('entity.category.addPrimary')"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- <div class="col-span-2">
+        <div class="flex items-center gap-4">
+          <PhTag size="18" weight="fill" />
+
+          <div class="w-1/2">
+            <CalendarInputEventCategories v-model="eventSkeleton.secondaryCategories" placeholder="Ajouter des catégories secondaires" />
+          </div>
+        </div>
+      </div> -->
+
+      <div class="col-span-2 mb-2">
+        <div class="flex items-center gap-4">
+          <PhMapPinArea size="18" weight="fill" />
+
+          <div class="grow">
+            <input
+              id="new-event-location"
+              v-model="eventSkeleton.location"
+              type="text"
+              name="new-event-location"
+              :placeholder="$t('entity.calendar.event.addLocation')"
+              :minlength="3"
+              :maxlength="160"
+              class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600 invalid:border-red-500"
+            >
+
+            <div class="mt-2 mb-1 text-xs opacity-50">
+              {{ t('entity.calendar.event.patterns.location') }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-span-2">
+        <div class="flex items-center gap-4">
+          <PhEye v-if="!eventSkeleton.hidden" size="18" weight="fill" />
+          <PhEyeClosed v-else size="18" />
+
+          <div class="flex items-center gap-x-2">
+            <UiSwitch id="new-event-visibility" v-model:checked="eventSkeleton.hidden" />
+            <UiLabel for="new-event-visibility">
+              <template v-if="!eventSkeleton.hidden">
+                {{ $t('entity.calendar.event.isPublic') }}
+              </template>
+              <template v-else>
+                {{ $t('entity.calendar.event.isHidden') }}
+              </template>
+            </UiLabel>
+          </div>
+        </div>
+      </div>
+
+      <div class="text-red-500 ml-8">
+        <span class="text-sm">
+          {{ formErrors.message }}
+        </span>
+      </div>
+    </div>
+
+    <footer class="flex gap-2 justify-end">
+      <Transition name="fade-delay">
+        <UiButton v-if="isLoading" type="button" size="sm" variant="destructive" @click.prevent="handleCancel">
+          {{ $t('ui.action.cancel') }}
+        </UiButton>
+      </Transition>
+
+      <UiButton size="sm" :disabled="isLoading">
+        <Transition name="fade">
+          <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+        </Transition>
+
+        {{ $t('ui.action.save') }}
+      </UiButton>
+    </footer>
+  </form>
 </template>