add the LayoutUniversalCreationEventParams component

components/Layout/Header/UniversalCreation/EventParams.vue

@@ -0,0 +1,122 @@
+<template>
+  <v-container class="pa-4">
+    <v-row class="align-center">
+      <v-col cols="2">
+        <span>{{ $t('start_on') }}</span>
+      </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"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row v-show="eventStart < now" class="anteriorDateWarning mt-0">
+      <v-col cols="2" class="pt-1"></v-col>
+      <v-col cols="9" class="pt-1">
+        <i class="fa fa-circle-info" /> {{ $t('please_note_that_this_reservation_start_on_date_anterior_to_now') }}
+      </v-col>
+    </v-row>
+
+    <v-row class="align-center">
+      <v-col cols="2">
+        <span>{{ $t('for_time') }}</span>
+      </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" />
+        <span>{{ $t('day(s)') }}</span>
+
+        <UiInputNumber v-model="eventDurationHours" class="mx-3" :min="0" @update:model-value="onUpdate" />
+        <span>{{ $t('hour(s)') }}</span>
+
+        <UiInputNumber v-model="eventDurationMinutes" class="mx-3" :min="0" @update:model-value="onUpdate" />
+        <span>{{ $t('minute(s)') }}</span>
+      </v-col>
+
+    </v-row>
+
+    <v-row>
+      <v-col cols="2">
+        <span>{{ $t('ending_date') }}</span>
+      </v-col>
+
+      <v-col cols="6" class="endDate">
+        <span>{{ formattedEventEnd }}</span>
+      </v-col>
+    </v-row>
+  </v-container>
+</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 now: Date = new Date()
+  const eventStart: Ref<Date> = ref(startOfHour(add(now, { 'hours': 1 })))
+
+  const eventDurationDays: Ref<number> = ref(0)
+  const eventDurationHours: Ref<number> = ref(1)
+  const eventDurationMinutes: Ref<number> = ref(0)
+
+  // Duration of the events, in minutes
+  const eventDuration: ComputedRef<number> = computed(() => {
+    return (eventDurationDays.value * 24 * 60) + (eventDurationHours.value * 60) + eventDurationMinutes.value
+  })
+
+  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 = {
+      'start': formatISO(eventStart.value),
+      'end': formatISO(eventEnd.value),
+    }
+
+    emit('paramsUpdated', params)
+  }
+
+
+
+</script>
+
+<style scoped lang="scss">
+  .endDate {
+    font-weight: 600;
+    text-transform: capitalize;
+    color: rgb(var(--v-theme-on-neutral));
+  }
+
+  .anteriorDateWarning {
+    color: rgb(var(--v-theme-info));
+    font-weight: 600;
+  }
+</style>

lang/fr.json

@@ -577,5 +577,14 @@
   "Internal Server Error": "Erreur de serveur interne",
   "cmf_licence_breadcrumbs": "Licence CMF",
   "online_registration": "Inscription en ligne",
-  "online_registration_text_creation_card": "Ajouter une nouvelle inscription"
+  "online_registration_text_creation_card": "Ajouter une nouvelle inscription",
+  "start_on": "Débute le",
+  "for_time": "Durant",
+  "day(s)": "jour(s)",
+  "hour(s)": "heure(s)",
+  "minute(s)": "minute(s)",
+  "ending_date": "Date de fin",
+  "please_note_that_this_reservation_start_on_date_anterior_to_now": "Veuillez noter que cette réservation débute à une date antérieure à aujourd'hui",
+  "validate": "Valider",
+  "which_date_and_which_hour": "A quelle date et quelle heure ?"
 }