fix datepicker and solve hydratation errors

components/Layout/AlertBar/Env.vue

@@ -10,7 +10,12 @@ Barre d'alerte qui s'affiche lorsque l'utilisateur n'est pas dans un environneme
     :text="$t('not_production_environment', { env: env })"
     icon="fas fa-exclamation-triangle"
     class="theme-warning"
+    style="z-index: 1005"
   />
+  <!--
+  Le z-index est précisé pour éviter cette erreur : https://github.com/vuetifyjs/nuxt-module/issues/205
+  Il pourra être retiré dès que le bug aura été corrigé
+  -->
 </template>
 
 <script setup lang="ts">

components/Layout/Header.vue

@@ -46,11 +46,13 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
     <LayoutHeaderMenu name="Account" color="on-primary" icon="fas fa-sun" />
 
     <a
-      :href="runtimeConfig.supportUrl"
+      :href="runtimeConfig.public.supportUrl"
       class="text-body px-3 py-4 ml-2 theme-secondary text-decoration-none h-100"
       target="_blank"
     >
-      <span class="d-none d-sm-none d-md-flex">{{ $t('help_access') }}</span>
+      <span class="d-none d-sm-none d-md-flex">
+        {{ $t('help_access') }}
+      </span>
       <v-icon
         icon="fas fa-question-circle"
         class="d-sm-flex d-md-none"
@@ -61,11 +63,11 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
 </template>
 
 <script setup lang="ts">
-import { computed } from '@vue/reactivity'
-import type { ComputedRef } from '@vue/reactivity'
-import { useMenu } from '~/composables/layout/useMenu'
+import { computed } from 'vue'
+import type { ComputedRef } from 'vue'
 import { useAbility } from '@casl/vue'
 import { useDisplay } from 'vuetify'
+import { useMenu } from '~/composables/layout/useMenu'
 import { useOrganizationProfileStore } from '~/stores/organizationProfile'
 import { useLayoutStore } from '~/stores/layout'
 

components/Layout/ParametersMenu.vue

@@ -3,8 +3,13 @@
     v-if="displayMenu"
     v-model="isOpened"
     mobile-breakpoint="sm"
+    style="z-index: 1005"
   >
-    <template v-slot:prepend>
+    <!--
+    Le z-index est précisé pour éviter cette erreur : https://github.com/vuetifyjs/nuxt-module/issues/205
+    Il pourra être retiré dès que le bug aura été corrigé
+    -->
+    <template #prepend>
       <div class="title">
         <h3>{{ $t('parameters') }}</h3>
       </div>
@@ -21,7 +26,7 @@
       </v-list-item>
     </v-list>
 
-    <template v-slot:append>
+    <template #append>
       <v-btn
         :href="homeUrl"
         prepend-icon="fa fa-right-from-bracket"
@@ -36,10 +41,10 @@
 </template>
 
 <script setup lang="ts">
+import { useDisplay } from 'vuetify'
+import { computed } from 'vue'
 import { useMenu } from '~/composables/layout/useMenu'
 import { useHomeUrl } from '~/composables/utils/useHomeUrl'
-import { useDisplay } from 'vuetify'
-import { computed } from '@vue/reactivity'
 import type { MenuGroup, MenuItem } from '~/types/layout'
 
 const { mdAndUp } = useDisplay()

components/Ui/DatePicker.vue

@@ -7,11 +7,9 @@ Sélecteur de dates avec Vuetify
 <template>
   <v-layout row wrap>
     <v-menu
-      ref="menu"
       v-model="menu"
       :close-on-content-click="false"
       :nudge-right="40"
-      :return-value.sync="modelValue"
       lazy
       transition="scale-transition"
       offset-y
@@ -20,58 +18,40 @@ Sélecteur de dates avec Vuetify
       :position-x="positionX"
       :position-y="positionY"
     >
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ props: attrs }">
         <v-text-field
           v-model="displayDate"
           :label="label"
-          :readonly="readOnly"
+          :readonly="true"
           v-bind="attrs"
-          v-on="on"
-          @blur="menu = false"
-        ></v-text-field>
+        />
       </template>
+
       <v-date-picker
-        v-if="!withTime"
         :model-value="modelValue"
         :locale="i18n.locale.value"
-        @update:model-value="updateDate"
         no-title
         scrollable
