@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

package/components/agenda/FSAgendaHeader.vue

@@ -0,0 +1,215 @@
+<template>
+  <FSRow 
+    align="center-center"
+  >
+    <template 
+      v-if="$props.mode !== AgendaMode.Day"
+    >
+      <FSRow
+        align="center-left"
+        :wrap="false"
+        width="hug"
+      >
+        <FSButton
+          variant="icon"
+          icon="mdi-chevron-left"
+          @click="onPrevious"
+        />
+        <FSButton
+          width="220px"
+          color="primary"
+          :border="false"
+          @click="showCalendarDialog = true"
+        >
+          <FSSpan
+            class="fs-agenda-header-text"
+            font="text-button"
+          >
+            {{ epochToMonthYearOnlyFormat($props.start) }}
+          </FSSpan>
+        </FSButton>
+        <FSButton
+          variant="icon"
+          icon="mdi-chevron-right"
+          @click="onNext"
+        />
+      </FSRow>
+      <FSRow
+        align="center-right"
+      >
+        <FSRow
+          width="hug"
+        >
+          <FSSelectAgendaMode
+            :modelValue="$props.mode"
+            :hideHeader="true"
+            @update:modelValue="$emit('update:mode', $event)"
+          />
+          <FSButton
+            prependIcon="mdi-calendar-today-outline"
+            :label="$tr('ui.common.today', 'Today')"
+            @click="onToday"
+          />
+        </FSRow>
+      </FSRow>
+    </template>
+    <FSCol
+      v-else
+    >
+      <FSButton
+        prependIcon="mdi-calendar-today-outline"
+        :label="$tr('ui.common.today', 'Today')"
+        width="100%"
+        @click="onToday"
+      />
+      <FSRow
+        :wrap="false"
+        align="center-center"
+        padding="0 4px"
+      >
+        <FSButton
+          variant="icon"
+          icon="mdi-chevron-left"
+          @click="onPrevious"
+        />
+        <FSButton
+          width="100%"
+          color="primary"
+          :border="false"
+          :label="epochToDayMonthLongOnly($props.start)"
+          @click="showCalendarDialog = true"
+        />
+        <FSButton
+          variant="icon"
+          icon="mdi-chevron-right"
+          @click="onNext"
+        />
+      </FSRow>
+    </FSCol>
+  </FSRow>
+  <FSAgendaDialogCalendar
+    v-model:dialog="showCalendarDialog"
+    :modelValue="$props.start"
+    @update:modelValue="updateDateRange($event)"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, ref, watch } from 'vue';
+
+import { useDateFormat } from '@dative-gpi/foundation-shared-services/composables';
+
+import { AgendaMode } from '@dative-gpi/foundation-shared-domain/enums/agendas';
+
+import FSCol from '../FSCol.vue';
+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',
+  components: {
+    FSAgendaDialogCalendar,
+    FSSelectAgendaMode,
+    FSCol,
+    FSButton,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    mode: {
+      type: Number as PropType<AgendaMode>,
+      required: true
+    },
+    start: {
+      type: Number,
+      required: true
+    },
+    end: {
+      type: Number,
+      required: true
+    },
+    now: {
+      type: Number,
+      required: true
+    }
+  },
+  emits: ['update', 'update:start', 'update:end', 'update:mode'],
+  setup(props, { emit }) {
+    const { epochToMonthYearOnlyFormat, epochToDayMonthLongOnly, epochToLocalDayStart, epochToLocalDayEnd } = useDateFormat();
+
+    const showCalendarDialog = ref(false);
+
+    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', 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);
+        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', newEnd);
+      emit('update', { start: newStart, end: newEnd, mode: props.mode })
+    }
+
+    const onNext = () => {
+      updateDateRange(props.end + 1000 * 60);
+    }
+
+    const onPrevious = () => {
+      if (props.mode === AgendaMode.Week) {
+        updateDateRange(props.start - 7 * 24 * 60 * 60 * 1000);
+      } else if (props.mode === AgendaMode.Month) {
+        updateDateRange(new Date(props.start).setMonth(new Date(props.start).getMonth() - 1));
+      } else if (props.mode === AgendaMode.Day) {
+        updateDateRange(props.start - 24 * 60 * 60 * 1000);
+      }
+    }
+
+    const onToday = () => {
+      if (props.mode === AgendaMode.Week) {
+        updateDateRange(props.now - (new Date(props.now).getDay() - 1) * 24 * 60 * 60 * 1000);
+      } else if (props.mode === AgendaMode.Month) {
+        updateDateRange(new Date(props.now).setDate(1));
+      } else if (props.mode === AgendaMode.Day) {
+        updateDateRange(props.now);
+      }
+    }
+
+    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,
+      epochToDayMonthLongOnly,
+      epochToMonthYearOnlyFormat,
+      onNext,
+      onPrevious,
+      onToday,
+      updateDateRange
+    }
+  }
+});
+</script>

package/components/agenda/FSAgendaHorizontalEvent.vue

