Comunic/comunicconsole
1
0
Fork 0
mirror of https://gitlab.com/comunic/comunicconsole synced 2024-11-23 13:59:23 +00:00
Code Issues Projects Releases Wiki Activity

Ready to implement administrators creation

Browse Source
This commit is contained in:
Pierre HUBERT 2021-05-15 09:50:04 +02:00
parent 9adb230d60
commit c5b78f518b
2 changed files with 83 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/ui/routes/AccountsListRoute.tsx
View File

@ -5,21 +5,24 @@
*/ */
import { import {
TableContainer, IconButton,
Paper, Paper,
Table, Table,
TableBody,
TableCell,
TableContainer,
TableHead, TableHead,
TableRow, TableRow,
TableCell,
TableBody,
IconButton,
} from "@material-ui/core"; } from "@material-ui/core";
import React from "react"; import AddIcon from "@material-ui/icons/Add";
import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { TimestampWidget } from "../widgets/TimestampWidget";
import SettingsIcon from "@material-ui/icons/Settings"; import SettingsIcon from "@material-ui/icons/Settings";
import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
import { canManageAdmins } from "../../utils/AccountUtils";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { PageTitle } from "../widgets/PageTitle";
import { TimestampWidget } from "../widgets/TimestampWidget";
export class AccountsListRoute extends React.Component< export class AccountsListRoute extends React.Component<
{}, {},
@ -55,44 +58,69 @@ export class AccountsListRoute extends React.Component<
build() { build() {
return ( return (
<TableContainer component={Paper}> <div>
<Table> <PageTitle
<TableHead> name="Administrators list"
<TableRow> actions={
<TableCell align="right">ID</TableCell> canManageAdmins() ? (
<TableCell align="right">Name</TableCell> <IconButton>
<TableCell align="right">Email address</TableCell> <AddIcon />
<TableCell align="right"> </IconButton>
Account creation ) : (
</TableCell> <div></div>
<TableCell align="right">Roles</TableCell> )
<TableCell></TableCell> }
</TableRow> />
</TableHead>
<TableBody> <TableContainer component={Paper}>
{this.state.list.map((row) => ( <Table>
<TableRow key={row.id}> <TableHead>
<TableCell align="right">{row.id}</TableCell> <TableRow>
<TableCell align="right">{row.name}</TableCell> <TableCell align="right">ID</TableCell>
<TableCell align="right">{row.email}</TableCell> <TableCell align="right">Name</TableCell>
<TableCell align="right"> <TableCell align="right">
<TimestampWidget time={row.time_create} /> Email address
</TableCell> </TableCell>
<TableCell align="right"> <TableCell align="right">
{row.roles.length} Account creation
</TableCell>
<TableCell>
<Link to={"/accounts/" + row.id}>
<IconButton>
<SettingsIcon />
</IconButton>
</Link>
</TableCell> </TableCell>
<TableCell align="right">Roles</TableCell>
<TableCell></TableCell>
</TableRow> </TableRow>
))} </TableHead>
</TableBody> <TableBody>
</Table> {this.state.list.map((row) => (
</TableContainer> <TableRow key={row.id}>
<TableCell align="right">
{row.id}
</TableCell>
<TableCell align="right">
{row.name}
</TableCell>
<TableCell align="right">
{row.email}
</TableCell>
<TableCell align="right">
<TimestampWidget
time={row.time_create}
/>
</TableCell>
<TableCell align="right">
{row.roles.length}
</TableCell>
<TableCell>
<Link to={"/accounts/" + row.id}>
<IconButton>
<SettingsIcon />
</IconButton>
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
); );
} }
} }

20
src/ui/widgets/PageTitle.tsx
View File

@ -5,13 +5,21 @@ import { Typography } from "@material-ui/core";
* *
* @author Pierre Hubert * @author Pierre Hubert
*/ */
export function PageTitle(p: { name: string }) { export function PageTitle(p: { name: string; actions?: React.ReactNode }) {
return ( return (
<Typography <div
variant="h4" style={{
style={{ marginBottom: "50px", color: "white" }} display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "50px",
}}
> >
{p.name} <Typography variant="h4" style={{ color: "white" }}>
</Typography> {p.name}
</Typography>
<div>{p.actions}</div>
</div>
); );
} }