@dative-gpi/foundation-shared-components 0.0.230 → 0.1.68

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>

package/components/agenda/FSDayAgenda.vue

@@ -0,0 +1,200 @@
+<template>
+  <FSRow
+    class="fs-day-agenda"
+    height="100%"
+    padding="8px 0 0 0"
+    :wrap="false"
+    gap="0px"
+    :style="style"
+  >
+    <FSLoader
+      v-if="$props.loading"
+      width="100%"
+      height="100%"
+    />
+    <FSRow
+      v-else
+      height="100%"
+      gap="0"
+      :wrap="false"
+    >
+      <FSAgendaHoursCol
+        :displayNow="$props.nowIsInSelectedRange"
+        :modelValue="nowHour"
+      />
+      <FSCol
+        height="100%"
+        width="fill"
+        class="fs-agenda-body"
+        gap="0"
+      >
+        <span
+          v-for="hour in 24"
+          class="fs-day-agenda-hour-line"
+          :key="hour"
+        />
+        <FSCol
+          style="position: absolute;"
+          height="100%"
+          padding="0 0 0 3px"
+          width="calc(100% - 32px)"
+        >
+          <slot />
+          <FSCol
+            style="position: relative;"
+            height="100%"
+          >
+            <FSAgendaVerticalEvent
+              v-for="event in dayEvents"
+              :key="event.id"
+              :variant="event.end < now ? 'past' : event.start > now ? 'future' : 'current'"
+              :now="now"
+              :dayStart="$props.start"
+              :label="event.label"
+              :start="event.start"
+              :end="event.end"
+              :icon="event.icon"
+              :iconBis="event.iconBis"
+              :id="event.id"
+              :color="event.color"
+              @click="() => $emit('click:eventId', event.id)"
+            >
+              <template
+                #default="{ label, icon, timeStart, timeEnd, iconBis }"
+              >
+                <FSCol>
+                  <FSRow
+                    class="fs-agenda-event-day-label-container"
+                    align="center-left"
+                    gap="4px"
+                    :wrap="false"
+                  >
+                    <FSCol
+                      height="hug"
+                      width="fill"
+                      align="center-left"
+                      padding="8px 8px 0 8px"
+                    >
+                      <FSSpan>
+                        {{ `${timeStart} - ${timeEnd}` }}
+                      </FSSpan>
+                      <FSRow
+                        align="center-left"
+                        :wrap="false"
+                      >
+                        <FSIcon
+                          v-if="icon"
+                          :icon="icon"
+                        />
+                        <FSSpan
+                          font="text-button"
+                        >
+                          {{ label }}
+                        </FSSpan>
+                      </FSRow>
+                    </FSCol>
+                    <FSCol
+                      v-if="iconBis"
+                      align="center-right"
+                      padding="8px 8px 8px 0"
+                      width="hug"
+                    >
+                      <FSIcon
+                        v-if="iconBis"
+                        :icon="iconBis"
+                      />
+                    </FSCol>
+                  </FSRow>
+                </FSCol>
+              </template>
+            </FSAgendaVerticalEvent>
+          </FSCol>
+        </FSCol>
+      </FSCol>
+    </FSRow>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, computed, type StyleValue } from 'vue';
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum, type FSAgendaEvent } from "@dative-gpi/foundation-shared-components/models";
+
+import FSCol from '../FSCol.vue';
+import FSRow from '../FSRow.vue';
+import FSAgendaHoursCol from './FSAgendaHoursCol.vue';
+import FSAgendaVerticalEvent from './FSAgendaVerticalEvent.vue';
+import FSIcon from '../FSIcon.vue';
+import FSSpan from '../FSSpan.vue';
+import FSLoader from '../FSLoader.vue';
+
+export default defineComponent({
+  name: 'FSDayAgenda',
+  components: {
+    FSAgendaHoursCol,
+    FSAgendaVerticalEvent,
+    FSCol,
+    FSIcon,
+    FSLoader,
+    FSRow,
+    FSSpan
+  },
+  props: {
+    now: {
+      type: Number,
+      required: true
+    },
+    start: {
+      type: Number,
+      required: true
+    },
+    end: {
+      type: Number,
+      required: true
+    },
+    firstColumnWidth: {
+      type: String,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    events: {
+      type: Array as PropType<FSAgendaEvent[]>,
+      default: () => []
+    },
+    nowIsInSelectedRange: {
+      type: Boolean,
+      required: true
+    },
+  },
+  emits: ['click:eventId'],
+  setup(props) {
+    const { getColors } = useColors();
+
+    const lightColors = getColors(ColorEnum.Light);
+
+    const nowHour = computed(() => new Date(props.now).getHours());
+
+    const dayEvents = computed(() => {
+      return props.events.filter((event) => {
+        return event.start < props.end && event.end > props.start;
+      });
+    });
+
+    const style = computed((): StyleValue => {
+      return {
+        '--fs-day-agenda-hour-line-color': lightColors.light,
+      };
+    });
+
+    return {
+      dayEvents,
+      nowHour,
+      style
+    };
+  },
+});
+</script>

package/components/agenda/FSMonthAgenda.vue

@@ -0,0 +1,257 @@
+<template>
+  <FSCol
+    class="fs-agenda-month-container"
+    height="100%"
+    width="100%"
+    gap="0"
+  >
+    <FSRow
+      gap="0"
+      :wrap="false"
+    >
+      <FSCol
+        height="100%"
+        :width="$props.firstColumnWidth"
+      >
+      </FSCol>
+    
+      <FSAgendaHoursRow
+        :displayNow="$props.nowIsInSelectedRange"
+        :modelValue="nowHour"
+      />
+    </FSRow>
+    <FSRow
+      class="fs-agenda-month"
+      :style="style"
+      height="100%"
+      :wrap="false"
+      gap="0px"
+    >
+      <FSCol
+        class="fs-agenda-label-day-container"
+        height="100%"
+        gap="0"
+        :width="$props.firstColumnWidth"
+      >
+        <FSCol
+          v-for="day in monthDays"
+          class="fs-agenda-label-day"
+          :style="getDayLabelStyle(day.isNowDay)"
+          :key="day.dayNumber"
+          height="100%"
+          width="100%"
+          align="center-center"
+        >
+          <FSCard
+            height="100%"
+            width="100%"
+            :borderRadius="0"
+            :border="false"
+            variant="standard"
+            :color="day.isNowDay ? 'primary' : 'background'"
+          >
+            <FSCol
+              align="center-center"
+            >
+              <FSSpan
+                :color="day.isNowDay ? 'primary' : 'dark'"
+                font="text-overline"
+              >
+                {{ day.dayNumber }}
+              </FSSpan>
+            </FSCol>
+          </FSCard>
+        </FSCol>
+      </FSCol>
+      <FSCol
+        class="fs-agenda-body"
+        gap="0"
+        height="100%"
+        width="100%"
+      >
+        <slot />
+        <template
+          v-if="loading"
+        >
+          <FSLoader
+            height="100%"
+            width="100%"
+            padding="2px"
+          />
+        </template>
+        <template
+          v-else
+        >
+          <FSRow
+            v-for="day in monthDays"
+            :key="day.dayNumber"
+            class="fs-agenda-row-day"
+            height="100%"
+            width="fill"
+            align="center-left"
+          >
+            <FSAgendaHorizontalEvent
+              v-for="event in getDayEvents(day.dayStartEpoch)"
+              :key="event.id"
+              :now="$props.now"
+              :variant="event.end < now ? 'past' : event.start > now ? 'future' : 'current'"
+              :dayStart="day.dayStartEpoch"
+              :label="event.label"
+              :start="event.start"
+              :end="event.end"
+              :icon="event.icon"
+              :id="event.id"
+              :color="event.color"
+              @click="() => $emit('click:eventId', event.id)"
+            >
+              <template
+                #default="{ label, icon }"
+              >
+                <FSRow
+                  align="center-left"
+                  :wrap="false"
+                  padding="0 0 0 4px"
+                  gap="4px"
+                >
+                  <FSIcon
+                    v-if="icon"
+                    :icon="icon"
+                    size="16px"
+                  />
+                  <FSSpan
+                    font="text-overline"
+                  >
+                    {{ label }}
+                  </FSSpan>
+                </FSRow>
+              </template>
+            </FSAgendaHorizontalEvent>
+          </FSRow>
+        </template>
+      </FSCol>
+    </FSRow>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, type PropType, type StyleValue } from 'vue';
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum, type FSAgendaEvent } from "@dative-gpi/foundation-shared-components/models";
+
+import FSAgendaHorizontalEvent from './FSAgendaHorizontalEvent.vue';
+import FSAgendaHoursRow from './FSAgendaHoursRow.vue';
+import FSCol from '../FSCol.vue';
+import FSRow from '../FSRow.vue';
+import FSLoader from '../FSLoader.vue';
+import FSIcon from '../FSIcon.vue';
+import FSSpan from '../FSSpan.vue';
+import FSCard from '../FSCard.vue';
+
+export default defineComponent({
+  name: 'FSMonthAgenda',
+  components: {
+    FSAgendaHorizontalEvent,
+    FSAgendaHoursRow,
+    FSCard,
+    FSCol,
+    FSIcon,
+    FSLoader,
+    FSRow,
+    FSSpan
+  },
+  props: {
+    now: {
+      type: Number,
+      required: true
+    },
+    start: {
+      type: Number,
+      required: true
+    },
+    end: {
+      type: Number,
+      required: true
+    },
+    nowIsInSelectedRange: {
+      type: Boolean,
+      required: true
+    },
+    firstColumnWidth: {
+      type: String,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    events: {
+      type: Array as PropType<FSAgendaEvent[]>,
+      default: () => []
+    }
+  },
+  emits: ['update:start', 'update:end', 'click:eventId'],
+  setup(props) {
+    const { getColors } = useColors();
+
+    const primaryColors = getColors(ColorEnum.Primary);
+    const lightColors = getColors(ColorEnum.Light);
+
+    const nowHour = computed(() => new Date(props.now).getHours());
+
+    const monthDays = computed(() => {
+      const monthDaysArray = [];
+      const nowDate = new Date(props.now);
+
+      let currentDay = new Date(props.start); 
+      const endDate = new Date(props.end);
+
+      while (currentDay <= endDate) {
+        monthDaysArray.push({
+          dayNumber: currentDay.getDate(),
+          dayStartEpoch: currentDay.getTime(),
+          isNowDay: currentDay.toDateString() === nowDate.toDateString(),
+        });
+
+        currentDay.setDate(currentDay.getDate() + 1);
+      }
+
+      return monthDaysArray;
+    });
+
+    const style = computed((): StyleValue => {
+      return {
+        '--fs-agenda-row-day-border-bottom-color': lightColors.base,
+      };
+    });
+
+    const getDayLabelStyle = (isNowDay: boolean = false) => {
+      if (isNowDay) {
+        return {
+          '--fs-agenda-label-day-border-bottom-color': primaryColors.base,
+          '--fs-agenda-label-day-border-right-color': lightColors.base,
+        };
+      }
+      return {
+        '--fs-agenda-label-day-border-bottom-color': lightColors.base,
+        '--fs-agenda-label-day-border-right-color': lightColors.base,
+      };
+    };
+
+    const getDayEvents = (dayStartEpoch: number) => {
+      return props.events.filter((event) => {
+        const dayEndEpoch = dayStartEpoch + 1000 * 60 * 60 * 24;
+        return event.start < dayEndEpoch && event.end > dayStartEpoch;
+      });
+    };
+
+    return {
+      nowHour,
+      monthDays,
+      style,
+      getDayEvents,
+      getDayLabelStyle
+    };
+  },
+});
+</script>

package/components/agenda/FSSelectAgendaMode.vue

@@ -0,0 +1,54 @@
+<template>
+  <FSSelectField
+    :items="items"
+    :modelValue="$props.modelValue"
+    :clearable="false"
+    v-bind="$attrs"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  >
+    <template
+      #item-prepend="{ item }"
+    >
+      <FSIcon 
+        :icon="item.icon"
+      />
+    </template>
+  </FSSelectField>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue';
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
+import { AgendaMode } from '@dative-gpi/foundation-shared-domain/enums/agendas';
+
+import FSSelectField from '../fields/FSSelectField.vue';
+import FSIcon from '../FSIcon.vue';
+
+export default defineComponent({
+  name: 'FSSelectAgendaMode',
+  components: {
+    FSIcon,
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<AgendaMode>,
+      default: AgendaMode.Week,
+    },
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    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' },
+    ];
+
+    return {
+      items
+    };
+  }
+});
+</script>