@dative-gpi/foundation-shared-components 1.0.56 → 1.0.58-groupings

package/components/agenda/FSAgenda.vue

@@ -1,13 +1,14 @@
 <template>
   <FSCol
+    v-if="$props.start && $props.end"
     :height="$props.height"
     :width="$props.width"
     gap="24px"
   >
     <FSAgendaHeader
       :mode="$props.mode!"
-      :start="start"
-      :end="end"
+      :start="$props.start"
+      :end="$props.end"
       :now="now"
       @update:start="($event) => $emit('update:start', $event)"
       @update:end="($event) => $emit('update:end', $event)"
@@ -28,8 +29,8 @@
           :value="AgendaMode.Day"
           :events="$props.events"
           :firstColumnWidth="dayColumnWidth"
-          :start="start"
-          :end="end"
+          :start="$props.start"
+          :end="$props.end"
           :now="now"
           :nowIsInSelectedRange="nowIsInSelectedRange"
           :loading="$props.loading"
@@ -44,8 +45,8 @@
           :value="AgendaMode.Week"
           :events="$props.events"
           :firstColumnWidth="dayColumnWidth"
-          :start="start"
-          :end="end"
+          :start="$props.start"
+          :end="$props.end"
           :now="now"
           :nowIsInSelectedRange="nowIsInSelectedRange"
           :loading="$props.loading"
@@ -60,8 +61,8 @@
           :value="AgendaMode.Month"
           :events="$props.events"
           :firstColumnWidth="dayColumnWidth"
-          :start="start"
-          :end="end"
+          :start="$props.start"
+          :end="$props.end"
           :now="now"
           :nowIsInSelectedRange="nowIsInSelectedRange"
           :loading="$props.loading"
@@ -78,7 +79,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, computed, ref, onUnmounted, watch } from 'vue';
+import { defineComponent, type PropType, computed, ref, onUnmounted, watch, onMounted } from 'vue';
 
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
@@ -140,7 +141,7 @@ export default defineComponent({
       required: false
     }
   },
