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

package/components/FSCard.vue

@@ -165,12 +165,16 @@ export default defineComponent({
     });
 
     const classes = computed((): string[] => {
-      const classNames = ["fs-card", "fs-background"];
+      const classNames = ["fs-card"];
       switch(props.variant) {
         case "gradient": 
           classNames.push("fs-card-gradient"); 
           break;
-        default: 
+        case "background":
+          classNames.push("fs-card-background");
+          classNames.push("fs-card-clickable");
+          break;
+        default:
           classNames.push("fs-card-background");
           break;
       }

package/components/FSClickable.vue

@@ -10,13 +10,12 @@
     @mouseup="active = false"
   >
     <FSCard
+      height="100%"
+      width="100%"
       :borderRadius="$props.borderRadius"
       :borderStyle="$props.borderStyle"
       :padding="$props.padding"
-      :height="$props.height"
-      :width="$props.width"
       :class="classes"
-      :style="style"
       v-bind="$attrs"
     >
       <template
@@ -52,13 +51,12 @@
     @mouseup="active = false"
   >
     <FSCard
+      height="100%"
+      width="100%"
       :borderRadius="$props.borderRadius"
       :borderStyle="$props.borderStyle"
       :padding="$props.padding"
-      :height="$props.height"
-      :width="$props.width"
       :class="classes"
-      :style="style"
       v-bind="$attrs"
     >
       <template
@@ -95,13 +93,12 @@
     @mouseup="active = false"
   >
     <FSCard
+      height="100%"
+      width="100%"
       :borderRadius="$props.borderRadius"
       :borderStyle="$props.borderStyle"
       :padding="$props.padding"
-      :height="$props.height"
-      :width="$props.width"
       :class="classes"
-      :style="style"
       v-bind="$attrs"
     >
       <template

package/components/FSDialogRemove.vue

@@ -1,5 +1,6 @@
 <template>
   <FSDialogSubmit
+    width="460px"
     :title="title"
     :submitButtonLabel="$tr('ui.button.remove', 'Remove')"
     :submitButtonColor="ColorEnum.Error"

package/components/agenda/FSAgenda.vue

@@ -0,0 +1,210 @@
+<template>
+  <FSCol
+    :height="$props.height"
+    :width="$props.width"
+    gap="24px"
+  >
+    <FSAgendaHeader
+      :mode="$props.mode!"
+      :start="start"
+      :end="end"
+      :now="now"
+      @update:start="($event) => $emit('update:start', $event)"
+      @update:end="($event) => $emit('update:end', $event)"
+      @update:mode="($event) => $emit('update:mode', $event)"
+    />
+    <FSCol
+      class="fs-agenda-view"
+      height="100%"
+      gap="0"
+    >
+      <FSWindow
+        v-if="$props.mode"
+        :modelValue="$props.mode"
+        width="100%"
+        height="100%"
+      >
+        <FSDayAgenda
+          :value="AgendaMode.Day"
+          :events="$props.events"
+          :firstColumnWidth="dayColumnWidth"
+          :start="start"
+          :end="end"
+          :now="now"
+          :nowIsInSelectedRange="nowIsInSelectedRange"
+          :loading="$props.loading"
+          @click:event-id="$emit('click:eventId', $event)"
+        >
+          <FSAgendaVerticalTimeLineMarker
+            v-if="nowIsInSelectedRange"
+            :modelValue="now"
+          />
+        </FSDayAgenda>
+        <FSWeekAgenda
+          :value="AgendaMode.Week"
+          :events="$props.events"
+          :firstColumnWidth="dayColumnWidth"
+          :start="start"
+          :end="end"
+          :now="now"
+          :nowIsInSelectedRange="nowIsInSelectedRange"
+          :loading="$props.loading"
+          @click:event-id="$emit('click:eventId', $event)"
+        >
+          <FSAgendaHorizontalTimeLineMarker
+            v-if="nowIsInSelectedRange"
+            :modelValue="now"
+          />
+        </FSWeekAgenda>
+        <FSMonthAgenda
+          :value="AgendaMode.Month"
+          :events="$props.events"
+          :firstColumnWidth="dayColumnWidth"
+          :start="start"
+          :end="end"
+          :now="now"
+          :nowIsInSelectedRange="nowIsInSelectedRange"
+          :loading="$props.loading"
+          @click:event-id="$emit('click:eventId', $event)"
+        >
+          <FSAgendaHorizontalTimeLineMarker
+            v-if="nowIsInSelectedRange"
+            :modelValue="now"
+          />
+        </FSMonthAgenda>
+      </FSWindow>
+    </FSCol>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, computed, ref, onUnmounted, watch } from 'vue';
+
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import type { FSAgendaEvent } from "@dative-gpi/foundation-shared-components/models";
+import { AgendaMode } from '@dative-gpi/foundation-shared-domain/enums/agendas';
+
+import FSAgendaVerticalTimeLineMarker from './FSAgendaVerticalTimeLineMarker.vue';
+import FSMonthAgenda from './FSMonthAgenda.vue';
+import FSWeekAgenda from './FSWeekAgenda.vue';
+import FSDayAgenda from './FSDayAgenda.vue';
+import FSAgendaHorizontalTimeLineMarker from './FSAgendaHorizontalTimeLineMarker.vue';
+import FSAgendaHeader from './FSAgendaHeader.vue';
+import FSWindow from '../FSWindow.vue';
+import FSCol from '../FSCol.vue';
+
+
+export default defineComponent({
+  name: 'FSAgenda',
+  components: {
+    FSAgendaHeader,
+    FSAgendaHorizontalTimeLineMarker,
+    FSAgendaVerticalTimeLineMarker,
+    FSCol,
+    FSDayAgenda,
+    FSMonthAgenda,  
+    FSWeekAgenda,
+    FSWindow
+  },
+  props: {
+    mode: {
+      type: Number as PropType<AgendaMode>,
+      default: AgendaMode.Week
+    },
+    height: {
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "100%"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "100%"
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    events: {
+      type: Array as PropType<FSAgendaEvent[]>,
+      default: () => []
+    },
+    start: {
+      type: Number as PropType<number | null>,
+      required: false
+    },
+    end: {
+      type: Number as PropType<number | null>,
+      required: false
+    }
+  },
+  emits: ['update:mode', 'click:eventId', 'update:start', 'update:end'],
+  setup(props, { emit }) {
+    const { todayToEpoch, epochToLocalDayStart, epochToLocalDayEnd } = useDateFormat();
+    const { isExtraSmall } = useBreakpoints();
+
+    const dayColumnWidth = '46px';
+
+    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));
+      }
+      return epochToLocalDayStart(now.value);
+    });
+
+    const end = computed<number>(() => {
+      if (props.end) {
+        return props.end;
+      }
+      if (props.mode === AgendaMode.Week) {
+        return epochToLocalDayEnd(now.value + (7 - new Date(now.value).getDay()) * 24 * 60 * 60 * 1000);
+      }
+      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());
+      }
+      return epochToLocalDayEnd(now.value);
+    });
+
+    const nowIsInSelectedRange = computed(() => {
+      return now.value >= start.value && now.value <= end.value;
+    });
+
+    const nowInterval = setInterval(() => {
+      now.value = todayToEpoch();
+    }, 10000);
+
+    onUnmounted(() => {
+      clearInterval(nowInterval);
+    });
+
+    watch(isExtraSmall, (value) => {
+      if (value && props.mode !== AgendaMode.Day) {
+        emit('update:mode', AgendaMode.Day);
+      } else if (!value && defaultMode.value !== AgendaMode.Day) {
+        emit('update:mode', defaultMode.value);
+      }
+    }, {immediate: true});
+
+    return {
+      AgendaMode,
+      start,
+      dayColumnWidth,
+      end,
+      now,
+      nowIsInSelectedRange
+    };
+  }
+});
+</script>

