@dative-gpi/foundation-shared-components 1.0.27 → 1.0.28-remove-deprecated2

package/utils/time.ts

@@ -1,18 +1,18 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
-import { TimeUnit } from "@dative-gpi/foundation-shared-domain/models"
+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 => {
   if (!value) {
@@ -25,15 +25,15 @@ export const timeStepToString = (value: { value: number, unit: TimeUnit } | null
   }
   
   return `${value.value} ${value.value === 1 ? unit.label.toLowerCase() : unit.plural.toLowerCase()}`;
-}
+};
 
 // 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 => {
@@ -52,4 +52,4 @@ export const getTimeBestString = (value: number): string => {
   const unit = getTimeScaleIndex(value);
   const figure = value / timeScale[unit].id;
   return `${figure} ${figure === 1 ? timeScale[unit].label.toLowerCase() : timeScale[unit].plural.toLowerCase()}`;
-}
+};

package/components/autocompletes/FSAutocompleteTag.vue

@@ -1,138 +0,0 @@
-<template>
-  <FSCol>
-    <FSAutocompleteField
-      v-if="variant=='standard'"
-      :label="label"
-      :items="innerItems"
-      :multiple="true"
-      :modelValue="modelValue?.map(m=>m.id)"
-      @update:modelValue="onUpdateModelValue"
-      @keydown="onKeydown"
-      v-binds="$attrs"
-    >
-      <template
-        #autocomplete-chip
-      >
-      </template>
-    </FSAutocompleteField>
-    <FSAutocompleteField
-      v-else
-      :label="label"
-      :items="innerItems"
-      :multiple="true"
-      :modelValue="modelValue?.map(m=>m.id)"
-      :showSearch="true"
-      @update:modelValue="onUpdateModelValue"
-      @add:item="onAddItem"
-      @keydown="onKeydown"
-      v-binds="$attrs"
-    >
-      <template
-        #autocomplete-chip
-      >
-      </template>
-    </FSAutocompleteField> 
-    <FSTagGroup
-      v-if="modelValue != null"
-      :tags="modelValue?.map((v) => v.label) ?? []"
-      @remove="onRemoveValue($event)"
-    />
-  </FSCol>
-</template>
-
-<script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent, ref, watch } from "vue";
-
-import { uuidv4 } from '@dative-gpi/bones-ui';
-
-import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
-import FSTagGroup from "../FSTagGroup.vue";
-
-export default defineComponent({
-  components: {
-    FSAutocompleteField,
-    FSTagGroup,
-  },
-  props:{
-    modelValue: {
-      type: Array as PropType<{id : string, label : string, isCustom: boolean}[] | null>,
-      required: false,
-      default: () => []
-    },
-    items: {
-      type: Array as PropType<{id : string, label : string, isCustom: boolean}[]>,
-      required: false,
-      default: () => []
-    },
-    label : {
-      type: String,
-      required: false
-    },
-    variant: {
-      type: String as PropType<'standard' | 'tagged'>,
-      required: false,
-      default : 'standard'
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, {emit}) {
-
-    const tagValues = ref<{id : string, label : string, isCustom : boolean}[]>([]);
-
-    const innerItems = computed(()=>{
-
-      if(props.variant === 'standard'){
-        return props.items
-      }
-      else{
-        return props.items.concat(tagValues.value);
-      }
-    });
-
-    const onUpdateModelValue = (value: string[] | null) => {
-      emit('update:modelValue', value?.map((v) => innerItems.value.find((i) => i.id === v)));
-    }
-
-    const onRemoveValue = (value: string) => {
-      const idValue = innerItems.value.find((v) => v.label === value)?.id;
-      if (idValue) {
-        if(tagValues.value.map((v) => v.label).includes(value)){
-          tagValues.value = tagValues.value.filter((v) => v.label !== value);
-        }
-        emit('update:modelValue', [...props.modelValue?.filter((v) => v.id !== idValue) ?? []]);
-      }
-    }
-
-    const onAddItem = (value: string) => {
-      if (innerItems.value.map((v) => v.label).includes(value)) {
-        return;
-      }
-      let item = {id: uuidv4(), label: value, isCustom: true};
-      tagValues.value.push(item);
-      emit('update:modelValue', [...props.modelValue?? [],item]);
-    }
-
-    const onKeydown = (event: KeyboardEvent) => {
-      if (event.key === 'Backspace') {
-        emit('update:modelValue', [...props.modelValue ?? []]);
-      }
-    };
-
-    watch(() => props.modelValue, (newValue) => {
-      if (newValue) {
-        tagValues.value = props.modelValue?.filter(m=>m.isCustom) ?? [];
-      }
-    }, {immediate: true});
-
-
-    return {
-      innerItems,
-      onUpdateModelValue,
-      onAddItem,
-      onRemoveValue,
-      onKeydown
-    }
-  }
-})
-</script>

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/models";
-
-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/map/FSMapEditPointAddressOverlay.vue

@@ -1,164 +0,0 @@
-<template>
-  <FSCard
-    padding="16px"
-    height="100%"
-    width="100%"
-    :elevation="true"
-  >
-    <FSCol
-      gap="24px"
-    >
-      <FSRow>
-        <FSText
-          font="text-h3"
-        >
-          {{ $tr('ui.map.modify-location', 'Modify location') }}
-        </FSText>
-        <v-spacer />
-        <FSButton
-          v-if="menuLocationCoordinates"
-          icon="mdi-arrow-collapse"
-          variant="icon"
-          @click="menuLocationCoordinates = !menuLocationCoordinates"
-        />
-        <FSButton
-          v-else
-          icon="mdi-arrow-expand"
-          variant="icon"
-          @click="menuLocationCoordinates = !menuLocationCoordinates"
-        />
-      </FSRow>
-      <FSCol
-        v-if="menuLocationCoordinates"
-      >
-        <FSAutoCompleteAddress
-          :modelValue="$props.modelValue"
-          @update:modelValue="onAddressFieldSubmit($event)"
-        />
-        <FSForm
-          variant="standard"
-          @submit="onCoordinatesChange()"
-        >
-          <FSRow>
-            <FSNumberField
-              :label="$tr('ui.map.latitude', 'Latitude')"
-              v-model="latitude"
-            />
-            <FSNumberField
-              :label="$tr('ui.map.longitude', 'Longitude')"
-              v-model="longitude"
-            />
-          </FSRow>
-          <FSButton
-            prependIcon="mdi-content-save"
-            style="display: none;"
-            color="primary"
-            type="submit"
-            :label="$tr('ui.map.save', 'Save')"
-          />
-        </FSForm>
-      </FSCol>
-      <FSRow
-        align="center-right"
-      >
-        <FSButton
-          :label="$tr('ui.map.cancel', 'Cancel')"
-          @click="onCancel"
-        />
-        <FSButton
-          prependIcon="mdi-content-save"
-          color="primary"
-          :label="$tr('ui.map.save', 'Save')"
-          @click="onSubmit"
-        />
-      </FSRow>
-    </FSCol>
-  </FSCard>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType, ref, watch } from "vue";
-
-import { Address } from "@dative-gpi/foundation-shared-domain/models";
-
-import FSAutoCompleteAddress from "../autocompletes/FSAutoCompleteAddress.vue";
-import FSNumberField from "../fields/FSNumberField.vue";
-import FSButton from "../FSButton.vue";
-import FSCard from "../FSCard.vue";
-import FSForm from "../FSForm.vue";
-import FSText from "../FSText.vue";
-import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
-
-export default defineComponent({
-  name: "FSMapEditPointAddressOverlay.vue",
-  components: {
-    FSAutoCompleteAddress,
-    FSNumberField,
-    FSButton,
-    FSCard,
-    FSForm,
-    FSText,
-    FSCol,
-    FSRow
-  },
-  props: {
-    modelValue: {
-      type: Object as PropType<Address | null>,
-      default: null
-    }
-  },
-  emits: ["update:modelValue", "update:locationCoordinates", "submit", "cancel"],
-  setup(props, { emit }) {
-    const menuLocationCoordinates = ref(false);
-
-    const latitude = ref(0);
-    const longitude = ref(0);
-
-    const onCoordinatesChange = () => {
-      const newModelValue = new Address({
-        country: "",
-        formattedAddress: "",
-        locality: "",
-        placeId: "",
-        placeLabel: "",
-        latitude: latitude.value,
-        longitude: longitude.value,
-      });
-      emit("update:locationCoordinates", newModelValue);
-    };
-
-    const onAddressFieldSubmit = (address: Address|null) => {
-      if(!address) {
-        return;
-      }
-      emit('update:modelValue', address);
-    };
-
-    const onSubmit = () => {
-      emit('submit');
-    };
-
-    const onCancel = () => {
-      emit('cancel');
-    };
-
-    watch(() => props.modelValue, () => {
-      if (props.modelValue) {
-        latitude.value = props.modelValue.latitude;
-        longitude.value = props.modelValue.longitude;
-      }
-    }, { immediate: true });
-
-    return {
-      menuLocationCoordinates,
-      longitude,
-      latitude,
-      onAddressFieldSubmit,
-      onCoordinatesChange,
-      onCancel,
-      onSubmit
-    };
-  }
-});
-</script>