@dative-gpi/foundation-core-components 1.0.27 → 1.0.28-remove-deprecated2

package/components/autocompletes/FSAutocompleteModel.vue

@@ -1,27 +1,71 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.model', 'Model')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :items="models"
     :modelValue="$props.modelValue"
     @update:modelValue="onUpdate"
     v-bind="$attrs"
-  />
+  >
+    <template
+      #item-prepend="{ item }"
+    >
+      <FSImage
+        v-if="item.imageId"
+        height="26px"
+        width="26px"
+        :imageId="item.imageId"
+        :thumbnail="true"
+      />
+    </template>
+    <template
+      #toggle-set-item="props"
+    >
+      <FSButton
+        :padding="props.item.imageId ? ['6px 16px', '4px 12px'] : undefined"
+        :variant="props.getVariant(props.item)"
+        :color="props.getColor(props.item)"
+        :class="props.getClass(props.item)"
+        :label="props.item.label"
+        @click="props.toggle(props.item)"
+      >
+        <template
+          v-if="props.item.imageId"
+          #prepend
+        >
+          <FSImage
+            height="26px"
+            width="26px"
+            :imageId="props.item.imageId"
+            :thumbnail="true"
+          />
+        </template>
+      </FSButton>
+    </template>
+  </FSAutocompleteField>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 import { type ModelFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useModels } from "@dative-gpi/foundation-core-services/composables";
 
 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";
 
 export default defineComponent({
   name: "FSAutocompleteModel",
   components: {
-    FSAutocompleteField
+    FSAutocompleteField,
+    FSButton,
+    FSImage
   },
   props: {
     modelFilters: {
@@ -34,20 +78,38 @@ export default defineComponent({
       required: false,
       default: null
     },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     toggleSetDisabled: {
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyModels, fetching: fetchingModels, entities: models } = useModels();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingModels.value;
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("autocomplete.model.placeholder", "{0} model(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyModels({ ...props.modelFilters, search: search ?? undefined });
     };
@@ -60,9 +122,10 @@ export default defineComponent({
     );
 
     return {
-      models,
+      placeholder,
       toggleSet,
       loading,
+      models,
       onUpdate
     };
   }

package/components/autocompletes/FSAutocompleteOrganisationType.vue

@@ -1,6 +1,9 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.organisation-type', 'Organisation type')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :multiple="$props.multiple"
+    :placeholder="placeholder"
     :items="organisationTypes"
     :loading="loading"
     :modelValue="$props.modelValue"
@@ -15,6 +18,7 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type OrganisationTypeFilters } from "@dative-gpi/foundation-shared-domain/models";
 import { useOrganisationTypes } 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";
 
@@ -34,20 +38,38 @@ export default defineComponent({
       required: false,
       default: null
     },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     toggleSetDisabled: {
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyOrganisationTypes, fetching: fetchingOrganisationTypes, entities: organisationTypes } = useOrganisationTypes();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingOrganisationTypes.value;
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("autocomplete.organisation-type.placeholder", "{0} organisation type(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyOrganisationTypes({ ...props.organisationTypeFilters, search: search ?? undefined });
     };
@@ -61,6 +83,7 @@ export default defineComponent({
 
     return {
       organisationTypes,
+      placeholder,
       toggleSet,
       loading,
       onUpdate

package/components/autocompletes/FSAutocompleteRole.vue

@@ -1,7 +1,9 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.role', 'Role')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :items="roles"
     :modelValue="$props.modelValue"
@@ -9,51 +11,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"
@@ -67,6 +40,7 @@
         @click="props.toggle(props.item)"
       >
         <template
+          v-if="props.item.type"
           #append
         >
           <FSChip
@@ -83,9 +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,8 +69,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",
@@ -102,9 +76,7 @@ export default defineComponent({
     FSAutocompleteField,
     FSButton,
     FSChip,
-    FSIcon,
-    FSSpan,
-    FSRow
+    FSIcon
   },
   props: {
     roleOrganisationTypeFilters: {
@@ -123,10 +95,20 @@ export default defineComponent({
       default: null
     },
     type: {
-      type: Number as PropType<RoleType>,
+      type: [Array, Number] as PropType<RoleType[] | RoleType>,
       required: false,
       default: RoleType.None
     },
+    ignoreRoleOrganisationTypes: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    ignoreRoleOrganisations: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     multiple: {
       type: Boolean,
       required: false,
@@ -136,12 +118,18 @@ 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();
+    const { $tr } = useTranslationsProvider();
 
     const roles = computed(() => {
       return roleOrganisationTypes.value.map(rot => ({
@@ -161,25 +149,40 @@ export default defineComponent({
       return init.value && (fetchingRoleOrganisationTypes.value || fetchingRoleOrganisations.value);
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        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 });
       }
     };
 
     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, search, init, onUpdate } = useAutocomplete(
+    const { toggleSet, init, onUpdate } = useAutocomplete(
       roles,
       [() => props.roleOrganisationTypeFilters, () => props.roleOrganisationFilters],
       emit,
@@ -188,10 +191,10 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       toggleSet,
       RoleType,
       loading,
-      search,
       roles,
       roleTypeColor,
       roleTypeLabel,

package/components/autocompletes/FSAutocompleteServiceAccountRoleOrganisation.vue

@@ -0,0 +1,105 @@
+<template>
+  <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.service-account-role', 'Service account role')"
+    :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :items="serviceAccountRoleOrganisations"
+    :multiple="$props.multiple"
+    :placeholder="placeholder"
+    :loading="loading"
+    :modelValue="$props.modelValue"
+    @update:modelValue="onUpdate"
+    v-bind="$attrs"
+  >
+    <template
+      #item-prepend="{ item }"
+    >
+      <FSIcon
+        v-if="item.icon"
+      >
+        {{ item.icon }}
+      </FSIcon>
+    </template>
+  </FSAutocompleteField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+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";
+
+export default defineComponent({
+  name: "FSAutocompleteServiceAccountRoleOrganisation",
+  components: {
+    FSAutocompleteField,
+    FSIcon
+  },
+  props: {
+    serviceAccountRoleOrganisationsFilters: {
+      type: Object as PropType<ServiceAccountRoleOrganisationFilters>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: [Array, String] as PropType<string[] | string | null>,
+      required: false,
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    toggleSetDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    }
+  },
+  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("autocomplete.service-account-role.placeholder", "{0} role(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
+    const fetch = (search: string | null) => {
+      return getManyServiceAccountRoleOrganisations({ ...props.serviceAccountRoleOrganisationsFilters, search: search ?? undefined })
+    };
+
+    const { toggleSet, init, onUpdate } = useAutocomplete(
+      serviceAccountRoleOrganisations,
+      [() => props.serviceAccountRoleOrganisationsFilters],
+      emit,
+      fetch
+    );
+
+    return {
+      serviceAccountRoleOrganisations,
+      placeholder,
+      toggleSet,
+      loading,
+      onUpdate
+    };
+  }
+});
+</script>

package/components/autocompletes/FSAutocompleteUserOrganisation.vue

@@ -1,8 +1,10 @@
 <template>
   <FSAutocompleteField
     itemTitle="name"
+    :label="$props.label ?? $tr('ui.common.user', 'User')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :items="userOrganisations"
     :loading="loading"
     :modelValue="$props.modelValue"
@@ -10,67 +12,38 @@
     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"
+        :thumbnail="true"
+      />
     </template>
     <template
       #toggle-set-item="props"
     >
       <FSButton
+        :padding="props.item.imageId ? ['6px 16px', '4px 12px'] : undefined"
         :variant="props.getVariant(props.item)"
         :color="props.getColor(props.item)"
         :class="props.getClass(props.item)"
+        :label="props.item.name"
         @click="props.toggle(props.item)"
       >
-        <FSRow
-          align="center-center"
-          :wrap="false"
+        <template
+          v-if="props.item.imageId"
+          #prepend
         >
           <FSImage
-            v-if="props.item.imageId"
             height="26px"
             width="26px"
             :imageId="props.item.imageId"
+            :thumbnail="true"
           />
-          <FSSpan>
-            {{ props.item.name }}
-          </FSSpan>
-        </FSRow>
+        </template>
       </FSButton>
     </template>
   </FSAutocompleteField>
@@ -82,21 +55,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: {
@@ -118,28 +88,34 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   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 toggleSetItems = computed((): any[] => {
-      return userOrganisations.value.map((userOrganisation: UserOrganisationInfos) => ({
-        id: userOrganisation.id,
-        label: userOrganisation.name
-      }));
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("autocomplete.user.placeholder", "{0} user(s) selected", props.modelValue.length);
+      }
+      return null;
     });
     
     const fetch = (search: string | null) => {
       return getManyUserOrganisations({ ...props.userOrganisationFilters, search: search ?? undefined });
     };
 
-    const { toggleSet, search, init, onUpdate } = useAutocomplete(
+    const { toggleSet, init, onUpdate } = useAutocomplete(
       userOrganisations,
       [() => props.userOrganisationFilters],
       emit,
@@ -151,10 +127,9 @@ export default defineComponent({
 
     return {
       userOrganisations,
-      toggleSetItems,
+      placeholder,
       toggleSet,
       loading,
-      search,
       onUpdate
     };
   }