@dative-gpi/foundation-core-components 1.0.35 → 1.0.37-report-v1

package/components/autocompletes/FSAutocompleteChart.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.chart', 'Chart')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -56,12 +57,12 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { type ChartOrganisationFilters, ChartOrigin, type ChartOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
+import { type ChartOrganisationFilters, type ChartOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useChartOrganisations, useChartOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+import { chartOriginColor, chartOriginLabel } from "@dative-gpi/foundation-shared-components/tools";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
-
-import { chartOriginColor, chartOriginLabel } from "../../utils";
+import { ChartOrigin } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
 import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
@@ -93,7 +94,7 @@ export default defineComponent({
       default: null
     },
     type: {
-      type: Number as PropType<ChartOrigin>,
+      type: [Array, Number] as PropType<ChartOrigin[] | ChartOrigin>,
       required: false,
       default: ChartOrigin.None
     },
@@ -116,9 +117,14 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
-  emits: ["update:modelValue", "update:type"],
+  emits: ["update", "update:modelValue", "update:type"],
   setup(props, { emit }) {
     const { getMany: getManyChartOrganisationTypes, fetching: fetchingChartOrganisationTypes, entities: chartOrganisationTypes } = useChartOrganisationTypes();
     const { getMany: getManyChartOrganisations, fetching: fetchingChartOrganisations, entities: chartOrganisations } = useChartOrganisations();
@@ -144,19 +150,23 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-chart.placeholder", "{0} chart(s) selected", props.modelValue.length);
+        return $tr("autocomplete.chart.placeholder", "{0} chart(s) selected", props.modelValue.length);
       }
       return null;
     });
 
     const update = (value: Chart[] | Chart | null) => {
       if (Array.isArray(value)) {
-        emit("update:modelValue", value.map(v => v.id));
-        emit("update:type", value.map(v => v.type));
+        const newModelValue = value.map(v => v.id);
+        const newType = value.map(v => v.type);
+        emit("update:modelValue", newModelValue);
+        emit("update:type", newType);
+        emit("update", { modelValue: newModelValue, type: newType });
       }
       else {
         emit("update:modelValue", value?.id);
         emit("update:type", value?.type);
+        emit("update", { modelValue: value?.id, type: value?.type });
       }
     };
 

package/components/autocompletes/FSAutocompleteDashboard.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.dashboard', 'Dashboard')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -60,8 +61,8 @@ import { type DashboardOrganisationFilters, type DashboardOrganisationTypeFilter
 import { useDashboardOrganisations, useDashboardOrganisationTypes, useDashboardShallows } from "@dative-gpi/foundation-core-services/composables";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
-import { DashboardType } from "@dative-gpi/foundation-shared-domain/models";
 
+import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
 import { dashboardTypeColor, dashboardTypeLabel } from "../../utils";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
@@ -100,7 +101,7 @@ export default defineComponent({
       default: null
     },
     type: {
-      type: Number as PropType<DashboardType>,
+      type: [Array, Number] as PropType<DashboardType[] | DashboardType>,
       required: false,
       default: DashboardType.None
     },
@@ -123,9 +124,14 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
-  emits: ["update:modelValue", "update:type"],
+  emits: ["update", "update:modelValue", "update:type"],
   setup(props, { emit }) {
     const { getMany: getManyDashboardOrganisationTypes, fetching: fetchingDashboardOrganisationTypes, entities: dashboardOrganisationTypes } = useDashboardOrganisationTypes();
     const { getMany: getManyDashboardOrganisations, fetching: fetchingDashboardOrganisations, entities: dashboardOrganisations } = useDashboardOrganisations();
@@ -157,19 +163,23 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-dashboard.placeholder", "{0} dashboard(s) selected", props.modelValue.length);
+        return $tr("autocomplete.dashboard.placeholder", "{0} dashboard(s) selected", props.modelValue.length);
       }
       return null;
     });
 
     const update = (value: Dashboard[] | Dashboard | null) => {
       if (Array.isArray(value)) {
-        emit("update:modelValue", value.map(v => v.id));
-        emit("update:type", value.map(v => v.type));
+        const newModelValue = value.map(v => v.id);
+        const newType = value.map(v => v.type);
+        emit("update:modelValue", newModelValue);
+        emit("update:type", newType);
+        emit("update", { modelValue: newModelValue, type: newType });
       }
       else {
         emit("update:modelValue", value?.id);
         emit("update:type", value?.type);
+        emit("update", { modelValue: value?.id, type: value?.type });
       }
     };
 

