@dative-gpi/foundation-core-components 1.0.91 → 1.0.93

package/components/lists/FSDataTable.vue

@@ -57,6 +57,11 @@ export default defineComponent({
       required: false,
       default: 1000
     },
+    extraHeaders: {
+      type: Array as PropType<FSDataTableColumn[]>,
+      required: false,
+      default: () => []
+    },
     headersOptions: {
       type: Object as PropType<{ [key: string]: Partial<FSDataTableColumn> }>,
       required: false,
@@ -70,7 +75,7 @@ export default defineComponent({
     const { getTable, setTable } = useTables();
     const { debounce, cancel } = useDebounce();
 
-    const computedTable = computed(() => computeTable(props.headersOptions, props.defaultMode));
+    const computedTable = computed(() => computeTable(props.headersOptions, props.defaultMode, props.extraHeaders));
 
     onUnmounted(() => {
       cancel();

package/components/lists/chartOrganisationTypes/FSBaseChartOrganisationTypesList.vue

@@ -3,6 +3,7 @@
     :items="chartOrganisationTypes"
     :itemTo="$props.itemTo"
     :loading="fetchingChartOrganisationTypes"
+    :headersOptions="headersOptions"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -50,6 +51,20 @@
         :tags="item.tags"
       />
     </template>
+    <template
+      #item.chartType="{ item }"
+    >
+      <FSRow
+        :wrap="false"
+      >
+        <FSIcon
+          :icon="chartIcon(item.chartType)"
+        />
+        <FSText>
+          {{ chartTypeLabel(item.chartType) }}
+        </FSText>
+      </FSRow>
+    </template>
     <template
       #item.modelsLabels="{ item }"
     >
@@ -74,21 +89,25 @@
 </template>
 
 <script lang="ts">
-import _ from "lodash";
-import { defineComponent, type PropType, watch } from "vue";
+import { computed, defineComponent, type PropType, watch } from "vue";
 import type { RouteLocation } from "vue-router";
+import _ from "lodash";
 
-import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
-
-import type { ChartOrganisationTypeFilters, ChartOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
+import { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { chartTypeLabel, chartIcon } from "@dative-gpi/foundation-shared-components/tools";
 
+import type { ChartModelLabel, ChartOrganisationTypeFilters, ChartOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useChartOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
 
 import FSChartTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSChartTileUI.vue";
-import FSDataTable from "../FSDataTable.vue";
 import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
 import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+
+import FSDataTable from "../FSDataTable.vue";
 
 export default defineComponent({
   name: "FSBaseChartOrganisationTypesList",
@@ -97,7 +116,8 @@ export default defineComponent({
     FSDataTable,
     FSTagGroup,
     FSImage,
-    FSIcon
+    FSIcon,
+    FSRow
   },
   props: {
     tableCode: {
@@ -122,9 +142,32 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-
     const { entities: chartOrganisationTypes, fetching: fetchingChartOrganisationTypes, getMany: getManyChartOrganisationTypes } = useChartOrganisationTypes();
 
+    const headersOptions = computed(() => ({
+      modelsLabels: {
+        fixedFilters: chartOrganisationTypes.value.map(c => c.modelsLabels).reduce((acc, models) => {
+          for (const m of models) {
+            if (!acc.map((m) => m.id).includes(m.id)) {
+              acc.push(m);
+            }
+          }
+          return acc;
+        }, []).map((m) =>  ({
+          value: m.id,
+          text: m.label
+        })),
+        methodFilter: (value: string, items: ChartModelLabel[]) => items.some(ml => ml.id == value)
+      },
+      chartType: {
+        fixedFilters: getEnumEntries(ChartType).filter(f => f.value != ChartType.None).map(e => ({
+          value: e.value,
+          text: chartTypeLabel(e.value)
+        })),
+        methodFilter: (value: ChartType, item: ChartType) => value == item
+      }
+    }));
+      
     const isSelected = (id: string): boolean => {
       return props.modelValue.includes(id);
     };
@@ -140,10 +183,13 @@ export default defineComponent({
     }, { immediate: true });
 
     return {
-      ColorEnum,
       fetchingChartOrganisationTypes,
       chartOrganisationTypes,
-      isSelected
+      headersOptions,
+      ColorEnum,
+      chartTypeLabel,
+      isSelected,
+      chartIcon
     };
   }
 });

package/components/lists/chartOrganisations/FSBaseChartOrganisationsList.vue

@@ -3,6 +3,7 @@
     :items="chartOrganisations"
     :itemTo="$props.itemTo"
     :loading="fetchingChartOrganisations"
+    :headersOptions="headersOptions"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -70,33 +71,54 @@
         :to="$props.itemTo && $props.itemTo(item)"
       />
     </template>
+    <template
+      #item.chartType="{ item }"
+    >
+      <FSRow
+        :wrap="false"
+      >
+        <FSIcon
+          :icon="chartIcon(item.chartType)"
+        />
+        <FSText>
+          {{ chartTypeLabel(item.chartType) }}
+        </FSText>
+      </FSRow>
+    </template>
   </FSDataTable>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, watch } from "vue";
+import { computed, defineComponent, type PropType, watch } from "vue";
 import type { RouteLocation } from "vue-router";
 import _ from "lodash";
 
+import { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { chartTypeLabel, chartIcon } from "@dative-gpi/foundation-shared-components/tools";
 
-import { type ChartOrganisationFilters, type ChartOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
+import type { ChartModelLabel, ChartOrganisationFilters, ChartOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useChartOrganisations } from "@dative-gpi/foundation-core-services/composables";
 
-import FSDataTable from "../FSDataTable.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
 import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
 import FSChartTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSChartTileUI.vue";
 
+import FSDataTable from "../FSDataTable.vue";
+
+
 export default defineComponent({
   name: "FSBaseChartOrganisationsList",
   components: {
+    FSChartTileUI,
     FSDataTable,
-    FSIcon,
-    FSImage,
     FSTagGroup,
-    FSChartTileUI
+    FSImage,
+    FSIcon,
+    FSRow,
   },
   props: {
     tableCode: {
@@ -121,9 +143,33 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-
     const { entities: chartOrganisations, fetching: fetchingChartOrganisations, getMany: getManyChartOrganisations } = useChartOrganisations();
 
+    const headersOptions = computed(() => ({
+      modelsLabels: {
+        fixedFilters: chartOrganisations.value.map(c => c.modelsLabels).reduce((acc, models) => {
+          for (const m of models) {
+            if (!acc.map((m) => m.id).includes(m.id)) {
+              acc.push(m);
+            }
+          }
+          return acc;
+        }, []).map((m) =>  ({
+          value: m.id,
+          text: m.label
+        })),
+        methodFilter: (value: string, items: ChartModelLabel[]) => items.some(ml => ml.id == value)
+      },
+      chartType: {
+        fixedFilters: getEnumEntries(ChartType).filter(f => f.value != ChartType.None).map(e => ({
+          value: e.value,
+          text: chartTypeLabel(e.value)
+        })),
+        methodFilter: (value: ChartType, item: ChartType) => value == item
+      }
+    }));
+
+
     const isSelected = (id: string): boolean => {
       return props.modelValue.includes(id);
     };
@@ -139,10 +185,13 @@ export default defineComponent({
     }, { immediate: true });
 
     return {
-      ColorEnum,
       fetchingChartOrganisations,
       chartOrganisations,
-      isSelected
+      headersOptions,
+      ColorEnum,
+      chartTypeLabel,
+      isSelected,
+      chartIcon
     };
   }
 });

package/components/lists/charts/FSBaseChartsList.vue

@@ -2,6 +2,7 @@
   <FSDataTable
     defaultMode="iterator"
     :loading="fetchingChartOrganisationTypes || fetchingChartOrganisations"
+    :headersOptions="headersOptions"
     :items="charts"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
@@ -50,6 +51,20 @@
         :tags="item.tags"
       />
     </template>
+    <template
+      #item.chartType="{ item }"
+    >
+      <FSRow
+        :wrap="false"
+      >
+        <FSIcon
+          :icon="chartIcon(item.chartType)"
+        />
+        <FSText>
+          {{ chartTypeLabel(item.chartType) }}
+        </FSText>
+      </FSRow>
+    </template>
     <template
       #item.modelsLabels="{ item }"
     >
@@ -78,16 +93,20 @@
 import { defineComponent, type PropType, watch, computed } from "vue";
 import _ from "lodash";
 
+import { ChartType } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { chartTypeLabel, chartIcon } from "@dative-gpi/foundation-shared-components/tools";
 
-import type { ChartOrganisationFilters, ChartOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
-
+import type { ChartModelLabel, ChartOrganisationFilters, ChartOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useChartOrganisations, useChartOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
 
 import FSChartTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSChartTileUI.vue";
 import FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
 import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+
 import FSDataTable from "../FSDataTable.vue";
 
 export default defineComponent({
@@ -97,7 +116,8 @@ export default defineComponent({
     FSDataTable,
     FSTagGroup,
     FSImage,
-    FSIcon
+    FSIcon,
+    FSRow
   },
   props: {
     tableCode: {
@@ -123,7 +143,6 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "update:scope"],
   setup(props, { emit }) {
-
     const { entities: chartOrganisations, fetching: fetchingChartOrganisations, getMany: getManyChartOrganisations } = useChartOrganisations();
     const { entities: chartOrganisationTypes, fetching: fetchingChartOrganisationTypes, getMany: getManyChartOrganisationTypes } = useChartOrganisationTypes();
 
@@ -137,60 +156,77 @@ export default defineComponent({
     }
 
     const charts = computed(() => {
-      return chartOrganisations.value.map(c => {
-        return {
-          id: c.id,
-          imageId: c.imageId,
-          chartId: c.chartId,
-          chartCategoryId: c.chartCategoryId,
-          chartCategoryLabel: c.chartCategoryLabel,
-          scope: c.scope,
-          label: c.label,
-          title: c.title,
-          code: c.code,
-          icon: c.icon,
-          tags: c.tags,
-          multiple: c.multiple,
-          chartType: c.chartType,
-          modelsLabels: c.modelsLabels
-        }
-      })
-        .concat(chartOrganisationTypes.value.map(c => {
-          return {
-            id: c.id,
-            imageId: c.imageId,
-            chartId: c.chartId,
-            chartCategoryId: c.chartCategoryId,
-            chartCategoryLabel: c.chartCategoryLabel,
-            scope: c.scope,
-            label: c.label,
-            title: c.title,
-            code: c.code,
-            icon: c.icon,
-            tags: c.tags,
-            multiple: c.multiple,
-            chartType: c.chartType,
-            modelsLabels: c.modelsLabels
+      return chartOrganisations.value.map(c => ({
+        id: c.id,
+        imageId: c.imageId,
+        chartId: c.chartId,
+        chartCategoryId: c.chartCategoryId,
+        chartCategoryLabel: c.chartCategoryLabel,
+        scope: c.scope,
+        label: c.label,
+        title: c.title,
+        code: c.code,
+        icon: c.icon,
+        tags: c.tags,
+        multiple: c.multiple,
+        chartType: c.chartType,
+        modelsLabels: c.modelsLabels
+      })).concat(chartOrganisationTypes.value.map(c => ({
+        id: c.id,
+        imageId: c.imageId,
+        chartId: c.chartId,
+        chartCategoryId: c.chartCategoryId,
+        chartCategoryLabel: c.chartCategoryLabel,
+        scope: c.scope,
+        label: c.label,
+        title: c.title,
+        code: c.code,
+        icon: c.icon,
+        tags: c.tags,
+        multiple: c.multiple,
+        chartType: c.chartType,
+        modelsLabels: c.modelsLabels
+      })));
+    });
+
+    const headersOptions = computed(() => ({
+      modelsLabels: {
+        fixedFilters: chartOrganisationTypes.value.map(c => c.modelsLabels).reduce((acc, models) => {
+          for(const m of models){
+            if(!acc.map((m) => m.id).includes(m.id)){
+              acc.push(m);
+            }
           }
-        }))
-    })
+          return acc;
+        }, []).map((m) =>  ({
+          value: m.id,
+          text: m.label
+        })),
+        methodFilter: (value: string, items: ChartModelLabel[]) => items.some(ml => ml.id == value)
+      },
+      chartType: {
+        fixedFilters: getEnumEntries(ChartType).filter(f => f.value != ChartType.None).map(e => ({
+          value: e.value,
+          text: chartTypeLabel(e.value)
+        })),
+        methodFilter: (value: ChartType, item: ChartType) => value == item
+      }
+    }));
 
-    const update = (value : string) =>
-    {
+    const update = (value : string) => {
       const item = isSelected(value);
-
-      if(item){
-        onSelect(props.modelValue.filter(m => m != value))
+      if (item) {
+        onSelect(props.modelValue.filter(m => m != value));
       }
-      else{
-        onSelect([...props.modelValue, value])
+      else {
+        onSelect([...props.modelValue, value]);
       }
     }
 
     const onSelect = (values: string[] | null) => {
       if(!values){
-        emit("update:modelValue", [])
-        emit("update:scope", [])
+        emit("update:modelValue", []);
+        emit("update:scope", []);
         return;
       }
       const selectedItems = charts.value.filter(i => values.includes(i.id));
@@ -209,9 +245,12 @@ export default defineComponent({
       fetchingChartOrganisations,
       chartOrganisationTypes,
       chartOrganisations,
+      headersOptions,
       ColorEnum,
       charts,
+      chartTypeLabel,
       isSelected,
+      chartIcon,
       onSelect,
       update
     };

package/components/lists/comments/FSBaseCommentsList.vue

@@ -21,20 +21,24 @@
         :userImageId="currentUser?.imageId"
       />
     </FSRow>
-    <FSCommentTileUI
-      v-for="comment in orderedComments"
-      :key="comment.id"
-      :timestamp="epochToLongTimeFormat(comment.timestamp)"
-      :userName="comment.userName"
-      :userImageId="comment.userImageId"
-      :canEditRemove="currentUser?.id === comment.userId"
-      :comment="comment.comment"
-      :edited="comment.edited"
-      :removing="removing"
-      :id="comment.id"
-      @edit="updateComment"
-      @remove="removeComment(comment.id)"
-    />
+    <FSCol
+      gap="12px"
+    >
+      <FSCommentTileUI
+        v-for="comment in orderedComments"
+        :key="comment.id"
+        :timestamp="epochToLongTimeFormat(comment.timestamp)"
+        :userName="comment.userName"
+        :userImageId="comment.userImageId"
+        :canEditRemove="currentUser?.id === comment.userId"
+        :comment="comment.comment"
+        :edited="comment.edited"
+        :removing="removing"
+        :id="comment.id"
+        @edit="updateComment"
+        @remove="removeComment(comment.id)"
+      />
+    </FSCol>
   </FSCol>
 </template>
 

package/components/lists/connectivityScenarios/FSBaseConnectivityScenariosList.vue

@@ -0,0 +1,127 @@
+<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"
+        width="34px"
+        height="34px"
+        :imageId="item.deviceOrganisationImageId"
+      />
+    </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/deviceOrganisations/FSBaseDeviceOrganisationsList.vue

@@ -278,7 +278,14 @@ 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)
       },
       connectivity: {
@@ -298,7 +305,14 @@ 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)
       },
       worstAlert: {
@@ -316,9 +330,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/scenarioOrganisationTypes/FSBaseScenarioOrganisationTypesList.vue

@@ -26,6 +26,23 @@
         {{ item.icon }}
       </FSIcon>
     </template>
+    
+    <template
+      #item.criticity="{ item }"
+    >
+      <FSRow
+        align="center-left"
+      >
+        <FSIcon
+          :color="AlertTools.criticityColor(item.criticity)"
+        >
+          {{ AlertTools.criticityIcon(item.criticity) }}
+        </FSIcon>
+        <FSSpan>
+          {{ AlertTools.criticityLabel(item.criticity) }}
+        </FSSpan>
+      </FSRow>
+    </template>
 
     <template
       #item.imageId="{ item }"
@@ -51,10 +68,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, watch } from "vue";
+import { computed, defineComponent, type PropType, watch } from "vue";
 import type { RouteLocation } from "vue-router";
 import _ from "lodash";
 
+import { Criticity } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
+
 import type { ScenarioOrganisationTypeFilters, ScenarioOrganisationTypeInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useScenarioOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
 
@@ -62,14 +83,16 @@ 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 FSTagGroup from "@dative-gpi/foundation-shared-components/components/FSTagGroup.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 export default defineComponent({
   name: "FSBaseScenarioOrganisationTypesList",
   components: {
     FSDataTable,
-    FSIcon,
+    FSTagGroup,
     FSImage,
-    FSTagGroup
+    FSIcon,
+    FSRow,
   },
   props: {
     tableCode: {
@@ -101,6 +124,16 @@ export default defineComponent({
   setup(props) {
     const { entities: scenarioOrganisationTypes, fetching: fetchingScenarioOrganisationTypes, getMany: getManyScenarioOrganisationTypes } = useScenarioOrganisationTypes();
 
+    const headersOptions = computed(() => ({
+      criticity: {
+        fixedFilters: getEnumEntries(Criticity).filter(f => f.value != Criticity.None).map(e => ({
+          value: e.value,
+          text: AlertTools.criticityLabel(e.value)
+        })),
+        methodFilter: (value: Criticity, item: Criticity) => value == item
+      }
+    }));
+
     const isSelected = (id: string): boolean => {
       return props.modelValue.includes(id);
     };
@@ -114,6 +147,8 @@ export default defineComponent({
     return {
       fetchingScenarioOrganisationTypes,
       scenarioOrganisationTypes,
+      headersOptions,
+      AlertTools,
       isSelected
     };
   }

package/components/lists/scenarioOrganisations/FSBaseScenarioOrganisationsList.vue

@@ -6,6 +6,7 @@
     :showSelect="$props.editable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
+    :headersOptions="headersOptions"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
@@ -27,6 +28,23 @@
       </FSIcon>
     </template>
 
+    <template
+      #item.criticity="{ item }"
+    >
+      <FSRow
+        align="center-left"
+      >
+        <FSIcon
+          :color="AlertTools.criticityColor(item.criticity)"
+        >
+          {{ AlertTools.criticityIcon(item.criticity) }}
+        </FSIcon>
+        <FSSpan>
+          {{ AlertTools.criticityLabel(item.criticity) }}
+        </FSSpan>
+      </FSRow>
+    </template>
+    
     <template
       #item.tags="{ item }"
     >
@@ -40,23 +58,29 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, watch } from "vue";
+import { computed, defineComponent, type PropType, watch } from "vue";
 import type { RouteLocation } from "vue-router";
 import _ from "lodash";
 
+import { Criticity } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
+
 import type { ScenarioOrganisationFilters, ScenarioOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useScenarioOrganisations } from "@dative-gpi/foundation-core-services/composables";
 
 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 FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 export default defineComponent({
   name: "FSBaseScenarioOrganisationsList",
   components: {
     FSDataTable,
+    FSTagGroup,
     FSIcon,
-    FSTagGroup
+    FSRow
   },
   props: {
     tableCode: {
@@ -88,6 +112,17 @@ export default defineComponent({
   setup(props) {
     const { entities: scenarioOrganisations, fetching: fetchingScenarioOrganisations, getMany: getManyScenarioOrganisations } = useScenarioOrganisations();
 
+
+    const headersOptions = computed(() => ({
+      criticity: {
+        fixedFilters: getEnumEntries(Criticity).filter(f => f.value != Criticity.None).map(e => ({
+          value: e.value,
+          text: AlertTools.criticityLabel(e.value)
+        })),
+        methodFilter: (value: Criticity, item: Criticity) => value == item
+      }
+    }));
+
     const isSelected = (id: string): boolean => {
       return props.modelValue.includes(id);
     };
@@ -101,6 +136,8 @@ export default defineComponent({
     return {
       fetchingScenarioOrganisations,
       scenarioOrganisations,
+      headersOptions,
+      AlertTools,
       isSelected
     };
   }

package/components/lists/scenarios/FSBaseScenariosList.vue

@@ -1,11 +1,12 @@
 <template>
   <FSDataTable
     :loading="fetchingScenarioOrganisationTypes || fetchingScenarioOrganisations"
-    :headers="headers"
+    :headersOptions="headersOptions"
+    :extraHeaders="headerAssociation"
     :items="scenarios"
-    :showSelect="$props.editable"
-    :tableCode="$props.tableCode"
+    :itemTo="routerLink"
     :modelValue="$props.modelValue"
+    :tableCode="$props.tableCode"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
@@ -27,6 +28,23 @@
       </FSIcon>
     </template>
 
+    <template
+      #item.criticity="{ item }"
+    >
+      <FSRow
+        align="center-left"
+      >
+        <FSIcon
+          :color="AlertTools.criticityColor(item.criticity)"
+        >
+          {{ AlertTools.criticityIcon(item.criticity) }}
+        </FSIcon>
+        <FSSpan>
+          {{ AlertTools.criticityLabel(item.criticity) }}
+        </FSSpan>
+      </FSRow>
+    </template>
+
     <template
       #item.tags="{ item }"
     >
@@ -45,22 +63,26 @@ import _ from "lodash";
 
 import { useTranslations } from "@dative-gpi/bones-ui";
 
+import { Criticity, ApplicationScope } from "@dative-gpi/foundation-shared-domain/enums";
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools"
 
 import type { ScenarioOrganisationFilters, ScenarioOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
-
-import { useScenarioOrganisations, useScenarioOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+import { useScenarioOrganisations, useScenarioOrganisationTypes, useRouteOrganisation } from "@dative-gpi/foundation-core-services/composables";
 
 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 FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 export default defineComponent({
   name: "FSBaseScenariosList",
-  components: {
+  components:{
     FSDataTable,
+    FSTagGroup,
     FSIcon,
-    FSTagGroup
+    FSRow   
   },
   props: {
     tableCode: {
@@ -68,6 +90,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
+    },
     scenarioOrganisationFilters: {
       type: Object as PropType<ScenarioOrganisationFilters>,
       required: false,
@@ -78,79 +105,60 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    showAssociation: {
       type: Boolean,
       required: false,
       default: true
     },
-    modelValue: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-      required: false
+    scope: {
+      type: Number as PropType<ApplicationScope>,
+      required: false,
+      default: ApplicationScope.None
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {
+  setup(props) {
     const { $tr } = useTranslations();
     const { entities: scenarioOrganisations, fetching: fetchingScenarioOrganisations, getMany: getManyScenarioOrganisations } = useScenarioOrganisations();
     const { entities: scenarioOrganisationTypes, fetching: fetchingScenarioOrganisationTypes, getMany: getManyScenarioOrganisationTypes } = useScenarioOrganisationTypes();
 
-    const isSelected = (value : string): boolean => {
-      return props.modelValue.includes(value);
-    };
+    const { $r } = useRouteOrganisation();
 
-    const headers = computed(() => {
-      return [
-        {
-          text: $tr("entity.scenario.icon", "Icon"),
-          value: "icon",
+    const headerAssociation = computed(() => {
+      if(props.showAssociation){
+        return [{
+          columnId: "association",
+          text: $tr("ui.common.association", ""),
+          value: "association",
           sortable: false,
-        },
-        {
-          text: $tr("entity.scenario.label", "Label"),
-          value: "label",
-          sortable: true
-        },
-        {
-          text: $tr("entity.scenario.model-label", "Model label"),
-          value: "modelLabel",
-          sortable: true
-        },
-        {
-          text: $tr("entity.scenario.data-category-label", "Data category label"),
-          value: "dataCategoryLabel",
-          sortable: true
-        },
-        {
-          text: $tr("ui.common.action", ""),
-          value: "action",
-          sortable: false
-        }
-      ];
+          filterable: false,
+          index: -1,
+          hidden: false
+        }];
+      }
     });
 
+    const headersOptions = computed(() => ({
+      criticity: {
+        fixedFilters: getEnumEntries(Criticity).filter(f => f.value != Criticity.None).map(e => ({
+          value: e.value,
+          text: AlertTools.criticityLabel(e.value)
+        })),
+        methodFilter: (value: Criticity, item: Criticity) => value == item
+      }
+    }));
     
     const scenarios = computed(() => {
-      return scenarioOrganisations.value.map(c => {
-        return {
-          id: `${c.id}_${c.scope}`,
-          modelId: c.modelId,
-          dataCategoryId : c.dataCategoryId,
-          dataCategoryLabel: c.dataCategoryLabel,
-          scenarioId: c.scenarioId,
-          scope: c.scope,
-          label: c.label,
-          modelLabel: c.modelLabel,
-          code: c.code,
-          icon: c.icon,
-          tags: c.tags,
-          criticity: c.criticity,
-          parameters: c.parameters
-        }
-      })
-        .concat(scenarioOrganisationTypes.value.map(c => {
+      if(props.scope == ApplicationScope.Organisation){
+        return scenarioOrganisations.value
+      }
+      else if(props.scope == ApplicationScope.OrganisationType){
+        return scenarioOrganisationTypes.value
+      }
+      else{
+        return scenarioOrganisations.value.map(c => {
           return {
-            id: `${c.id}_${c.scope}`,
+            id: c.id,
             modelId: c.modelId,
             dataCategoryId : c.dataCategoryId,
             dataCategoryLabel: c.dataCategoryLabel,
@@ -164,43 +172,69 @@ export default defineComponent({
             criticity: c.criticity,
             parameters: c.parameters
           }
-        }))
-    })
-
-    const fetch = () =>{
-      getManyScenarioOrganisations(props.scenarioOrganisationFilters);
-      getManyScenarioOrganisationTypes(props.scenarioOrganisationTypeFilters)
-    }
+        })
+          .concat(scenarioOrganisationTypes.value.map(c => {
+            return {
+              id: c.id,
+              modelId: c.modelId,
+              dataCategoryId : c.dataCategoryId,
+              dataCategoryLabel: c.dataCategoryLabel,
+              scenarioId: c.scenarioId,
+              scope: c.scope,
+              label: c.label,
+              modelLabel: c.modelLabel,
+              code: c.code,
+              icon: c.icon,
+              tags: c.tags,
+              criticity: c.criticity,
+              parameters: c.parameters
+            }
+          }));
+      }
+    });
 
-    const update = (value : string) =>
-    {
-      const item = isSelected(value);
+    const routerLink = (item: any) => {
+      if(item.scope == ApplicationScope.OrganisationType){
+        return $r({ name: "scenario-organisation-type", params: { entityId: item.id } });
+      }
+      else
+      {
+        return $r({ name: "scenario-organisation", params: { entityId: item.id } });
+      }
+    };
 
-      if(item){
-        emit("update:modelValue", props.modelValue.filter(m => m != value))
+    const fetch = () =>{
+      if(props.scope == ApplicationScope.OrganisationType){
+        getManyScenarioOrganisationTypes(props.scenarioOrganisationTypeFilters)
+      }
+      else if(props.scope == ApplicationScope.Organisation){
+        getManyScenarioOrganisations(props.scenarioOrganisationFilters);
       }
       else{
-        emit("update:modelValue", [...props.modelValue, value])
+        getManyScenarioOrganisations(props.scenarioOrganisationFilters);
+        getManyScenarioOrganisationTypes(props.scenarioOrganisationTypeFilters)
       }
     }
- 
-    watch(() => [props.scenarioOrganisationFilters,props.scenarioOrganisationTypeFilters], (next, previous) => {
+
+    watch(() => [props.scenarioOrganisationFilters,props.scenarioOrganisationTypeFilters, props.scope], (next, previous) => {
       if ((!next && !previous) || !_.isEqual(next, previous)) {
         fetch();
       }
     }, { immediate: true });
-    
+
 
     return {
       fetchingScenarioOrganisationTypes,
       fetchingScenarioOrganisations,
       scenarioOrganisationTypes,
       scenarioOrganisations,
+      headerAssociation,
+      ApplicationScope,
+      headersOptions,
+      AlertTools,
       ColorEnum,
       scenarios,
-      headers,
-      isSelected,
-      update
+      routerLink
     };
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-core-components",
   "sideEffects": false,
-  "version": "1.0.91",
+  "version": "1.0.93",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,11 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-core-domain": "1.0.91",
-    "@dative-gpi/foundation-core-services": "1.0.91",
-    "@dative-gpi/foundation-shared-components": "1.0.91",
-    "@dative-gpi/foundation-shared-domain": "1.0.91",
-    "@dative-gpi/foundation-shared-services": "1.0.91"
+    "@dative-gpi/foundation-core-domain": "1.0.93",
+    "@dative-gpi/foundation-core-services": "1.0.93",
+    "@dative-gpi/foundation-shared-components": "1.0.93",
+    "@dative-gpi/foundation-shared-domain": "1.0.93",
+    "@dative-gpi/foundation-shared-services": "1.0.93"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -26,5 +26,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "996da7085e717a1b1c0a9e58d6d3cc40b4aadb2b"
+  "gitHead": "f072cdd74cbe86d8843a4f3fce3791e865e70f18"
 }