@dative-gpi/foundation-shared-components 1.0.66 → 1.0.67-tree-view-02

package/utils/picker.ts

@@ -0,0 +1,40 @@
+export enum TimePrecision {
+  Hours = 1,
+  Days = 2,
+  Months = 3
+}
+
+/**
+ *  Compute ticks for a time range based on the specified precision.
+ */
+export const computeTicks = ({ start, end, tickCount, precision }: { start: number, end: number, tickCount: number, precision: TimePrecision }): number[] => {
+  const ticks: number[] = [];
+  const range = end - start;
+
+  if (precision === TimePrecision.Hours) {
+    // Tick toutes les X heures, aligné sur l'heure pleine
+    const step = Math.ceil(range / tickCount / 3600000) * 3600000;
+    const alignedStart = Math.ceil(start / 3600000) * 3600000;
+    for (let i = 0; i < tickCount; i++) {
+      const tick = alignedStart + i * step;
+      if (tick < end) { ticks.push(tick); }
+    }
+  } else if (precision === TimePrecision.Days) {
+    // Tick tous les X jours, aligné sur minuit
+    const step = Math.ceil(range / tickCount / 86400000) * 86400000;
+    const date = new Date(start);
+    date.setHours(0, 0, 0, 0);
+    const alignedStart = date.getTime() + (date.getTime() < start ? step : 0);
+    for (let i = 0; i < tickCount; i++) {
+      const tick = alignedStart + i * step;
+      if (tick < end) { ticks.push(tick); }
+    }
+  } else {
+    // Tick tous les X mois (approximation linéaire)
+    const interval = range / tickCount;
+    for (let i = 0; i < tickCount; i++) {
+      ticks.push(start + i * interval);
+    }
+  }
+  return ticks;
+}

package/utils/sort.ts

@@ -23,7 +23,7 @@ export const alphanumericSort = (a: any, b: any) => {
   if (b == null) {
     return 1;
   }
-  a = asString(a);
-  b = asString(b);
+  a = asString(a).trim();
+  b = asString(b).trim();
   return a.localeCompare(b, undefined, { numeric: true });
 };

package/utils/time.ts

