@dative-gpi/foundation-core-components 1.0.157 → 1.0.158-devices-latency-2

package/components/autocompletes/FSAutocompleteGrouping.vue

@@ -0,0 +1,105 @@
+<template>
+  <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.grouping', 'Grouping')"
+    :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :multiple="$props.multiple"
+    :placeholder="placeholder"
+    :loading="loading"
+    :items="groupings"
+    :modelValue="$props.modelValue"
+    @update:modelValue="onUpdate"
+    v-bind="$attrs"
+  >
+    <template
+      #item-prepend="{ item }"
+    >
+      <FSIcon
+        v-if="item.icon"
+      >
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+  </FSAutocompleteField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
+import { type GroupingFilters } from "@dative-gpi/foundation-core-domain/models";
+import { useGroupings } from "@dative-gpi/foundation-core-services/composables";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+
+export default defineComponent({
+  name: "FSAutocompleteGrouping",
+  components: {
+    FSAutocompleteField,
+    FSIcon
+  },
+  props: {
+    groupingFilters: {
+      type: Object as PropType<GroupingFilters>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: [Array, String] as PropType<string[] | string | null>,
+      required: false,
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    toggleSetDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { getMany: getManyGroupings, fetching: fetchingGroupings, entities: groupings } = useGroupings();
+    const { $tr } = useTranslationsProvider();
+
+    const loading = computed((): boolean => {
+      return init.value && fetchingGroupings.value;
+    });
+
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("ui.autocomplete-grouping.placeholder", "{0} grouping(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
+    const fetch = (search: string | null) => {
+      return getManyGroupings({ ...props.groupingFilters, search: search ?? undefined });
+    };
+
+    const { toggleSet, init, onUpdate } = useAutocomplete(
+      groupings,
+      [() => props.groupingFilters],
+      emit,
+      fetch
+    );
+
+    return {
+      placeholder,
+      groupings,
+      toggleSet,
+      loading,
+      onUpdate
+    };
+  }
+});
+</script>

package/components/explorers/FSBaseDevicesExplorer.vue

@@ -129,28 +129,38 @@
     </template>
 
     <template
-      #item.tile="{ item, toggleSelect }"
+      #item.tile="{ index, item, toggleSelect }"
     >
       <FSGroupTileUI
         v-if="item.type === DeviceExplorerElementType.Group"
+        :key="index"
         :to="$props.itemTo && $props.itemTo(item)"
+        :imageId="item.imageId"
+        :icon="item.icon"
+        :label="item.label"
+        :code="item.code"
+        :recursiveGroupsIds="item.recursiveGroupsIds"
+        :recursiveDeviceOrganisationsIds="item.recursiveDeviceOrganisationsIds"
         :modelValue="isSelected(item.id)"
         :selectable="$props.selectable"
         @update:modelValue="toggleSelect(item)"
-        v-bind="item"
       />
       <FSDeviceOrganisationTileUI
         v-if="item.type === DeviceExplorerElementType.DeviceOrganisation"
+        :key="index"
         :to="$props.itemTo && $props.itemTo(item)"
         :deviceConnectivity="item.connectivity"
         :deviceStatuses="item.status.statuses"
         :deviceWorstAlert="item.worstAlert"
         :deviceAlerts="item.alerts"
+        :imageId="item.imageId"
+        :label="item.label"
+        :code="item.code"
+        :modelStatuses="item.modelStatuses"
         :alertTo="$props.alertTo"
         :modelValue="isSelected(item.id)"
         :selectable="$props.selectable"
         @update:modelValue="toggleSelect(item)"
-        v-bind="item"
       />
     </template>
   </FSDataTable>

package/components/explorers/FSBaseFoldersExplorer.vue

@@ -5,6 +5,7 @@
     :item-to="$props.itemTo"
     :loading="fetchingFolders || fetchingDashboardOrganisations || fetchingDashboardShallows"
     :tableCode="$props.tableCode"
+    :headersOptions="headersOptions"
     :modelValue="selecteds"
     :selectable="$props.selectable"
     @update:modelValue="onSelect"
@@ -74,6 +75,20 @@
         :tags="item.tags"
       />
     </template>
+    <template
+      #item.dashboardType="{ item }"
+    >
+      <FSChip
+        v-if="item.type === FoldersListType.Dashboard"
+        :color="ColorEnum.Light"
+        :label="dashboardTypeLabel(item.dashboardType)"
+      />
+      <FSChip
+        v-else-if="item.type === FoldersListType.Folder"
+        :color="ColorEnum.Light"
+        :label="$tr('ui.common.folder', 'Folder')"
+      />
+    </template>
     <template
       #item.tile="{ item, toggleSelect }"
     >
@@ -117,10 +132,11 @@ import { useOrganisation } from "@dative-gpi/foundation-shared-services/composab
 import { useDashboardOrganisations, useFolders, useDashboardShallows, useAppOrganisationId, useCurrentUserOrganisation } from "@dative-gpi/foundation-core-services/composables";
 
 import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
-import { FoldersListType, type FoldersListItem } from "@dative-gpi/foundation-core-components/utils";
+import { dashboardTypeLabel, FoldersListType, type FoldersListItem } from "@dative-gpi/foundation-core-components/utils";
 import type { FolderFilters, DashboardOrganisationFilters, DashboardShallowFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
 
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSChip from '@dative-gpi/foundation-shared-components/components/FSChip.vue';
 import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
 import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
 import FSIconCheck from "@dative-gpi/foundation-shared-components/components/FSIconCheck.vue";
@@ -129,6 +145,8 @@ import FSDashboardShallowTileUI from "@dative-gpi/foundation-shared-components/c
 import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
 
 import FSDataTable from "../lists/FSDataTable.vue";
+import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
+import { useTranslations } from '@dative-gpi/bones-ui';
 
 export default defineComponent({
   name: "FSBaseFoldersExplorer",
@@ -140,6 +158,7 @@ export default defineComponent({
     FSIconCheck,
     FSTagGroup,
     FSImage,
+    FSChip,
     FSIcon
   },
   props: {
@@ -179,7 +198,7 @@ export default defineComponent({
   },
   emits: ["update", "update:modelValue", "update:type", "update:dashboard-type"],
   setup(props, { emit }) {
-
+    const { $tr } = useTranslations();
     const { fetch: fetchUserOrganisation, entity: userOrganisation } = useCurrentUserOrganisation();
     const { entity: organisation, get: getOrganisation } = useOrganisation();
     const { organisationId } = useAppOrganisationId();
@@ -218,7 +237,33 @@ export default defineComponent({
           })) as FoldersListItem[]
         ], d => d.label)
       ]
-    })
+    });
+
+    const headersOptions = computed(() => ({
+      dashboardType: {
+        fixedFilters: [
+          {
+            value: DashboardType.Organisation,
+            text: dashboardTypeLabel(DashboardType.Organisation)
+          },
+          {
+            value: DashboardType.Shallow,
+            text: dashboardTypeLabel(DashboardType.Shallow)
+          },
+          {
+            value: 10,
+            text: $tr("ui.common.folder", "Folder")
+          },
+        ],
+        methodFilter: (value: number, dashboardType: DashboardType) => {
+          if(dashboardType !== DashboardType.None) {
+            return value === dashboardType;
+          } else {
+            return value === 10;
+          }
+        }
+      }
+    }));
 
     const onSelect = (values: string[]) => {
       selecteds.value = values;
@@ -274,12 +319,15 @@ export default defineComponent({
       fetchingFolders,
       mainOrganisationDashboardId,
       mainUserDashboardId,
+      headersOptions,
+      ColorEnum,
       selecteds,
       items,
       onSelect,
       isSelected,
       FoldersListType,
-      DashboardType
+      DashboardType,
+      dashboardTypeLabel
     };
   }
 });

