@dative-gpi/foundation-core-components 1.0.29 → 1.0.31

package/components/autocompletes/FSAutocompleteChart.vue

@@ -67,6 +67,7 @@
         @click="props.toggle(props.item)"
       >
         <template
+          v-if="props.item.type"
           #append
         >
           <FSChip
@@ -179,7 +180,7 @@ export default defineComponent({
       ]);
     };
 
-    const { toggleSet, search, init, onUpdate } = useAutocomplete(
+    const { toggleSet, init, onUpdate } = useAutocomplete(
       charts,
       [() => props.chartOrganisationTypeFilters, () => props.chartOrganisationFilters],
       emit,
@@ -190,7 +191,6 @@ export default defineComponent({
     return {
       toggleSet,
       loading,
-      search,
       charts,
       chartOriginColor,
       chartOriginLabel,

package/components/autocompletes/FSAutocompleteDashboard.vue

@@ -67,6 +67,7 @@
         @click="props.toggle(props.item)"
       >
         <template
+          v-if="props.item.type"
           #append
         >
           <FSChip

package/components/autocompletes/FSAutocompleteDataCategory.vue

@@ -14,16 +14,31 @@
       <FSRow
         v-if="$props.modelValue"
         align="center-center"
+        padding="0 8px 0 0"
+        gap="4px"
         :wrap="false"
       >
-        <FSIcon>
-          {{ item.raw.correlated ? 'mdi-link' : 'mdi-link-off' }}
-        </FSIcon>
         <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
+    >
+      <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'"
+      />
+    </template>
     <template
       #item-label="{ item, font }"
     >
@@ -31,20 +46,23 @@
         align="center-left"
         :wrap="false"
       >
-        <FSIcon>
-          {{ item.raw.correlated ? 'mdi-link' : 'mdi-link-off' }}
-        </FSIcon>
         <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)"
@@ -59,14 +77,16 @@
 <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 { 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({
@@ -76,6 +96,7 @@ export default defineComponent({
     FSButton,
     FSIcon,
     FSSpan,
+    FSChip,
     FSRow
   },
   props: {
@@ -108,6 +129,13 @@ export default defineComponent({
       return init.value && fetchingDataCategories.value;
     });
 
+    const selected = computed((): DataCategoryInfos | undefined => {
+      if (props.multiple) {
+        return undefined;
+      }
+      return dataCategories.value.find((dataCategory: DataCategoryInfos) => dataCategory.id === props.modelValue);
+    });
+
     const fetch = (search: string | null) => {
       return getManyDataCategories({ ...props.dataCategoriesFilters, search: search ?? undefined });
     };
@@ -121,7 +149,9 @@ export default defineComponent({
 
     return {
       dataCategories,
+      ColorEnum,
       toggleSet,
+      selected,
       loading,
       onUpdate
     };

package/components/autocompletes/FSAutocompleteDataDefinition.vue

@@ -14,16 +14,26 @@
       <FSRow
         v-if="$props.modelValue"
         align="center-center"
+        padding="0 8px 0 0"
+        gap="4px"
         :wrap="false"
       >
-        <FSChip
-          v-if="item.raw.unit"
-          :label="item.raw.unit"
-        />
         <FSSpan>
           {{ item.raw.label }}
         </FSSpan>
-      </FSRow>
+        <FSChip
+          v-if="$props.multiple && item.raw.unit"
+          :label="item.raw.unit"
+        />
+      </FSRow> 
+    </template>
+    <template
+      v-if="selected && selected.unit"
+      #autocomplete-suffix
+    >
+      <FSChip
+        :label="selected.unit"
+      />
     </template>
     <template
       #item-label="{ item, font }"
@@ -32,15 +42,15 @@
         align="center-left"
         :wrap="false"
       >
-        <FSChip
-          v-if="item.raw.unit"
-          :label="item.raw.unit"
-        />
         <FSSpan
           :font="font"
         >
           {{ item.raw.label }}
         </FSSpan>
+        <FSChip
+          v-if="item.raw.unit"
+          :label="item.raw.unit"
+        />
       </FSRow>
     </template>
     <template
@@ -54,10 +64,10 @@
         @click="props.toggle(props.item)"
       >
         <template
-          #prepend
+          v-if="props.item.unit"
+          #append
         >
           <FSChip
-            v-if="props.item.unit"
             :label="props.item.unit"
           />
         </template>
@@ -69,7 +79,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { type DataDefinitionFilters } from "@dative-gpi/foundation-core-domain/models";
+import { type DataDefinitionInfos, type DataDefinitionFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { useDataDefinitions } from "@dative-gpi/foundation-core-services/composables";
 
@@ -118,6 +128,13 @@ export default defineComponent({
       return init.value && fetchingDataDefinitions.value;
     });
 
+    const selected = computed((): DataDefinitionInfos | undefined => {
+      if (props.multiple) {
+        return undefined;
+      }
+      return dataDefinitions.value.find((dataDefinition: DataDefinitionInfos) => dataDefinition.id === props.modelValue);
+    });
+
     const fetch = (search: string | null) => {
       return getManyDataDefinitions({ ...props.dataDefinitionFilters, search: search ?? undefined });
     };
@@ -132,6 +149,7 @@ export default defineComponent({
     return {
       dataDefinitions,
       toggleSet,
+      selected,
       loading,
       onUpdate
     };

package/components/autocompletes/FSAutocompleteModel.vue

@@ -60,9 +60,9 @@ export default defineComponent({
     );
 
     return {
-      models,
       toggleSet,
       loading,
+      models,
       onUpdate
     };
   }

package/components/autocompletes/FSAutocompleteRole.vue

@@ -67,6 +67,7 @@
         @click="props.toggle(props.item)"
       >
         <template
+          v-if="props.item.type"
           #append
         >
           <FSChip
@@ -179,7 +180,7 @@ export default defineComponent({
       ]);
     };
 
-    const { toggleSet, search, init, onUpdate } = useAutocomplete(
+    const { toggleSet, init, onUpdate } = useAutocomplete(
       roles,
       [() => props.roleOrganisationTypeFilters, () => props.roleOrganisationFilters],
       emit,
@@ -191,7 +192,6 @@ export default defineComponent({
       toggleSet,
       RoleType,
       loading,
-      search,
       roles,
       roleTypeColor,
       roleTypeLabel,

package/components/autocompletes/FSAutocompleteServiceAccountRoleOrganisation.vue

@@ -0,0 +1,120 @@
+<template>
+  <FSAutocompleteField
+    :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :items="serviceAccountRoleOrganisations"
+    :multiple="$props.multiple"
+    :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 }"
+    >
+      <FSRow
+        align="center-left"
+        :wrap="false"
+      >
+        <FSIcon
+          v-if="item.raw.icon"
+        >
+          {{ item.raw.icon }}
+        </FSIcon>
+        <FSSpan
+          :font="font"
+        >
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
+    </template>
+  </FSAutocompleteField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { type ServiceAccountRoleOrganisationsFilters } 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 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
+  },
+  props: {
+    serviceAccountRoleOrganisationsFilters: {
+      type: Object as PropType<ServiceAccountRoleOrganisationsFilters>,
+      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
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { getMany: getManyServiceAccountRoleOrganisations, fetching: fetchingServiceAccountRoleOrganisations, entities: serviceAccountRoleOrganisations } = useServiceAccountRoleOrganisations();
+
+    const loading = computed((): boolean => {
+      return init.value && fetchingServiceAccountRoleOrganisations.value;
+    });
+
+    const fetch = (search: string | null) => {
+      return getManyServiceAccountRoleOrganisations({ ...props.serviceAccountRoleOrganisationsFilters, search: search ?? undefined })
+    };
+
+    const { toggleSet, init, onUpdate } = useAutocomplete(
+      serviceAccountRoleOrganisations,
+      [() => props.serviceAccountRoleOrganisationsFilters],
+      emit,
+      fetch
+    );
+
+    return {
+      serviceAccountRoleOrganisations,
+      toggleSet,
+      loading,
+      onUpdate
+    };
+  }
+});
+</script>

package/components/autocompletes/FSAutocompleteUserOrganisation.vue

@@ -53,24 +53,22 @@
     >
       <FSButton
         :variant="props.getVariant(props.item)"
+        :padding="['6px 16px', '4px 12px']"
         :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"
           />
-          <FSSpan>
-            {{ props.item.name }}
-          </FSSpan>
-        </FSRow>
+        </template>
       </FSButton>
     </template>
   </FSAutocompleteField>
@@ -127,19 +125,12 @@ export default defineComponent({
     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 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 +142,8 @@ export default defineComponent({
 
     return {
       userOrganisations,
-      toggleSetItems,
       toggleSet,
       loading,
-      search,
       onUpdate
     };
   }

package/package.json

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

package/components/selects/FSDataCategorySelector.vue

@@ -1,139 +0,0 @@
-<template>
-  <FSAutocompleteField
-    :width="$props.width ? $props.width : '100%'"
-    :label="label ?? $tr('ui.common.data-category', 'Data category')"
-    :items="toggleDataCategories"
-    :modelValue="modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs"
-  >
-    <template
-      #autocomplete-selection="{item}"
-    >
-      <FSRow
-        :wrap="false"
-        align="center-center"
-        :width="$props.width ? $props.width : '100vh'"
-      >
-        <FSCol>
-          <FSText>
-            {{ item.raw.label }}
-          </FSText>
-        </FSCol>
-        <FSRow>
-          <FSRow
-            align="center-right"
-          >
-            <FSChip
-              :label="item.raw.unit"
-              :color="item.raw.correlated ? ColorEnum.Success : ColorEnum.Warning"
-            >
-              <FSRow
-                v-if="item.raw.correlated"
-                align="center-center"
-                :wrap="false"
-              >
-                <FSIcon
-                  icon="mdi-link"
-                  size="16px"
-                />
-                <FSText
-                  font="text-overline"
-                >
-                  {{ $tr('ui.common.linked', 'Linked') }}
-                </FSText>
-              </FSRow>
-              <FSRow
-                v-else
-                align="center-center"
-                :wrap="false"
-              >
-                <FSIcon
-                  icon="mdi-link-off"
-                  size="16px"
-                />
-                <FSSpan
-                  font="text-overline"
-                >
-                  {{ $tr('ui.common.not-linked', 'Not linked') }}
-                </FSSpan>
-              </FSRow>
-            </FSChip>
-          </FSRow>
-        </FSRow>
-      </FSRow>
-    </template></FSAutocompleteField>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, watch } from "vue";
-
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-
-import {useDataCategories} from "@dative-gpi/foundation-core-services/composables";
-
-import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
-import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
-import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
-import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
-import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
-import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
-import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
-
-
-export default defineComponent({
-  components: {
-    FSAutocompleteField,
-    FSChip,
-    FSRow,
-    FSCol,
-    FSText,
-    FSIcon,
-    FSSpan
-  },
-  props:{
-    modelValue: {
-      type: String,
-      required: false
-    },
-    modelId: {
-      type: String,
-      required: false,
-    },
-    label: {
-      type: String,
-      required: false
-    },
-    width: {
-      type: String,
-      required: false
-    }
-  },
-  emits: ['update:modelValue'],
-  setup(props) {
-    const {getMany : fetchdataCategories, entities : dataCategories} = useDataCategories()
-
-    const toggleDataCategories = computed(()=>{
-      return dataCategories.value.map((d) => {
-        return {
-          id: d.id,
-          label: d.label,
-          correlated: d.correlated
-        }
-      })
-    })
-
-    watch(() => props.modelId, () => {
-      fetchdataCategories({modelId: props.modelId})
-    }, {immediate: true})
-
-
-    return {
-      ColorEnum,
-      toggleDataCategories,
-      dataCategories
-    }
-  }
-})
-
-</script>

package/components/selects/FSDataDefinitionSelector.vue

@@ -1,105 +0,0 @@
-<template>
-  <FSAutocompleteField
-    :width="$props.width ? $props.width : '100%'"
-    :label="label ?? $tr('ui.common.data-definition', 'Data')"
-    :items="toggleDataDefinitions"
-    :modelValue="modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs"
-  >
-    <template
-      #autocomplete-selection="{item}"
-    >
-      <FSRow
-        :wrap="false"
-        align="center-center"
-        :width="$props.width ? $props.width : '100vh'"
-      >
-        <FSCol>
-          <FSText>
-            {{ item.raw.label }}
-          </FSText>
-        </FSCol>
-        <FSRow
-          v-if="item.raw.showUnit"
-        >
-          <FSRow
-            align="center-right"
-          >
-            <FSChip
-              :label="item.raw.unit"
-            />
-          </FSRow>
-        </FSRow>
-      </FSRow>
-    </template>
-  </FSAutocompleteField>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, watch } from "vue";
-
-import {useDataDefinitions} from "@dative-gpi/foundation-core-services/composables";
-
-import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
-import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
-import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
-import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
-
-export default defineComponent({
-  components: {
-    FSAutocompleteField,
-    FSChip,
-    FSRow,
-    FSCol,
-  },
-  props:{
-    modelValue: {
-      type: String,
-      required: false
-    },
-    modelId: {
-      type: String,
-      required: false,
-    },
-    dataCategoryId: {
-      type: String,
-      required: false,
-    },
-    label: {
-      type: String,
-      required: false
-    },
-    width : {
-      type: String,
-      required: false
-    }
-  },
-  emits: ['update:modelValue'],
-  setup(props) {
-
-    const {getMany : fetchDataDefinitions, entities : dataDefinitions} = useDataDefinitions()
-
-    const toggleDataDefinitions = computed(()=>{
-      return dataDefinitions.value.map((d) => {
-        return {
-          id: d.id,
-          label: d.label,
-          showUnit : d.unit && d.unit.trim().length > 0,
-          unit : d.unit,
-        }
-      })
-    })
-
-    watch(() => [props.modelId, props.dataCategoryId], async () => {
-      await fetchDataDefinitions({modelsIds: props.modelId ? [props.modelId] : undefined, dataCategoryId: props.dataCategoryId})
-    }, {immediate: true})
-
-    return {
-      toggleDataDefinitions,
-      dataDefinitions
-    }
-  }
-})
-
-</script>

package/components/selects/FSModelSelector.vue

@@ -1,56 +0,0 @@
-<template>
-  <FSAutocompleteField
-    :label="label ?? $tr('ui.common.model', 'Model')"
-    :items="modelItems"
-    :toggleSet="modelItems.length < 5"
-    :modelValue="modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs"
-  />
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, onMounted } from "vue";
-
-import {useModels} from "@dative-gpi/foundation-core-services/composables";
-
-import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
-
-export default defineComponent({
-  components: {
-    FSAutocompleteField
-  },
-  props:{
-    modelValue: {
-      type: String,
-      required: false
-    },
-    label: {
-      type: String,
-      required: false
-    }
-  },
-  emits: ['update:modelValue'],
-  setup(){
-    const {getMany : fetchModels, entities : models} = useModels()
-
-    const modelItems = computed(()=>{
-      return models.value.map((d) => {
-        return {
-          id: d.id,
-          label: d.label
-        }
-      })
-    })
-
-    onMounted(() => {
-      fetchModels()
-    })
-
-    return {
-      modelItems,
-    }
-  }
-})
-
-</script>