diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Team/MembersTable.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Team/MembersTable.tsx new file mode 100644 index 0000000000..49d7ee8cdf --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/MembersTable.tsx @@ -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 = { + platformAdmin: "Admin", + teamEditor: "Editor", + teamViewer: "Viewer", + }; + + const getRoleLabel = (role: string) => { + return roleLabels[role] || role; + }; + + if (members.length === 0) { + return ( + + + + + No members found + + + +
+ ); + } + + return ( + + + + + + User + + + Role + + + Email + + + + + {members.map((member) => ( + + + + {member.firstName[0]} + {member.lastName[0]} + + {member.firstName} {member.lastName} + + + + + {member.email} + + ))} + +
+
+ ); +}; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx index c48c680317..f83e876016 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx @@ -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 & { - role: Role; -}; - -const roleLabels: Record = { - platformAdmin: "Admin", - teamEditor: "Editor", - teamViewer: "Viewer", -}; - -interface Props { - teamMembersByRole: Record; -} - -const MembersTable: React.FC<{ members: TeamMember[] }> = ({ members }) => { - const getRoleLabel = (role: string) => { - return roleLabels[role] || role; - }; - - if (members.length === 0) { - return ( - - - - - No members found - - - -
- ); - } - - return ( - - - - - - User - - - Role - - - Email - - - - - {members.map((member) => ( - - - - {member.firstName[0]} - {member.lastName[0]} - - {member.firstName} {member.lastName} - - - - - {member.email} - - ))} - -
-
- ); -}; +import { MembersTable } from "./MembersTable"; +import { Props, TeamMember } from "./types"; export const TeamMembers: React.FC = ({ teamMembersByRole }) => { const platformAdmins = (teamMembersByRole.platformAdmin || []).filter( diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Team/styles.ts b/editor.planx.uk/src/pages/FlowEditor/components/Team/styles.ts new file mode 100644 index 0000000000..f847317646 --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/styles.ts @@ -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, + }, +})); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Team/types.ts b/editor.planx.uk/src/pages/FlowEditor/components/Team/types.ts new file mode 100644 index 0000000000..bb05972c4c --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/Team/types.ts @@ -0,0 +1,9 @@ +import { Role, User } from "@opensystemslab/planx-core/types"; + +export type TeamMember = Omit & { + role: Role; +}; + +export interface Props { + teamMembersByRole: Record; +} diff --git a/editor.planx.uk/src/routes/teamMembers.tsx b/editor.planx.uk/src/routes/teamMembers.tsx index 6c7ae7922d..331d2ab6ea 100644 --- a/editor.planx.uk/src/routes/teamMembers.tsx +++ b/editor.planx.uk/src/routes/teamMembers.tsx @@ -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";