@dative-gpi/foundation-core-components 1.0.56 → 1.0.58-groupings

package/components/lists/deviceOrganisations/FSBaseDeviceOrganisationsList.vue

@@ -1,10 +1,13 @@
 <template>
   <FSDataTable
-    :items="deviceOrganisations"
-    :customSorts="customSorts"
-    :itemTo="$props.itemTo"
+    defaultMode="iterator"
     :loading="fetchingDeviceOrganisations"
+    :singleSelect="$props.singleSelect"
+    :headersOptions="headersOptions"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
+    :items="deviceOrganisations"
+    :itemTo="$props.itemTo"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -19,10 +22,10 @@
       />
     </template>
     <template
-      #header.connectable-title
+      #header.imageId-title
     >
       <FSIcon>
-        mdi-wifi
+        mdi-panorama-variant-outline
       </FSIcon>
     </template>
     <template
@@ -40,18 +43,9 @@
         height="32px"
         width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
-    <template
-      #item.connectable="{ item }"
-    >
-      <FSCol>
-        <FSConnectivity
-          v-if="item.connectivity.status != ConnectivityStatus.None"
-          :deviceConnectivity="item.connectivity"
-        />
-      </FSCol>
-    </template>
     <template
       #item.connectivity="{ item }"
     >
@@ -74,7 +68,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -82,16 +76,26 @@
       #item.worstAlert="{ item }"
     >
       <FSWorstAlert
+        v-if="item.worstAlert"
+        :deviceWorstAlert="item.worstAlert"
         :deviceAlerts="item.alerts"
-        :deviceAlert="item.worstAlert"
+        :alertTo="$props.alertTo"
+      />
+      <div
+        v-else
       />
     </template>
     <template
       #item.alerts="{ item }"
     >
       <FSWorstAlert
-        :deviceAlerts="item.alerts.length"
-        :deviceAlert="item.worstAlert"
+        v-if="item.worstAlert"
+        :deviceWorstAlert="item.worstAlert"
+        :deviceAlerts="item.alerts"
+        :alertTo="$props.alertTo"
+      />
+      <div
+        v-else
       />
     </template>
     <template
@@ -121,67 +125,81 @@
         :meta="item.meta"
       />
     </template>
-  
+    <template
+      v-for="(property, index) in customProperties"
+      #[`filter.meta.${property.code}`]="{ filter }"
+      :key="index"
+    >
+      <FSMetaValue
+        v-if="filter.text !== '—'"
+        variant="colorless"
+        :customProperty="property"
+        :meta="{ [property.code]: filter.text }"
+      />
+    </template>
     <template
       #item.tile="{ item, toggleSelect }"
     >
       <FSDeviceOrganisationTileUI
-        v-bind="item"
-        :modelValue="isSelected(item.id)"
-        :singleSelect="singleSelect"
-        :deviceStatuses="item.status.statuses"
+        :to="$props.itemTo && $props.itemTo(item)"
+        :selectable="$props.selectable"
         :deviceConnectivity="item.connectivity"
+        :deviceStatuses="item.status.statuses"
         :deviceWorstAlert="item.worstAlert"
+        :singleSelect="$props.singleSelect"
         :deviceAlerts="item.alerts"
-        :to="$props.itemTo && $props.itemTo(item)"
+        :alertTo="$props.alertTo"
+        :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
+        v-bind="item"
       />
     </template>
   </FSDataTable>
 </template>
   
 <script lang="ts">
-import type { PropType} from "vue";
-import type { RouteLocation } from "vue-router";
-import { computed, defineComponent, onMounted, watch } from "vue";
+import { computed, defineComponent, onMounted, type PropType, watch } from "vue";
+import { type RouteLocation } from "vue-router";
 import _ from "lodash";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
   
-import { alphanumericSort } from "@dative-gpi/foundation-shared-components/utils";
-import { ConnectivityStatus, PropertyEntity } from "@dative-gpi/foundation-shared-domain/enums";
+import { ConnectivityStatus, Criticity, PropertyEntity } from "@dative-gpi/foundation-shared-domain/enums";
+import { alphanumericSort, connectivityLabel } from "@dative-gpi/foundation-shared-components/utils";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
 
+import type { DeviceConnectivityDetails, DeviceOrganisationAlert, DeviceOrganisationFilters, DeviceOrganisationInfos, DeviceStatusDetails} from "@dative-gpi/foundation-core-domain/models";
 import { useCustomProperties, useDeviceOrganisations } from "@dative-gpi/foundation-core-services/composables";
-import type { DeviceConnectivityDetails, DeviceOrganisationFilters, DeviceOrganisationInfos} from "@dative-gpi/foundation-core-domain/models";
 
-import FSDataTable from "../FSDataTable.vue";
 import FSMetaValue from "../../customProperties/FSMetaValue.vue";