@@ -0,0 +1,174 @@
+<template>
+  <FSAgendaHorizontalEvent
+    v-if="$props.variant === 'current'"
+    :key="$props.id"
+    variant="future"
+    :now="$props.now"
+    :dayStart="$props.dayStart"
+    :label="$props.label"
+    :start="$props.start"
+    :end="$props.end"
+    :icon="$props.icon"
+    :iconBis="$props.iconBis"
+    :id="$props.id"
+    :color="$props.color"
+    @click="$emit('click', $props.id)"
+  >
+    <template
+      #default="{ label, icon, timeStart, timeEnd, iconBis, variant, width }"
+    >
+      <slot
+        name="default"
+        :label="label"
+        :icon="icon"
+        :iconBis="iconBis"
+        :timeStart="timeStart"
+        :timeEnd="timeEnd"
+        :variant="variant"
+        :width="width"
+      />
+    </template>
+  </FSAgendaHorizontalEvent>
+  <FSClickable
+    v-if="$props.variant !== 'current' || $props.dayStart < $props.now"
+    :class="`fs-agenda-event fs-agenda-event-${$props.variant}`"
+    :variant="$props.variant === 'current' ? 'full' : 'standard'"
+    :style="style"
+    :color="$props.color"
+    :width="`${width}%`"
+    height="calc(100% - 4px)"
+    :border="false"
+    @click="$emit('click', $props.id)"
+  >
+    <slot
+      name="default"
+      :label="label"
+      :icon="icon"
+      :iconBis="endToday ? iconBis : null"
+      :timeStart="epochToShortTimeOnlyFormat($props.start)"
+      :timeEnd="epochToShortTimeOnlyFormat($props.end)"
+      :variant="$props.variant"
+      :width="width"
+    />
+  </FSClickable>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, type StyleValue, type PropType } from 'vue';
+
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+
+import FSClickable from '../FSClickable.vue';
+
+
+export default defineComponent({
+  name: 'FSAgendaHorizontalEvent',
+  components: {
+    FSClickable
+  },
+  emits: ['click'],
+  props: {
+    variant: {
+      type: String as PropType<'past' | 'current' | 'future'>,
+      default: 'future'
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    start: {
+      type: Number,
+      required: true
+    },
+    end: {
+      type: Number,
+      required: true
+    },
+    icon: {
+      type: String,
+      required: false
+    },
+    iconBis: {
+      type: String,
+      required: false
+    },
+    id: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      required: true
+    },
+    dayStart: {
+      type: Number,
+      required: true
+    },
+    now: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(props) {
+    const { dayToMillisecond, epochToShortTimeOnlyFormat, millisecondToDay } = useDateFormat();
+
+    const dayEnd = computed(() => {
+      return new Date(props.dayStart).setHours(23, 59, 59, 999);
+    });
+
+    const dayDuration = computed(() => {
+      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 (!startToday.value) {
+        return 0;
+      }
+      return millisecondToDay(props.start - props.dayStart - dayDurationOffset.value) * 100;
+    });
+
+    const width = computed(() => {
+      let start = props.start - dayDurationOffset.value;
+      let end = props.end - dayDurationOffset.value;
+      if(props.variant === 'current' && dayEnd.value > props.now) {
+        end = props.now;
+      } else if (!endToday.value) {
+        end = dayEnd.value - dayDurationOffset.value;
+      }
+      if (!startToday.value) {
+        start = props.dayStart;
+      }
+      
+      const duration = millisecondToDay(end - start);
+      return duration > 0 ? (duration * 100) : 0;
+    });
+
+    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
+    };
+  }
+});
+
+</script>

package/components/agenda/FSAgendaHorizontalTimeLineMarker.vue

