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

package/components/lists/connectivityScenarios/FSBaseConnectivityScenariosList.vue

@@ -0,0 +1,128 @@
+<template>
+  <FSDataTable
+    :loading="fetchingConnectivityScenarios"
+    :modelValue="$props.modelValue"
+    :items="connectivityScenarios"
+    :tableCode="$props.tableCode"
+    @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.time="{ item }"
+    >
+      {{ getTimeBestString(item.time) }}
+    </template>
+
+    <template
+      #item.deviceOrganisationImageId="{ item }"
+    >
+      <FSImage
+        v-if="item.deviceOrganisationImageId"
+        height="32px"
+        width="32px"
+        :imageId="item.deviceOrganisationImageId"
+        :thumbnail="true"
+      />
+    </template>
+    <template
+      #item.deviceOrganisationConnectivity="{ item }"
+    >
+      <FSIcon
+        v-if="item.deviceOrganisationConnectivity"
+        :icon="item.deviceOrganisationConnectivity.icon"
+        :color="item.deviceOrganisationConnectivity.color"
+      />
+    </template>
+    <template
+      #item.warnDeviceManager="{ item }"
+    >
+      <FSIconCheck
+        :value="item.warnDeviceManager"
+      />
+    </template>
+    <template
+      #item.warnOnReconnection="{ item }"
+    >
+      <FSIconCheck
+        :value="item.warnOnReconnection"
+      />
+    </template> 
+  </FSDataTable>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, watch } from "vue";
+import _ from "lodash";
+
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/enums";
+import {ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { getTimeBestString } from "@dative-gpi/foundation-shared-components/utils"
+
+import type { ConnectivityScenarioFilters } from "@dative-gpi/foundation-core-domain/models";
+import { useConnectivityScenarios } from "@dative-gpi/foundation-core-services/composables";
+
+import FSDataTable from "../FSDataTable.vue";
+import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
+import FSIconCheck from "@dative-gpi/foundation-shared-components/components/FSIconCheck.vue";
+
+export default defineComponent({
+  name: "FSBaseConnectivityScenariosList",
+  components: {
+    FSDataTable,
+    FSIconCheck,
+    FSImage,
+    FSIcon
+  },
+  props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    },
+    connectivityScenarioFilters: {
+      type: Object as PropType<ConnectivityScenarioFilters>,
+      required: false,
+      default: null
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { entities: connectivityScenarios, fetching: fetchingConnectivityScenarios, getMany: getManyConnectivityScenarios } = useConnectivityScenarios();
+    
+    const fetch = () =>{
+      getManyConnectivityScenarios(props.connectivityScenarioFilters);
+    }
+ 
+    watch(() => [props.connectivityScenarioFilters], (next, previous) => {
+      if ((!next && !previous) || !_.isEqual(next, previous)) {
+        fetch();
+      }
+    }, { immediate: true });
+    
+
+    return {
+      fetchingConnectivityScenarios,
+      connectivityScenarios,
+      ConnectivityStatus,
+      ColorEnum,
+      getTimeBestString
+    };
+  }
+});
+</script>

package/components/lists/dashboardOrganisationTypes/FSBaseDashboardOrganisationTypesList.vue

@@ -1,9 +1,13 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
+    :loading="fetchingDashboardOrganisationTypes"
     :items="dashboardOrganisationTypes"
     :itemTo="$props.itemTo"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
+    :selectable="$props.selectable"
+    :singleSelect="$props.singleSelect"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
@@ -52,11 +56,22 @@
         :label="$tr('ui.common.all', 'All')"
       />
     </template>
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :showRemove="false"
+        :tags="item.tags"
+      />
+    </template>
     <template
       #item.tile="{ item, toggleSelect }"
     >
       <FSDashboardOrganisationTypeTileUI
         :bottomColor="item.colors"
+        :selectable="$props.selectable"
+        :singleSelect="$props.singleSelect"
         :to="$props.itemTo && $props.itemTo(item)"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
@@ -67,26 +82,28 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
+import { computed, defineComponent, onMounted, type PropType, watch } from "vue";
 import type { RouteLocation } from "vue-router";
