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

package/components/autocompletes/FSAutocompleteChart.vue

@@ -1,7 +1,9 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.chart', 'Chart')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :items="charts"
     :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="chartOriginColor(item.raw.type)"
-          :label="chartOriginLabel(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="chartOriginColor(item.raw.type)"
-          :label="chartOriginLabel(item.raw.type)"
-          :editable="false"
-        />
-      </FSRow>
+      <FSChip
+        :color="chartOriginColor(item.type)"
+        :label="chartOriginLabel(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,18 +57,17 @@
 <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 { chartOriginColor, chartOriginLabel } from "../../utils";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
+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";
 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: "FSAutocompleteChart",
@@ -102,9 +75,7 @@ export default defineComponent({
     FSAutocompleteField,
     FSButton,
     FSChip,
-    FSIcon,
-    FSSpan,
-    FSRow
+    FSIcon
   },
   props: {
     chartOrganisationTypeFilters: {
@@ -123,10 +94,20 @@ export default defineComponent({
       default: null
     },
     type: {
-      type: Number as PropType<ChartOrigin>,
+      type: [Array, Number] as PropType<ChartOrigin[] | ChartOrigin>,
       required: false,
       default: ChartOrigin.None
     },
+    ignoreChartOrganisationTypes: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    ignoreChartOrganisations: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     multiple: {
       type: Boolean,
       required: false,
@@ -136,12 +117,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: getManyChartOrganisationTypes, fetching: fetchingChartOrganisationTypes, entities: chartOrganisationTypes } = useChartOrganisationTypes();
     const { getMany: getManyChartOrganisations, fetching: fetchingChartOrganisations, entities: chartOrganisations } = useChartOrganisations();
+    const { $tr } = useTranslationsProvider();
 
     const charts = computed(() => {
       return chartOrganisationTypes.value.map(rot => ({
@@ -161,25 +148,40 @@ export default defineComponent({
       return init.value && (fetchingChartOrganisationTypes.value || fetchingChartOrganisations.value);
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        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 });
       }
     };
 
     const fetch = (search: string | null) => {
-      return Promise.all([
-        getManyChartOrganisationTypes({ ...props.chartOrganisationTypeFilters, search: search ?? undefined }),
-        getManyChartOrganisations({ ...props.chartOrganisationFilters, search: search ?? undefined })
-      ]);
+      const promises = [];
+      if (!props.ignoreChartOrganisationTypes) {
+        promises.push(getManyChartOrganisationTypes({ ...props.chartOrganisationTypeFilters, search: search ?? undefined }));
+      }
+      if (!props.ignoreChartOrganisations) {
+        promises.push(getManyChartOrganisations({ ...props.chartOrganisationFilters, search: search ?? undefined }));
+      }
+      return Promise.all(promises);
     };
 
-    const { toggleSet, search, init, onUpdate } = useAutocomplete(
+    const { toggleSet, init, onUpdate } = useAutocomplete(
       charts,
       [() => props.chartOrganisationTypeFilters, () => props.chartOrganisationFilters],
       emit,
@@ -188,9 +190,9 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       toggleSet,
       loading,
-      search,
       charts,
       chartOriginColor,
       chartOriginLabel,

package/components/autocompletes/FSAutocompleteDashboard.vue

@@ -1,59 +1,32 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.dashboard', 'Dashboard')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
-    :loading="loading"
+    :placeholder="placeholder"
     :items="dashboards"
+    :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>
-        <FSChip
-          :color="dashboardTypeColor(item.raw.type)"
-          :label="dashboardTypeLabel(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="dashboardTypeColor(item.raw.type)"
-          :label="dashboardTypeLabel(item.raw.type)"
-          :editable="false"
-        />
-      </FSRow>
+      <FSChip
+        :color="dashboardTypeColor(item.type)"
+        :label="dashboardTypeLabel(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
@@ -86,16 +60,15 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type DashboardOrganisationFilters, type DashboardOrganisationTypeFilters, type DashboardShallowFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useDashboardOrganisations, useDashboardOrganisationTypes, useDashboardShallows } from "@dative-gpi/foundation-core-services/composables";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
-import { DashboardType } from "@dative-gpi/foundation-shared-domain/models";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 
+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";
 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({
@@ -104,9 +77,7 @@ export default defineComponent({
     FSAutocompleteField,
     FSButton,
     FSChip,
-    FSIcon,
-    FSSpan,
-    FSRow
+    FSIcon
   },
   props: {
     dashboardOrganisationTypeFilters: {
@@ -130,10 +101,20 @@ export default defineComponent({
       default: null
     },
     type: {
-      type: Number as PropType<DashboardType>,
+      type: [Array, Number] as PropType<DashboardType[] | DashboardType>,
       required: false,
       default: DashboardType.None
     },
+    ignoreDashboardOrganisationTypes: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    ignoreDashboardOrganisations: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     multiple: {
       type: Boolean,
       required: false,
@@ -143,13 +124,19 @@ 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();
     const { getMany: getManyDashboardShallows, fetching: fetchingDashboardShallows, entities: dashboardShallows } = useDashboardShallows();
+    const { $tr } = useTranslationsProvider();
 
     const dashboards = computed(() => {
       return dashboardOrganisationTypes.value.map(rot => ({
@@ -174,23 +161,38 @@ export default defineComponent({
       return init.value && (fetchingDashboardOrganisationTypes.value || fetchingDashboardOrganisations.value || fetchingDashboardShallows.value);
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        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 });
       }
     };
 
     const fetch = (search: string | null) => {
-      return Promise.all([
-        getManyDashboardOrganisationTypes({ ...props.dashboardOrganisationTypeFilters, search: search ?? undefined }),
-        getManyDashboardOrganisations({ ...props.dashboardOrganisationFilters, search: search ?? undefined }),
-        getManyDashboardShallows({ ...props.dashboardShallowFilters, search: search ?? undefined })
-      ]);
+      const promises = [];
+      if (!props.ignoreDashboardOrganisationTypes) {
+        promises.push(getManyDashboardOrganisationTypes({ ...props.dashboardOrganisationTypeFilters, search: search ?? undefined }));
+      }
+      if (!props.ignoreDashboardOrganisations) {
+        promises.push(getManyDashboardOrganisations({ ...props.dashboardOrganisationFilters, search: search ?? undefined }));
+        promises.push(getManyDashboardShallows({ ...props.dashboardShallowFilters, search: search ?? undefined }));
+      }
+      return Promise.all(promises);
     };
 
     const { toggleSet, init, onUpdate } = useAutocomplete(
@@ -202,6 +204,7 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       dashboards,
       toggleSet,
       loading,

package/components/autocompletes/FSAutocompleteDashboardOrganisation.vue

@@ -1,48 +1,23 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.dashboard', 'Dashboard')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
-    :loading="loading"
     :items="dashboardOrganisations"
+    :multiple="$props.multiple"
+    :placeholder="placeholder"
+    :loading="loading"
     :modelValue="$props.modelValue"
     @update:modelValue="onUpdate"
     v-bind="$attrs"
   >
     <template
-      #autocomplete-selection="{ item }"
-    >
-      <FSRow
-        v-if="$props.modelValue"
-        align="center-center"
-        :wrap="false"
-      >
-        <FSIcon
-          v-if="item.raw.icon"
-        >
-          {{ item.raw.icon }}
-        </FSIcon>
-        <FSSpan>
-          {{ item.raw.label }}
-        </FSSpan>
-      </FSRow>
-    </template>
-    <template
-      #item-label="{ item, font }"
+      #item-prepend="{ item }"
     >
-      <FSRow
-        align="center-left"
-        :wrap="false"
+      <FSIcon
+        v-if="item.icon"
       >
-        <FSIcon
-          v-if="item.raw.icon"
-        >
-          {{ item.raw.icon }}
-        </FSIcon>
-        <FSSpan
-          :font="font"
-        >
-          {{ item.raw.label }}
-        </FSSpan>
-      </FSRow>
+        {{ item.icon }}
+      </FSIcon>
     </template>
   </FSAutocompleteField>
 </template>
@@ -53,20 +28,17 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type DashboardOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useDashboardOrganisations } 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: "FSAutocompleteDashboard",
   components: {
     FSAutocompleteField,
-    FSIcon,
-    FSSpan,
-    FSRow
+    FSIcon
   },
   props: {
     dashboardOrganisationFilters: {
@@ -79,20 +51,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: getManyDashboardOrganisations, fetching: fetchingDashboardOrganisations, entities: dashboardOrganisations } = useDashboardOrganisations();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingDashboardOrganisations.value;
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("autocomplete.dashboard.placeholder", "{0} dashboard(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyDashboardOrganisations({ ...props.dashboardOrganisationFilters, search: search ?? undefined });
     };
@@ -106,6 +96,7 @@ export default defineComponent({
 
     return {
       dashboardOrganisations,
+      placeholder,
       toggleSet,
       loading,
       onUpdate