complete the EventParams component

components/Layout/Header/UniversalCreation/EventParams.vue

@@ -1,3 +1,7 @@
+<!--
+Event parameters page in the create dialog
+-->
+
 <template>
   <v-container class="pa-4">
     <v-row class="align-center">
@@ -6,21 +10,7 @@
       </v-col>
 
       <v-col cols="6">
-        <!-- @see https://vue3datepicker.com/props/modes/#multi-calendars -->
-        <!-- TODO: déplacer le VueDatePicker dans un composant Input -->
-        <VueDatePicker
-            v-model="eventStart"
-            :locale="i18n.locale.value"
-            :format-locale="fnsLocale"
-            :format="dateFormatPattern"
-            enable-time-picker
-            :teleport="true"
-            text-input
-            :auto-apply="true"
-            :select-text="$t('select')"
-            :cancel-text="$t('cancel')"
-            @update:model-value="onUpdate"
-        />
+        <UiDatePicker v-model="eventStart" with-time />
       </v-col>
     </v-row>
 
@@ -37,13 +27,13 @@
       </v-col>
 
       <v-col cols="10" class="d-flex flex-row align-center">
-        <UiInputNumber v-model="eventDurationDays" class="mx-3" :min="0" @update:model-value="onUpdate" />
+        <UiInputNumber v-model="eventDurationDays" class="mx-3" :min="0" />
         <span>{{ $t('day(s)') }}</span>
 
-        <UiInputNumber v-model="eventDurationHours" class="mx-3" :min="0" @update:model-value="onUpdate" />
+        <UiInputNumber v-model="eventDurationHours" class="mx-3" :min="0" />
         <span>{{ $t('hour(s)') }}</span>
 
-        <UiInputNumber v-model="eventDurationMinutes" class="mx-3" :min="0" @update:model-value="onUpdate" />
+        <UiInputNumber v-model="eventDurationMinutes" class="mx-3" :min="0" />
         <span>{{ $t('minute(s)') }}</span>
       </v-col>
 
@@ -62,15 +52,17 @@
 </template>
 
 <script setup lang="ts">
-
-  const i18n = useI18n()
-
-  // Get the start of the next hour as a default event start
   import {ref, Ref} from "@vue/reactivity";
   import {add, format, startOfHour, formatISO} from "date-fns";
   import {ComputedRef} from "vue";
   import DateUtils, {supportedLocales} from "~/services/utils/dateUtils";
 
+  const i18n = useI18n()
+
+  // An event is sent each time the resulting params are updated
+  const emit = defineEmits(['paramsUpdated'])
+
+  // Get the start of the next hour as a default event start
   const now: Date = new Date()
   const eventStart: Ref<Date> = ref(startOfHour(add(now, { 'hours': 1 })))
 
@@ -83,29 +75,25 @@
     return (eventDurationDays.value * 24 * 60) + (eventDurationHours.value * 60) + eventDurationMinutes.value
   })
 
+  // Event end
   const eventEnd: ComputedRef<Date> = computed(() => add(eventStart.value, { 'minutes': eventDuration.value }))
-  const dateFormatPattern = DateUtils.getFormatPattern(i18n.locale.value as supportedLocales)
 
-  // Date picker conf
   const fnsLocale = DateUtils.getFnsLocale(i18n.locale.value as supportedLocales)
-
   const formattedEventEnd: ComputedRef<string> = computed(() => {
     return format(eventEnd.value, 'EEEE dd MMMM yyyy HH:mm', {locale: fnsLocale})
   })
 
-  const emit = defineEmits(['paramsUpdated'])
-
-  const onUpdate = () => {
-    const params = {
+  // Build the event params
+  const params: ComputedRef<{'start': string, 'end': string}> = computed(() => {
+    return {
       'start': formatISO(eventStart.value),
       'end': formatISO(eventEnd.value),
     }
+  })
 
-    emit('paramsUpdated', params)
-  }
-
-
-
+  watch(params, (newParams) => {
+    emit('paramsUpdated', newParams)
+  })
 </script>
 
 <style scoped lang="scss">