@dative-gpi/foundation-core-components 0.1.120 → 1.0.0

package/components/autocompletes/FSAutocompleteChart.vue

@@ -0,0 +1,208 @@
+<template>
+  <FSAutocompleteField
+    :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :multiple="$props.multiple"
+    :loading="loading"
+    :items="charts"
+    :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>
+        <FSChip
+          :color="chartOriginColor(item.raw.type)"
+          :label="chartOriginLabel(item.raw.type)"
+          :editable="false"
+        />
+      </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>
+        <FSChip
+          :color="chartOriginColor(item.raw.type)"
+          :label="chartOriginLabel(item.raw.type)"
+          :editable="false"
+        />
+      </FSRow>
+    </template>
+    <template
+      #toggle-set-item="props"
+    >
+      <FSButton
+        :prependIcon="props.item.icon"
+        :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
+            :color="chartOriginColor(props.item.type)"
+            :label="chartOriginLabel(props.item.type)"
+            :editable="false"
+          />
+        </template>
+      </FSButton>
+    </template>
+  </FSAutocompleteField>
+</template>
+
+<script lang="ts">
+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 { chartOriginColor, chartOriginLabel } 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({
+  name: "FSAutocompleteChart",
+  components: {
+    FSAutocompleteField,
+    FSButton,
+    FSChip,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    chartOrganisationTypeFilters: {
+      type: Object as PropType<ChartOrganisationTypeFilters>,
+      required: false,
+      default: null
+    },
+    chartOrganisationFilters: {
+      type: Object as PropType<ChartOrganisationFilters>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: [Array, String] as PropType<string[] | string | null>,
+      required: false,
+      default: null
+    },
+    type: {
+      type: Number as PropType<ChartOrigin>,
+      required: false,
+      default: ChartOrigin.None
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    toggleSetDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "update:type"],
+  setup(props, { emit }) {
+    const { getMany: getManyChartOrganisationTypes, fetching: fetchingChartOrganisationTypes, entities: chartOrganisationTypes } = useChartOrganisationTypes();
+    const { getMany: getManyChartOrganisations, fetching: fetchingChartOrganisations, entities: chartOrganisations } = useChartOrganisations();
+
+    const charts = computed(() => {
+      return chartOrganisationTypes.value.map(rot => ({
+        id: rot.id,
+        icon: rot.icon,
+        label: rot.label,
+        type: ChartOrigin.OrganisationType
+      })).concat(chartOrganisations.value.map(ro => ({
+        id: ro.id,
+        icon: ro.icon,
+        label: ro.label,
+        type: ChartOrigin.Organisation
+      })));
+    });
+
+    const loading = computed((): boolean => {
+      return init.value && (fetchingChartOrganisationTypes.value || fetchingChartOrganisations.value);
+    });
+
+    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));
+      }
+      else {
+        emit("update:modelValue", value?.id);
+        emit("update:type", value?.type);
+      }
+    };
+
+    const fetch = (search: string | null) => {
+      return Promise.all([
+        getManyChartOrganisationTypes({ ...props.chartOrganisationTypeFilters, search: search ?? undefined }),
+        getManyChartOrganisations({ ...props.chartOrganisationFilters, search: search ?? undefined })
+      ]);
+    };
+
+    const { toggleSet, search, init, onUpdate } = useAutocomplete(
+      charts,
+      [() => props.chartOrganisationTypeFilters, () => props.chartOrganisationFilters],
+      emit,
+      fetch,
+      update
+    );
+
+    return {
+      toggleSet,
+      loading,
+      search,
+      charts,
+      chartOriginColor,
+      chartOriginLabel,
+      onUpdate
+    };
+  }
+});
+
+interface Chart {
+  id: string;
+  icon: string;
+  label: string;
+  type: ChartOrigin;
+}
+</script>

package/components/autocompletes/FSAutocompleteDashboard.vue

@@ -32,35 +32,28 @@
       </FSRow>
     </template>
     <template
-      #autocomplete-item="{ props, item }"
+      #item-label="{ item, font }"
     >
