@dative-gpi/foundation-core-components 1.1.23-fs-chart → 1.1.24-unit-formatter

package/components/autocompletes/FSAutocompleteDataCategory.vue

@@ -4,7 +4,7 @@
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
-    :items="items"
+    :items="dataCategories"
     :loading="loading"
     :modelValue="$props.modelValue"
     @update:modelValue="onUpdate"
@@ -124,15 +124,6 @@ export default defineComponent({
       return getManyDataCategories({ ...props.dataCategoriesFilters, search: search ?? undefined });
     };
 
-    const items = computed(() => dataCategories.value.map((dataCategory) => {
-      const modelsLabel = dataCategory.models.map((m) => m.label).join(", ");
-      return {
-        id: dataCategory.id,
-        label: modelsLabel ? `${dataCategory.label} (${modelsLabel})` : dataCategory.label,
-        correlated: dataCategory.correlated
-      };
-    }));
-
     const { toggleSet, init, onUpdate } = useAutocomplete(
       dataCategories,
       [() => props.dataCategoriesFilters],
@@ -141,7 +132,7 @@ export default defineComponent({
     );
 
     return {
-      items,
+      dataCategories,
       placeholder,
       ColorEnum,
       toggleSet,

package/components/entities/FSBaseEntitiesList.vue

@@ -47,10 +47,6 @@ export default defineComponent({
           return defineAsyncComponent(() => import("../lists/locations/FSBaseLocationsList.vue"));
         case EntityType.Model:
           return defineAsyncComponent(() => import("../lists/models/FSBaseModelsList.vue"));
-        case EntityType.Grouping:
-          return defineAsyncComponent(() => import("../lists/groupings/FSBaseGroupingsList.vue"));
-        case EntityType.Subgrouping:
-          return defineAsyncComponent(() => import("../lists/subgroupings/FSBaseSubgroupingsList.vue"));
         default:
           return null;
       };

package/components/entities/FSEntityField.vue

@@ -41,7 +41,7 @@ import { defineComponent, ref, type PropType, computed } from "vue";
 
 import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
 
-import type { DashboardExplorerElementFilters, DeviceOrganisationFilters, FolderFilters, GroupFilters, GroupingFilters, LocationFilters, ModelFilters, SubgroupingFilters, UserOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
+import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DeviceOrganisationFilters, FolderFilters, GroupFilters, LocationFilters, ModelFilters, UserOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
 
 import FSEntityFieldUI from "@dative-gpi/foundation-shared-components/components/fields/FSEntityFieldUI.vue";
 
@@ -138,8 +138,10 @@ export default defineComponent({
           } satisfies DeviceOrganisationFilters;
         case EntityType.Dashboard:
           return {
-            dashboardExplorerElementsIds: props.modelValue,
-          } satisfies DashboardExplorerElementFilters;
+            dashboardOrganisationsIds: props.modelValue,
+            dashboardOrganisationTypesIds: props.modelValue,
+            dashboardShallowsIds: props.modelValue
+          } satisfies DashboardOrganisationFilters & DashboardOrganisationTypeFilters;
         case EntityType.Group:
           return {
             groupsIds: props.modelValue
@@ -160,14 +162,6 @@ export default defineComponent({
           return {
             modelsIds: props.modelValue
           } satisfies ModelFilters;
-        case EntityType.Grouping:
-          return {
-            groupingsIds: props.modelValue
-          } satisfies GroupingFilters;
-        case EntityType.Subgrouping:
-          return {
-            subgroupingsIds: props.modelValue
-          } satisfies SubgroupingFilters;
         default:
           return undefined;
       };

package/components/entities/FSSelectEntitiesList.vue

@@ -42,7 +42,6 @@
         :singleSelect="$props.singleSelect"
         :entity-type="$props.entityType"
         :tableCode="tableCode"
-        :selectable="true"
         :modelValue="$props.modelValue"
         @update:modelValue="$emit('update:modelValue', $event)"
         v-bind="baseTableAttrs"
@@ -65,7 +64,7 @@
 import { defineComponent, type PropType, computed } from "vue";
 
 import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
-import type { DashboardExplorerElementFilters, DeviceOrganisationFilters, FolderFilters, GroupFilters, GroupingFilters, LocationFilters, ModelFilters, SubgroupingFilters, UserOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
+import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DashboardShallowFilters, DeviceOrganisationFilters, FolderFilters, GroupFilters, LocationFilters, ModelFilters, UserOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
 
 import { TABLES as T } from "../../utils";
 
@@ -124,8 +123,10 @@ export default defineComponent({
           } satisfies DeviceOrganisationFilters;
         case EntityType.Dashboard:
           return {
-            dashboardExplorerElementsIds: props.modelValue,
-          } satisfies DashboardExplorerElementFilters;
+            dashboardOrganisationsIds: props.modelValue,
+            dashboardOrganisationTypesIds: props.modelValue,
+            dashboardShallowsIds: props.modelValue
+          } satisfies DashboardOrganisationFilters & DashboardOrganisationTypeFilters & DashboardShallowFilters;
         case EntityType.Group:
           return {
             groupsIds: props.modelValue
@@ -146,14 +147,6 @@ export default defineComponent({
           return {
             modelsIds: props.modelValue
           } satisfies ModelFilters;
-        case EntityType.Grouping:
-          return {
-            groupingsIds: props.modelValue
-          } satisfies GroupingFilters;
-        case EntityType.Subgrouping:
-          return {
-            subgroupingsIds: props.modelValue
-          } satisfies SubgroupingFilters;
         default:
           return undefined;
       };
@@ -163,18 +156,6 @@ export default defineComponent({
       switch(props.entityType) {
         case EntityType.Device:
           return T.DEVICES_SELECT;
-        case EntityType.Dashboard:
-          return T.DASHBOARDS_SELECT;
-        case EntityType.Group:
-          return T.GROUPS_SELECT;
-        case EntityType.Location:
-          return T.LOCATIONS_SELECT;
-        case EntityType.Model:
-          return T.MODELS_SELECT;
-        case EntityType.Grouping:
-          return T.GROUPINGS_SELECT;
-        case EntityType.Subgrouping:
-          return T.SUBGROUPINGS_SELECT;
         default:
           return null;
       };
@@ -189,7 +170,9 @@ export default defineComponent({
           };
         case EntityType.Dashboard:
           return {
-            dashboardExplorerElementsFilters: props.filters,
+            dashboardShallowsFilters: props.filters,
+            dashboardOrganisationsFilters: props.filters,
+            dashboardOrganisationTypeFetchFilter: props.filters,
             ...attrs
           };
         case EntityType.Group:
@@ -217,16 +200,6 @@ export default defineComponent({
             modelsFilters: props.filters,
             ...attrs
           };
-        case EntityType.Grouping:
-          return {
-            groupingFilters: props.filters,
-            ...attrs
-          };
-        case EntityType.Subgrouping:
-          return {
-            subgroupingFilters: props.filters,
-            ...attrs
-          };
         default:
           return null;
       };

package/components/entities/FSSimpleEntitiesList.vue

@@ -43,10 +43,6 @@ export default defineComponent({
           return defineAsyncComponent(() => import("../lists/locations/FSSimpleLocationsList.vue"));
         case EntityType.Model:
           return defineAsyncComponent(() => import("../lists/models/FSSimpleModelsList.vue"));
-        case EntityType.Grouping:
-          return defineAsyncComponent(() => import("../lists/groupings/FSSimpleGroupingsList.vue"));
-        case EntityType.Subgrouping:
-          return defineAsyncComponent(() => import("../lists/subgroupings/FSSimpleSubgroupingsList.vue"));
         default:
           return null;
       };
@@ -62,7 +58,8 @@ export default defineComponent({
         case EntityType.Dashboard:
           return {
             ...attrs,
-            dashboardExplorerElementsFilters: props.filters
+            dashboardOrganisationFilters : props.filters,
+            dashboardOrganisationTypeFilters : props.filters
           };
         case EntityType.Folder:
           return {
@@ -89,16 +86,6 @@ export default defineComponent({
             ...attrs,
             modelFilters : props.filters
           };
-        case EntityType.Grouping:
-          return {
-            ...attrs,
-            groupingFilters : props.filters
-          };
-        case EntityType.Subgrouping:
-          return {
-            ...attrs,
-            subgroupingFilters : props.filters
-          };
         default:
           return null;
       }

package/components/entities/FSTileEntitiesList.vue

@@ -55,7 +55,9 @@ export default defineComponent({
         case EntityType.Dashboard:
           return {
             ...attrs,
-            dashboardExplorerElementsFilters: props.filters
+            dashboardOrganisationFilters : props.filters,
+            dashboardOrganisationTypeFilters : props.filters,
+            dashboardShallowFilters : props.filters
           };
         case EntityType.Folder:
           return {

package/components/explorers/FSBaseFoldersExplorer.vue

@@ -0,0 +1,337 @@
+<template>
+  <FSDataTable
+    defaultMode="iterator"
+    :items="items"
+    :item-to="$props.itemTo"
+    :loading="fetchingFolders || fetchingDashboardOrganisations || fetchingDashboardShallows"
+    :tableCode="$props.tableCode"
+    :headersOptions="headersOptions"
+    :modelValue="selecteds"
+    :selectable="$props.selectable"
+    @update:modelValue="onSelect"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #header.imageId-title
+    >
+      <FSIcon>
+        mdi-panorama-variant-outline
+      </FSIcon>
+    </template>
+    <template
+      #item.imageId="{ item }"
+    >
+      <FSImage
+        v-if="item.imageId"
+        height="32px"
+        width="32px"
+        :imageId="item.imageId"
+        :thumbnail="true"
+      />
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.main="{ item }"
+    >
+      <FSIcon
+        v-if="item.id === mainOrganisationDashboardId"
+      >
+        mdi-account-group-outline
+      </FSIcon>
+      <FSIcon
+        v-if="item.id === mainUserDashboardId"
+      >
+        mdi-home
+      </FSIcon>
+    </template>
+    <template
+      #item.locked="{ item }"
+    >
+      <FSIconCheck
+        :value="item.locked"
+      />
+    </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :showRemove="false"
+        :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="{ index, item, toggleSelect }"
+    >
+      <FSFolderTileUI
+        v-if="item.type == FoldersListType.Folder"
+        :key="index"
+        :bottomColor="item.colors"
+        v-bind="item"
+        :selectable="$props.selectable"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        :to="$props.itemTo && $props.itemTo(item)"
+      />
+      <FSDashboardOrganisationTileUI
+        v-if="item.type == FoldersListType.Dashboard && item.dashboardType == DashboardType.Organisation"
+        :key="index"
+        :bottomColor="item.colors"
+        :selectable="$props.selectable"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        :to="$props.itemTo && $props.itemTo(item)"
+        v-bind="item"
+      />
+      <FSDashboardShallowTileUI
+        v-if="item.type == FoldersListType.Dashboard && item.dashboardType == DashboardType.Shallow"
+        :key="index"
+        :bottomColor="item.colors"
+        :selectable="$props.selectable"
+        :modelValue="isSelected(item.id)"
+        @update:modelValue="toggleSelect(item)"
+        :to="$props.itemTo && $props.itemTo(item)"
+        v-bind="item"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import _ from "lodash";
+import type { RouteLocation } from "vue-router";
+import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
+
+import { useOrganisation } from "@dative-gpi/foundation-shared-services/composables";
+import { useDashboardOrganisations, useFolders, useDashboardShallows, useAppOrganisationId, useCurrentUserOrganisation } from "@dative-gpi/foundation-core-services/composables";
+
+import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
+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";
+import FSFolderTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSFolderTileUI.vue";
+import FSDashboardShallowTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardShallowTileUI.vue";
+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",
+  components: {
+    FSDashboardOrganisationTileUI,
+    FSDashboardShallowTileUI,
+    FSFolderTileUI,
+    FSDataTable,
+    FSIconCheck,
+    FSTagGroup,
+    FSImage,
+    FSChip,
+    FSIcon
+  },
+  props: {
+    foldersFilters: {
+      type: Object as PropType<FolderFilters>,
+      default: undefined,
+      required: false
+    },
+    dashboardOrganisationsFilters: {
+      type: Object as PropType<DashboardOrganisationFilters>,
+      default: undefined,
+      required: false
+    },
+    dashboardShallowsFilters: {
+      type: Object as PropType<DashboardShallowFilters>,
+      default: undefined,
+      required: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    itemTo: {
+      type: Function as PropType<(item: DashboardInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    tableCode: {
+      type: String,
+      required: true
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  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();
+
+    const { entities: dashboardOrganisations, fetching: fetchingDashboardOrganisations, getMany: getManyDashboardOrganisations } = useDashboardOrganisations();
+    const { entities: dashboardShallows, fetching: fetchingDashboardShallows, getMany: getManyDashboardShallows } = useDashboardShallows();
+    const { entities: folders, fetching: fetchingFolders, getMany: getManyFolders } = useFolders();
+
+    const selecteds = ref<string[]>([]);
+
+    const mainUserDashboardId = computed(() => {
+      return userOrganisation.value?.mainDashboardId;
+    });
+
+    const mainOrganisationDashboardId = computed(() => {
+      return organisation.value?.mainDashboardId;
+    });
+
+    const items = computed((): FoldersListItem[] => {
+      return [
+        ...folders.value.map(g => ({
+          ...g,
+          type: FoldersListType.Folder,
+          dashboardType: DashboardType.None
+        })) as FoldersListItem[],
+        ..._.sortBy([
+          ...dashboardOrganisations.value.map(d => ({
+            ...d,
+            type: FoldersListType.Dashboard,
+            dashboardType: DashboardType.Organisation
+          })) as FoldersListItem[],
+          ...dashboardShallows.value.map(d => ({
+            ...d,
+            type: FoldersListType.Dashboard,
+            dashboardType: DashboardType.Shallow
+          })) 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;
+      const selectedItems = items.value.filter(i => selecteds.value!.includes(i.id));
+      const newDashboardType = selectedItems.map(i => i.dashboardType);
+      const newModelValue = selectedItems.map(i => i.id);
+      const newType = selectedItems.map(i => i.type);
+      emit("update:dashboard-type", newDashboardType);
+      emit("update:modelValue", newModelValue);
+      emit("update:type", newType);
+      emit("update", { dashboardType: newDashboardType, modelValue: newModelValue, type: newType });
+    };
+
+    const isSelected = (id: string) => {
+      return selecteds.value?.includes(id);
+    };
+
+    onMounted(() => {
+      fetchUserOrganisation();
+    })
+
+    watch(() => organisationId.value, () => {
+      if (organisationId.value) {
+        getOrganisation(organisationId.value);
+      }
+    }, { immediate: true });
+
+    watch(() => props.foldersFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyFolders(props.foldersFilters, f => f.parentId == props.foldersFilters?.parentId);
+      }
+    }, { immediate: true });
+
+    watch(() => props.dashboardOrganisationsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyDashboardOrganisations(props.dashboardOrganisationsFilters, f => f.folderId == props.foldersFilters?.parentId);
+      }
+    }, { immediate: true });
+
+    watch(() => props.dashboardShallowsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        getManyDashboardShallows(props.dashboardShallowsFilters, f => f.folderId == props.foldersFilters?.parentId);
+      }
+    }, { immediate: true });
+
+    watch(() => props.modelValue, (next) => {
+      selecteds.value = next;
+    }, { immediate: true });
+
+    return {
+      fetchingDashboardOrganisations,
+      fetchingDashboardShallows,
+      fetchingFolders,
+      mainOrganisationDashboardId,
+      mainUserDashboardId,
+      headersOptions,
+      ColorEnum,
+      selecteds,
+      items,
+      onSelect,
+      isSelected,
+      FoldersListType,
+      DashboardType,
+      dashboardTypeLabel
+    };
+  }
+});
+</script>

package/components/lists/chartOrganisationTypes/FSBaseChartOrganisationTypesList.vue

@@ -70,11 +70,11 @@
       </FSRow>
     </template>
     <template
-      #item.models="{ item }"
+      #item.modelsLabels="{ item }"
     >
       <FSTagGroup
         variant="slide"
-        :tags="item.models.map((d: any) => d.label)"
+        :tags="item.modelsLabels.map((d: any) => d.label)"
         :showRemove="false"
       />
     </template>
@@ -109,8 +109,7 @@ 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 { ModelInfos } from "@dative-gpi/foundation-core-domain/models";
-import type { ChartOrganisationTypeFilters, ChartOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
+import type { ChartModelLabel, ChartOrganisationTypeFilters, ChartOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useChartOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
 
 import FSChartTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSChartTileUI.vue";
@@ -169,8 +168,8 @@ export default defineComponent({
     const { entities: chartOrganisationTypes, fetching: fetchingChartOrganisationTypes, getMany: getManyChartOrganisationTypes } = useChartOrganisationTypes();
 
     const headersOptions = computed(() => ({
-      models: {
-        fixedFilters: chartOrganisationTypes.value.map(c => c.models).reduce((acc, models) => {
+      modelsLabels: {
+        fixedFilters: chartOrganisationTypes.value.map(c => c.modelsLabels).reduce((acc, models) => {
           for (const m of models) {
             if (!acc.map((m) => m.id).includes(m.id)) {
               acc.push(m);
@@ -184,7 +183,7 @@ export default defineComponent({
           value: '',
           text: '--'
         }),
-        methodFilter: (value: string, items: ModelInfos[]) => (items.length == 0 && value == '') || (items.length  > 0 && items.some(ml => ml.id == value))
+        methodFilter: (value: string, items: ChartModelLabel[]) => (items.length == 0 && value == '') || (items.length  > 0 && items.some(ml => ml.id == value))
       },
       chartType: {
         fixedFilters: getEnumEntries(ChartType).map(e => ({

package/components/lists/chartOrganisations/FSBaseChartOrganisationsList.vue

@@ -56,11 +56,11 @@
       />
     </template>
     <template
-      #item.models="{ item }"
+      #item.modelsLabels="{ item }"
     >
       <FSTagGroup
         variant="slide"
-        :tags="item.models.map((d: any) => d.label)"
+        :tags="item.modelsLabels.map((d: any) => d.label)"
         :showRemove="false"
       />
     </template>
@@ -109,8 +109,7 @@ 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 { ModelInfos } from "@dative-gpi/foundation-core-domain/models";
-import type { ChartOrganisationFilters, ChartOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
+import type { ChartModelLabel, ChartOrganisationFilters, ChartOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useChartOrganisations } from "@dative-gpi/foundation-core-services/composables";
 
 import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
@@ -169,8 +168,8 @@ export default defineComponent({
     const { entities: chartOrganisations, fetching: fetchingChartOrganisations, getMany: getManyChartOrganisations } = useChartOrganisations();
 
     const headersOptions = computed(() => ({
-      models: {
-        fixedFilters: chartOrganisations.value.map(c => c.models).reduce((acc, models) => {
+      modelsLabels: {
+        fixedFilters: chartOrganisations.value.map(c => c.modelsLabels).reduce((acc, models) => {
           for (const m of models) {
             if (!acc.map((m) => m.id).includes(m.id)) {
               acc.push(m);
@@ -184,7 +183,7 @@ export default defineComponent({
           value: '',
           text: '--'
         }),
-        methodFilter: (value: string, items: ModelInfos[]) => (items.length == 0 && value == '') || (items.length  > 0 && items.some(ml => ml.id == value))
+        methodFilter: (value: string, items: ChartModelLabel[]) => (items.length == 0 && value == '') || (items.length  > 0 && items.some(ml => ml.id == value))
       },
       chartType: {
         fixedFilters: getEnumEntries(ChartType).map(e => ({