@dative-gpi/foundation-core-components 1.1.12 → 1.1.13
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/entities/FSEntityField.vue +3 -5
- package/components/entities/FSSelectEntitiesList.vue +4 -8
- package/components/entities/FSSimpleEntitiesList.vue +1 -3
- package/components/entities/FSTileEntitiesList.vue +1 -3
- package/components/explorers/FSBaseDashboardsExplorer.vue +312 -0
- package/components/explorers/FSDashboardExplorerElementTypeChip.vue +37 -0
- package/components/lists/dashboards/FSBaseDashboardsList.vue +40 -224
- package/components/lists/dashboards/FSSimpleDashboardsList.vue +27 -53
- package/components/lists/dashboards/FSTileDashboardsList.vue +30 -62
- package/components/lists/folders/FSBaseFoldersList.vue +1 -5
- package/package.json +7 -7
- package/utils/dashboards.ts +10 -28
- package/utils/tables.ts +11 -7
- package/components/explorers/FSBaseFoldersExplorer.vue +0 -337
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
defaultMode="iterator"
|
|
4
|
-
:items="items"
|
|
5
|
-
:itemTo="$props.itemTo"
|
|
6
|
-
:headersOptions="headersOptions"
|
|
7
|
-
:loading="fetchingDashboardOrganisationTypes || fetchingDashboardOrganisations || fetchingDashboardShallows"
|
|
2
|
+
<FSBaseDashboardsExplorer
|
|
8
3
|
:tableCode="$props.tableCode"
|
|
4
|
+
:allowedTypes="$props.allowedTypes"
|
|
5
|
+
:dashboardExplorerElementsFilters="$props.dashboardExplorerElementsFilters"
|
|
6
|
+
:itemTo="$props.itemTo"
|
|
9
7
|
:selectable="$props.selectable"
|
|
10
8
|
:singleSelect="$props.singleSelect"
|
|
11
|
-
:modelValue="
|
|
12
|
-
@update:modelValue="
|
|
9
|
+
:modelValue="$props.modelValue"
|
|
10
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
11
|
+
@update:types="onUpdateTypes"
|
|
13
12
|
v-bind="$attrs"
|
|
14
13
|
>
|
|
15
14
|
<template
|
|
@@ -21,117 +20,22 @@
|
|
|
21
20
|
v-bind="slotData"
|
|
22
21
|
/>
|
|
23
22
|
</template>
|
|
24
|
-
|
|
25
|
-
#item.icon="{ item }"
|
|
26
|
-
>
|
|
27
|
-
<FSIcon>
|
|
28
|
-
{{ item.icon }}
|
|
29
|
-
</FSIcon>
|
|
30
|
-
</template>
|
|
31
|
-
<template
|
|
32
|
-
#item.dashboardType="{ item }"
|
|
33
|
-
>
|
|
34
|
-
<FSChip
|
|
35
|
-
:color="ColorEnum.Light"
|
|
36
|
-
:label="dashboardTypeLabel(item.dashboardType)"
|
|
37
|
-
/>
|
|
38
|
-
</template>
|
|
39
|
-
<template
|
|
40
|
-
#item.main="{ item }"
|
|
41
|
-
>
|
|
42
|
-
<FSIcon
|
|
43
|
-
v-if="item.id === mainOrganisationDashboardId"
|
|
44
|
-
>
|
|
45
|
-
mdi-account-group-outline
|
|
46
|
-
</FSIcon>
|
|
47
|
-
<FSIcon
|
|
48
|
-
v-if="item.id === mainUserDashboardId"
|
|
49
|
-
>
|
|
50
|
-
mdi-home
|
|
51
|
-
</FSIcon>
|
|
52
|
-
</template>
|
|
53
|
-
<template
|
|
54
|
-
#item.tags="{ item }"
|
|
55
|
-
>
|
|
56
|
-
<FSTagGroup
|
|
57
|
-
variant="slide"
|
|
58
|
-
:showRemove="false"
|
|
59
|
-
:tags="item.tags"
|
|
60
|
-
/>
|
|
61
|
-
</template>
|
|
62
|
-
<template
|
|
63
|
-
#item.tile="{ index, item, toggleSelect }"
|
|
64
|
-
>
|
|
65
|
-
<FSDashboardOrganisationTypeTileUI
|
|
66
|
-
v-if="item.dashboardType == DashboardType.OrganisationType"
|
|
67
|
-
:key="index"
|
|
68
|
-
:bottomColor="item.colors"
|
|
69
|
-
:selectable="$props.selectable"
|
|
70
|
-
:singleSelect="$props.singleSelect"
|
|
71
|
-
:to="$props.itemTo && $props.itemTo(item)"
|
|
72
|
-
:modelValue="isSelected(item.id)"
|
|
73
|
-
@update:modelValue="toggleSelect(item)"
|
|
74
|
-
v-bind="item"
|
|
75
|
-
/>
|
|
76
|
-
<FSDashboardOrganisationTileUI
|
|
77
|
-
v-if="item.dashboardType == DashboardType.Organisation"
|
|
78
|
-
:key="index"
|
|
79
|
-
:bottomColor="item.colors"
|
|
80
|
-
:selectable="$props.selectable"
|
|
81
|
-
:singleSelect="$props.singleSelect"
|
|
82
|
-
:to="$props.itemTo && $props.itemTo(item)"
|
|
83
|
-
:modelValue="isSelected(item.id)"
|
|
84
|
-
@update:modelValue="toggleSelect(item)"
|
|
85
|
-
v-bind="item"
|
|
86
|
-
/>
|
|
87
|
-
<FSDashboardShallowTileUI
|
|
88
|
-
v-if="item.dashboardType == DashboardType.Shallow"
|
|
89
|
-
:key="index"
|
|
90
|
-
:bottomColor="item.colors"
|
|
91
|
-
:selectable="$props.selectable"
|
|
92
|
-
:singleSelect="$props.singleSelect"
|
|
93
|
-
:modelValue="isSelected(item.id)"
|
|
94
|
-
@update:modelValue="toggleSelect(item)"
|
|
95
|
-
:to="$props.itemTo && $props.itemTo(item)"
|
|
96
|
-
v-bind="item"
|
|
97
|
-
/>
|
|
98
|
-
</template>
|
|
99
|
-
</FSDataTable>
|
|
23
|
+
</FSBaseDashboardsExplorer>
|
|
100
24
|
</template>
|
|
101
25
|
|
|
102
26
|
<script lang="ts">
|
|
103
|
-
import
|
|
27
|
+
import { defineComponent, type PropType } from "vue";
|
|
104
28
|
import type { RouteLocation } from "vue-router";
|
|
105
|
-
import { computed, defineComponent, onMounted, type PropType, ref, watch } from "vue";
|
|
106
|
-
|
|
107
|
-
import { useAppOrganisationId, useCurrentUserOrganisation, useDashboardOrganisations, useDashboardOrganisationTypes, useDashboardShallows } from "@dative-gpi/foundation-core-services/composables";
|
|
108
|
-
import type { DashboardOrganisationTypeFilters, DashboardOrganisationFilters, DashboardShallowFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
|
|
109
|
-
import { useOrganisation } from "@dative-gpi/foundation-shared-services/composables";
|
|
110
29
|
|
|
111
|
-
import {
|
|
112
|
-
import {
|
|
113
|
-
import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
|
|
114
|
-
import { getEnumEntries } from '@dative-gpi/foundation-shared-domain';
|
|
30
|
+
import { DashboardExplorerElementType, DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
|
|
31
|
+
import type { DashboardExplorerElementFilters, DashboardExplorerElementInfos } from "@dative-gpi/foundation-core-domain/models";
|
|
115
32
|
|
|
116
|
-
import
|
|
117
|
-
import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
|
|
118
|
-
import FSDashboardShallowTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardShallowTileUI.vue";
|
|
119
|
-
import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
|
|
120
|
-
import FSDashboardOrganisationTypeTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTypeTileUI.vue";
|
|
121
|
-
|
|
122
|
-
import FSDataTable from "../FSDataTable.vue";
|
|
123
|
-
import FSChip from '@dative-gpi/foundation-shared-components/components/FSChip.vue';
|
|
33
|
+
import FSBaseDashboardsExplorer from "../../explorers/FSBaseDashboardsExplorer.vue";
|
|
124
34
|
|
|
125
35
|
export default defineComponent({
|
|
126
36
|
name: "FSBaseDashboardsList",
|
|
127
37
|
components: {
|
|
128
|
-
|
|
129
|
-
FSTagGroup,
|
|
130
|
-
FSChip,
|
|
131
|
-
FSIcon,
|
|
132
|
-
FSDashboardOrganisationTileUI,
|
|
133
|
-
FSDashboardOrganisationTypeTileUI,
|
|
134
|
-
FSDashboardShallowTileUI
|
|
38
|
+
FSBaseDashboardsExplorer
|
|
135
39
|
},
|
|
136
40
|
props: {
|
|
137
41
|
tableCode: {
|
|
@@ -139,23 +43,17 @@ export default defineComponent({
|
|
|
139
43
|
required: false,
|
|
140
44
|
default: null
|
|
141
45
|
},
|
|
142
|
-
|
|
143
|
-
type:
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
required: false
|
|
151
|
-
},
|
|
152
|
-
dashboardShallowsFilters: {
|
|
153
|
-
type: Object as PropType<DashboardShallowFilters>,
|
|
154
|
-
default: undefined,
|
|
155
|
-
required: false
|
|
46
|
+
allowedTypes: {
|
|
47
|
+
type: Array as PropType<DashboardExplorerElementType[]>,
|
|
48
|
+
required: false,
|
|
49
|
+
default: () => [
|
|
50
|
+
DashboardExplorerElementType.DashboardOrganisation,
|
|
51
|
+
DashboardExplorerElementType.DashboardShallow,
|
|
52
|
+
DashboardExplorerElementType.DashboardOrganisationType
|
|
53
|
+
]
|
|
156
54
|
},
|
|
157
55
|
itemTo: {
|
|
158
|
-
type: Function as PropType<(item:
|
|
56
|
+
type: Function as PropType<(item: DashboardExplorerElementInfos) => Partial<RouteLocation>>,
|
|
159
57
|
required: false
|
|
160
58
|
},
|
|
161
59
|
modelValue: {
|
|
@@ -173,109 +71,27 @@ export default defineComponent({
|
|
|
173
71
|
required: false,
|
|
174
72
|
default: false
|
|
175
73
|
},
|
|
74
|
+
dashboardExplorerElementsFilters: {
|
|
75
|
+
type: Object as PropType<DashboardExplorerElementFilters>,
|
|
76
|
+
required: false,
|
|
77
|
+
default: () => ({})
|
|
78
|
+
},
|
|
176
79
|
},
|
|
177
|
-
emits: ["update
|
|
178
|
-
setup(
|
|
179
|
-
const
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
const items = computed((): DashboardsListItem[] => {
|
|
189
|
-
return _.sortBy([
|
|
190
|
-
...dashboardOrganisationTypes.value.map(g => ({
|
|
191
|
-
...g,
|
|
192
|
-
dashboardType: DashboardType.OrganisationType
|
|
193
|
-
})) as DashboardsListItem[],
|
|
194
|
-
...dashboardOrganisations.value.map(d => ({
|
|
195
|
-
...d,
|
|
196
|
-
dashboardType: DashboardType.Organisation
|
|
197
|
-
})) as DashboardsListItem[],
|
|
198
|
-
...dashboardShallows.value.map(d => ({
|
|
199
|
-
...d,
|
|
200
|
-
dashboardType: DashboardType.Shallow
|
|
201
|
-
})) as DashboardsListItem[]
|
|
202
|
-
], d => d.label);
|
|
203
|
-
});
|
|
204
|
-
|
|
205
|
-
const headersOptions = computed(() => ({
|
|
206
|
-
dashboardType: {
|
|
207
|
-
fixedFilters: getEnumEntries(DashboardType).filter(e => e.value != DashboardType.None).map(e => ({
|
|
208
|
-
value: e.value,
|
|
209
|
-
text: dashboardTypeLabel(e.value)
|
|
210
|
-
})),
|
|
211
|
-
methodFilter: (value: DashboardType, item: DashboardType) => value == item
|
|
212
|
-
}
|
|
213
|
-
}));
|
|
214
|
-
|
|
215
|
-
const mainUserDashboardId = computed(() => {
|
|
216
|
-
return userOrganisation.value?.mainDashboardId;
|
|
217
|
-
});
|
|
218
|
-
|
|
219
|
-
const mainOrganisationDashboardId = computed(() => {
|
|
220
|
-
return organisation.value?.mainDashboardId;
|
|
221
|
-
});
|
|
222
|
-
|
|
223
|
-
const onSelect = (values: string[]) => {
|
|
224
|
-
selecteds.value = values;
|
|
225
|
-
const selectedItems = items.value.filter(i => selecteds.value!.includes(i.id));
|
|
226
|
-
const newModelValue = selectedItems.map(i => i.id);
|
|
227
|
-
const newType = selectedItems.map(i => i.dashboardType);
|
|
228
|
-
emit("update:modelValue", newModelValue);
|
|
229
|
-
emit("update:type", newType);
|
|
230
|
-
emit("update", { modelValue: newModelValue, type: newType });
|
|
231
|
-
};
|
|
232
|
-
|
|
233
|
-
const isSelected = (id: string) => {
|
|
234
|
-
return selecteds.value?.includes(id);
|
|
80
|
+
emits: ["update:modelValue", "update:types"],
|
|
81
|
+
setup(_, { emit }) {
|
|
82
|
+
const onUpdateTypes = (types: (DashboardExplorerElementType | undefined)[]): void => {
|
|
83
|
+
emit("update:types", types.map(t => {
|
|
84
|
+
switch (t) {
|
|
85
|
+
case DashboardExplorerElementType.DashboardOrganisation: return DashboardType.Organisation;
|
|
86
|
+
case DashboardExplorerElementType.DashboardShallow: return DashboardType.Shallow;
|
|
87
|
+
case DashboardExplorerElementType.DashboardOrganisationType: return DashboardType.OrganisationType;
|
|
88
|
+
default: return DashboardType.None;
|
|
89
|
+
}
|
|
90
|
+
}));
|
|
235
91
|
};
|
|
236
92
|
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
})
|
|
240
|
-
|
|
241
|
-
watch(() => organisationId.value, () => {
|
|
242
|
-
if (organisationId.value) {
|
|
243
|
-
getOrganisation(organisationId.value);
|
|
244
|
-
}
|
|
245
|
-
}, { immediate: true });
|
|
246
|
-
|
|
247
|
-
watch(() => props.dashboardOrganisationTypeFetchFilter, (next, previous) => {
|
|
248
|
-
if ((!next && !previous) || !_.isEqual(next, previous)) {
|
|
249
|
-
getManyDashboardOrganisationTypes(props.dashboardOrganisationTypeFetchFilter);
|
|
250
|
-
}
|
|
251
|
-
}, { immediate: true });
|
|
252
|
-
|
|
253
|
-
watch(() => props.dashboardOrganisationsFilters, (next, previous) => {
|
|
254
|
-
if ((!next && !previous) || !_.isEqual(next, previous)) {
|
|
255
|
-
getManyDashboardOrganisations(props.dashboardOrganisationsFilters);
|
|
256
|
-
}
|
|
257
|
-
}, { immediate: true });
|
|
258
|
-
|
|
259
|
-
watch(() => props.dashboardShallowsFilters, (next, previous) => {
|
|
260
|
-
if ((!next && !previous) || !_.isEqual(next, previous)) {
|
|
261
|
-
getManyDashboardShallows(props.dashboardShallowsFilters);
|
|
262
|
-
}
|
|
263
|
-
}, { immediate: true });
|
|
264
|
-
|
|
265
|
-
return {
|
|
266
|
-
fetchingDashboardOrganisationTypes,
|
|
267
|
-
fetchingDashboardOrganisations,
|
|
268
|
-
fetchingDashboardShallows,
|
|
269
|
-
headersOptions,
|
|
270
|
-
selecteds,
|
|
271
|
-
ColorEnum,
|
|
272
|
-
items,
|
|
273
|
-
mainUserDashboardId,
|
|
274
|
-
mainOrganisationDashboardId,
|
|
275
|
-
onSelect,
|
|
276
|
-
isSelected,
|
|
277
|
-
DashboardType,
|
|
278
|
-
dashboardTypeLabel
|
|
93
|
+
return {
|
|
94
|
+
onUpdateTypes
|
|
279
95
|
};
|
|
280
96
|
}
|
|
281
97
|
});
|
|
@@ -7,14 +7,11 @@
|
|
|
7
7
|
</template>
|
|
8
8
|
|
|
9
9
|
<script lang="ts">
|
|
10
|
-
import { defineComponent, type PropType,
|
|
11
|
-
import _ from "lodash";
|
|
10
|
+
import { defineComponent, type PropType, computed, watch } from "vue";
|
|
12
11
|
|
|
13
|
-
import
|
|
14
|
-
import {
|
|
15
|
-
|
|
16
|
-
import { DashboardType } from '@dative-gpi/foundation-shared-domain/enums';
|
|
17
|
-
import type { DashboardsListItem } from '@dative-gpi/foundation-core-components/utils';
|
|
12
|
+
import { DashboardExplorerElementType } from "@dative-gpi/foundation-shared-domain/enums";
|
|
13
|
+
import { useDashboardExplorerElements } from "@dative-gpi/foundation-core-services/composables";
|
|
14
|
+
import type { DashboardExplorerElementFilters, DashboardExplorerElementInfos } from "@dative-gpi/foundation-core-domain/models";
|
|
18
15
|
|
|
19
16
|
import FSSimpleList from "@dative-gpi/foundation-shared-components/components/lists/FSSimpleList.vue";
|
|
20
17
|
|
|
@@ -24,66 +21,43 @@ export default defineComponent({
|
|
|
24
21
|
FSSimpleList,
|
|
25
22
|
},
|
|
26
23
|
props: {
|
|
27
|
-
|
|
28
|
-
type:
|
|
29
|
-
required: false,
|
|
30
|
-
default: () => ({})
|
|
31
|
-
},
|
|
32
|
-
dashboardOrganisationTypeFilters: {
|
|
33
|
-
type: Object as PropType<DashboardOrganisationTypeFilters>,
|
|
24
|
+
allowedTypes: {
|
|
25
|
+
type: Array as PropType<DashboardExplorerElementType[]>,
|
|
34
26
|
required: false,
|
|
35
|
-
default: () =>
|
|
27
|
+
default: () => [
|
|
28
|
+
DashboardExplorerElementType.DashboardOrganisation,
|
|
29
|
+
DashboardExplorerElementType.DashboardShallow,
|
|
30
|
+
DashboardExplorerElementType.DashboardOrganisationType
|
|
31
|
+
]
|
|
36
32
|
},
|
|
37
|
-
|
|
38
|
-
type: Object as PropType<
|
|
33
|
+
dashboardExplorerElementsFilters: {
|
|
34
|
+
type: Object as PropType<DashboardExplorerElementFilters>,
|
|
39
35
|
required: false,
|
|
40
|
-
default:
|
|
36
|
+
default: () => ({})
|
|
41
37
|
}
|
|
42
38
|
},
|
|
43
|
-
setup(props){
|
|
44
|
-
const { entities
|
|
45
|
-
getMany: getManyDashboardOrganisations,
|
|
46
|
-
fetching: fetchingDashboardOrganisations } = useDashboardOrganisations();
|
|
47
|
-
const { entities: dashboardOrganisationTypes,
|
|
48
|
-
getMany: getManyDashboardOrganisationTypes,
|
|
49
|
-
fetching: fetchingDashboardOrganisationTypes } = useDashboardOrganisationTypes();
|
|
50
|
-
const { entities: dashboardShallows,
|
|
51
|
-
getMany: getManyDashboardShallows,
|
|
52
|
-
fetching: fetchingDashboardShallows } = useDashboardShallows();
|
|
39
|
+
setup(props) {
|
|
40
|
+
const { entities, fetching, getMany } = useDashboardExplorerElements();
|
|
53
41
|
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
const dashboards = computed((): DashboardsListItem[] => {
|
|
59
|
-
return _.sortBy([
|
|
60
|
-
...dashboardOrganisationTypes.value.map(g => ({
|
|
61
|
-
...g,
|
|
62
|
-
dashboardType: DashboardType.OrganisationType
|
|
63
|
-
})) satisfies DashboardsListItem[],
|
|
64
|
-
...dashboardOrganisations.value.map(d => ({
|
|
65
|
-
...d,
|
|
66
|
-
dashboardType: DashboardType.Organisation
|
|
67
|
-
})) as DashboardsListItem[],
|
|
68
|
-
...dashboardShallows.value.map(d => ({
|
|
69
|
-
...d,
|
|
70
|
-
dashboardType: DashboardType.Shallow
|
|
71
|
-
})) as DashboardsListItem[]
|
|
72
|
-
], d => d.label);
|
|
42
|
+
const dashboards = computed((): DashboardExplorerElementInfos[] => {
|
|
43
|
+
return entities.value
|
|
44
|
+
.filter(e => props.allowedTypes.includes(e.type))
|
|
45
|
+
.sort((a, b) => a.label.localeCompare(b.label));
|
|
73
46
|
});
|
|
74
47
|
|
|
75
48
|
const fetch = () => {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
49
|
+
getMany({
|
|
50
|
+
types: props.allowedTypes,
|
|
51
|
+
...props.dashboardExplorerElementsFilters
|
|
52
|
+
});
|
|
53
|
+
};
|
|
80
54
|
|
|
81
|
-
watch(() =>
|
|
55
|
+
watch(() => props.dashboardExplorerElementsFilters, fetch, { immediate: true });
|
|
82
56
|
|
|
83
57
|
return {
|
|
84
58
|
dashboards,
|
|
85
59
|
fetching
|
|
86
|
-
}
|
|
60
|
+
};
|
|
87
61
|
}
|
|
88
62
|
});
|
|
89
63
|
</script>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
#item.tile="{ item, toggleSelect, direction }"
|
|
12
12
|
>
|
|
13
13
|
<FSDashboardOrganisationTileUI
|
|
14
|
-
v-if="item.
|
|
14
|
+
v-if="item.type === DashboardExplorerElementType.DashboardOrganisation"
|
|
15
15
|
:code="item.code"
|
|
16
16
|
:icon="item.icon"
|
|
17
17
|
:label="item.label"
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
@update:modelValue="toggleSelect(item)"
|
|
24
24
|
/>
|
|
25
25
|
<FSDashboardOrganisationTypeTileUI
|
|
26
|
-
v-else-if="item.
|
|
26
|
+
v-else-if="item.type === DashboardExplorerElementType.DashboardOrganisationType"
|
|
27
27
|
:code="item.code"
|
|
28
28
|
:icon="item.icon"
|
|
29
29
|
:label="item.label"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
@update:modelValue="toggleSelect(item)"
|
|
36
36
|
/>
|
|
37
37
|
<FSDashboardShallowTileUI
|
|
38
|
-
v-else-if="item.
|
|
38
|
+
v-else-if="item.type === DashboardExplorerElementType.DashboardShallow"
|
|
39
39
|
:code="item.code"
|
|
40
40
|
:icon="item.icon"
|
|
41
41
|
:label="item.label"
|
|
@@ -51,23 +51,17 @@
|
|
|
51
51
|
</template>
|
|
52
52
|
|
|
53
53
|
<script lang="ts">
|
|
54
|
-
import { defineComponent, type PropType,
|
|
55
|
-
import _ from "lodash";
|
|
54
|
+
import { defineComponent, type PropType, computed, watch } from "vue";
|
|
56
55
|
|
|
57
|
-
import
|
|
58
|
-
import {
|
|
59
|
-
|
|
60
|
-
import { DashboardType } from '@dative-gpi/foundation-shared-domain/enums';
|
|
61
|
-
import type { DashboardsListItem } from '@dative-gpi/foundation-core-components/utils';
|
|
56
|
+
import { DashboardExplorerElementType, ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
|
|
57
|
+
import { useDashboardExplorerElements } from "@dative-gpi/foundation-core-services/composables";
|
|
58
|
+
import type { DashboardExplorerElementFilters, DashboardExplorerElementInfos } from "@dative-gpi/foundation-core-domain/models";
|
|
62
59
|
|
|
63
60
|
import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
|
|
64
61
|
import FSDashboardOrganisationTypeTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTypeTileUI.vue";
|
|
65
62
|
import FSDashboardShallowTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardShallowTileUI.vue";
|
|
66
63
|
import FSTileList from "@dative-gpi/foundation-shared-components/components/lists/FSTileList.vue";
|
|
67
64
|
|
|
68
|
-
import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
|
|
69
|
-
|
|
70
|
-
|
|
71
65
|
export default defineComponent({
|
|
72
66
|
name: "FSTileDashboardsList",
|
|
73
67
|
components: {
|
|
@@ -77,20 +71,14 @@ export default defineComponent({
|
|
|
77
71
|
FSDashboardShallowTileUI
|
|
78
72
|
},
|
|
79
73
|
props: {
|
|
80
|
-
|
|
81
|
-
type:
|
|
74
|
+
allowedTypes: {
|
|
75
|
+
type: Array as PropType<DashboardExplorerElementType[]>,
|
|
82
76
|
required: false,
|
|
83
|
-
default: () =>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
default: () => ({})
|
|
89
|
-
},
|
|
90
|
-
dashboardShallowFilters: {
|
|
91
|
-
type: Object as PropType<DashboardShallowFilters>,
|
|
92
|
-
required: false,
|
|
93
|
-
default: () => ({})
|
|
77
|
+
default: () => [
|
|
78
|
+
DashboardExplorerElementType.DashboardOrganisation,
|
|
79
|
+
DashboardExplorerElementType.DashboardShallow,
|
|
80
|
+
DashboardExplorerElementType.DashboardOrganisationType
|
|
81
|
+
]
|
|
94
82
|
},
|
|
95
83
|
modelValue: {
|
|
96
84
|
type: Array as PropType<string[]>,
|
|
@@ -101,56 +89,36 @@ export default defineComponent({
|
|
|
101
89
|
type: Boolean,
|
|
102
90
|
required: false,
|
|
103
91
|
default: false
|
|
92
|
+
},
|
|
93
|
+
dashboardExplorerElementsFilters: {
|
|
94
|
+
type: Object as PropType<DashboardExplorerElementFilters>,
|
|
95
|
+
required: false,
|
|
96
|
+
default: () => ({})
|
|
104
97
|
}
|
|
105
98
|
},
|
|
106
99
|
emits: ["update:modelValue"],
|
|
107
100
|
setup(props) {
|
|
108
|
-
const { entities
|
|
109
|
-
getMany: getManyDashboardOrganisations,
|
|
110
|
-
fetching: fetchingDashboardOrganisations } = useDashboardOrganisations();
|
|
111
|
-
const { entities: dashboardOrganisationTypes,
|
|
112
|
-
getMany: getManyDashboardOrganisationTypes,
|
|
113
|
-
fetching: fetchingDashboardOrganisationTypes } = useDashboardOrganisationTypes();
|
|
114
|
-
const { entities: dashboardShallows,
|
|
115
|
-
getMany: getManyDashboardShallows,
|
|
116
|
-
fetching: fetchingDashboardShallows } = useDashboardShallows();
|
|
101
|
+
const { entities, fetching, getMany } = useDashboardExplorerElements();
|
|
117
102
|
|
|
118
|
-
const
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
const dashboards = computed((): DashboardsListItem[] => {
|
|
123
|
-
return _.sortBy([
|
|
124
|
-
...dashboardOrganisationTypes.value.map(g => ({
|
|
125
|
-
...g,
|
|
126
|
-
dashboardType: DashboardType.OrganisationType
|
|
127
|
-
})) satisfies DashboardsListItem[],
|
|
128
|
-
...dashboardOrganisations.value.map(d => ({
|
|
129
|
-
...d,
|
|
130
|
-
dashboardType: DashboardType.Organisation
|
|
131
|
-
})) as DashboardsListItem[],
|
|
132
|
-
...dashboardShallows.value.map(d => ({
|
|
133
|
-
...d,
|
|
134
|
-
dashboardType: DashboardType.Shallow
|
|
135
|
-
})) as DashboardsListItem[]
|
|
136
|
-
], d => d.label);
|
|
103
|
+
const dashboards = computed((): DashboardExplorerElementInfos[] => {
|
|
104
|
+
return entities.value
|
|
105
|
+
.filter(e => props.allowedTypes.includes(e.type))
|
|
106
|
+
.sort((a, b) => a.label.localeCompare(b.label));
|
|
137
107
|
});
|
|
138
108
|
|
|
139
109
|
const fetch = () => {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
110
|
+
getMany({
|
|
111
|
+
types: props.allowedTypes,
|
|
112
|
+
...props.dashboardExplorerElementsFilters
|
|
113
|
+
});
|
|
143
114
|
};
|
|
144
115
|
|
|
145
|
-
watch(
|
|
146
|
-
[() => props.dashboardOrganisationFilters, () => props.dashboardOrganisationTypeFilters, () => props.dashboardShallowFilters],
|
|
147
|
-
fetch,
|
|
148
|
-
{ immediate: true });
|
|
116
|
+
watch(() => props.dashboardExplorerElementsFilters, fetch, { immediate: true });
|
|
149
117
|
|
|
150
118
|
return {
|
|
151
119
|
dashboards,
|
|
152
120
|
fetching,
|
|
153
|
-
|
|
121
|
+
DashboardExplorerElementType,
|
|
154
122
|
ListDirections
|
|
155
123
|
};
|
|
156
124
|
}
|
|
@@ -58,8 +58,6 @@ import { defineComponent, type PropType, watch } from "vue";
|
|
|
58
58
|
|
|
59
59
|
import { useFolders } from "@dative-gpi/foundation-core-services/composables";
|
|
60
60
|
|
|
61
|
-
import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
|
|
62
|
-
import { FoldersListType } from "@dative-gpi/foundation-core-components/utils";
|
|
63
61
|
import type { FolderFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
|
|
64
62
|
|
|
65
63
|
import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
|
|
@@ -119,9 +117,7 @@ export default defineComponent({
|
|
|
119
117
|
fetchingFolders,
|
|
120
118
|
folders,
|
|
121
119
|
onSelect,
|
|
122
|
-
isSelected
|
|
123
|
-
FoldersListType,
|
|
124
|
-
DashboardType
|
|
120
|
+
isSelected
|
|
125
121
|
};
|
|
126
122
|
}
|
|
127
123
|
});
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
|
|
5
5
|
},
|
|
6
6
|
"sideEffects": false,
|
|
7
|
-
"version": "1.1.
|
|
7
|
+
"version": "1.1.13",
|
|
8
8
|
"description": "",
|
|
9
9
|
"publishConfig": {
|
|
10
10
|
"access": "public"
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"author": "",
|
|
14
14
|
"license": "ISC",
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@dative-gpi/foundation-core-domain": "1.1.
|
|
17
|
-
"@dative-gpi/foundation-core-services": "1.1.
|
|
18
|
-
"@dative-gpi/foundation-shared-components": "1.1.
|
|
19
|
-
"@dative-gpi/foundation-shared-domain": "1.1.
|
|
20
|
-
"@dative-gpi/foundation-shared-services": "1.1.
|
|
16
|
+
"@dative-gpi/foundation-core-domain": "1.1.13",
|
|
17
|
+
"@dative-gpi/foundation-core-services": "1.1.13",
|
|
18
|
+
"@dative-gpi/foundation-shared-components": "1.1.13",
|
|
19
|
+
"@dative-gpi/foundation-shared-domain": "1.1.13",
|
|
20
|
+
"@dative-gpi/foundation-shared-services": "1.1.13"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"@dative-gpi/bones-ui": "^1.0.0",
|
|
@@ -29,5 +29,5 @@
|
|
|
29
29
|
"sass": "1.71.1",
|
|
30
30
|
"sass-loader": "13.3.2"
|
|
31
31
|
},
|
|
32
|
-
"gitHead": "
|
|
32
|
+
"gitHead": "808ff91c2715ee0c9201227529471b0a428861c1"
|
|
33
33
|
}
|
package/utils/dashboards.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import type { DashboardOrganisationInfos, DashboardOrganisationTypeInfos, DashboardShallowInfos, FolderInfos } from "@dative-gpi/foundation-core-domain/models";
|
|
2
1
|
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
3
2
|
import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
4
|
-
import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
|
|
3
|
+
import { DashboardExplorerElementType, DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
|
|
5
4
|
|
|
6
5
|
const { $tr } = useTranslationsProvider();
|
|
7
6
|
|
|
@@ -23,29 +22,12 @@ export const dashboardTypeColor = (type: DashboardType): ColorBase => {
|
|
|
23
22
|
}
|
|
24
23
|
};
|
|
25
24
|
|
|
26
|
-
export
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export interface OrganisationTypeDashboardListItem extends DashboardOrganisationTypeInfos {
|
|
37
|
-
dashboardType: DashboardType.OrganisationType
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export interface FolderListItem extends FolderInfos {
|
|
41
|
-
dashboardType: DashboardType.None
|
|
42
|
-
type: FoldersListType.Folder
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
export enum FoldersListType {
|
|
46
|
-
Dashboard = "dashboard",
|
|
47
|
-
Folder = "folder"
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export type DashboardsListItem = DashboardShallowListItem | DashboardOrganisationListItem | OrganisationTypeDashboardListItem;
|
|
51
|
-
export type FoldersListItem = DashboardShallowListItem | DashboardOrganisationListItem | FolderListItem;
|
|
25
|
+
export const dashboardExplorerElementTypeLabel = (type: DashboardExplorerElementType): string => {
|
|
26
|
+
switch (type) {
|
|
27
|
+
case DashboardExplorerElementType.Folder: return $tr("ui.common.folder", "Folder");
|
|
28
|
+
case DashboardExplorerElementType.DashboardOrganisation: return $tr("ui.common.custom", "Custom");
|
|
29
|
+
case DashboardExplorerElementType.DashboardShallow: return $tr("ui.dashboard-type.shallow", "Shallow copy");
|
|
30
|
+
case DashboardExplorerElementType.DashboardOrganisationType: return $tr("ui.common.shared", "Shared");
|
|
31
|
+
default: return $tr("ui.common.none", "None");
|
|
32
|
+
}
|
|
33
|
+
};
|