@@ -5,13 +5,13 @@ import { TimeUnit } from "@dative-gpi/foundation-shared-domain/enums"
 const { $tr } = useTranslationsProvider();
 
 export const timeSteps = [
-  { id: TimeUnit.Second,      label: $tr("ui.time-step.second.singular", "Second"), plural: $tr("ui.time-step.second.plural", "Seconds") },
-  { id: TimeUnit.Minute,      label: $tr("ui.time-step.minute.singular", "Minute"), plural: $tr("ui.time-step.minute.plural", "Minutes") },
-  { id: TimeUnit.Hour,        label: $tr("ui.time-step.hour.singular", "Hour"),     plural: $tr("ui.time-step.hour.plural", "Hours") },
-  { id: TimeUnit.Day,         label: $tr("ui.time-step.day.singular", "Day"),       plural: $tr("ui.time-step.day.plural", "Days") },
-  { id: TimeUnit.Week,        label: $tr("ui.time-step.week.singular", "Week"),     plural: $tr("ui.time-step.week.plural", "Weeks") },
-  { id: TimeUnit.Month,       label: $tr("ui.time-step.month.singular", "Month"),   plural: $tr("ui.time-step.month.plural", "Months") },
-  { id: TimeUnit.Year,        label: $tr("ui.time-step.year.singular", "Year"),     plural: $tr("ui.time-step.year.plural", "Years") },
+  { id: TimeUnit.Second, get label() { return $tr("ui.common.second", "Second") }, get plural() { return $tr("ui.common.seconds", "Seconds") } },
+  { id: TimeUnit.Minute, get label() { return $tr("ui.common.minute", "Minute") }, get plural() { return $tr("ui.common.minutes", "Minutes") } },
+  { id: TimeUnit.Hour,   get label() { return $tr("ui.common.hour", "Hour") },     get plural() { return $tr("ui.common.hours", "Hours") } },
+  { id: TimeUnit.Day,    get label() { return $tr("ui.common.day", "Day") },       get plural() { return $tr("ui.common.days", "Days") } },
+  { id: TimeUnit.Week,   get label() { return $tr("ui.common.week", "Week") },     get plural() { return $tr("ui.common.weeks", "Weeks") } },
+  { id: TimeUnit.Month,  get label() { return $tr("ui.common.month", "Month") },   get plural() { return $tr("ui.common.months", "Months") } },
+  { id: TimeUnit.Year,   get label() { return $tr("ui.common.year", "Year") },     get plural() { return $tr("ui.common.years", "Years") } },
 ];
 
 export const timeStepToString = (value: { value: number, unit: TimeUnit } | null): string => {
@@ -28,12 +28,12 @@ export const timeStepToString = (value: { value: number, unit: TimeUnit } | null
 };
 
 // TODO : remove everything below this line
-export const timeScale: any[] = [
-  { id: 1,      label: $tr("ui.time-field.second.singular", "Second"), plural: $tr("ui.time-field.second.plural", "Seconds") },
-  { id: 60,     label: $tr("ui.time-field.minute.singular", "Minute"), plural: $tr("ui.time-field.minute.plural", "Minutes") },
-  { id: 3600,   label: $tr("ui.time-field.hour.singular", "Hour"),     plural: $tr("ui.time-field.hour.plural", "Hours") },
-  { id: 86400,  label: $tr("ui.time-field.day.singular", "Day"),       plural: $tr("ui.time-field.day.plural", "Days") },
-  { id: 604800, label: $tr("ui.time-field.week.singular", "Week"),     plural: $tr("ui.time-field.week.plural", "Weeks") },
+export const timeScale = [
+  { id: 1,      get label() { return $tr("ui.common.second", "Second") }, get plural() { return $tr("ui.common.seconds", "Seconds") } },
+  { id: 60,     get label() { return $tr("ui.common.minute", "Minute") }, get plural() { return $tr("ui.common.minutes", "Minutes") } },
+  { id: 3600,   get label() { return $tr("ui.common.hour", "Hour") },     get plural() { return $tr("ui.common.hours", "Hours") } },
+  { id: 86400,  get label() { return $tr("ui.common.day", "Day") },       get plural() { return $tr("ui.common.days", "Days") } },
+  { id: 604800, get label() { return $tr("ui.common.week", "Week") },     get plural() { return $tr("ui.common.weeks", "Weeks") } },
 ];
 
 export const getTimeScaleIndex = (value: number): number => {

package/components/fields/FSTimeSlotField.vue

@@ -1,250 +0,0 @@
-<template>
-  <FSBaseField
-    :description="$props.description"
-    :hideHeader="$props.hideHeader"
-    :required="$props.required"
-    :editable="$props.editable"
-    :label="$props.label"
-    :messages="messages"
-  >
-    <FSRow>
-      <FSRow
-        :wrap="false"
-      >
-        <FSSelectField
-          :validationValue="$props.modelValue"
-          :editable="$props.editable"
-          :validateOn="validateOn"
-          :rules="$props.rules"
-          :items="daysObject"
-          :hideHeader="true"
-          :clearable="false"
-          :style="style"
-          :modelValue="dayStart"
-          @update:modelValue="onChangeDayStart"
-        />
-        <FSClock
-          class="fs-time-slot-field-number"
-          :editable="$props.editable"
-          :color="ColorEnum.Light"
-          :slider="false"
-          :style="style"
-          :modelValue="$props.modelValue[0][1]"
-          @update:modelValue="onChangeHourStart"
-        />
-      </FSRow>
-      <FSRow
-        :wrap="false"
-      >
-        <FSSelectField
-          class="fs-time-slot-field-select"
-          :editable="$props.editable"
-          :items="daysObject"
-          :hideHeader="true"
-          :clearable="false"
-          :style="style"
-          :modelValue="dayEnd"
-          @update:modelValue="onChangeDayEnd"
-        />
-        <FSClock
-          class="fs-time-slot-field-number"
-          :editable="$props.editable"
-          :color="ColorEnum.Light"
-          :slider="false"
-          :style="style"
-          :modelValue="$props.modelValue[1][1]"
-          @update:modelValue="onChangeHourEnd"
-        />
-      </FSRow>
-    </FSRow>
-  </FSBaseField>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
-
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { Days } from "@dative-gpi/foundation-shared-domain/enums";
-
-import FSSelectField from "./FSSelectField.vue";
-import FSBaseField from "./FSBaseField.vue";
-import FSClock from "../FSClock.vue";
-import FSRow from "../FSRow.vue";
-
-export default defineComponent({
-  name: "FSTimeSlotField",
-  components: {
-    FSSelectField,
-    FSBaseField,
-    FSClock,
-    FSRow
-  },
-  props: {
-    label: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    modelValue: {
-      type: Array as PropType<number[][] | null>,
-      required: true,
-      default: null
-    },
-    hideHeader: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    rules: {
-      type: Array as PropType<any[]>,
-      required: false,
-      default: () => []
-    },
-    messages: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: null
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const { validateOn, getMessages } = useRules();
-    const { getColors } = useColors();
-
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
-    
-    const daysObject: { id: number; label: string }[]  = Object.keys(Days).reduce((acc, key) => {
-      if (isNaN(Number(key))) {
-        acc.push({
-          id: Days[key],
-          label: key
-        });
-      }
-      return acc;
-    }, [] as { id: number, label: string }[]);
-
-    const style = computed((): StyleValue => {
-      if (!props.editable) {
-        return {
-          "--fs-time-slot-field-cursor"             : "default",
-          "--fs-time-slot-field-border-color"       : lights.base,
-          "--fs-time-slot-field-color"              : lights.dark,
-          "--fs-time-slot-field-active-border-color": lights.base
-        };
-      }
-      return {
-        "--fs-time-slot-field-cursor"             : "text",
-        "--fs-time-slot-field-border-color"       : lights.dark,
-        "--fs-time-slot-field-color"              : darks.base,
-        "--fs-time-slot-field-active-border-color": darks.dark,
-        "--fs-time-slot-field-error-color"        : errors.base,
-        "--fs-time-slot-field-error-border-color" : errors.base
-      };
-    });
-
-    const dayStart = computed((): number => {
-      if (props.modelValue) {
-        return props.modelValue[1][0] === 7 ? 7 : props.modelValue[0][0];
-      }
-      return 0;
-    });
-
-    const dayEnd = computed((): number => {
-      if (props.modelValue) {
-        return props.modelValue[0][0] === 7 ? 7 : props.modelValue[1][0];
-      }
-      return 0;
-    });
-
-    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
-
-    const onChangeDayStart = (value: number) => {
-      if (value === 7) {
-        if (props.modelValue) {
-          emit("update:modelValue", [[7, props.modelValue[0][1]], [7, props.modelValue[1][1]]]);
-          return;
-        }
-        emit("update:modelValue", [[7, 0], [7, 0]]);
-        return;
-      }
-      if (props.modelValue) {
-        if (props.modelValue[1][0] === 7) {
-          emit("update:modelValue", [[value, props.modelValue[0][1]], [value, props.modelValue[1][1]]]);
-          return;
-        }
-        emit("update:modelValue", [[value, props.modelValue[0][1]], props.modelValue[1]]);
-        return;
-      }
-      emit("update:modelValue", [[value, 0], [value, 0]]);
-    };
-
-    const onChangeHourStart = (value: number) => {
-      if (props.modelValue) {
-        emit("update:modelValue", [[props.modelValue[0][0], value], props.modelValue[1]]);
-        return;
-      }
-      emit("update:modelValue", [[0, value], [0, 0]]);
-    };
-
-    const onChangeDayEnd = (value: number) => {
-      if (value === 7) {
-        if (props.modelValue) {
-          emit("update:modelValue", [[7, props.modelValue[0][1]], [7, props.modelValue[1][1]]]);
-          return;
-        }
-        emit("update:modelValue", [[7, 0], [7, 0]]);
-        return;
-      }
-      if (props.modelValue) {
-        if (props.modelValue[0][0] === 7) {
-          emit("update:modelValue", [[value, props.modelValue[0][1]], [value, props.modelValue[1][1]]]);
-          return;
-        }
-        emit("update:modelValue", [props.modelValue[0], [value, props.modelValue[1][1]]]);
-        return;
-      }
-      emit("update:modelValue", [[value, 0], [value, 0]]);
-    };
-
-    const onChangeHourEnd = (value: number) => {
-      if (props.modelValue) {
-        emit("update:modelValue", [props.modelValue[0], [props.modelValue[1][0], value]]);
-        return;
-      }
-      emit("update:modelValue", [[0, 0], [0, value]]);
-    };
-
-    return {
-      daysObject,
-      validateOn,
-      ColorEnum,
-      dayStart,
-      messages,
-      dayEnd,
-      style,
-      onChangeHourStart,
-      onChangeDayStart,
-      onChangeHourEnd,
-      onChangeDayEnd
-    };
-  }
-});
-</script>

package/components/views/FSEntityHeader.vue

@@ -1,343 +0,0 @@
-<template>
-  <template
-    v-if="isExtraSmall"
-  >
-    <FSCol
-      class="f-entity-header"
-      padding="0 10px 0 0"
-      align="center-left"
-      gap="12px"
-    >
-      <FSRow
-        align="center-left"
-        gap="12px"
-        :height="imageSize"
-        :wrap="false"
-      >
-        <template
-          v-if="$props.imageId"
-        >
-          <slot 
-            name="image"
-            v-bind="{ imageSize }"
-          >
-            <FSImage
-              :imageId="$props.imageId"
-              :cover="imageCover"
-              :height="imageSize"
-              :width="imageSize"
-            />
-          </slot>
-        </template>
-        <FSIconCard
-          v-else-if="$props.icon"
-          :backgroundVariant="$props.iconBackgroundVariant"
-          :backgroundColor="$props.iconBackgroundColors"
-          :border="$props.iconBorder"
-          :icon="$props.icon"
-          :iconColor="$props.color"
-          :size="imageSize"
-        />
-        <FSCol
-          align="center-left"
-          :width="`calc(100% - ${rightOverflow})`"
-        >
-          <template
-            v-if="$props.subtitle && $props.description"
-          >
-            <FSText
-              font="text-h3"
-            >
-              {{ $props.title }}
-            </FSText>
-            <FSCol
-              align="center-left"
-              gap="4px"
-            >
-              <FSText
-                font="text-button"
-              >
-                {{ $props.subtitle }}
-              </FSText>
-              <FSText
-                font="text-body"
-              >
-                {{ $props.description }}
-              </FSText>
-            </FSCol>
-          </template>
-          <template
-            v-else-if="$props.subtitle && !$props.description"
-          >
-            <FSText
-              font="text-h3"
-              :lineClamp="2"
-            >
-              {{ $props.title }}
-            </FSText>
-            <FSText
-              font="text-button"
-            >
-              {{ $props.subtitle }}
-            </FSText>
-          </template>
-          <template
-            v-else-if="!$props.subtitle && $props.description"
-          >
-            <FSText
-              font="text-h3"
-              :lineClamp="2"
-            >
-              {{ $props.title }}
-            </FSText>
-            <FSText
-              font="text-body"
-              :lineClamp="2"
-            >
-              {{ $props.description }}
-            </FSText>
-          </template>
-          <template
-            v-else
-          >
-            <FSText
-              font="text-h3"
-              :lineClamp="2"
-            >
-              {{ $props.title }}
-            </FSText>
-          </template>
-        </FSCol>
-      </FSRow>
-      <template
-        v-if="!$props.light"
-      >
-        <FSBreadcrumbs
-          :items="$props.breadcrumbs"
-        />
-        <FSSlideGroup
-          v-if="slots['toolbar']"
-        >
-          <slot
-            name="toolbar"
-          />
-        </FSSlideGroup>
-        <slot
-          name="title-append"
-        />
-      </template>
-    </FSCol>
-  </template>
-  <template
-    v-else
-  >
-    <FSCol
-      class="f-entity-header"
-      padding="0 14px 0 0"
-      align="center-left"
-      gap="16px"
-    >
-      <FSRow
-        align="center-left"
-        gap="16px"
-        :height="imageSize"
-        :wrap="false"
-      >
-        
-        <template
-          v-if="$props.imageId"
-        >
-          <slot 
-            name="image"
-            v-bind="{ imageSize }"
-          >
-            <FSImage
-              :imageId="$props.imageId"
-              :cover="imageCover"
-              :height="imageSize"
-              :width="imageSize"
-            />
-          </slot>
-        </template>
-        <FSIconCard
-          v-else-if="$props.icon"
-          iconSize="70px"
-          :backgroundVariant="$props.iconBackgroundVariant"
-          :backgroundColor="$props.iconBackgroundColors"
-          :border="$props.iconBorder"
-          :iconColor="$props.color"
-          :icon="$props.icon"
-          :size="imageSize"
-        />
-        <FSCol
-          align="center-left"
-        >
-          <FSText
-            :font="$props.light ? 'text-h3' : 'text-h2'"
-          >
-            {{ $props.title }}
-          </FSText>
-          <FSCol
-            v-if="!$props.light && ($props.subtitle || $props.description)"
-            gap="4px"
-          >
-            <FSText
-              v-if="$props.subtitle"
-              font="text-button"
-            >
-              {{ $props.subtitle }}
-            </FSText>
-            <FSText
-              v-if="$props.description"
-              font="text-body"
-              :lineClamp="2"
-            >
-              {{ $props.description }}
-            </FSText>
-          </FSCol>
-        </FSCol>
-        <FSRow
-          v-if="!$props.light"
-          align="center-right"
-        >
-          <slot
-            name="title-append"
-          />
-        </FSRow>
-      </FSRow>
-      <template
-        v-if="!$props.light"
-      >
-        <FSBreadcrumbs
-          :items="$props.breadcrumbs"
-        />
-        <FSSlideGroup
-          v-if="slots['toolbar']"
-        >
-          <slot
-            name="toolbar"
-          />
-        </FSSlideGroup>
-      </template>
-    </FSCol>
-  </template>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
-
-import { type ColorBase, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
-import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-
-import FSBreadcrumbs from "../FSBreadcrumbs.vue";
-import FSSlideGroup from "../FSSlideGroup.vue";
-import FSIconCard from "../FSIconCard.vue";
-import FSImage from "../FSImage.vue";
-import FSText from "../FSText.vue";
-import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
-
-export default defineComponent({
-  name: "FSEntityHeader",
-  components: {
-    FSBreadcrumbs,
-    FSSlideGroup,
-    FSIconCard,
-    FSImage,
-    FSText,
-    FSCol,
-    FSRow
-  },
-  props: {
-    imageId: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: null
-    },
-    icon: {
-      type: String as PropType<string>,
-      required: false,
-      default: "mdi-ab-testing"
-    },
-    iconBackgroundVariant: {
-      type: String as PropType<"background" | "standard" | "full" | "gradient">,
-      required: false,
-      default: "background"
-    },
-    iconBackgroundColors: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: () => []
-    },
-    iconBorder: {
-      type: Boolean as PropType<boolean>,
-      required: false,
-      default: true
-    },
-    title: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    subtitle: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    breadcrumbs: {
-      type: Array as PropType<Array<FSBreadcrumbItem>>,
-      required: false,
-      default: () => []
-    },
-    light: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    imageCover: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  setup(props) {
-    const { isExtraSmall, isMobileSized } = useBreakpoints();
-    const { slots } = useSlots();
-
-    const imageSize = computed((): string[] | string => {
-      if (props.light) {
-        return ["40px", "36px"];
-      }
-      return ["124px", "96px", "80px"];
-    });
-
-    const rightOverflow = computed(() => {
-      let result = imageSize.value[0];
-      if (isExtraSmall.value && imageSize.value[2]) {
-        result = imageSize.value[2];
-      }
-      if ((isExtraSmall.value || isMobileSized.value) && imageSize.value[1]) {
-        result = imageSize.value[1];
-      }
-      return result;
-    });
-
-    return {
-      rightOverflow,
-      isExtraSmall,
-      imageSize,
-      slots
-    };
-  }
-});
-</script>