dateTime Range

components/Layout/DataTiming.vue

@@ -40,7 +40,7 @@
 
       const timeChoice = ref(Array<number>())
 
-      const historicalArray = ['past', 'future', 'present']
+      const historicalArray = ['past', 'present', 'future']
       for(const key in historicalArray){
         if (historical.value[historicalArray[key]])
           timeChoice.value.push(parseInt(key))

components/Layout/DataTimingRange.vue

@@ -1,7 +1,17 @@
 <template>
   <main class="d-flex align-baseline">
 
-    <UiInputDatePicker class="time-range" v-if="showRange" label="period_choose" :data="[]" :range="true"/>
+    <div v-if="show" class="d-flex align-baseline">
+      <span class="mr-2 ot_dark_grey--text font-weight-bold">{{$t('period_choose')}}</span>
+      <UiInputDatePicker
+        class="time-range"
+        label="date_choose"
+        :data="datesRange"
+        :range="true"
+        :dense="true"
+        :singleLine="true"
+        v-on:update="updateDateTimeRange"/>
+    </div>
 
     <v-tooltip bottom>
       <template v-slot:activator="{ on, attrs }">
@@ -10,7 +20,7 @@
           max-height="25"
           v-bind="attrs"
           v-on="on"
-          @click="showRange=!showRange"
+          @click="show=!show"
           elevation="0"
           max-width="10px"
           min-width="10px"
@@ -25,14 +35,46 @@
 </template>
 
 <script lang="ts">
-  import {defineComponent, ref} from '@nuxtjs/composition-api'
+  import {defineComponent, onUnmounted, ref, useContext, watch, computed, ComputedRef} from '@nuxtjs/composition-api'
+  import {$useMyProfileUpdater} from "~/use/updater/useMyProfileUpdater";
+  import {$useDirtyForm} from "~/use/form/useDirtyForm";
+  import {Ref, WatchStopHandle} from "@vue/composition-api";
 
   export default defineComponent({
-    setup() {
-      const showRange = ref(false)
+    setup(_, {emit}) {
+      const {store, $dataPersister} = useContext()
+      const {markFormAsNotDirty} = $useDirtyForm(store)
+      const {updateMyProfile, setHistoricalRange, historical} = $useMyProfileUpdater(store, $dataPersister)
+
+      const datesRange:ComputedRef<Array<string>> = computed(()=>{
+        return [historical.value.dateStart, historical.value.dateEnd]
+      })
+
+      const show:Ref<boolean> = ref(false)
+      if(historical.value.dateStart || historical.value.dateEnd){
+        show.value = true
+        emit('showDateTimeRange', true)
+      }
+
+      const unwatch:WatchStopHandle = watch(show,  (newValue) => {
+        emit('showDateTimeRange', newValue)
+      })
+
+      onUnmounted(()=>{
+        unwatch()
+      })
+
+      const updateDateTimeRange = async (dates:Array<string>):Promise<any> =>{
+        setHistoricalRange(dates)
+        markFormAsNotDirty()
+        await updateMyProfile()
+        window.location.reload()
+      }
 
       return {
-        showRange
+        show,
+        datesRange,
+        updateDateTimeRange
       }
     }
   })
@@ -54,11 +96,11 @@
       margin-top: 0 !important;
     }
     .v-icon{
-      font-size: 16px;
+      font-size: 20px;
     }
     input{
       font-size: 14px;
-      width: 200px !important;
+      width: 400px !important;
     }
   }
 </style>

components/Layout/Subheader.vue

@@ -12,23 +12,25 @@
         flat
         tile
       >
-        <LayoutActivityYear></LayoutActivityYear>
-        <LayoutDataTiming class="ml-2"></LayoutDataTiming>
-        <LayoutDataTimingRange class="ml-n1"></LayoutDataTimingRange>
+        <LayoutActivityYear v-if="!showDateTimeRange"></LayoutActivityYear>
+        <LayoutDataTiming v-if="!showDateTimeRange" class="ml-2"></LayoutDataTiming>
+        <LayoutDataTimingRange class="ml-n1" v-on:showDateTimeRange="showDateTimeRange=$event"></LayoutDataTimingRange>
       </v-card>
     </v-card>
   </main>
 </template>
 
 <script lang="ts">
-  import {computed, defineComponent, useContext} from '@nuxtjs/composition-api'
+  import {computed, defineComponent, useContext, ref} from '@nuxtjs/composition-api'
 
   export default defineComponent({
     setup() {
       const {store} = useContext()
+      const showDateTimeRange = ref(false)
       const displayedSubHeader = computed(()=>store.state.profile.access.hasLateralMenu || store.state.profile.access.isTeacher)
       return {
-        displayedSubHeader
+        displayedSubHeader,
+        showDateTimeRange
       }
     }
   })

components/Ui/Input/DatePicker.vue

@@ -17,6 +17,8 @@
           :disabled="readOnly"
           v-bind="attrs"
           v-on="on"
+          :dense="dense"
+          :single-line="singleLine"
         ></v-text-field>
       </template>
       <v-date-picker
@@ -32,8 +34,8 @@
 
 
 <script lang="ts">
