@dative-gpi/foundation-shared-components 1.0.51 → 1.0.53

package/components/agenda/FSAgendaHorizontalEvent.vue

@@ -0,0 +1,162 @@
+<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 }"
+    >
+      <slot
+        name="default"
+        :label="label"
+        :icon="icon"
+        :iconBis="iconBis"
+        :timeStart="timeStart"
+        :timeEnd="timeEnd"
+        :variant="variant"
+      />
+    </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="iconBis"
+      :timeStart="epochToShortTimeOnlyFormat($props.start)"
+      :timeEnd="epochToShortTimeOnlyFormat($props.end)"
+      :variant="$props.variant"
+    />
+  </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 dayDurationOffset = computed(() => {
+      return dayDuration.value - dayToMillisecond(1);
+    });
+
+    const leftPosition = computed(() => {
+      if (props.start < props.dayStart) {
+        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') {
+        end = props.now;
+      } else if (props.end > dayEnd.value) {
+        end = dayEnd.value - dayDurationOffset.value;
+      }
+      if (props.start < props.dayStart) {
+        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}%`,
+      };
+    });
+
+    return {
+      style,
+      width,
+      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,124 @@
+<template>
+  <FSCol
+    gap="0"
+  >
+    <FSRow
+      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
+      class="fs-agenda-hours-row"
+      :wrap="false"
+      gap="0"
+    >
+      <FSRow
+        v-for="hour in hours"
+        :key="hour"
+        :style="getMarkerStyle(displayNow && hour === 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 { 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,
+    },
+  },
+  setup() {
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+    const primaryColors = getColors(ColorEnum.Primary);
+    const fontColor = lightColors.dark;
+
+    const hours = computed(() => {
+      return Array.from({ length: 24 }, (_, i) => i);
+    });
+
+    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 {
+      fontColor,
+      hours,
+      getMarkerStyle,
+      to2Digits
+    };
+  },
+});
+
+</script>

package/components/agenda/FSAgendaVerticalEvent.vue

@@ -0,0 +1,160 @@
+<template>
+  <FSAgendaVerticalEvent
+    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 }"
+    >
+      <slot
+        name="default"
+        :label="label"
+        :icon="icon"
+        :iconBis="iconBis"
+        :timeStart="timeStart"
+        :timeEnd="timeEnd"
+        :variant="variant"
+      />
+    </template>
+  </FSAgendaVerticalEvent>
+  <FSClickable
+    v-if="$props.variant !== 'current' || $props.dayStart < $props.now"
+    :class="`fs-agenda-event fs-agenda-vertical-event fs-agenda-event-${$props.variant}`"
+    :variant="$props.variant === 'current' ? 'full' : 'standard'"
+    :style="style"
+    :color="$props.color"
+    :height="`${height}%`"
+    width="100%"
+    :border="false"
+    @click="$emit('click', $props.id)"
+  >
+    <slot
+      name="default"
+      :label="label"
+      :icon="icon"
+      :iconBis="iconBis"
+      :timeStart="epochToShortTimeOnlyFormat($props.start)"
+      :timeEnd="epochToShortTimeOnlyFormat($props.end)"
+      :variant="$props.variant"
+    />
+  </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: 'FSAgendaVerticalEvent',
+  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 dayDurationOffset = computed(() => {
+      return dayDuration.value - dayToMillisecond(1);
+    });
+
+    const topPosition = computed(() => {
+      if (props.start < props.dayStart) {
+        return 0;
+      }
+      return millisecondToDay(props.start - props.dayStart - dayDurationOffset.value) * 100;
+    });
+
+    const height = computed(() => {
+      let start = props.start - dayDurationOffset.value;
+      let end = props.end - dayDurationOffset.value;
+      if (props.variant === 'current') {
+        end = props.now;
+      } else if (props.end > dayEnd.value) {
+        end = dayEnd.value - dayDurationOffset.value;
+      }
+      if (props.start < props.dayStart) {
+        start = props.dayStart;
+      }
+      
+      const duration = millisecondToDay(end - start);
+      return duration > 0 ? (duration * 100) : 0;
+    });
+
+    const style = computed((): StyleValue => {
+      return {
+        '--fs-agenda-event-top': `${topPosition.value}%`,
+      };
+    });
+
+    return {
+      style,
+      height,
+      epochToShortTimeOnlyFormat
+    };
+  }
+});
+</script>

package/components/agenda/FSAgendaVerticalTimeLineMarker.vue

@@ -0,0 +1,46 @@
+<template>
+  <div 
+    class="fs-agenda-vertical-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: 'FSAgendaVerticalTimeLineMarker',
+  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 topOffset = computed(() => {
+      return nowDate.value.getHours() * 100 / 24 + nowDate.value.getMinutes() * 100 / 24 / 60;
+    });
+
+    const style = computed((): StyleValue => ({
+      "--fs-agenda-vertical-time-line-marker-top": `${topOffset.value}%`,
+      "--fs-agenda-vertical-time-line-marker-color": primaryColor.base
+    }));
+
+    return {
+      style,
+    };
+  },
+});
+</script>