@dative-gpi/foundation-core-components 1.1.24-unit-formatter → 1.1.24-unit-formatter-2

package/components/lists/charts/FSBaseChartsList.vue

@@ -68,14 +68,6 @@
         </FSText>
       </FSRow>
     </template>
-    <template
-      #item.modelsLabels="{ item }"
-    >
-      <FSTagGroup
-        :showRemove="false"
-        :tags="item.modelsLabels.map((d: any) => d.label)"
-      />
-    </template>
     <template
       #item.scope="{ item }"
     >
@@ -113,7 +105,8 @@ import { ChartOrigin, ChartType } from "@dative-gpi/foundation-shared-domain/enu
 import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import type { ChartModelLabel, ChartOrganisationFilters, ChartOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
+import type { ModelInfos } from "@dative-gpi/foundation-core-domain/models";
+import type { ChartOrganisationFilters, ChartOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useChartOrganisations, useChartOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
 
 import FSChartTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSChartTileUI.vue";
@@ -199,7 +192,7 @@ export default defineComponent({
         tags: c.tags,
         multiple: c.multiple,
         chartType: c.chartType,
-        modelsLabels: c.modelsLabels
+        models: c.models
       })).concat(chartOrganisationTypes.value.map(c => ({
         id: c.id,
         imageId: c.imageId,
@@ -214,13 +207,13 @@ export default defineComponent({
         tags: c.tags,
         multiple: c.multiple,
         chartType: c.chartType,
-        modelsLabels: c.modelsLabels
+        models: c.models
       })));
     });
 
     const headersOptions = computed(() => ({
-      modelsLabels: {
-        fixedFilters: chartOrganisationTypes.value.map(c => c.modelsLabels).reduce((acc, models) => {
+      models: {
+        fixedFilters: chartOrganisationTypes.value.map(c => c.models).reduce((acc, models) => {
           for(const m of models){
             if(!acc.map((m) => m.id).includes(m.id)){
               acc.push(m);
@@ -234,7 +227,7 @@ export default defineComponent({
           value: '',
           text: '--'
         }),
-        methodFilter: (value: string, items: ChartModelLabel[]) => (items.length == 0 && value == '') || (items.length  > 0 && items.some(ml => ml.id == value))
+        methodFilter: (value: string, items: ModelInfos[]) => (items.length == 0 && value == '') || (items.length  > 0 && items.some(ml => ml.id == value))
       },
       chartType: {
         fixedFilters: getEnumEntries(ChartType).map(e => ({

package/components/lists/dashboards/FSBaseDashboardsList.vue

@@ -1,15 +1,14 @@
 <template>
-  <FSDataTable
-    defaultMode="iterator"
-    :items="items"
-    :itemTo="$props.itemTo"
-    :headersOptions="headersOptions"
-    :loading="fetchingDashboardOrganisationTypes || fetchingDashboardOrganisations || fetchingDashboardShallows"
+  <FSBaseDashboardsExplorer
     :tableCode="$props.tableCode"
+    :allowedTypes="$props.allowedTypes"
+    :dashboardExplorerElementsFilters="$props.dashboardExplorerElementsFilters"
+    :itemTo="$props.itemTo"
     :selectable="$props.selectable"
     :singleSelect="$props.singleSelect"
-    :modelValue="selecteds"
-    @update:modelValue="onSelect"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    @update:types="onUpdateTypes"
     v-bind="$attrs"
   >
     <template
@@ -21,117 +20,22 @@
         v-bind="slotData"
       />
     </template>
-    <template
-      #item.icon="{ item }"
-    >
-      <FSIcon>
-        {{ item.icon }}
-      </FSIcon>
-    </template>
-    <template
-      #item.dashboardType="{ item }"
-    >
-      <FSChip
-        :color="ColorEnum.Light"
-        :label="dashboardTypeLabel(item.dashboardType)"
-      />
-    </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.tags="{ item }"
-    >
-      <FSTagGroup
-        variant="slide"
-        :showRemove="false"
-        :tags="item.tags"
-      />
-    </template>
-    <template
-      #item.tile="{ index, item, toggleSelect }"
-    >
-      <FSDashboardOrganisationTypeTileUI
-        v-if="item.dashboardType == DashboardType.OrganisationType"
-        :key="index"
-        :bottomColor="item.colors"
-        :selectable="$props.selectable"
-        :singleSelect="$props.singleSelect"
-        :to="$props.itemTo && $props.itemTo(item)"
-        :modelValue="isSelected(item.id)"
-        @update:modelValue="toggleSelect(item)"
-        v-bind="item"
-      />
-      <FSDashboardOrganisationTileUI
-        v-if="item.dashboardType == DashboardType.Organisation"
-        :key="index"
-        :bottomColor="item.colors"
-        :selectable="$props.selectable"
-        :singleSelect="$props.singleSelect"
-        :to="$props.itemTo && $props.itemTo(item)"
-        :modelValue="isSelected(item.id)"
-        @update:modelValue="toggleSelect(item)"
-        v-bind="item"
-      />
-      <FSDashboardShallowTileUI
-        v-if="item.dashboardType == DashboardType.Shallow"
-        :key="index"
-        :bottomColor="item.colors"
-        :selectable="$props.selectable"
-        :singleSelect="$props.singleSelect"
-        :modelValue="isSelected(item.id)"
-        @update:modelValue="toggleSelect(item)"
-        :to="$props.itemTo && $props.itemTo(item)"
-        v-bind="item"
-      />
-    </template>
-  </FSDataTable>
+  </FSBaseDashboardsExplorer>
 </template>
 
 <script lang="ts">
-import _ from "lodash";
+import { defineComponent, type PropType } from "vue";
 import type { RouteLocation } from "vue-router";
-import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
-
-import { useAppOrganisationId, useCurrentUserOrganisation, useDashboardOrganisations, useDashboardOrganisationTypes, useDashboardShallows } from "@dative-gpi/foundation-core-services/composables";
-import type { DashboardOrganisationTypeFilters, DashboardOrganisationFilters, DashboardShallowFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
-import { useOrganisation } from "@dative-gpi/foundation-shared-services/composables";
 
-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 { DashboardExplorerElementType, DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
+import type { DashboardExplorerElementFilters, DashboardExplorerElementInfos } from "@dative-gpi/foundation-core-domain/models";
 
-import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
-import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.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 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';
+import FSBaseDashboardsExplorer from "../../explorers/FSBaseDashboardsExplorer.vue";
 
 export default defineComponent({
   name: "FSBaseDashboardsList",
   components: {
-    FSDataTable,
-    FSTagGroup,
-    FSChip,
-    FSIcon,
-    FSDashboardOrganisationTileUI,
-    FSDashboardOrganisationTypeTileUI,
-    FSDashboardShallowTileUI
+    FSBaseDashboardsExplorer
   },
   props: {
     tableCode: {
@@ -139,23 +43,17 @@ export default defineComponent({
       required: false,
       default: null
     },
-    dashboardOrganisationTypeFetchFilter: {
-      type: Object as PropType<DashboardOrganisationTypeFilters>,
-      default: undefined,
-      required: false
-    },
-    dashboardOrganisationsFilters: {
-      type: Object as PropType<DashboardOrganisationFilters>,
-      default: undefined,
-      required: false
-    },
-    dashboardShallowsFilters: {
-      type: Object as PropType<DashboardShallowFilters>,
-      default: undefined,
-      required: false
+    allowedTypes: {
+      type: Array as PropType<DashboardExplorerElementType[]>,
+      required: false,
+      default: () => [
+        DashboardExplorerElementType.DashboardOrganisation,
+        DashboardExplorerElementType.DashboardShallow,
+        DashboardExplorerElementType.DashboardOrganisationType
+      ]
     },
     itemTo: {
-      type: Function as PropType<(item: DashboardInfos) => Partial<RouteLocation>>,
+      type: Function as PropType<(item: DashboardExplorerElementInfos) => Partial<RouteLocation>>,
       required: false
     },
     modelValue: {
@@ -173,109 +71,27 @@ export default defineComponent({
       required: false,
       default: false
     },
+    dashboardExplorerElementsFilters: {
+      type: Object as PropType<DashboardExplorerElementFilters>,
+      required: false,
+      default: () => ({})
+    },
   },
-  emits: ["update", "update:modelValue", "update:type"],
-  setup(props, { emit }) {
-    const { entities: dashboardOrganisationTypes, fetching: fetchingDashboardOrganisationTypes, getMany: getManyDashboardOrganisationTypes } = useDashboardOrganisationTypes();
-    const { entities: dashboardOrganisations, fetching: fetchingDashboardOrganisations, getMany: getManyDashboardOrganisations } = useDashboardOrganisations();
-    const { entities: dashboardShallows, fetching: fetchingDashboardShallows, getMany: getManyDashboardShallows } = useDashboardShallows();
-    const { fetch: fetchUserOrganisation, entity: userOrganisation } = useCurrentUserOrganisation();
-    const { entity: organisation, get: getOrganisation } = useOrganisation();
-    const { organisationId } = useAppOrganisationId();
-
-    const selecteds = ref<string[]>(props.modelValue);
-
-    const items = computed((): DashboardsListItem[] => {
-      return _.sortBy([
-        ...dashboardOrganisationTypes.value.map(g => ({
-          ...g,
-          dashboardType: DashboardType.OrganisationType
-        })) as DashboardsListItem[],
-        ...dashboardOrganisations.value.map(d => ({
-          ...d,
-          dashboardType: DashboardType.Organisation
-        })) as DashboardsListItem[],
-        ...dashboardShallows.value.map(d => ({
-          ...d,
-          dashboardType: DashboardType.Shallow
-        })) as DashboardsListItem[]
-      ], 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;
-    });
-
-    const mainOrganisationDashboardId = computed(() => {
-      return organisation.value?.mainDashboardId;
-    });
-
-    const onSelect = (values: string[]) => {
-      selecteds.value = values;
-      const selectedItems = items.value.filter(i => selecteds.value!.includes(i.id));
-      const newModelValue = selectedItems.map(i => i.id);
-      const newType = selectedItems.map(i => i.dashboardType);
-      emit("update:modelValue", newModelValue);
-      emit("update:type", newType);
-      emit("update", { modelValue: newModelValue, type: newType });
-    };
-
-    const isSelected = (id: string) => {
-      return selecteds.value?.includes(id);
+  emits: ["update:modelValue", "update:types"],
+  setup(_, { emit }) {
+    const onUpdateTypes = (types: (DashboardExplorerElementType | undefined)[]): void => {
+      emit("update:types", types.map(t => {
+        switch (t) {
+          case DashboardExplorerElementType.DashboardOrganisation:     return DashboardType.Organisation;
+          case DashboardExplorerElementType.DashboardShallow:          return DashboardType.Shallow;
+          case DashboardExplorerElementType.DashboardOrganisationType: return DashboardType.OrganisationType;
+          default:                                                      return DashboardType.None;
+        }
+      }));
     };
 
-    onMounted(() => {
-      fetchUserOrganisation();
-    })
-
-    watch(() => organisationId.value, () => {
-      if (organisationId.value) {
-        getOrganisation(organisationId.value);
-      }
-    }, { immediate: true });
-
-    watch(() => props.dashboardOrganisationTypeFetchFilter, (next, previous) => {
-      if ((!next && !previous) || !_.isEqual(next, previous)) {
-        getManyDashboardOrganisationTypes(props.dashboardOrganisationTypeFetchFilter);
-      }
-    }, { immediate: true });
-
-    watch(() => props.dashboardOrganisationsFilters, (next, previous) => {
-      if ((!next && !previous) || !_.isEqual(next, previous)) {
-        getManyDashboardOrganisations(props.dashboardOrganisationsFilters);
-      }
-    }, { immediate: true });
-
-    watch(() => props.dashboardShallowsFilters, (next, previous) => {
-      if ((!next && !previous) || !_.isEqual(next, previous)) {
-        getManyDashboardShallows(props.dashboardShallowsFilters);
-      }
-    }, { immediate: true });
-
-    return {
-      fetchingDashboardOrganisationTypes,
-      fetchingDashboardOrganisations,
-      fetchingDashboardShallows,
-      headersOptions,
-      selecteds,
-      ColorEnum,
-      items,
-      mainUserDashboardId,
-      mainOrganisationDashboardId,
-      onSelect,
-      isSelected,
-      DashboardType,
-      dashboardTypeLabel
+    return { 
+      onUpdateTypes 
     };
   }
 });

package/components/lists/dashboards/FSSimpleDashboardsList.vue

@@ -7,14 +7,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, watch, computed } from "vue";
-import _ from "lodash";
+import { defineComponent, type PropType, computed, watch } from "vue";
 
-import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
-import { useDashboardOrganisations, useDashboardOrganisationTypes, useDashboardShallows } from "@dative-gpi/foundation-core-services/composables";
-
-import { DashboardType } from '@dative-gpi/foundation-shared-domain/enums';
-import type { DashboardsListItem } from '@dative-gpi/foundation-core-components/utils';
+import { DashboardExplorerElementType } from "@dative-gpi/foundation-shared-domain/enums";
+import { useDashboardExplorerElements } from "@dative-gpi/foundation-core-services/composables";
+import type { DashboardExplorerElementFilters, DashboardExplorerElementInfos } from "@dative-gpi/foundation-core-domain/models";
 
 import FSSimpleList from "@dative-gpi/foundation-shared-components/components/lists/FSSimpleList.vue";
 
@@ -24,66 +21,43 @@ export default defineComponent({
     FSSimpleList,
   },
   props: {
-    dashboardOrganisationFilters: {
-      type: Object as PropType<DashboardOrganisationFilters>,
-      required: false,
-      default: () => ({})
-    },
-    dashboardOrganisationTypeFilters: {
-      type: Object as PropType<DashboardOrganisationTypeFilters>,
+    allowedTypes: {
+      type: Array as PropType<DashboardExplorerElementType[]>,
       required: false,
-      default: () => ({})
+      default: () => [
+        DashboardExplorerElementType.DashboardOrganisation,
+        DashboardExplorerElementType.DashboardShallow,
+        DashboardExplorerElementType.DashboardOrganisationType
+      ]
     },
-    dashboardShallowFilters: {
-      type: Object as PropType<DashboardShallowFilters>,
+    dashboardExplorerElementsFilters: {
+      type: Object as PropType<DashboardExplorerElementFilters>,
       required: false,
-      default: () => ({})
+      default:  () => ({})
     }
   },
-  setup(props){
-    const { entities: dashboardOrganisations, 
-            getMany: getManyDashboardOrganisations, 
-            fetching: fetchingDashboardOrganisations } = useDashboardOrganisations();
-    const { entities: dashboardOrganisationTypes, 
-            getMany: getManyDashboardOrganisationTypes, 
-            fetching: fetchingDashboardOrganisationTypes } = useDashboardOrganisationTypes();
-    const { entities: dashboardShallows, 
-            getMany: getManyDashboardShallows, 
-            fetching: fetchingDashboardShallows } = useDashboardShallows();
+  setup(props) {
+    const { entities, fetching, getMany } = useDashboardExplorerElements();
 
-    const fetching = computed(() => fetchingDashboardOrganisations.value 
-      || fetchingDashboardOrganisationTypes.value
-      || fetchingDashboardShallows.value);
-    
-    const dashboards = computed((): DashboardsListItem[] => {
-      return _.sortBy([
-        ...dashboardOrganisationTypes.value.map(g => ({
-          ...g,
-          dashboardType: DashboardType.OrganisationType
-        })) satisfies DashboardsListItem[],
-        ...dashboardOrganisations.value.map(d => ({
-          ...d,
-          dashboardType: DashboardType.Organisation
-        })) as DashboardsListItem[],
-        ...dashboardShallows.value.map(d => ({
-          ...d,
-          dashboardType: DashboardType.Shallow
-        })) as DashboardsListItem[]
-      ], d => d.label);
+    const dashboards = computed((): DashboardExplorerElementInfos[] => {
+      return entities.value
+        .filter(e => props.allowedTypes.includes(e.type))
+        .sort((a, b) => a.label.localeCompare(b.label));
     });
 
     const fetch = () => {
-      getManyDashboardOrganisations(props.dashboardOrganisationFilters);
-      getManyDashboardOrganisationTypes(props.dashboardOrganisationTypeFilters);
-      getManyDashboardShallows(props.dashboardShallowFilters);
-    }
+      getMany({
+        types: props.allowedTypes,
+        ...props.dashboardExplorerElementsFilters
+      });
+    };
 
-    watch(() => [props.dashboardOrganisationFilters, props.dashboardOrganisationTypeFilters], fetch, { immediate: true });
+    watch(() => props.dashboardExplorerElementsFilters, fetch, { immediate: true });
 
     return {
       dashboards,
       fetching
-    }
+    };
   }
 });
 </script>

package/components/lists/dashboards/FSTileDashboardsList.vue

@@ -11,7 +11,7 @@
       #item.tile="{ item, toggleSelect, direction }"
     >
       <FSDashboardOrganisationTileUI
-        v-if="item.dashboardType === DashboardType.Organisation"
+        v-if="item.type === DashboardExplorerElementType.DashboardOrganisation"
         :code="item.code"
         :icon="item.icon"
         :label="item.label"
@@ -23,7 +23,7 @@
         @update:modelValue="toggleSelect(item)"
       />
       <FSDashboardOrganisationTypeTileUI
-        v-else-if="item.dashboardType === DashboardType.OrganisationType"
+        v-else-if="item.type === DashboardExplorerElementType.DashboardOrganisationType"
         :code="item.code"
         :icon="item.icon"
         :label="item.label"
@@ -35,7 +35,7 @@
         @update:modelValue="toggleSelect(item)"
       />
       <FSDashboardShallowTileUI
-        v-else-if="item.dashboardType === DashboardType.Shallow"
+        v-else-if="item.type === DashboardExplorerElementType.DashboardShallow"
         :code="item.code"
         :icon="item.icon"
         :label="item.label"
@@ -51,23 +51,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, watch, computed } from "vue";
-import _ from "lodash";
+import { defineComponent, type PropType, computed, watch } from "vue";
 
-import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DashboardShallowFilters } from "@dative-gpi/foundation-core-domain/models";
-import { useDashboardOrganisations, useDashboardOrganisationTypes, useDashboardShallows } from "@dative-gpi/foundation-core-services/composables";
-
-import { DashboardType } from '@dative-gpi/foundation-shared-domain/enums';
-import type { DashboardsListItem } from '@dative-gpi/foundation-core-components/utils';
+import { DashboardExplorerElementType, ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
+import { useDashboardExplorerElements } from "@dative-gpi/foundation-core-services/composables";
+import type { DashboardExplorerElementFilters, DashboardExplorerElementInfos } from "@dative-gpi/foundation-core-domain/models";
 
 import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
 import FSDashboardOrganisationTypeTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTypeTileUI.vue";
 import FSDashboardShallowTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardShallowTileUI.vue";
 import FSTileList from "@dative-gpi/foundation-shared-components/components/lists/FSTileList.vue";
 
-import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
-
-
 export default defineComponent({
   name: "FSTileDashboardsList",
   components: {
@@ -77,20 +71,14 @@ export default defineComponent({
     FSDashboardShallowTileUI
   },
   props: {
-    dashboardOrganisationFilters: {
-      type: Object as PropType<DashboardOrganisationFilters>,
+    allowedTypes: {
+      type: Array as PropType<DashboardExplorerElementType[]>,
       required: false,
-      default: () => ({})
-    },
-    dashboardOrganisationTypeFilters: {
-      type: Object as PropType<DashboardOrganisationTypeFilters>,
-      required: false,
-      default: () => ({})
-    },
-    dashboardShallowFilters: {
-      type: Object as PropType<DashboardShallowFilters>,
-      required: false,
-      default: () => ({})
+      default: () => [
+        DashboardExplorerElementType.DashboardOrganisation,
+        DashboardExplorerElementType.DashboardShallow,
+        DashboardExplorerElementType.DashboardOrganisationType
+      ]
     },
     modelValue: {
       type: Array as PropType<string[]>,
@@ -101,56 +89,36 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    dashboardExplorerElementsFilters: {
+      type: Object as PropType<DashboardExplorerElementFilters>,
+      required: false,
+      default: () => ({})
     }
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const { entities: dashboardOrganisations, 
-            getMany: getManyDashboardOrganisations, 
-            fetching: fetchingDashboardOrganisations } = useDashboardOrganisations();
-    const { entities: dashboardOrganisationTypes, 
-            getMany: getManyDashboardOrganisationTypes, 
-            fetching: fetchingDashboardOrganisationTypes } = useDashboardOrganisationTypes();
-    const { entities: dashboardShallows, 
-            getMany: getManyDashboardShallows, 
-            fetching: fetchingDashboardShallows } = useDashboardShallows();
+    const { entities, fetching, getMany } = useDashboardExplorerElements();
 
-    const fetching = computed(() => fetchingDashboardOrganisations.value 
-      || fetchingDashboardOrganisationTypes.value
-      || fetchingDashboardShallows.value);
-    
-    const dashboards = computed((): DashboardsListItem[] => {
-      return _.sortBy([
-        ...dashboardOrganisationTypes.value.map(g => ({
-          ...g,
-          dashboardType: DashboardType.OrganisationType
-        })) satisfies DashboardsListItem[],
-        ...dashboardOrganisations.value.map(d => ({
-          ...d,
-          dashboardType: DashboardType.Organisation
-        })) as DashboardsListItem[],
-        ...dashboardShallows.value.map(d => ({
-          ...d,
-          dashboardType: DashboardType.Shallow
-        })) as DashboardsListItem[]
-      ], d => d.label);
+    const dashboards = computed((): DashboardExplorerElementInfos[] => {
+      return entities.value
+        .filter(e => props.allowedTypes.includes(e.type))
+        .sort((a, b) => a.label.localeCompare(b.label));
     });
 
     const fetch = () => {
-      getManyDashboardOrganisations(props.dashboardOrganisationFilters);
-      getManyDashboardOrganisationTypes(props.dashboardOrganisationTypeFilters);
-      getManyDashboardShallows(props.dashboardShallowFilters);
+      getMany({
+        types: props.allowedTypes,
+        ...props.dashboardExplorerElementsFilters
+      });
     };
 
-    watch(
-      [() => props.dashboardOrganisationFilters, () => props.dashboardOrganisationTypeFilters, () => props.dashboardShallowFilters], 
-      fetch, 
-      { immediate: true });
+    watch(() => props.dashboardExplorerElementsFilters, fetch, { immediate: true });
 
     return {
       dashboards,
       fetching,
-      DashboardType,
+      DashboardExplorerElementType,
       ListDirections
     };
   }