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

package/components/autocompletes/FSAutocompleteChart.vue

@@ -2,6 +2,7 @@
   <FSAutocompleteField
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :items="charts"
     :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="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"
@@ -87,6 +59,7 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type ChartOrganisationFilters, ChartOrigin, type ChartOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useChartOrganisations, useChartOrganisationTypes } 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 { chartOriginColor, chartOriginLabel } 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: "FSAutocompleteChart",
@@ -103,9 +74,7 @@ export default defineComponent({
     FSAutocompleteField,
     FSButton,
     FSChip,
-    FSIcon,
-    FSSpan,
-    FSRow
+    FSIcon
   },
   props: {
     chartOrganisationTypeFilters: {
@@ -128,6 +97,16 @@ export default defineComponent({
       required: false,
       default: ChartOrigin.None
     },
+    ignoreChartOrganisationTypes: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    ignoreChartOrganisations: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     multiple: {
       type: Boolean,
       required: false,
@@ -143,6 +122,7 @@ export default defineComponent({
   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 => ({
@@ -162,6 +142,13 @@ export default defineComponent({
       return init.value && (fetchingChartOrganisationTypes.value || fetchingChartOrganisations.value);
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("ui.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));
@@ -174,10 +161,14 @@ export default defineComponent({
     };
 
     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, init, onUpdate } = useAutocomplete(
@@ -189,6 +180,7 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       toggleSet,
       loading,
       charts,

package/components/autocompletes/FSAutocompleteDashboard.vue

@@ -2,58 +2,30 @@
   <FSAutocompleteField
     :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"
@@ -87,6 +59,7 @@ 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 { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 import { DashboardType } from "@dative-gpi/foundation-shared-domain/models";
 
 import { dashboardTypeColor, dashboardTypeLabel } from "../../utils";
@@ -95,8 +68,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({
@@ -105,9 +76,7 @@ export default defineComponent({
     FSAutocompleteField,
     FSButton,
     FSChip,
-    FSIcon,
-    FSSpan,
-    FSRow
+    FSIcon
   },
   props: {
     dashboardOrganisationTypeFilters: {
@@ -135,6 +104,16 @@ export default defineComponent({
       required: false,
       default: DashboardType.None
     },
+    ignoreDashboardOrganisationTypes: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    ignoreDashboardOrganisations: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     multiple: {
       type: Boolean,
       required: false,
@@ -151,6 +130,7 @@ export default defineComponent({
     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 => ({
@@ -175,6 +155,13 @@ export default defineComponent({
       return init.value && (fetchingDashboardOrganisationTypes.value || fetchingDashboardOrganisations.value || fetchingDashboardShallows.value);
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("ui.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));
@@ -187,11 +174,15 @@ export default defineComponent({
     };
 
     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(
@@ -203,6 +194,7 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       dashboards,
       toggleSet,
       loading,

package/components/autocompletes/FSAutocompleteDashboardOrganisation.vue

@@ -1,48 +1,22 @@
 <template>
   <FSAutocompleteField
     :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 +27,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,6 +50,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     toggleSetDisabled: {
       type: Boolean,
       required: false,
@@ -88,11 +64,19 @@ export default defineComponent({
   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("ui.autocomplete-dashboard-organisation.placeholder", "{0} dashboard(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyDashboardOrganisations({ ...props.dashboardOrganisationFilters, search: search ?? undefined });
     };
@@ -106,6 +90,7 @@ export default defineComponent({
 
     return {
       dashboardOrganisations,
+      placeholder,
       toggleSet,
       loading,
       onUpdate

package/components/autocompletes/FSAutocompleteDataCategory.vue

@@ -2,6 +2,7 @@
   <FSAutocompleteField
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :items="dataCategories"
     :loading="loading"
     :modelValue="$props.modelValue"
@@ -9,67 +10,48 @@
     v-bind="$attrs"
   >
     <template
-      #autocomplete-selection="{ item }"
-    >
-      <FSRow
-        v-if="$props.modelValue"
-        align="center-center"
-        padding="0 8px 0 0"
-        gap="4px"
-        :wrap="false"
-      >
-        <FSSpan>
-          {{ item.raw.label }}
-        </FSSpan>
-        <FSIcon
-          v-if="$props.multiple"
-          :color="item.raw.correlated ? ColorEnum.Success : ColorEnum.Warning"
-        >
-          {{ item.raw.correlated ? 'mdi-link' : 'mdi-link-off' }}
-        </FSIcon>
-      </FSRow>
-    </template>
-    <template
-      v-if="selected"
-      #autocomplete-suffix
+      #item-append="{ item }"
     >
       <FSChip
-        :label="selected.correlated ? $tr('ui.common.linked','Linked') : $tr('ui.common.not-linked','Not linked')"
-        :color="selected.correlated ? ColorEnum.Success : ColorEnum.Warning"
-        :prependIcon="selected.correlated ? 'mdi-link' : 'mdi-link-off'"
+        v-if="item.correlated"
+        prependIcon="mdi-link"
+        :label="$tr('ui.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')"
+        :color="ColorEnum.Warning"
       />
-    </template>
-    <template
-      #item-label="{ item, font }"
-    >
-      <FSRow
-        align="center-left"
-        :wrap="false"
-      >
-        <FSSpan
-          :font="font"
-        >
-          {{ item.raw.label }}
-        </FSSpan>
-        <FSIcon
-          :color="item.raw.correlated ? ColorEnum.Success : ColorEnum.Warning"
-        >
-          {{ item.raw.correlated ? 'mdi-link' : 'mdi-link-off' }}
-        </FSIcon>
-      </FSRow>
     </template>
     <template
       #toggle-set-item="props"
     >
       <FSButton
-        :iconColor="props.item.correlated ? ColorEnum.Success : ColorEnum.Warning"
-        :prependIcon="props.item.correlated ? 'mdi-link' : 'mdi-link-off'"
         :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
+          #append
+        >
+          <FSChip
+            v-if="props.item.correlated"
+            prependIcon="mdi-link"
+            :label="$tr('ui.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')"
+            :color="ColorEnum.Warning"
+          />
+        </template>
+      </FSButton>
     </template>
   </FSAutocompleteField>
 </template>
@@ -77,27 +59,22 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { type DataCategoryInfos, type DataCategoryFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { type DataCategoryFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useDataCategories } from "@dative-gpi/foundation-core-services/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
 import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
-import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
-import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
 import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
-import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 export default defineComponent({
   name: "FSAutocompleteDataCategory",
   components: {
     FSAutocompleteField,
     FSButton,
-    FSIcon,
-    FSSpan,
-    FSChip,
-    FSRow
+    FSChip
   },
   props: {
     dataCategoriesFilters: {
@@ -124,16 +101,17 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyDataCategories, fetching: fetchingDataCategories, entities: dataCategories } = useDataCategories();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingDataCategories.value;
     });
 
-    const selected = computed((): DataCategoryInfos | undefined => {
-      if (props.multiple) {
-        return undefined;
+    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 dataCategories.value.find((dataCategory: DataCategoryInfos) => dataCategory.id === props.modelValue);
+      return null;
     });
 
     const fetch = (search: string | null) => {
@@ -149,9 +127,9 @@ export default defineComponent({
 
     return {
       dataCategories,
+      placeholder,
       ColorEnum,
       toggleSet,
-      selected,
       loading,
       onUpdate
     };