-      >
-      </v-date-picker>
-      <v-date-picker
-        v-else
-        :model-value="modelValue"
-        :locale="i18n.locale.value"
         @update:model-value="updateDate"
-        no-title
-        scrollable
-        type="datetime"
-      >
-      </v-date-picker>
+      />
     </v-menu>
   </v-layout>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, watch } from 'vue'
+import { ref, computed, nextTick, watch, type PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
   modelValue: Date,
-  label: String,
-  readOnly: {
-    type: Boolean,
-    default: false,
+  label: {
+    type: String,
+    default: '',
   },
   format: {
     type: String,
     default: null,
   },
-  withTime: {
-    type: Boolean,
-    default: false,
-  },
   /**
    * Position du date-picker
    * @see https://vuetifyjs.com/en/api/v-menu/#props-position
@@ -106,7 +86,7 @@ const displayDate = computed({
   set: () => {},
 })
 
-function updateDate(value) {
+function updateDate(value: Date) {
   emit('update:modelValue', value)
   menu.value = false
 }

components/Ui/Input/DatePicker.vue

@@ -23,16 +23,17 @@ Sélecteur de dates, à placer dans un composant `UiForm`
 </template>
 
 <script setup lang="ts">
-import { useFieldViolation } from '~/composables/form/useFieldViolation'
 import { formatISO } from 'date-fns'
-import type { PropType } from '@vue/runtime-core'
+import type { PropType, Ref } from 'vue'
+import { ref } from 'vue'
+import { useFieldViolation } from '~/composables/form/useFieldViolation'
 
 const props = defineProps({
   /**
    * v-model
    */
   modelValue: {
-    type: String as PropType<string | null>,
+    type: String as PropType<Date | string | null>,
     required: false,
     default: null,
   },
@@ -105,19 +106,19 @@ const props = defineProps({
   },
 })
 
-const input = ref(null)
-
 const { fieldViolations, updateViolationState } = useFieldViolation(props.field)
 
 const fieldLabel = props.label ?? props.field
 
 const emit = defineEmits(['update:model-value', 'change'])
 
-const date: Ref<Date> = ref(new Date(props.modelValue))
+const date: Ref<Date | undefined> = ref(
+  props.modelValue ? new Date(props.modelValue) : undefined,
+)
 
 const onUpdate = (event: string) => {
   updateViolationState(event)
-  emit('update:model-value', formatISO(date.value))
+  emit('update:model-value', date.value ? formatISO(date.value) : undefined)
 }
 </script>
 

lang/fr.json

@@ -683,9 +683,9 @@
   "max_note_for_pedagogical_followup": "Note maximale pour les notes du suivi pédagogique (entre 1 et 100) ",
   "Bad Request": "Requête invalide",
   "bulletins": "Bulletins",
-  "INDIAN_REUNION": "Indian/Reunion",
-  "EUROPE_ZURICH": "Europe/Zurich",
-  "EUROPE_PARIS": "Europe/Paris",
+  "Indian/Reunion": "Indian/Reunion",
+  "Europe/Zurich": "Europe/Zurich",
+  "Europe/Paris": "Europe/Paris",
   "licenceQrCode": "QrCode pour la licence",
   "parameters_education_timings_page": "Durée des cours",
   "education_timings_breadcrumbs": "Durée des cours",

middleware/routing.global.ts

@@ -16,14 +16,14 @@ export default defineNuxtRouteMiddleware((to, _) => {
     const name: string = routeName?.toString() ?? ''
 
     // <<- TODO: remove after 2.5 release
-    // const runtimeConfig = useRuntimeConfig()
-    // if (
-    //   runtimeConfig.public.env === 'production' &&
-    //   (name === 'cmf_licence_page' || name === 'parameters_page')
-    // ) {
-    //   const { redirectToHome } = useRedirect()
-    //   redirectToHome()
-    // }
+    const runtimeConfig = useRuntimeConfig()
+    if (
+      runtimeConfig.public.env === 'production' &&
+      (name === 'cmf_licence_page' || name === 'parameters_page')
+    ) {
+      const { redirectToHome } = useRedirect()
+      redirectToHome()
+    }
     // ->>
 
     if (

regex_pattern.txt

@@ -1 +0,0 @@
-(?!typo3/).*