-import { computed, defineComponent, onMounted, watch } from "vue";
 import _ from "lodash";
 
 import { useAppOrganisationId, useCurrentUserOrganisation, useDashboardOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
 import type { DashboardOrganisationTypeFilters, DashboardOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useOrganisation } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSDataTable from "../FSDataTable.vue";
+import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
 import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
 import FSDashboardOrganisationTypeTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTypeTileUI.vue";
 
+import FSDataTable from "../FSDataTable.vue";
+
 export default defineComponent({
   name: "FSBaseDashboardOrganisationTypesList",
   components: {
     FSDataTable,
+    FSTagGroup,
     FSIcon,
     FSRow,
     FSText,
@@ -94,6 +111,11 @@ export default defineComponent({
     FSDashboardOrganisationTypeTileUI
   },
   props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     dashboardOrganisationTypeFilters: {
       type: Object as PropType<DashboardOrganisationTypeFilters>,
       default: undefined,
@@ -108,13 +130,22 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    tableCode: {
-      type: String,
-      required: true
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
     },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
   },
+  emits: [
+    "update:modelValue"
+  ],
   setup(props) {
-    const { getMany: getDashboardOrganisationTypes, entities: dashboardOrganisationTypes } = useDashboardOrganisationTypes();
+    const { getMany: getDashboardOrganisationTypes, fetching: fetchingDashboardOrganisationTypes, entities: dashboardOrganisationTypes } = useDashboardOrganisationTypes();
     const { fetch: fetchUserOrganisation, entity: userOrganisation } = useCurrentUserOrganisation();
     const { get: fetchOrganisation, entity: organisation } = useOrganisation();
     const { organisationId } = useAppOrganisationId();
@@ -154,6 +185,7 @@ export default defineComponent({
     }, { immediate: true });
 
     return {
+      fetchingDashboardOrganisationTypes,
       userOrganisationMainDashboardId,
       organisationMainDashboardId,
       dashboardOrganisationTypes,

package/components/lists/dashboards/FSBaseDashboardsList.vue

@@ -1,9 +1,12 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :items="items"
     :itemTo="$props.itemTo"
     :loading="fetchingDashboardOrganisationTypes || fetchingDashboardOrganisations || fetchingDashboardShallows"
     :tableCode="$props.tableCode"
+    :selectable="$props.selectable"
+    :singleSelect="$props.singleSelect"
     :modelValue="selecteds"
     @update:modelValue="onSelect"
     v-bind="$attrs"
@@ -17,7 +20,6 @@
         v-bind="slotData"
       />
     </template>
-
     <template
       #item.icon="{ item }"
     >
@@ -25,7 +27,6 @@
         {{ item.icon }}
       </FSIcon>
     </template>
-
     <template
       #item.main="{ item }"
     >
@@ -40,13 +41,23 @@
         mdi-home
       </FSIcon>
     </template>
-
+    <template
+      #item.tags="{ item }"
+    >
+      <FSTagGroup
+        variant="slide"
+        :showRemove="false"
+        :tags="item.tags"
+      />
+    </template>
     <template
       #item.tile="{ item, toggleSelect }"
     >
       <FSDashboardOrganisationTypeTileUI
         v-if="item.dashboardType == DashboardType.OrganisationType"
         :bottomColor="item.colors"
+        :selectable="$props.selectable"
+        :singleSelect="$props.singleSelect"
         :to="$props.itemTo && $props.itemTo(item)"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
@@ -55,6 +66,8 @@
       <FSDashboardOrganisationTileUI
         v-if="item.dashboardType == DashboardType.Organisation"
         :bottomColor="item.colors"
+        :selectable="$props.selectable"
+        :singleSelect="$props.singleSelect"
         :to="$props.itemTo && $props.itemTo(item)"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
@@ -63,6 +76,8 @@
       <FSDashboardShallowTileUI
         v-if="item.dashboardType == DashboardType.Shallow"
         :bottomColor="item.colors"
+        :selectable="$props.selectable"
+        :singleSelect="$props.singleSelect"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
         :to="$props.itemTo && $props.itemTo(item)"
@@ -74,9 +89,8 @@
 
 <script lang="ts">
 import _ from "lodash";
-import type { PropType} from "vue";
 import type { RouteLocation } from "vue-router";
-import { computed, defineComponent, onMounted, ref, watch } from "vue";
+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";
@@ -85,22 +99,30 @@ import { useOrganisation } from "@dative-gpi/foundation-shared-services/composab
 import type { DashboardsListItem } from "@/core/foundation-core-components/utils";
 import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
 
-import FSDataTable from "../FSDataTable.vue";
+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";
+
 export default defineComponent({
   name: "FSBaseDashboardsList",
   components: {
     FSDataTable,
+    FSTagGroup,
     FSIcon,
     FSDashboardOrganisationTileUI,
     FSDashboardOrganisationTypeTileUI,
     FSDashboardShallowTileUI
   },
   props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     dashboardOrganisationTypeFetchFilter: {
       type: Object as PropType<DashboardOrganisationTypeFilters>,
       default: undefined,
@@ -120,17 +142,23 @@ export default defineComponent({
       type: Function as PropType<(item: DashboardInfos) => Partial<RouteLocation>>,
       required: false
     },
-    tableCode: {
-      type: String,
-      required: true
-    },
     modelValue: {
       type: Array as PropType<string[]>,
       default: () => [],
       required: false
     },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    singleSelect: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
   },
-  emits: ["update:modelValue", "update:type"],
+  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();
@@ -169,8 +197,11 @@ export default defineComponent({
     const onSelect = (values: string[]) => {
       selecteds.value = values;
       const selectedItems = items.value.filter(i => selecteds.value!.includes(i.id));
-      emit("update:modelValue", selectedItems.map(i => i.id));
-      emit("update:type", selectedItems.map(i => i.dashboardType));
+      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) => {

package/components/lists/dashboards/FSSimpleDashboardsList.vue

@@ -8,10 +8,13 @@
 
 <script lang="ts">
 import { defineComponent, type PropType, watch, computed } from "vue";
+import _ from "lodash";
 
-import type { DashboardOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
-import { useDashboardOrganisations } from "@dative-gpi/foundation-core-services/composables";
-import { useDashboardOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+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 FSSimpleList from "@dative-gpi/foundation-shared-components/components/lists/FSSimpleList.vue";
 
@@ -27,7 +30,12 @@ export default defineComponent({
       default: () => ({})
     },
     dashboardOrganisationTypeFilters: {
-      type: Object as PropType<DashboardOrganisationFilters>,
+      type: Object as PropType<DashboardOrganisationTypeFilters>,
+      required: false,
+      default: () => ({})
+    },
+    dashboardShallowFilters: {
+      type: Object as PropType<DashboardShallowFilters>,
       required: false,
       default: () => ({})
     }
@@ -39,17 +47,35 @@ export default defineComponent({
     const { entities: dashboardOrganisationTypes, 
             getMany: getManyDashboardOrganisationTypes, 
             fetching: fetchingDashboardOrganisationTypes } = useDashboardOrganisationTypes();
+    const { entities: dashboardShallows, 
+            getMany: getManyDashboardShallows, 
+            fetching: fetchingDashboardShallows } = useDashboardShallows();
 
     const fetching = computed(() => fetchingDashboardOrganisations.value 
-      || fetchingDashboardOrganisationTypes.value);
+      || fetchingDashboardOrganisationTypes.value
+      || fetchingDashboardShallows.value);
     
-    const dashboards = computed(() => {
-      return [...dashboardOrganisations.value, ...dashboardOrganisationTypes.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 fetch = () => {
       getManyDashboardOrganisations(props.dashboardOrganisationFilters);
       getManyDashboardOrganisationTypes(props.dashboardOrganisationTypeFilters);
+      getManyDashboardShallows(props.dashboardShallowFilters);
     }
 
     watch(() => [props.dashboardOrganisationFilters, props.dashboardOrganisationTypeFilters], fetch, { immediate: true });

package/components/lists/dataCategories/FSBaseDataCategoriesList.vue

@@ -19,8 +19,8 @@
       maskHeight="0px"
     >
       <FSDataTable
+        defaultMode="iterator"
         :loading="fetchingDataCategories"
-        :disableIterator="true"
         :items="dataCategories"
         :modelValue="$props.modelValue"
         :showSearch="false"
@@ -109,6 +109,11 @@ export default defineComponent({
     FSIcon
   },
   props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     dataCategoryFilters: {
       type: Object as PropType<DataCategoryFilters>,
       required: false,
@@ -118,10 +123,6 @@ export default defineComponent({
       type: Array as PropType<string[]>,
       default: () => [],
       required: false
-    },
-    tableCode: {
-      type: String,
-      required: true
     }
   },
   emits: ["update:modelValue"],

package/components/lists/dataDefinitions/FSBaseDataDefinitionsList.vue

@@ -1,5 +1,6 @@
 <template>
   <FSDataTable
+    defaultMode="iterator"
     :loading="fetchingDataDefinitions"
     :items="dataDefinitions"
     :tableCode="$props.tableCode"
@@ -88,6 +89,11 @@ export default defineComponent({
     FSRow,
   },
   props: {
+    tableCode: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     dataDefinitionFilters: {
       type: Object as PropType<DataDefinitionFilters>,
       required: false,
@@ -97,10 +103,6 @@ export default defineComponent({
       type: Array as PropType<string[]>,
       default: () => [],
       required: false
-    },
-    tableCode: {
-      type: String,
-      required: true
     }
   },
   emits: ["update:modelValue"],