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

54
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,13 +58,29 @@ export class AccountsListRoute extends React.Component<
build() { build() {
return ( return (
<div>
<PageTitle
name="Administrators list"
actions={
canManageAdmins() ? (
<IconButton>
<AddIcon />
</IconButton>
) : (
<div></div>
)
}
/>
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell align="right">ID</TableCell> <TableCell align="right">ID</TableCell>
<TableCell align="right">Name</TableCell> <TableCell align="right">Name</TableCell>
<TableCell align="right">Email address</TableCell> <TableCell align="right">
Email address
</TableCell>
<TableCell align="right"> <TableCell align="right">
Account creation Account creation
</TableCell> </TableCell>
@ -72,11 +91,19 @@ export class AccountsListRoute extends React.Component<
<TableBody> <TableBody>
{this.state.list.map((row) => ( {this.state.list.map((row) => (
<TableRow key={row.id}> <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"> <TableCell align="right">
<TimestampWidget time={row.time_create} /> {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>
<TableCell align="right"> <TableCell align="right">
{row.roles.length} {row.roles.length}
@ -93,6 +120,7 @@ export class AccountsListRoute extends React.Component<
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
</div>
); );
} }
} }

16
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",
}}
> >
<Typography variant="h4" style={{ color: "white" }}>
{p.name} {p.name}
</Typography> </Typography>
<div>{p.actions}</div>
</div>
); );
} }