@dative-gpi/foundation-core-components 1.1.4 → 1.1.5

package/components/entities/FSBaseEntitiesList.vue

@@ -47,6 +47,10 @@ 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/FSSelectEntitiesList.vue

@@ -42,6 +42,7 @@
         :singleSelect="$props.singleSelect"
         :entity-type="$props.entityType"
         :tableCode="tableCode"
+        :selectable="true"
         :modelValue="$props.modelValue"
         @update:modelValue="$emit('update:modelValue', $event)"
         v-bind="baseTableAttrs"
@@ -64,7 +65,7 @@
 import { defineComponent, type PropType, computed } from "vue";
 
 import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
-import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DashboardShallowFilters, DeviceOrganisationFilters, FolderFilters, GroupFilters, LocationFilters, ModelFilters, UserOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
+import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DashboardShallowFilters, DeviceOrganisationFilters, FolderFilters, GroupFilters, GroupingFilters, LocationFilters, ModelFilters, SubgroupingFilters, UserOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
 
 import { TABLES as T } from "../../utils";
 
@@ -147,6 +148,14 @@ 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;
       };
@@ -164,6 +173,10 @@ export default defineComponent({
           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;
       };
@@ -208,6 +221,16 @@ export default defineComponent({
             modelsFilters: props.filters,
             ...attrs
           };
+        case EntityType.Grouping:
+          return {
+            groupingsFilters: props.filters,
+            ...attrs
+          };
+        case EntityType.Subgrouping:
+          return {
+            subgroupingFilters: props.filters,
+            ...attrs
+          };
         default:
           return null;
       };

package/components/entities/FSSimpleEntitiesList.vue

@@ -43,6 +43,10 @@ export default defineComponent({
           return defineAsyncComponent(() => import("../lists/locations/FSSimpleLocationsList.vue"));
         case EntityType.Model:
           return defineAsyncComponent(() => import("../lists/models/FSSimpleModelsList.vue"));
+        case EntityType.Subgrouping:
+          return defineAsyncComponent(() => import("../lists/subgroupings/FSSimpleSubgroupingsList.vue"));
+        case EntityType.Grouping:
+          return defineAsyncComponent(() => import("../lists/groupings/FSSimpleGroupingsList.vue"));
         default:
           return null;
       };
@@ -87,6 +91,16 @@ 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/lists/deviceOrganisations/FSBaseDeviceOrganisationsList.vue

@@ -115,6 +115,29 @@
         {{ item.ownerAddress ? item.ownerAddress.formattedAddress : '' }}
       </FSSpan>
     </template>
+    <template
+      #item.subgroupings="{ item }"
+    >
+      <FSSubgroupingsChipGroup
+        :subgroupings="item.subgroupings"
+      />
+    </template>
+    <template
+      #filter.subgroupings-custom="{ filter, toggle, variant }"
+    >
+      <FSSubgroupingChip
+        v-if="filter.value && subgroupingMap[filter.value]"
+        width="100%"
+        :groupingLabel="subgroupingMap[filter.value].groupingLabel"
+        :groupingIcon="subgroupingMap[filter.value].groupingIcon"
+        :groupingColor="subgroupingMap[filter.value].groupingColor"
+        :label="subgroupingMap[filter.value].label"
+        :icon="subgroupingMap[filter.value].icon"
+        :color="'primary'"
+        :variant="variant"
+        @click="toggle()"
+      />
+    </template>
     <template
       #item.actions="{ item }"
     >
@@ -188,15 +211,19 @@ import FSDeviceOrganisationTileUI from "@dative-gpi/foundation-shared-components
 import FSStatusesCarousel from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSStatusesCarousel.vue";
 import FSConnectivity from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSConnectivity.vue";
 import FSWorstAlert from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSWorstAlert.vue";
+import FSSubgroupingChip from "@dative-gpi/foundation-shared-components/components/FSSubgroupingChip.vue";
 import FSIconCheck from "@dative-gpi/foundation-shared-components/components/FSIconCheck.vue";
 import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
 import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
 import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
+import FSSubgroupingsChipGroup from "../subgroupings/FSSubgroupingsChipGroup.vue";
 
 export default defineComponent({
   name: "FSBaseDeviceOrganisationsList",
   components: {
     FSDeviceOrganisationTileUI,
+    FSSubgroupingsChipGroup,
+    FSSubgroupingChip,
     FSStatusesCarousel,
     FSConnectivity,
     FSWorstAlert,
@@ -261,7 +288,33 @@ export default defineComponent({
       return entities.value;
     });
 
-    const headersOptions = computed(() => ({
+    const subgroupingFilters = computed(() => {
+      const filters: { value: string | null, text: string }[] = [{
+        value: null,
+        text: "—"
+      }];
+      
+      const uniqueSubgroupings = _.uniqBy(
+        entities.value.flatMap(device => device.subgroupings),
+        'id'
+      );
+      
+      filters.push(...uniqueSubgroupings.map(subgrouping => ({
+        value: subgrouping.id,
+        text: `${subgrouping.groupingLabel} - ${subgrouping.label}`
+      })));
+      
+      return filters.sort((a, b) => a.text.localeCompare(b.text));
+    });
+
+    const subgroupingMap = computed(() => {
+      return _.chain(entities.value)
+        .flatMap(device => device.subgroupings)
+        .keyBy('id')
+        .value();
+    });
+
+    const headersOptions = computed((): Record<string, any> => ({
       status: {
         fixedFilters: [{
           value: true,
@@ -339,6 +392,17 @@ export default defineComponent({
         },
         sort: (a: DeviceOrganisationAlert, b: DeviceOrganisationAlert) => alphanumericSort(a?.criticity, b?.criticity)
       },
+      subgroupings: {
+
+        fixedFilters: subgroupingFilters.value,
+        methodFilterRaw: (value: string | null, item: DeviceOrganisationInfos) => {
+          if (!value) {
+            return item.subgroupings.length === 0;
+          }
+          return item.subgroupings.some(s => s.id === value);
+        },
+        sort: (a: any[], b: any[]) => a.length - b.length
+      },
       ...customProperties.value.reduce((acc, cp) => ({
         ...acc,
         [`meta.${cp.code}`]: {
@@ -382,6 +446,7 @@ export default defineComponent({
       deviceOrganisations,
       ConnectivityStatus,
       customProperties,
+      subgroupingMap,
       headersOptions,
       isSelected
     };

package/components/lists/groupings/FSBaseGroupingsList.vue

@@ -2,12 +2,10 @@
   <FSDataTable
     defaultMode="iterator"
     :loading="fetchingGroupings"
+    :singleSelect="$props.singleSelect"
+    :selectable="$props.selectable"
     :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"
@@ -94,16 +92,6 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    showSearch: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    disableTable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
   },
   emits: ["update:modelValue"],
   setup(props) {

package/components/lists/groupings/FSSimpleGroupingsList.vue

@@ -0,0 +1,44 @@
+<template>
+  <FSSimpleList
+    :items="groupings"
+    :loading="fetching"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch } from "vue";
+
+import type { GroupingFilters } from "@dative-gpi/foundation-core-domain/models";
+import { useGroupings } from "@dative-gpi/foundation-core-services/composables";
+
+import FSSimpleList from "@dative-gpi/foundation-shared-components/components/lists/FSSimpleList.vue";
+
+export default defineComponent({
+  name: "FSSimpleGroupingsList",
+  components: {
+    FSSimpleList,
+  },
+  props: {
+    groupingFilters: {
+      type: Object as PropType<GroupingFilters>,
+      required: false,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const { entities: groupings, getMany, fetching } = useGroupings();
+
+    const fetch = () => {
+      getMany(props.groupingFilters);
+    };
+
+    watch(() => props.groupingFilters, fetch, { immediate: true });
+
+    return {
+      groupings,
+      fetching
+    };
+  }
+});
+</script>

package/components/lists/groups/FSSimpleGroupsList.vue

@@ -26,6 +26,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
+  innheritAttrs: false,
   setup(props){
     const { entities: groups, getMany, fetching } = useGroups();
 

package/components/lists/subgroupings/FSBaseSubgroupingsList.vue

@@ -0,0 +1,195 @@
+<template>
+  <FSDataTable
+    :loading="fetchingSubgroupings"
+    :items="subgroupings"
+    :itemTo="$props.itemTo"
+    :tableCode="$props.tableCode"
+    :selectable="$props.selectable"
+    :showSearch="$props.showSearch"
+    :disableIterator="true"
+    :singleSelect="$props.singleSelect"
+    :groupBy="groupBy"
+    :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
+      #group-header="{ item }"
+    >
+      <FSRow
+        height="54px"
+        align="center-left"
+      >
+        <FSCard
+          padding="16px 16px 16px 56px"
+          height="100%"
+          width="100%"
+          :borderRadius="0"
+          :variant="CardVariants.Full"
+          :color="getColors(ColorEnum.Light).base"
+        >
+          <FSGroupingChip
+            :label="getGroupingLabel(item.value)"
+            :iconColor="getGroupingColor(item.value)"
+            :icon="getGroupingIcon(item.value)"
+          />
+        </FSCard>
+      </FSRow>
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.tile="{ item, toggleSelect }"
+    >
+      <FSSubgroupingTileUI
+        :selectable="$props.selectable"
+        :modelValue="isSelected(item.id)"
+        :singleSelect="$props.singleSelect"
+        :deviceOrganisationsCount="item.deviceOrganisationsCount"
+        :label="item.label"
+        :icon="item.icon"
+        :to="$props.itemTo && $props.itemTo(item)"
+        @update:modelValue="toggleSelect(item)"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, watch } from "vue";
+import { type RouteLocation } from "vue-router";
+import _ from "lodash";
+
+import type { SubgroupingFilters, SubgroupingInfos } from "@dative-gpi/foundation-core-domain/models";
+import { useSubgroupings } from "@dative-gpi/foundation-core-services/composables";
+
+import FSDataTable from "../FSDataTable.vue";
+
+import FSSubgroupingTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSSubgroupingTileUI.vue";
+import FSGroupingChip from "@dative-gpi/foundation-shared-components/components/FSGroupingChip.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSCard from "@dative-gpi/foundation-shared-components/components/FSCard.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+
+import { ColorEnum, CardVariants } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+export default defineComponent({
+  name: "FSBaseSubgroupingsList",
+  components: {
+    FSSubgroupingTileUI,
+    FSGroupingChip,
+    FSDataTable,
+    FSIcon,
+    FSCard,
+    FSRow
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    itemTo: {
+      type: Function as PropType<(item: SubgroupingInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    subgroupingFilters: {
+      type: Object as PropType<SubgroupingFilters>,
+      required: false,
+      default: null
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    showSearch: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    }
+  },
+  inheritAttrs: false,
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: fetchSubgroupings, fetching: fetchingSubgroupings, entities: subgroupings } = useSubgroupings();
+    const { getColors } = useColors();
+
+    const groupBy = computed(() => ({
+      key: "groupingId",
+      order: "asc" as const
+    }));
+
+    const groupingMap = computed(() => {
+      return _.chain(subgroupings.value)
+        .keyBy('groupingId')
+        .mapValues(s => ({
+          label: s.groupingLabel,
+          color: s.groupingColor,
+          icon: s.groupingIcon
+        }))
+        .value();
+    });
+
+    const getGroupingLabel = (groupingId: string): string => {
+      return groupingMap.value[groupingId].label;
+    };
+
+    const getGroupingColor = (groupingId: string): string => {
+      return groupingMap.value[groupingId].color;
+    };
+
+    const getGroupingIcon = (groupingId: string): string => {
+      return groupingMap.value[groupingId].icon;
+    };
+
+    const isSelected = (id: string) => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.subgroupingFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchSubgroupings(props.subgroupingFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingSubgroupings,
+      getGroupingLabel,
+      getGroupingColor,
+      getGroupingIcon,
+      subgroupings,
+      CardVariants,
+      isSelected,
+      getColors,
+      ColorEnum,
+      groupBy,
+    };
+  }
+});
+</script>

package/components/lists/subgroupings/FSSimpleSubgroupingsList.vue

@@ -0,0 +1,45 @@
+<template>
+  <FSSimpleList
+    :items="subgroupings"
+    :loading="fetching"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch } from "vue";
+
+import type { SubgroupingFilters } from "@dative-gpi/foundation-core-domain/models";
+import { useSubgroupings } from "@dative-gpi/foundation-core-services/composables";
+
+import FSSimpleList from "@dative-gpi/foundation-shared-components/components/lists/FSSimpleList.vue";
+
+export default defineComponent({
+  name: "FSSimpleSubgroupingsList",
+  components: {
+    FSSimpleList,
+  },
+  props: {
+    subgroupingFilters: {
+      type: Object as PropType<SubgroupingFilters>,
+      required: false,
+      default: () => ({})
+    }
+  },
+  inheritAttrs: false,
+  setup(props) {
+    const { entities: subgroupings, getMany, fetching } = useSubgroupings();
+
+    const fetch = () => {
+      getMany(props.subgroupingFilters);
+    };
+
+    watch(() => props.subgroupingFilters, fetch, { immediate: true });
+
+    return {
+      subgroupings,
+      fetching
+    };
+  }
+});
+</script>

package/components/lists/subgroupings/FSSubgroupingsChipGroup.vue

@@ -0,0 +1,54 @@
+<template>
+  <FSChipGroup
+    v-if="$props.subgroupings && $props.subgroupings.length > 0"
+    :items="$props.subgroupings"
+    :maxItems="$props.maxItems"
+  >
+    <template
+      #item.chip="{ item }"
+    >
+      <FSSubgroupingChip
+        :groupingLabel="item.groupingLabel"
+        :groupingIcon="item.groupingIcon"
+        :groupingColor="item.groupingColor"
+        :label="item.label"
+        :icon="item.icon"
+        :to="$props.itemTo ? $props.itemTo(item) : null"
+      />
+    </template>
+  </FSChipGroup>
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { defineComponent } from "vue";
+import { type RouteLocation } from "vue-router";
+
+import type { SubgroupingInfos } from "@dative-gpi/foundation-core-domain/models";
+
+import FSSubgroupingChip from "@dative-gpi/foundation-shared-components/components/FSSubgroupingChip.vue";
+import FSChipGroup from "@dative-gpi/foundation-shared-components/components/FSChipGroup.vue";
+
+export default defineComponent({
+  name: "FSSubgroupingsChipGroup",
+  components: {
+    FSSubgroupingChip,
+    FSChipGroup
+  },
+  props: {
+    subgroupings: {
+      type: Array as PropType<SubgroupingInfos[]>,
+      required: true
+    },
+    itemTo: {
+      type: Function as PropType<(item: SubgroupingInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    maxItems: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: 1
+    }
+  }
+});
+</script>

package/components/lists/userOrganisations/{FSChipUserOrganisationsList.vue → FSUserOrganisationsChipGroup.vue}

@@ -12,7 +12,7 @@
   <FSChipGroup
     v-else
     :color="ColorEnum.Light"
-    :labels="userOrganisations?.map(u => u.name)"
+    :items="userOrganisations?.map(u => u.name)"
     v-bind="$attrs"
   />
 </template>
@@ -28,7 +28,7 @@ import FSLoader from "@dative-gpi/foundation-shared-components/components/FSLoad
 import FSChipGroup from "@dative-gpi/foundation-shared-components/components/FSChipGroup.vue";
   
 export default defineComponent({
-  name: "FSChipUserOrganisationsList",
+  name: "FSUserOrganisationsChipGroup",
   components: {
     FSChipGroup,
     FSLoader,

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,11 +13,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-core-domain": "1.1.4",
-    "@dative-gpi/foundation-core-services": "1.1.4",
-    "@dative-gpi/foundation-shared-components": "1.1.4",
-    "@dative-gpi/foundation-shared-domain": "1.1.4",
-    "@dative-gpi/foundation-shared-services": "1.1.4"
+    "@dative-gpi/foundation-core-domain": "1.1.5",
+    "@dative-gpi/foundation-core-services": "1.1.5",
+    "@dative-gpi/foundation-shared-components": "1.1.5",
+    "@dative-gpi/foundation-shared-domain": "1.1.5",
+    "@dative-gpi/foundation-shared-services": "1.1.5"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -29,5 +29,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "a9b44d2e225cc899966d6ccfa1f0d14df9c50273"
+  "gitHead": "6b5102bcda554056f4d0fa0fba7e5a5e8f24e91e"
 }

package/utils/tables.ts

@@ -22,6 +22,8 @@ export const GROUPS_SELECT = "ui.tables.group.select";
 export const LOCATIONS_SELECT = "ui.tables.location.select";
 export const MODELS_SELECT = "ui.tables.model.select";
 export const DASHBOARDS_SELECT = "ui.tables.dashboard-mock.select";
+export const GROUPINGS_SELECT = "ui.tables.grouping.select";
+export const SUBGROUPINGS_SELECT = "ui.tables.subgrouping.select";
 
 export const WIDGET_DASHBOARDS_EXPLORER = "ui.tables.folder-mock.widget";