@dative-gpi/foundation-core-components 1.0.62 → 1.0.64

package/components/entities/FSDialogSelectEntities.vue

@@ -9,84 +9,29 @@
     <template
       #body
     >
-      <FSCol
-        gap="24px"  
-      >
-        <FSCol>
-          <FSText
-            font="text-button"
-          >
-            {{ $tr("ui.common.selection-reminder", "Selection reminder") }}
-          </FSText>
-          <FSRow
-            align="center-left"
-            height="50px"
-          >
-            <FSSlideGroup
-              v-if="actualSelecteds.length > 0"
-            >
-              <FSSimpleEntitiesList
-                :entity-type="$props.entityType"
-                :filters="simpleListFilters"
-                :showEdit="false"
-                :showRemove="false"
-                direction="row"
-              />
-            </FSSlideGroup>
-            <FSText
-              v-else
-            >
-              {{ $tr("ui.common.no-selection", "No selection") }}
-            </FSText>
-          </FSRow>
-        </FSCol>
-
-        <FSCol>
-          <FSText
-            font="text-button"
-          >
-            {{ $tr("ui.common.entities-list", "Entities list") }}
-          </FSText>
-          <FSBaseEntitiesList
-            :entity-type="$props.entityType"
-            :tableCode="tableCode"
-            v-model="actualSelecteds"
-            v-bind="baseTableAttrs"
-          />
-        </FSCol>
-      </FSCol>
+      <FSSelectEntitiesList
+        :entityType="$props.entityType"
+        :modelValue="actualSelecteds"
+        :filters="$props.filters"
+        @update:modelValue="actualSelecteds = $event"
+      />
     </template>
   </FSDialogSubmit>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, computed, ref, watch } from "vue";
-
-import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
-import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DeviceOrganisationFilters, FolderFilters, GroupFilters, LocationFilters, ModelFilters, UserOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
+import { defineComponent, type PropType, ref, watch } from "vue";
 
