@dative-gpi/foundation-core-components 1.0.69 → 1.0.71-groupings-2

package/components/lists/deviceOrganisations/FSBaseDeviceOrganisationsList.vue

@@ -1,9 +1,10 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :loading="fetchingDeviceOrganisations"
     :singleSelect="$props.singleSelect"
     :headersOptions="headersOptions"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :items="deviceOrganisations"
     :itemTo="$props.itemTo"
@@ -27,13 +28,6 @@
         mdi-panorama-variant-outline
       </FSIcon>
     </template>
-    <template
-      #header.connectable-title
-    >
-      <FSIcon>
-        mdi-wifi
-      </FSIcon>
-    </template>
     <template
       #header.connectivity-title
     >
@@ -49,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 }"
     >
@@ -83,7 +68,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -153,10 +138,12 @@
       />
     </template>
     <template
-      #item.tile="{ item, toggleSelect }"
+      #item.tile="{ index, item, toggleSelect }"
     >
       <FSDeviceOrganisationTileUI
+        :key="index"
         :to="$props.itemTo && $props.itemTo(item)"
+        :selectable="$props.selectable"
         :deviceConnectivity="item.connectivity"
         :deviceStatuses="item.status.statuses"
         :deviceWorstAlert="item.worstAlert"
@@ -175,11 +162,14 @@
 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 { ConnectivityStatus, Criticity, PropertyEntity } from "@dative-gpi/foundation-shared-domain/enums";
 import { alphanumericSort, connectivityLabel } from "@dative-gpi/foundation-shared-components/utils";
-import { ConnectivityStatus, PropertyEntity } from "@dative-gpi/foundation-shared-domain/enums";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
 
