From 8ed706272fbdd09e418f6b5891b8de706a9b58f6 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Mon, 12 Jul 2021 16:38:48 +0200 Subject: [PATCH] Start to build search user page --- src/helpers/AccountHelper.ts | 7 +- src/ui/routes/LoginRoute.tsx | 1 - src/ui/routes/MainRoute.tsx | 28 ++++- src/ui/routes/SearchComunicUsersRoute.tsx | 121 ++++++++++++++++++++++ src/utils/AccountUtils.ts | 4 + 5 files changed, 154 insertions(+), 7 deletions(-) create mode 100644 src/ui/routes/SearchComunicUsersRoute.tsx diff --git a/src/helpers/AccountHelper.ts b/src/helpers/AccountHelper.ts index facbb65..78dc6df 100644 --- a/src/helpers/AccountHelper.ts +++ b/src/helpers/AccountHelper.ts @@ -12,12 +12,17 @@ export interface AuthOptions { keys: AuthKey[]; } +export type AdminAccountRole = + | "manage_admins" + | "manage_users" + | "access_all_admin_logs"; + export interface AdminAccount { id: number; name: string; email: string; time_create: number; - roles: Array<"manage_admins" | "manage_users" | "access_all_admin_logs">; + roles: Array; } export interface NewAdminGeneralSettings { diff --git a/src/ui/routes/LoginRoute.tsx b/src/ui/routes/LoginRoute.tsx index 8ed6cb0..9534a77 100644 --- a/src/ui/routes/LoginRoute.tsx +++ b/src/ui/routes/LoginRoute.tsx @@ -24,7 +24,6 @@ import React from "react"; import { AccountHelper, AuthOptions } from "../../helpers/AccountHelper"; import { AdminKeyHelper, AuthKey } from "../../helpers/AdminKeyHelper"; import { input, matAlert } from "../widgets/DialogsProvider"; -import LockIcon from "@material-ui/icons/Lock"; function ErrorGettingOptions(p: { message: string }) { return ( diff --git a/src/ui/routes/MainRoute.tsx b/src/ui/routes/MainRoute.tsx index f7cb5e4..83e2682 100644 --- a/src/ui/routes/MainRoute.tsx +++ b/src/ui/routes/MainRoute.tsx @@ -18,8 +18,8 @@ import { Typography, } from "@material-ui/core"; import { Home, Person } from "@material-ui/icons"; -import GroupIcon from "@material-ui/icons/Group"; import CloseSharpIcon from "@material-ui/icons/CloseSharp"; +import GroupIcon from "@material-ui/icons/Group"; import HistoryIcon from "@material-ui/icons/History"; import React from "react"; import { @@ -29,12 +29,13 @@ import { useHistory, useRouteMatch, } from "react-router-dom"; -import { AccountHelper } from "../../helpers/AccountHelper"; +import { AccountHelper, AdminAccountRole } from "../../helpers/AccountHelper"; +import { AccountLogsRoute } from "./AccountLogsRoute"; import { AccountSettingsRoute } from "./AccountSettingsRoute"; +import { AccountsListRoute } from "./AccountsListRoute"; import { HomeRoute } from "./HomeRoute"; import { NotFoundRoute } from "./NotFoundRoute"; -import { AccountsListRoute } from "./AccountsListRoute"; -import { AccountLogsRoute } from "./AccountLogsRoute"; +import { SearchComunicUsersRoute } from "./SearchComunicUsersRoute"; const useStyles = makeStyles((theme) => ({ root: { @@ -90,6 +91,12 @@ function Menu() {
} uri="/" /> + } + uri="/users" + needsRole="manage_users" + /> } @@ -115,6 +122,7 @@ function MainMenuItem(p: { title: string; icon: React.ReactNode; uri: string; + needsRole?: AdminAccountRole; }) { const history = useHistory(); const openMyAccount = () => history.push(p.uri); @@ -125,6 +133,12 @@ function MainMenuItem(p: { exact: true, }) != null; + // Check if roles are filtered + if (p.needsRole) { + if (!AccountHelper.currentAccount.roles.includes(p.needsRole)) + return ; + } + return ( {p.icon} @@ -203,6 +217,10 @@ export function MainRoute() { + + + + @@ -216,7 +234,7 @@ export function MainRoute() { - +
diff --git a/src/ui/routes/SearchComunicUsersRoute.tsx b/src/ui/routes/SearchComunicUsersRoute.tsx new file mode 100644 index 0000000..74fb654 --- /dev/null +++ b/src/ui/routes/SearchComunicUsersRoute.tsx @@ -0,0 +1,121 @@ +/** + * Search Coumnic user + * + * @author Pierre Hubert + */ + +import { Grid, Paper, TextField } from "@material-ui/core"; +import React from "react"; +import { AsyncWidget } from "../widgets/AsyncWidget"; +import { PageTitle } from "../widgets/PageTitle"; + +export class SearchComunicUsersRoute extends React.Component< + {}, + { firstName: string; lastName: string; email: string } +> { + constructor(p: any) { + super(p); + this.state = { + firstName: "", + lastName: "", + email: "", + }; + + this.updateFirstName = this.updateFirstName.bind(this); + this.updateLastName = this.updateLastName.bind(this); + this.updateEmailAddress = this.updateEmailAddress.bind(this); + this.performSearch = this.performSearch.bind(this); + this.buildResults = this.buildResults.bind(this); + } + + updateFirstName(e: React.ChangeEvent) { + this.setState({ + firstName: e.target.value, + }); + } + + updateLastName(e: React.ChangeEvent) { + this.setState({ + lastName: e.target.value, + }); + } + + updateEmailAddress(e: React.ChangeEvent) { + this.setState({ + email: e.target.value, + }); + } + + get canPerformSearch(): boolean { + return ( + this.state.firstName.length > 2 || + this.state.lastName.length > 2 || + this.state.email.length > 4 + ); + } + + get searchKey(): string { + return ( + this.state.firstName + + "##" + + this.state.lastName + + "##" + + this.state.email + ); + } + + async performSearch() {} + + render() { + return ( +
+ + + {/* Filter users */} + + + + + + + + + + + + + {/* Perform search & display results */} + {this.canPerformSearch ? ( + + ) : ( +
+ )} +
+ ); + } + + buildResults() { + return

Results!!! {this.searchKey}

; + } +} diff --git a/src/utils/AccountUtils.ts b/src/utils/AccountUtils.ts index 2c3e49e..d7219d7 100644 --- a/src/utils/AccountUtils.ts +++ b/src/utils/AccountUtils.ts @@ -13,3 +13,7 @@ export function adminID(): number { export function canManageAdmins(): boolean { return AccountHelper.currentAccount.roles.includes("manage_admins"); } + +export function canManageComunicUsers(): boolean { + return AccountHelper.currentAccount.roles.includes("manage_users"); +}