Comunic/comunicconsole
1
0
Fork 0
mirror of https://gitlab.com/comunic/comunicconsole synced 2024-12-25 13:08:52 +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 {
TableContainer,
IconButton,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TableCell,
TableBody,
IconButton,
} from "@material-ui/core";
import React from "react";
import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { TimestampWidget } from "../widgets/TimestampWidget";
import AddIcon from "@material-ui/icons/Add";
import SettingsIcon from "@material-ui/icons/Settings";
import React from "react";
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<
{},
@ -55,44 +58,69 @@ export class AccountsListRoute extends React.Component<
build() {
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell align="right">ID</TableCell>
<TableCell align="right">Name</TableCell>
<TableCell align="right">Email address</TableCell>
<TableCell align="right">
Account creation
</TableCell>
<TableCell align="right">Roles</TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.state.list.map((row) => (
<TableRow key={row.id}>
<TableCell align="right">{row.id}</TableCell>
<TableCell align="right">{row.name}</TableCell>
<TableCell align="right">{row.email}</TableCell>
<div>
<PageTitle
name="Administrators list"
actions={
canManageAdmins() ? (
<IconButton>
<AddIcon />
</IconButton>
) : (
<div></div>
)
}
/>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell align="right">ID</TableCell>
<TableCell align="right">Name</TableCell>
<TableCell align="right">
<TimestampWidget time={row.time_create} />
Email address
</TableCell>
<TableCell align="right">
{row.roles.length}
</TableCell>
<TableCell>
<Link to={"/accounts/" + row.id}>
<IconButton>
<SettingsIcon />
</IconButton>
</Link>
Account creation
</TableCell>
<TableCell align="right">Roles</TableCell>
<TableCell></TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</TableHead>
<TableBody>
{this.state.list.map((row) => (
<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
*/
export function PageTitle(p: { name: string }) {
export function PageTitle(p: { name: string; actions?: React.ReactNode }) {
return (
<Typography
variant="h4"
style={{ marginBottom: "50px", color: "white" }}
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "50px",
}}
>
{p.name}
</Typography>
<Typography variant="h4" style={{ color: "white" }}>
{p.name}
</Typography>
<div>{p.actions}</div>
</div>
);
}