app/components/Layout/Header/UniversalCreation/EventParams.vue

<!--
Event parameters page in the create dialog
-->

<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">
        <UiDatePicker v-model="eventStart" with-time />
      </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" />
        <span>{{ $t('day(s)') }}</span>

        <UiInputNumber v-model="eventDurationHours" class="mx-3" :min="0" />
        <span>{{ $t('hour(s)') }}</span>

        <UiInputNumber v-model="eventDurationMinutes" class="mx-3" :min="0" />
        <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">
  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 })))

  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
  })

  // Event end
  const eventEnd: ComputedRef<Date> = computed(() => add(eventStart.value, { 'minutes': eventDuration.value }))

  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})
  })

  // Build the event params
  const params: ComputedRef<{'start': string, 'end': string}> = computed(() => {
    return {
      'start': formatISO(eventStart.value),
      'end': formatISO(eventEnd.value),
    }
  })

  // Send an update event as soon as the page is mounted
  onMounted(() => {
    emit('paramsUpdated', params.value)
  })

  // Send an update event every time the params change
  const unwatch = watch(params, (newParams) => {
    emit('paramsUpdated', newParams)
  })
  onUnmounted(() => {
    unwatch()
  })
</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>