@dative-gpi/foundation-core-components 0.0.83 → 0.0.85
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.
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSAutocompleteField
|
|
3
|
+
:toggleSet="!$props.toggleSetDisabled && toggleSet"
|
|
4
|
+
:loading="loading"
|
|
5
|
+
:items="locations"
|
|
6
|
+
:modelValue="$props.modelValue"
|
|
7
|
+
@update:modelValue="onUpdate"
|
|
8
|
+
v-model:search="search"
|
|
9
|
+
v-bind="$attrs"
|
|
10
|
+
/>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script lang="ts">
|
|
14
|
+
import { computed, defineComponent, PropType } from "vue";
|
|
15
|
+
|
|
16
|
+
import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
|
|
17
|
+
import { useLocations } from "@dative-gpi/foundation-core-services/composables";
|
|
18
|
+
import { LocationFilters } from "@dative-gpi/foundation-core-domain/models";
|
|
19
|
+
|
|
20
|
+
import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
|
|
21
|
+
|
|
22
|
+
export default defineComponent({
|
|
23
|
+
name: "FSAutocompleteLocation",
|
|
24
|
+
components: {
|
|
25
|
+
FSAutocompleteField
|
|
26
|
+
},
|
|
27
|
+
props: {
|
|
28
|
+
locationFilters: {
|
|
29
|
+
type: Object as PropType<LocationFilters>,
|
|
30
|
+
required: false,
|
|
31
|
+
default: null
|
|
32
|
+
},
|
|
33
|
+
modelValue: {
|
|
34
|
+
type: [Array, String] as PropType<string[] | string | null>,
|
|
35
|
+
required: false,
|
|
36
|
+
default: null
|
|
37
|
+
},
|
|
38
|
+
toggleSetDisabled: {
|
|
39
|
+
type: Boolean,
|
|
40
|
+
required: false,
|
|
41
|
+
default: false
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
emits: ["update:modelValue"],
|
|
45
|
+
setup(props, { emit }) {
|
|
46
|
+
const { getMany: getManyLocations, fetching: fetchingLocations, entities: locations } = useLocations();
|
|
47
|
+
|
|
48
|
+
const innerFetch = (search: string | null) => {
|
|
49
|
+
return getManyLocations({ ...props.locationFilters, search: search ?? undefined });
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const { toggleSet, search, init, onUpdate } = useAutocomplete(
|
|
53
|
+
locations,
|
|
54
|
+
[() => props.locationFilters],
|
|
55
|
+
emit,
|
|
56
|
+
innerFetch
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
const loading = computed((): boolean => {
|
|
60
|
+
return init.value && fetchingLocations.value;
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
return {
|
|
64
|
+
locations,
|
|
65
|
+
toggleSet,
|
|
66
|
+
loading,
|
|
67
|
+
search,
|
|
68
|
+
onUpdate
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
</script>
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSAutocompleteField
|
|
3
|
+
:toggleSet="!$props.toggleSetDisabled && toggleSet"
|
|
4
|
+
:loading="loading"
|
|
5
|
+
:items="roles"
|
|
6
|
+
:modelValue="$props.modelValue"
|
|
7
|
+
@update:modelValue="onUpdate"
|
|
8
|
+
v-model:search="search"
|
|
9
|
+
v-bind="$attrs"
|
|
10
|
+
/>
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script lang="ts">
|
|
14
|
+
import { computed, defineComponent, PropType } from "vue";
|
|
15
|
+
|
|
16
|
+
import { RoleOrganisationFilters, RoleOrganisationTypeFilters, RoleType } from "@dative-gpi/foundation-core-domain/models";
|
|
17
|
+
import { useRoleOrganisations, useRoleOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
|
|
18
|
+
import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
|
|
19
|
+
|
|
20
|
+
import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
|
|
21
|
+
|
|
22
|
+
export default defineComponent({
|
|
23
|
+
name: "FSAutocompleteRole",
|
|
24
|
+
components: {
|
|
25
|
+
FSAutocompleteField
|
|
26
|
+
},
|
|
27
|
+
props: {
|
|
28
|
+
roleOrganisationTypeFilters: {
|
|
29
|
+
type: Object as PropType<RoleOrganisationTypeFilters>,
|
|
30
|
+
required: false,
|
|
31
|
+
default: null
|
|
32
|
+
},
|
|
33
|
+
roleOrganisationFilters: {
|
|
34
|
+
type: Object as PropType<RoleOrganisationFilters>,
|
|
35
|
+
required: false,
|
|
36
|
+
default: null
|
|
37
|
+
},
|
|
38
|
+
modelValue: {
|
|
39
|
+
type: [Array, String] as PropType<string[] | string | null>,
|
|
40
|
+
required: false,
|
|
41
|
+
default: null
|
|
42
|
+
},
|
|
43
|
+
toggleSetDisabled: {
|
|
44
|
+
type: Boolean,
|
|
45
|
+
required: false,
|
|
46
|
+
default: false
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
emits: ["update:modelValue", "update:type"],
|
|
50
|
+
setup(props, { emit }) {
|
|
51
|
+
const { getMany: getManyRoleOrganisationTypes, fetching: fetchingRoleOrganisationTypes, entities: roleOrganisationTypes } = useRoleOrganisationTypes();
|
|
52
|
+
const { getMany: getManyRoleOrganisations, fetching: fetchingRoleOrganisations, entities: roleOrganisations } = useRoleOrganisations();
|
|
53
|
+
|
|
54
|
+
const roles = computed(() => {
|
|
55
|
+
return roleOrganisationTypes.value.map(rot => ({
|
|
56
|
+
id: rot.id,
|
|
57
|
+
icon: rot.icon,
|
|
58
|
+
label: rot.label,
|
|
59
|
+
type: RoleType.OrganisationType
|
|
60
|
+
})).concat(roleOrganisations.value.map(ro => ({
|
|
61
|
+
id: ro.id,
|
|
62
|
+
icon: ro.icon,
|
|
63
|
+
label: ro.label,
|
|
64
|
+
type: RoleType.Organisation
|
|
65
|
+
})));
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
const innerUpdate = (value: Role[] | Role | null) => {
|
|
69
|
+
if (Array.isArray(value)) {
|
|
70
|
+
emit("update:modelValue", value.map(v => v.id));
|
|
71
|
+
emit("update:type", value.map(v => v.type));
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
emit("update:modelValue", value?.id);
|
|
75
|
+
emit("update:type", value?.type);
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
const innerFetch = (search: string | null) => {
|
|
80
|
+
return Promise.all([
|
|
81
|
+
getManyRoleOrganisationTypes({ ...props.roleOrganisationTypeFilters, search: search ?? undefined }),
|
|
82
|
+
getManyRoleOrganisations({ ...props.roleOrganisationFilters, search: search ?? undefined })
|
|
83
|
+
]);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
const { toggleSet, search, init, onUpdate } = useAutocomplete(
|
|
87
|
+
roles,
|
|
88
|
+
[() => props.roleOrganisationTypeFilters, () => props.roleOrganisationFilters],
|
|
89
|
+
emit,
|
|
90
|
+
innerFetch,
|
|
91
|
+
innerUpdate
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
const loading = computed((): boolean => {
|
|
95
|
+
return init.value && (fetchingRoleOrganisationTypes.value || fetchingRoleOrganisations.value);
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
return {
|
|
99
|
+
toggleSet,
|
|
100
|
+
loading,
|
|
101
|
+
search,
|
|
102
|
+
roles,
|
|
103
|
+
onUpdate
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
interface Role {
|
|
109
|
+
id: string;
|
|
110
|
+
icon: string;
|
|
111
|
+
label: string;
|
|
112
|
+
type: RoleType;
|
|
113
|
+
}
|
|
114
|
+
</script>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<FSLoadDataTable
|
|
3
|
-
v-if="
|
|
3
|
+
v-if="gettingUserOrganisationTable"
|
|
4
4
|
/>
|
|
5
5
|
<FSDataTableUI
|
|
6
6
|
v-else
|
|
@@ -18,14 +18,20 @@
|
|
|
18
18
|
@update:page="updatePage"
|
|
19
19
|
v-bind="$attrs"
|
|
20
20
|
>
|
|
21
|
-
<template
|
|
22
|
-
|
|
21
|
+
<template
|
|
22
|
+
v-for="(_, name) in $slots"
|
|
23
|
+
v-slot:[name]="slotData"
|
|
24
|
+
>
|
|
25
|
+
<slot
|
|
26
|
+
:name="name"
|
|
27
|
+
v-bind="slotData"
|
|
28
|
+
/>
|
|
23
29
|
</template>
|
|
24
30
|
</FSDataTableUI>
|
|
25
31
|
</template>
|
|
26
32
|
|
|
27
33
|
<script lang="ts">
|
|
28
|
-
import { defineComponent,
|
|
34
|
+
import { defineComponent, onUnmounted, ref, Ref, watch } from "vue";
|
|
29
35
|
import { useRouter } from "vue-router";
|
|
30
36
|
|
|
31
37
|
import { useUserOrganisationTable, useUpdateUserOrganisationTable } from "@dative-gpi/foundation-core-services/composables";
|
|
@@ -48,8 +54,8 @@ export default defineComponent({
|
|
|
48
54
|
}
|
|
49
55
|
},
|
|
50
56
|
setup(props) {
|
|
51
|
-
const { get, getting, entity } = useUserOrganisationTable();
|
|
52
|
-
const { update } = useUpdateUserOrganisationTable();
|
|
57
|
+
const { get: getUserOrganisationTable, getting: gettingUserOrganisationTable, entity: userOrganisationTable } = useUserOrganisationTable();
|
|
58
|
+
const { update: updateUserOrganisationTable } = useUpdateUserOrganisationTable();
|
|
53
59
|
const { debounce, cancel } = useDebounce();
|
|
54
60
|
const router = useRouter();
|
|
55
61
|
|
|
@@ -63,24 +69,26 @@ export default defineComponent({
|
|
|
63
69
|
const reset = (): void => {
|
|
64
70
|
if (router && router.currentRoute.value.query[props.tableCode]) {
|
|
65
71
|
const query = JSON.parse(router.currentRoute.value.query[props.tableCode] as string);
|
|
66
|
-
innerHeaders.value = query.columns;
|
|
72
|
+
// innerHeaders.value = query.columns;
|
|
73
|
+
// innerFilters.value = query.filters;
|
|
67
74
|
innerRowsPerPage.value = query.rowsPerPage;
|
|
68
75
|
innerSortBy.value = query.sortByKey ? {
|
|
69
76
|
key: query.sortByKey,
|
|
70
77
|
order: query.sortByOrder
|
|
71
78
|
} : null;
|
|
72
79
|
innerMode.value = query.mode;
|
|
73
|
-
innerFilters.value = query.filters;
|
|
74
80
|
innerPage.value = query.page;
|
|
75
81
|
}
|
|
76
|
-
else {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
order: entity.value.sortByOrder
|
|
82
|
+
else if (userOrganisationTable.value) {
|
|
83
|
+
innerRowsPerPage.value = userOrganisationTable.value.rowsPerPage;
|
|
84
|
+
innerSortBy.value = userOrganisationTable.value.sortByKey ? {
|
|
85
|
+
key: userOrganisationTable.value.sortByKey!,
|
|
86
|
+
order: userOrganisationTable.value.sortByOrder!
|
|
82
87
|
} : null;
|
|
83
|
-
innerMode.value =
|
|
88
|
+
innerMode.value = userOrganisationTable.value.mode;
|
|
89
|
+
}
|
|
90
|
+
if (userOrganisationTable.value) {
|
|
91
|
+
innerHeaders.value = userOrganisationTable.value.columns;
|
|
84
92
|
}
|
|
85
93
|
};
|
|
86
94
|
|
|
@@ -116,7 +124,7 @@ export default defineComponent({
|
|
|
116
124
|
|
|
117
125
|
const updateTable = (): void => {
|
|
118
126
|
updateRouter();
|
|
119
|
-
|
|
127
|
+
updateUserOrganisationTable(props.tableCode, {
|
|
120
128
|
columns: innerHeaders.value.map(column => ({
|
|
121
129
|
columnId: column.columnId,
|
|
122
130
|
hidden: column.hidden,
|
|
@@ -135,12 +143,12 @@ export default defineComponent({
|
|
|
135
143
|
query: {
|
|
136
144
|
...router.currentRoute.value.query,
|
|
137
145
|
[props.tableCode]: JSON.stringify({
|
|
138
|
-
columns: innerHeaders.value,
|
|
146
|
+
// columns: innerHeaders.value,
|
|
147
|
+
// filters: innerFilters.value,
|
|
139
148
|
rowsPerPage: innerRowsPerPage.value,
|
|
140
149
|
sortByKey: innerSortBy.value?.key,
|
|
141
150
|
sortByOrder: innerSortBy.value?.order,
|
|
142
151
|
mode: innerMode.value,
|
|
143
|
-
filters: innerFilters.value,
|
|
144
152
|
page: innerPage.value
|
|
145
153
|
})
|
|
146
154
|
}
|
|
@@ -148,36 +156,34 @@ export default defineComponent({
|
|
|
148
156
|
}
|
|
149
157
|
};
|
|
150
158
|
|
|
151
|
-
onMounted(() => {
|
|
152
|
-
get(props.tableCode);
|
|
153
|
-
});
|
|
154
|
-
|
|
155
159
|
onUnmounted(() => {
|
|
156
160
|
cancel();
|
|
157
161
|
updateTable();
|
|
158
162
|
});
|
|
159
163
|
|
|
160
164
|
watch(() => props.tableCode, () => {
|
|
161
|
-
|
|
162
|
-
|
|
165
|
+
if (props.tableCode) {
|
|
166
|
+
getUserOrganisationTable(props.tableCode);
|
|
167
|
+
}
|
|
168
|
+
}, { immediate: true });
|
|
163
169
|
|
|
164
|
-
watch(
|
|
170
|
+
watch(userOrganisationTable, () => {
|
|
165
171
|
reset();
|
|
166
172
|
});
|
|
167
173
|
|
|
168
174
|
return {
|
|
169
|
-
|
|
170
|
-
innerHeaders,
|
|
175
|
+
gettingUserOrganisationTable,
|
|
171
176
|
innerRowsPerPage,
|
|
177
|
+
innerFilters,
|
|
178
|
+
innerHeaders,
|
|
172
179
|
innerSortBy,
|
|
173
180
|
innerMode,
|
|
174
|
-
innerFilters,
|
|
175
181
|
innerPage,
|
|
176
|
-
updateHeaders,
|
|
177
|
-
updateMode,
|
|
178
|
-
updateSortBy,
|
|
179
182
|
updateRowsPerPage,
|
|
180
183
|
updateFilters,
|
|
184
|
+
updateHeaders,
|
|
185
|
+
updateSortBy,
|
|
186
|
+
updateMode,
|
|
181
187
|
updatePage
|
|
182
188
|
};
|
|
183
189
|
},
|
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.85",
|
|
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.85",
|
|
14
|
+
"@dative-gpi/foundation-core-services": "0.0.85",
|
|
15
|
+
"@dative-gpi/foundation-shared-components": "0.0.85",
|
|
16
|
+
"@dative-gpi/foundation-shared-domain": "0.0.85",
|
|
17
|
+
"@dative-gpi/foundation-shared-services": "0.0.85",
|
|
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": "9c0b770f8b54cce1cd3aa7c25c91ad1a99b08862"
|
|
28
28
|
}
|