@dative-gpi/foundation-core-components 1.0.34 → 1.0.36

package/components/autocompletes/FSAutocompleteRole.vue

@@ -2,6 +2,7 @@
   <FSAutocompleteField
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :items="roles"
     :modelValue="$props.modelValue"
@@ -9,51 +10,22 @@
     v-bind="$attrs"
   >
     <template
-      #autocomplete-selection="{ item }"
+      #item-prepend="{ item }"
     >
-      <FSRow
-        v-if="$props.modelValue"
-        align="center-center"
-        :wrap="false"
+      <FSIcon
+        v-if="item.icon"
       >
-        <FSIcon
-          v-if="item.raw.icon"
-        >
-          {{ item.raw.icon }}
-        </FSIcon>
-        <FSSpan>
-          {{ item.raw.label }}
-        </FSSpan>
-        <FSChip
-          :color="roleTypeColor(item.raw.type)"
-          :label="roleTypeLabel(item.raw.type)"
-          :editable="false"
-        />
-      </FSRow>
+        {{ item.icon }}
+      </FSIcon>
     </template>
     <template
-      #item-label="{ item, font }"
+      #item-append="{ item }"
     >
-      <FSRow
-        align="center-left"
-        :wrap="false"
-      >
-        <FSIcon
-          v-if="item.raw.icon"
-        >
-          {{ item.raw.icon }}
-        </FSIcon>
-        <FSSpan
-          :font="font"
-        >
-          {{ item.raw.label }}
-        </FSSpan>
-        <FSChip
-          :color="roleTypeColor(item.raw.type)"
-          :label="roleTypeLabel(item.raw.type)"
-          :editable="false"
-        />
-      </FSRow>
+      <FSChip
+        :color="roleTypeColor(item.type)"
+        :label="roleTypeLabel(item.type)"
+        :editable="false"
+      />
     </template>
     <template
       #toggle-set-item="props"
@@ -87,6 +59,7 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type RoleOrganisationFilters, type RoleOrganisationTypeFilters, RoleType } 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 { roleTypeColor, roleTypeLabel } from "../../utils";
 
@@ -94,8 +67,6 @@ import FSAutocompleteField from "@dative-gpi/foundation-shared-components/compon
 import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
 import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