-      <v-list-item
-        v-bind="{ ...props, title: '' }"
+      <FSRow
+        align="center-left"
+        :wrap="false"
       >
-        <FSRow
-          align="center-left"
-          :wrap="false"
+        <FSIcon
+          v-if="item.raw.icon"
         >
-          <FSCheckbox
-            v-if="$props.multiple"
-            :modelValue="$props.modelValue?.includes(item.value)"
-            @click="props.onClick"
-          />
-          <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>
-      </v-list-item>
+          {{ 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>
     </template>
     <template
       #toggle-set-item="props"
@@ -88,16 +81,16 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DashboardShallowFilters, DashboardType } from "@dative-gpi/foundation-core-domain/models";
+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 { dashboardTypeColor, dashboardTypeLabel } from "../../utils";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
-import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.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";
@@ -109,7 +102,6 @@ export default defineComponent({
   name: "FSAutocompleteDashboard",
   components: {
     FSAutocompleteField,
-    FSCheckbox,
     FSButton,
     FSChip,
     FSIcon,
@@ -137,6 +129,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    type: {
+      type: Number as PropType<DashboardType>,
+      required: false,
+      default: DashboardType.None
+    },
     multiple: {
       type: Boolean,
       required: false,
@@ -177,7 +174,7 @@ export default defineComponent({
       return init.value && (fetchingDashboardOrganisationTypes.value || fetchingDashboardOrganisations.value || fetchingDashboardShallows.value);
     });
 
-    const innerUpdate = (value: Dashboard[] | Dashboard | 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));
@@ -188,7 +185,7 @@ export default defineComponent({
       }
     };
 
-    const innerFetch = (search: string | null) => {
+    const fetch = (search: string | null) => {
       return Promise.all([
         getManyDashboardOrganisationTypes({ ...props.dashboardOrganisationTypeFilters, search: search ?? undefined }),
         getManyDashboardOrganisations({ ...props.dashboardOrganisationFilters, search: search ?? undefined }),
@@ -196,19 +193,18 @@ export default defineComponent({
       ]);
     };
 
-    const { toggleSet, search, init, onUpdate } = useAutocomplete(
+    const { toggleSet, init, onUpdate } = useAutocomplete(
       dashboards,
       [() => props.dashboardOrganisationTypeFilters, () => props.dashboardOrganisationFilters, () => props.dashboardShallowFilters],
       emit,
-      innerFetch,
-      innerUpdate
+      fetch,
+      update
     );
 
     return {
+      dashboards,
       toggleSet,
       loading,
-      search,
-      dashboards,
       dashboardTypeColor,
       dashboardTypeLabel,
       onUpdate

package/components/autocompletes/FSAutocompleteDashboardOrganisation.vue

@@ -0,0 +1,115 @@
+<template>
+  <FSAutocompleteField
+    :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :loading="loading"
+    :items="dashboardOrganisations"
+    :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 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 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
+  },
+  props: {
+    dashboardOrganisationFilters: {
+      type: Object as PropType<DashboardOrganisationFilters>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: [Array, String] as PropType<string[] | string | null>,
+      required: false,
+      default: null
+    },
+    toggleSetDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { getMany: getManyDashboardOrganisations, fetching: fetchingDashboardOrganisations, entities: dashboardOrganisations } = useDashboardOrganisations();
+
+    const loading = computed((): boolean => {
+      return init.value && fetchingDashboardOrganisations.value;
+    });
+
+    const fetch = (search: string | null) => {
+      return getManyDashboardOrganisations({ ...props.dashboardOrganisationFilters, search: search ?? undefined });
+    };
+
+    const { toggleSet, init, onUpdate } = useAutocomplete(
+      dashboardOrganisations,
+      [() => props.dashboardOrganisationFilters],
+      emit,
+      fetch
+    );
+
+    return {
+      dashboardOrganisations,
+      toggleSet,
+      loading,
+      onUpdate
+    };
+  }
+});
+</script>

package/components/autocompletes/FSAutocompleteDataCategory.vue

@@ -25,28 +25,21 @@
       </FSRow>
     </template>
     <template
-      #autocomplete-item="{ props, item }"
+      #item-label="{ item, font }"
     >
-      <v-list-item
-        v-bind="{ ...props, title: '' }"
+      <FSRow
+        align="center-left"
+        :wrap="false"
       >
-        <FSRow
-          align="center-left"
-          :wrap="false"
+        <FSIcon>
+          {{ item.raw.correlated ? 'mdi-link' : 'mdi-link-off' }}
+        </FSIcon>
+        <FSSpan
+          :font="font"
         >
-          <FSCheckbox
-            v-if="$props.multiple"
-            :modelValue="$props.modelValue?.includes(item.value)"
-            @click="props.onClick"
-          />
-          <FSIcon>
-            {{ item.raw.correlated ? 'mdi-link' : 'mdi-link-off' }}
-          </FSIcon>
-          <FSSpan>
-            {{ item.raw.label }}
-          </FSSpan>
-        </FSRow>
-      </v-list-item>
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
     </template>
     <template
       #toggle-set-item="props"
@@ -64,14 +57,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 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 { DataCategoryFilters } from "@dative-gpi/foundation-core-domain/models";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
-import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.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";
@@ -81,7 +73,6 @@ export default defineComponent({
   name: "FSAutocompleteDataCategory",
   components: {
     FSAutocompleteField,
-    FSCheckbox,
     FSButton,
     FSIcon,
     FSSpan,
@@ -117,7 +108,7 @@ export default defineComponent({
       return init.value && fetchingDataCategories.value;
     });
 
-    const innerFetch = (search: string | null) => {
+    const fetch = (search: string | null) => {
       return getManyDataCategories({ ...props.dataCategoriesFilters, search: search ?? undefined });
     };
 
@@ -125,7 +116,7 @@ export default defineComponent({
       dataCategories,
       [() => props.dataCategoriesFilters],
       emit,
-      innerFetch
+      fetch
     );
 
     return {

package/components/autocompletes/FSAutocompleteDataDefinition.vue

@@ -26,29 +26,22 @@
       </FSRow>
     </template>
     <template
-      #autocomplete-item="{ props, item }"
+      #item-label="{ item, font }"
     >
-      <v-list-item
-        v-bind="{ ...props, title: '' }"
+      <FSRow
+        align="center-left"
+        :wrap="false"
       >
-        <FSRow
-          align="center-left"
-          :wrap="false"
+        <FSChip
+          v-if="item.raw.unit"
+          :label="item.raw.unit"
+        />
+        <FSSpan
+          :font="font"
         >
-          <FSCheckbox
-            v-if="$props.multiple"
-            :modelValue="$props.modelValue?.includes(item.value)"
-            @click="props.onClick"
-          />
-          <FSChip
-            v-if="item.raw.unit"
-            :label="item.raw.unit"
-          />
-          <FSSpan>
-            {{ item.raw.label }}
-          </FSSpan>
-        </FSRow>
-      </v-list-item>
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
     </template>
     <template
       #toggle-set-item="props"
@@ -74,14 +67,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
+import { 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";
-import { DataDefinitionFilters } from "@dative-gpi/foundation-core-domain/models";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
-import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
 import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
 import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
 import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
@@ -91,7 +83,6 @@ export default defineComponent({
   name: "FSAutocompleteDataDefinition",
   components: {
     FSAutocompleteField,
-    FSCheckbox,
     FSButton,
     FSChip,
     FSSpan,
@@ -127,7 +118,7 @@ export default defineComponent({
       return init.value && fetchingDataDefinitions.value;
     });
 
-    const innerFetch = (search: string | null) => {
+    const fetch = (search: string | null) => {
       return getManyDataDefinitions({ ...props.dataDefinitionFilters, search: search ?? undefined });
     };
 
@@ -135,7 +126,7 @@ export default defineComponent({
       dataDefinitions,
       [() => props.dataDefinitionFilters],
       emit,
-      innerFetch
+      fetch
     );
 
     return {