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 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 } from 'vue'
import type { Ref, ComputedRef } from 'vue'
import { add, format, startOfHour, formatISO } from 'date-fns'
import type { supportedLocales } from '~/services/utils/dateUtils';
import DateUtils 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>