Skip to content

Commit

Permalink
Added group select to admin tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmathis
rmathis committed Jul 1, 2021
1 parent e691694 commit eb4f325
Show file tree
Hide file tree
Showing 6 changed files with 87 additions and 48 deletions.
92 changes: 58 additions & 34 deletions ui/src/app/admin/component/UserMaintenance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ import Button from 'react-bootstrap/Button';
import Translate from '../../i18n/components/translate';
import { useCurrentUser } from '../../core/user/UserContext';

export default function UserMaintenance({ users, roles, onDeleteUser, onChangeUserRole }) {
import { GroupsProvider } from '../hoc/GroupsProvider';

export default function UserMaintenance({ users, roles, onDeleteUser, onChangeUserRole, onChangeUserGroup }) {

const currentUser = useCurrentUser();

Expand All @@ -20,43 +22,65 @@ export default function UserMaintenance({ users, roles, onDeleteUser, onChangeUs
<th scope="col" ><Translate value="label.name">Name</Translate></th>
<th scope="col"><Translate value="label.email">Email</Translate></th>
<th scope="col" ><Translate value="label.role">Role</Translate></th>
<th scope="col" ><Translate value="label.group">Group</Translate></th>
<th scope="col"><Translate value="label.delete">Delete?</Translate></th>
</tr>
</thead>
<tbody>
{users.map((user, idx) =>
<tr key={idx}>
<th>{user.username}</th>
<td>{user.firstName} {user.lastName}</td>
<td>{user.emailAddress}</td>
<td>
<label htmlFor={`role-${user.username}`} className="sr-only"><Translate value="action.user-role">User role</Translate></label>
<select
id={`role-${user.username}`}
name={`role-${user.username}`}
model="user.role"
className="form-control"
onChange={(event) => onChangeUserRole(user, event.target.value)}
value={user.role}
disabled={currentUser.username === user.username}
disablevalidation="true">
{roles.map((role, ridx) => (
<option key={role} value={role}>{role}</option>
))}
</select>
</td>
<td>
{currentUser.username !== user.username &&
<Button className="text-danger" variant="link" onClick={() => onDeleteUser(user.username)}>
<span className="sr-only">
<Translate value="label.delete-user">Delete User</Translate>
</span>
<FontAwesomeIcon icon={faTrash} />
</Button>
}
</td>
</tr>
)}
<GroupsProvider>
{(groups, onRemove, loadingGroups) =>
<React.Fragment>
{users.map((user, idx) =>
<tr key={idx}>
<th>{user.username}</th>
<td>{user.firstName} {user.lastName}</td>
<td>{user.emailAddress}</td>
<td>
<label htmlFor={`role-${user.username}`} className="sr-only"><Translate value="action.user-role">User role</Translate></label>
<select
id={`role-${user.username}`}
name={`role-${user.username}`}
className="form-control"
onChange={(event) => onChangeUserRole(user, event.target.value)}
value={user.role}
disabled={currentUser.username === user.username}
disablevalidation="true">
{roles.map((role, ridx) => (
<option key={role} value={role}>{role}</option>
))}
</select>
</td>
<td>
<label htmlFor={`group-${user.username}`} className="sr-only"><Translate value="action.user-role">User role</Translate></label>
<select
id={`group-${user.username}`}
name={`group-${user.username}`}
className="form-control"
onChange={(event) => onChangeUserGroup(user, event.target.value)}
value={user.group ? user.group : ''}
disabled={loadingGroups || currentUser.username === user.username}
disablevalidation="true">
<option>Select Group</option>
{groups.map((g, ridx) => (
<option key={ridx} value={g.resourceId}>{g.name}</option>
))}
</select>
</td>
<td>
{currentUser.username !== user.username &&
<Button className="text-danger" variant="link" onClick={() => onDeleteUser(user.username)}>
<span className="sr-only">
<Translate value="label.delete-user">Delete User</Translate>
</span>
<FontAwesomeIcon icon={faTrash} />
</Button>
}
</td>
</tr>
)}
</React.Fragment>
}
</GroupsProvider>
</tbody>
</table>
</div>
Expand Down
10 changes: 7 additions & 3 deletions ui/src/app/admin/container/GroupsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,19 @@ export function GroupsList({ groups, onDelete }) {
<thead>
<tr>
<th>
<Translate value="label.attribute-name">Group Name</Translate>
<Translate value="label.group-name">Group Name</Translate>
</th>
<th>
<Translate value="label.group-description">Group Description</Translate>
</th>
<th><span className="sr-only"><Translate value="label.actions">Actions</Translate></span></th>
</tr>
</thead>
<tbody>
{groups?.length && groups.map((group, i) =>
{(groups?.length > 0 ) ? groups.map((group, i) =>
<tr key={i}>
<td>{group.name}</td>
<td>{group.description}</td>
<td className="text-right">
<Link to={`../groups/${group.resourceId}/edit`} className="btn btn-link text-primary">
<FontAwesomeIcon icon={faEdit} size="lg" />
Expand All @@ -62,7 +66,7 @@ export function GroupsList({ groups, onDelete }) {
</Button>
</td>
</tr>
)}
) : ''}
</tbody>
</table>
</div>
Expand Down
15 changes: 14 additions & 1 deletion ui/src/app/admin/container/UserManagement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,19 @@ export default function UserManagement({ users, children, reload }) {
}
}

async function setUserGroupRequest(user, groupId) {
await patch(`/admin/users/${user.username}`, {
...user,
groupId
});
if (response.ok && reload) {
dispatch(createNotificationAction(
`User update successful for ${user.username}.`
));
reload();
}
}

async function deleteUserRequest(id) {
await del(`/admin/users/${id}`);
if (response.ok && reload) {
Expand Down Expand Up @@ -66,7 +79,7 @@ export default function UserManagement({ users, children, reload }) {

return (
<div className="user-management">
{children(users, roles, setUserRoleRequest, (id) => setDeleting(id))}
{children(users, roles, setUserRoleRequest, setUserGroupRequest, (id) => setDeleting(id))}
<Modal show={!!deleting} onHide={() => setDeleting(null)}>
<Modal.Header toggle={toggle}><Translate value="message.delete-user-title">Delete User?</Translate></Modal.Header>
<Modal.Body className="d-flex align-content-center">
Expand Down
8 changes: 4 additions & 4 deletions ui/src/app/admin/hoc/GroupsProvider.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React from 'react';
import { useGroups } from '../hooks';

export function GroupsProvider({ children }) {
export function GroupsProvider({ children, cache = 'no-cache' }) {

const [groups, setGroups] = React.useState([]);


const { get, del, response } = useGroups({
cachePolicy: 'no-cache'
const { get, del, response, loading } = useGroups({
cachePolicy: cache
});

async function loadGroups() {
Expand All @@ -27,5 +27,5 @@ export function GroupsProvider({ children }) {
/*eslint-disable react-hooks/exhaustive-deps*/
React.useEffect(() => { loadGroups() }, []);

return (<>{children(groups, removeGroup)}</>);
return (<>{children(groups, removeGroup, loading)}</>);
}
6 changes: 2 additions & 4 deletions ui/src/app/admin/hooks.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import useFetch from 'use-http';
import API_BASE_PATH from '../App.constant';

export function useGroups () {
return useFetch(`${API_BASE_PATH}/admin/groups`, {
cachePolicy: 'no-cache'
});
export function useGroups (opts = { cachePolicy: 'no-cache' }) {
return useFetch(`${API_BASE_PATH}/admin/groups`, opts);
}

export function useGroup(id) {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/app/dashboard/view/AdminTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ export function AdminTab () {
</div>
<div className="p-3">
<UserManagement users={users} reload={loadUsers}>
{(u, roles, onChangeUserRole, onDeleteUser) =>
<UserMaintenance users={ u } roles={roles} onChangeUserRole={onChangeUserRole} onDeleteUser={onDeleteUser} />}
{(u, roles, onChangeUserRole, onChangeUserGroup, onDeleteUser) =>
<UserMaintenance users={ u } roles={roles} onChangeUserRole={onChangeUserRole} onDeleteUser={onDeleteUser} onChangeUserGroup={onChangeUserGroup} />}
</UserManagement>
</div>
</div>
Expand Down

0 comments on commit eb4f325

Please sign in to comment.