-  emits: ['update:mode', 'click:eventId', 'update:start', 'update:end'],
+  emits: ['update', 'update:mode', 'click:eventId', 'update:start', 'update:end'],
   setup(props, { emit }) {
     const { todayToEpoch, epochToLocalDayStart, epochToLocalDayEnd } = useDateFormat();
     const { isExtraSmall } = useBreakpoints();
@@ -150,41 +151,45 @@ export default defineComponent({
     const now = ref(todayToEpoch());
     const defaultMode = ref(props.mode);
 
-    const start = computed<number>(() => {
-      if (props.start) {
-        return props.start;
-      }
-      if (props.mode === AgendaMode.Week) {
-        return epochToLocalDayStart(now.value - (new Date(now.value).getDay() - 1) * 24 * 60 * 60 * 1000);
-      }
-      if (props.mode === AgendaMode.Month) {
-        return epochToLocalDayStart(new Date(now.value).setDate(1));
+    const nowIsInSelectedRange = computed(() => {
+      if (!props.start || !props.end) {
+        return false;
       }
-      return epochToLocalDayStart(now.value);
+      return now.value >= props.start && now.value <= props.end;
     });
 
-    const end = computed<number>(() => {
-      if (props.end) {
-        return props.end;
+    const nowInterval = setInterval(() => {
+      now.value = todayToEpoch();
+    }, 10000);
+
+    onMounted(() => {
+      if(props.end && props.start) {
+        return;
       }
       if (props.mode === AgendaMode.Week) {
-        return epochToLocalDayEnd(now.value + (7 - new Date(now.value).getDay()) * 24 * 60 * 60 * 1000);
+        const newStart = epochToLocalDayStart(now.value - (new Date(now.value).getDay() - 1) * 24 * 60 * 60 * 1000);
+        const newEnd = epochToLocalDayEnd(now.value + (7 - new Date(now.value).getDay()) * 24 * 60 * 60 * 1000);
+        emit("update:start", newStart);
+        emit("update:end", newEnd);
+        emit("update", { start: newStart, end: newEnd, mode: props.mode });
+        return;
       }
       if (props.mode === AgendaMode.Month) {
         const lastDayOfMonth = new Date(new Date(now.value).getFullYear(), new Date(now.value).getMonth() + 1, 0);
-        return epochToLocalDayEnd(lastDayOfMonth.getTime());
+        const newStart = epochToLocalDayStart(new Date(now.value).setDate(1));
+        const newEnd = lastDayOfMonth.getTime()
+        emit("update:start", newStart);
+        emit("update:end", newEnd );
+        emit("update", { start: newStart, end: newEnd, mode: props.mode });
+        return;
       }
-      return epochToLocalDayEnd(now.value);
+      const newStart = epochToLocalDayStart(now.value);
+      const newEnd = epochToLocalDayEnd(now.value);
+      emit("update:start", newStart);
+      emit("update:end", newEnd);
+      emit("update", { start: newStart, end: newEnd, mode: props.mode });
     });
 
-    const nowIsInSelectedRange = computed(() => {
-      return now.value >= start.value && now.value <= end.value;
-    });
-
-    const nowInterval = setInterval(() => {
-      now.value = todayToEpoch();
-    }, 10000);
-
     onUnmounted(() => {
       clearInterval(nowInterval);
     });
@@ -192,16 +197,24 @@ export default defineComponent({
     watch(isExtraSmall, (value) => {
       if (value && props.mode !== AgendaMode.Day) {
         emit('update:mode', AgendaMode.Day);
+        emit("update", {
+          start: props.start,
+          end: props.end,
+          mode: AgendaMode.Day
+        });
       } else if (!value && defaultMode.value !== AgendaMode.Day) {
         emit('update:mode', defaultMode.value);
+        emit("update", {
+          start: props.start,
+          end: props.end,
+          mode: defaultMode.value
+        });
       }
-    }, {immediate: true});
+    });
 
     return {
       AgendaMode,
-      start,
       dayColumnWidth,
-      end,
       now,
       nowIsInSelectedRange
     };

package/components/agenda/FSAgendaDialogCalendar.vue

@@ -7,8 +7,8 @@
       :elevation="true"
     >
       <FSCol
-        gap="12px"
         padding="16px"
+        gap="12px"
       >
         <FSCalendar
           v-model="calendarValue"
@@ -16,7 +16,7 @@
         <FSButton
           color="primary"
           width="100%"
-          :label="$tr('ui.agenda.calendar.dialog.submit', 'Validate')"
+          :label="$tr('ui.common.submit', 'Validate')"
           @click="onSubmit"
         />
       </FSCol>

package/components/agenda/FSAgendaHeader.vue

@@ -16,12 +16,18 @@
           @click="onPrevious"
         />
         <FSButton
-          width="180px"
+          width="220px"
           color="primary"
           :border="false"
-          :label="epochToMonthYearOnlyFormat($props.start)"
           @click="showCalendarDialog = true"
-        />
+        >
+          <FSSpan
+            class="fs-agenda-header-text"
+            font="text-button"
+          >
+            {{ epochToMonthYearOnlyFormat($props.start) }}
+          </FSSpan>
+        </FSButton>
         <FSButton
           variant="icon"
           icon="mdi-chevron-right"
@@ -41,7 +47,7 @@
           />
           <FSButton
             prependIcon="mdi-calendar-today-outline"
-            :label="$tr('ui.agenda.today', 'Today')"
+            :label="$tr('ui.common.today', 'Today')"
             @click="onToday"
           />
         </FSRow>
@@ -52,7 +58,7 @@
     >
       <FSButton
         prependIcon="mdi-calendar-today-outline"
-        :label="$tr('ui.agenda.today', 'Today')"
+        :label="$tr('ui.common.today', 'Today')"
         width="100%"
         @click="onToday"
       />
@@ -89,7 +95,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref } from 'vue';
+import { defineComponent, type PropType, ref, watch } from 'vue';
 
 import { useDateFormat } from '@dative-gpi/foundation-shared-services/composables';
 
@@ -100,6 +106,7 @@ import FSRow from '../FSRow.vue';
 import FSButton from '../FSButton.vue';
 import FSSelectAgendaMode from './FSSelectAgendaMode.vue';
 import FSAgendaDialogCalendar from './FSAgendaDialogCalendar.vue';
+import FSSpan from '../FSSpan.vue';
 
 export default defineComponent({
   name: 'FSAgendaHeader',
@@ -108,6 +115,7 @@ export default defineComponent({
     FSSelectAgendaMode,
     FSCol,
     FSButton,
+    FSSpan,
     FSRow
   },
   props: {
@@ -128,7 +136,7 @@ export default defineComponent({
       required: true
     }
   },
-  emits: ['update:start', 'update:end', 'update:mode'],
+  emits: ['update', 'update:start', 'update:end', 'update:mode'],
   setup(props, { emit }) {
     const { epochToMonthYearOnlyFormat, epochToDayMonthLongOnly, epochToLocalDayStart, epochToLocalDayEnd } = useDateFormat();
 
@@ -137,18 +145,24 @@ export default defineComponent({
     const updateDateRange = (dayStart: number) => {
       const newStart = epochToLocalDayStart(dayStart);
       if (props.mode === AgendaMode.Week) {
+        const newEnd = epochToLocalDayEnd(newStart + (7 - new Date(newStart).getDay()) * 24 * 60 * 60 * 1000)
         emit('update:start', newStart);
-        emit('update:end', epochToLocalDayEnd(newStart + (7 - new Date(newStart).getDay()) * 24 * 60 * 60 * 1000));
+        emit('update:end', newEnd);
+        emit('update', { start: newStart, end: newEnd, mode: props.mode })
         return;
       }
       if (props.mode === AgendaMode.Month) {
         emit('update:start', newStart);
         const lastDayOfMonth = new Date(new Date(newStart).getFullYear(), new Date(newStart).getMonth() + 1, 0);
-        emit('update:end', epochToLocalDayEnd(lastDayOfMonth.getTime()));
+        const newEnd = epochToLocalDayEnd(lastDayOfMonth.getTime());
+        emit('update:end', newEnd);
+        emit('update', { start: newStart, end: newEnd, mode: props.mode })
         return;
       }
+      const newEnd = epochToLocalDayEnd(newStart);
       emit('update:start', newStart);
-      emit('update:end', epochToLocalDayEnd(newStart));
+      emit('update:end', newEnd);
+      emit('update', { start: newStart, end: newEnd, mode: props.mode })
     }
 
     const onNext = () => {
@@ -175,6 +189,17 @@ export default defineComponent({
       }
     }
 
+    watch(() => props.mode, (newMode) => {
+      const dayBtwStartAndEnd = props.start + (props.end - props.start) / 2;
+      if (newMode === AgendaMode.Week) {
+        updateDateRange(dayBtwStartAndEnd - (new Date(dayBtwStartAndEnd).getDay() - 1) * 24 * 60 * 60 * 1000);
+      } else if (newMode === AgendaMode.Month) {
+        updateDateRange(new Date(dayBtwStartAndEnd).setDate(1));
+      } else if (newMode === AgendaMode.Day) {
+        updateDateRange(dayBtwStartAndEnd);
+      }
+    });
+
     return {
       AgendaMode,
       showCalendarDialog,

package/components/agenda/FSAgendaHorizontalEvent.vue

@@ -15,7 +15,7 @@
     @click="$emit('click', $props.id)"
   >
     <template
-      #default="{ label, icon, timeStart, timeEnd, iconBis, variant }"
+      #default="{ label, icon, timeStart, timeEnd, iconBis, variant, width }"
     >
       <slot
         name="default"
@@ -25,6 +25,7 @@
         :timeStart="timeStart"
         :timeEnd="timeEnd"
         :variant="variant"
+        :width="width"
       />
     </template>
   </FSAgendaHorizontalEvent>
@@ -43,10 +44,11 @@
       name="default"
       :label="label"
       :icon="icon"
-      :iconBis="iconBis"
+      :iconBis="endToday ? iconBis : null"
       :timeStart="epochToShortTimeOnlyFormat($props.start)"
       :timeEnd="epochToShortTimeOnlyFormat($props.end)"
       :variant="$props.variant"
+      :width="width"
     />
   </FSClickable>
 </template>
@@ -118,12 +120,20 @@ export default defineComponent({
       return dayEnd.value - props.dayStart;
     });
 
+    const startToday = computed(() => {
+      return props.start >= props.dayStart;
+    });
+
+    const endToday = computed(() => {
+      return props.end <= dayEnd.value;
+    });
+
     const dayDurationOffset = computed(() => {
       return dayDuration.value - dayToMillisecond(1);
     });
 
     const leftPosition = computed(() => {
-      if (props.start < props.dayStart) {
+      if (!startToday.value) {
         return 0;
       }
       return millisecondToDay(props.start - props.dayStart - dayDurationOffset.value) * 100;
@@ -132,12 +142,12 @@ export default defineComponent({
     const width = computed(() => {
       let start = props.start - dayDurationOffset.value;
       let end = props.end - dayDurationOffset.value;
-      if(props.variant === 'current') {
+      if(props.variant === 'current' && dayEnd.value > props.now) {
         end = props.now;
-      } else if (props.end > dayEnd.value) {
+      } else if (!endToday.value) {
         end = dayEnd.value - dayDurationOffset.value;
       }
-      if (props.start < props.dayStart) {
+      if (!startToday.value) {
         start = props.dayStart;
       }
       
@@ -148,12 +158,14 @@ export default defineComponent({
     const style = computed((): StyleValue => {
       return {
         '--fs-agenda-event-left': `${leftPosition.value}%`,
+        '--fs-agenda-event-border-width': startToday.value ? '3px' : '0px',
       };
     });
 
     return {
       style,
       width,
+      endToday,
       epochToShortTimeOnlyFormat
     };
   }

package/components/agenda/FSAgendaHoursRow.vue

@@ -3,6 +3,7 @@
     gap="0"
   >
     <FSRow
+      :padding="`0 ${paddingRightHours} 0 ${paddingLeftHours}`"
       class="fs-agenda-hours-row"
       :wrap="false"
       gap="0"
@@ -36,14 +37,15 @@
       </FSRow>
     </FSRow>
     <FSRow
-      class="fs-agenda-hours-row"
+      :padding="`0 ${paddingRightMarkers} 0 ${paddingLeftMarkers}`"
+      class="fs-agenda-hours-row-markers"
       :wrap="false"
       gap="0"
     >
       <FSRow
-        v-for="hour in hours"
-        :key="hour"
-        :style="getMarkerStyle(displayNow && hour === modelValue)"
+        v-for="hour in 24"
+        :key="hour-1"
+        :style="getMarkerStyle(displayNow && hour-1 === modelValue)"
         width="100%"
         height="0"
         align="center-center"
@@ -59,7 +61,7 @@
 <script lang="ts">
 import { defineComponent, computed, type StyleValue } from 'vue';
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSText from '../FSText.vue';
@@ -87,18 +89,51 @@ export default defineComponent({
       required: false,
       default: false,
     },
+    firstColumnWidth: {
+      type: String,
+      required: true,
+    },
   },
-  setup() {
+  setup(props) {
     const { getColors } = useColors();
+    const { isMobileSized } = useBreakpoints();
 
     const lightColors = getColors(ColorEnum.Light);
     const primaryColors = getColors(ColorEnum.Primary);
     const fontColor = lightColors.dark;
 
+    const hoursToShow = computed(() => {
+      if(isMobileSized.value) {
+        return 12;
+      }
+      return 24;
+    });
+
     const hours = computed(() => {
-      return Array.from({ length: 24 }, (_, i) => i);
+      return Array.from({ length: hoursToShow.value }, (_, i) => i * (24 / hoursToShow.value));
+    });
+
+    const paddingLeftHours = computed(() => {
+      // ((100% - ${props.firstColumnWidth}) / ${hoursToShow.value}) is the width of each hour slot (2 hour if 12 hours are shown, 1 hour if 24 hours are shown)
+      // 0.5 * ((100% - ${props.firstColumnWidth}) / ${hoursToShow.value}) is half of the width of each hour slot
+      // So we have : ${props.firstColumnWidth} - Half of the width of each hour slot
+      return `calc(${props.firstColumnWidth} - 0.5 * ((100% - ${props.firstColumnWidth}) / ${hoursToShow.value}))`;
     });
 
+    const paddingRightHours = computed(() => {
+      return `calc(0.5 * ((100% - ${props.firstColumnWidth}) / ${hoursToShow.value}))`;
+    });
+
+    const paddingLeftMarkers = computed(() => {
+      return `calc(${props.firstColumnWidth} - 0.5 * ((100% - ${props.firstColumnWidth}) / 24))`;
+    });
+
+    const paddingRightMarkers = computed(() => {
+      return `calc(0.5 * ((100% - ${props.firstColumnWidth}) / 24))`;
+    });
+
+
+
     const getMarkerStyle = (isNowHour: boolean): StyleValue => {
       if(isNowHour) {
         return {
@@ -113,8 +148,13 @@ export default defineComponent({
     const to2Digits = (value: number) => value.toString().padStart(2, '0');
 
     return {
-      fontColor,
       hours,
+      fontColor,
+      hoursToShow,
+      paddingLeftHours,
+      paddingRightHours,
+      paddingLeftMarkers,
+      paddingRightMarkers,
       getMarkerStyle,
       to2Digits
     };

package/components/agenda/FSAgendaVerticalEvent.vue

@@ -131,7 +131,7 @@ export default defineComponent({
     const height = computed(() => {
       let start = props.start - dayDurationOffset.value;
       let end = props.end - dayDurationOffset.value;
-      if (props.variant === 'current') {
+      if (props.variant === 'current' && dayEnd.value > props.now) {
         end = props.now;
       } else if (props.end > dayEnd.value) {
         end = dayEnd.value - dayDurationOffset.value;

package/components/agenda/FSDayAgenda.vue

@@ -2,7 +2,6 @@
   <FSRow
     class="fs-day-agenda"
     height="100%"
-    padding="8px 0 0 0"
     :wrap="false"
     gap="0px"
     :style="style"
@@ -180,7 +179,7 @@ export default defineComponent({
 
     const dayEvents = computed(() => {
       return props.events.filter((event) => {
-        return (event.start <= props.end && event.start >= props.start) || (event.end <= props.end && event.end >= props.start);
+        return event.start < props.end && event.end > props.start;
       });
     });
 

package/components/agenda/FSMonthAgenda.vue

@@ -9,13 +9,8 @@
       gap="0"
       :wrap="false"
     >
-      <FSCol
-        height="100%"
-        :width="$props.firstColumnWidth"
-      >
-      </FSCol>
-    
       <FSAgendaHoursRow
+        :firstColumnWidth="$props.firstColumnWidth"
         :displayNow="$props.nowIsInSelectedRange"
         :modelValue="nowHour"
       />
@@ -240,9 +235,8 @@ export default defineComponent({
 
     const getDayEvents = (dayStartEpoch: number) => {
       return props.events.filter((event) => {
-        const isStartingInDay = event.start >= dayStartEpoch && event.start < (dayStartEpoch + 1000 * 60 * 60 * 24);
-        const isEndingInDay = event.end >= dayStartEpoch && event.end < (dayStartEpoch + 1000 * 60 * 60 * 24);
-        return isStartingInDay || isEndingInDay;
+        const dayEndEpoch = dayStartEpoch + 1000 * 60 * 60 * 24;
+        return event.start < dayEndEpoch && event.end > dayStartEpoch;
       });
     };
 

package/components/agenda/FSSelectAgendaMode.vue

@@ -42,8 +42,8 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
 
     const items = [
-      { id: AgendaMode.Week, label: $tr('ui.agenda.week', 'Week'), icon: 'mdi-calendar-week' },
-      { id: AgendaMode.Month, label: $tr('ui.agenda.month', 'Month'), icon: 'mdi-calendar-month' },
+      { id: AgendaMode.Week, label: $tr('ui.common.week', 'Week'), icon: 'mdi-calendar-week' },
+      { id: AgendaMode.Month, label: $tr('ui.common.month', 'Month'), icon: 'mdi-calendar-month' },
     ];
 
     return {

package/components/agenda/FSWeekAgenda.vue

@@ -9,13 +9,8 @@
       gap="0"
       :wrap="false"
     >
-      <FSCol
-        height="100%"
-        :width="$props.firstColumnWidth"
-      >
-      </FSCol>
-    
       <FSAgendaHoursRow
+        :firstColumnWidth="$props.firstColumnWidth"
         :displayNow="$props.nowIsInSelectedRange"
         :modelValue="nowHour"
       />
@@ -75,7 +70,7 @@
                 class="fs-agenda-week-number-label"
                 :color="weekTextColor"
               >
-                {{ $tr('ui.common.agenda.week-short', 'W{0}',day.weekNumber) }}
+                {{ $tr('ui.common.week-short', 'W{0}',day.weekNumber) }}
               </FSText>
             </FSCol>
           </FSCard>
@@ -125,7 +120,7 @@
               @click="() => $emit('click:eventId', event.id)"
             >
               <template
-                #default="{ label, icon, timeStart, timeEnd, iconBis, variant }"
+                #default="{ label, icon, timeStart, timeEnd, iconBis, variant, width }"
               >
                 <FSRow
                   align="center-left"
@@ -158,7 +153,7 @@
                     </FSRow>
                   </FSCol>
                   <FSCol
-                    v-if="iconBis && variant !== 'current'"
+                    v-if="iconBis && variant !== 'current' && width > 13"
                     align="center-right"
                     padding="8px 8px 8px 0" 
                     width="hug"
@@ -259,7 +254,7 @@ export default defineComponent({
         $tr('ui.common.monday-short', 'MON'),
         $tr('ui.common.tuesday-short', 'TUE'),
         $tr('ui.common.wednesday-short', 'WED'),
-        $tr('uui.common.thursday-short', 'THU'),
+        $tr('ui.common.thursday-short', 'THU'),
         $tr('ui.common.friday-short', 'FRI'),
         $tr('ui.common.saturday-short', 'SAT')
       ];
@@ -309,9 +304,8 @@ export default defineComponent({
 
     const getDayEvents = (dayStartEpoch: number) => {
       return props.events.filter((event) => {
-        const isStartingInDay = event.start >= dayStartEpoch && event.start < (dayStartEpoch + 1000 * 60 * 60 * 24);
-        const isEndingInDay = event.end >= dayStartEpoch && event.end < (dayStartEpoch + 1000 * 60 * 60 * 24);
-        return isStartingInDay || isEndingInDay;
+        const dayEndEpoch = dayStartEpoch + 1000 * 60 * 60 * 24;
+        return event.start < dayEndEpoch && event.end > dayStartEpoch;
       });
     };