package/components/fields/FSMagicConfigField.vue

@@ -0,0 +1,171 @@
+<template>
+  <FSRow
+    class="fs-magic-config-field"
+  >
+    <component
+      v-if="$props.type"
+      class="fs-magic-config-field-value"
+      :is="get($props.type)"
+      :label="$tr('ui.common.value', 'Value')"
+      :disabled="$props.disabled"
+      :required="true"
+      :rules="rules"
+      :modelValue="valueToInput"
+      @update:modelValue="inputToValue"
+    />
+    <FSRow
+      gap="24px"
+    >
+      <FSTranslateField
+        :label="$tr('entity.common.label', 'Label')"
+        :disabled="$props.disabled"
+        :modelValue="$props.labelDefault"
+        :translations="$props.translations"
+        @update:modelValue="$emit('update:labelDefault', $event)"
+        @update:translations="$emit('update:translations', $event)"
+      />
+      <FSRow
+        class="fs-magic-config-field-actions"
+        width="hug"
+        :wrap="false"
+      >
+        <FSButtonRemoveIcon
+          @click="$emit('click:remove')"
+        />
+        <FSButtonAddIcon
+          @click="$emit('click:add')"
+        />
+      </FSRow>
+    </FSRow>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules, AutocompleteRules } from "@dative-gpi/foundation-shared-components/models";
+import { useMagicFieldProvider } from "@dative-gpi/foundation-core-services/composables";
+import { MagicFieldType } from "@dative-gpi/foundation-core-domain/models/magicFields";
+
+import FSButtonRemoveIcon from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonRemoveIcon.vue";
+import FSButtonAddIcon from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonAddIcon.vue";
+import FSTranslateField from "@dative-gpi/foundation-shared-components/components/fields/FSTranslateField.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+
+export default defineComponent({
+  name: "FSMagicConfigField",
+  components: {
+    FSButtonRemoveIcon,
+    FSTranslateField,
+    FSButtonAddIcon,
+    FSRow
+  },
+  props: {
+    type: {
+      type: Number as PropType<MagicFieldType>,
+      required: false,
+      default: MagicFieldType.TextField
+    },
+    labelDefault: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    translations: {
+      type: Array as PropType<{ languageCode: string; label: string }[]>,
+      required: false,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["click:remove", "click:add", "update:modelValue", "update:labelDefault", "update:translations"],
+  setup(props, { emit }) {
+    const { get } = useMagicFieldProvider();
+
+    const rules = computed((): Function[] => {
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+          return [NumberRules.required()];
+        case MagicFieldType.TextField:
+          return [TextRules.required()];
+        case MagicFieldType.DateTimeField:
+          return [DateRules.required()];
+        case MagicFieldType.IconField:
+          return [IconRules.required()];
+        case MagicFieldType.TimeField:
+          return [TimeRules.required()];
+        case MagicFieldType.TimeStepField:
+          return [TimeStepRules.required()];
+        case MagicFieldType.PlotPerField:
+          return [AutocompleteRules.required()];
+      }
+      return [];
+    });
+
+    const valueToInput = computed((): any => {
+      if (!props.modelValue) {
+        return null;
+      }
+
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          if (isNaN(parseFloat(props.modelValue))) {
+            return null;
+          }
+          return parseFloat(props.modelValue);
+        case MagicFieldType.Switch: 
+          return props.modelValue === "true";
+        case MagicFieldType.TimeStepField:
+          return JSON.parse(props.modelValue);
+        case MagicFieldType.PlotPerField:
+          return parseInt(props.modelValue);
+        default:
+          return props.modelValue;
+      }
+    });
+
+    const inputToValue = (value: any) => {
+      if (!value) {
+        emit("update:modelValue", null);
+      }
+
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.Switch: 
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          emit("update:modelValue", value.toString());
+          break;
+        case MagicFieldType.TimeStepField:
+          emit("update:modelValue", JSON.stringify(value));
+          break;
+        case MagicFieldType.PlotPerField:
+          emit("update:modelValue", value.toString());
+          break;
+        default:
+          emit("update:modelValue", value);
+          break;
+      }
+    };
+
+    return {
+      MagicFieldType,
+      valueToInput,
+      rules,
+      inputToValue,
+      get
+    };
+  },
+});
+</script>