-  import {defineComponent, watch, ref, useContext, onUnmounted} from '@nuxtjs/composition-api'
-  import {$useDate} from "~/use/utils/useDate";
+  import {defineComponent, watch, ref, useContext, onUnmounted, computed} from '@nuxtjs/composition-api'
+  import DatesUtils from "~/services/utils/datesUtils";
 
   export default defineComponent({
     props: {
@@ -56,29 +58,40 @@
       range: {
         type: Boolean,
         required: false
+      },
+      dense: {
+        type: Boolean,
+        required: false
+      },
+      singleLine: {
+        type: Boolean,
+        required: false
       }
     },
     setup(props, {emit}){
       const {data, field, range} = props
       const {$moment} = useContext()
-      const useDate = $useDate($moment)
+      const dateUtils = new DatesUtils($moment)
 
-      const datesFormatted = ref()
       const datesParsed = range ? ref(Array<string>()) : ref()
 
       if(range){
         for(const date of data as Array<string>){
-          datesParsed.value.push($moment(date).format('YYYY-MM-DD'))
+          if(date)
+            datesParsed.value.push($moment(date).format('YYYY-MM-DD'))
         }
       }else{
         datesParsed.value = $moment(data as string).format('YYYY-MM-DD')
       }
-      datesFormatted.value = datesFormatted.value = useDate.handleFormattedDate(data)
 
-      const unwatch = watch(datesParsed, (newValue) => {
+      const datesFormatted = computed(()=>{
+       return dateUtils.formattedDate(datesParsed.value, 'DD/MM/YYYY')
+      })
+
+      const unwatch = watch(datesParsed, (newValue, oldValue) => {
+        if(newValue === oldValue) return
         if(range && newValue.length < 2) return
-        datesFormatted.value = useDate.handleFormattedDate(newValue)
-        emit('update', newValue, field)
+        emit('update', range ? dateUtils.sortDate(newValue) : newValue, field)
       })
 
       onUnmounted(()=>{

lang/layout/fr-FR.js

@@ -99,5 +99,6 @@ export default (context, locale) => {
     notification: 'Notifications',
     history_help: 'Personnaliser la pédiode d\'affichage',
     period_choose: 'Période à afficher',
+    date_choose: 'Choix de la période',
   })
 }

services/utils/datesUtils.ts

@@ -0,0 +1,31 @@
+import moment from 'moment'
+
+export default class DatesUtils {
+  private $moment:typeof moment;
+
+  constructor(momentInstance:any) {
+    this.$moment = momentInstance
+  }
+
+  formattedDate(dates:any, format:string): string{
+    const d_format:Array<string> = []
+    if(dates instanceof Array){
+      for(const date of dates){
+        d_format.push(this.$moment(date).format(format))
+      }
+    }else{
+      d_format.push(this.$moment(dates as string).format(format))
+    }
+    return d_format.join(' - ')
+  }
+
+  sortDate(dates:Array<string>): Array<string>{
+    return dates.sort( (a, b) => {
+      if (a > b)
+        return 1;
+      if (a < b)
+        return -1;
+      return 0;
+    });
+  }
+}

tests/unit/use/updater/useMyProfileUpdater.spec.ts

@@ -41,6 +41,13 @@ describe('getHistoricalEntry()', () => {
   })
 })
 
+describe('getHistoricalRangeEntry()', () => {
+  it('should return an json object', () => {
+    const historical = useMyProfileUpdater.getHistoricalRangeEntry(['2020/01/01', '2020/01/31'])
+    expect(historical).toStrictEqual({past: false, present: false, future: false, dateStart: '2020/01/01', dateEnd: '2020/01/31'})
+  })
+})
+
 describe('createNewMyProfileInstance()', () => {
   it('should create an My Profile instance', () => {
     const state_my_profile = {

use/updater/useMyProfileUpdater.ts

@@ -31,6 +31,7 @@ export class UseMyProfileUpdater{
       updateMyProfile: () => this.updateMyProfile(),
       setActivityYear: (activityYear:number) => this.setActivityYear(activityYear),
       setHistorical: (historicalChoices:Array<string>) => this.setHistorical(historicalChoices),
+      setHistoricalRange: (dates:Array<string>) => this.setHistoricalRange(dates),
       activityYear,
       historical
     }
@@ -67,6 +68,14 @@ export class UseMyProfileUpdater{
     repositoryHelper.updateStoreFromField(MyProfile, this.myProfile, this.getHistoricalEntry(historicalChoices), 'historical')
   }
 
+  /**
+   * Mets à jour l'historical de my profile
+   * @param dates
+   */
+  private setHistoricalRange(dates:Array<string>){
+    repositoryHelper.updateStoreFromField(MyProfile, this.myProfile, this.getHistoricalRangeEntry(dates), 'historical')
+  }
+
   /**
    * Transform les choix de l'historique en objet JSON reconnaissable coté API
    * @param historicalChoices
@@ -80,6 +89,14 @@ export class UseMyProfileUpdater{
     return historicalDefault;
   }
 
+  /**
+   * Trasnforme le choix des période en Objet JSON reconnaissable coté API
+   * @param dates
+   */
+  private getHistoricalRangeEntry(dates:Array<string>){
+    return {'past':false, 'future':false, 'present':false, dateStart:dates[0], dateEnd:dates[1]}
+  }
+
   /**
    * Effectue la mise à jour (coté API) de MyProfile
    */

use/utils/useDate.ts

@@ -1,23 +0,0 @@
-import moment from 'moment'
-
-class UseDate {
-  private $moment:typeof moment;
-
-  constructor(momentInstance:any) {
-    this.$moment = momentInstance
-  }
-
-  handleFormattedDate(dates:any){
-    const d_format:Array<string> = []
-    if(dates instanceof Array){
-      for(const date of dates){
-        d_format.push(this.$moment(date).format('DD/MM/YYYY'))
-      }
-    }else{
-      d_format.push(this.$moment(dates as string).format('DD/MM/YYYY'))
-    }
-    return d_format.join(' - ')
-  }
-}
-
-export const $useDate = (momentInstance: typeof moment) => new UseDate(momentInstance)