+import FSDataTable from "../FSDataTable.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 FSWorstAlert from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSWorstAlert.vue";
-import FSConnectivity from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSConnectivity.vue";
-import FSStatusesCarousel from "@dative-gpi/foundation-shared-components/components/deviceOrganisations/FSStatusesCarousel.vue";
 import FSDeviceOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDeviceOrganisationTileUI.vue";
+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 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";
 
-  
 export default defineComponent({
   name: "FSBaseDeviceOrganisationsList",
   components: {
-    FSConnectivity,
-    FSDataTable,    
     FSDeviceOrganisationTileUI,
+    FSStatusesCarousel,
+    FSConnectivity,
+    FSWorstAlert,
+    FSDataTable,
     FSIconCheck,
-    FSImage,
     FSMetaValue,
-    FSStatusesCarousel,
     FSTagGroup,
-    FSWorstAlert
+    FSImage
   },
   props: {
-    modelValue: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-      required: false
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     deviceOrganisationFilters: {
       type: Object as PropType<DeviceOrganisationFilters>,
@@ -197,20 +215,32 @@ export default defineComponent({
       type: Function as PropType<(item: DeviceOrganisationInfos) => Partial<RouteLocation>>,
       required: false
     },
+    alertTo: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     singleSelect: {
       type: Boolean,
       required: false,
       default: false
     },
-    tableCode: {
-      type: String,
-      required: true
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
     }
   },
   emits: ["update:modelValue"],
   setup(props) {
     const { fetching: fecthingCustomProperties, entities: customProperties, getMany: getManyCustomProperties } = useCustomProperties();
     const { entities, fetching: fetchingDeviceOrganisations, getMany: getManyDeviceOrganisations } = useDeviceOrganisations();
+    const { $tr } = useTranslationsProvider();
   
     const deviceOrganisations = computed((): DeviceOrganisationInfos[] => {
       if (props.connectedOnly) {
@@ -218,17 +248,105 @@ export default defineComponent({
       }
       return entities.value;
     });
-  
-    const customSorts = computed(() => {
-      return {
-        connectable: (a:DeviceConnectivityDetails, b:DeviceConnectivityDetails) => {
-          return alphanumericSort(a?.status, b?.status);
+
+    const headersOptions = computed(() => ({
+      status: {
+        fixedFilters: [{
+          value: true,
+          text: $tr("ui.device-organisation.has-statuses", "Has statuses")
+        }, {
+          value: false,
+          text: $tr("ui.device-organisation.has-no-statuses", "Has no statuses")
+        }],
+        methodFilter: (value: boolean, item: DeviceStatusDetails) => {
+          return value ? item.statuses.length > 0 : item.statuses.length === 0;
         },
-        connectivity: (a:DeviceConnectivityDetails, b:DeviceConnectivityDetails) => {
-          return alphanumericSort(a?.status, b?.status);
+        sort: (a: DeviceStatusDetails, b: DeviceStatusDetails) => a.statuses.length - b.statuses.length
+      },
+      connectivity: {
+        fixedFilters: [{
+          value: ConnectivityStatus.None,
+          text: "—"
+        }, {
+          value: ConnectivityStatus.Offline,
+          text: connectivityLabel(ConnectivityStatus.Offline)
+        }, {
+          value: ConnectivityStatus.AlmostOffline,
+          text: connectivityLabel(ConnectivityStatus.AlmostOffline)
+        }, {
+          value: ConnectivityStatus.PartiallyConnected,
+          text: connectivityLabel(ConnectivityStatus.PartiallyConnected)
+        }, {
+          value: ConnectivityStatus.Connected,
+          text: connectivityLabel(ConnectivityStatus.Connected)
+        }],
+        methodFilter: (value: ConnectivityStatus, item: DeviceConnectivityDetails) => {
+          switch(value) {
+            case ConnectivityStatus.None:
+              return !item.status;
+            default:
+              return item.status == value;
+          }
+        },
+        sort: (a: DeviceConnectivityDetails, b: DeviceConnectivityDetails) => alphanumericSort(a?.status, b?.status)
+      },
+      alerts: {
+        fixedFilters: [{
+          value: true,
+          text: $tr("ui.device-organisation.has-alerts", "Has alerts")
+        }, {
+          value: false,
+          text: $tr("ui.device-organisation.has-no-alerts", "Has no alerts")
+        }],
+        methodFilter: (value: boolean, item: DeviceOrganisationAlert[]) => {
+          return value ? item.length > 0 : item.length === 0;
+        },
+        sort: (a: DeviceOrganisationAlert[], b: DeviceOrganisationAlert[]) => a.length - b.length
+      },
+      worstAlert: {
+        fixedFilters: [{
+          value: Criticity.None,
+          text: "—"
+        }, {
+          value: Criticity.Information,
+          text: AlertTools.criticityLabel(Criticity.Information)
+        }, {
+          value: Criticity.Warning,
+          text: AlertTools.criticityLabel(Criticity.Warning)
+        }, {
+          value: Criticity.Error,
+          text: AlertTools.criticityLabel(Criticity.Error)
+        }],
+        methodFilter: (value: Criticity, item: DeviceOrganisationAlert | null) => {
+          switch(value) {
+            case Criticity.None:
+              return !item;
+            default:
+              return item != null && item.criticity === value;
+          }
+        },
+        sort: (a: DeviceOrganisationAlert, b: DeviceOrganisationAlert) => alphanumericSort(a?.criticity, b?.criticity)
+      },
+      ...customProperties.value.reduce((acc, cp) => ({
+        ...acc,
+        [`meta.${cp.code}`]: {
+          fixedFilters: cp.useOnlyAllowedValues ? [{
+            value: (null as string | null),
+            text: "—"
+          }].concat(Object.keys(cp.allowedValues).map(av => ({
+            value: av,
+            text: av
+          }))): undefined,
+          methodFilterRaw: (value: any, item: DeviceOrganisationInfos) => {
+            if (cp.useOnlyAllowedValues) {
+              return (!Object.keys(cp.allowedValues).includes(item.meta[cp.code])) && !value || item.meta[cp.code] == value
+            }
+            return item.meta[cp.code] == value
+          },
+          sort: (a: string, b: string) => alphanumericSort(a, b)
         }
-      }
-    });
+      }), {})
+    }));
   
     const isSelected = (id: string): boolean => {
       return props.modelValue.includes(id);
@@ -252,7 +370,7 @@ export default defineComponent({
       deviceOrganisations,
       ConnectivityStatus,
       customProperties,
-      customSorts,
+      headersOptions,
       isSelected
     };
   }

package/components/lists/folders/FSBaseFoldersList.vue

@@ -1,11 +1,12 @@
 <template>
   <FSDataTable
-    :items="items"
-    :item-to="$props.itemTo"
-    :loading="fetchingFolders || fetchingDashboardOrganisations || fetchingDashboardShallows"
+    defaultMode="iterator"
+    :items="folders"
+    :itemTo="$props.itemTo"
+    :loading="fetchingFolders"
     :tableCode="$props.tableCode"
-    :modelValue="selecteds"
-    @update:modelValue="onSelect"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
     <template
@@ -18,21 +19,6 @@
       />
     </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.icon="{ item }"
     >
@@ -40,192 +26,97 @@
         {{ item.icon }}
       </FSIcon>
     </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :showRemove="false"
+        :tags="item.tags"
+      />
+    </template>
 
     <template
       #item.tile="{ item, toggleSelect }"
     >
       <FSFolderTileUI
-        v-if="item.type == FoldersListType.Folder"
-        :bottomColor="item.colors"
-        v-bind="item"
-        :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"
         :bottomColor="item.colors"
-        :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"
-        :bottomColor="item.colors"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
         :to="$props.itemTo && $props.itemTo(item)"
-        v-bind="item"
       />
     </template>
   </FSDataTable>
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import type { RouteLocation } from "vue-router";
-import { computed, defineComponent, onMounted, ref, watch } from "vue";
 import _ from "lodash";
+import type { RouteLocation } from "vue-router";
+import { defineComponent, type PropType, 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 { useFolders } 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 type { FolderFilters, DashboardOrganisationFilters, DashboardShallowFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
+import { FoldersListType } from "@dative-gpi/foundation-core-components/utils";
+import type { FolderFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
 
-import FSDataTable from "../FSDataTable.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
 import FSFolderTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSFolderTileUI.vue";
-import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
-import FSDashboardShallowTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardShallowTileUI.vue";
 
+import FSDataTable from "../FSDataTable.vue";
 
 export default defineComponent({
   name: "FSBaseFoldersList",
   components: {
-    FSDataTable,
-    FSIcon,
     FSFolderTileUI,
-    FSDashboardOrganisationTileUI,
-    FSDashboardShallowTileUI
+    FSDataTable,
+    FSTagGroup,
+    FSIcon
   },
   props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     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,
+    itemTo: {
+      type: Function as PropType<(item: DashboardInfos) => Partial<RouteLocation>>,
       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
     }
   },
-  emits: ["update:modelValue", "update:type", "update:dashboard-type"],
+  emits: ["update:modelValue"],
   setup(props, { emit }) {
-
-    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 onSelect = (values: string[]) => {
-      selecteds.value = values;
-      const selectedItems = items.value.filter(i => selecteds.value!.includes(i.id));
-      emit("update:dashboard-type", selectedItems.map(i => i.dashboardType));
-      emit("update:modelValue", selectedItems.map(i => i.id));
-      emit("update:type", selectedItems.map(i => i.type));
+      emit("update:modelValue", values);
     };
 
     const isSelected = (id: string) => {
-      return selecteds.value?.includes(id);
+      return props.modelValue?.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,
-      selecteds,
-      items,
+      folders,
       onSelect,
       isSelected,
       FoldersListType,