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

package/components/FSWindow.vue

@@ -1,8 +1,54 @@
 <template>
+  <template 
+    v-if="showError"
+  >
+    <slot 
+      name="error"
+      v-bind="{ goBack, width: $props.width, height: $props.height }"
+    >
+      <FSRow
+        padding="16px"
+        :width="$props.width"
+      >
+        <FSCol
+          align="center-center"
+          gap="16px"
+        >
+          <FSCol
+            align="center-center"
+          >
+            <FSIcon
+              size="42px"
+              :color="ColorEnum.Error"
+            >
+              mdi-alert-outline
+            </FSIcon>
+            <FSText
+              font="text-h3"
+            >
+              {{ $tr("window.no-access-title", "Nothing to see here") }}
+            </FSText>
+          </FSCol>
+          <FSText
+            :lineClamp="2"
+          >
+            {{ $tr("window.no-access-body", "It seems you either do not have access to this content, or there is nothing to display here") }}
+          </FSText>
+          <FSButton
+            :label="$tr('window.no-access-button', 'Go back')"
+            :color="ColorEnum.Primary"
+            @click="goBack"
+          />
+        </FSCol>
+      </FSRow>
+    </slot>
+  </template>
   <v-window
     class="fs-window"
-    :style="style"
+    ref="windowRef"
     :touch="false"
+    :style="style"
+    :modelValue="$props.modelValue"
     v-bind="$attrs"
   >
     <template
@@ -16,6 +62,7 @@
     </template>
     <v-window-item
       v-for="(component, index) in getChildren()"
+      class="fs-window-item"
       :value="value(component, index)"
       :key="index"
     >
@@ -27,37 +74,114 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue, type VNode } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, type VNode, watch } from "vue";
 
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
+import { ColorEnum } from "../models";
+
+import FSButton from "./FSButton.vue";
+import FSCard from "./FSCard.vue";
+import FSIcon from "./FSIcon.vue";
+import FSText from "./FSText.vue";
+import FSRow from "./FSRow.vue";
+
 export default defineComponent({
   name: "FSWindow",
+  components: {
+    FSButton,
+    FSCard,
+    FSIcon,
+    FSText,
+    FSRow
+  },
   props: {
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: [String, Number, Object] as PropType<any>,
+      required: false,
+      default: 0
     }
   },
-  setup(props) {
+  emits: ["update:modelValue", "error"],
+  setup(props, { emit }) {
     const { slots, getChildren } = useSlots();
 
     delete slots.default;
 
+    const windowRef = ref<any | null>(null);
+    
+    const showOverflow = ref(true);
+    const overflowTimeout = ref<NodeJS.Timeout | null>(null);
+
     const style = computed((): StyleValue => ({
-      "--fs-window-width": sizeToVar(props.width)
+      "--fs-window-overflow": showOverflow.value ? "visible" : "hidden",
+      "--fs-window-height"  : sizeToVar(props.height),
+      "--fs-window-width"   : sizeToVar(props.width)
     }));
 
     const value = (component: VNode, index: number): any => {
       return component?.props?.value ?? index;
     };
 
+    // Hide horizontal overflow when switching windows, otherwise let it visible for the FSFadeOut scrollbar
+    watch(() => props.modelValue, (): void => {
+      showOverflow.value = false;
+      if (overflowTimeout.value) {
+        clearTimeout(overflowTimeout.value);
+      }
+      overflowTimeout.value = setTimeout(() => {
+        showOverflow.value = true;
+      }, 560);
+    });
+
+    const showError = computed((): boolean => {
+      if (!windowRef.value) {
+        return false;
+      }
+
+      // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VWindow/VWindow.tsx
+      // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/group.ts#L161
+      const group = windowRef.value.group;
+
+      if (!group.items.value.length) {
+        return false;
+      }
+      return !group.items.value.find((item: any) => item.value === props.modelValue);
+    });
+
+    const goBack = (): void => {
+      if (!windowRef.value) {
+        emit("error");
+        return;
+      }
+      
+      const group = windowRef.value.group;
+      if (!group.items.value.length) {
+        emit("error");
+        return;
+      }
+      emit("update:modelValue", group.items.value[0].value);
+    };
+
     return {
+      ColorEnum,
+      windowRef,
+      showError,
       slots,
       style,
       getChildren,
+      goBack,
       value
     };
   }

package/components/FSWrapGroup.vue

@@ -29,6 +29,16 @@ import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid";
 export default defineComponent({
   name: "FSWrapGroup",
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -55,7 +65,9 @@ export default defineComponent({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
       "--fs-group-color"      : darks.soft,
-      "--fs-group-hover-color": darks.dark
+      "--fs-group-hover-color": darks.dark,
+      "--fs-group-height"     : sizeToVar(props.height),
+      "--fs-group-width"      : sizeToVar(props.width)
     }));
 
     onMounted((): void => {

package/components/agenda/FSAgenda.vue

@@ -0,0 +1,223 @@
+<template>
+  <FSCol
+    v-if="$props.start && $props.end"
+    :height="$props.height"
+    :width="$props.width"
+    gap="24px"
+  >
+    <FSAgendaHeader
+      :mode="$props.mode!"
+      :start="$props.start"
+      :end="$props.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="$props.start"
+          :end="$props.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="$props.start"
+          :end="$props.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="$props.start"
+          :end="$props.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, onMounted } 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', '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 nowIsInSelectedRange = computed(() => {
+      if (!props.start || !props.end) {
+        return false;
+      }
+      return now.value >= props.start && now.value <= props.end;
+    });
+
+    const nowInterval = setInterval(() => {
+      now.value = todayToEpoch();
+    }, 10000);
+
+    onMounted(() => {
+      if(props.end && props.start) {
+        return;
+      }
+      if (props.mode === AgendaMode.Week) {
+        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);
+        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;
+      }
+      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 });
+    });
+
+    onUnmounted(() => {
+      clearInterval(nowInterval);
+    });
+
+    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
+        });
+      }
+    });
+
+    return {
+      AgendaMode,
+      dayColumnWidth,
+      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
+        padding="16px"
+        gap="12px"
+      >
+        <FSCalendar
+          v-model="calendarValue"
+        />
+        <FSButton
+          color="primary"
+          width="100%"
+          :label="$tr('ui.common.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>