@dative-gpi/foundation-core-components 0.0.125 → 0.0.127
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/FSAutocompleteChart.vue +218 -0
- package/components/autocompletes/FSAutocompleteDashboard.vue +7 -1
- package/components/autocompletes/FSAutocompleteRole.vue +5 -0
- package/components/lists/FSDataTable.vue +7 -1
- package/package.json +7 -7
- package/utils/charts.ts +21 -0
- package/utils/dashboards.ts +4 -4
- package/utils/index.ts +1 -0
- package/utils/users.ts +11 -2
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSAutocompleteField
|
|
3
|
+
:toggleSet="!$props.toggleSetDisabled && toggleSet"
|
|
4
|
+
:multiple="$props.multiple"
|
|
5
|
+
:loading="loading"
|
|
6
|
+
:items="charts"
|
|
7
|
+
:modelValue="$props.modelValue"
|
|
8
|
+
@update:modelValue="onUpdate"
|
|
9
|
+
v-bind="$attrs"
|
|
10
|
+
>
|
|
11
|
+
<template
|
|
12
|
+
#autocomplete-selection="{ item }"
|
|
13
|
+
>
|
|
14
|
+
<FSRow
|
|
15
|
+
v-if="$props.modelValue"
|
|
16
|
+
align="center-center"
|
|
17
|
+
:wrap="false"
|
|
18
|
+
>
|
|
19
|
+
<FSIcon
|
|
20
|
+
v-if="item.raw.icon"
|
|
21
|
+
>
|
|
22
|
+
{{ item.raw.icon }}
|
|
23
|
+
</FSIcon>
|
|
24
|
+
<FSSpan>
|
|
25
|
+
{{ item.raw.label }}
|
|
26
|
+
</FSSpan>
|
|
27
|
+
<FSChip
|
|
28
|
+
:color="chartOriginColor(item.raw.type)"
|
|
29
|
+
:label="chartOriginLabel(item.raw.type)"
|
|
30
|
+
:editable="false"
|
|
31
|
+
/>
|
|
32
|
+
</FSRow>
|
|
33
|
+
</template>
|
|
34
|
+
<template
|
|
35
|
+
#autocomplete-item="{ props, item }"
|
|
36
|
+
>
|
|
37
|
+
<v-list-item
|
|
38
|
+
v-bind="{ ...props, title: '' }"
|
|
39
|
+
>
|
|
40
|
+
<FSRow
|
|
41
|
+
align="center-left"
|
|
42
|
+
:wrap="false"
|
|
43
|
+
>
|
|
44
|
+
<FSCheckbox
|
|
45
|
+
v-if="$props.multiple"
|
|
46
|
+
:modelValue="$props.modelValue?.includes(item.value)"
|
|
47
|
+
@click="props.onClick"
|
|
48
|
+
/>
|
|
49
|
+
<FSIcon
|
|
50
|
+
v-if="item.raw.icon"
|
|
51
|
+
>
|
|
52
|
+
{{ item.raw.icon }}
|
|
53
|
+
</FSIcon>
|
|
54
|
+
<FSSpan>
|
|
55
|
+
{{ item.raw.label }}
|
|
56
|
+
</FSSpan>
|
|
57
|
+
<FSChip
|
|
58
|
+
:color="chartOriginColor(item.raw.type)"
|
|
59
|
+
:label="chartOriginLabel(item.raw.type)"
|
|
60
|
+
:editable="false"
|
|
61
|
+
/>
|
|
62
|
+
</FSRow>
|
|
63
|
+
</v-list-item>
|
|
64
|
+
</template>
|
|
65
|
+
<template
|
|
66
|
+
#toggle-set-item="props"
|
|
67
|
+
>
|
|
68
|
+
<FSButton
|
|
69
|
+
:prependIcon="props.item.icon"
|
|
70
|
+
:variant="props.getVariant(props.item)"
|
|
71
|
+
:color="props.getColor(props.item)"
|
|
72
|
+
:class="props.getClass(props.item)"
|
|
73
|
+
:label="props.item.label"
|
|
74
|
+
@click="props.toggle(props.item)"
|
|
75
|
+
>
|
|
76
|
+
<template
|
|
77
|
+
#append
|
|
78
|
+
>
|
|
79
|
+
<FSChip
|
|
80
|
+
:color="chartOriginColor(props.item.type)"
|
|
81
|
+
:label="chartOriginLabel(props.item.type)"
|
|
82
|
+
:editable="false"
|
|
83
|
+
/>
|
|
84
|
+
</template>
|
|
85
|
+
</FSButton>
|
|
86
|
+
</template>
|
|
87
|
+
</FSAutocompleteField>
|
|
88
|
+
</template>
|
|
89
|
+
|
|
90
|
+
<script lang="ts">
|
|
91
|
+
import { computed, defineComponent, PropType } from "vue";
|
|
92
|
+
|
|
93
|
+
import { ChartOrganisationFilters, ChartOrganisationTypeFilters, ChartOrigin } from "@dative-gpi/foundation-core-domain/models";
|
|
94
|
+
import { useChartOrganisations, useChartOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
|
|
95
|
+
import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
|
|
96
|
+
|
|
97
|
+
import { chartOriginColor, chartOriginLabel } from "../../utils";
|
|
98
|
+
|
|
99
|
+
import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
|
|
100
|
+
import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
|
|
101
|
+
import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
|
|
102
|
+
import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
|
|
103
|
+
import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
|
|
104
|
+
import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
|
|
105
|
+
import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
export default defineComponent({
|
|
109
|
+
name: "FSAutocompleteChart",
|
|
110
|
+
components: {
|
|
111
|
+
FSAutocompleteField,
|
|
112
|
+
FSCheckbox,
|
|
113
|
+
FSButton,
|
|
114
|
+
FSChip,
|
|
115
|
+
FSIcon,
|
|
116
|
+
FSSpan,
|
|
117
|
+
FSRow
|
|
118
|
+
},
|
|
119
|
+
props: {
|
|
120
|
+
chartOrganisationTypeFilters: {
|
|
121
|
+
type: Object as PropType<ChartOrganisationTypeFilters>,
|
|
122
|
+
required: false,
|
|
123
|
+
default: null
|
|
124
|
+
},
|
|
125
|
+
chartOrganisationFilters: {
|
|
126
|
+
type: Object as PropType<ChartOrganisationFilters>,
|
|
127
|
+
required: false,
|
|
128
|
+
default: null
|
|
129
|
+
},
|
|
130
|
+
modelValue: {
|
|
131
|
+
type: [Array, String] as PropType<string[] | string | null>,
|
|
132
|
+
required: false,
|
|
133
|
+
default: null
|
|
134
|
+
},
|
|
135
|
+
type: {
|
|
136
|
+
type: Number as PropType<ChartOrigin>,
|
|
137
|
+
required: false,
|
|
138
|
+
default: ChartOrigin.None
|
|
139
|
+
},
|
|
140
|
+
multiple: {
|
|
141
|
+
type: Boolean,
|
|
142
|
+
required: false,
|
|
143
|
+
default: false
|
|
144
|
+
},
|
|
145
|
+
toggleSetDisabled: {
|
|
146
|
+
type: Boolean,
|
|
147
|
+
required: false,
|
|
148
|
+
default: false
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
emits: ["update:modelValue", "update:type"],
|
|
152
|
+
setup(props, { emit }) {
|
|
153
|
+
const { getMany: getManyChartOrganisationTypes, fetching: fetchingChartOrganisationTypes, entities: chartOrganisationTypes } = useChartOrganisationTypes();
|
|
154
|
+
const { getMany: getManyChartOrganisations, fetching: fetchingChartOrganisations, entities: chartOrganisations } = useChartOrganisations();
|
|
155
|
+
|
|
156
|
+
const charts = computed(() => {
|
|
157
|
+
return chartOrganisationTypes.value.map(rot => ({
|
|
158
|
+
id: rot.id,
|
|
159
|
+
icon: rot.icon,
|
|
160
|
+
label: rot.label,
|
|
161
|
+
type: ChartOrigin.OrganisationType
|
|
162
|
+
})).concat(chartOrganisations.value.map(ro => ({
|
|
163
|
+
id: ro.id,
|
|
164
|
+
icon: ro.icon,
|
|
165
|
+
label: ro.label,
|
|
166
|
+
type: ChartOrigin.Organisation
|
|
167
|
+
})));
|
|
168
|
+
});
|
|
169
|
+
|
|
170
|
+
const loading = computed((): boolean => {
|
|
171
|
+
return init.value && (fetchingChartOrganisationTypes.value || fetchingChartOrganisations.value);
|
|
172
|
+
});
|
|
173
|
+
|
|
174
|
+
const innerUpdate = (value: Chart[] | Chart | null) => {
|
|
175
|
+
if (Array.isArray(value)) {
|
|
176
|
+
emit("update:modelValue", value.map(v => v.id));
|
|
177
|
+
emit("update:type", value.map(v => v.type));
|
|
178
|
+
}
|
|
179
|
+
else {
|
|
180
|
+
emit("update:modelValue", value?.id);
|
|
181
|
+
emit("update:type", value?.type);
|
|
182
|
+
}
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
const innerFetch = (search: string | null) => {
|
|
186
|
+
return Promise.all([
|
|
187
|
+
getManyChartOrganisationTypes({ ...props.chartOrganisationTypeFilters, search: search ?? undefined }),
|
|
188
|
+
getManyChartOrganisations({ ...props.chartOrganisationFilters, search: search ?? undefined })
|
|
189
|
+
]);
|
|
190
|
+
};
|
|
191
|
+
|
|
192
|
+
const { toggleSet, search, init, onUpdate } = useAutocomplete(
|
|
193
|
+
charts,
|
|
194
|
+
[() => props.chartOrganisationTypeFilters, () => props.chartOrganisationFilters],
|
|
195
|
+
emit,
|
|
196
|
+
innerFetch,
|
|
197
|
+
innerUpdate
|
|
198
|
+
);
|
|
199
|
+
|
|
200
|
+
return {
|
|
201
|
+
toggleSet,
|
|
202
|
+
loading,
|
|
203
|
+
search,
|
|
204
|
+
charts,
|
|
205
|
+
chartOriginColor,
|
|
206
|
+
chartOriginLabel,
|
|
207
|
+
onUpdate
|
|
208
|
+
};
|
|
209
|
+
}
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
interface Chart {
|
|
213
|
+
id: string;
|
|
214
|
+
icon: string;
|
|
215
|
+
label: string;
|
|
216
|
+
type: ChartOrigin;
|
|
217
|
+
}
|
|
218
|
+
</script>
|
|
@@ -90,9 +90,10 @@
|
|
|
90
90
|
<script lang="ts">
|
|
91
91
|
import { computed, defineComponent, PropType } from "vue";
|
|
92
92
|
|
|
93
|
-
import { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DashboardShallowFilters
|
|
93
|
+
import { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DashboardShallowFilters } from "@dative-gpi/foundation-core-domain/models";
|
|
94
94
|
import { useDashboardOrganisations, useDashboardOrganisationTypes, useDashboardShallows } from "@dative-gpi/foundation-core-services/composables";
|
|
95
95
|
import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
|
|
96
|
+
import { DashboardType } from "@dative-gpi/foundation-shared-domain/models";
|
|
96
97
|
|
|
97
98
|
import { dashboardTypeColor, dashboardTypeLabel } from "../../utils";
|
|
98
99
|
|
|
@@ -137,6 +138,11 @@ export default defineComponent({
|
|
|
137
138
|
required: false,
|
|
138
139
|
default: null
|
|
139
140
|
},
|
|
141
|
+
type: {
|
|
142
|
+
type: Number as PropType<DashboardType>,
|
|
143
|
+
required: false,
|
|
144
|
+
default: DashboardType.None
|
|
145
|
+
},
|
|
140
146
|
multiple: {
|
|
141
147
|
type: Boolean,
|
|
142
148
|
required: false,
|
|
@@ -60,6 +60,11 @@ export default defineComponent({
|
|
|
60
60
|
type: Object as PropType<{ [key: string]: any }>,
|
|
61
61
|
required: false,
|
|
62
62
|
default: () => ({})
|
|
63
|
+
},
|
|
64
|
+
customSortRaws: {
|
|
65
|
+
type: Object as PropType<{ [key: string]: any }>,
|
|
66
|
+
required: false,
|
|
67
|
+
default: () => ({})
|
|
63
68
|
}
|
|
64
69
|
},
|
|
65
70
|
setup(props) {
|
|
@@ -84,7 +89,8 @@ export default defineComponent({
|
|
|
84
89
|
return table.value.headers.map(header => {
|
|
85
90
|
return {
|
|
86
91
|
...header,
|
|
87
|
-
sort: header.value && props.customSorts[header.value] || null
|
|
92
|
+
sort: header.value && props.customSorts[header.value] || null,
|
|
93
|
+
sortRaw: header.value && props.customSortRaws[header.value] || null
|
|
88
94
|
}
|
|
89
95
|
})
|
|
90
96
|
});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dative-gpi/foundation-core-components",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.127",
|
|
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": "0.0.
|
|
14
|
-
"@dative-gpi/foundation-core-services": "0.0.
|
|
15
|
-
"@dative-gpi/foundation-shared-components": "0.0.
|
|
16
|
-
"@dative-gpi/foundation-shared-domain": "0.0.
|
|
17
|
-
"@dative-gpi/foundation-shared-services": "0.0.
|
|
13
|
+
"@dative-gpi/foundation-core-domain": "0.0.127",
|
|
14
|
+
"@dative-gpi/foundation-core-services": "0.0.127",
|
|
15
|
+
"@dative-gpi/foundation-shared-components": "0.0.127",
|
|
16
|
+
"@dative-gpi/foundation-shared-domain": "0.0.127",
|
|
17
|
+
"@dative-gpi/foundation-shared-services": "0.0.127",
|
|
18
18
|
"color": "^4.2.3",
|
|
19
19
|
"vue": "^3.4.23",
|
|
20
20
|
"vuedraggable": "^4.1.0"
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
"sass": "^1.69.5",
|
|
25
25
|
"sass-loader": "^13.3.2"
|
|
26
26
|
},
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "464227e786eb9133fbbbc22a4309bbf0d226612b"
|
|
28
28
|
}
|
package/utils/charts.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
2
|
+
import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
3
|
+
import { ChartOrigin } from "@dative-gpi/foundation-core-domain/models";
|
|
4
|
+
|
|
5
|
+
const { $tr } = useTranslationsProvider();
|
|
6
|
+
|
|
7
|
+
export const chartOriginLabel = (type: ChartOrigin): string => {
|
|
8
|
+
switch (type) {
|
|
9
|
+
case ChartOrigin.None: return $tr("ui.chart-type.none", "None");
|
|
10
|
+
case ChartOrigin.Organisation: return $tr("ui.chart-type.organisation", "Custom");
|
|
11
|
+
case ChartOrigin.OrganisationType: return $tr("ui.chart-type.organisation-type", "Shared");
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const chartOriginColor = (type: ChartOrigin): ColorBase => {
|
|
16
|
+
switch (type) {
|
|
17
|
+
case ChartOrigin.None: return ColorEnum.Error;
|
|
18
|
+
case ChartOrigin.Organisation: return ColorEnum.Primary;
|
|
19
|
+
case ChartOrigin.OrganisationType: return ColorEnum.Warning;
|
|
20
|
+
}
|
|
21
|
+
};
|
package/utils/dashboards.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
2
2
|
import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
3
|
-
import { DashboardType } from "@dative-gpi/foundation-
|
|
3
|
+
import { DashboardType } from "@dative-gpi/foundation-shared-domain/models"
|
|
4
4
|
|
|
5
5
|
const { $tr } = useTranslationsProvider();
|
|
6
6
|
|
|
7
7
|
export const dashboardTypeLabel = (type: DashboardType): string => {
|
|
8
8
|
switch (type) {
|
|
9
|
-
case DashboardType.None: return $tr("ui.
|
|
9
|
+
case DashboardType.None: return $tr("ui.dashboard-type.none", "None");
|
|
10
10
|
case DashboardType.Organisation:
|
|
11
|
-
case DashboardType.Shallow: return $tr("ui.
|
|
12
|
-
case DashboardType.OrganisationType: return $tr("ui.
|
|
11
|
+
case DashboardType.Shallow: return $tr("ui.dashboard-type.organisation", "Custom");
|
|
12
|
+
case DashboardType.OrganisationType: return $tr("ui.dashboard-type.organisation-type", "Shared");
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
15
|
|
package/utils/index.ts
CHANGED
package/utils/users.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
2
|
-
import { UserType } from "@dative-gpi/foundation-core-domain/models"
|
|
2
|
+
import { UserType, UserValidityState } from "@dative-gpi/foundation-core-domain/models"
|
|
3
3
|
|
|
4
4
|
const { $tr } = useTranslationsProvider();
|
|
5
5
|
|
|
@@ -17,4 +17,13 @@ export const userTypeIcon = (type: UserType): string => {
|
|
|
17
17
|
case UserType.ServiceAccount: return "mdi-puzzle-outline";
|
|
18
18
|
case UserType.Extension: return "mdi-cog-outline";
|
|
19
19
|
}
|
|
20
|
-
};
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export const UserValidityLabel = (validity: UserValidityState): string => {
|
|
23
|
+
switch (validity) {
|
|
24
|
+
case UserValidityState.InvitationNotSent: return $tr("ui.user-validity.invitation-not-sent", "Invitation not sent");
|
|
25
|
+
case UserValidityState.InvitationSent: return $tr("ui.user-validity.invitation-sent", "Invitation sent");
|
|
26
|
+
case UserValidityState.AccountCreated: return $tr("ui.user-validity.account-created", "Not validated");
|
|
27
|
+
case UserValidityState.AccountValidated: return $tr("ui.user-validity.account-validated", "Validated");
|
|
28
|
+
}
|
|
29
|
+
}
|