@dative-gpi/foundation-core-components 1.0.186 → 1.0.188-add-data-enums-2
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/FSTileEntitiesList.vue +98 -0
- package/components/lists/dashboards/FSTileDashboardsList.vue +158 -0
- package/components/lists/deviceOrganisations/FSTileDeviceOrganisationsList.vue +83 -0
- package/components/lists/folders/FSTileFoldersList.vue +82 -0
- package/components/lists/groups/FSTileGroupsList.vue +80 -0
- package/components/lists/locations/FSTileLocationsList.vue +81 -0
- package/components/lists/models/FSTileModelsList.vue +78 -0
- package/components/lists/userOrganisations/FSTileUserOrganisationsList.vue +78 -0
- package/package.json +10 -7
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<component
|
|
3
|
+
:is="component"
|
|
4
|
+
v-bind="componentProps"
|
|
5
|
+
/>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script lang="ts">
|
|
9
|
+
import { computed, defineAsyncComponent, defineComponent, type PropType, type Component } from "vue";
|
|
10
|
+
import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
export default defineComponent({
|
|
14
|
+
name: "FSTileEntitiesList",
|
|
15
|
+
props: {
|
|
16
|
+
entityType: {
|
|
17
|
+
type: Number as PropType<EntityType>,
|
|
18
|
+
required: true
|
|
19
|
+
},
|
|
20
|
+
filters: {
|
|
21
|
+
type: Object,
|
|
22
|
+
required: false,
|
|
23
|
+
default: null
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
setup(props, { attrs }) {
|
|
27
|
+
const component = computed<Component | null>(() => {
|
|
28
|
+
switch(props.entityType) {
|
|
29
|
+
case EntityType.Device:
|
|
30
|
+
return defineAsyncComponent(() => import("../lists/deviceOrganisations/FSTileDeviceOrganisationsList.vue"));
|
|
31
|
+
case EntityType.Dashboard:
|
|
32
|
+
return defineAsyncComponent(() => import("../lists/dashboards/FSTileDashboardsList.vue"));
|
|
33
|
+
case EntityType.Folder:
|
|
34
|
+
return defineAsyncComponent(() => import("../lists/folders/FSTileFoldersList.vue"));
|
|
35
|
+
case EntityType.User:
|
|
36
|
+
return defineAsyncComponent(() => import("../lists/userOrganisations/FSTileUserOrganisationsList.vue"));
|
|
37
|
+
case EntityType.Group:
|
|
38
|
+
return defineAsyncComponent(() => import("../lists/groups/FSTileGroupsList.vue"));
|
|
39
|
+
case EntityType.Location:
|
|
40
|
+
return defineAsyncComponent(() => import("../lists/locations/FSTileLocationsList.vue"));
|
|
41
|
+
case EntityType.Model:
|
|
42
|
+
return defineAsyncComponent(() => import("../lists/models/FSTileModelsList.vue"));
|
|
43
|
+
default:
|
|
44
|
+
return null;
|
|
45
|
+
};
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
const componentProps = computed(() => {
|
|
49
|
+
switch(props.entityType) {
|
|
50
|
+
case EntityType.Device:
|
|
51
|
+
return {
|
|
52
|
+
...attrs,
|
|
53
|
+
deviceOrganisationFilters : props.filters
|
|
54
|
+
};
|
|
55
|
+
case EntityType.Dashboard:
|
|
56
|
+
return {
|
|
57
|
+
...attrs,
|
|
58
|
+
dashboardOrganisationFilters : props.filters,
|
|
59
|
+
dashboardOrganisationTypeFilters : props.filters,
|
|
60
|
+
dashboardShallowFilters : props.filters
|
|
61
|
+
};
|
|
62
|
+
case EntityType.Folder:
|
|
63
|
+
return {
|
|
64
|
+
...attrs,
|
|
65
|
+
folderFilters : props.filters
|
|
66
|
+
};
|
|
67
|
+
case EntityType.User:
|
|
68
|
+
return {
|
|
69
|
+
...attrs,
|
|
70
|
+
userOrganisationFilters : props.filters
|
|
71
|
+
};
|
|
72
|
+
case EntityType.Group:
|
|
73
|
+
return {
|
|
74
|
+
...attrs,
|
|
75
|
+
groupFilters : props.filters
|
|
76
|
+
};
|
|
77
|
+
case EntityType.Location:
|
|
78
|
+
return {
|
|
79
|
+
...attrs,
|
|
80
|
+
locationFilters : props.filters
|
|
81
|
+
};
|
|
82
|
+
case EntityType.Model:
|
|
83
|
+
return {
|
|
84
|
+
...attrs,
|
|
85
|
+
modelFilters : props.filters
|
|
86
|
+
};
|
|
87
|
+
default:
|
|
88
|
+
return null;
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
return {
|
|
93
|
+
component,
|
|
94
|
+
componentProps
|
|
95
|
+
};
|
|
96
|
+
},
|
|
97
|
+
});
|
|
98
|
+
</script>
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSTileList
|
|
3
|
+
:items="dashboards"
|
|
4
|
+
:loading="fetching"
|
|
5
|
+
:selectable="$props.selectable"
|
|
6
|
+
:modelValue="$props.modelValue"
|
|
7
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
8
|
+
v-bind="$attrs"
|
|
9
|
+
>
|
|
10
|
+
<template
|
|
11
|
+
#item.tile="{ item, toggleSelect, direction }"
|
|
12
|
+
>
|
|
13
|
+
<FSDashboardOrganisationTileUI
|
|
14
|
+
v-if="item.dashboardType === DashboardType.Organisation"
|
|
15
|
+
:code="item.code"
|
|
16
|
+
:icon="item.icon"
|
|
17
|
+
:label="item.label"
|
|
18
|
+
:imageId="item.imageId"
|
|
19
|
+
:bottomColor="item.colors"
|
|
20
|
+
:modelValue="($props.modelValue ?? []).includes(item.id)"
|
|
21
|
+
:width="direction === ListDirections.Column ? 'fill' : undefined"
|
|
22
|
+
:selectable="$props.selectable"
|
|
23
|
+
@update:modelValue="toggleSelect(item)"
|
|
24
|
+
/>
|
|
25
|
+
<FSDashboardOrganisationTypeTileUI
|
|
26
|
+
v-else-if="item.dashboardType === DashboardType.OrganisationType"
|
|
27
|
+
:code="item.code"
|
|
28
|
+
:icon="item.icon"
|
|
29
|
+
:label="item.label"
|
|
30
|
+
:imageId="item.imageId"
|
|
31
|
+
:bottomColor="item.colors"
|
|
32
|
+
:modelValue="($props.modelValue ?? []).includes(item.id)"
|
|
33
|
+
:width="direction === ListDirections.Column ? 'fill' : undefined"
|
|
34
|
+
:selectable="$props.selectable"
|
|
35
|
+
@update:modelValue="toggleSelect(item)"
|
|
36
|
+
/>
|
|
37
|
+
<FSDashboardShallowTileUI
|
|
38
|
+
v-else-if="item.dashboardType === DashboardType.Shallow"
|
|
39
|
+
:code="item.code"
|
|
40
|
+
:icon="item.icon"
|
|
41
|
+
:label="item.label"
|
|
42
|
+
:imageId="item.imageId"
|
|
43
|
+
:bottomColor="item.colors"
|
|
44
|
+
:modelValue="($props.modelValue ?? []).includes(item.id)"
|
|
45
|
+
:width="direction === ListDirections.Column ? 'fill' : undefined"
|
|
46
|
+
:selectable="$props.selectable"
|
|
47
|
+
@update:modelValue="toggleSelect(item)"
|
|
48
|
+
/>
|
|
49
|
+
</template>
|
|
50
|
+
</FSTileList>
|
|
51
|
+
</template>
|
|
52
|
+
|
|
53
|
+
<script lang="ts">
|
|
54
|
+
import { defineComponent, type PropType, watch, computed } from "vue";
|
|
55
|
+
import _ from "lodash";
|
|
56
|
+
|
|
57
|
+
import type { DashboardOrganisationFilters, DashboardOrganisationTypeFilters, DashboardShallowFilters } from "@dative-gpi/foundation-core-domain/models";
|
|
58
|
+
import { useDashboardOrganisations, useDashboardOrganisationTypes, useDashboardShallows } from "@dative-gpi/foundation-core-services/composables";
|
|
59
|
+
|
|
60
|
+
import { DashboardType } from '@dative-gpi/foundation-shared-domain/enums';
|
|
61
|
+
import type { DashboardsListItem } from '@dative-gpi/foundation-core-components/utils';
|
|
62
|
+
|
|
63
|
+
import FSDashboardOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTileUI.vue";
|
|
64
|
+
import FSDashboardOrganisationTypeTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardOrganisationTypeTileUI.vue";
|
|
65
|
+
import FSDashboardShallowTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDashboardShallowTileUI.vue";
|
|
66
|
+
import FSTileList from "@dative-gpi/foundation-shared-components/components/lists/FSTileList.vue";
|
|
67
|
+
|
|
68
|
+
import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
export default defineComponent({
|
|
72
|
+
name: "FSTileDashboardsList",
|
|
73
|
+
components: {
|
|
74
|
+
FSTileList,
|
|
75
|
+
FSDashboardOrganisationTileUI,
|
|
76
|
+
FSDashboardOrganisationTypeTileUI,
|
|
77
|
+
FSDashboardShallowTileUI
|
|
78
|
+
},
|
|
79
|
+
props: {
|
|
80
|
+
dashboardOrganisationFilters: {
|
|
81
|
+
type: Object as PropType<DashboardOrganisationFilters>,
|
|
82
|
+
required: false,
|
|
83
|
+
default: () => ({})
|
|
84
|
+
},
|
|
85
|
+
dashboardOrganisationTypeFilters: {
|
|
86
|
+
type: Object as PropType<DashboardOrganisationTypeFilters>,
|
|
87
|
+
required: false,
|
|
88
|
+
default: () => ({})
|
|
89
|
+
},
|
|
90
|
+
dashboardShallowFilters: {
|
|
91
|
+
type: Object as PropType<DashboardShallowFilters>,
|
|
92
|
+
required: false,
|
|
93
|
+
default: () => ({})
|
|
94
|
+
},
|
|
95
|
+
modelValue: {
|
|
96
|
+
type: Array as PropType<string[]>,
|
|
97
|
+
required: false,
|
|
98
|
+
default: () => []
|
|
99
|
+
},
|
|
100
|
+
selectable: {
|
|
101
|
+
type: Boolean,
|
|
102
|
+
required: false,
|
|
103
|
+
default: false
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
emits: ["update:modelValue"],
|
|
107
|
+
setup(props) {
|
|
108
|
+
const { entities: dashboardOrganisations,
|
|
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();
|
|
117
|
+
|
|
118
|
+
const fetching = computed(() => fetchingDashboardOrganisations.value
|
|
119
|
+
|| fetchingDashboardOrganisationTypes.value
|
|
120
|
+
|| fetchingDashboardShallows.value);
|
|
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);
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
const fetch = () => {
|
|
140
|
+
getManyDashboardOrganisations(props.dashboardOrganisationFilters);
|
|
141
|
+
getManyDashboardOrganisationTypes(props.dashboardOrganisationTypeFilters);
|
|
142
|
+
getManyDashboardShallows(props.dashboardShallowFilters);
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
watch(
|
|
146
|
+
[() => props.dashboardOrganisationFilters, () => props.dashboardOrganisationTypeFilters, () => props.dashboardShallowFilters],
|
|
147
|
+
fetch,
|
|
148
|
+
{ immediate: true });
|
|
149
|
+
|
|
150
|
+
return {
|
|
151
|
+
dashboards,
|
|
152
|
+
fetching,
|
|
153
|
+
DashboardType,
|
|
154
|
+
ListDirections
|
|
155
|
+
};
|
|
156
|
+
}
|
|
157
|
+
});
|
|
158
|
+
</script>
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSTileList
|
|
3
|
+
:items="deviceOrganisations"
|
|
4
|
+
:loading="fetching"
|
|
5
|
+
:selectable="$props.selectable"
|
|
6
|
+
:modelValue="$props.modelValue"
|
|
7
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
8
|
+
v-bind="$attrs"
|
|
9
|
+
>
|
|
10
|
+
<template
|
|
11
|
+
#item.tile="{ item, toggleSelect, direction }"
|
|
12
|
+
>
|
|
13
|
+
<FSDeviceOrganisationTileUI
|
|
14
|
+
:imageId="item.imageId"
|
|
15
|
+
:label="item.label"
|
|
16
|
+
:code="item.code"
|
|
17
|
+
:deviceConnectivity="item.connectivity"
|
|
18
|
+
:deviceWorstAlert="item.worstAlert"
|
|
19
|
+
:deviceAlerts="item.alerts"
|
|
20
|
+
:modelStatuses="item.modelStatuses"
|
|
21
|
+
:deviceStatuses="item.status?.statuses"
|
|
22
|
+
:width="direction === ListDirections.Column ? 'fill' : undefined"
|
|
23
|
+
:selectable="$props.selectable"
|
|
24
|
+
:modelValue="($props.modelValue ?? []).includes(item.id)"
|
|
25
|
+
@update:modelValue="toggleSelect(item)"
|
|
26
|
+
/>
|
|
27
|
+
</template>
|
|
28
|
+
</FSTileList>
|
|
29
|
+
</template>
|
|
30
|
+
|
|
31
|
+
<script lang="ts">
|
|
32
|
+
import { defineComponent, type PropType, watch } from "vue";
|
|
33
|
+
|
|
34
|
+
import type { DeviceOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
|
|
35
|
+
import { useDeviceOrganisations } from "@dative-gpi/foundation-core-services/composables";
|
|
36
|
+
|
|
37
|
+
import FSDeviceOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSDeviceOrganisationTileUI.vue";
|
|
38
|
+
import FSTileList from "@dative-gpi/foundation-shared-components/components/lists/FSTileList.vue";
|
|
39
|
+
|
|
40
|
+
import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
export default defineComponent({
|
|
44
|
+
name: "FSTileDeviceOrganisationsList",
|
|
45
|
+
components: {
|
|
46
|
+
FSTileList,
|
|
47
|
+
FSDeviceOrganisationTileUI
|
|
48
|
+
},
|
|
49
|
+
props: {
|
|
50
|
+
deviceOrganisationFilters: {
|
|
51
|
+
type: Object as PropType<DeviceOrganisationFilters>,
|
|
52
|
+
required: false,
|
|
53
|
+
default: () => ({})
|
|
54
|
+
},
|
|
55
|
+
modelValue: {
|
|
56
|
+
type: Array as PropType<string[]>,
|
|
57
|
+
required: false,
|
|
58
|
+
default: () => []
|
|
59
|
+
},
|
|
60
|
+
selectable: {
|
|
61
|
+
type: Boolean,
|
|
62
|
+
required: false,
|
|
63
|
+
default: false
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
emits: ["update:modelValue"],
|
|
67
|
+
setup(props) {
|
|
68
|
+
const { entities: deviceOrganisations, getMany, fetching } = useDeviceOrganisations();
|
|
69
|
+
|
|
70
|
+
const fetch = () => {
|
|
71
|
+
getMany(props.deviceOrganisationFilters);
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
watch(() => props.deviceOrganisationFilters, fetch, { immediate: true });
|
|
75
|
+
|
|
76
|
+
return {
|
|
77
|
+
deviceOrganisations,
|
|
78
|
+
fetching,
|
|
79
|
+
ListDirections
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
</script>
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSTileList
|
|
3
|
+
:items="folders"
|
|
4
|
+
:loading="fetching"
|
|
5
|
+
:selectable="$props.selectable"
|
|
6
|
+
:modelValue="$props.modelValue"
|
|
7
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
8
|
+
v-bind="$attrs"
|
|
9
|
+
>
|
|
10
|
+
<template
|
|
11
|
+
#item.tile="{ item, toggleSelect, direction }"
|
|
12
|
+
>
|
|
13
|
+
<FSFolderTileUI
|
|
14
|
+
:code="item.code"
|
|
15
|
+
:icon="item.icon"
|
|
16
|
+
:label="item.label"
|
|
17
|
+
:imageId="item.imageId"
|
|
18
|
+
:bottomColor="item.colors"
|
|
19
|
+
:recursiveFoldersIds="item.recursiveFoldersIds"
|
|
20
|
+
:recursiveDashboardsIds="item.recursiveDashboardsIds"
|
|
21
|
+
:width="direction === ListDirections.Column ? 'fill' : undefined"
|
|
22
|
+
:selectable="$props.selectable"
|
|
23
|
+
:modelValue="($props.modelValue ?? []).includes(item.id)"
|
|
24
|
+
@update:modelValue="toggleSelect(item)"
|
|
25
|
+
/>
|
|
26
|
+
</template>
|
|
27
|
+
</FSTileList>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script lang="ts">
|
|
31
|
+
import { defineComponent, type PropType, watch } from "vue";
|
|
32
|
+
|
|
33
|
+
import type { FolderFilters } from "@dative-gpi/foundation-core-domain/models";
|
|
34
|
+
import { useFolders } from "@dative-gpi/foundation-core-services/composables";
|
|
35
|
+
|
|
36
|
+
import FSFolderTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSFolderTileUI.vue";
|
|
37
|
+
import FSTileList from "@dative-gpi/foundation-shared-components/components/lists/FSTileList.vue";
|
|
38
|
+
|
|
39
|
+
import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
export default defineComponent({
|
|
43
|
+
name: "FSTileFoldersList",
|
|
44
|
+
components: {
|
|
45
|
+
FSTileList,
|
|
46
|
+
FSFolderTileUI
|
|
47
|
+
},
|
|
48
|
+
props: {
|
|
49
|
+
folderFilters: {
|
|
50
|
+
type: Object as PropType<FolderFilters>,
|
|
51
|
+
required: false,
|
|
52
|
+
default: () => ({})
|
|
53
|
+
},
|
|
54
|
+
modelValue: {
|
|
55
|
+
type: Array as PropType<string[]>,
|
|
56
|
+
required: false,
|
|
57
|
+
default: () => []
|
|
58
|
+
},
|
|
59
|
+
selectable: {
|
|
60
|
+
type: Boolean,
|
|
61
|
+
required: false,
|
|
62
|
+
default: false
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
emits: ["update:modelValue"],
|
|
66
|
+
setup(props) {
|
|
67
|
+
const { entities: folders, getMany, fetching } = useFolders();
|
|
68
|
+
|
|
69
|
+
const fetch = () => {
|
|
70
|
+
getMany(props.folderFilters);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
watch(() => props.folderFilters, fetch, { immediate: true });
|
|
74
|
+
|
|
75
|
+
return {
|
|
76
|
+
folders,
|
|
77
|
+
fetching,
|
|
78
|
+
ListDirections
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
</script>
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSTileList
|
|
3
|
+
:items="groups"
|
|
4
|
+
:loading="fetching"
|
|
5
|
+
:selectable="$props.selectable"
|
|
6
|
+
:modelValue="$props.modelValue"
|
|
7
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
8
|
+
v-bind="$attrs"
|
|
9
|
+
>
|
|
10
|
+
<template
|
|
11
|
+
#item.tile="{ item, toggleSelect, direction }"
|
|
12
|
+
>
|
|
13
|
+
<FSGroupTileUI
|
|
14
|
+
:imageId="item.imageId"
|
|
15
|
+
:label="item.label"
|
|
16
|
+
:code="item.code"
|
|
17
|
+
:recursiveGroupsIds="item.recursiveGroupsIds"
|
|
18
|
+
:recursiveDeviceOrganisationsIds="item.recursiveDeviceOrganisationsIds"
|
|
19
|
+
:width="direction === ListDirections.Column ? 'fill' : undefined"
|
|
20
|
+
:selectable="$props.selectable"
|
|
21
|
+
:modelValue="($props.modelValue ?? []).includes(item.id)"
|
|
22
|
+
@update:modelValue="toggleSelect(item)"
|
|
23
|
+
/>
|
|
24
|
+
</template>
|
|
25
|
+
</FSTileList>
|
|
26
|
+
</template>
|
|
27
|
+
|
|
28
|
+
<script lang="ts">
|
|
29
|
+
import { defineComponent, type PropType, watch } from "vue";
|
|
30
|
+
|
|
31
|
+
import type { GroupFilters } from "@dative-gpi/foundation-core-domain/models";
|
|
32
|
+
import { useGroups } from "@dative-gpi/foundation-core-services/composables";
|
|
33
|
+
|
|
34
|
+
import FSGroupTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSGroupTileUI.vue";
|
|
35
|
+
import FSTileList from "@dative-gpi/foundation-shared-components/components/lists/FSTileList.vue";
|
|
36
|
+
|
|
37
|
+
import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
export default defineComponent({
|
|
41
|
+
name: "FSTileGroupsList",
|
|
42
|
+
components: {
|
|
43
|
+
FSTileList,
|
|
44
|
+
FSGroupTileUI
|
|
45
|
+
},
|
|
46
|
+
props: {
|
|
47
|
+
groupFilters: {
|
|
48
|
+
type: Object as PropType<GroupFilters>,
|
|
49
|
+
required: false,
|
|
50
|
+
default: () => ({})
|
|
51
|
+
},
|
|
52
|
+
modelValue: {
|
|
53
|
+
type: Array as PropType<string[]>,
|
|
54
|
+
required: false,
|
|
55
|
+
default: () => []
|
|
56
|
+
},
|
|
57
|
+
selectable: {
|
|
58
|
+
type: Boolean,
|
|
59
|
+
required: false,
|
|
60
|
+
default: false
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
emits: ["update:modelValue"],
|
|
64
|
+
setup(props) {
|
|
65
|
+
const { entities: groups, getMany, fetching } = useGroups();
|
|
66
|
+
|
|
67
|
+
const fetch = () => {
|
|
68
|
+
getMany(props.groupFilters);
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
watch(() => props.groupFilters, fetch, { immediate: true });
|
|
72
|
+
|
|
73
|
+
return {
|
|
74
|
+
groups,
|
|
75
|
+
fetching,
|
|
76
|
+
ListDirections
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
</script>
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSTileList
|
|
3
|
+
:items="locations"
|
|
4
|
+
:loading="fetching"
|
|
5
|
+
:selectable="$props.selectable"
|
|
6
|
+
:modelValue="$props.modelValue"
|
|
7
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
8
|
+
v-bind="$attrs"
|
|
9
|
+
>
|
|
10
|
+
<template
|
|
11
|
+
#item.tile="{ item, toggleSelect, direction }"
|
|
12
|
+
>
|
|
13
|
+
<FSLocationTileUI
|
|
14
|
+
:icon="item.icon"
|
|
15
|
+
:label="item.label"
|
|
16
|
+
:code="item.code"
|
|
17
|
+
:color="item.color"
|
|
18
|
+
:address="item.address?.placeLabel"
|
|
19
|
+
:deviceCount="item.deviceOrganisationsCount"
|
|
20
|
+
:width="direction === ListDirections.Column ? 'fill' : undefined"
|
|
21
|
+
:selectable="$props.selectable"
|
|
22
|
+
:modelValue="($props.modelValue ?? []).includes(item.id)"
|
|
23
|
+
@update:modelValue="toggleSelect(item)"
|
|
24
|
+
/>
|
|
25
|
+
</template>
|
|
26
|
+
</FSTileList>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script lang="ts">
|
|
30
|
+
import { defineComponent, type PropType, watch } from "vue";
|
|
31
|
+
|
|
32
|
+
import type { LocationFilters } from "@dative-gpi/foundation-core-domain/models";
|
|
33
|
+
import { useLocations } from "@dative-gpi/foundation-core-services/composables";
|
|
34
|
+
|
|
35
|
+
import FSLocationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSLocationTileUI.vue";
|
|
36
|
+
import FSTileList from "@dative-gpi/foundation-shared-components/components/lists/FSTileList.vue";
|
|
37
|
+
|
|
38
|
+
import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
export default defineComponent({
|
|
42
|
+
name: "FSTileLocationsList",
|
|
43
|
+
components: {
|
|
44
|
+
FSTileList,
|
|
45
|
+
FSLocationTileUI
|
|
46
|
+
},
|
|
47
|
+
props: {
|
|
48
|
+
locationFilters: {
|
|
49
|
+
type: Object as PropType<LocationFilters>,
|
|
50
|
+
required: false,
|
|
51
|
+
default: () => ({})
|
|
52
|
+
},
|
|
53
|
+
modelValue: {
|
|
54
|
+
type: Array as PropType<string[]>,
|
|
55
|
+
required: false,
|
|
56
|
+
default: () => []
|
|
57
|
+
},
|
|
58
|
+
selectable: {
|
|
59
|
+
type: Boolean,
|
|
60
|
+
required: false,
|
|
61
|
+
default: false
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
emits: ["update:modelValue"],
|
|
65
|
+
setup(props) {
|
|
66
|
+
const { entities: locations, getMany, fetching } = useLocations();
|
|
67
|
+
|
|
68
|
+
const fetch = () => {
|
|
69
|
+
getMany(props.locationFilters);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
watch(() => props.locationFilters, fetch, { immediate: true });
|
|
73
|
+
|
|
74
|
+
return {
|
|
75
|
+
locations,
|
|
76
|
+
fetching,
|
|
77
|
+
ListDirections
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
</script>
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSTileList
|
|
3
|
+
:items="models"
|
|
4
|
+
:loading="fetching"
|
|
5
|
+
:selectable="$props.selectable"
|
|
6
|
+
:modelValue="$props.modelValue"
|
|
7
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
8
|
+
v-bind="$attrs"
|
|
9
|
+
>
|
|
10
|
+
<template
|
|
11
|
+
#item.tile="{ item, toggleSelect, direction }"
|
|
12
|
+
>
|
|
13
|
+
<FSModelTileUI
|
|
14
|
+
:imageId="item.imageId"
|
|
15
|
+
:label="item.label"
|
|
16
|
+
:code="item.code"
|
|
17
|
+
:width="direction === ListDirections.Column ? 'fill' : undefined"
|
|
18
|
+
:selectable="$props.selectable"
|
|
19
|
+
:modelValue="($props.modelValue ?? []).includes(item.id)"
|
|
20
|
+
@update:modelValue="toggleSelect(item)"
|
|
21
|
+
/>
|
|
22
|
+
</template>
|
|
23
|
+
</FSTileList>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script lang="ts">
|
|
27
|
+
import { defineComponent, type PropType, watch } from "vue";
|
|
28
|
+
|
|
29
|
+
import type { ModelFilters } from "@dative-gpi/foundation-core-domain/models";
|
|
30
|
+
import { useModels } from "@dative-gpi/foundation-core-services/composables";
|
|
31
|
+
|
|
32
|
+
import FSModelTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSModelTileUI.vue";
|
|
33
|
+
import FSTileList from "@dative-gpi/foundation-shared-components/components/lists/FSTileList.vue";
|
|
34
|
+
|
|
35
|
+
import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
export default defineComponent({
|
|
39
|
+
name: "FSTileModelsList",
|
|
40
|
+
components: {
|
|
41
|
+
FSTileList,
|
|
42
|
+
FSModelTileUI
|
|
43
|
+
},
|
|
44
|
+
props: {
|
|
45
|
+
modelFilters: {
|
|
46
|
+
type: Object as PropType<ModelFilters>,
|
|
47
|
+
required: false,
|
|
48
|
+
default: () => ({})
|
|
49
|
+
},
|
|
50
|
+
modelValue: {
|
|
51
|
+
type: Array as PropType<string[]>,
|
|
52
|
+
required: false,
|
|
53
|
+
default: () => []
|
|
54
|
+
},
|
|
55
|
+
selectable: {
|
|
56
|
+
type: Boolean,
|
|
57
|
+
required: false,
|
|
58
|
+
default: false
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
emits: ["update:modelValue"],
|
|
62
|
+
setup(props) {
|
|
63
|
+
const { entities: models, getMany, fetching } = useModels();
|
|
64
|
+
|
|
65
|
+
const fetch = () => {
|
|
66
|
+
getMany(props.modelFilters);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
watch(() => props.modelFilters, fetch, { immediate: true });
|
|
70
|
+
|
|
71
|
+
return {
|
|
72
|
+
models,
|
|
73
|
+
fetching,
|
|
74
|
+
ListDirections
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
</script>
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSTileList
|
|
3
|
+
:items="userOrganisations"
|
|
4
|
+
:loading="fetching"
|
|
5
|
+
:selectable="$props.selectable"
|
|
6
|
+
:modelValue="$props.modelValue"
|
|
7
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
8
|
+
v-bind="$attrs"
|
|
9
|
+
>
|
|
10
|
+
<template
|
|
11
|
+
#item.tile="{ item, toggleSelect, direction }"
|
|
12
|
+
>
|
|
13
|
+
<FSUserOrganisationTileUI
|
|
14
|
+
:imageId="item.imageId"
|
|
15
|
+
:name="item.name"
|
|
16
|
+
:roleLabel="item.roleLabel"
|
|
17
|
+
:roleIcon="item.roleIcon"
|
|
18
|
+
:admin="item.admin"
|
|
19
|
+
:width="direction === ListDirections.Column ? 'fill' : undefined"
|
|
20
|
+
:selectable="$props.selectable"
|
|
21
|
+
:modelValue="($props.modelValue ?? []).includes(item.id)"
|
|
22
|
+
@update:modelValue="toggleSelect(item)"
|
|
23
|
+
/>
|
|
24
|
+
</template>
|
|
25
|
+
</FSTileList>
|
|
26
|
+
</template>
|
|
27
|
+
|
|
28
|
+
<script lang="ts">
|
|
29
|
+
import { defineComponent, type PropType, watch } from "vue";
|
|
30
|
+
|
|
31
|
+
import type { UserOrganisationFilters } from "@dative-gpi/foundation-core-domain/models";
|
|
32
|
+
import { useUserOrganisations } from "@dative-gpi/foundation-core-services/composables";
|
|
33
|
+
|
|
34
|
+
import FSUserOrganisationTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSUserOrganisationTileUI.vue";
|
|
35
|
+
import FSTileList from "@dative-gpi/foundation-shared-components/components/lists/FSTileList.vue";
|
|
36
|
+
|
|
37
|
+
import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
export default defineComponent({
|
|
41
|
+
name: "FSTileUserOrganisationsList",
|
|
42
|
+
components: {
|
|
43
|
+
FSTileList,
|
|
44
|
+
FSUserOrganisationTileUI
|
|
45
|
+
},
|
|
46
|
+
props: {
|
|
47
|
+
userOrganisationFilters: {
|
|
48
|
+
type: Object as PropType<UserOrganisationFilters>,
|
|
49
|
+
required: false,
|
|
50
|
+
default: () => ({})
|
|
51
|
+
},
|
|
52
|
+
modelValue: {
|
|
53
|
+
type: Array as PropType<string[]>,
|
|
54
|
+
required: false
|
|
55
|
+
},
|
|
56
|
+
selectable: {
|
|
57
|
+
type: Boolean,
|
|
58
|
+
required: false,
|
|
59
|
+
default: false
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
setup(props) {
|
|
63
|
+
const { entities: userOrganisations, getMany, fetching } = useUserOrganisations();
|
|
64
|
+
|
|
65
|
+
const fetch = () => {
|
|
66
|
+
getMany(props.userOrganisationFilters);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
watch(() => props.userOrganisationFilters, fetch, { immediate: true });
|
|
70
|
+
|
|
71
|
+
return {
|
|
72
|
+
userOrganisations,
|
|
73
|
+
fetching,
|
|
74
|
+
ListDirections
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
</script>
|
package/package.json
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dative-gpi/foundation-core-components",
|
|
3
|
+
"repository": {
|
|
4
|
+
"url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
|
|
5
|
+
},
|
|
3
6
|
"sideEffects": false,
|
|
4
|
-
"version": "1.0.
|
|
7
|
+
"version": "1.0.188-add-data-enums-2",
|
|
5
8
|
"description": "",
|
|
6
9
|
"publishConfig": {
|
|
7
10
|
"access": "public"
|
|
@@ -10,11 +13,11 @@
|
|
|
10
13
|
"author": "",
|
|
11
14
|
"license": "ISC",
|
|
12
15
|
"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.
|
|
16
|
+
"@dative-gpi/foundation-core-domain": "1.0.188-add-data-enums-2",
|
|
17
|
+
"@dative-gpi/foundation-core-services": "1.0.188-add-data-enums-2",
|
|
18
|
+
"@dative-gpi/foundation-shared-components": "1.0.188-add-data-enums-2",
|
|
19
|
+
"@dative-gpi/foundation-shared-domain": "1.0.188-add-data-enums-2",
|
|
20
|
+
"@dative-gpi/foundation-shared-services": "1.0.188-add-data-enums-2"
|
|
18
21
|
},
|
|
19
22
|
"peerDependencies": {
|
|
20
23
|
"@dative-gpi/bones-ui": "^1.0.0",
|
|
@@ -26,5 +29,5 @@
|
|
|
26
29
|
"sass": "1.71.1",
|
|
27
30
|
"sass-loader": "13.3.2"
|
|
28
31
|
},
|
|
29
|
-
"gitHead": "
|
|
32
|
+
"gitHead": "a1397898d0224df6edb922d3f545b62865957fd8"
|
|
30
33
|
}
|