From 99e478951dd012e2206b052ccb553f56b3df537b Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 24 Aug 2024 21:24:08 +0200
Subject: [PATCH] Added cancel action for dialog create

---
 components/calendar/dialog/Create.vue         | 16 ++++++++++++++--
 components/calendar/form/Create.vue           | 19 ++++++++++++-------
 .../ui/alert-dialog/AlertDialogClose.vue      |  0
 pages/i/world/[id].vue                        |  8 ++++++--
 4 files changed, 32 insertions(+), 11 deletions(-)
 create mode 100644 components/ui/alert-dialog/AlertDialogClose.vue

diff --git a/components/calendar/dialog/Create.vue b/components/calendar/dialog/Create.vue
index eacea35..b50abe2 100644
--- a/components/calendar/dialog/Create.vue
+++ b/components/calendar/dialog/Create.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { PhX } from '@phosphor-icons/vue';
 import type { World } from '~/models/World';
 
 defineProps<{
@@ -11,6 +12,12 @@ const calendarSkeletonName = ref<string>('')
 function onChangedName(newName: string) {
   calendarSkeletonName.value = newName
 }
+
+const emit = defineEmits(['on-close'])
+
+function handleCancel() {
+  emit('on-close')
+}
 </script>
 
 <template>
@@ -18,7 +25,8 @@ function onChangedName(newName: string) {
     <UiAlertDialogContent class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6">
       <UiAlertDialogTitle>
         <span class="text-2xl">
-          <strong class="font-bold">{{ world.name }}</strong> —
+          <strong class="font-bold">{{ world.name }}</strong>
+          <span class="opacity-30"> — </span>
           <span v-if="calendarSkeletonName">
             {{ calendarSkeletonName }}
           </span>
@@ -26,7 +34,11 @@ function onChangedName(newName: string) {
         </span>
       </UiAlertDialogTitle>
 
-      <CalendarFormCreate @changed-name="onChangedName" />
+      <UiButton size="icon" variant="ghost" class="absolute top-4 right-4" title="Fermer la fenêtre" @click="handleCancel">
+        <PhX size="20" />
+      </UiButton>
+
+      <CalendarFormCreate @on-changed-name="onChangedName" @on-cancel="handleCancel" />
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>
diff --git a/components/calendar/form/Create.vue b/components/calendar/form/Create.vue
index c849ce7..2d1ca9d 100644
--- a/components/calendar/form/Create.vue
+++ b/components/calendar/form/Create.vue
@@ -12,10 +12,6 @@ onMounted(() => {
 type FormTabs = 'global' | 'months' | 'today'
 const activeTab = ref<FormTabs>('global')
 
-/**
- * === Months list handling ===
- */
-
 /**
  * === Current date ===
  */
@@ -48,13 +44,19 @@ async function handleSubmit() {
  */
 const emit = defineEmits<{
   // eslint-disable-next-line no-unused-vars
-  (e: 'changed-name', calendarName: string): void
+  (e: 'on-changed-name', calendarName: string): void
+    // eslint-disable-next-line no-unused-vars
+  (e: 'on-cancel'): void
 }>()
 
 /** Hook to emit a debounced event for the changed skeleton name */
 const handleNameChange = useDebounceFn(() => {
-  emit('changed-name', calendarSkeleton.value.name)
+  emit('on-changed-name', calendarSkeleton.value.name)
 }, 400)
+
+function handleFormCancel() {
+  emit('on-cancel')
+}
 </script>
 
 <template>
@@ -101,7 +103,10 @@ const handleNameChange = useDebounceFn(() => {
         </UiTabsContent>
       </UiTabs>
 
-      <footer class="text-right mt-6">
+      <footer class="flex justify-end gap-2 mt-6">
+        <UiButton type="button" variant="destructive" @click="handleFormCancel">
+          Annuler
+        </UiButton>
         <UiButton type="submit" :disabled="!validSkeleton">
           Créer
         </UiButton>
diff --git a/components/ui/alert-dialog/AlertDialogClose.vue b/components/ui/alert-dialog/AlertDialogClose.vue
new file mode 100644
index 0000000..e69de29
diff --git a/pages/i/world/[id].vue b/pages/i/world/[id].vue
index e74432c..0119727 100644
--- a/pages/i/world/[id].vue
+++ b/pages/i/world/[id].vue
@@ -26,6 +26,10 @@ watch(user, (n, _o) => {
 })
 
 const alertModalOpened = ref<boolean>(false)
+
+function handleDialogClose() {
+  alertModalOpened.value = false
+}
 </script>
 
 <template>
@@ -54,7 +58,7 @@ const alertModalOpened = ref<boolean>(false)
                     <PhPlus size="17"/>
                   </UiButton>
                 </UiTooltipTrigger>
-                <UiTooltipContent>
+                <UiTooltipContent :side-offset="10">
                   <p>Ajouter un calendrier</p>
                 </UiTooltipContent>
               </UiTooltip>
@@ -87,6 +91,6 @@ const alertModalOpened = ref<boolean>(false)
       </section>
     </template>
 
-    <CalendarDialogCreate :world :modal-state="alertModalOpened" />
+    <CalendarDialogCreate :world :modal-state="alertModalOpened" @on-close="handleDialogClose" />
   </main>
 </template>