Skip to content

Commit

Permalink
feat: Single table markup, rename editor roles
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianjon3s
ianjon3s committed May 14, 2024
1 parent ad23f55 commit a7d2589
Showing 1 changed file with 86 additions and 93 deletions.
179 changes: 86 additions & 93 deletions editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import Container from "@mui/material/Container";
import Divider from "@mui/material/Divider";
import { styled } from "@mui/material/styles";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
Expand Down Expand Up @@ -32,6 +33,11 @@ export type TeamMember = Omit<User, "teams" | "isPlatformAdmin"> & {
role: Role;
};

const roleLabels: Record<string, string> = {
platformAdmin: "Admin",
teamEditor: "Editor",
};

interface Props {
teamMembersByRole: Record<string, TeamMember[]>;
}
Expand All @@ -44,120 +50,107 @@ export const TeamMembers: React.FC<Props> = ({ teamMembersByRole }) => {
return acc.concat(teamMembersByRole[role]);
}, []);

const archivedMembers = otherRoles.filter(
(member) => member.role !== "platformAdmin" && !member.email,
);

const getRoleLabel = (role: string) => {
return roleLabels[role] || role;
};

const renderMemberTable = (members: TeamMember[]) => {
if (members.length === 0) {
return (
<>
<Table>
<TableHead>
<TableRow>
<TableCell>
<strong>No members found</strong>
</TableCell>
</TableRow>
</TableHead>
</Table>
</>
);
}
return (
<TableContainer>
<Table>
<TableHead>
<StyledTableRow>
<TableCell sx={{ width: 300 }}>
<strong>User</strong>
</TableCell>
<TableCell sx={{ width: 200 }}>
<strong>Role</strong>
</TableCell>
<TableCell>
<strong>Email</strong>
</TableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{members.map((member) => (
<StyledTableRow key={member.id}>
<TableCell
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<StyledAvatar>
{member.firstName[0]}
{member.lastName[0]}
</StyledAvatar>
{member.firstName} {member.lastName}
</TableCell>
<TableCell>
<Chip
label={getRoleLabel(member.role)}
size="small"
sx={{ background: "#ddd" }}
/>
</TableCell>
<TableCell>{member.email}</TableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};

return (
<Container maxWidth="contentWrap">
<Box py={7}>
<EditorRow>
<Typography variant="h2" component="h3" gutterBottom>
Team members
Team editors
</Typography>
<Typography variant="body1">
Team members have access to edit your flows and services.
Editors have access to edit your flows and services.
</Typography>
<TableContainer>
<Table>
<TableHead>
<StyledTableRow>
<TableCell sx={{ width: 300 }}>
<strong>User</strong>
</TableCell>
<TableCell sx={{ width: 200 }}>
<strong>Role</strong>
</TableCell>
<TableCell>
<strong>Email</strong>
</TableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{otherRoles.map((member) => (
<StyledTableRow key={member.id}>
<TableCell
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<StyledAvatar>
{member.firstName[0]}
{member.lastName[0]}
</StyledAvatar>
{member.firstName} {member.lastName}
</TableCell>
<TableCell>
<Chip
label={member.role}
size="small"
sx={{ background: "#ddd" }}
/>
</TableCell>
<TableCell>{member.email}</TableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{renderMemberTable(otherRoles)}
</EditorRow>
<EditorRow>
<Typography variant="h2" component="h3" gutterBottom>
Platform admins
Admins
</Typography>
<Typography variant="body1">
Admins have editor access across all teams.
</Typography>
<TableContainer>
<Table>
<TableHead>
<StyledTableRow>
<TableCell sx={{ width: 300 }}>
<strong>User</strong>
</TableCell>
<TableCell sx={{ width: 200 }}>
<strong>Role</strong>
</TableCell>
<TableCell>
<strong>Email</strong>
</TableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{platformAdmins.map((member) => (
<StyledTableRow key={member.id}>
<TableCell
sx={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<StyledAvatar>
{member.firstName[0]}
{member.lastName[0]}
</StyledAvatar>
{member.firstName} {member.lastName}
</TableCell>
<TableCell>
<Chip
label={member.role}
size="small"
sx={{ background: "#ddd" }}
/>
</TableCell>
<TableCell>{member.email}</TableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
{renderMemberTable(platformAdmins)}
</EditorRow>
<EditorRow>
<Typography variant="h2" component="h3" gutterBottom>
Archived team members
Archived team editors
</Typography>
<Typography variant="body1">
Past members who no longer have access to your team.
Past members who no longer have access to edit your team.
</Typography>
{renderMemberTable(archivedMembers)}
</EditorRow>
</Box>
</Container>
Expand Down

0 comments on commit a7d2589

Please sign in to comment.