Skip to content

Commit 88e7321

Browse files
ipulajardakotesovec
ipula
authored and
jardakotesovec
committed
improve user access manager extensibility
1 parent 4ebb551 commit 88e7321

5 files changed

+171
-114
lines changed

‎src/managers/UserAccessManager/UserAccessManager.vue

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,17 @@
88
</h3>
99
</template>
1010
<template #top-controls>
11-
<Search
12-
:search-phrase="searchPhrase"
13-
:search-label="t('userAccess.search')"
14-
@search-phrase-changed="store.setSearchPhrase"
15-
/>
11+
<div class="flex gap-x-2">
12+
<component
13+
:is="Components[action.component] || action.component"
14+
v-bind="action.props || {}"
15+
v-for="(action, i) in store.topItems"
16+
:key="i"
17+
></component>
18+
</div>
1619
</template>
1720
<TableHeader>
18-
<TableColumn v-for="(column, i) in store.getColumns()" :key="i">
21+
<TableColumn v-for="(column, i) in store.columns" :key="i">
1922
<span :class="column.headerSrOnly ? 'sr-only' : ''">
2023
{{ column.header }}
2124
</span>
@@ -25,7 +28,7 @@
2528
<TableRow v-for="user in store.userList" :key="user.id">
2629
<component
2730
:is="Components[column.component] || column.component"
28-
v-for="(column, i) in store.getColumns()"
31+
v-for="(column, i) in store.columns"
2932
:key="i"
3033
:user="user"
3134
></component>
@@ -47,14 +50,13 @@ import TableRow from '@/components/Table/TableRow.vue';
4750
import {useUserAccessManagerStore} from './UserAccessManagerStore.js';
4851
import TablePagination from '@/components/Table/TablePagination.vue';
4952
import {useLocalize} from '@/composables/useLocalize';
50-
import Search from '@/components/Search/Search.vue';
51-
import {ref} from 'vue';
5253
import UserAccessManagerCellStartDate from './UserAccessManagerCellStartDate.vue';
5354
import UserAccessManagerCellUserGroups from './UserAccessManagerCellUserGroups.vue';
5455
import UserAccessManagerCellActions from './UserAccessManagerCellActions.vue';
5556
import UserAccessManagerCellName from './UserAccessManagerCellName.vue';
5657
import UserAccessManagerCellEmail from './UserAccessManagerCellEmail.vue';
5758
import UserAccessManagerCellAffiliation from './UserAccessManagerCellAffiliation.vue';
59+
import UserAccessManagerActionSearch from './UserAccessManagerActionSearch.vue';
5860
5961
const Components = {
6062
UserAccessManagerCellStartDate,
@@ -63,9 +65,9 @@ const Components = {
6365
UserAccessManagerCellName,
6466
UserAccessManagerCellEmail,
6567
UserAccessManagerCellAffiliation,
68+
UserAccessManagerActionSearch,
6669
};
6770
6871
const store = useUserAccessManagerStore();
6972
const {t} = useLocalize();
70-
const searchPhrase = ref('');
7173
</script>

‎src/managers/UserAccessManager/UserAccessManagerActionSearch.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<Search
3+
:search-phrase="store.searchPhrase"
4+
:search-label="t('userAccess.search')"
5+
@search-phrase-changed="store.setSearchPhrase"
6+
/>
7+
</template>
8+
<script setup>
9+
import Search from '@/components/Search/Search.vue';
10+
11+
import {useUserAccessManagerStore} from './UserAccessManagerStore';
12+
13+
const store = useUserAccessManagerStore();
14+
</script>

‎src/managers/UserAccessManager/UserAccessManagerStore.js

Lines changed: 26 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@ import {useUrl} from '@/composables/useUrl';
33
import {useAnnouncer} from '@/composables/useAnnouncer';
44
import {useLocalize} from '@/composables/useLocalize';
55
import {useFetchPaginated} from '@/composables/useFetchPaginated';
6-
import {ref, watch} from 'vue';
6+
import {ref, watch, computed} from 'vue';
77
import {useUserAccessManagerActions} from './useUserAccessManagerActions';
8+
import {useUserAccessManagerConfig} from './useUserAccessManagerConfig';
9+
import {useExtender} from '@/composables/useExtender';
810

911
export const useUserAccessManagerStore = defineComponentStore(
1012
'userAccessManager',
1113
() => {
14+
const extender = useExtender();
1215
const {t} = useLocalize();
1316
/** Announcer */
1417

@@ -60,52 +63,19 @@ export const useUserAccessManagerStore = defineComponentStore(
6063
}
6164

6265
/**
63-
* User access table columns
64-
* @returns array
66+
* Config
6567
*/
66-
function getColumns() {
67-
const columns = [];
68-
69-
columns.push({
70-
header: t('userAccess.tableHeader.name'),
71-
component: 'UserAccessManagerCellName',
72-
props: {},
73-
});
74-
75-
columns.push({
76-
header: t('about.contact.email'),
77-
component: 'UserAccessManagerCellEmail',
78-
props: {},
79-
});
80-
81-
columns.push({
82-
header: t('user.roles'),
83-
component: 'UserAccessManagerCellUserGroups',
84-
props: {},
85-
});
86-
columns.push({
87-
header: t('userAccess.tableHeader.startDate'),
88-
component: 'UserAccessManagerCellStartDate',
89-
props: {},
90-
});
91-
columns.push({
92-
header: t('user.affiliation'),
93-
component: 'UserAccessManagerCellAffiliation',
94-
props: {},
95-
});
96-
97-
columns.push({
98-
header: t('common.moreActions'),
99-
component: 'UserAccessManagerCellActions',
100-
props: {},
101-
headerSrOnly: true,
102-
});
103-
104-
return columns;
68+
const userAccessManagerConfig = extender.addFns(
69+
useUserAccessManagerConfig(),
70+
);
71+
72+
const columns = computed(() => userAccessManagerConfig.getColumns());
73+
74+
const topItems = computed(() => userAccessManagerConfig.getTopItems());
75+
76+
function getItemActions({user}) {
77+
return userAccessManagerConfig.getItemActions({user});
10578
}
106-
/**
107-
* Actions
108-
*/
10979

11080
/*
11181
* redirect to send invitation page
@@ -117,10 +87,6 @@ export const useUserAccessManagerStore = defineComponentStore(
11787

11888
const _userAccessActionsFns = useUserAccessManagerActions();
11989

120-
function getItemActions({user}) {
121-
return _userAccessActionsFns.getItemActions({user});
122-
}
123-
12490
function sendEmail({user}) {
12591
_userAccessActionsFns.sendEmail({user}, triggerDataChangeCallback);
12692
}
@@ -143,11 +109,18 @@ export const useUserAccessManagerStore = defineComponentStore(
143109

144110
return {
145111
userAccessCount,
112+
userList,
113+
/** Configs*/
114+
columns,
115+
topItems,
116+
117+
/** Pagination*/
146118
setCurrentPage,
147119
currentPage,
148120
userAccessPagination,
149-
userList,
150121
isUserAccessLoading,
122+
123+
/** Actions*/
151124
setSearchPhrase,
152125
sendEmail,
153126
disableUser,
@@ -156,7 +129,9 @@ export const useUserAccessManagerStore = defineComponentStore(
156129
loginAs,
157130
getItemActions,
158131
editUser,
159-
getColumns,
132+
133+
/**refs */
134+
searchPhrase,
160135
};
161136
},
162137
);

‎src/managers/UserAccessManager/useUserAccessManagerActions.js

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {useLegacyGridUrl} from '@/composables/useLegacyGridUrl';
33
import {useModal} from '@/composables/useModal';
44
import {useFetch, getCSRFToken} from '@/composables/useFetch';
55
import {useUrl} from '@/composables/useUrl';
6-
import {useCurrentUser} from '@/composables/useCurrentUser';
76

87
export const Actions = {
98
USER_ACCESS_EDIT: 'editUser',
@@ -16,57 +15,6 @@ export const Actions = {
1615

1716
export function useUserAccessManagerActions() {
1817
const {t} = useLocalize();
19-
const {getCurrentUserId} = useCurrentUser();
20-
21-
function getItemActions({user}) {
22-
const actions = [];
23-
24-
actions.push({
25-
label: t('common.edit'),
26-
name: Actions.USER_ACCESS_EDIT,
27-
icon: 'Edit',
28-
});
29-
30-
actions.push({
31-
label: t('email.email'),
32-
icon: 'Email',
33-
name: Actions.USER_ACCESS_SEND_MAIL,
34-
});
35-
36-
if (getCurrentUserId() !== user.id) {
37-
user.canLoginAs &&
38-
actions.push({
39-
label: t('grid.user.logInAs'),
40-
icon: 'LoginAs',
41-
name: Actions.USER_ACCESS_LOGIN_AS,
42-
});
43-
44-
if (user.groups.find((value) => value.dateEnd === null)) {
45-
actions.push({
46-
label: t('grid.user.remove'),
47-
icon: 'Cancel',
48-
name: Actions.USER_ACCESS_REMOVE_USER,
49-
isWarnable: true,
50-
});
51-
}
52-
53-
actions.push({
54-
label: user.disabled ? t('grid.user.enable') : t('grid.user.disable'),
55-
icon: user.disabled ? 'User' : 'DisableUser',
56-
name: Actions.USER_ACCESS_DISABLE_USER,
57-
isWarnable: !user.disabled,
58-
});
59-
60-
user.canMergeUsers &&
61-
actions.push({
62-
label: t('grid.action.mergeUser'),
63-
icon: 'MergeUser',
64-
name: Actions.USER_ACCESS_MERGE_USER,
65-
});
66-
}
67-
68-
return actions;
69-
}
7018

7119
function sendEmail({user}, finishedCallback) {
7220
const {openLegacyModal} = useLegacyGridUrl({
@@ -197,6 +145,5 @@ export function useUserAccessManagerActions() {
197145
loginAs,
198146
removeUser,
199147
mergeUser,
200-
getItemActions,
201148
};
202149
}

‎src/managers/UserAccessManager/useUserAccessManagerConfig.js

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import {useLocalize} from '@/composables/useLocalize';
2+
import {Actions} from './useUserAccessManagerActions';
3+
import {useCurrentUser} from '@/composables/useCurrentUser';
4+
5+
export function useUserAccessManagerConfig() {
6+
const {t} = useLocalize();
7+
const {getCurrentUserId} = useCurrentUser();
8+
9+
function getItemActions({user}) {
10+
const actions = [];
11+
12+
actions.push({
13+
label: t('common.edit'),
14+
name: Actions.USER_ACCESS_EDIT,
15+
icon: 'Edit',
16+
});
17+
18+
actions.push({
19+
label: t('email.email'),
20+
icon: 'Email',
21+
name: Actions.USER_ACCESS_SEND_MAIL,
22+
});
23+
24+
if (getCurrentUserId() !== user.id) {
25+
user.canLoginAs &&
26+
actions.push({
27+
label: t('grid.user.logInAs'),
28+
icon: 'LoginAs',
29+
name: Actions.USER_ACCESS_LOGIN_AS,
30+
});
31+
32+
if (user.groups.find((value) => value.dateEnd === null)) {
33+
actions.push({
34+
label: t('grid.user.remove'),
35+
icon: 'Cancel',
36+
name: Actions.USER_ACCESS_REMOVE_USER,
37+
isWarnable: true,
38+
});
39+
}
40+
41+
actions.push({
42+
label: user.disabled ? t('grid.user.enable') : t('grid.user.disable'),
43+
icon: user.disabled ? 'User' : 'DisableUser',
44+
name: Actions.USER_ACCESS_DISABLE_USER,
45+
isWarnable: !user.disabled,
46+
});
47+
48+
user.canMergeUsers &&
49+
actions.push({
50+
label: t('grid.action.mergeUser'),
51+
icon: 'MergeUser',
52+
name: Actions.USER_ACCESS_MERGE_USER,
53+
});
54+
}
55+
56+
return actions;
57+
}
58+
/**
59+
* User access table columns
60+
* @returns array
61+
*/
62+
function getColumns() {
63+
const columns = [];
64+
65+
columns.push({
66+
header: t('userAccess.tableHeader.name'),
67+
component: 'UserAccessManagerCellName',
68+
props: {},
69+
});
70+
71+
columns.push({
72+
header: t('about.contact.email'),
73+
component: 'UserAccessManagerCellEmail',
74+
props: {},
75+
});
76+
77+
columns.push({
78+
header: t('user.roles'),
79+
component: 'UserAccessManagerCellUserGroups',
80+
props: {},
81+
});
82+
columns.push({
83+
header: t('userAccess.tableHeader.startDate'),
84+
component: 'UserAccessManagerCellStartDate',
85+
props: {},
86+
});
87+
columns.push({
88+
header: t('user.affiliation'),
89+
component: 'UserAccessManagerCellAffiliation',
90+
props: {},
91+
});
92+
93+
columns.push({
94+
header: t('common.moreActions'),
95+
component: 'UserAccessManagerCellActions',
96+
props: {},
97+
headerSrOnly: true,
98+
});
99+
100+
return columns;
101+
}
102+
103+
function getTopItems() {
104+
const items = [];
105+
items.push({
106+
component: 'UserAccessManagerActionSearch',
107+
props: {},
108+
});
109+
110+
return items;
111+
}
112+
113+
return {
114+
getColumns,
115+
getItemActions,
116+
// getBottomItems,
117+
getTopItems,
118+
};
119+
}

0 commit comments

Comments
 (0)