package/components/fields/FSMagicField.vue

@@ -0,0 +1,197 @@
+<template>
+  <component
+    v-if="!$props.useOnlyAllowedValues"
+    :is="get($props.type)"
+    :modelValue="valueToInput"
+    @update:modelValue="inputToValue"
+    v-bind="$attrs"
+  />
+  <FSSelectField
+    v-else
+    itemValue="value"
+    :items="items"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-if="$props.type === MagicFieldType.IconField"
+      #selection="{ item }"
+    >
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <FSIcon
+          v-if="item.raw.value"
+        >
+          {{ item.raw.value }}
+        </FSIcon>
+        <FSSpan
+          v-if="item.raw.value !== item.raw.label"
+        >
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
+    </template>
+    <template
+      v-if="$props.type === MagicFieldType.IconField"
+      #item-label="{ item }"
+    >
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <FSIcon
+          v-if="item.raw.value"
+        >
+          {{ item.raw.value }}
+        </FSIcon>
+        <FSSpan
+          v-if="item.raw.value !== item.raw.label"
+        >
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
+    </template>
+  </FSSelectField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useMagicFieldProvider } from "@dative-gpi/foundation-core-services/composables";
+import { MagicFieldType } from "@dative-gpi/foundation-core-domain/models";
+import { getTimeBestString, timeStepToString } from "@dative-gpi/foundation-shared-components/utils";
+
+import FSSelectField from "@dative-gpi/foundation-shared-components/components/fields/FSSelectField.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+
+export default defineComponent({
+  name: "FSMagicField",
+  components: {
+    FSSelectField,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    type: {
+      type: Number as PropType<MagicFieldType>,
+      required: false,
+      default: MagicFieldType.TextField
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    allowedValues: {
+      type: Array as PropType<{ value: string; label: string }[]>,
+      required: false,
+      default: () => []
+    },
+    useOnlyAllowedValues: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { epochToShortTimeFormat } = useDateFormat();
+    const { $tr } = useTranslationsProvider();
+    const { get } = useMagicFieldProvider();
+
+    const items = computed(() => props.allowedValues.map((av) => ({
+      value: av.value,
+      label: av.label || asString(av.value),
+    })));
+
+    const valueToInput = computed((): any => {
+      if (props.modelValue == null) {
+        return null;
+      }
+
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          if (isNaN(parseFloat(props.modelValue))) {
+            return null;
+          }
+          return parseFloat(props.modelValue);
+        case MagicFieldType.Switch: 
+          return props.modelValue === "true";
+        case MagicFieldType.TimeStepField:
+        case MagicFieldType.PlotPerField:
+          return JSON.parse(props.modelValue);
+        default:
+          return props.modelValue;
+      }
+    });
+
+    const asString = (value: string): string | null => {
+      if (value == null) {
+        return "";
+      }
+      
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+          return value.toString();
+        case MagicFieldType.Switch:
+          if (value) {
+            return $tr("magic-field.true", "True");
+          }
+          return $tr("magic-field.false", "False");
+        case MagicFieldType.DateTimeField:
+          return epochToShortTimeFormat(parseFloat(value));
+        case MagicFieldType.TimeField:
+          return getTimeBestString(parseFloat(value));
+        case MagicFieldType.TimeStepField:
+          return timeStepToString(JSON.parse(value));
+        case MagicFieldType.PlotPerField:
+          return JSON.parse(value).plotPer;
+        default:
+          return value;
+      }
+    }
+
+    const inputToValue = (value: any) => {
+      if (value == null) {
+        emit("update:modelValue", null);
+      }
+
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.Switch: 
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          emit("update:modelValue", value.toString());
+          break;
+        case MagicFieldType.TimeStepField:
+        case MagicFieldType.PlotPerField:
+          emit("update:modelValue", JSON.stringify(value));
+          break;
+        default:
+          emit("update:modelValue", value);
+          break;
+      }
+    };
+
+    return {
+      MagicFieldType,
+      valueToInput,
+      items,
+      inputToValue,
+      get
+    };
+  },
+});
+</script>