package/components/autocompletes/FSAutocompleteDashboardOrganisation.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.dashboard', 'Dashboard')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :items="dashboardOrganisations"
     :multiple="$props.multiple"
@@ -59,6 +60,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -72,7 +78,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-dashboard-organisation.placeholder", "{0} dashboard(s) selected", props.modelValue.length);
+        return $tr("autocomplete.dashboard.placeholder", "{0} dashboard(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteDataCategory.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.data-category', 'Data category')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -15,13 +16,13 @@
       <FSChip
         v-if="item.correlated"
         prependIcon="mdi-link"
-        :label="$tr('ui.autocomplete-data-category.linked','Linked')"
+        :label="$tr('autocomplete.data-category.linked','Linked')"
         :color="ColorEnum.Success"
       />
       <FSChip
         v-else
         prependIcon="mdi-link-off"
-        :label="$tr('ui.autocomplete-data-category.not-linked','Not linked')"
+        :label="$tr('autocomplete.data-category.not-linked','Not linked')"
         :color="ColorEnum.Warning"
       />
     </template>
@@ -41,13 +42,13 @@
           <FSChip
             v-if="props.item.correlated"
             prependIcon="mdi-link"
-            :label="$tr('ui.autocomplete-data-category.linked','Linked')"
+            :label="$tr('autocomplete.data-category.linked','Linked')"
             :color="ColorEnum.Success"
           />
           <FSChip
             v-else
             prependIcon="mdi-link-off"
-            :label="$tr('ui.autocomplete-data-category.not-linked','Not linked')"
+            :label="$tr('autocomplete.data-category.not-linked','Not linked')"
             :color="ColorEnum.Warning"
           />
         </template>
@@ -96,6 +97,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -109,7 +115,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-data-category.placeholder", "{0} data category(ies) selected", props.modelValue.length);
+        return $tr("autocomplete.data-category.placeholder", "{0} data category(ies) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteDataDefinition.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.data-definition', 'Data')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -79,6 +80,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -92,7 +98,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-data-definition.placeholder", "{0} data definition(s) selected", props.modelValue.length);
+        return $tr("autocomplete.data-definition.placeholder", "{0} data definition(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteGroup.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.group', 'Group')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -58,6 +59,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -71,7 +77,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-group.placeholder", "{0} group(s) selected", props.modelValue.length);
+        return $tr("autocomplete.group.placeholder", "{0} group(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteLocation.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.location', 'Location')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -58,6 +59,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],

package/components/autocompletes/FSAutocompleteManufacturer.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.manufacturer', 'Manufacturer')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -17,6 +18,7 @@
         height="26px"
         width="26px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -38,6 +40,7 @@
             height="26px"
             width="26px"
             :imageId="props.item.imageId"
+            :thumbnail="true"
           />
         </template>
       </FSButton>
@@ -84,6 +87,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],

package/components/autocompletes/FSAutocompleteModel.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.model', 'Model')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -17,6 +18,7 @@
         height="26px"
         width="26px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -38,6 +40,7 @@
             height="26px"
             width="26px"
             :imageId="props.item.imageId"
+            :thumbnail="true"
           />
         </template>
       </FSButton>
@@ -84,6 +87,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -97,7 +105,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-model.placeholder", "{0} model(s) selected", props.modelValue.length);
+        return $tr("autocomplete.model.placeholder", "{0} model(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteOrganisationType.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.organisation-type', 'Organisation type')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -46,6 +47,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -59,7 +65,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-organisation-type.placeholder", "{0} organisation type(s) selected", props.modelValue.length);
+        return $tr("autocomplete.organisation-type.placeholder", "{0} organisation type(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteRole.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.role', 'Role')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -56,10 +57,11 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { type RoleOrganisationFilters, type RoleOrganisationTypeFilters, RoleType } from "@dative-gpi/foundation-core-domain/models";
+import { type RoleOrganisationFilters, type RoleOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useRoleOrganisations, useRoleOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
+import { RoleType } from "@dative-gpi/foundation-shared-domain/enums";
 
 import { roleTypeColor, roleTypeLabel } from "../../utils";
 
@@ -93,7 +95,7 @@ export default defineComponent({
       default: null
     },
     type: {
-      type: Number as PropType<RoleType>,
+      type: [Array, Number] as PropType<RoleType[] | RoleType>,
       required: false,
       default: RoleType.None
     },
@@ -116,9 +118,14 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
-  emits: ["update:modelValue", "update:type"],
+  emits: ["update", "update:modelValue", "update:type"],
   setup(props, { emit }) {
     const { getMany: getManyRoleOrganisationTypes, fetching: fetchingRoleOrganisationTypes, entities: roleOrganisationTypes } = useRoleOrganisationTypes();
     const { getMany: getManyRoleOrganisations, fetching: fetchingRoleOrganisations, entities: roleOrganisations } = useRoleOrganisations();
@@ -144,19 +151,23 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-role.placeholder", "{0} role(s) selected", props.modelValue.length);
+        return $tr("autocomplete.role.placeholder", "{0} role(s) selected", props.modelValue.length);
       }
       return null;
     });
 
     const update = (value: Role[] | Role | null) => {
       if (Array.isArray(value)) {
-        emit("update:modelValue", value.map(v => v.id));
-        emit("update:type", value.map(v => v.type));
+        const newModelValue = value.map(v => v.id);
+        const newType = value.map(v => v.type);
+        emit("update:modelValue", newModelValue);
+        emit("update:type", newType);
+        emit("update", { modelValue: newModelValue, type: newType });
       }
       else {
         emit("update:modelValue", value?.id);
         emit("update:type", value?.type);
+        emit("update", { modelValue: value?.id, type: value?.type });
       }
     };
 

package/components/autocompletes/FSAutocompleteServiceAccountRoleOrganisation.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.service-account-role', 'Service account role')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :items="serviceAccountRoleOrganisations"
     :multiple="$props.multiple"
@@ -58,6 +59,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -71,7 +77,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-service-account-role-organisation.placeholder", "{0} role(s) selected", props.modelValue.length);
+        return $tr("autocomplete.service-account-role.placeholder", "{0} role(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteUserOrganisation.vue

@@ -1,6 +1,7 @@
 <template>
   <FSAutocompleteField
     itemTitle="name"
+    :label="$props.label ?? $tr('ui.common.user', 'User')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -18,6 +19,7 @@
         height="26px"
         width="26px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -39,6 +41,7 @@
             height="26px"
             width="26px"
             :imageId="props.item.imageId"
+            :thumbnail="true"
           />
         </template>
       </FSButton>
@@ -85,6 +88,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -98,7 +106,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-user-organisation.placeholder", "{0} user(s) selected", props.modelValue.length);
+        return $tr("autocomplete.user.placeholder", "{0} user(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/chips/FSChipGroupUserOrganisation.vue

@@ -0,0 +1,61 @@
+<template>
+  <FSRow
+    v-if="fetching"
+  >
+    <FSLoader
+      v-for="i in 4"
+      :key="i"
+      variant="chip"
+      height="12px"
+    />
+  </FSRow>
+  <FSChipGroupUserOrganisationUI
+    v-else
+    :userOrganisationLabels="userOrganisations.map(u => u.name)"
+    :wrapped="wrapped"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, watch, type PropType } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useUserOrganisations } from "@dative-gpi/foundation-core-services/composables";
+
+import FSChipGroupUserOrganisationUI from "./FSChipGroupUserOrganisationUI.vue";
+
+export default defineComponent({
+  name: "FSChipGroupUserOrganisation",
+  components: {
+    FSChipGroupUserOrganisationUI
+  },
+  props: {
+    userOrganisationIds: {
+      type: Array as PropType<string[]>,
+      required: false
+    },
+    wrapped: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const {getMany: fetchUserOrganisations, fetching, entities: userOrganisations} = useUserOrganisations();
+
+    watch(() => props.userOrganisationIds, async () => {
+      if(props.userOrganisationIds && props.userOrganisationIds.length > 0){
+        fetchUserOrganisations({
+          userOrganisationsIds: props.userOrganisationIds
+        });
+      }
+    }, {immediate: true});
+
+    return {
+      userOrganisations,
+      ColorEnum,
+      fetching
+    };
+  }
+});
+</script>

package/components/chips/FSChipGroupUserOrganisationUI.vue

@@ -0,0 +1,38 @@
+<template>
+  <FSRow
+    :wrap="wrapped"
+  >
+    <FSChip
+      v-for="(label, i) in $props.userOrganisationLabels"
+      :key="i"
+      :color="ColorEnum.Light"
+      :label="label"
+    />
+  </FSRow>
+</template>
+  
+  <script lang="ts">
+import { defineComponent, type PropType } from "vue";
+  
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+  
+export default defineComponent({
+  name: "FSChipGroupUserOrganisationUI",
+  props: {
+    userOrganisationLabels: {
+      type: Array as PropType<string[]>,
+      required: false
+    },
+    wrapped: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup() {
+    return {
+      ColorEnum
+    };
+  }
+});
+  </script>