-import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
-import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 export default defineComponent({
   name: "FSAutocompleteRole",
@@ -103,9 +74,7 @@ export default defineComponent({
     FSAutocompleteField,
     FSButton,
     FSChip,
-    FSIcon,
-    FSSpan,
-    FSRow
+    FSIcon
   },
   props: {
     roleOrganisationTypeFilters: {
@@ -128,6 +97,16 @@ export default defineComponent({
       required: false,
       default: RoleType.None
     },
+    ignoreRoleOrganisationTypes: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    ignoreRoleOrganisations: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     multiple: {
       type: Boolean,
       required: false,
@@ -143,6 +122,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const { getMany: getManyRoleOrganisationTypes, fetching: fetchingRoleOrganisationTypes, entities: roleOrganisationTypes } = useRoleOrganisationTypes();
     const { getMany: getManyRoleOrganisations, fetching: fetchingRoleOrganisations, entities: roleOrganisations } = useRoleOrganisations();
+    const { $tr } = useTranslationsProvider();
 
     const roles = computed(() => {
       return roleOrganisationTypes.value.map(rot => ({
@@ -162,6 +142,13 @@ export default defineComponent({
       return init.value && (fetchingRoleOrganisationTypes.value || fetchingRoleOrganisations.value);
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("ui.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));
@@ -174,10 +161,14 @@ export default defineComponent({
     };
 
     const fetch = (search: string | null) => {
-      return Promise.all([
-        getManyRoleOrganisationTypes({ ...props.roleOrganisationTypeFilters, search: search ?? undefined }),
-        getManyRoleOrganisations({ ...props.roleOrganisationFilters, search: search ?? undefined })
-      ]);
+      const promises = [];
+      if (!props.ignoreRoleOrganisations) {
+        promises.push(getManyRoleOrganisations({ ...props.roleOrganisationFilters, search: search ?? undefined }));
+      }
+      if (!props.ignoreRoleOrganisationTypes) {
+        promises.push(getManyRoleOrganisationTypes({ ...props.roleOrganisationTypeFilters, search: search ?? undefined }));
+      }
+      return Promise.all(promises);
     };
 
     const { toggleSet, init, onUpdate } = useAutocomplete(
@@ -189,6 +180,7 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       toggleSet,
       RoleType,
       loading,

package/components/autocompletes/FSAutocompleteServiceAccountRoleOrganisation.vue

@@ -3,47 +3,20 @@
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :items="serviceAccountRoleOrganisations"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :modelValue="$props.modelValue"
     @update:modelValue="onUpdate"
     v-bind="$attrs"
   >
     <template
-      #autocomplete-selection="{ item }"
+      #item-prepend="{ item }"
     >
-      <FSRow
-        v-if="$props.modelValue"
-        align="center-center"
-        :wrap="false"
+      <FSIcon
+        v-if="item.icon"
       >
-        <FSIcon
-          v-if="item.raw.icon"
-        >
-          {{ item.raw.icon }}
-        </FSIcon>
-        <FSSpan>
-          {{ item.raw.label }}
-        </FSSpan>
-      </FSRow>
-    </template>
-    <template
-      #item-label="{ item, font }"
-    >
-      <FSRow
-        align="center-left"
-        :wrap="false"
-      >
-        <FSIcon
-          v-if="item.raw.icon"
-        >
-          {{ item.raw.icon }}
-        </FSIcon>
-        <FSSpan
-          :font="font"
-        >
-          {{ item.raw.label }}
-        </FSSpan>
-      </FSRow>
+        {{ item.icon }}
+      </FSIcon>
     </template>
   </FSAutocompleteField>
 </template>
@@ -51,26 +24,23 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { type ServiceAccountRoleOrganisationsFilters } from "@dative-gpi/foundation-core-domain/models";
+import { type ServiceAccountRoleOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useServiceAccountRoleOrganisations } 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 FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
-import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
-import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 export default defineComponent({
   name: "FSAutocompleteServiceAccountRoleOrganisation",
   components: {
     FSAutocompleteField,
-    FSIcon,
-    FSSpan,
-    FSRow
+    FSIcon
   },
   props: {
     serviceAccountRoleOrganisationsFilters: {
-      type: Object as PropType<ServiceAccountRoleOrganisationsFilters>,
+      type: Object as PropType<ServiceAccountRoleOrganisationFilters>,
       required: false,
       default: null
     },
@@ -93,11 +63,19 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyServiceAccountRoleOrganisations, fetching: fetchingServiceAccountRoleOrganisations, entities: serviceAccountRoleOrganisations } = useServiceAccountRoleOrganisations();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingServiceAccountRoleOrganisations.value;
     });
 
+    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 null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyServiceAccountRoleOrganisations({ ...props.serviceAccountRoleOrganisationsFilters, search: search ?? undefined })
     };
@@ -111,6 +89,7 @@ export default defineComponent({
 
     return {
       serviceAccountRoleOrganisations,
+      placeholder,
       toggleSet,
       loading,
       onUpdate

package/components/autocompletes/FSAutocompleteUserOrganisation.vue

@@ -3,6 +3,7 @@
     itemTitle="name"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :items="userOrganisations"
     :loading="loading"
     :modelValue="$props.modelValue"
@@ -10,50 +11,21 @@
     v-bind="$attrs"
   >
     <template
-      #autocomplete-selection="{ item }"
+      #item-prepend="{ item }"
     >
-      <FSRow
-        v-if="$props.modelValue"
-        align="center-center"
-        :wrap="false"
-      >
-        <FSImage
-          v-if="item.raw.imageId"
-          height="26px"
-          width="26px"
-          :imageId="item.raw.imageId"
-        />
-        <FSSpan>
-          {{ item.raw.name }}
-        </FSSpan>
-      </FSRow>
-    </template>
-    <template
-      #item-label="{ item, font }"
-    >
-      <FSRow
-        align="center-left"
-        :wrap="false"
-      >
-        <FSImage
-          v-if="item.raw.imageId"
-          height="26px"
-          width="26px"
-          :imageId="item.raw.imageId"
-        />
-        <FSSpan
-          :font="font"
-        >
-          {{ item.raw.name }}
-        </FSSpan>
-      </FSRow>
+      <FSImage
+        v-if="item.imageId"
+        height="26px"
+        width="26px"
+        :imageId="item.imageId"
+      />
     </template>
     <template
       #toggle-set-item="props"
     >
       <FSButton
+        :padding="props.item.imageId ? ['6px 16px', '4px 12px'] : undefined"
         :variant="props.getVariant(props.item)"
-        :padding="['6px 16px', '4px 12px']"
         :color="props.getColor(props.item)"
         :class="props.getClass(props.item)"
         :label="props.item.name"
@@ -80,21 +52,18 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type UserOrganisationFilters, type UserOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useUserOrganisations } 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 FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
 import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
 import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
-import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
-import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 export default defineComponent({
   name: "FSAutocompleteUserOrganisation",
   components: {
     FSAutocompleteField,
     FSButton,
-    FSImage,
-    FSSpan,
-    FSRow
+    FSImage
   },
   props: {
     userOrganisationFilters: {
@@ -121,10 +90,18 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyUserOrganisations, fetching: fetchingUserOrganisations, entities: userOrganisations } = useUserOrganisations();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingUserOrganisations.value;
     });
+
+    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 null;
+    });
     
     const fetch = (search: string | null) => {
       return getManyUserOrganisations({ ...props.userOrganisationFilters, search: search ?? undefined });
@@ -142,6 +119,7 @@ export default defineComponent({
 
     return {
       userOrganisations,
+      placeholder,
       toggleSet,
       loading,
       onUpdate

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-core-components",
   "sideEffects": false,
-  "version": "1.0.34",
+  "version": "1.0.36",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,11 +10,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-core-domain": "1.0.34",
-    "@dative-gpi/foundation-core-services": "1.0.34",
-    "@dative-gpi/foundation-shared-components": "1.0.34",
-    "@dative-gpi/foundation-shared-domain": "1.0.34",
-    "@dative-gpi/foundation-shared-services": "1.0.34"
+    "@dative-gpi/foundation-core-domain": "1.0.36",
+    "@dative-gpi/foundation-core-services": "1.0.36",
+    "@dative-gpi/foundation-shared-components": "1.0.36",
+    "@dative-gpi/foundation-shared-domain": "1.0.36",
+    "@dative-gpi/foundation-shared-services": "1.0.36"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -26,5 +26,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "c73eb4aecb216537fab5b040f85ecf0ccc06e752"
+  "gitHead": "687d6ae60b16a75dc332400cd6eee19cb306767b"
 }