package/components/lists/alerts/FSBaseAlertsList.vue

@@ -5,6 +5,7 @@
     :itemTo="$props.itemTo"
     :items="alertsOrdered"
     :loading="fetchingAlerts"
+    :headersOptions="headersOptions"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     :selectable="$props.selectable"
@@ -194,11 +195,14 @@ import type { RouteLocation } from "vue-router";
 import { computed, defineComponent, watch } from "vue";
 import _ from "lodash";
 
+import { useTranslations } from "@dative-gpi/bones-ui";
+
 import type { AlertFilters, AlertInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
 import { useAlerts } from "@dative-gpi/foundation-core-services/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import type { Criticity } from "@dative-gpi/foundation-shared-domain/enums";
+import { Criticity } from "@dative-gpi/foundation-shared-domain/enums";
 import { AlertStatus } from "@dative-gpi/foundation-shared-domain/enums";
 
 import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
@@ -212,6 +216,7 @@ import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage
 import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
 import FSAlertTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSAlertTileUI.vue";
 
+
 export default defineComponent({
   name: "FSBaseAlertsList",
   components: {
@@ -265,6 +270,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { $tr } = useTranslations();
     const { getMany: getManyAlerts, entities: alerts, fetching : fetchingAlerts } = useAlerts();
     const { epochToShortTimeFormat } = useDateFormat();
 
@@ -289,12 +295,36 @@ export default defineComponent({
       }); 
     });
 
+    const headersOptions = computed(() => ({
+      currentStatus: {
+        fixedFilters: getEnumEntries(AlertStatus).map(e => ({
+          value: e.value,
+          text: AlertTools.statusLabel(e.value)
+        })),
+        methodFilter: (value: AlertStatus, item: AlertStatus) => value == item
+      },
+      criticity: {
+        fixedFilters: getEnumEntries(Criticity).map(e => ({
+          value: e.value,
+          text: AlertTools.criticityLabel(e.value)
+        })),
+        methodFilter: (value: Criticity, item: Criticity) => value == item
+      },
+      acknowledged: {
+        fixedFilters: [
+          { value: true, text: $tr('entity.alert.acknowledged', 'Acknowledged') },
+          { value: false, text: $tr('ui.alert.not-acknowledged', 'Not acknowledged') }
+        ],
+        methodFilter: (value: boolean, item: boolean) => value === item
+      },
+    }));
+
     watch([() => props.alertFilters, () => props.notAcknowledged, () => props.hidePending], (next, previous) => {
       if (!_.isEqual(next, previous)) {
         getManyAlerts({
           ...props.alertFilters,
           acknowledged: props.notAcknowledged ? false : undefined,
-          statuses: props.hidePending ? [AlertStatus.Unresolved, AlertStatus.Triggered, AlertStatus.Resolved, AlertStatus.Untriggered, AlertStatus.Abandoned] : undefined
+          statuses: props.hidePending ? [AlertStatus.Unresolved, AlertStatus.Triggered, AlertStatus.Resolved, AlertStatus.Abandoned] : undefined
         });
       }
     }, { immediate: true });
@@ -302,6 +332,7 @@ export default defineComponent({
 
     return {
       fetchingAlerts,
+      headersOptions,
       alertsOrdered,
       AlertTools,
       ColorEnum,

package/components/lists/charts/FSBaseChartsList.vue

@@ -76,6 +76,14 @@
         :tags="item.modelsLabels.map((d: any) => d.label)"
       />
     </template>
+    <template
+      #item.scope="{ item }"
+    >
+      <FSChip
+        :label="applicationScopeLabel(item.scope)"
+        :color="ColorEnum.Light"
+      />
+    </template>
     <template
       #item.tile="{ item }"
     >
@@ -99,10 +107,10 @@
 import { defineComponent, type PropType, watch, computed } from "vue";
 import _ from "lodash";
 
-import { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
+import { chartTypeLabel, chartIcon, applicationScopeLabel } from "@dative-gpi/foundation-shared-components/tools";
+import { ChartOrigin, ChartType } from "@dative-gpi/foundation-shared-domain/enums";
 import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { chartTypeLabel, chartIcon } from "@dative-gpi/foundation-shared-components/tools";
 
 import type { ChartModelLabel, ChartOrganisationFilters, ChartOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useChartOrganisations, useChartOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
@@ -111,6 +119,8 @@ import FSChartTileUI from "@dative-gpi/foundation-shared-components/components/t
 import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
 import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSChip from '@dative-gpi/foundation-shared-components/components/FSChip.vue';
+import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
 import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 import FSDataTable from "../FSDataTable.vue";
@@ -122,6 +132,8 @@ export default defineComponent({
     FSDataTable,
     FSTagGroup,
     FSImage,
+    FSText,
+    FSChip,
     FSIcon,
     FSRow
   },
@@ -229,7 +241,15 @@ export default defineComponent({
           text: chartTypeLabel(e.value)
         })),
         methodFilter: (value: ChartType, item: ChartType) => value == item
+      },
+      scope: {
+        fixedFilters: getEnumEntries(ChartOrigin).filter(e => e.value != ChartOrigin.None).map(e => ({
+          value: e.value,
+          text: applicationScopeLabel(e.value)
+        })),
+        methodFilter: (value: ChartOrigin, item: ChartOrigin) => value == item
       }
+
     }));
 
     const update = (value : string) => {
@@ -274,6 +294,7 @@ export default defineComponent({
       headersOptions,
       ColorEnum,
       charts,
+      applicationScopeLabel,
       chartTypeLabel,
       isSelected,
       chartIcon,

package/components/lists/dashboards/FSBaseDashboardsList.vue

@@ -3,6 +3,7 @@
     defaultMode="iterator"
     :items="items"
     :itemTo="$props.itemTo"
+    :headersOptions="headersOptions"
     :loading="fetchingDashboardOrganisationTypes || fetchingDashboardOrganisations || fetchingDashboardShallows"
     :tableCode="$props.tableCode"
     :selectable="$props.selectable"
@@ -27,6 +28,14 @@
         {{ item.icon }}
       </FSIcon>
     </template>
+    <template
+      #item.dashboardType="{ item }"
+    >
+      <FSChip
+        :color="ColorEnum.Light"
+        :label="dashboardTypeLabel(item.dashboardType)"
+      />
+    </template>
     <template
       #item.main="{ item }"
     >
@@ -96,8 +105,10 @@ import { useAppOrganisationId, useCurrentUserOrganisation, useDashboardOrganisat
 import type { DashboardOrganisationTypeFilters, DashboardOrganisationFilters, DashboardShallowFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useOrganisation } from "@dative-gpi/foundation-shared-services/composables";
 
-import type { DashboardsListItem } from "@/core/foundation-core-components/utils";
+import { dashboardTypeLabel, type DashboardsListItem } from "@dative-gpi/foundation-core-components/utils";
+import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
 import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from '@dative-gpi/foundation-shared-domain';
 
 import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
@@ -106,12 +117,14 @@ import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-compone
 import FSDashboardOrganisationTypeTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTypeTileUI.vue";
 
 import FSDataTable from "../FSDataTable.vue";
+import FSChip from '@dative-gpi/foundation-shared-components/components/FSChip.vue';
 
 export default defineComponent({
   name: "FSBaseDashboardsList",
   components: {
     FSDataTable,
     FSTagGroup,
+    FSChip,
     FSIcon,
     FSDashboardOrganisationTileUI,
     FSDashboardOrganisationTypeTileUI,
@@ -186,6 +199,16 @@ export default defineComponent({
       ], d => d.label);
     });
 
+    const headersOptions = computed(() => ({
+      dashboardType: {
+        fixedFilters: getEnumEntries(DashboardType).filter(e => e.value != DashboardType.None).map(e => ({
+          value: e.value,
+          text: dashboardTypeLabel(e.value)
+        })),
+        methodFilter: (value: DashboardType, item: DashboardType) => value == item
+      }
+    }));
+
     const mainUserDashboardId = computed(() => {
       return userOrganisation.value?.mainDashboardId;
     });
@@ -240,13 +263,16 @@ export default defineComponent({
       fetchingDashboardOrganisationTypes,
       fetchingDashboardOrganisations,
       fetchingDashboardShallows,
+      headersOptions,
       selecteds,
+      ColorEnum,
       items,
       mainUserDashboardId,
       mainOrganisationDashboardId,
       onSelect,
       isSelected,
-      DashboardType
+      DashboardType,
+      dashboardTypeLabel
     };
   }
 });

package/components/lists/groupings/FSBaseGroupingsList.vue

@@ -0,0 +1,125 @@
+<template>
+  <FSDataTable
+    defaultMode="iterator"
+    :loading="fetchingGroupings"
+    :items="groupings"
+    :itemTo="$props.itemTo"
+    :selectable="$props.selectable"
+    :showSearch="$props.showSearch"
+    :singleSelect="$props.singleSelect"
+    :disableTable="$props.disableTable"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.tile="{ item, toggleSelect }"
+    >
+      <FSGroupingTileUI
+        :selectable="$props.selectable"
+        :modelValue="isSelected(item.id)"
+        :singleSelect="$props.singleSelect"
+        :to="$props.itemTo && $props.itemTo(item)"
+        @update:modelValue="toggleSelect(item)"
+        v-bind="item"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch } from "vue";
+import { type RouteLocation } from "vue-router";
+import type { PropType} from "vue";
+import _ from "lodash";
+
+import type { GroupingFilters, GroupingInfos } from "@dative-gpi/foundation-core-domain/models";
+import { useGroupings } from "@dative-gpi/foundation-core-services/composables";
+
+import FSDataTable from "../FSDataTable.vue";
+
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSGroupingTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSGroupingTileUI.vue";
+
+
+export default defineComponent({
+  name: "FSBaseGroupingsList",
+  components: {
+    FSDataTable,
+    FSIcon,
+    FSGroupingTileUI
+  },
+  props: {
+    itemTo: {
+      type: Function as PropType<(item: GroupingInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    groupingsFilters: {
+      type: Object as PropType<GroupingFilters>,
+      required: false,
+      default: null
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    showSearch: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disableTable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: fetchGroupings, fetching: fetchingGroupings, entities: groupings } = useGroupings();
+
+    const isSelected = (id: string) => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.groupingsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchGroupings(props.groupingsFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingGroupings,
+      groupings,
+      isSelected
+    };
+  }
+});
+</script>

package/components/selects/FSPlotPerSelector.vue

@@ -0,0 +1,129 @@
+<template>
+  <FSRow
+    v-bind="$attrs"
+  >
+    <FSAutocompleteField
+      v-if="$props.showSelector"
+      :hideHeader="$props.hideHeader"
+      :clearable="$props.clearable"
+      :label="label ?? $tr('ui.common.plot-per','Plot per')"
+      :items="plotPerItems"
+      v-bind="$props.plotPerSelectorProps"
+      v-model="actualPlotPer"
+    />
+    <FSAutocompleteGrouping
+      v-if="actualPlotPer === PlotPer.Grouping && showGroupingAutocomplete"
+      :hideHeader="$props.hideHeader"
+      :clearable="$props.clearable"
+      :toggleSetDisabled="true"
+      v-bind="$props.groupingAutocompleteProps"
+      v-model="actualGroupingId"
+    />
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
+
+import { PlotPer } from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { plotPerLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+import FSAutocompleteGrouping from "@dative-gpi/foundation-core-components/components/autocompletes/FSAutocompleteGrouping.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField,
+    FSAutocompleteGrouping
+  },
+  props: {
+    modelValue: {
+      type: Object as PropType<{ plotPer: PlotPer, groupingId: string | null }>,
+      required: false,
+      default: () => ({ plotPer: PlotPer.None, groupingId: null })
+    },
+    allowedPlotPers: {
+      type: Array as PropType<PlotPer[]>,
+      required: false,
+      default: null
+    },
+    plotPerSelectorProps: {
+      type: Object as PropType<Record<string, any>>,
+      required: false,
+      default: () => ({})
+    },
+    groupingAutocompleteProps: {
+      type: Object as PropType<Record<string, any>>,
+      required: false,
+      default: () => ({})
+    },
+    label: {
+      type: String,
+      required: false
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    showSelector: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showGroupingAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const actualPlotPer = ref(PlotPer.None);
+    const actualGroupingId = ref<string | null>(null)
+    
+    const plotPerItems = computed(()=>{
+      if (props.allowedPlotPers != null) {
+        return props.allowedPlotPers.map((f)=>{
+          return {
+            id: f,
+            label: plotPerLabel(f)
+          }
+        })
+      }
+      return getEnumEntries(PlotPer).filter(f=>f.value != PlotPer.None).map((f)=>{
+        return {
+          id: f.value,
+          label: plotPerLabel(f.value)
+        }
+      });
+    });
+
+    watch(() => props.modelValue, (newVal) => {
+      actualPlotPer.value = newVal?.plotPer ?? plotPerItems.value[0].id;
+      actualGroupingId.value = newVal?.groupingId ?? null;
+    }, { immediate: true });
+
+    watch([actualPlotPer, actualGroupingId], () => {
+      emit('update:modelValue', {
+        plotPer: actualPlotPer.value,
+        groupingId: actualGroupingId.value
+      });
+    });
+
+    return {
+      actualGroupingId,
+      actualPlotPer,
+      plotPerItems,
+      PlotPer
+    }
+  }
+})
+</script>

package/components/tiles/FSFolderTile.vue

@@ -7,11 +7,13 @@
   />
   <FSFolderTileUI
     v-else-if="entity"
-    :label="entity.label"
     :code="entity.code"
-    :bottomColor="entity.colors"
     :icon="entity.icon"
+    :label="entity.label"
     :imageId="entity.imageId"
+    :bottomColor="entity.colors"
+    :recursiveFoldersIds="entity.recursiveFoldersIds"
+    :recursiveDashboardsIds="entity.recursiveDashboardsIds"
     :selectable="$props.selectable"
     :modelValue="$props.modelValue"
     @update:modelValue="(value) => $emit('update:modelValue', value)"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-core-components",
   "sideEffects": false,
-  "version": "1.0.157",
+  "version": "1.0.158-devices-latency-2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,11 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-core-domain": "1.0.157",
-    "@dative-gpi/foundation-core-services": "1.0.157",
-    "@dative-gpi/foundation-shared-components": "1.0.157",
-    "@dative-gpi/foundation-shared-domain": "1.0.157",
-    "@dative-gpi/foundation-shared-services": "1.0.157"
+    "@dative-gpi/foundation-core-domain": "1.0.158-devices-latency-2",
+    "@dative-gpi/foundation-core-services": "1.0.158-devices-latency-2",
+    "@dative-gpi/foundation-shared-components": "1.0.158-devices-latency-2",
+    "@dative-gpi/foundation-shared-domain": "1.0.158-devices-latency-2",
+    "@dative-gpi/foundation-shared-services": "1.0.158-devices-latency-2"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -26,5 +26,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "0aedaf4c6e5f977982f18d5936f5cdfaf7ab86a4"
+  "gitHead": "63914dedbe1ac988443cf07e471e2fa6120392f2"
 }

package/utils/dashboards.ts

@@ -8,7 +8,7 @@ const { $tr } = useTranslationsProvider();
 export const dashboardTypeLabel = (type: DashboardType): string => {
   switch (type) {
     case DashboardType.None:             return $tr("ui.common.none", "None");
-    case DashboardType.Organisation:
+    case DashboardType.Organisation:     return $tr('ui.dashboard-type.shallow', 'Shallow copy');
     case DashboardType.Shallow:          return $tr("ui.common.custom", "Custom");
     case DashboardType.OrganisationType: return $tr("ui.common.shared", "Shared");
   }