mirror of
https://gitlab.com/comunic/comunicconsole
synced 2024-11-27 07:49:22 +00:00
Start to build search user page
This commit is contained in:
parent
b7b1962886
commit
8ed706272f
@ -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<AdminAccountRole>;
|
||||
}
|
||||
|
||||
export interface NewAdminGeneralSettings {
|
||||
|
@ -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 (
|
||||
|
@ -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() {
|
||||
<div>
|
||||
<List component="nav" aria-label="main mailbox folders">
|
||||
<MainMenuItem title="Home" icon={<Home />} uri="/" />
|
||||
<MainMenuItem
|
||||
title="Comunic Users"
|
||||
icon={<GroupIcon />}
|
||||
uri="/users"
|
||||
needsRole="manage_users"
|
||||
/>
|
||||
<MainMenuItem
|
||||
title="Administrators"
|
||||
icon={<GroupIcon />}
|
||||
@ -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 <span></span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ListItem button onClick={openMyAccount} selected={selected}>
|
||||
<ListItemIcon>{p.icon}</ListItemIcon>
|
||||
@ -203,6 +217,10 @@ export function MainRoute() {
|
||||
<HomeRoute></HomeRoute>
|
||||
</Route>
|
||||
|
||||
<Route exact path="/users">
|
||||
<SearchComunicUsersRoute />
|
||||
</Route>
|
||||
|
||||
<Route exact path="/accounts">
|
||||
<AccountsListRoute />
|
||||
</Route>
|
||||
@ -216,7 +234,7 @@ export function MainRoute() {
|
||||
</Route>
|
||||
|
||||
<Route path="*">
|
||||
<NotFoundRoute></NotFoundRoute>
|
||||
<NotFoundRoute />
|
||||
</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
|
121
src/ui/routes/SearchComunicUsersRoute.tsx
Normal file
121
src/ui/routes/SearchComunicUsersRoute.tsx
Normal file
@ -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<HTMLInputElement>) {
|
||||
this.setState({
|
||||
firstName: e.target.value,
|
||||
});
|
||||
}
|
||||
|
||||
updateLastName(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
this.setState({
|
||||
lastName: e.target.value,
|
||||
});
|
||||
}
|
||||
|
||||
updateEmailAddress(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
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 (
|
||||
<div>
|
||||
<PageTitle name="Search Comunic user" />
|
||||
|
||||
{/* Filter users */}
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={3}>
|
||||
<TextField
|
||||
label="First name"
|
||||
style={{ width: "100%" }}
|
||||
value={this.state.firstName}
|
||||
onChange={this.updateFirstName}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3}>
|
||||
<TextField
|
||||
label="Last name"
|
||||
style={{ width: "100%" }}
|
||||
value={this.state.lastName}
|
||||
onChange={this.updateLastName}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
label="Email address"
|
||||
style={{ width: "100%" }}
|
||||
type="email"
|
||||
value={this.state.email}
|
||||
onChange={this.updateEmailAddress}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Perform search & display results */}
|
||||
{this.canPerformSearch ? (
|
||||
<AsyncWidget
|
||||
load={this.performSearch}
|
||||
onBuild={this.buildResults}
|
||||
errorMessage="Failed to search users!"
|
||||
key={this.searchKey}
|
||||
/>
|
||||
) : (
|
||||
<div></div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
buildResults() {
|
||||
return <p>Results!!! {this.searchKey}</p>;
|
||||
}
|
||||
}
|
@ -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");
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user