fix subheader display

components/Layout/SubHeader/DataTimingRange.vue

@@ -1,7 +1,7 @@
 <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" style="min-width: 150px;">
+    <div class="d-flex align-center" style="max-height: 100%">
+      <span class="label pl-2 mr-2 font-weight-bold on-neutral">
         {{ $t('period_choose') }}
       </span>
 
@@ -11,21 +11,6 @@
           @update:model-value="updateDateTimeRange"
       />
     </div>
-
-    <v-btn
-        ref="btn"
-        class="time-btn ml-1 theme-neutral-soft"
-        height="22" min-height="22" max-height="22"
-        width="25" min-width="25" max-width="25"
-        elevation="0"
-        @click="show = !show"
-    >
-      <v-icon icon="fas fa-history" class="font-weight-normal" style="font-size: 14px;" />
-    </v-btn>
-
-    <v-tooltip location="bottom" :activator="btn">
-      <span>{{ $t('history_help') }}</span>
-    </v-tooltip>
   </main>
 </template>
 
@@ -33,15 +18,11 @@
 import {Ref} from "@vue/reactivity";
 import {useAccessProfileStore} from "~/stores/accessProfile";
 import {useFormStore} from "~/stores/form";
-import {WatchStopHandle} from "@vue/runtime-core";
 import {useEntityManager} from "~/composables/data/useEntityManager";
 import Access from "~/models/Access/Access";
 import DateUtils from "~/services/utils/dateUtils";
 import {usePageStore} from "~/stores/page";
 
-const btn: Ref = ref(null)
-const show: Ref<boolean> = ref(false)
-
 const { setDirty } = useFormStore()
 const accessProfileStore = useAccessProfileStore()
 const { em } = useEntityManager()
@@ -78,30 +59,10 @@ const updateDateTimeRange = async (dates: Array<Date>): Promise<any> => {
 
   window.location.reload()
 }
-
-/**
- * Emit event when component is hidden / shown
-  */
-const emit = defineEmits(['showDateTimeRange'])
-
-const unwatch: WatchStopHandle = watch(show, (newValue) => {
-  emit('showDateTimeRange', newValue)
-})
-
-onUnmounted(() => {
-  unwatch()
-})
-
-// Show by default if a date range is defined in store
-if (accessProfileStore.historical.dateStart || accessProfileStore.historical.dateEnd) {
-  show.value = true
-  emit('showDateTimeRange', true)
-}
 </script>
 
 <style scoped lang="scss">
-.time-btn {
-  border-width: 1px 1px 1px 0;
-  border-style: solid;
+.label {
+  min-width: 150px;
 }
 </style>

components/Layout/SubHeader/PersonnalizedList.vue

@@ -7,15 +7,16 @@
     <v-menu
         :activator="btn"
         offset="10"
+        min-width="440"
         :close-on-content-click="false"
     >
-      <v-card v-if="collection.totalItems === 0" height="80" class="pa-4">
+      <v-card v-if="collection.totalItems === 0" height="80" width="440" class="pa-4">
         <v-card-text class="ma-0 pa-0 header_menu">
           {{ $t('nothing_to_show') }}
         </v-card-text>
       </v-card>
 
-      <v-card v-else>
+      <v-card v-else width="440">
         <v-card-title class="text-body-2 header-personalized">
           <v-text-field
               v-model="search"

components/Layout/Subheader.vue

@@ -22,17 +22,32 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
       >
         <LayoutSubHeaderActivityYear v-if="smAndUp && !showDateTimeRange" class="activity-year" />
 
-        <div v-if="hasMenuOrIsTeacher" class="d-flex flex-row">
+        <div v-if="hasMenuOrIsTeacher" class="d-flex flex-row align-center h-100">
           <LayoutSubHeaderDataTiming
               v-if="smAndUp && !showDateTimeRange"
               class="data-timing ml-2"
           />
 
           <LayoutSubHeaderDataTimingRange
-              v-if="smAndUp"
+              v-if="smAndUp && showDateTimeRange"
               class="data-timing-range ml-n1"
-              @showDateTimeRange="showDateTimeRange=$event"
           />
+
+          <v-btn
+              v-if="smAndUp"
+              ref="btn"
+              class="switch-btn ml-1 theme-neutral-soft"
+              height="22" min-height="22" max-height="22"
+              width="25" min-width="25" max-width="25"
+              elevation="0"
+              @click="showDateTimeRange = !showDateTimeRange"
+          >
+              <v-icon icon="fas fa-history" class="font-weight-normal" style="font-size: 14px;" />
+          </v-btn>
+          <v-tooltip location="bottom" :activator="btn">
+              <span>{{ $t('history_help') }}</span>
+          </v-tooltip>
+
           <LayoutSubHeaderPersonnalizedList class="personalized-list ml-2 d-flex align-center" />
         </div>
       </v-card>
@@ -49,14 +64,17 @@ Contient entre autres le breadcrumb, les commandes de changement d'année et les
     const { smAndUp, mdAndUp, lgAndUp } = useDisplay()
     const accessProfile = useAccessProfileStore()
     const { hasMenu } = useMenu()
+    const btn: Ref = ref(null)
 
     const hasMenuOrIsTeacher: ComputedRef<boolean> = computed(
         () => hasMenu('Main') || (accessProfile.isTeacher ?? false)
     )
 
+    console.log(accessProfile.historical.dateStart)
+
     const showDateTimeRange: Ref<boolean> = ref(
-        accessProfile.historical.dateStart !== null &&
-        accessProfile.historical.dateEnd !== null
+        Object.hasOwn(accessProfile.historical, 'dateStart') && accessProfile.historical.dateStart !== null &&
+        Object.hasOwn(accessProfile.historical, 'dateEnd') && accessProfile.historical.dateEnd !== null
     )
 </script>
 
@@ -75,4 +93,8 @@ main {
   background-color: transparent !important;
 }
 
+.switch-btn {
+  border-width: 1px 1px 1px 0;
+  border-style: solid;
+}
 </style>

components/Ui/Input/DateRangePicker.vue

@@ -25,10 +25,11 @@
 
 <script setup lang="ts">
 import DateUtils, {supportedLocales} from "~/services/utils/dateUtils";
+import {PropType} from "@vue/runtime-core";
 
 const props = defineProps({
   modelValue: {
-    type: Array,
+    type: Array as PropType<Array<Date> | null>,
     required: false,
     default: null
   },