@dative-gpi/foundation-core-components 1.0.174 → 1.0.176-service-account
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/autocompletes/FSAutocompleteGrouping.vue +105 -0
- package/components/autocompletes/FSAutocompleteServiceAccountOrganisation.vue +138 -0
- package/components/fields/FSMagicConfigField.vue +171 -0
- package/components/fields/FSMagicField.vue +214 -0
- package/components/lists/groupings/FSBaseGroupingsList.vue +129 -0
- package/components/selects/FSPlotPerSelector.vue +129 -0
- package/package.json +7 -7
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSAutocompleteField
|
|
3
|
+
:label="$props.label ?? $tr('ui.common.grouping', 'Grouping')"
|
|
4
|
+
:toggleSet="!$props.toggleSetDisabled && toggleSet"
|
|
5
|
+
:multiple="$props.multiple"
|
|
6
|
+
:placeholder="placeholder"
|
|
7
|
+
:loading="loading"
|
|
8
|
+
:items="groupings"
|
|
9
|
+
:modelValue="$props.modelValue"
|
|
10
|
+
@update:modelValue="onUpdate"
|
|
11
|
+
v-bind="$attrs"
|
|
12
|
+
>
|
|
13
|
+
<template
|
|
14
|
+
#item-prepend="{ item }"
|
|
15
|
+
>
|
|
16
|
+
<FSIcon
|
|
17
|
+
v-if="item.icon"
|
|
18
|
+
>
|
|
19
|
+
{{ item.icon }}
|
|
20
|
+
</FSIcon>
|
|
21
|
+
</template>
|
|
22
|
+
</FSAutocompleteField>
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<script lang="ts">
|
|
26
|
+
import { computed, defineComponent, type PropType } from "vue";
|
|
27
|
+
|
|
28
|
+
import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
|
|
29
|
+
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
|
|
30
|
+
import { type GroupingFilters } from "@dative-gpi/foundation-core-domain/models";
|
|
31
|
+
import { useGroupings } from "@dative-gpi/foundation-core-services/composables";
|
|
32
|
+
|
|
33
|
+
import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
|
|
34
|
+
import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
|
|
35
|
+
|
|
36
|
+
export default defineComponent({
|
|
37
|
+
name: "FSAutocompleteGrouping",
|
|
38
|
+
components: {
|
|
39
|
+
FSAutocompleteField,
|
|
40
|
+
FSIcon
|
|
41
|
+
},
|
|
42
|
+
props: {
|
|
43
|
+
groupingFilters: {
|
|
44
|
+
type: Object as PropType<GroupingFilters>,
|
|
45
|
+
required: false,
|
|
46
|
+
default: null
|
|
47
|
+
},
|
|
48
|
+
modelValue: {
|
|
49
|
+
type: [Array, String] as PropType<string[] | string | null>,
|
|
50
|
+
required: false,
|
|
51
|
+
default: null
|
|
52
|
+
},
|
|
53
|
+
multiple: {
|
|
54
|
+
type: Boolean,
|
|
55
|
+
required: false,
|
|
56
|
+
default: false
|
|
57
|
+
},
|
|
58
|
+
toggleSetDisabled: {
|
|
59
|
+
type: Boolean,
|
|
60
|
+
required: false,
|
|
61
|
+
default: false
|
|
62
|
+
},
|
|
63
|
+
label: {
|
|
64
|
+
type: String as PropType<string | null>,
|
|
65
|
+
required: false,
|
|
66
|
+
default: null
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
emits: ["update:modelValue"],
|
|
70
|
+
setup(props, { emit }) {
|
|
71
|
+
const { getMany: getManyGroupings, fetching: fetchingGroupings, entities: groupings } = useGroupings();
|
|
72
|
+
const { $tr } = useTranslationsProvider();
|
|
73
|
+
|
|
74
|
+
const loading = computed((): boolean => {
|
|
75
|
+
return init.value && fetchingGroupings.value;
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
const placeholder = computed((): string | null => {
|
|
79
|
+
if (props.multiple && props.modelValue) {
|
|
80
|
+
return $tr("ui.autocomplete-grouping.placeholder", "{0} grouping(s) selected", props.modelValue.length);
|
|
81
|
+
}
|
|
82
|
+
return null;
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
const fetch = (search: string | null) => {
|
|
86
|
+
return getManyGroupings({ ...props.groupingFilters, search: search ?? undefined });
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
const { toggleSet, init, onUpdate } = useAutocomplete(
|
|
90
|
+
groupings,
|
|
91
|
+
[() => props.groupingFilters],
|
|
92
|
+
emit,
|
|
93
|
+
fetch
|
|
94
|
+
);
|
|
95
|
+
|
|
96
|
+
return {
|
|
97
|
+
placeholder,
|
|
98
|
+
groupings,
|
|
99
|
+
toggleSet,
|
|
100
|
+
loading,
|
|
101
|
+
onUpdate
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
</script>
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSAutocompleteField
|
|
3
|
+
itemTitle="label"
|
|
4
|
+
:label="$props.label ?? $tr('ui.common.user', 'User')"
|
|
5
|
+
:toggleSet="!$props.toggleSetDisabled && toggleSet"
|
|
6
|
+
:multiple="$props.multiple"
|
|
7
|
+
:placeholder="placeholder"
|
|
8
|
+
:items="serviceAccountOrganisations"
|
|
9
|
+
:loading="loading"
|
|
10
|
+
:modelValue="$props.modelValue"
|
|
11
|
+
@update:modelValue="onUpdate"
|
|
12
|
+
v-bind="$attrs"
|
|
13
|
+
>
|
|
14
|
+
<template
|
|
15
|
+
#item-prepend="{ item }"
|
|
16
|
+
>
|
|
17
|
+
<FSImage
|
|
18
|
+
v-if="item.imageId"
|
|
19
|
+
height="26px"
|
|
20
|
+
width="26px"
|
|
21
|
+
:imageId="item.imageId"
|
|
22
|
+
:thumbnail="true"
|
|
23
|
+
/>
|
|
24
|
+
</template>
|
|
25
|
+
<template
|
|
26
|
+
#toggle-set-item="props"
|
|
27
|
+
>
|
|
28
|
+
<FSButton
|
|
29
|
+
:padding="props.item.imageId ? ['6px 16px', '4px 12px'] : undefined"
|
|
30
|
+
:variant="props.getVariant(props.item)"
|
|
31
|
+
:color="props.getColor(props.item)"
|
|
32
|
+
:class="props.getClass(props.item)"
|
|
33
|
+
:label="props.item.label"
|
|
34
|
+
@click="props.toggle(props.item)"
|
|
35
|
+
>
|
|
36
|
+
<template
|
|
37
|
+
v-if="props.item.imageId"
|
|
38
|
+
#prepend
|
|
39
|
+
>
|
|
40
|
+
<FSImage
|
|
41
|
+
height="26px"
|
|
42
|
+
width="26px"
|
|
43
|
+
:imageId="props.item.imageId"
|
|
44
|
+
:thumbnail="true"
|
|
45
|
+
/>
|
|
46
|
+
</template>
|
|
47
|
+
</FSButton>
|
|
48
|
+
</template>
|
|
49
|
+
</FSAutocompleteField>
|
|
50
|
+
</template>
|
|
51
|
+
|
|
52
|
+
<script lang="ts">
|
|
53
|
+
import { computed, defineComponent, type PropType } from "vue";
|
|
54
|
+
|
|
55
|
+
import type { ServiceAccountOrganisationFilters, ServiceAccountOrganisationInfos} from "@dative-gpi/foundation-core-domain/models";
|
|
56
|
+
import { useServiceAccountOrganisations } from "@dative-gpi/foundation-core-services/composables";
|
|
57
|
+
|
|
58
|
+
import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
|
|
59
|
+
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
|
|
60
|
+
|
|
61
|
+
import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
|
|
62
|
+
import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
|
|
63
|
+
import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
|
|
64
|
+
|
|
65
|
+
export default defineComponent({
|
|
66
|
+
name: "FSAutocompleteServiceAccountOrganisation",
|
|
67
|
+
components: {
|
|
68
|
+
FSAutocompleteField,
|
|
69
|
+
FSButton,
|
|
70
|
+
FSImage
|
|
71
|
+
},
|
|
72
|
+
props: {
|
|
73
|
+
serviceAccountOrganisationFilters: {
|
|
74
|
+
type: Object as PropType<ServiceAccountOrganisationFilters>,
|
|
75
|
+
required: false,
|
|
76
|
+
default: null
|
|
77
|
+
},
|
|
78
|
+
modelValue: {
|
|
79
|
+
type: [Array, String] as PropType<string[] | string | null>,
|
|
80
|
+
required: false,
|
|
81
|
+
default: null
|
|
82
|
+
},
|
|
83
|
+
multiple: {
|
|
84
|
+
type: Boolean,
|
|
85
|
+
required: false,
|
|
86
|
+
default: false
|
|
87
|
+
},
|
|
88
|
+
toggleSetDisabled: {
|
|
89
|
+
type: Boolean,
|
|
90
|
+
required: false,
|
|
91
|
+
default: false
|
|
92
|
+
},
|
|
93
|
+
label: {
|
|
94
|
+
type: String as PropType<string | null>,
|
|
95
|
+
required: false,
|
|
96
|
+
default: null
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
emits: ["update:modelValue"],
|
|
100
|
+
setup(props, { emit }) {
|
|
101
|
+
const { getMany: getServiceAccountOrganisations, fetching: fetchingServiceAccountOrganisations, entities: serviceAccountOrganisations } = useServiceAccountOrganisations();
|
|
102
|
+
const { $tr } = useTranslationsProvider();
|
|
103
|
+
|
|
104
|
+
const loading = computed((): boolean => {
|
|
105
|
+
return init.value && fetchingServiceAccountOrganisations.value;
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
const placeholder = computed((): string | null => {
|
|
109
|
+
if (props.multiple && props.modelValue) {
|
|
110
|
+
return $tr("autocomplete.service-account.placeholder", "{0} service account(s) selected", props.modelValue.length);
|
|
111
|
+
}
|
|
112
|
+
return null;
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
const fetch = (search: string | null) => {
|
|
116
|
+
return getServiceAccountOrganisations({ ...props.serviceAccountOrganisationFilters, search: search ?? undefined });
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
const { toggleSet, init, onUpdate } = useAutocomplete(
|
|
120
|
+
serviceAccountOrganisations,
|
|
121
|
+
[() => props.serviceAccountOrganisationFilters],
|
|
122
|
+
emit,
|
|
123
|
+
fetch,
|
|
124
|
+
null,
|
|
125
|
+
(item: ServiceAccountOrganisationInfos) => item.id,
|
|
126
|
+
(item: ServiceAccountOrganisationInfos) => item.label
|
|
127
|
+
);
|
|
128
|
+
|
|
129
|
+
return {
|
|
130
|
+
serviceAccountOrganisations,
|
|
131
|
+
placeholder,
|
|
132
|
+
toggleSet,
|
|
133
|
+
loading,
|
|
134
|
+
onUpdate
|
|
135
|
+
};
|
|
136
|
+
}
|
|
137
|
+
});
|
|
138
|
+
</script>
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSRow
|
|
3
|
+
class="fs-magic-config-field"
|
|
4
|
+
>
|
|
5
|
+
<component
|
|
6
|
+
v-if="$props.type"
|
|
7
|
+
class="fs-magic-config-field-value"
|
|
8
|
+
:is="get($props.type)"
|
|
9
|
+
:label="$tr('ui.common.value', 'Value')"
|
|
10
|
+
:disabled="$props.disabled"
|
|
11
|
+
:required="true"
|
|
12
|
+
:rules="rules"
|
|
13
|
+
:modelValue="valueToInput"
|
|
14
|
+
@update:modelValue="inputToValue"
|
|
15
|
+
/>
|
|
16
|
+
<FSRow
|
|
17
|
+
gap="24px"
|
|
18
|
+
>
|
|
19
|
+
<FSTranslateField
|
|
20
|
+
:label="$tr('entity.common.label', 'Label')"
|
|
21
|
+
:disabled="$props.disabled"
|
|
22
|
+
:modelValue="$props.labelDefault"
|
|
23
|
+
:translations="$props.translations"
|
|
24
|
+
@update:modelValue="$emit('update:labelDefault', $event)"
|
|
25
|
+
@update:translations="$emit('update:translations', $event)"
|
|
26
|
+
/>
|
|
27
|
+
<FSRow
|
|
28
|
+
class="fs-magic-config-field-actions"
|
|
29
|
+
width="hug"
|
|
30
|
+
:wrap="false"
|
|
31
|
+
>
|
|
32
|
+
<FSButtonRemoveIcon
|
|
33
|
+
@click="$emit('click:remove')"
|
|
34
|
+
/>
|
|
35
|
+
<FSButtonAddIcon
|
|
36
|
+
@click="$emit('click:add')"
|
|
37
|
+
/>
|
|
38
|
+
</FSRow>
|
|
39
|
+
</FSRow>
|
|
40
|
+
</FSRow>
|
|
41
|
+
</template>
|
|
42
|
+
|
|
43
|
+
<script lang="ts">
|
|
44
|
+
import { computed, defineComponent, type PropType } from "vue";
|
|
45
|
+
|
|
46
|
+
import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules, AutocompleteRules } from "@dative-gpi/foundation-shared-components/models";
|
|
47
|
+
import { useMagicFieldProvider } from "@dative-gpi/foundation-core-services/composables";
|
|
48
|
+
import { MagicFieldType } from "@dative-gpi/foundation-shared-domain/enums";
|
|
49
|
+
|
|
50
|
+
import FSButtonRemoveIcon from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonRemoveIcon.vue";
|
|
51
|
+
import FSButtonAddIcon from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonAddIcon.vue";
|
|
52
|
+
import FSTranslateField from "@dative-gpi/foundation-shared-components/components/fields/FSTranslateField.vue";
|
|
53
|
+
import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
|
|
54
|
+
|
|
55
|
+
export default defineComponent({
|
|
56
|
+
name: "FSMagicConfigField",
|
|
57
|
+
components: {
|
|
58
|
+
FSButtonRemoveIcon,
|
|
59
|
+
FSTranslateField,
|
|
60
|
+
FSButtonAddIcon,
|
|
61
|
+
FSRow
|
|
62
|
+
},
|
|
63
|
+
props: {
|
|
64
|
+
type: {
|
|
65
|
+
type: Number as PropType<MagicFieldType>,
|
|
66
|
+
required: false,
|
|
67
|
+
default: MagicFieldType.TextField
|
|
68
|
+
},
|
|
69
|
+
labelDefault: {
|
|
70
|
+
type: String as PropType<string | null>,
|
|
71
|
+
required: false,
|
|
72
|
+
default: null
|
|
73
|
+
},
|
|
74
|
+
modelValue: {
|
|
75
|
+
type: String as PropType<string | null>,
|
|
76
|
+
required: false,
|
|
77
|
+
default: null
|
|
78
|
+
},
|
|
79
|
+
translations: {
|
|
80
|
+
type: Array as PropType<{ languageCode: string; label: string }[]>,
|
|
81
|
+
required: false,
|
|
82
|
+
default: () => []
|
|
83
|
+
},
|
|
84
|
+
disabled: {
|
|
85
|
+
type: Boolean,
|
|
86
|
+
required: false,
|
|
87
|
+
default: false
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
emits: ["click:remove", "click:add", "update:modelValue", "update:labelDefault", "update:translations"],
|
|
91
|
+
setup(props, { emit }) {
|
|
92
|
+
const { get } = useMagicFieldProvider();
|
|
93
|
+
|
|
94
|
+
const rules = computed((): Function[] => {
|
|
95
|
+
switch (props.type) {
|
|
96
|
+
case MagicFieldType.NumberField:
|
|
97
|
+
return [NumberRules.required()];
|
|
98
|
+
case MagicFieldType.TextField:
|
|
99
|
+
return [TextRules.required()];
|
|
100
|
+
case MagicFieldType.DateTimeField:
|
|
101
|
+
return [DateRules.required()];
|
|
102
|
+
case MagicFieldType.IconField:
|
|
103
|
+
return [IconRules.required()];
|
|
104
|
+
case MagicFieldType.TimeField:
|
|
105
|
+
return [TimeRules.required()];
|
|
106
|
+
case MagicFieldType.TimeStepField:
|
|
107
|
+
return [TimeStepRules.required()];
|
|
108
|
+
case MagicFieldType.PlotPerField:
|
|
109
|
+
return [AutocompleteRules.required()];
|
|
110
|
+
}
|
|
111
|
+
return [];
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
const valueToInput = computed((): any => {
|
|
115
|
+
if (!props.modelValue) {
|
|
116
|
+
return null;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
switch (props.type) {
|
|
120
|
+
case MagicFieldType.NumberField:
|
|
121
|
+
case MagicFieldType.DateTimeField:
|
|
122
|
+
case MagicFieldType.TimeField:
|
|
123
|
+
if (isNaN(parseFloat(props.modelValue))) {
|
|
124
|
+
return null;
|
|
125
|
+
}
|
|
126
|
+
return parseFloat(props.modelValue);
|
|
127
|
+
case MagicFieldType.Switch:
|
|
128
|
+
return props.modelValue === "true";
|
|
129
|
+
case MagicFieldType.TimeStepField:
|
|
130
|
+
return JSON.parse(props.modelValue);
|
|
131
|
+
case MagicFieldType.PlotPerField:
|
|
132
|
+
return parseInt(props.modelValue);
|
|
133
|
+
default:
|
|
134
|
+
return props.modelValue;
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
const inputToValue = (value: any) => {
|
|
139
|
+
if (!value) {
|
|
140
|
+
emit("update:modelValue", null);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
switch (props.type) {
|
|
144
|
+
case MagicFieldType.NumberField:
|
|
145
|
+
case MagicFieldType.Switch:
|
|
146
|
+
case MagicFieldType.DateTimeField:
|
|
147
|
+
case MagicFieldType.TimeField:
|
|
148
|
+
emit("update:modelValue", value.toString());
|
|
149
|
+
break;
|
|
150
|
+
case MagicFieldType.TimeStepField:
|
|
151
|
+
emit("update:modelValue", JSON.stringify(value));
|
|
152
|
+
break;
|
|
153
|
+
case MagicFieldType.PlotPerField:
|
|
154
|
+
emit("update:modelValue", value.toString());
|
|
155
|
+
break;
|
|
156
|
+
default:
|
|
157
|
+
emit("update:modelValue", value);
|
|
158
|
+
break;
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
return {
|
|
163
|
+
MagicFieldType,
|
|
164
|
+
valueToInput,
|
|
165
|
+
rules,
|
|
166
|
+
inputToValue,
|
|
167
|
+
get
|
|
168
|
+
};
|
|
169
|
+
},
|
|
170
|
+
});
|
|
171
|
+
</script>
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<component
|
|
3
|
+
v-if="!$props.useOnlyAllowedValues"
|
|
4
|
+
:is="get($props.type)"
|
|
5
|
+
:modelValue="valueToInput"
|
|
6
|
+
@update:modelValue="inputToValue"
|
|
7
|
+
v-bind="{ ...$attrs, ...bindedProps }"
|
|
8
|
+
/>
|
|
9
|
+
<FSSelectField
|
|
10
|
+
v-else
|
|
11
|
+
itemValue="value"
|
|
12
|
+
:items="items"
|
|
13
|
+
:modelValue="$props.modelValue"
|
|
14
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
15
|
+
v-bind="$attrs"
|
|
16
|
+
>
|
|
17
|
+
<template
|
|
18
|
+
v-if="$props.type === MagicFieldType.IconField"
|
|
19
|
+
#selection="{ item }"
|
|
20
|
+
>
|
|
21
|
+
<FSRow
|
|
22
|
+
align="center-center"
|
|
23
|
+
:wrap="false"
|
|
24
|
+
>
|
|
25
|
+
<FSIcon
|
|
26
|
+
v-if="item.raw.value"
|
|
27
|
+
>
|
|
28
|
+
{{ item.raw.value }}
|
|
29
|
+
</FSIcon>
|
|
30
|
+
<FSSpan
|
|
31
|
+
v-if="item.raw.value !== item.raw.label"
|
|
32
|
+
>
|
|
33
|
+
{{ item.raw.label }}
|
|
34
|
+
</FSSpan>
|
|
35
|
+
</FSRow>
|
|
36
|
+
</template>
|
|
37
|
+
<template
|
|
38
|
+
v-if="$props.type === MagicFieldType.IconField"
|
|
39
|
+
#item-label="{ item }"
|
|
40
|
+
>
|
|
41
|
+
<FSRow
|
|
42
|
+
align="center-center"
|
|
43
|
+
:wrap="false"
|
|
44
|
+
>
|
|
45
|
+
<FSIcon
|
|
46
|
+
v-if="item.raw.value"
|
|
47
|
+
>
|
|
48
|
+
{{ item.raw.value }}
|
|
49
|
+
</FSIcon>
|
|
50
|
+
<FSSpan
|
|
51
|
+
v-if="item.raw.value !== item.raw.label"
|
|
52
|
+
>
|
|
53
|
+
{{ item.raw.label }}
|
|
54
|
+
</FSSpan>
|
|
55
|
+
</FSRow>
|
|
56
|
+
</template>
|
|
57
|
+
</FSSelectField>
|
|
58
|
+
</template>
|
|
59
|
+
|
|
60
|
+
<script lang="ts">
|
|
61
|
+
import { computed, defineComponent, type PropType } from "vue";
|
|
62
|
+
|
|
63
|
+
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
64
|
+
|
|
65
|
+
import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
|
|
66
|
+
|
|
67
|
+
import { useMagicFieldProvider } from "@dative-gpi/foundation-core-services/composables";
|
|
68
|
+
import { MagicFieldType } from "@dative-gpi/foundation-shared-domain/enums";
|
|
69
|
+
import { getTimeBestString, timeStepToString } from "@dative-gpi/foundation-shared-components/utils";
|
|
70
|
+
|
|
71
|
+
import FSSelectField from "@dative-gpi/foundation-shared-components/components/fields/FSSelectField.vue";
|
|
72
|
+
import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
|
|
73
|
+
import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
|
|
74
|
+
import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
|
|
75
|
+
|
|
76
|
+
export default defineComponent({
|
|
77
|
+
name: "FSMagicField",
|
|
78
|
+
components: {
|
|
79
|
+
FSSelectField,
|
|
80
|
+
FSIcon,
|
|
81
|
+
FSSpan,
|
|
82
|
+
FSRow
|
|
83
|
+
},
|
|
84
|
+
props: {
|
|
85
|
+
type: {
|
|
86
|
+
type: Number as PropType<MagicFieldType>,
|
|
87
|
+
required: false,
|
|
88
|
+
default: MagicFieldType.TextField
|
|
89
|
+
},
|
|
90
|
+
modelValue: {
|
|
91
|
+
type: String as PropType<string | null>,
|
|
92
|
+
required: false,
|
|
93
|
+
default: null
|
|
94
|
+
},
|
|
95
|
+
allowedValues: {
|
|
96
|
+
type: Array as PropType<{ value: string; label: string }[]>,
|
|
97
|
+
required: false,
|
|
98
|
+
default: () => []
|
|
99
|
+
},
|
|
100
|
+
useOnlyAllowedValues: {
|
|
101
|
+
type: Boolean,
|
|
102
|
+
required: false,
|
|
103
|
+
default: false
|
|
104
|
+
},
|
|
105
|
+
meta: {
|
|
106
|
+
type: Object as PropType<Record<string, any>>,
|
|
107
|
+
required: false,
|
|
108
|
+
default: () => ({})
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
emits: ["update:modelValue"],
|
|
112
|
+
setup(props, { emit }) {
|
|
113
|
+
const { epochToShortTimeFormat } = useDateFormat();
|
|
114
|
+
const { $tr } = useTranslationsProvider();
|
|
115
|
+
const { get } = useMagicFieldProvider();
|
|
116
|
+
|
|
117
|
+
const items = computed(() => props.allowedValues.map((av) => ({
|
|
118
|
+
value: av.value,
|
|
119
|
+
label: av.label || asString(av.value),
|
|
120
|
+
})));
|
|
121
|
+
|
|
122
|
+
const valueToInput = computed((): any => {
|
|
123
|
+
if (props.modelValue == null) {
|
|
124
|
+
return null;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
switch (props.type) {
|
|
128
|
+
case MagicFieldType.NumberField:
|
|
129
|
+
case MagicFieldType.DateTimeField:
|
|
130
|
+
case MagicFieldType.TimeField:
|
|
131
|
+
if (isNaN(parseFloat(props.modelValue))) {
|
|
132
|
+
return null;
|
|
133
|
+
}
|
|
134
|
+
return parseFloat(props.modelValue);
|
|
135
|
+
case MagicFieldType.Switch:
|
|
136
|
+
return props.modelValue === "true";
|
|
137
|
+
case MagicFieldType.TimeStepField:
|
|
138
|
+
case MagicFieldType.PlotPerField:
|
|
139
|
+
return JSON.parse(props.modelValue);
|
|
140
|
+
default:
|
|
141
|
+
return props.modelValue;
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
|
|
145
|
+
const asString = (value: string): string | null => {
|
|
146
|
+
if (value == null) {
|
|
147
|
+
return "";
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
switch (props.type) {
|
|
151
|
+
case MagicFieldType.NumberField:
|
|
152
|
+
return value.toString();
|
|
153
|
+
case MagicFieldType.Switch:
|
|
154
|
+
if (value) {
|
|
155
|
+
return $tr("magic-field.true", "True");
|
|
156
|
+
}
|
|
157
|
+
return $tr("magic-field.false", "False");
|
|
158
|
+
case MagicFieldType.DateTimeField:
|
|
159
|
+
return epochToShortTimeFormat(parseFloat(value));
|
|
160
|
+
case MagicFieldType.TimeField:
|
|
161
|
+
return getTimeBestString(parseFloat(value));
|
|
162
|
+
case MagicFieldType.TimeStepField:
|
|
163
|
+
return timeStepToString(JSON.parse(value));
|
|
164
|
+
case MagicFieldType.PlotPerField:
|
|
165
|
+
return JSON.parse(value).plotPer;
|
|
166
|
+
default:
|
|
167
|
+
return value;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
const inputToValue = (value: any) => {
|
|
172
|
+
if (value == null) {
|
|
173
|
+
emit("update:modelValue", null);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
switch (props.type) {
|
|
177
|
+
case MagicFieldType.NumberField:
|
|
178
|
+
case MagicFieldType.Switch:
|
|
179
|
+
case MagicFieldType.DateTimeField:
|
|
180
|
+
case MagicFieldType.TimeField:
|
|
181
|
+
emit("update:modelValue", value.toString());
|
|
182
|
+
break;
|
|
183
|
+
case MagicFieldType.TimeStepField:
|
|
184
|
+
case MagicFieldType.PlotPerField:
|
|
185
|
+
emit("update:modelValue", JSON.stringify(value));
|
|
186
|
+
break;
|
|
187
|
+
default:
|
|
188
|
+
emit("update:modelValue", value);
|
|
189
|
+
break;
|
|
190
|
+
}
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
const bindedProps = computed(() => {
|
|
194
|
+
switch (props.type) {
|
|
195
|
+
case MagicFieldType.PlotPerField:
|
|
196
|
+
return {
|
|
197
|
+
showSelector: props.meta.showSelector ?? true
|
|
198
|
+
}
|
|
199
|
+
default:
|
|
200
|
+
return {};
|
|
201
|
+
}
|
|
202
|
+
});
|
|
203
|
+
|
|
204
|
+
return {
|
|
205
|
+
MagicFieldType,
|
|
206
|
+
valueToInput,
|
|
207
|
+
bindedProps,
|
|
208
|
+
items,
|
|
209
|
+
inputToValue,
|
|
210
|
+
get
|
|
211
|
+
};
|
|
212
|
+
},
|
|
213
|
+
});
|
|
214
|
+
</script>
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSDataTable
|
|
3
|
+
defaultMode="iterator"
|
|
4
|
+
:loading="fetchingGroupings"
|
|
5
|
+
:items="groupings"
|
|
6
|
+
:itemTo="$props.itemTo"
|
|
7
|
+
:selectable="$props.selectable"
|
|
8
|
+
:showSearch="$props.showSearch"
|
|
9
|
+
:singleSelect="$props.singleSelect"
|
|
10
|
+
:disableTable="$props.disableTable"
|
|
11
|
+
:modelValue="$props.modelValue"
|
|
12
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
13
|
+
v-bind="$attrs"
|
|
14
|
+
>
|
|
15
|
+
<template
|
|
16
|
+
v-for="(_, name) in $slots"
|
|
17
|
+
v-slot:[name]="slotData"
|
|
18
|
+
>
|
|
19
|
+
<slot
|
|
20
|
+
:name="name"
|
|
21
|
+
v-bind="slotData"
|
|
22
|
+
/>
|
|
23
|
+
</template>
|
|
24
|
+
<template
|
|
25
|
+
#item.icon="{ item }"
|
|
26
|
+
>
|
|
27
|
+
<FSIcon>
|
|
28
|
+
{{ item.icon }}
|
|
29
|
+
</FSIcon>
|
|
30
|
+
</template>
|
|
31
|
+
<template
|
|
32
|
+
#item.tile="{ item, toggleSelect }"
|
|
33
|
+
>
|
|
34
|
+
<FSGroupingTileUI
|
|
35
|
+
:selectable="$props.selectable"
|
|
36
|
+
:modelValue="isSelected(item.id)"
|
|
37
|
+
:singleSelect="$props.singleSelect"
|
|
38
|
+
:subgroupingCount="item.subgroupingCount"
|
|
39
|
+
:iconColor="item.color"
|
|
40
|
+
:label="item.label"
|
|
41
|
+
:icon="item.icon"
|
|
42
|
+
:code="item.code"
|
|
43
|
+
:to="$props.itemTo && $props.itemTo(item)"
|
|
44
|
+
@update:modelValue="toggleSelect(item)"
|
|
45
|
+
/>
|
|
46
|
+
</template>
|
|
47
|
+
</FSDataTable>
|
|
48
|
+
</template>
|
|
49
|
+
|
|
50
|
+
<script lang="ts">
|
|
51
|
+
import { defineComponent, watch } from "vue";
|
|
52
|
+
import { type RouteLocation } from "vue-router";
|
|
53
|
+
import type { PropType} from "vue";
|
|
54
|
+
import _ from "lodash";
|
|
55
|
+
|
|
56
|
+
import type { GroupingFilters, GroupingInfos } from "@dative-gpi/foundation-core-domain/models";
|
|
57
|
+
import { useGroupings } from "@dative-gpi/foundation-core-services/composables";
|
|
58
|
+
|
|
59
|
+
import FSDataTable from "../FSDataTable.vue";
|
|
60
|
+
|
|
61
|
+
import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
|
|
62
|
+
import FSGroupingTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSGroupingTileUI.vue";
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
export default defineComponent({
|
|
66
|
+
name: "FSBaseGroupingsList",
|
|
67
|
+
components: {
|
|
68
|
+
FSDataTable,
|
|
69
|
+
FSIcon,
|
|
70
|
+
FSGroupingTileUI
|
|
71
|
+
},
|
|
72
|
+
props: {
|
|
73
|
+
itemTo: {
|
|
74
|
+
type: Function as PropType<(item: GroupingInfos) => Partial<RouteLocation>>,
|
|
75
|
+
required: false
|
|
76
|
+
},
|
|
77
|
+
groupingsFilters: {
|
|
78
|
+
type: Object as PropType<GroupingFilters>,
|
|
79
|
+
required: false,
|
|
80
|
+
default: null
|
|
81
|
+
},
|
|
82
|
+
selectable: {
|
|
83
|
+
type: Boolean,
|
|
84
|
+
required: false,
|
|
85
|
+
default: false
|
|
86
|
+
},
|
|
87
|
+
singleSelect: {
|
|
88
|
+
type: Boolean,
|
|
89
|
+
required: false,
|
|
90
|
+
default: false
|
|
91
|
+
},
|
|
92
|
+
modelValue: {
|
|
93
|
+
type: Array as PropType<string[]>,
|
|
94
|
+
required: false,
|
|
95
|
+
default: () => []
|
|
96
|
+
},
|
|
97
|
+
showSearch: {
|
|
98
|
+
type: Boolean,
|
|
99
|
+
required: false,
|
|
100
|
+
default: false
|
|
101
|
+
},
|
|
102
|
+
disableTable: {
|
|
103
|
+
type: Boolean,
|
|
104
|
+
required: false,
|
|
105
|
+
default: true
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
emits: ["update:modelValue"],
|
|
109
|
+
setup(props) {
|
|
110
|
+
const { getMany: fetchGroupings, fetching: fetchingGroupings, entities: groupings } = useGroupings();
|
|
111
|
+
|
|
112
|
+
const isSelected = (id: string) => {
|
|
113
|
+
return props.modelValue.includes(id);
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
watch(() => props.groupingsFilters, (next, previous) => {
|
|
117
|
+
if ((!next && !previous) || !_.isEqual(next, previous)) {
|
|
118
|
+
fetchGroupings(props.groupingsFilters);
|
|
119
|
+
}
|
|
120
|
+
}, { immediate: true });
|
|
121
|
+
|
|
122
|
+
return {
|
|
123
|
+
fetchingGroupings,
|
|
124
|
+
groupings,
|
|
125
|
+
isSelected
|
|
126
|
+
};
|
|
127
|
+
}
|
|
128
|
+
});
|
|
129
|
+
</script>
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSRow
|
|
3
|
+
v-bind="$attrs"
|
|
4
|
+
>
|
|
5
|
+
<FSAutocompleteField
|
|
6
|
+
v-if="$props.showSelector"
|
|
7
|
+
:hideHeader="$props.hideHeader"
|
|
8
|
+
:clearable="$props.clearable"
|
|
9
|
+
:label="label ?? $tr('ui.common.plot-per','Plot per')"
|
|
10
|
+
:items="plotPerItems"
|
|
11
|
+
v-bind="$props.plotPerSelectorProps"
|
|
12
|
+
v-model="actualPlotPer"
|
|
13
|
+
/>
|
|
14
|
+
<FSAutocompleteGrouping
|
|
15
|
+
v-if="actualPlotPer === PlotPer.Grouping && showGroupingAutocomplete"
|
|
16
|
+
:hideHeader="$props.hideHeader"
|
|
17
|
+
:clearable="$props.clearable"
|
|
18
|
+
:toggleSetDisabled="true"
|
|
19
|
+
v-bind="$props.groupingAutocompleteProps"
|
|
20
|
+
v-model="actualGroupingId"
|
|
21
|
+
/>
|
|
22
|
+
</FSRow>
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<script lang="ts">
|
|
26
|
+
import { computed, defineComponent, ref, watch, type PropType } from "vue";
|
|
27
|
+
|
|
28
|
+
import { PlotPer } from "@dative-gpi/foundation-shared-domain/enums";
|
|
29
|
+
|
|
30
|
+
import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
|
|
31
|
+
import { plotPerLabel } from "@dative-gpi/foundation-shared-components/tools";
|
|
32
|
+
|
|
33
|
+
import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
|
|
34
|
+
import FSAutocompleteGrouping from "@dative-gpi/foundation-core-components/components/autocompletes/FSAutocompleteGrouping.vue";
|
|
35
|
+
|
|
36
|
+
export default defineComponent({
|
|
37
|
+
components: {
|
|
38
|
+
FSAutocompleteField,
|
|
39
|
+
FSAutocompleteGrouping
|
|
40
|
+
},
|
|
41
|
+
props: {
|
|
42
|
+
modelValue: {
|
|
43
|
+
type: Object as PropType<{ plotPer: PlotPer, groupingId: string | null }>,
|
|
44
|
+
required: false,
|
|
45
|
+
default: () => ({ plotPer: PlotPer.None, groupingId: null })
|
|
46
|
+
},
|
|
47
|
+
allowedPlotPers: {
|
|
48
|
+
type: Array as PropType<PlotPer[]>,
|
|
49
|
+
required: false,
|
|
50
|
+
default: null
|
|
51
|
+
},
|
|
52
|
+
plotPerSelectorProps: {
|
|
53
|
+
type: Object as PropType<Record<string, any>>,
|
|
54
|
+
required: false,
|
|
55
|
+
default: () => ({})
|
|
56
|
+
},
|
|
57
|
+
groupingAutocompleteProps: {
|
|
58
|
+
type: Object as PropType<Record<string, any>>,
|
|
59
|
+
required: false,
|
|
60
|
+
default: () => ({})
|
|
61
|
+
},
|
|
62
|
+
label: {
|
|
63
|
+
type: String,
|
|
64
|
+
required: false
|
|
65
|
+
},
|
|
66
|
+
hideHeader: {
|
|
67
|
+
type: Boolean,
|
|
68
|
+
required: false,
|
|
69
|
+
default: false
|
|
70
|
+
},
|
|
71
|
+
clearable: {
|
|
72
|
+
type: Boolean,
|
|
73
|
+
required: false,
|
|
74
|
+
default: false
|
|
75
|
+
},
|
|
76
|
+
showSelector: {
|
|
77
|
+
type: Boolean,
|
|
78
|
+
required: false,
|
|
79
|
+
default: true
|
|
80
|
+
},
|
|
81
|
+
showGroupingAutocomplete: {
|
|
82
|
+
type: Boolean,
|
|
83
|
+
required: false,
|
|
84
|
+
default: true
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
emits: ['update:modelValue'],
|
|
88
|
+
setup(props, { emit }) {
|
|
89
|
+
const actualPlotPer = ref(PlotPer.None);
|
|
90
|
+
const actualGroupingId = ref<string | null>(null)
|
|
91
|
+
|
|
92
|
+
const plotPerItems = computed(()=>{
|
|
93
|
+
if (props.allowedPlotPers != null) {
|
|
94
|
+
return props.allowedPlotPers.map((f)=>{
|
|
95
|
+
return {
|
|
96
|
+
id: f,
|
|
97
|
+
label: plotPerLabel(f)
|
|
98
|
+
}
|
|
99
|
+
})
|
|
100
|
+
}
|
|
101
|
+
return getEnumEntries(PlotPer).filter(f=>f.value != PlotPer.None).map((f)=>{
|
|
102
|
+
return {
|
|
103
|
+
id: f.value,
|
|
104
|
+
label: plotPerLabel(f.value)
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
watch(() => props.modelValue, (newVal) => {
|
|
110
|
+
actualPlotPer.value = newVal?.plotPer ?? plotPerItems.value[0].id;
|
|
111
|
+
actualGroupingId.value = newVal?.groupingId ?? null;
|
|
112
|
+
}, { immediate: true });
|
|
113
|
+
|
|
114
|
+
watch([actualPlotPer, actualGroupingId], () => {
|
|
115
|
+
emit('update:modelValue', {
|
|
116
|
+
plotPer: actualPlotPer.value,
|
|
117
|
+
groupingId: actualGroupingId.value
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
return {
|
|
122
|
+
actualGroupingId,
|
|
123
|
+
actualPlotPer,
|
|
124
|
+
plotPerItems,
|
|
125
|
+
PlotPer
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
})
|
|
129
|
+
</script>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dative-gpi/foundation-core-components",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.176-service-account",
|
|
5
5
|
"description": "",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
"author": "",
|
|
11
11
|
"license": "ISC",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@dative-gpi/foundation-core-domain": "1.0.
|
|
14
|
-
"@dative-gpi/foundation-core-services": "1.0.
|
|
15
|
-
"@dative-gpi/foundation-shared-components": "1.0.
|
|
16
|
-
"@dative-gpi/foundation-shared-domain": "1.0.
|
|
17
|
-
"@dative-gpi/foundation-shared-services": "1.0.
|
|
13
|
+
"@dative-gpi/foundation-core-domain": "1.0.176-service-account",
|
|
14
|
+
"@dative-gpi/foundation-core-services": "1.0.176-service-account",
|
|
15
|
+
"@dative-gpi/foundation-shared-components": "1.0.176-service-account",
|
|
16
|
+
"@dative-gpi/foundation-shared-domain": "1.0.176-service-account",
|
|
17
|
+
"@dative-gpi/foundation-shared-services": "1.0.176-service-account"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"@dative-gpi/bones-ui": "^1.0.0",
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"sass": "1.71.1",
|
|
27
27
|
"sass-loader": "13.3.2"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "b2767f7fee6b4c37aa19f1a688e80d1420cff00e"
|
|
30
30
|
}
|