mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-22 06:37:56 +01:00
Add support for error handling.
This commit is contained in:
parent
d0ad7f4286
commit
fed51ad5a9
@ -47,6 +47,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@material-ui/core": "^4.11.2",
|
"@material-ui/core": "^4.11.2",
|
||||||
"@material-ui/icons": "^4.11.2",
|
"@material-ui/icons": "^4.11.2",
|
||||||
|
"@material-ui/lab": "^4.0.0-alpha.57",
|
||||||
"@types/react-google-recaptcha": "^2.1.0",
|
"@types/react-google-recaptcha": "^2.1.0",
|
||||||
"axios": "^0.21.0",
|
"axios": "^0.21.0",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
|
@ -6,8 +6,9 @@ import DialogContent from '@material-ui/core/DialogContent';
|
|||||||
import DialogContentText from '@material-ui/core/DialogContentText';
|
import DialogContentText from '@material-ui/core/DialogContentText';
|
||||||
import DialogTitle from '@material-ui/core/DialogTitle';
|
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||||
import { FormattedMessage, useIntl } from 'react-intl';
|
import { FormattedMessage, useIntl } from 'react-intl';
|
||||||
import { BasicMapInfo, Service } from '../../services/Service';
|
import { BasicMapInfo, ErrorInfo, Service } from '../../services/Service';
|
||||||
import { FormControl, TextField } from '@material-ui/core';
|
import { FormControl, TextField } from '@material-ui/core';
|
||||||
|
import { Alert, AlertTitle } from '@material-ui/lab';
|
||||||
|
|
||||||
type DialogProps = {
|
type DialogProps = {
|
||||||
open: boolean,
|
open: boolean,
|
||||||
@ -35,14 +36,17 @@ function DeleteConfirmDialog(props: DialogProps) {
|
|||||||
<DialogTitle><FormattedMessage id="action.delete-title" defaultMessage="Delete" /></DialogTitle>
|
<DialogTitle><FormattedMessage id="action.delete-title" defaultMessage="Delete" /></DialogTitle>
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<DialogContentText>
|
<DialogContentText>
|
||||||
<FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
|
<Alert severity="warning">
|
||||||
|
<AlertTitle>Map to be deleted</AlertTitle>
|
||||||
|
<FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
|
||||||
|
</Alert>
|
||||||
</DialogContentText>
|
</DialogContentText>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
<DialogActions>
|
<DialogActions>
|
||||||
<Button onClick={() => handleOnClose('accept')} color="primary">
|
<Button onClick={() => handleOnClose('accept')} variant="outlined" color="primary">
|
||||||
<FormattedMessage id="action.delete-button" defaultMessage="Delete" />
|
<FormattedMessage id="action.delete-button" defaultMessage="Delete" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={() => handleOnClose(undefined)} color="secondary" autoFocus>
|
<Button onClick={() => handleOnClose(undefined)} variant="outlined" color="secondary" autoFocus>
|
||||||
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
|
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
|
||||||
</Button>
|
</Button>
|
||||||
</DialogActions>
|
</DialogActions>
|
||||||
@ -52,9 +56,11 @@ function DeleteConfirmDialog(props: DialogProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function RenameDialog(props: DialogProps) {
|
function RenameDialog(props: DialogProps) {
|
||||||
const [model, setModel] = React.useState<BasicMapInfo>({ name: '', description: '' });
|
const defaultModel: BasicMapInfo = { name: '', description: '' };
|
||||||
|
const [model, setModel] = React.useState<BasicMapInfo>(defaultModel);
|
||||||
|
const [errorInfo, setErroInfo] = React.useState<ErrorInfo>();
|
||||||
|
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const [nameErrorMsg, setNameErrorMsg] = React.useState<string|undefined>(undefined);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
props.service.loadMapInfo(props.mapId)
|
props.service.loadMapInfo(props.mapId)
|
||||||
@ -64,6 +70,10 @@ function RenameDialog(props: DialogProps) {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleOnClose = (): void => {
|
const handleOnClose = (): void => {
|
||||||
|
// Clean Up ...
|
||||||
|
setModel(defaultModel);
|
||||||
|
setErroInfo(undefined);
|
||||||
|
|
||||||
props.onClose(false);
|
props.onClose(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -73,12 +83,11 @@ function RenameDialog(props: DialogProps) {
|
|||||||
|
|
||||||
// Fire rest call ...
|
// Fire rest call ...
|
||||||
const mapId = props.mapId;
|
const mapId = props.mapId;
|
||||||
props.service.remameMap(mapId, model).
|
props.service.renameMap(mapId, model).
|
||||||
then(e => {
|
then(() => {
|
||||||
// Close the dialog ...
|
|
||||||
props.onClose(true);
|
props.onClose(true);
|
||||||
}).catch(e => {
|
}).catch((errorInfo: ErrorInfo) => {
|
||||||
setNameErrorMsg("Error ....")
|
setErroInfo(errorInfo)
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -103,24 +112,27 @@ function RenameDialog(props: DialogProps) {
|
|||||||
|
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<DialogContentText>
|
<DialogContentText>
|
||||||
<FormattedMessage id="action.rename-description" defaultMessage="Rename Desc" />
|
<FormattedMessage id="action.rename-description" defaultMessage="Please, update the name and description for your mindmap." />
|
||||||
</DialogContentText>
|
</DialogContentText>
|
||||||
|
|
||||||
|
{Boolean(errorInfo?.msg) ? <Alert severity="error" variant="filled" hidden={!Boolean(errorInfo?.msg)}>{errorInfo?.msg}</Alert> : null}
|
||||||
<FormControl margin="normal" required fullWidth>
|
<FormControl margin="normal" required fullWidth>
|
||||||
<TextField name="name" label={intl.formatMessage({ id: "action.name-lable", defaultMessage: "Name" })} value={model.name} variant="filled" onChange={handleOnChange} required={true} error={Boolean(nameErrorMsg)} helperText={nameErrorMsg} />
|
<TextField name="name" label={intl.formatMessage({ id: "action.rename-name-placeholder", defaultMessage: "Name" })}
|
||||||
|
value={model.name} onChange={handleOnChange}
|
||||||
|
error={Boolean(errorInfo?.fields?.get('name'))} helperText={errorInfo?.fields?.get('name')}
|
||||||
|
variant="filled" required={true}/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormControl margin="normal" required fullWidth>
|
<FormControl margin="normal" required fullWidth>
|
||||||
<TextField name="description" label={intl.formatMessage({ id: "action.description-lable", defaultMessage: "Description" })} value={model.description} onChange={handleOnChange} variant="filled" />
|
<TextField name="description" label={intl.formatMessage({ id: "action.rename-description-placeholder", defaultMessage: "Description" })} value={model.description} onChange={handleOnChange} variant="filled" />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|
||||||
<DialogActions>
|
<DialogActions>
|
||||||
<Button color="primary" fullWidth type="submit">
|
<Button color="primary" variant="outlined" type="submit">
|
||||||
<FormattedMessage id="action.rename-button" defaultMessage="Rename" />
|
<FormattedMessage id="action.rename-button" defaultMessage="Rename"/>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button color="secondary" autoFocus fullWidth onClick={handleOnClose}>
|
<Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>
|
||||||
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
|
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
|
||||||
</Button>
|
</Button>
|
||||||
</DialogActions>
|
</DialogActions>
|
||||||
|
@ -29,7 +29,7 @@ export type FieldError = {
|
|||||||
|
|
||||||
export type ErrorInfo = {
|
export type ErrorInfo = {
|
||||||
msg?: string;
|
msg?: string;
|
||||||
fields?: FieldError[];
|
fields?: Map<String, String>;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Service {
|
interface Service {
|
||||||
@ -38,7 +38,7 @@ interface Service {
|
|||||||
fetchAllMaps(): Promise<MapInfo[]>;
|
fetchAllMaps(): Promise<MapInfo[]>;
|
||||||
|
|
||||||
deleteMap(id: number): Promise<void>;
|
deleteMap(id: number): Promise<void>;
|
||||||
remameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
|
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
|
||||||
loadMapInfo(id: number): Promise<BasicMapInfo>;
|
loadMapInfo(id: number): Promise<BasicMapInfo>;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -51,11 +51,17 @@ class RestService implements Service {
|
|||||||
}
|
}
|
||||||
|
|
||||||
loadMapInfo(id: number): Promise<BasicMapInfo> {
|
loadMapInfo(id: number): Promise<BasicMapInfo> {
|
||||||
return Promise.resolve({ name: 'My Map', description: 'My Descition' });
|
return Promise.resolve({ name: 'My Map', description: 'My Description' });
|
||||||
}
|
}
|
||||||
|
|
||||||
async remameMap(id: number, basicInfo: BasicMapInfo) {
|
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
|
||||||
return Promise.resolve();
|
const fieldErrors: Map<string, string> = new Map<string, string>();
|
||||||
|
fieldErrors.set('name', 'name already exists ')
|
||||||
|
|
||||||
|
return Promise.reject({
|
||||||
|
msg: 'Map already exists ...' + basicInfo.name,
|
||||||
|
fields: fieldErrors
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async deleteMap(id: number): Promise<void> {
|
async deleteMap(id: number): Promise<void> {
|
||||||
@ -95,7 +101,6 @@ class RestService implements Service {
|
|||||||
createMapInfo(1, true, "El Mapa", [""], "Paulo", 67,),
|
createMapInfo(1, true, "El Mapa", [""], "Paulo", 67,),
|
||||||
createMapInfo(2, false, "El Mapa2", [""], "Paulo2", 67),
|
createMapInfo(2, false, "El Mapa2", [""], "Paulo2", 67),
|
||||||
createMapInfo(3, false, "El Mapa3", [""], "Paulo3", 67)
|
createMapInfo(3, false, "El Mapa3", [""], "Paulo3", 67)
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
return Promise.resolve(maps);
|
return Promise.resolve(maps);
|
||||||
@ -148,6 +153,7 @@ class RestService implements Service {
|
|||||||
if (data.fieldErrors) {
|
if (data.fieldErrors) {
|
||||||
// @Todo: Fix this ...
|
// @Todo: Fix this ...
|
||||||
result = { msg: data.fieldErrors };
|
result = { msg: data.fieldErrors };
|
||||||
|
result.fields = new Map<string, string>();
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
11
yarn.lock
11
yarn.lock
@ -1764,6 +1764,17 @@
|
|||||||
dependencies:
|
dependencies:
|
||||||
"@babel/runtime" "^7.4.4"
|
"@babel/runtime" "^7.4.4"
|
||||||
|
|
||||||
|
"@material-ui/lab@^4.0.0-alpha.57":
|
||||||
|
version "4.0.0-alpha.57"
|
||||||
|
resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.57.tgz#e8961bcf6449e8a8dabe84f2700daacfcafbf83a"
|
||||||
|
integrity sha512-qo/IuIQOmEKtzmRD2E4Aa6DB4A87kmY6h0uYhjUmrrgmEAgbbw9etXpWPVXuRK6AGIQCjFzV6WO2i21m1R4FCw==
|
||||||
|
dependencies:
|
||||||
|
"@babel/runtime" "^7.4.4"
|
||||||
|
"@material-ui/utils" "^4.11.2"
|
||||||
|
clsx "^1.0.4"
|
||||||
|
prop-types "^15.7.2"
|
||||||
|
react-is "^16.8.0 || ^17.0.0"
|
||||||
|
|
||||||
"@material-ui/styles@^4.11.2":
|
"@material-ui/styles@^4.11.2":
|
||||||
version "4.11.2"
|
version "4.11.2"
|
||||||
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb"
|
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb"
|
||||||
|
Loading…
Reference in New Issue
Block a user