@dative-gpi/foundation-core-components 1.0.59 → 1.0.61
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/FSBaseEntitiesList.vue +2 -2
- package/components/entities/FSDialogSelectEntities.vue +55 -3
- package/components/explorers/FSBaseFoldersExplorer.vue +235 -0
- package/components/lists/FSDataTable.vue +3 -0
- package/components/lists/alerts/FSBaseAlertsList.vue +16 -7
- package/components/lists/deviceOrganisations/FSBaseDeviceOrganisationsList.vue +13 -3
- package/components/lists/folders/FSBaseFoldersList.vue +16 -136
- package/components/lists/groups/FSBaseGroupsList.vue +11 -4
- package/components/lists/locations/FSBaseLocationsList.vue +45 -9
- package/components/lists/models/FSBaseModelsList.vue +15 -9
- package/components/lists/roleOrganisationTypes/FSBaseRoleOrganisationTypesList.vue +15 -9
- package/components/lists/roleOrganisations/FSBaseRoleOrganisationsList.vue +15 -9
- package/components/lists/scenarioOrganisationTypes/FSBaseScenarioOrganisationTypesList.vue +15 -9
- package/components/lists/scenarioOrganisations/FSBaseScenarioOrganisationsList.vue +15 -9
- package/components/lists/scenarios/FSBaseScenariosList.vue +13 -7
- package/components/lists/serviceAccountOrganisations/FSBaseServiceAccountOrganisationsList.vue +21 -17
- package/components/lists/userOrganisations/FSBaseUserOrganisationsList.vue +18 -15
- package/components/tiles/FSDeviceOrganisationTile.vue +9 -2
- package/components/treeviews/FSTreeViewFolder.vue +15 -3
- package/components/treeviews/FSTreeViewGroup.vue +15 -3
- package/package.json +7 -7
|
@@ -35,8 +35,8 @@ export default defineComponent({
|
|
|
35
35
|
return defineAsyncComponent(() => import("../lists/groups/FSBaseGroupsList.vue"));
|
|
36
36
|
case EntityType.Location:
|
|
37
37
|
return defineAsyncComponent(() => import("../lists/locations/FSBaseLocationsList.vue"));
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
case EntityType.Model:
|
|
39
|
+
return defineAsyncComponent(() => import("../lists/models/FSBaseModelsList.vue"));
|
|
40
40
|
default:
|
|
41
41
|
return null;
|
|
42
42
|
};
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
import { defineComponent, type PropType, computed, ref, watch } from "vue";
|
|
64
64
|
|
|
65
65
|
import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
|
|
66
|
-
import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DeviceOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
|
|
66
|
+
import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DeviceOrganisationFilters, FolderFilters, GroupFilters, LocationFilters, ModelFilters, UserOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
|
|
67
67
|
|
|
68
68
|
import { TABLES as T } from "../../utils";
|
|
69
69
|
|
|
@@ -121,9 +121,29 @@ export default defineComponent({
|
|
|
121
121
|
} satisfies DeviceOrganisationFilters;
|
|
122
122
|
case EntityType.Dashboard:
|
|
123
123
|
return {
|
|
124
|
-
|
|
125
|
-
|
|
124
|
+
dashboardOrganisationsIds: actualSelecteds.value,
|
|
125
|
+
dashboardOrganisationTypesIds: actualSelecteds.value
|
|
126
126
|
} satisfies DashboardOrganisationFilters & DashboardOrganisationTypeFilters;
|
|
127
|
+
case EntityType.Group:
|
|
128
|
+
return {
|
|
129
|
+
groupsIds: actualSelecteds.value
|
|
130
|
+
} satisfies GroupFilters;
|
|
131
|
+
case EntityType.Folder:
|
|
132
|
+
return {
|
|
133
|
+
foldersIds: actualSelecteds.value
|
|
134
|
+
} satisfies FolderFilters;
|
|
135
|
+
case EntityType.Location:
|
|
136
|
+
return {
|
|
137
|
+
locationsIds: actualSelecteds.value
|
|
138
|
+
} satisfies LocationFilters;
|
|
139
|
+
case EntityType.User:
|
|
140
|
+
return {
|
|
141
|
+
userOrganisationsIds: actualSelecteds.value
|
|
142
|
+
} satisfies UserOrganisationFilters;
|
|
143
|
+
case EntityType.Model:
|
|
144
|
+
return {
|
|
145
|
+
modelsIds: actualSelecteds.value
|
|
146
|
+
} satisfies ModelFilters;
|
|
127
147
|
default:
|
|
128
148
|
return undefined;
|
|
129
149
|
};
|
|
@@ -145,6 +165,38 @@ export default defineComponent({
|
|
|
145
165
|
deviceOrganisationFilters: props.filters,
|
|
146
166
|
...attrs
|
|
147
167
|
};
|
|
168
|
+
case EntityType.Dashboard:
|
|
169
|
+
return {
|
|
170
|
+
dashboardShallowsFilters: props.filters,
|
|
171
|
+
dashboardOrganisationsFilters: props.filters,
|
|
172
|
+
dashboardOrganisationTypeFetchFilter: props.filters,
|
|
173
|
+
...attrs
|
|
174
|
+
};
|
|
175
|
+
case EntityType.Group:
|
|
176
|
+
return {
|
|
177
|
+
groupsFilters: props.filters,
|
|
178
|
+
...attrs
|
|
179
|
+
};
|
|
180
|
+
case EntityType.Folder:
|
|
181
|
+
return {
|
|
182
|
+
foldersFilters: props.filters,
|
|
183
|
+
...attrs
|
|
184
|
+
};
|
|
185
|
+
case EntityType.Location:
|
|
186
|
+
return {
|
|
187
|
+
locationsFilters: props.filters,
|
|
188
|
+
...attrs
|
|
189
|
+
};
|
|
190
|
+
case EntityType.User:
|
|
191
|
+
return {
|
|
192
|
+
userOrganisationsFilters: props.filters,
|
|
193
|
+
...attrs
|
|
194
|
+
};
|
|
195
|
+
case EntityType.Model:
|
|
196
|
+
return {
|
|
197
|
+
modelsFilters: props.filters,
|
|
198
|
+
...attrs
|
|
199
|
+
};
|
|
148
200
|
default:
|
|
149
201
|
return null;
|
|
150
202
|
};
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSDataTable
|
|
3
|
+
:items="items"
|
|
4
|
+
:item-to="$props.itemTo"
|
|
5
|
+
:loading="fetchingFolders || fetchingDashboardOrganisations || fetchingDashboardShallows"
|
|
6
|
+
:tableCode="$props.tableCode"
|
|
7
|
+
:modelValue="selecteds"
|
|
8
|
+
@update:modelValue="onSelect"
|
|
9
|
+
v-bind="$attrs"
|
|
10
|
+
>
|
|
11
|
+
<template
|
|
12
|
+
v-for="(_, name) in $slots"
|
|
13
|
+
v-slot:[name]="slotData"
|
|
14
|
+
>
|
|
15
|
+
<slot
|
|
16
|
+
:name="name"
|
|
17
|
+
v-bind="slotData"
|
|
18
|
+
/>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<template
|
|
22
|
+
#item.main="{ item }"
|
|
23
|
+
>
|
|
24
|
+
<FSIcon
|
|
25
|
+
v-if="item.id === mainOrganisationDashboardId"
|
|
26
|
+
>
|
|
27
|
+
mdi-account-group-outline
|
|
28
|
+
</FSIcon>
|
|
29
|
+
<FSIcon
|
|
30
|
+
v-if="item.id === mainUserDashboardId"
|
|
31
|
+
>
|
|
32
|
+
mdi-home
|
|
33
|
+
</FSIcon>
|
|
34
|
+
</template>
|
|
35
|
+
|
|
36
|
+
<template
|
|
37
|
+
#item.icon="{ item }"
|
|
38
|
+
>
|
|
39
|
+
<FSIcon>
|
|
40
|
+
{{ item.icon }}
|
|
41
|
+
</FSIcon>
|
|
42
|
+
</template>
|
|
43
|
+
|
|
44
|
+
<template
|
|
45
|
+
#item.tile="{ item, toggleSelect }"
|
|
46
|
+
>
|
|
47
|
+
<FSFolderTileUI
|
|
48
|
+
v-if="item.type == FoldersListType.Folder"
|
|
49
|
+
:bottomColor="item.colors"
|
|
50
|
+
v-bind="item"
|
|
51
|
+
:modelValue="isSelected(item.id)"
|
|
52
|
+
@update:modelValue="toggleSelect(item)"
|
|
53
|
+
:to="$props.itemTo && $props.itemTo(item)"
|
|
54
|
+
/>
|
|
55
|
+
<FSDashboardOrganisationTileUI
|
|
56
|
+
v-if="item.type == FoldersListType.Dashboard && item.dashboardType == DashboardType.Organisation"
|
|
57
|
+
:bottomColor="item.colors"
|
|
58
|
+
:modelValue="isSelected(item.id)"
|
|
59
|
+
@update:modelValue="toggleSelect(item)"
|
|
60
|
+
:to="$props.itemTo && $props.itemTo(item)"
|
|
61
|
+
v-bind="item"
|
|
62
|
+
/>
|
|
63
|
+
<FSDashboardShallowTileUI
|
|
64
|
+
v-if="item.type == FoldersListType.Dashboard && item.dashboardType == DashboardType.Shallow"
|
|
65
|
+
:bottomColor="item.colors"
|
|
66
|
+
:modelValue="isSelected(item.id)"
|
|
67
|
+
@update:modelValue="toggleSelect(item)"
|
|
68
|
+
:to="$props.itemTo && $props.itemTo(item)"
|
|
69
|
+
v-bind="item"
|
|
70
|
+
/>
|
|
71
|
+
</template>
|
|
72
|
+
</FSDataTable>
|
|
73
|
+
</template>
|
|
74
|
+
|
|
75
|
+
<script lang="ts">
|
|
76
|
+
import _ from "lodash";
|
|
77
|
+
import type { PropType} from "vue";
|
|
78
|
+
import type { RouteLocation } from "vue-router";
|
|
79
|
+
import { computed, defineComponent, onMounted, ref, watch } from "vue";
|
|
80
|
+
|
|
81
|
+
import { useOrganisation } from "@dative-gpi/foundation-shared-services/composables";
|
|
82
|
+
import { useDashboardOrganisations, useFolders, useDashboardShallows, useAppOrganisationId, useCurrentUserOrganisation } from "@dative-gpi/foundation-core-services/composables";
|
|
83
|
+
|
|
84
|
+
import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
|
|
85
|
+
import { FoldersListType, type FoldersListItem } from "@dative-gpi/foundation-core-components/utils";
|
|
86
|
+
import type { FolderFilters, DashboardOrganisationFilters, DashboardShallowFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
|
|
87
|
+
|
|
88
|
+
import FSDataTable from "../lists/FSDataTable.vue";
|
|
89
|
+
import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
|
|
90
|
+
import FSFolderTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSFolderTileUI.vue";
|
|
91
|
+
import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
|
|
92
|
+
import FSDashboardShallowTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardShallowTileUI.vue";
|
|
93
|
+
|
|
94
|
+
export default defineComponent({
|
|
95
|
+
name: "FSBaseFoldersExplorer",
|
|
96
|
+
components: {
|
|
97
|
+
FSDataTable,
|
|
98
|
+
FSIcon,
|
|
99
|
+
FSFolderTileUI,
|
|
100
|
+
FSDashboardOrganisationTileUI,
|
|
101
|
+
FSDashboardShallowTileUI
|
|
102
|
+
},
|
|
103
|
+
props: {
|
|
104
|
+
foldersFilters: {
|
|
105
|
+
type: Object as PropType<FolderFilters>,
|
|
106
|
+
default: undefined,
|
|
107
|
+
required: false
|
|
108
|
+
},
|
|
109
|
+
dashboardOrganisationsFilters: {
|
|
110
|
+
type: Object as PropType<DashboardOrganisationFilters>,
|
|
111
|
+
default: undefined,
|
|
112
|
+
required: false
|
|
113
|
+
},
|
|
114
|
+
dashboardShallowsFilters: {
|
|
115
|
+
type: Object as PropType<DashboardShallowFilters>,
|
|
116
|
+
default: undefined,
|
|
117
|
+
required: false
|
|
118
|
+
},
|
|
119
|
+
modelValue: {
|
|
120
|
+
type: Array as PropType<string[]>,
|
|
121
|
+
required: false,
|
|
122
|
+
default: () => []
|
|
123
|
+
},
|
|
124
|
+
itemTo: {
|
|
125
|
+
type: Function as PropType<(item: DashboardInfos) => Partial<RouteLocation>>,
|
|
126
|
+
required: false
|
|
127
|
+
},
|
|
128
|
+
tableCode: {
|
|
129
|
+
type: String,
|
|
130
|
+
required: true
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
emits: ["update:modelValue", "update:type", "update:dashboard-type"],
|
|
134
|
+
setup(props, { emit }) {
|
|
135
|
+
|
|
136
|
+
const { fetch: fetchUserOrganisation, entity: userOrganisation } = useCurrentUserOrganisation();
|
|
137
|
+
const { entity: organisation, get: getOrganisation } = useOrganisation();
|
|
138
|
+
const { organisationId } = useAppOrganisationId();
|
|
139
|
+
|
|
140
|
+
const { entities: dashboardOrganisations, fetching: fetchingDashboardOrganisations, getMany: getManyDashboardOrganisations } = useDashboardOrganisations();
|
|
141
|
+
const { entities: dashboardShallows, fetching: fetchingDashboardShallows, getMany: getManyDashboardShallows } = useDashboardShallows();
|
|
142
|
+
const { entities: folders, fetching: fetchingFolders, getMany: getManyFolders } = useFolders();
|
|
143
|
+
|
|
144
|
+
const selecteds = ref<string[]>([]);
|
|
145
|
+
|
|
146
|
+
const mainUserDashboardId = computed(() => {
|
|
147
|
+
return userOrganisation.value?.mainDashboardId;
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
const mainOrganisationDashboardId = computed(() => {
|
|
151
|
+
return organisation.value?.mainDashboardId;
|
|
152
|
+
});
|
|
153
|
+
|
|
154
|
+
const items = computed((): FoldersListItem[] => {
|
|
155
|
+
return [
|
|
156
|
+
...folders.value.map(g => ({
|
|
157
|
+
...g,
|
|
158
|
+
type: FoldersListType.Folder,
|
|
159
|
+
dashboardType: DashboardType.None
|
|
160
|
+
})) as FoldersListItem[],
|
|
161
|
+
..._.sortBy([
|
|
162
|
+
...dashboardOrganisations.value.map(d => ({
|
|
163
|
+
...d,
|
|
164
|
+
type: FoldersListType.Dashboard,
|
|
165
|
+
dashboardType: DashboardType.Organisation
|
|
166
|
+
})) as FoldersListItem[],
|
|
167
|
+
...dashboardShallows.value.map(d => ({
|
|
168
|
+
...d,
|
|
169
|
+
type: FoldersListType.Dashboard,
|
|
170
|
+
dashboardType: DashboardType.Shallow
|
|
171
|
+
})) as FoldersListItem[]
|
|
172
|
+
], d => d.label)
|
|
173
|
+
]
|
|
174
|
+
})
|
|
175
|
+
|
|
176
|
+
const onSelect = (values: string[]) => {
|
|
177
|
+
selecteds.value = values;
|
|
178
|
+
const selectedItems = items.value.filter(i => selecteds.value!.includes(i.id));
|
|
179
|
+
emit("update:dashboard-type", selectedItems.map(i => i.dashboardType));
|
|
180
|
+
emit("update:modelValue", selectedItems.map(i => i.id));
|
|
181
|
+
emit("update:type", selectedItems.map(i => i.type));
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
const isSelected = (id: string) => {
|
|
185
|
+
return selecteds.value?.includes(id);
|
|
186
|
+
};
|
|
187
|
+
|
|
188
|
+
onMounted(() => {
|
|
189
|
+
fetchUserOrganisation();
|
|
190
|
+
})
|
|
191
|
+
|
|
192
|
+
watch(() => organisationId.value, () => {
|
|
193
|
+
if (organisationId.value) {
|
|
194
|
+
getOrganisation(organisationId.value);
|
|
195
|
+
}
|
|
196
|
+
}, { immediate: true });
|
|
197
|
+
|
|
198
|
+
watch(() => props.foldersFilters, (next, previous) => {
|
|
199
|
+
if ((!next && !previous) || !_.isEqual(next, previous)) {
|
|
200
|
+
getManyFolders(props.foldersFilters, f => f.parentId == props.foldersFilters?.parentId);
|
|
201
|
+
}
|
|
202
|
+
}, { immediate: true });
|
|
203
|
+
|
|
204
|
+
watch(() => props.dashboardOrganisationsFilters, (next, previous) => {
|
|
205
|
+
if ((!next && !previous) || !_.isEqual(next, previous)) {
|
|
206
|
+
getManyDashboardOrganisations(props.dashboardOrganisationsFilters, f => f.folderId == props.foldersFilters?.parentId);
|
|
207
|
+
}
|
|
208
|
+
}, { immediate: true });
|
|
209
|
+
|
|
210
|
+
watch(() => props.dashboardShallowsFilters, (next, previous) => {
|
|
211
|
+
if ((!next && !previous) || !_.isEqual(next, previous)) {
|
|
212
|
+
getManyDashboardShallows(props.dashboardShallowsFilters, f => f.folderId == props.foldersFilters?.parentId);
|
|
213
|
+
}
|
|
214
|
+
}, { immediate: true });
|
|
215
|
+
|
|
216
|
+
watch(() => props.modelValue, (next) => {
|
|
217
|
+
selecteds.value = next;
|
|
218
|
+
}, { immediate: true });
|
|
219
|
+
|
|
220
|
+
return {
|
|
221
|
+
fetchingDashboardOrganisations,
|
|
222
|
+
fetchingDashboardShallows,
|
|
223
|
+
fetchingFolders,
|
|
224
|
+
mainOrganisationDashboardId,
|
|
225
|
+
mainUserDashboardId,
|
|
226
|
+
selecteds,
|
|
227
|
+
items,
|
|
228
|
+
onSelect,
|
|
229
|
+
isSelected,
|
|
230
|
+
FoldersListType,
|
|
231
|
+
DashboardType
|
|
232
|
+
};
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
</script>
|
|
@@ -69,6 +69,8 @@ export default defineComponent({
|
|
|
69
69
|
|
|
70
70
|
const computedTable = computed(() => computeTable(props.customSorts, props.customSortRaws));
|
|
71
71
|
|
|
72
|
+
console.log(JSON.stringify(computedTable.value));
|
|
73
|
+
|
|
72
74
|
onUnmounted(() => {
|
|
73
75
|
cancel();
|
|
74
76
|
update();
|
|
@@ -88,6 +90,7 @@ export default defineComponent({
|
|
|
88
90
|
getTable,
|
|
89
91
|
props.tableCode
|
|
90
92
|
);
|
|
93
|
+
console.log(JSON.stringify(computedTable.value));
|
|
91
94
|
}, { immediate: true });
|
|
92
95
|
|
|
93
96
|
watch(() => table.value, () => {
|
|
@@ -33,12 +33,20 @@
|
|
|
33
33
|
variant="full"
|
|
34
34
|
v-model="innerHidePending"
|
|
35
35
|
/>
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
36
|
+
<FSRow
|
|
37
|
+
align="center-right"
|
|
38
|
+
>
|
|
39
|
+
<FSRow
|
|
40
|
+
width="hug"
|
|
41
|
+
>
|
|
42
|
+
<FSTermField
|
|
43
|
+
variant="default"
|
|
44
|
+
:editable="!innerNotTreatedOnly"
|
|
45
|
+
v-model:startDate="startDate"
|
|
46
|
+
v-model:endDate="endDate"
|
|
47
|
+
/>
|
|
48
|
+
</FSRow>
|
|
49
|
+
</FSRow>
|
|
42
50
|
</template>
|
|
43
51
|
<template
|
|
44
52
|
#item.criticity="{ item }"
|
|
@@ -324,7 +332,8 @@ export default defineComponent({
|
|
|
324
332
|
[AlertStatus.Unresolved, AlertStatus.Resolved, AlertStatus.Triggered] : undefined,
|
|
325
333
|
startDate: startDate.value,
|
|
326
334
|
endDate: endDate.value
|
|
327
|
-
});
|
|
335
|
+
}); // TODO, gérer les conditions pour que les alertes s'affichent ici notamment lorsqu'elles sont acquittées
|
|
336
|
+
// la FilterFactory gère pas ces conditions correctement
|
|
328
337
|
}
|
|
329
338
|
|
|
330
339
|
}
|
|
@@ -82,16 +82,20 @@
|
|
|
82
82
|
#item.worstAlert="{ item }"
|
|
83
83
|
>
|
|
84
84
|
<FSWorstAlert
|
|
85
|
+
v-if="item.worstAlert"
|
|
86
|
+
:deviceWorstAlert="item.worstAlert"
|
|
85
87
|
:deviceAlerts="item.alerts"
|
|
86
|
-
:
|
|
88
|
+
:alertTo="$props.alertTo"
|
|
87
89
|
/>
|
|
88
90
|
</template>
|
|
89
91
|
<template
|
|
90
92
|
#item.alerts="{ item }"
|
|
91
93
|
>
|
|
92
94
|
<FSWorstAlert
|
|
93
|
-
|
|
94
|
-
:
|
|
95
|
+
v-if="item.worstAlert"
|
|
96
|
+
:deviceWorstAlert="item.worstAlert"
|
|
97
|
+
:deviceAlerts="item.alerts"
|
|
98
|
+
:alertTo="$props.alertTo"
|
|
95
99
|
/>
|
|
96
100
|
</template>
|
|
97
101
|
<template
|
|
@@ -134,6 +138,7 @@
|
|
|
134
138
|
:deviceWorstAlert="item.worstAlert"
|
|
135
139
|
:deviceAlerts="item.alerts"
|
|
136
140
|
:to="$props.itemTo && $props.itemTo(item)"
|
|
141
|
+
:alertTo="$props.alertTo"
|
|
137
142
|
@update:modelValue="toggleSelect(item)"
|
|
138
143
|
/>
|
|
139
144
|
</template>
|
|
@@ -197,6 +202,11 @@ export default defineComponent({
|
|
|
197
202
|
type: Function as PropType<(item: DeviceOrganisationInfos) => Partial<RouteLocation>>,
|
|
198
203
|
required: false
|
|
199
204
|
},
|
|
205
|
+
alertTo: {
|
|
206
|
+
type: Function,
|
|
207
|
+
required: false,
|
|
208
|
+
default: null
|
|
209
|
+
},
|
|
200
210
|
singleSelect: {
|
|
201
211
|
type: Boolean,
|
|
202
212
|
required: false,
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<FSDataTable
|
|
3
|
-
:items="
|
|
3
|
+
:items="folders"
|
|
4
4
|
:item-to="$props.itemTo"
|
|
5
|
-
:loading="fetchingFolders
|
|
5
|
+
:loading="fetchingFolders"
|
|
6
6
|
:tableCode="$props.tableCode"
|
|
7
|
-
:modelValue="
|
|
8
|
-
@update:modelValue="
|
|
7
|
+
:modelValue="$props.modelValue"
|
|
8
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
9
9
|
v-bind="$attrs"
|
|
10
10
|
>
|
|
11
11
|
<template
|
|
@@ -18,21 +18,6 @@
|
|
|
18
18
|
/>
|
|
19
19
|
</template>
|
|
20
20
|
|
|
21
|
-
<template
|
|
22
|
-
#item.main="{ item }"
|
|
23
|
-
>
|
|
24
|
-
<FSIcon
|
|
25
|
-
v-if="item.id === mainOrganisationDashboardId"
|
|
26
|
-
>
|
|
27
|
-
mdi-account-group-outline
|
|
28
|
-
</FSIcon>
|
|
29
|
-
<FSIcon
|
|
30
|
-
v-if="item.id === mainUserDashboardId"
|
|
31
|
-
>
|
|
32
|
-
mdi-home
|
|
33
|
-
</FSIcon>
|
|
34
|
-
</template>
|
|
35
|
-
|
|
36
21
|
<template
|
|
37
22
|
#item.icon="{ item }"
|
|
38
23
|
>
|
|
@@ -45,61 +30,39 @@
|
|
|
45
30
|
#item.tile="{ item, toggleSelect }"
|
|
46
31
|
>
|
|
47
32
|
<FSFolderTileUI
|
|
48
|
-
v-if="item.type == FoldersListType.Folder"
|
|
49
|
-
:bottomColor="item.colors"
|
|
50
|
-
v-bind="item"
|
|
51
|
-
:modelValue="isSelected(item.id)"
|
|
52
|
-
@update:modelValue="toggleSelect(item)"
|
|
53
|
-
:to="$props.itemTo && $props.itemTo(item)"
|
|
54
|
-
/>
|
|
55
|
-
<FSDashboardOrganisationTileUI
|
|
56
|
-
v-if="item.type == FoldersListType.Dashboard && item.dashboardType == DashboardType.Organisation"
|
|
57
33
|
:bottomColor="item.colors"
|
|
58
|
-
:modelValue="isSelected(item.id)"
|
|
59
|
-
@update:modelValue="toggleSelect(item)"
|
|
60
|
-
:to="$props.itemTo && $props.itemTo(item)"
|
|
61
34
|
v-bind="item"
|
|
62
|
-
/>
|
|
63
|
-
<FSDashboardShallowTileUI
|
|
64
|
-
v-if="item.type == FoldersListType.Dashboard && item.dashboardType == DashboardType.Shallow"
|
|
65
|
-
:bottomColor="item.colors"
|
|
66
35
|
:modelValue="isSelected(item.id)"
|
|
67
36
|
@update:modelValue="toggleSelect(item)"
|
|
68
37
|
:to="$props.itemTo && $props.itemTo(item)"
|
|
69
|
-
v-bind="item"
|
|
70
38
|
/>
|
|
71
39
|
</template>
|
|
72
40
|
</FSDataTable>
|
|
73
41
|
</template>
|
|
74
42
|
|
|
75
43
|
<script lang="ts">
|
|
44
|
+
import _ from "lodash";
|
|
76
45
|
import type { PropType} from "vue";
|
|
77
46
|
import type { RouteLocation } from "vue-router";
|
|
78
|
-
import {
|
|
79
|
-
import _ from "lodash";
|
|
47
|
+
import { defineComponent, watch } from "vue";
|
|
80
48
|
|
|
81
|
-
import {
|
|
82
|
-
import { useDashboardOrganisations, useFolders, useDashboardShallows, useAppOrganisationId, useCurrentUserOrganisation } from "@dative-gpi/foundation-core-services/composables";
|
|
49
|
+
import { useFolders } from "@dative-gpi/foundation-core-services/composables";
|
|
83
50
|
|
|
84
51
|
import { DashboardType } from "@dative-gpi/foundation-shared-domain/enums";
|
|
85
|
-
import { FoldersListType
|
|
86
|
-
import type { FolderFilters,
|
|
52
|
+
import { FoldersListType } from "@dative-gpi/foundation-core-components/utils";
|
|
53
|
+
import type { FolderFilters, DashboardInfos } from "@dative-gpi/foundation-core-domain/models";
|
|
87
54
|
|
|
88
|
-
import FSDataTable from "../FSDataTable.vue";
|
|
89
55
|
import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
|
|
90
56
|
import FSFolderTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSFolderTileUI.vue";
|
|
91
|
-
import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
|
|
92
|
-
import FSDashboardShallowTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardShallowTileUI.vue";
|
|
93
57
|
|
|
58
|
+
import FSDataTable from "../FSDataTable.vue";
|
|
94
59
|
|
|
95
60
|
export default defineComponent({
|
|
96
61
|
name: "FSBaseFoldersList",
|
|
97
62
|
components: {
|
|
98
63
|
FSDataTable,
|
|
99
64
|
FSIcon,
|
|
100
|
-
FSFolderTileUI
|
|
101
|
-
FSDashboardOrganisationTileUI,
|
|
102
|
-
FSDashboardShallowTileUI
|
|
65
|
+
FSFolderTileUI
|
|
103
66
|
},
|
|
104
67
|
props: {
|
|
105
68
|
foldersFilters: {
|
|
@@ -107,16 +70,6 @@ export default defineComponent({
|
|
|
107
70
|
default: undefined,
|
|
108
71
|
required: false
|
|
109
72
|
},
|
|
110
|
-
dashboardOrganisationsFilters: {
|
|
111
|
-
type: Object as PropType<DashboardOrganisationFilters>,
|
|
112
|
-
default: undefined,
|
|
113
|
-
required: false
|
|
114
|
-
},
|
|
115
|
-
dashboardShallowsFilters: {
|
|
116
|
-
type: Object as PropType<DashboardShallowFilters>,
|
|
117
|
-
default: undefined,
|
|
118
|
-
required: false
|
|
119
|
-
},
|
|
120
73
|
modelValue: {
|
|
121
74
|
type: Array as PropType<string[]>,
|
|
122
75
|
required: false,
|
|
@@ -131,101 +84,28 @@ export default defineComponent({
|
|
|
131
84
|
required: true
|
|
132
85
|
}
|
|
133
86
|
},
|
|
134
|
-
emits: ["update:modelValue"
|
|
87
|
+
emits: ["update:modelValue"],
|
|
135
88
|
setup(props, { emit }) {
|
|
136
89
|
|
|
137
|
-
const { fetch: fetchUserOrganisation, entity: userOrganisation } = useCurrentUserOrganisation();
|
|
138
|
-
const { entity: organisation, get: getOrganisation } = useOrganisation();
|
|
139
|
-
const { organisationId } = useAppOrganisationId();
|
|
140
|
-
|
|
141
|
-
const { entities: dashboardOrganisations, fetching: fetchingDashboardOrganisations, getMany: getManyDashboardOrganisations } = useDashboardOrganisations();
|
|
142
|
-
const { entities: dashboardShallows, fetching: fetchingDashboardShallows, getMany: getManyDashboardShallows } = useDashboardShallows();
|
|
143
90
|
const { entities: folders, fetching: fetchingFolders, getMany: getManyFolders } = useFolders();
|
|
144
91
|
|
|
145
|
-
const selecteds = ref<string[]>([]);
|
|
146
|
-
|
|
147
|
-
const mainUserDashboardId = computed(() => {
|
|
148
|
-
return userOrganisation.value?.mainDashboardId;
|
|
149
|
-
});
|
|
150
|
-
|
|
151
|
-
const mainOrganisationDashboardId = computed(() => {
|
|
152
|
-
return organisation.value?.mainDashboardId;
|
|
153
|
-
});
|
|
154
|
-
|
|
155
|
-
const items = computed((): FoldersListItem[] => {
|
|
156
|
-
return [
|
|
157
|
-
...folders.value.map(g => ({
|
|
158
|
-
...g,
|
|
159
|
-
type: FoldersListType.Folder,
|
|
160
|
-
dashboardType: DashboardType.None
|
|
161
|
-
})) as FoldersListItem[],
|
|
162
|
-
..._.sortBy([
|
|
163
|
-
...dashboardOrganisations.value.map(d => ({
|
|
164
|
-
...d,
|
|
165
|
-
type: FoldersListType.Dashboard,
|
|
166
|
-
dashboardType: DashboardType.Organisation
|
|
167
|
-
})) as FoldersListItem[],
|
|
168
|
-
...dashboardShallows.value.map(d => ({
|
|
169
|
-
...d,
|
|
170
|
-
type: FoldersListType.Dashboard,
|
|
171
|
-
dashboardType: DashboardType.Shallow
|
|
172
|
-
})) as FoldersListItem[]
|
|
173
|
-
], d => d.label)
|
|
174
|
-
]
|
|
175
|
-
})
|
|
176
|
-
|
|
177
92
|
const onSelect = (values: string[]) => {
|
|
178
|
-
|
|
179
|
-
const selectedItems = items.value.filter(i => selecteds.value!.includes(i.id));
|
|
180
|
-
emit("update:dashboard-type", selectedItems.map(i => i.dashboardType));
|
|
181
|
-
emit("update:modelValue", selectedItems.map(i => i.id));
|
|
182
|
-
emit("update:type", selectedItems.map(i => i.type));
|
|
93
|
+
emit("update:modelValue", values);
|
|
183
94
|
};
|
|
184
95
|
|
|
185
96
|
const isSelected = (id: string) => {
|
|
186
|
-
return
|
|
97
|
+
return props.modelValue?.includes(id);
|
|
187
98
|
};
|
|
188
|
-
|
|
189
|
-
onMounted(() => {
|
|
190
|
-
fetchUserOrganisation();
|
|
191
|
-
})
|
|
192
|
-
|
|
193
|
-
watch(() => organisationId.value, () => {
|
|
194
|
-
if (organisationId.value) {
|
|
195
|
-
getOrganisation(organisationId.value);
|
|
196
|
-
}
|
|
197
|
-
}, { immediate: true });
|
|
198
|
-
|
|
99
|
+
|
|
199
100
|
watch(() => props.foldersFilters, (next, previous) => {
|
|
200
101
|
if ((!next && !previous) || !_.isEqual(next, previous)) {
|
|
201
102
|
getManyFolders(props.foldersFilters, f => f.parentId == props.foldersFilters?.parentId);
|
|
202
103
|
}
|
|
203
104
|
}, { immediate: true });
|
|
204
105
|
|
|
205
|
-
watch(() => props.dashboardOrganisationsFilters, (next, previous) => {
|
|
206
|
-
if ((!next && !previous) || !_.isEqual(next, previous)) {
|
|
207
|
-
getManyDashboardOrganisations(props.dashboardOrganisationsFilters, f => f.folderId == props.foldersFilters?.parentId);
|
|
208
|
-
}
|
|
209
|
-
}, { immediate: true });
|
|
210
|
-
|
|
211
|
-
watch(() => props.dashboardShallowsFilters, (next, previous) => {
|
|
212
|
-
if ((!next && !previous) || !_.isEqual(next, previous)) {
|
|
213
|
-
getManyDashboardShallows(props.dashboardShallowsFilters, f => f.folderId == props.foldersFilters?.parentId);
|
|
214
|
-
}
|
|
215
|
-
}, { immediate: true });
|
|
216
|
-
|
|
217
|
-
watch(() => props.modelValue, (next) => {
|
|
218
|
-
selecteds.value = next;
|
|
219
|
-
}, { immediate: true });
|
|
220
|
-
|
|
221
106
|
return {
|
|
222
|
-
fetchingDashboardOrganisations,
|
|
223
|
-
fetchingDashboardShallows,
|
|
224
107
|
fetchingFolders,
|
|
225
|
-
|
|
226
|
-
mainUserDashboardId,
|
|
227
|
-
selecteds,
|
|
228
|
-
items,
|
|
108
|
+
folders,
|
|
229
109
|
onSelect,
|
|
230
110
|
isSelected,
|
|
231
111
|
FoldersListType,
|