From c5b78f518b07cfe0defc4b5de25c5a28db7a9e33 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Sat, 15 May 2021 09:50:04 +0200
Subject: [PATCH] Ready to implement administrators creation

---
 src/ui/routes/AccountsListRoute.tsx | 110 +++++++++++++++++-----------
 src/ui/widgets/PageTitle.tsx        |  20 +++--
 2 files changed, 83 insertions(+), 47 deletions(-)

diff --git a/src/ui/routes/AccountsListRoute.tsx b/src/ui/routes/AccountsListRoute.tsx
index b52b7f4..387e991 100644
--- a/src/ui/routes/AccountsListRoute.tsx
+++ b/src/ui/routes/AccountsListRoute.tsx
@@ -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>
 		);
 	}
 }
diff --git a/src/ui/widgets/PageTitle.tsx b/src/ui/widgets/PageTitle.tsx
index 4a0c44e..0b04029 100644
--- a/src/ui/widgets/PageTitle.tsx
+++ b/src/ui/widgets/PageTitle.tsx
@@ -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>
 	);
 }