Skip to content

Commit

Permalink
Fix some styles, filter add user list, and fix add user handler
Browse files Browse the repository at this point in the history
  • Loading branch information
@mkimberlin
mkimberlin committed Apr 11, 2024
1 parent 2159398 commit 1b79933
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 44 deletions.
6 changes: 5 additions & 1 deletion web-ui/src/components/admin/roles/Roles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,8 +139,12 @@
}

.roles-content .roles .roles-top-search-fields .role-select {
width: 50%;
margin-right: 2rem;
margin-top: 12px;
}

.roles-content .roles .roles-top-search-fields .member-role-search {
width: 50%;
}

@media screen and (max-width: 600px) {
Expand Down
76 changes: 37 additions & 39 deletions web-ui/src/components/admin/roles/Roles.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useContext, useEffect, useState } from "react";
import React, {useContext, useEffect, useState} from "react";

import { AppContext } from "../../../context/AppContext";
import {AppContext} from "../../../context/AppContext";
import {
SET_ROLES,
SET_USER_ROLES,
Expand Down Expand Up @@ -41,15 +41,15 @@ import PersonAddIcon from "@mui/icons-material/PersonAdd";
import SearchIcon from "@mui/icons-material/Search";
import AddIcon from "@mui/icons-material/Add";

import { isArrayPresent } from './../../../helpers/checks';
import {isArrayPresent} from './../../../helpers/checks';

import "./Roles.css";
import {selectProfile} from "../../../context/selectors";
import EditIcon from "@mui/icons-material/Edit";

const Roles = () => {
const { state, dispatch } = useContext(AppContext);
const { csrf, memberProfiles, roles, userRoles } = state;
const {state, dispatch} = useContext(AppContext);
const {csrf, memberProfiles, roles, userRoles} = state;

const [showAddUser, setShowAddUser] = useState(false);
const [showEditRole, setShowEditRole] = useState(false);
Expand All @@ -69,30 +69,28 @@ const Roles = () => {
}, [roles]);

useEffect(() => {
const memberMap = {};
if(memberProfiles && memberProfiles.length > 0) {
for (const member of memberProfiles) {
memberMap[member.id] = member;
}
const memberMap = {};
if (memberProfiles && memberProfiles.length > 0) {
for (const member of memberProfiles) {
memberMap[member.id] = member;
}
}

const newRoleToMemberMap = {};
for (const userRole of userRoles || []) {
const role = roles.find((role) => role.id === userRole?.memberRoleId?.roleId);
if(role) {
let memberList = newRoleToMemberMap[role.role];
if (!memberList) {
memberList = newRoleToMemberMap[role.role] = [];
}
if (memberMap[userRole?.memberRoleId?.memberId] !== undefined) {
memberList.push({ ...memberMap[userRole?.memberRoleId?.memberId], roleId: role.id });
}
const newRoleToMemberMap = {};
for (const userRole of userRoles || []) {
const role = roles.find((role) => role.id === userRole?.memberRoleId?.roleId);
if (role) {
let memberList = newRoleToMemberMap[role.role];
if (!memberList) {
memberList = newRoleToMemberMap[role.role] = [];
}
if (memberMap[userRole?.memberRoleId?.memberId] !== undefined) {
memberList.push({...memberMap[userRole?.memberRoleId?.memberId], roleId: role.id});
}
}
setRoleToMemberMap(newRoleToMemberMap);
}, [userRoles, memberProfiles, roles]);

const uniqueRoles = Object.keys(roleToMemberMap);
}
setRoleToMemberMap(newRoleToMemberMap);
}, [userRoles, memberProfiles, roles]);

const getRoleStats = (role) => {
let members = roleToMemberMap[role];
Expand All @@ -101,7 +99,7 @@ const Roles = () => {

const removeFromRole = async (member, role) => {
const members = roleToMemberMap[role];
const { roleId } = members.find((m) => member.id === m.id);
const {roleId} = members.find((m) => member.id === m.id);
let res = await removeUserFromRole(roleId, member.id, csrf);
let data =
res.payload && res.payload.status === 200 && !res.error
Expand All @@ -125,7 +123,7 @@ const Roles = () => {
};

const addToRole = async (member) => {
const role = roles.find((role) => role.role === currentRole);
const role = roles.find((role) => role.role === currentRole.role);
let res = await addUserToRole(role.id, member.id, csrf);
let data =
res.payload && res.payload.data && !res.error ? res.payload.data : null;
Expand Down Expand Up @@ -176,11 +174,11 @@ const Roles = () => {
};

const setRoleName = (event) => {
setEditedRole({ ...editedRole, role: event?.target?.value });
setEditedRole({...editedRole, role: event?.target?.value});
}

const setRoleDescription = (event) => {
setEditedRole({ ...editedRole, description: event?.target?.value });
setEditedRole({...editedRole, description: event?.target?.value});
}

return (
Expand All @@ -189,7 +187,7 @@ const Roles = () => {
<div className="roles-top">
<div className="roles-top-left">
<div className="roles-top-search-fields">
<FormControl size="small" className="role-select">
<FormControl className="role-select">
<InputLabel id="roles-select-label">Roles</InputLabel>
<Select
labelId="roles-select-label"
Expand Down Expand Up @@ -229,7 +227,7 @@ const Roles = () => {
<Button
className="role-add"
color="primary"
endIcon={<AddIcon />}
endIcon={<AddIcon/>}
onClick={() => {
setShowEditRole(true);
setEditedRole({});
Expand All @@ -243,7 +241,7 @@ const Roles = () => {
<div className="role-modal">
<Autocomplete
options={memberProfiles?.filter((member) => {
return !currentRole.memberIds?.includes(member.id);
return !roleToMemberMap[currentRole.role]?.find((m)=>m.id === member.id);
}) || []}
value={selectedMember}
onChange={(event, newValue) =>
Expand All @@ -270,11 +268,11 @@ const Roles = () => {
<div className="roles-bot">
{roles?.map((roleObj) =>
selectedRoles.includes(roleObj.role) ? (
<Card className="role" key={`${roleObj.role}-card`} >
<Card className="role" key={`${roleObj.role}-card`}>
<CardContent className="role-card">
<List style={{ paddingTop: 0 }}>
<List style={{paddingTop: 0}}>
<div>
<ListSubheader style={{ padding: 0 }}>
<ListSubheader style={{padding: 0}}>
<div className="role-header">
<div className="role-header-title">
<Typography variant="h4" color="black">
Expand All @@ -284,10 +282,10 @@ const Roles = () => {
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}} >
}}>
{roleObj.description || ""}
</Typography>
<Typography variant="subtitle2" style={{ fontSize: "0.75rem" }}>
<Typography variant="subtitle2" style={{fontSize: "0.75rem"}}>
{getRoleStats(roleObj.role)} Users
</Typography>
</div>
Expand All @@ -310,11 +308,11 @@ const Roles = () => {
setEditedRole(roleObj);
}}
>
<EditIcon />
<EditIcon/>
</Button>
</div>
</div>
<Divider />
<Divider/>
</ListSubheader>
<RoleUserCards
roleMembers={roleToMemberMap[roleObj.role]}
Expand Down
8 changes: 4 additions & 4 deletions web-ui/src/components/admin/roles/__snapshots__/Roles.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,21 @@ exports[`renders correctly 1`] = `
class="MuiFormControl-root role-select css-1nrlq1o-MuiFormControl-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="true"
id="roles-select-label"
>
Roles
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root"
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root"
>
<div
aria-controls=":r0:"
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="roles-select-label"
class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-jedpe8-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
role="combobox"
tabindex="0"
>
Expand Down Expand Up @@ -73,7 +73,7 @@ exports[`renders correctly 1`] = `
</fieldset>
</div>
<p
class="MuiFormHelperText-root MuiFormHelperText-sizeSmall MuiFormHelperText-contained MuiFormHelperText-filled css-k4qjio-MuiFormHelperText-root"
class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled css-1wc848c-MuiFormHelperText-root"
>
Showing 2/2 roles
</p>
Expand Down

0 comments on commit 1b79933

Please sign in to comment.