-import { TABLES as T } from "../../utils";
+import type { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
 
-import FSSlideGroup from "@dative-gpi/foundation-shared-components/components/FSSlideGroup.vue";
 import FSDialogSubmit from "@dative-gpi/foundation-shared-components/components/FSDialogSubmit.vue";
-import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
-import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
-import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
-
-
-import FSSimpleEntitiesList from "./FSSimpleEntitiesList.vue";
-import FSBaseEntitiesList from "./FSBaseEntitiesList.vue";
+import FSSelectEntitiesList from "./FSSelectEntitiesList.vue";
 
 export default defineComponent({
   name: "FSDialogSelectEntities",
   components: {
-    FSSimpleEntitiesList,
-    FSBaseEntitiesList,
-    FSSlideGroup,
+    FSSelectEntitiesList,
     FSDialogSubmit,
-    FSCol,
-    FSRow,
-    FSText
   },
   emits: ["update:modelValue", "update:selecteds"],
   props: {
@@ -110,98 +55,9 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props, { attrs, emit }){
+  setup(props, { emit }){
     const actualSelecteds = ref<string[]>([]);
 
-    const simpleListFilters = computed(() => {
-      switch(props.entityType) {
-        case EntityType.Device:
-          return { 
-            deviceOrganisationsIds: actualSelecteds.value
-          } satisfies DeviceOrganisationFilters;
-        case EntityType.Dashboard:
-          return {
-            dashboardOrganisationsIds: actualSelecteds.value,
-            dashboardOrganisationTypesIds: actualSelecteds.value
-          } satisfies DashboardOrganisationFilters & DashboardOrganisationTypeFilters;
-        case EntityType.Group:
-          return {
-            groupsIds: actualSelecteds.value
-          } satisfies GroupFilters;
-        case EntityType.Folder:
-          return {
-            foldersIds: actualSelecteds.value
-          } satisfies FolderFilters;
-        case EntityType.Location:
-          return {
-            locationsIds: actualSelecteds.value
-          } satisfies LocationFilters;
-        case EntityType.User:
-          return {
-            userOrganisationsIds: actualSelecteds.value
-          } satisfies UserOrganisationFilters;
-        case EntityType.Model:
-          return {
-            modelsIds: actualSelecteds.value
-          } satisfies ModelFilters;
-        default:
-          return undefined;
-      };
-    })
-
-    const tableCode = computed(() => {
-      switch(props.entityType) {
-        case EntityType.Device:
-          return T.DEVICES_SELECT;
-        default:
-          return null;
-      };
-    })
-
-    const baseTableAttrs = computed(() => {
-      switch(props.entityType) {
-        case EntityType.Device:
-          return { 
-            deviceOrganisationFilters: props.filters,
-            ...attrs
-          };
-        case EntityType.Dashboard:
-          return {
-            dashboardShallowsFilters: props.filters,
-            dashboardOrganisationsFilters: props.filters,
-            dashboardOrganisationTypeFetchFilter: props.filters,
-            ...attrs
-          };
-        case EntityType.Group:
-          return {
-            groupsFilters: props.filters,
-            ...attrs
-          };
-        case EntityType.Folder:
-          return {
-            foldersFilters: props.filters,
-            ...attrs
-          };
-        case EntityType.Location:
-          return {
-            locationsFilters: props.filters,
-            ...attrs
-          };
-        case EntityType.User:
-          return {
-            userOrganisationsFilters: props.filters,
-            ...attrs
-          };
-        case EntityType.Model:
-          return {
-            modelsFilters: props.filters,
-            ...attrs
-          };
-        default:
-          return null;
-      };
-    });
-
     const onSubmit = () => {
       emit("update:selecteds", actualSelecteds.value);
       emit("update:modelValue", false);
@@ -213,10 +69,7 @@ export default defineComponent({
 
     return {
       onSubmit,
-      actualSelecteds,
-      simpleListFilters,
-      baseTableAttrs,
-      tableCode
+      actualSelecteds
     }
   }
 });

package/components/entities/FSSelectEntitiesList.vue

@@ -0,0 +1,192 @@
+<template>
+  <FSCol
+    gap="24px"  
+  >
+    <FSCol>
+      <FSText
+        font="text-button"
+      >
+        {{ $tr("ui.common.selection-reminder", "Selection reminder") }}
+      </FSText>
+      <FSRow
+        align="center-left"
+        height="50px"
+      >
+        <FSSlideGroup
+          v-if="$props.modelValue && $props.modelValue.length > 0"
+        >
+          <FSSimpleEntitiesList
+            :entity-type="$props.entityType"
+            :filters="simpleListFilters"
+            :showEdit="false"
+            :showRemove="false"
+            direction="row"
+          />
+        </FSSlideGroup>
+        <FSText
+          v-else
+        >
+          {{ $tr("ui.common.no-selection", "No selection") }}
+        </FSText>
+      </FSRow>
+    </FSCol>
+
+    <FSCol>
+      <FSText
+        font="text-button"
+      >
+        {{ $tr("ui.common.entities-list", "Entities list") }}
+      </FSText>
+      <FSBaseEntitiesList
+        :entity-type="$props.entityType"
+        :tableCode="tableCode"
+        :modelValue="$props.modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
+        v-bind="baseTableAttrs"
+      />
+    </FSCol>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, computed } from "vue";
+
+import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
+import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DeviceOrganisationFilters, FolderFilters, GroupFilters, LocationFilters, ModelFilters, UserOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
+
+import { TABLES as T } from "../../utils";
+
+import FSSlideGroup from "@dative-gpi/foundation-shared-components/components/FSSlideGroup.vue";
+import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
+
+
+import FSSimpleEntitiesList from "./FSSimpleEntitiesList.vue";
+import FSBaseEntitiesList from "./FSBaseEntitiesList.vue";
+
+export default defineComponent({
+  name: "FSSelectEntitiesList",
+  components: {
+    FSSimpleEntitiesList,
+    FSBaseEntitiesList,
+    FSSlideGroup,
+    FSCol,
+    FSRow,
+    FSText
+  },
+  emits: ["update:modelValue"],
+  props: {
+    entityType: {
+      type: Number as PropType<EntityType>,
+      required: true
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    filters: {
+      type: Object,
+      required: false,
+      default: null
+    }
+  },
+  setup(props, { attrs }){
+    const simpleListFilters = computed(() => {
+      switch(props.entityType) {
+        case EntityType.Device:
+          return { 
+            deviceOrganisationsIds: props.modelValue
+          } satisfies DeviceOrganisationFilters;
+        case EntityType.Dashboard:
+          return {
+            dashboardOrganisationsIds: props.modelValue,
+            dashboardOrganisationTypesIds: props.modelValue
+          } satisfies DashboardOrganisationFilters & DashboardOrganisationTypeFilters;
+        case EntityType.Group:
+          return {
+            groupsIds: props.modelValue
+          } satisfies GroupFilters;
+        case EntityType.Folder:
+          return {
+            foldersIds: props.modelValue
+          } satisfies FolderFilters;
+        case EntityType.Location:
+          return {
+            locationsIds: props.modelValue
+          } satisfies LocationFilters;
+        case EntityType.User:
+          return {
+            userOrganisationsIds: props.modelValue
+          } satisfies UserOrganisationFilters;
+        case EntityType.Model:
+          return {
+            modelsIds: props.modelValue
+          } satisfies ModelFilters;
+        default:
+          return undefined;
+      };
+    })
+
+    const tableCode = computed(() => {
+      switch(props.entityType) {
+        case EntityType.Device:
+          return T.DEVICES_SELECT;
+        default:
+          return null;
+      };
+    })
+
+    const baseTableAttrs = computed(() => {
+      switch(props.entityType) {
+        case EntityType.Device:
+          return { 
+            deviceOrganisationFilters: props.filters,
+            ...attrs
+          };
+        case EntityType.Dashboard:
+          return {
+            dashboardShallowsFilters: props.filters,
+            dashboardOrganisationsFilters: props.filters,
+            dashboardOrganisationTypeFetchFilter: props.filters,
+            ...attrs
+          };
+        case EntityType.Group:
+          return {
+            groupsFilters: props.filters,
+            ...attrs
+          };
+        case EntityType.Folder:
+          return {
+            foldersFilters: props.filters,
+            ...attrs
+          };
+        case EntityType.Location:
+          return {
+            locationsFilters: props.filters,
+            ...attrs
+          };
+        case EntityType.User:
+          return {
+            userOrganisationsFilters: props.filters,
+            ...attrs
+          };
+        case EntityType.Model:
+          return {
+            modelsFilters: props.filters,
+            ...attrs
+          };
+        default:
+          return null;
+      };
+    });
+
+    return {
+      simpleListFilters,
+      baseTableAttrs,
+      tableCode
+    }
+  }
+});
+</script>

package/components/lists/FSDataTable.vue

@@ -29,6 +29,7 @@ import { computed, defineComponent, onUnmounted, type PropType, watch } from "vu
 
 import { useUserOrganisationTable, useUpdateUserOrganisationTable, useDataTables } from "@dative-gpi/foundation-core-services/composables";
 import { useDebounce, useTables } from "@dative-gpi/foundation-shared-components/composables";
+import { type FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
 import FSLoadDataTable from "@dative-gpi/foundation-shared-components/components/lists/FSLoadDataTable.vue";
 import FSDataTableUI from "@dative-gpi/foundation-shared-components/components/lists/FSDataTableUI.vue";
@@ -49,13 +50,8 @@ export default defineComponent({
       required: false,
       default: 1000
     },
-    customSorts: {
-      type: Object as PropType<{ [key: string]: any }>,
-      required: false,
-      default: () => ({})
-    },
-    customSortRaws: {
-      type: Object as PropType<{ [key: string]: any }>,
+    headersOptions: {
+      type: Object as PropType<{ [key: string]: Partial<FSDataTableColumn> }>,
       required: false,
       default: () => ({})
     }
@@ -67,9 +63,7 @@ export default defineComponent({
     const { getTable, setTable } = useTables();
     const { debounce, cancel } = useDebounce();
 
-    const computedTable = computed(() => computeTable(props.customSorts, props.customSortRaws));
-
-    console.log(JSON.stringify(computedTable.value));
+    const computedTable = computed(() => computeTable(props.headersOptions));
 
     onUnmounted(() => {
       cancel();
@@ -90,7 +84,6 @@ export default defineComponent({
         getTable,
         props.tableCode
       );
-      console.log(JSON.stringify(computedTable.value));
     }, { immediate: true });
 
     watch(() => table.value, () => {

package/components/lists/deviceOrganisations/FSBaseDeviceOrganisationsList.vue

@@ -1,10 +1,10 @@
 <template>
   <FSDataTable
-    :items="deviceOrganisations"
-    :customSorts="customSorts"
-    :itemTo="$props.itemTo"
     :loading="fetchingDeviceOrganisations"
+    :headersOptions="headersOptions"
     :tableCode="$props.tableCode"
+    :items="deviceOrganisations"
+    :itemTo="$props.itemTo"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -87,6 +87,9 @@
         :deviceAlerts="item.alerts"
         :alertTo="$props.alertTo"
       />
+      <div
+        v-else
+      />
     </template>
     <template
       #item.alerts="{ item }"
@@ -97,6 +100,9 @@
         :deviceAlerts="item.alerts"
         :alertTo="$props.alertTo"
       />
+      <div
+        v-else
+      />
     </template>
     <template
       #item.status="{ item }"
@@ -146,16 +152,15 @@
 </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 { alphanumericSort } from "@dative-gpi/foundation-shared-components/utils";
+import { alphanumericSort, connectivityLabel } from "@dative-gpi/foundation-shared-components/utils";
 import { ConnectivityStatus, PropertyEntity } from "@dative-gpi/foundation-shared-domain/enums";
 
 import { useCustomProperties, useDeviceOrganisations } from "@dative-gpi/foundation-core-services/composables";
-import type { DeviceConnectivityDetails, DeviceOrganisationFilters, DeviceOrganisationInfos} from "@dative-gpi/foundation-core-domain/models";
+import type { DeviceConnectivityDetails, DeviceOrganisationAlert, DeviceOrganisationFilters, DeviceOrganisationInfos} from "@dative-gpi/foundation-core-domain/models";
 
 import FSDataTable from "../FSDataTable.vue";
 import FSMetaValue from "../../customProperties/FSMetaValue.vue";
@@ -228,17 +233,61 @@ export default defineComponent({
       }
       return entities.value;
     });
-  
-    const customSorts = computed(() => {
-      return {
-        connectable: (a:DeviceConnectivityDetails, b:DeviceConnectivityDetails) => {
-          return alphanumericSort(a?.status, b?.status);
-        },
-        connectivity: (a:DeviceConnectivityDetails, b:DeviceConnectivityDetails) => {
-          return alphanumericSort(a?.status, b?.status);
-        }
-      }
-    });
+
+    const headersOptions = computed(() => ({
+      connectable: {
+        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) => !item.status && !value || item.status == value,
+        sort: (a: DeviceConnectivityDetails, b: DeviceConnectivityDetails) => alphanumericSort(a?.status, b?.status)
+      },
+      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) => !item.status && !value || item.status == value,
+        sort: (a: DeviceConnectivityDetails, b: DeviceConnectivityDetails) => alphanumericSort(a?.status, b?.status)
+      },
+      worstAlert: {
+        sort: (a: DeviceOrganisationAlert, b: DeviceOrganisationAlert) => alphanumericSort(a?.criticity, b?.criticity)
+      },
+      // ...customProperties.value.reduce((acc, cp) => ({
+      //   ...acc,
+      //   [`meta.${cp.code}`]: {
+      //     innerValue: (item: DeviceOrganisationInfos) => {
+      //       return item
+      //     },
+      //     sort: (a: string, b: string) => alphanumericSort(a, b)
+      //   }
+      // }), {})
+    }));
   
     const isSelected = (id: string): boolean => {
       return props.modelValue.includes(id);
@@ -262,7 +311,7 @@ export default defineComponent({
       deviceOrganisations,
       ConnectivityStatus,
       customProperties,
-      customSorts,
+      headersOptions,
       isSelected
     };
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-core-components",
   "sideEffects": false,
-  "version": "1.0.62",
+  "version": "1.0.64",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,11 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-core-domain": "1.0.62",
-    "@dative-gpi/foundation-core-services": "1.0.62",
-    "@dative-gpi/foundation-shared-components": "1.0.62",
-    "@dative-gpi/foundation-shared-domain": "1.0.62",
-    "@dative-gpi/foundation-shared-services": "1.0.62"
+    "@dative-gpi/foundation-core-domain": "1.0.64",
+    "@dative-gpi/foundation-core-services": "1.0.64",
+    "@dative-gpi/foundation-shared-components": "1.0.64",
+    "@dative-gpi/foundation-shared-domain": "1.0.64",
+    "@dative-gpi/foundation-shared-services": "1.0.64"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -26,5 +26,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "aebca5afe970e1d7117b5515abba742a6c96fa3a"
+  "gitHead": "2774a6e01e85f2b27b543f3fdd91a9370b95fbee"
 }