Added skeleton name display on dialog

components/calendar/dialog/Create.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { World } from '~/models/World';
+
+defineProps<{
+  world: World,
+  modalState?: boolean
+}>()
+
+const calendarSkeletonName = ref<string>('')
+
+function onChangedName(newName: string) {
+  calendarSkeletonName.value = newName
+}
+</script>
+
+<template>
+  <UiAlertDialog :open="modalState">
+    <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> —
+          <span v-if="calendarSkeletonName">
+            {{ calendarSkeletonName }}
+          </span>
+          <span v-else>Nouveau calendrier</span>
+        </span>
+      </UiAlertDialogTitle>
+
+      <CalendarFormCreate @changed-name="onChangedName" />
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>

components/calendar/form/Create.vue

@@ -1,21 +1,15 @@
 <script lang="ts" setup>
 import type { Calendar } from '~/models/CalendarConfig';
-
 import { PhAlarm, PhCalendarDots, PhWrench } from '@phosphor-icons/vue';
 
 const defaultSkeleton: Calendar = { name: '', today: { day: 1, month: 0, year: 0 }, months: [], events: []}
-
 const calendarSkeleton = ref<Calendar>({ ...defaultSkeleton })
 
-async function handleSubmit() {
-  await $fetch(`/api/calendars/create`, { method: 'POST', body: {...calendarSkeleton.value, worldId: 1 } })
-}
-
 onMounted(() => {
   calendarSkeleton.value = { ...defaultSkeleton }
 })
 
-type FormTabs = 'global' | 'months' | 'today' | 'seasons'
+type FormTabs = 'global' | 'months' | 'today'
 const activeTab = ref<FormTabs>('global')
 
 /**
@@ -35,20 +29,32 @@ watch(calendarSkeleton.value.months, () => {
  * === Form Validation ===
  */
 
-/**
- * Whether the skeleton has valid month data
- */
+/** Whether the skeleton has valid month data */
 const validSkeletonMonths = computed(() => calendarSkeleton.value.months.length > 0)
 
-/**
- * Whether the skeleton has a valid name
- */
+/** Whether the skeleton has a valid name */
 const validSkeletonGeneral = computed(() => calendarSkeleton.value.name)
 
-/**
- * Whether all the data checks above are a-ok
- */
+/** Whether all the data checks above are a-ok */
 const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeletonMonths.value)
+
+/** Send the data to the store for validation */
+async function handleSubmit() {
+  await $fetch(`/api/calendars/create`, { method: 'POST', body: {...calendarSkeleton.value, worldId: 1 } })
+}
+
+/**
+ * === Watch for name changes to display above ===
+ */
+const emit = defineEmits<{
+  // eslint-disable-next-line no-unused-vars
+  (e: 'changed-name', calendarName: string): void
+}>()
+
+/** Hook to emit a debounced event for the changed skeleton name */
+const handleNameChange = useDebounceFn(() => {
+  emit('changed-name', calendarSkeleton.value.name)
+}, 400)
 </script>
 
 <template>
@@ -74,12 +80,6 @@ const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeleton
               Aujourd'hui
             </div>
           </UiTabsTrigger>
-          <!-- <UiTabsTrigger value="seasons" class="font-bold">
-            <div class="flex items-center gap-1">
-              <PhLeaf size="18" weight="fill" />
-              Saisons
-            </div>
-          </UiTabsTrigger> -->
         </UiTabsList>
         <UiTabsContent value="global">
           <input
@@ -90,6 +90,7 @@ const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeleton
             required
             placeholder="Titre"
             class="w-full -my-1 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+            @input="handleNameChange"
           >
         </UiTabsContent>
         <UiTabsContent value="months">
@@ -98,7 +99,6 @@ const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeleton
         <UiTabsContent value="today">
           <CalendarInputTodaySelect v-model:model-value="calendarSkeleton.today" :available-months="calendarSkeleton.months"/>
         </UiTabsContent>
-        <UiTabsContent value="seasons" />
       </UiTabs>
 
       <footer class="text-right mt-6">

pages/i/world/[id].vue

@@ -25,7 +25,7 @@ watch(user, (n, _o) => {
   }
 })
 
-const modalOpened = ref<boolean>(false)
+const alertModalOpened = ref<boolean>(false)
 </script>
 
 <template>
@@ -50,7 +50,7 @@ const modalOpened = ref<boolean>(false)
             <UiTooltipProvider :delay-duration="250">
               <UiTooltip>
                 <UiTooltipTrigger as-child>
-                  <UiButton size="icon" class="rounded-full h-8 w-8" @click="() => modalOpened = true">
+                  <UiButton size="icon" class="rounded-full h-8 w-8" @click="() => alertModalOpened = true">
                     <PhPlus size="17"/>
                   </UiButton>
                 </UiTooltipTrigger>
@@ -85,18 +85,8 @@ const modalOpened = ref<boolean>(false)
           </template>
         </Spacing>
       </section>
-
-      <UiAlertDialog v-model:open="modalOpened">
-        <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> — Nouveau calendrier
-            </span>
-          </UiAlertDialogTitle>
-
-          <CalendarFormCreate />
-        </UiAlertDialogContent>
-      </UiAlertDialog>
     </template>
+
+    <CalendarDialogCreate :world :modal-state="alertModalOpened" />
   </main>
 </template>