@dative-gpi/foundation-core-components 0.0.112 → 0.0.114
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/FSAutocompleteDashboard.vue +225 -0
- package/components/autocompletes/FSAutocompleteRole.vue +41 -1
- package/components/autocompletes/FSAutocompleteUserOrganisation.vue +3 -3
- package/package.json +7 -7
- package/utils/dashboards.ts +23 -0
- package/utils/index.ts +2 -0
- package/utils/roles.ts +21 -0
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSAutocompleteField
|
|
3
|
+
:toggleSet="!$props.toggleSetDisabled && toggleSet"
|
|
4
|
+
:multiple="$props.multiple"
|
|
5
|
+
:loading="loading"
|
|
6
|
+
:items="dashboards"
|
|
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="dashboardTypeColor(item.raw.type)"
|
|
29
|
+
:label="dashboardTypeLabel(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="dashboardTypeColor(item.raw.type)"
|
|
59
|
+
:label="dashboardTypeLabel(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="dashboardTypeColor(props.item.type)"
|
|
81
|
+
:label="dashboardTypeLabel(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 { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DashboardShallowFilters, DashboardType } from "@dative-gpi/foundation-core-domain/models";
|
|
94
|
+
import { useDashboardOrganisations, useDashboardOrganisationTypes, useDashboardShallows } from "@dative-gpi/foundation-core-services/composables";
|
|
95
|
+
import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
|
|
96
|
+
|
|
97
|
+
import { dashboardTypeColor, dashboardTypeLabel } 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: "FSAutocompleteDashboard",
|
|
110
|
+
components: {
|
|
111
|
+
FSAutocompleteField,
|
|
112
|
+
FSCheckbox,
|
|
113
|
+
FSButton,
|
|
114
|
+
FSChip,
|
|
115
|
+
FSIcon,
|
|
116
|
+
FSSpan,
|
|
117
|
+
FSRow
|
|
118
|
+
},
|
|
119
|
+
props: {
|
|
120
|
+
dashboardOrganisationTypeFilters: {
|
|
121
|
+
type: Object as PropType<DashboardOrganisationTypeFilters>,
|
|
122
|
+
required: false,
|
|
123
|
+
default: null
|
|
124
|
+
},
|
|
125
|
+
dashboardOrganisationFilters: {
|
|
126
|
+
type: Object as PropType<DashboardOrganisationFilters>,
|
|
127
|
+
required: false,
|
|
128
|
+
default: null
|
|
129
|
+
},
|
|
130
|
+
dashboardShallowFilters: {
|
|
131
|
+
type: Object as PropType<DashboardShallowFilters>,
|
|
132
|
+
required: false,
|
|
133
|
+
default: null
|
|
134
|
+
},
|
|
135
|
+
modelValue: {
|
|
136
|
+
type: [Array, String] as PropType<string[] | string | null>,
|
|
137
|
+
required: false,
|
|
138
|
+
default: null
|
|
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: getManyDashboardOrganisationTypes, fetching: fetchingDashboardOrganisationTypes, entities: dashboardOrganisationTypes } = useDashboardOrganisationTypes();
|
|
154
|
+
const { getMany: getManyDashboardOrganisations, fetching: fetchingDashboardOrganisations, entities: dashboardOrganisations } = useDashboardOrganisations();
|
|
155
|
+
const { getMany: getManyDashboardShallows, fetching: fetchingDashboardShallows, entities: dashboardShallows } = useDashboardShallows();
|
|
156
|
+
|
|
157
|
+
const dashboards = computed(() => {
|
|
158
|
+
return dashboardOrganisationTypes.value.map(rot => ({
|
|
159
|
+
id: rot.id,
|
|
160
|
+
icon: rot.icon,
|
|
161
|
+
label: rot.label,
|
|
162
|
+
type: DashboardType.OrganisationType
|
|
163
|
+
})).concat(dashboardOrganisations.value.map(ro => ({
|
|
164
|
+
id: ro.id,
|
|
165
|
+
icon: ro.icon,
|
|
166
|
+
label: ro.label,
|
|
167
|
+
type: DashboardType.Organisation
|
|
168
|
+
}))).concat(dashboardShallows.value.map(rs => ({
|
|
169
|
+
id: rs.id,
|
|
170
|
+
icon: rs.icon,
|
|
171
|
+
label: rs.label,
|
|
172
|
+
type: DashboardType.Shallow
|
|
173
|
+
})));
|
|
174
|
+
});
|
|
175
|
+
|
|
176
|
+
const loading = computed((): boolean => {
|
|
177
|
+
return init.value && (fetchingDashboardOrganisationTypes.value || fetchingDashboardOrganisations.value || fetchingDashboardShallows.value);
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
const innerUpdate = (value: Dashboard[] | Dashboard | null) => {
|
|
181
|
+
if (Array.isArray(value)) {
|
|
182
|
+
emit("update:modelValue", value.map(v => v.id));
|
|
183
|
+
emit("update:type", value.map(v => v.type));
|
|
184
|
+
}
|
|
185
|
+
else {
|
|
186
|
+
emit("update:modelValue", value?.id);
|
|
187
|
+
emit("update:type", value?.type);
|
|
188
|
+
}
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
const innerFetch = (search: string | null) => {
|
|
192
|
+
return Promise.all([
|
|
193
|
+
getManyDashboardOrganisationTypes({ ...props.dashboardOrganisationTypeFilters, search: search ?? undefined }),
|
|
194
|
+
getManyDashboardOrganisations({ ...props.dashboardOrganisationFilters, search: search ?? undefined }),
|
|
195
|
+
getManyDashboardShallows({ ...props.dashboardShallowFilters, search: search ?? undefined })
|
|
196
|
+
]);
|
|
197
|
+
};
|
|
198
|
+
|
|
199
|
+
const { toggleSet, search, init, onUpdate } = useAutocomplete(
|
|
200
|
+
dashboards,
|
|
201
|
+
[() => props.dashboardOrganisationTypeFilters, () => props.dashboardOrganisationFilters, () => props.dashboardShallowFilters],
|
|
202
|
+
emit,
|
|
203
|
+
innerFetch,
|
|
204
|
+
innerUpdate
|
|
205
|
+
);
|
|
206
|
+
|
|
207
|
+
return {
|
|
208
|
+
toggleSet,
|
|
209
|
+
loading,
|
|
210
|
+
search,
|
|
211
|
+
dashboards,
|
|
212
|
+
dashboardTypeColor,
|
|
213
|
+
dashboardTypeLabel,
|
|
214
|
+
onUpdate
|
|
215
|
+
};
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
|
+
|
|
219
|
+
interface Dashboard {
|
|
220
|
+
id: string;
|
|
221
|
+
icon: string;
|
|
222
|
+
label: string;
|
|
223
|
+
type: DashboardType;
|
|
224
|
+
}
|
|
225
|
+
</script>
|
|
@@ -24,6 +24,11 @@
|
|
|
24
24
|
<FSSpan>
|
|
25
25
|
{{ item.raw.label }}
|
|
26
26
|
</FSSpan>
|
|
27
|
+
<FSChip
|
|
28
|
+
:color="roleTypeColor(item.raw.type)"
|
|
29
|
+
:label="roleTypeLabel(item.raw.type)"
|
|
30
|
+
:editable="false"
|
|
31
|
+
/>
|
|
27
32
|
</FSRow>
|
|
28
33
|
</template>
|
|
29
34
|
<template
|
|
@@ -49,9 +54,36 @@
|
|
|
49
54
|
<FSSpan>
|
|
50
55
|
{{ item.raw.label }}
|
|
51
56
|
</FSSpan>
|
|
57
|
+
<FSChip
|
|
58
|
+
:color="roleTypeColor(item.raw.type)"
|
|
59
|
+
:label="roleTypeLabel(item.raw.type)"
|
|
60
|
+
:editable="false"
|
|
61
|
+
/>
|
|
52
62
|
</FSRow>
|
|
53
63
|
</v-list-item>
|
|
54
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="roleTypeColor(props.item.type)"
|
|
81
|
+
:label="roleTypeLabel(props.item.type)"
|
|
82
|
+
:editable="false"
|
|
83
|
+
/>
|
|
84
|
+
</template>
|
|
85
|
+
</FSButton>
|
|
86
|
+
</template>
|
|
55
87
|
</FSAutocompleteField>
|
|
56
88
|
</template>
|
|
57
89
|
|
|
@@ -62,18 +94,23 @@ import { RoleOrganisationFilters, RoleOrganisationTypeFilters, RoleType } from "
|
|
|
62
94
|
import { useRoleOrganisations, useRoleOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
|
|
63
95
|
import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
|
|
64
96
|
|
|
97
|
+
import { roleTypeColor, roleTypeLabel } from "../../utils";
|
|
98
|
+
|
|
65
99
|
import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
|
|
66
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";
|
|
67
103
|
import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
|
|
68
104
|
import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
|
|
69
105
|
import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
|
|
70
106
|
|
|
71
|
-
|
|
72
107
|
export default defineComponent({
|
|
73
108
|
name: "FSAutocompleteRole",
|
|
74
109
|
components: {
|
|
75
110
|
FSAutocompleteField,
|
|
76
111
|
FSCheckbox,
|
|
112
|
+
FSButton,
|
|
113
|
+
FSChip,
|
|
77
114
|
FSIcon,
|
|
78
115
|
FSSpan,
|
|
79
116
|
FSRow
|
|
@@ -156,9 +193,12 @@ export default defineComponent({
|
|
|
156
193
|
|
|
157
194
|
return {
|
|
158
195
|
toggleSet,
|
|
196
|
+
RoleType,
|
|
159
197
|
loading,
|
|
160
198
|
search,
|
|
161
199
|
roles,
|
|
200
|
+
roleTypeColor,
|
|
201
|
+
roleTypeLabel,
|
|
162
202
|
onUpdate
|
|
163
203
|
};
|
|
164
204
|
}
|
|
@@ -148,7 +148,7 @@ export default defineComponent({
|
|
|
148
148
|
return getManyUserOrganisations({ ...props.userOrganisationFilters, search: search ?? undefined });
|
|
149
149
|
};
|
|
150
150
|
|
|
151
|
-
const customFilter = (
|
|
151
|
+
const customFilter = (_: any, search: string, item: any): boolean => {
|
|
152
152
|
return item.raw.name.toLowerCase().includes(search.toLowerCase());
|
|
153
153
|
};
|
|
154
154
|
|
|
@@ -168,8 +168,8 @@ export default defineComponent({
|
|
|
168
168
|
toggleSet,
|
|
169
169
|
loading,
|
|
170
170
|
search,
|
|
171
|
-
|
|
172
|
-
|
|
171
|
+
customFilter,
|
|
172
|
+
onUpdate
|
|
173
173
|
};
|
|
174
174
|
}
|
|
175
175
|
});
|
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.114",
|
|
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.114",
|
|
14
|
+
"@dative-gpi/foundation-core-services": "0.0.114",
|
|
15
|
+
"@dative-gpi/foundation-shared-components": "0.0.114",
|
|
16
|
+
"@dative-gpi/foundation-shared-domain": "0.0.114",
|
|
17
|
+
"@dative-gpi/foundation-shared-services": "0.0.114",
|
|
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": "10b5d9cd947ab4de3f652d69bee6e2ec4f6a3d37"
|
|
28
28
|
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
2
|
+
import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
3
|
+
import { DashboardType } from "@dative-gpi/foundation-core-domain/models"
|
|
4
|
+
|
|
5
|
+
const { $tr } = useTranslationsProvider();
|
|
6
|
+
|
|
7
|
+
export const dashboardTypeLabel = (type: DashboardType): string => {
|
|
8
|
+
switch (type) {
|
|
9
|
+
case DashboardType.None: return $tr("ui.role-type.none", "None");
|
|
10
|
+
case DashboardType.Organisation:
|
|
11
|
+
case DashboardType.Shallow: return $tr("ui.role-type.organisation", "Custom");
|
|
12
|
+
case DashboardType.OrganisationType: return $tr("ui.role-type.organisation-type", "Shared");
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export const dashboardTypeColor = (type: DashboardType): ColorBase => {
|
|
17
|
+
switch (type) {
|
|
18
|
+
case DashboardType.None: return ColorEnum.Error;
|
|
19
|
+
case DashboardType.Organisation:
|
|
20
|
+
case DashboardType.Shallow: return ColorEnum.Primary;
|
|
21
|
+
case DashboardType.OrganisationType: return ColorEnum.Warning;
|
|
22
|
+
}
|
|
23
|
+
};
|
package/utils/index.ts
ADDED
package/utils/roles.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 { RoleType } from "@dative-gpi/foundation-core-domain/models"
|
|
4
|
+
|
|
5
|
+
const { $tr } = useTranslationsProvider();
|
|
6
|
+
|
|
7
|
+
export const roleTypeLabel = (type: RoleType): string => {
|
|
8
|
+
switch (type) {
|
|
9
|
+
case RoleType.None: return $tr("ui.role-type.none", "None");
|
|
10
|
+
case RoleType.Organisation: return $tr("ui.role-type.organisation", "Custom");
|
|
11
|
+
case RoleType.OrganisationType: return $tr("ui.role-type.organisation-type", "Shared");
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const roleTypeColor = (type: RoleType): ColorBase => {
|
|
16
|
+
switch (type) {
|
|
17
|
+
case RoleType.None: return ColorEnum.Error;
|
|
18
|
+
case RoleType.Organisation: return ColorEnum.Primary;
|
|
19
|
+
case RoleType.OrganisationType: return ColorEnum.Warning;
|
|
20
|
+
}
|
|
21
|
+
};
|