@@ -0,0 +1,46 @@
+<template>
+  <div 
+    class="fs-agenda-horizontal-time-line-marker"
+    :style="style"
+  >
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, type StyleValue } from 'vue';
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+export default defineComponent({
+  name: 'FSAgendaHorizontalTimeLineMarker',
+  props: {
+    modelValue: {
+      type: Number,
+      required: true,
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+
+    const primaryColor = getColors(ColorEnum.Primary);
+
+    const nowDate = computed(() => {
+      return new Date(props.modelValue);
+    });
+
+    const leftOffset = computed(() => {
+      return nowDate.value.getHours() * 100 / 24 + nowDate.value.getMinutes() * 100 / 24 / 60;
+    });
+    
+    const style = computed((): StyleValue => ({
+      "--fs-agenda-horizontal-time-line-marker-left": `${leftOffset.value}%`,
+      "--fs-agenda-horizontal-time-line-marker-color": primaryColor.base
+    }));
+
+    return {
+      style,
+    };
+  },
+});
+</script>

package/components/agenda/FSAgendaHoursCol.vue

@@ -0,0 +1,103 @@
+<template>
+  <FSRow
+    padding="0 0 0 4px"
+    gap="0"
+    width="hug"
+    height="100%"
+  >
+    <FSCol
+      class="fs-agenda-hours-col"
+      :wrap="false"
+      gap="0"
+      height="100%"
+      align="center-center"
+    >
+      <FSRow
+        v-for="hour in hours"
+        :key="hour"
+        width="100%"
+        height="100%"
+        align="center-center"
+      >
+        <FSCard
+          class="fs-agenda-hours-col-now"
+          color="primary"
+          variant="full"
+          width="100%"
+          v-if="displayNow && hour === modelValue"
+        >
+          <FSCol
+            align="center-center"
+          >
+            <FSSpan
+              class="fs-agenda-hours-col-text fs-agenda-hours-col-text-now"
+            >
+              {{ $tr('ui.common.hours-only', '{0}h', to2Digits(hour)) }}
+            </FSSpan>
+          </FSCol>
+        </FSCard>
+        <FSText
+          v-else
+          class="fs-agenda-hours-col-text"
+          :color="fontColor"
+        >
+          {{ $tr('ui.common.hours-only', '{0}h', to2Digits(hour)) }}
+        </FSText>
+      </FSRow>
+    </FSCol>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSText from '../FSText.vue';
+import FSRow from '../FSRow.vue';
+import FSCard from '../FSCard.vue';
+import FSSpan from '../FSSpan.vue';
+import FSCol from '../FSCol.vue';
+
+export default defineComponent({
+  name: 'FSAgendaHoursCol',
+  components: {
+    FSCard,
+    FSCol,
+    FSSpan,
+    FSText,
+    FSRow,
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      required: true,
+    },
+    displayNow: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  setup() {
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+    const fontColor = lightColors.dark;
+
+    const hours = computed(() => {
+      return Array.from({ length: 24 }, (_, i) => i);
+    });
+
+    const to2Digits = (value: number) => value.toString().padStart(2, '0');
+
+    return {
+      fontColor,
+      hours,
+      to2Digits
+    };
+  },
+});
+
+</script>

package/components/agenda/FSAgendaHoursRow.vue

@@ -0,0 +1,164 @@
+<template>
+  <FSCol
+    gap="0"
+  >
+    <FSRow
+      :padding="`0 ${paddingRightHours} 0 ${paddingLeftHours}`"
+      class="fs-agenda-hours-row"
+      :wrap="false"
+      gap="0"
+      align="center-center"
+    >
+      <FSRow
+        v-for="hour in hours"
+        :key="hour"
+        width="100%"
+        align="center-center"
+      >
+        <FSCard
+          class="fs-agenda-hours-row-now"
+          color="primary"
+          variant="full"
+          v-if="displayNow && hour === modelValue"
+        >
+          <FSSpan
+            class="fs-agenda-hours-row-text fs-agenda-hours-row-text-now"
+          >
+            {{ $tr('ui.common.hours-only', '{0}h', to2Digits(hour)) }}
+          </FSSpan>
+        </FSCard>
+        <FSText
+          v-else
+          class="fs-agenda-hours-row-text"
+          :color="fontColor"
+        >
+          {{ $tr('ui.common.hours-only', '{0}h', to2Digits(hour)) }}
+        </FSText>
+      </FSRow>
+    </FSRow>
+    <FSRow
+      :padding="`0 ${paddingRightMarkers} 0 ${paddingLeftMarkers}`"
+      class="fs-agenda-hours-row-markers"
+      :wrap="false"
+      gap="0"
+    >
+      <FSRow
+        v-for="hour in 24"
+        :key="hour-1"
+        :style="getMarkerStyle(displayNow && hour-1 === modelValue)"
+        width="100%"
+        height="0"
+        align="center-center"
+      >
+        <span 
+          class="fs-agenda-hours-row-marker"
+        />
+      </FSRow>
+    </FSRow>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, type StyleValue } from 'vue';
+
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSText from '../FSText.vue';
+import FSRow from '../FSRow.vue';
+import FSCard from '../FSCard.vue';
+import FSSpan from '../FSSpan.vue';
+import FSCol from '../FSCol.vue';
+
+export default defineComponent({
+  name: 'FSAgendaHoursRow',
+  components: {
+    FSCard,
+    FSCol,
+    FSSpan,
+    FSText,
+    FSRow,
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      required: true,
+    },
+    displayNow: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    firstColumnWidth: {
+      type: String,
+      required: true,
+    },
+  },
+  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: 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 {
+          '--fs-agenda-hours-row-marker-color': primaryColors.base,
+        }
+      }
+      return {
+        '--fs-agenda-hours-row-marker-color': lightColors.base,
+      }
+    };
+
+    const to2Digits = (value: number) => value.toString().padStart(2, '0');
+
+    return {
+      hours,
+      fontColor,
+      hoursToShow,
+      paddingLeftHours,
+      paddingRightHours,
+      paddingLeftMarkers,
+      paddingRightMarkers,
+      getMarkerStyle,
+      to2Digits
+    };
+  },
+});
+
+</script>