add DateRangePicker, with configuration and style

components/Layout/SubHeader/DataTimingRange.vue

@@ -1,20 +1,11 @@
 <template>
   <main class="d-flex align-center data-timing-range">
     <div v-if="show" class="d-flex align-center" style="max-height: 100%">
-      <span class="pl-2 mr-2 font-weight-bold on-neutral">
+      <span class="pl-2 mr-2 font-weight-bold on-neutral" style="min-width: 150px;">
         {{ $t('period_choose') }}
       </span>
 
-      <!-- @see https://vue3datepicker.com/props/modes/#multi-calendars -->
-      <VueDatePicker
-          :model-value="datesRange"
-          range
-          multi-calendars
-          :teleport="true"
-          :alt-position="dateRangePickerAltPosition"
-          :enable-time-picker="false"
-          @update="updateDateTimeRange"
-      />
+      <UiInputDateRangePicker v-model="datesRange" max-height="28" />
     </div>
 
     <v-btn
@@ -49,14 +40,11 @@ const { setDirty } = useFormStore()
 const accessProfileStore = useAccessProfileStore()
 const { em } = useEntityManager()
 
+
+
 const start = accessProfileStore.historical.dateStart
 const end = accessProfileStore.historical.dateStart
 
-const dateRangePickerAltPosition = (el: HTMLElement) => ({
-  top: el.getBoundingClientRect().bottom,
-  left: el.getBoundingClientRect().left - 100
-})
-
 const datesRange: Ref<Array<Date | null>> = ref([
   start ? new Date(start) : null,
   end ? new Date(end) : null
@@ -104,45 +92,4 @@ if (accessProfileStore.historical.dateStart || accessProfileStore.historical.dat
   border-width: 1px 1px 1px 0;
   border-style: solid;
 }
-
-.data-timing-range {
-  max-height: 22px;
-
-  :deep(.v-text-field) {
-    padding-top: 0 !important;
-    margin-top: 0 !important;
-  }
-
-  :deep(.v-input) {
-    max-height: 22px;
-    min-height: 22px;
-    height: 22px;
-  }
-
-  :deep(.v-icon) {
-    max-height: 22px;
-  }
-
-  :deep(.v-field__input) {
-    font-size: 14px;
-    width: 400px !important;
-    padding: 0;
-    max-height: 22px;
-    min-height: 22px;
-    height: 22px;
-  }
-
-  :deep(.v-field-label) {
-    top: 0;
-    font-size: 14px;
-    max-height: 22px;
-    min-height: 22px;
-    height: 22px;
-  }
-
-  :deep(.v-input__prepend) {
-    padding-top: 0;
-    font-size: 14px;
-  }
-}
 </style>

components/Layout/Subheader.vue

@@ -16,7 +16,7 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
       <span class="flex-fill" />
 
       <v-card
-        class="d-flex flex-row pt-2 mr-6 align-baseline"
+        class="d-flex flex-row align-center mr-6"
         flat
         tile
       >
@@ -25,7 +25,7 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
         <div v-if="hasMenuOrIsTeacher" class="d-flex flex-row">
           <LayoutSubHeaderDataTiming v-if="smAndUp && !showDateTimeRange" class="data-timing ml-2" />
           <LayoutSubHeaderDataTimingRange v-if="smAndUp" class="data-timing-range ml-n1" @showDateTimeRange="showDateTimeRange=$event" />
-          <LayoutSubHeaderPersonnalizedList class="personalized-list ml-2" />
+          <LayoutSubHeaderPersonnalizedList class="personalized-list ml-2 d-flex align-center" />
         </div>
       </v-card>
     </v-card>

components/Ui/Input/DateRangePicker.vue

@@ -0,0 +1,78 @@
+<template>
+  <!-- @see https://vue3datepicker.com/props/modes/#multi-calendars -->
+  <VueDatePicker
+      :model-value="modelValue"
+      range
+      multi-calendars
+      auto-apply
+      locale="fr"
+      :start-date="today"
+      :teleport="true"
+      :enable-time-picker="false"
+      close-on-scroll
+      text-input
+      :select-text="$t('select')"
+      :cancel-text="$t('cancel')"
+      input-class-name="date-range-picker-input"
+      @update:model-value="updateDateTimeRange"
+      class="date-range-picker"
+      :style="style"
+  />
+<!--  :alt-position="dateRangePickerAltPosition"-->
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  maxHeight: {
+    type: Number,
+    required: false,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const updateDateTimeRange = (value: [string, string]) => {
+  emit('update:modelValue', value)
+}
+
+const today = new Date()
+
+let style = '';
+if (props.maxHeight !== null) {
+  style += 'height: ' + props.maxHeight + 'px;max-height: ' + props.maxHeight + 'px;'
+}
+
+
+/**
+ * Recalcule la position du panneau de sélection des dates si trop près du bord droit de l'écran
+ * @param el
+ */
+const dateRangePickerAltPosition = (el: HTMLElement) => ({
+  top: el.getBoundingClientRect().bottom,
+  left: el.getBoundingClientRect().left - 100
+})
+
+</script>
+
+<style scoped lang="scss">
+  :deep(div[role="textbox"]) {
+    height: 100% !important;
+    max-height: 100% !important;
+  }
+
+  :deep(.dp__input_wrap) {
+    height: 100% !important;
+    max-height: 100% !important;
+  }
+
+  :deep(.date-range-picker-input) {
+      height: 100% !important;
+      max-height: 100% !important;
+  }
+</style>

lang/fr.json

@@ -570,5 +570,6 @@
   "PENDING": "En cours de traitement",
   "READY": "Prêt",
   "DELETED": "Supprimé",
-  "ERROR": "Erreur"
+  "ERROR": "Erreur",
+  "select": "Sélectionner"
 }