-import type { DeviceConnectivityDetails, DeviceOrganisationAlert, DeviceOrganisationFilters, DeviceOrganisationInfos} from "@dative-gpi/foundation-core-domain/models";
+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 FSMetaValue from "../../customProperties/FSMetaValue.vue";
@@ -208,8 +198,9 @@ export default defineComponent({
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     deviceOrganisationFilters: {
       type: Object as PropType<DeviceOrganisationFilters>,
@@ -230,7 +221,7 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true
@@ -250,6 +241,7 @@ export default defineComponent({
   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) {
@@ -259,25 +251,18 @@ export default defineComponent({
     });
 
     const headersOptions = computed(() => ({
-      connectable: {
+      status: {
         fixedFilters: [{
-          value: ConnectivityStatus.None,
-          text: "—"
-        }, {
-          value: ConnectivityStatus.Offline,
-          text: connectivityLabel(ConnectivityStatus.Offline)
-        }, {
-          value: ConnectivityStatus.AlmostOffline,
-          text: connectivityLabel(ConnectivityStatus.AlmostOffline)
+          value: true,
+          text: $tr("ui.device-organisation.has-statuses", "Has statuses")
         }, {
-          value: ConnectivityStatus.PartiallyConnected,
-          text: connectivityLabel(ConnectivityStatus.PartiallyConnected)
-        }, {
-          value: ConnectivityStatus.Connected,
-          text: connectivityLabel(ConnectivityStatus.Connected)
+          value: false,
+          text: $tr("ui.device-organisation.has-no-statuses", "Has no statuses")
         }],
-        methodFilter: (value: ConnectivityStatus, item: DeviceConnectivityDetails) => !item.status && !value || item.status == value,
-        sort: (a: DeviceConnectivityDetails, b: DeviceConnectivityDetails) => alphanumericSort(a?.status, b?.status)
+        methodFilter: (value: boolean, item: DeviceStatusDetails) => {
+          return value ? item.statuses.length > 0 : item.statuses.length === 0;
+        },
+        sort: (a: DeviceStatusDetails, b: DeviceStatusDetails) => a.statuses.length - b.statuses.length
       },
       connectivity: {
         fixedFilters: [{
@@ -296,10 +281,51 @@ export default defineComponent({
           value: ConnectivityStatus.Connected,
           text: connectivityLabel(ConnectivityStatus.Connected)
         }],
-        methodFilter: (value: ConnectivityStatus, item: DeviceConnectivityDetails) => !item.status && !value || item.status == value,
+        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) => ({
@@ -314,9 +340,9 @@ export default defineComponent({
           }))): 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 (!Object.keys(cp.allowedValues).includes(item.meta[cp.code])) && !value || item.meta[cp.code] == value
             }
-            return !item.meta[cp.code] && !value || item.meta[cp.code] === value;
+            return item.meta[cp.code] == value
           },
           sort: (a: string, b: string) => alphanumericSort(a, b)
         }

package/components/lists/folders/FSBaseFoldersList.vue

@@ -1,7 +1,8 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :items="folders"
-    :item-to="$props.itemTo"
+    :itemTo="$props.itemTo"
     :loading="fetchingFolders"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
@@ -25,11 +26,21 @@
         {{ item.icon }}
       </FSIcon>
     </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :showRemove="false"
+        :tags="item.tags"
+      />
+    </template>
 
     <template
-      #item.tile="{ item, toggleSelect }"
+      #item.tile="{ index, item, toggleSelect }"
     >
       <FSFolderTileUI
+        :key="index"
         :bottomColor="item.colors"
         v-bind="item"
         :modelValue="isSelected(item.id)"
@@ -42,9 +53,8 @@
 
 <script lang="ts">
 import _ from "lodash";
-import type { PropType} from "vue";
 import type { RouteLocation } from "vue-router";
-import { defineComponent, watch } from "vue";
+import { defineComponent, type PropType, watch } from "vue";
 
 import { useFolders } from "@dative-gpi/foundation-core-services/composables";
 
@@ -53,6 +63,7 @@ import { FoldersListType } from "@dative-gpi/foundation-core-components/utils";
 import type { FolderFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
 
 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 FSDataTable from "../FSDataTable.vue";
@@ -60,33 +71,34 @@ import FSDataTable from "../FSDataTable.vue";
 export default defineComponent({
   name: "FSBaseFoldersList",
   components: {
+    FSFolderTileUI,
     FSDataTable,
-    FSIcon,
-    FSFolderTileUI
+    FSTagGroup,
+    FSIcon
   },
   props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     foldersFilters: {
       type: Object as PropType<FolderFilters>,
       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
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
     }
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-
     const { entities: folders, fetching: fetchingFolders, getMany: getManyFolders } = useFolders();
 
     const onSelect = (values: string[]) => {

package/components/lists/groupings/FSBaseGroupingsList.vue

@@ -0,0 +1,125 @@
+<template>
+  <FSDataTable
+    defaultMode="iterator"
+    :loading="fetchingGroupings"
+    :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"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #item.icon="{ item }"
+    >
+      <FSIcon>
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+    <template
+      #item.tile="{ item, toggleSelect }"
+    >
+      <FSGroupingTileUI
+        :selectable="$props.selectable"
+        :modelValue="isSelected(item.id)"
+        :singleSelect="$props.singleSelect"
+        :to="$props.itemTo && $props.itemTo(item)"
+        @update:modelValue="toggleSelect(item)"
+        v-bind="item"
+      />
+    </template>
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, watch } from "vue";
+import { type RouteLocation } from "vue-router";
+import type { PropType} from "vue";
+import _ from "lodash";
+
+import type { GroupingFilters, GroupingInfos } from "@dative-gpi/foundation-core-domain/models";
+import { useGroupings } from "@dative-gpi/foundation-core-services/composables";
+
+import FSDataTable from "../FSDataTable.vue";
+
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSGroupingTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSGroupingTileUI.vue";
+
+
+export default defineComponent({
+  name: "FSBaseGroupingsList",
+  components: {
+    FSDataTable,
+    FSIcon,
+    FSGroupingTileUI
+  },
+  props: {
+    itemTo: {
+      type: Function as PropType<(item: GroupingInfos) => Partial<RouteLocation>>,
+      required: false
+    },
+    groupingsFilters: {
+      type: Object as PropType<GroupingFilters>,
+      required: false,
+      default: null
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    showSearch: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disableTable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getMany: fetchGroupings, fetching: fetchingGroupings, entities: groupings } = useGroupings();
+
+    const isSelected = (id: string) => {
+      return props.modelValue.includes(id);
+    };
+
+    watch(() => props.groupingsFilters, (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetchGroupings(props.groupingsFilters);
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingGroupings,
+      groupings,
+      isSelected
+    };
+  }
+});
+</script>

package/components/lists/groups/FSBaseGroupsList.vue

@@ -1,8 +1,9 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :loading="fetchingGroups"
     :items="groups"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -29,9 +30,10 @@
     >
       <FSImage
         v-if="item.imageId"
-        height="38px"
-        width="38px"
+        height="32px"
+        width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -46,15 +48,16 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
     <template
-      #item.tile="{ item, toggleSelect }"
+      #item.tile="{ index, item, toggleSelect }"
     >
       <FSGroupTileUI
-        :editable="$props.editable"
+        :key="index"
+        :selectable="$props.selectable"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
         v-bind="item"
@@ -90,15 +93,16 @@ export default defineComponent({
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     groupsFilters: {
       type: Object as PropType<GroupFilters>,
       required: false,
       default: null
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/lists/locations/FSBaseLocationsList.vue

@@ -1,8 +1,9 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :loading="fetchingLocations"
     :items="locations"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -26,16 +27,18 @@
     </template>
 
     <template
-      #item.tile="{ item, toggleSelect }"
+      #item.tile="{ index, item, toggleSelect }"
     >
       <FSLocationTileUI
-        v-bind="item"
+        :key="index"
         :bottomColor="item.colors"
-        :editable="true"
+        :address="item.address.placeLabel"
+        :selectable="$props.selectable"
         :singleSelect="singleSelect"
         :modelValue="isSelected(item.id)"
         :to="$props.itemTo && $props.itemTo(item)"
         @update:modelValue="toggleSelect(item)"
+        v-bind="item"
       />
     </template>
   </FSDataTable>
@@ -62,21 +65,21 @@ export default defineComponent({
     FSIcon
   },
   props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     locationsFilters: {
       type: Object as PropType<LocationFilters>,
       required: false,
       default: null
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true
     },
-    modelValue: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-      required: false
-    },
     itemTo: {
       type: Function as PropType<(item: LocationInfos) => Partial<RouteLocation>>,
       required: false
@@ -86,9 +89,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    tableCode: {
-      type: String,
-      required: true
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
     }
   },
   emits: ["update:modelValue"],

package/components/lists/models/FSBaseModelsList.vue

@@ -1,7 +1,8 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :singleSelect="$props.singleSelect"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :loading="fetchingModels"
     :items="models"
@@ -40,6 +41,7 @@
         height="32px"
         width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -57,10 +59,12 @@
       />
     </template>
     <template
-      #item.tile="{ item, toggleSelect }"
+      #item.tile="{ index, item, toggleSelect }"
     >
       <FSModelTileUI
+        :key="index"
         :to="$props.itemTo && $props.itemTo(item)"
+        :selectable="$props.selectable"
         :singleSelect="$props.singleSelect"
         :imageId="item.imageId"
         :label="item.label"
@@ -99,8 +103,9 @@ export default defineComponent({
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     modelsFilters: {
       type: Object as PropType<ModelFilters>,
@@ -111,7 +116,7 @@ export default defineComponent({
       type: Function as PropType<(item: ModelInfos) => Partial<RouteLocation>>,
       required: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/lists/playlists/FSSimplePlaylistsList.vue

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