package/components/agenda/FSAgendaDialogCalendar.vue

@@ -0,0 +1,76 @@
+<template>
+  <FSDialog
+    :modelValue="$props.dialog"
+    @update:modelValue="$emit('update:dialog', $event)"
+  >
+    <FSCard
+      :elevation="true"
+    >
+      <FSCol
+        gap="12px"
+        padding="16px"
+      >
+        <FSCalendar
+          v-model="calendarValue"
+        />
+        <FSButton
+          color="primary"
+          width="100%"
+          :label="$tr('ui.agenda.calendar.dialog.submit', 'Validate')"
+          @click="onSubmit"
+        />
+      </FSCol>
+    </FSCard>
+  </FSDialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from 'vue';
+
+import FSCalendar from '../FSCalendar.vue';
+import FSButton from '../FSButton.vue';
+import FSCard from '../FSCard.vue';
+import FSCol from '../FSCol.vue';
+import FSDialog from '../FSDialog.vue';
+
+export default defineComponent({
+  name: 'FSAgendaDialogCalendar',
+  components: {
+    FSCalendar,
+    FSButton,
+    FSCard,
+    FSCol,
+    FSDialog,
+  },
+  props: {
+    dialog: {
+      type: Boolean,
+      required: true,
+    },
+    modelValue: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: ['update:modelValue', 'update:dialog'],
+  setup(props, { emit }) {
+    const calendarValue = ref<number>(props.modelValue);
+
+    const onSubmit = () => {
+      emit('update:modelValue', calendarValue.value);
+      emit('update:dialog', false);
+    };
+
+    watch(() => props.modelValue, (newValue) => {
+      if (newValue) {
+        calendarValue.value = newValue;
+      }
+    }, {immediate: true});
+
+    return {
+      calendarValue,
+      onSubmit
+    };
+  },
+});
+</script>

package/components/agenda/FSAgendaHeader.vue

@@ -0,0 +1,190 @@
+<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="180px"
+          color="primary"
+          :border="false"
+          :label="epochToMonthYearOnlyFormat($props.start)"
+          @click="showCalendarDialog = true"
+        />
+        <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.agenda.today', 'Today')"
+            @click="onToday"
+          />
+        </FSRow>
+      </FSRow>
+    </template>
+    <FSCol
+      v-else
+    >
+      <FSButton
+        prependIcon="mdi-calendar-today-outline"
+        :label="$tr('ui.agenda.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 } 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';
+
+export default defineComponent({
+  name: 'FSAgendaHeader',
+  components: {
+    FSAgendaDialogCalendar,
+    FSSelectAgendaMode,
+    FSCol,
+    FSButton,
+    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: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) {
+        emit('update:start', newStart);
+        emit('update:end', epochToLocalDayEnd(newStart + (7 - new Date(newStart).getDay()) * 24 * 60 * 60 * 1000));
+        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()));
+        return;
+      }
+      emit('update:start', newStart);
+      emit('update:end', epochToLocalDayEnd(newStart));
+    }
+
+    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);
+      }
+    }
+
+    return {
+      AgendaMode,
+      showCalendarDialog,
+      epochToDayMonthLongOnly,
+      epochToMonthYearOnlyFormat,
+      onNext,
+      onPrevious,
+      onToday,
+      updateDateRange
+    }
+  }
+});
+</script>