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

package/components/lists/roleOrganisationTypes/FSBaseRoleOrganisationTypesList.vue

@@ -3,7 +3,7 @@
     :items="roleOrganisationTypes"
     :itemTo="$props.itemTo"
     :loading="fetchingRoleOrganisations"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -44,7 +44,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -78,8 +78,9 @@ export default defineComponent({
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     roleOrganisationTypesFilters: {
       type: Object as PropType<RoleOrganisationTypeFilters | null>,
@@ -90,7 +91,7 @@ export default defineComponent({
       type: Function as PropType<(item: RoleOrganisationTypeInfos) => Partial<RouteLocation>>,
       required: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/lists/roleOrganisations/FSBaseRoleOrganisationsList.vue

@@ -1,7 +1,7 @@
 <template>
   <FSDataTable
     :loading="fetchingRoleOrganisations"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :items="roleOrganisations"
     :itemTo="$props.itemTo"
@@ -44,7 +44,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -78,8 +78,9 @@ export default defineComponent({
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     roleOrganisationsFilters: {
       type: Object as PropType<RoleOrganisationFilters | null>,
@@ -90,7 +91,7 @@ export default defineComponent({
       type: Function as PropType<(item: RoleOrganisationInfos) => Partial<RouteLocation>>,
       required: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true

package/components/lists/scenarioOrganisationTypes/FSBaseScenarioOrganisationTypesList.vue

@@ -3,7 +3,7 @@
     :items="scenarioOrganisationTypes"
     :itemTo="$props.itemTo"
     :loading="fetchingScenarioOrganisationTypes"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -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 }"
@@ -35,6 +52,7 @@
         height="32px"
         width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
 
@@ -43,7 +61,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -51,10 +69,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,19 +84,22 @@ 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: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     scenarioOrganisationTypeFilters: {
       type: Object as PropType<ScenarioOrganisationTypeFilters>,
@@ -85,7 +110,7 @@ export default defineComponent({
       type: Function as PropType<(item: ScenarioOrganisationTypeInfos) => Partial<RouteLocation>>,
       required: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true
@@ -100,6 +125,16 @@ export default defineComponent({
   setup(props) {
     const { entities: scenarioOrganisationTypes, fetching: fetchingScenarioOrganisationTypes, getMany: getManyScenarioOrganisationTypes } = useScenarioOrganisationTypes();
 
+    const headersOptions = computed(() => ({
+      criticity: {
+        fixedFilters: getEnumEntries(Criticity).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);
     };
@@ -113,6 +148,8 @@ export default defineComponent({
     return {
       fetchingScenarioOrganisationTypes,
       scenarioOrganisationTypes,
+      headersOptions,
+      AlertTools,
       isSelected
     };
   }

package/components/lists/scenarioOrganisations/FSBaseScenarioOrganisationsList.vue

@@ -3,9 +3,10 @@
     :items="scenarioOrganisations"
     :itemTo="$props.itemTo"
     :loading="fetchingScenarioOrganisations"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
+    :headersOptions="headersOptions"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
@@ -27,12 +28,29 @@
       </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 }"
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -40,28 +58,35 @@
 </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: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     scenarioOrganisationFilters: {
       type: Object as PropType<ScenarioOrganisationFilters>,
@@ -72,7 +97,7 @@ export default defineComponent({
       type: Function as PropType<(item: ScenarioOrganisationInfos) => Partial<RouteLocation>>,
       required: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true
@@ -87,6 +112,17 @@ export default defineComponent({
   setup(props) {
     const { entities: scenarioOrganisations, fetching: fetchingScenarioOrganisations, getMany: getManyScenarioOrganisations } = useScenarioOrganisations();
 
+
+    const headersOptions = computed(() => ({
+      criticity: {
+        fixedFilters: getEnumEntries(Criticity).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);
     };
@@ -100,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,12 +28,29 @@
       </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 }"
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -45,27 +63,37 @@ import _ from "lodash";
 
 import { useTranslations } from "@dative-gpi/bones-ui";
 
-import {ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+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: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      required: false
     },
     scenarioOrganisationFilters: {
       type: Object as PropType<ScenarioOrganisationFilters>,
@@ -77,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", "Association"),
+          value: "association",
           sortable: false,
-        },
-        {
-          text: $tr("entity.scenario.label", "Label"),
-          value: "label",
-          sortable: true
-        },
-        {
-          text: $tr("entity.scenario.modelLabel", "Model label"),
-          value: "modelLabel",
-          sortable: true
-        },
-        {
-          text: $tr("entity.scenario.dataCategoryLabel", "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).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,
@@ -163,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/components/lists/serviceAccountOrganisations/FSBaseServiceAccountOrganisationsList.vue

@@ -3,7 +3,7 @@
     :items="serviceAccountOrganisations"
     :itemTo="$props.itemTo"
     :loading="fetchingServiceAccountOrganisations"
-    :showSelect="$props.editable"
+    :selectable="$props.selectable"
     :tableCode="$props.tableCode"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
@@ -33,6 +33,7 @@
         height="32px"
         width="32px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -40,7 +41,7 @@
     >
       <FSTagGroup
         variant="slide"
-        :editable="false"
+        :showRemove="false"
         :tags="item.tags"
       />
     </template>
@@ -63,11 +64,12 @@
       </FSSpan>
     </template>
     <template
-      #item.tile="{ item, toggleSelect }"
+      #item.tile="{ index, item, toggleSelect }"
     >
       <FSServiceAccountOrganisationTileUI
+        :key="index"
         :to="$props.itemTo && $props.itemTo(item)"
-        :editable="$props.editable"
+        :selectable="$props.selectable"
         :modelValue="isSelected(item.id)"
         @update:modelValue="toggleSelect(item)"
         v-bind="item"
@@ -104,8 +106,9 @@ export default defineComponent({
   },
   props: {
     tableCode: {
-      type: String,
-      required: true
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     },
     serviceAccountOrganisationsFilters: {
       type: Object as PropType<ServiceAccountOrganisationFilters | null>,
@@ -116,7 +119,7 @@ export default defineComponent({
       type: Function as PropType<(item: ServiceAccountOrganisationInfos) => Partial<RouteLocation>>,
       required: false
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: true