Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Team component folder structure #3492

Merged
merged 1 commit into from
Aug 5, 2024
Merged

refactor: Team component folder structure #3492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions editor.planx.uk/src/pages/FlowEditor/components/Team/MembersTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import Chip from "@mui/material/Chip";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import React from "react";

import { StyledAvatar, StyledTableRow } from "./styles";
import { TeamMember } from "./types";

export const MembersTable: React.FC<{ members: TeamMember[] }> = ({
members,
}) => {
const roleLabels: Record<string, string> = {
platformAdmin: "Admin",
teamEditor: "Editor",
teamViewer: "Viewer",
};

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

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>
);
};
107 changes: 2 additions & 105 deletions editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,113 +1,10 @@
import Avatar from "@mui/material/Avatar";
import Chip from "@mui/material/Chip";
import Container from "@mui/material/Container";
import { styled } from "@mui/material/styles";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Typography from "@mui/material/Typography";
import { Role, User } from "@opensystemslab/planx-core/types";
import React from "react";
import { FONT_WEIGHT_SEMI_BOLD } from "theme";
import SettingsSection from "ui/editor/SettingsSection";

const StyledAvatar = styled(Avatar)(({ theme }) => ({
background: theme.palette.background.dark,
color: theme.palette.common.white,
fontSize: "1em",
fontWeight: FONT_WEIGHT_SEMI_BOLD,
marginRight: theme.spacing(1),
}));

const StyledTableRow = styled(TableRow)(({ theme }) => ({
"&:nth-of-type(even)": {
background: theme.palette.background.paper,
},
}));

export type TeamMember = Omit<User, "teams" | "isPlatformAdmin"> & {
role: Role;
};

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

interface Props {
teamMembersByRole: Record<string, TeamMember[]>;
}

const MembersTable: React.FC<{ members: TeamMember[] }> = ({ members }) => {
const getRoleLabel = (role: string) => {
return roleLabels[role] || role;
};

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>
);
};
import { MembersTable } from "./MembersTable";
import { Props, TeamMember } from "./types";

export const TeamMembers: React.FC<Props> = ({ teamMembersByRole }) => {
const platformAdmins = (teamMembersByRole.platformAdmin || []).filter(
Expand Down
18 changes: 18 additions & 0 deletions editor.planx.uk/src/pages/FlowEditor/components/Team/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Avatar from "@mui/material/Avatar";
import { styled } from "@mui/material/styles";
import TableRow from "@mui/material/TableRow";
import { FONT_WEIGHT_SEMI_BOLD } from "theme";

export const StyledAvatar = styled(Avatar)(({ theme }) => ({
background: theme.palette.background.dark,
color: theme.palette.common.white,
fontSize: "1em",
fontWeight: FONT_WEIGHT_SEMI_BOLD,
marginRight: theme.spacing(1),
}));

export const StyledTableRow = styled(TableRow)(({ theme }) => ({
"&:nth-of-type(even)": {
background: theme.palette.background.paper,
},
}));
9 changes: 9 additions & 0 deletions editor.planx.uk/src/pages/FlowEditor/components/Team/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Role, User } from "@opensystemslab/planx-core/types";

export type TeamMember = Omit<User, "teams" | "isPlatformAdmin"> & {
role: Role;
};

export interface Props {
teamMembersByRole: Record<string, TeamMember[]>;
}
6 changes: 2 additions & 4 deletions editor.planx.uk/src/routes/teamMembers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,8 @@ import { Role, User } from "@opensystemslab/planx-core/types";
import gql from "graphql-tag";
import { groupBy } from "lodash";
import { compose, mount, NotFoundError, route, withData } from "navi";
import {
TeamMember,
TeamMembers,
} from "pages/FlowEditor/components/Team/TeamMembers";
import { TeamMembers } from "pages/FlowEditor/components/Team/TeamMembers";
import { TeamMember } from "pages/FlowEditor/components/Team/types";
import { useStore } from "pages/FlowEditor/lib/store";
import React from "react";

Expand Down
Loading