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

Can request admin settings update

Browse Source
This commit is contained in:
Pierre HUBERT 2021-05-13 16:58:50 +02:00
parent d02d025418
commit 6dde0f40c4
5 changed files with 428 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/helpers/AccountHelper.ts
View File

@ -17,6 +17,12 @@ export interface AdminAccount {
time_create: number;
}
export interface NewAdminGeneralSettings {
id: number;
name: string;
email: string;
}
const SESSION_STORAGE_TOKEN = "auth_token";
let currentAccount: AdminAccount | null = null;
@ -114,4 +120,17 @@ export class AccountHelper {
sessionStorage.removeItem(SESSION_STORAGE_TOKEN);
document.location.href = document.location.href + "";
}
/**
* Update an admin's settings
*
* @param a New settings
*/
static async UpdateGeneralSettings(s: NewAdminGeneralSettings) {
await serverRequest("admins/update_general_settings", {
id: s.id,
name: s.name,
email: s.email,
});
}
}

115
src/ui/routes/AccountSettingsRoute.tsx
View File

@ -4,10 +4,19 @@
* @author Pierre Hubert
*/
import {
Button,
Divider,
Grid,
Paper,
TextField,
Typography,
} from "@material-ui/core";
import React from "react";
import { useParams } from "react-router-dom";
import { AccountHelper, AdminAccount } from "../../helpers/AccountHelper";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { matAlert, snackbar } from "../widgets/DialogsProvider";
export function AccountSettingsRoute() {
let params: any = useParams();
@ -52,6 +61,110 @@ class AccountSettingsRouteInner extends React.Component<
}
build() {
return <p>{this.state.account.email}</p>;
return (
<Grid container spacing={2}>
<GeneralSettings admin={this.state.account}></GeneralSettings>
</Grid>
);
}
}
class GeneralSettings extends React.Component<
{ admin: AdminAccount },
{ newName: string; newEmail: string }
> {
constructor(p: any) {
super(p);
this.state = {
newName: this.props.admin.name,
newEmail: this.props.admin.email,
};
this.changedName = this.changedName.bind(this);
this.changedEmail = this.changedEmail.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
changedName(e: React.ChangeEvent<HTMLInputElement>) {
this.setState({ newName: e.target.value });
}
changedEmail(e: React.ChangeEvent<HTMLInputElement>) {
this.setState({ newEmail: e.target.value });
}
get isValid(): boolean {
return this.state.newEmail.length > 2 && this.state.newName.length > 2;
}
async handleSubmit() {
try {
if (!this.isValid) return;
await AccountHelper.UpdateGeneralSettings({
id: this.props.admin.id,
name: this.state.newName,
email: this.state.newEmail,
});
snackbar("Successfully updated admin settings!");
} catch (e) {
console.error(e);
matAlert("Failed to update admin settings!");
}
}
render() {
return (
<SettingsSection title="General settings">
<TextField
required
label="Name"
value={this.state.newName}
onChange={this.changedName}
style={{ width: "100%", paddingBottom: "20px" }}
/>
<TextField
required
label="Email"
value={this.state.newEmail}
onChange={this.changedEmail}
type="mail"
style={{ width: "100%", paddingBottom: "20px" }}
/>
<Button
style={{ alignSelf: "end", marginRight: "10px" }}
disabled={!this.isValid}
onClick={this.handleSubmit}
>
Update
</Button>
</SettingsSection>
);
}
}
function SettingsSection(p: { title: string; children?: React.ReactNode }) {
return (
<Grid item xs={6} spacing={2}>
<Paper>
<Typography variant="h5" style={{ padding: "10px 10px " }}>
General settings
</Typography>
<Divider />
<div
style={{
padding: "10px 10px",
display: "flex",
flexDirection: "column",
}}
>
{p.children}
</div>
</Paper>
</Grid>
);
}

10
src/ui/routes/MainRoute.tsx
View File

@ -155,7 +155,14 @@ export function MainRoute() {
<Menu></Menu>
</Paper>
<div style={{ flex: "1", padding: "50px" }}>
<div style={{ flex: "1", padding: "50px", height: "100%" }}>
<div
style={{
height: "100%",
margin: "auto",
maxWidth: "1280px",
}}
>
<Switch>
<Route exact path="/">
<HomeRoute></HomeRoute>
@ -171,6 +178,7 @@ export function MainRoute() {
</Switch>
</div>
</div>
</div>
</Router>
);
}

2
src/ui/widgets/AsyncWidget.tsx
View File

@ -59,7 +59,7 @@ export class AsyncWidget extends React.Component<
}
componentDidUpdate() {
if (this.state.key != this.props.key) {
if (this.state.key !== this.props.key) {
this.setState({ key: this.props.key });
this.reload();
}

170
src/ui/widgets/DialogsProvider.tsx
View File

@ -4,40 +4,56 @@
* @author Pierre Hubert
*/
import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, TextField } from "@material-ui/core";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
Snackbar,
IconButton,
} from "@material-ui/core";
import { Close } from "@material-ui/icons";
import React from "react";
let cache: ApplicationDialogsProvider;
export interface TextInputOptions {
title ?: string,
message ?: string,
initialValue ?: string,
minLength ?: number,
maxLength ?: number,
label : string,
title?: string;
message?: string;
initialValue?: string;
minLength?: number;
maxLength?: number;
label: string;
}
interface AppDiagProvState {
// Alert dialog
alertMessage : string,
showAlert : boolean,
alertMessage: string;
showAlert: boolean;
// Simple snackbar
snackBarMessage: string;
showSnackBar: boolean;
// Confirm dialog
confirmMessage: string,
showConfirm: boolean,
resolveConfirm ?: (confirmed: boolean) => void,
confirmMessage: string;
showConfirm: boolean;
resolveConfirm?: (confirmed: boolean) => void;
// Text input dialog
showInputDialog: boolean,
inputValue: string,
inputOptions: TextInputOptions,
resolveInput ?: (text: string) => void,
showInputDialog: boolean;
inputValue: string;
inputOptions: TextInputOptions;
resolveInput?: (text: string) => void;
}
export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvState> {
export class ApplicationDialogsProvider extends React.Component<
{},
AppDiagProvState
> {
private acceptConfirm: () => void;
private rejectConfirm: () => void;
private cancelInput: () => void;
@ -47,11 +63,14 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
super(props);
this.state = {
// Alert dialog
alertMessage: "",
showAlert: false,
// Simple snackbar
snackBarMessage: "",
showSnackBar: false,
// Confirm dialog
showConfirm: false,
confirmMessage: "",
@ -61,13 +80,15 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
showInputDialog: false,
inputValue: "",
inputOptions: {
label: ""
label: "",
},
resolveInput: undefined,
};
this.handleCloseAlert = this.handleCloseAlert.bind(this);
this.handleCloseSnackbar = this.handleCloseSnackbar.bind(this);
this.acceptConfirm = this.handleCloseConfirm.bind(this, true);
this.rejectConfirm = this.handleCloseConfirm.bind(this, false);
@ -80,26 +101,41 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
this.setState({
showAlert: true,
alertMessage: message,
})
});
}
handleCloseAlert() {
this.setState({ showAlert: false });
}
showSnackbar(message: string) {
this.setState({ showSnackBar: true, snackBarMessage: message });
}
handleCloseSnackbar(
_event: React.SyntheticEvent | React.MouseEvent,
reason?: string
) {
if (reason === "clickaway") {
return;
}
this.setState({ showSnackBar: false });
}
showConfirm(message: string): Promise<boolean> {
return new Promise((res, _rej) => {
this.setState({
showConfirm: true,
confirmMessage: message,
resolveConfirm: res
resolveConfirm: res,
});
});
}
handleCloseConfirm(accept: boolean) {
this.setState({
showConfirm: false
showConfirm: false,
});
this.state.resolveConfirm && this.state.resolveConfirm(accept);
@ -111,7 +147,7 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
showInputDialog: true,
inputOptions: options,
resolveInput: res,
inputValue: options.initialValue || ""
inputValue: options.initialValue || "",
});
});
}
@ -122,22 +158,21 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
handleCloseInput(cancel: boolean) {
this.setState({
showInputDialog: false
showInputDialog: false,
});
if (!cancel)
this.state.resolveInput && this.state.resolveInput(this.state.inputValue);
this.state.resolveInput &&
this.state.resolveInput(this.state.inputValue);
}
get isInputValid(): boolean {
const options = this.state.inputOptions;
const value = this.state.inputValue;
if (options.minLength && value.length < options.minLength)
return false;
if (options.minLength && value.length < options.minLength) return false;
if (options.maxLength && value.length > options.maxLength)
return false;
if (options.maxLength && value.length > options.maxLength) return false;
return true;
}
@ -145,11 +180,10 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
render() {
cache = this;
if(this.state == null)
return(<div></div>);
return (<div>
if (this.state == null) return <div></div>;
return (
<div>
{/* Simple alert dialog */}
<Dialog
open={this.state.showAlert}
@ -157,7 +191,12 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title" style={{minWidth: "300px"}}>Message</DialogTitle>
<DialogTitle
id="alert-dialog-title"
style={{ minWidth: "300px" }}
>
Message
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{this.state.alertMessage}
@ -170,6 +209,30 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
</DialogActions>
</Dialog>
{/* Simple snackbar */}
<Snackbar
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
open={this.state.showSnackBar}
autoHideDuration={6000}
onClose={this.handleCloseSnackbar}
message={this.state.snackBarMessage}
action={
<React.Fragment>
<IconButton
size="small"
aria-label="close"
color="inherit"
onClick={this.handleCloseSnackbar}
>
<Close fontSize="small" />
</IconButton>
</React.Fragment>
}
/>
{/* Confirm dialog */}
<Dialog
open={this.state.showConfirm}
@ -177,7 +240,12 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title" style={{minWidth: "300px"}}>Confirm action</DialogTitle>
<DialogTitle
id="alert-dialog-title"
style={{ minWidth: "300px" }}
>
Confirm action
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{this.state.confirmMessage}
@ -201,31 +269,41 @@ export class ApplicationDialogsProvider extends React.Component<{}, AppDiagProvS
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{this.state.inputOptions.title || this.state.inputOptions.label}
{this.state.inputOptions.title ||
this.state.inputOptions.label}
</DialogTitle>
<DialogContent>
{this.state.inputOptions.message ? <DialogContentText id="alert-dialog-description">
{this.state.inputOptions.message} <br /><br />
</DialogContentText> : <span></span> }
{this.state.inputOptions.message ? (
<DialogContentText id="alert-dialog-description">
{this.state.inputOptions.message} <br />
<br />
</DialogContentText>
) : (
<span></span>
)}
<TextField
label={this.state.inputOptions.label}
variant="outlined"
value={this.state.inputValue}
onChange={this.handleInputValueChanged}
/>
</DialogContent>
<DialogActions>
<Button onClick={this.cancelInput} color="default">
Cancel
</Button>
<Button onClick={this.confirmInput} color="default" disabled={!this.isInputValid}>
<Button
onClick={this.confirmInput}
color="default"
disabled={!this.isInputValid}
>
OK
</Button>
</DialogActions>
</Dialog>
</div>)
</div>
);
}
}
@ -233,6 +311,10 @@ export function matAlert(msg: string) {
cache.showAlert(msg);
}
export function snackbar(msg: string) {
cache.showSnackbar(msg);
}
export function matConfirm(msg: string): Promise<boolean> {
return cache.showConfirm(msg);
}