mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-09-21 03:30:08 +02:00
Add support for error handling.
This commit is contained in:
Paulo Gustavo Veiga
parent
d0ad7f4286
commit
fed51ad5a9
@ -47,6 +47,7 @@
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.11.2",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@material-ui/lab": "^4.0.0-alpha.57",
|
||||
"@types/react-google-recaptcha": "^2.1.0",
|
||||
"axios": "^0.21.0",
|
||||
"react": "^17.0.1",
|
||||
|
||||
@ -6,8 +6,9 @@ import DialogContent from '@material-ui/core/DialogContent';
|
||||
import DialogContentText from '@material-ui/core/DialogContentText';
|
||||
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||
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 { Alert, AlertTitle } from '@material-ui/lab';
|
||||
|
||||
type DialogProps = {
|
||||
open: boolean,
|
||||
@ -35,14 +36,17 @@ function DeleteConfirmDialog(props: DialogProps) {
|
||||
<DialogTitle><FormattedMessage id="action.delete-title" defaultMessage="Delete" /></DialogTitle>
|
||||
<DialogContent>
|
||||
<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>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => handleOnClose('accept')} color="primary">
|
||||
<Button onClick={() => handleOnClose('accept')} variant="outlined" color="primary">
|
||||
<FormattedMessage id="action.delete-button" defaultMessage="Delete" />
|
||||
</Button>
|
||||
<Button onClick={() => handleOnClose(undefined)} color="secondary" autoFocus>
|
||||
<Button onClick={() => handleOnClose(undefined)} variant="outlined" color="secondary" autoFocus>
|
||||
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
|
||||
</Button>
|
||||
</DialogActions>
|
||||
@ -52,9 +56,11 @@ function DeleteConfirmDialog(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 [nameErrorMsg, setNameErrorMsg] = React.useState<string|undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
props.service.loadMapInfo(props.mapId)
|
||||
@ -64,6 +70,10 @@ function RenameDialog(props: DialogProps) {
|
||||
}, []);
|
||||
|
||||
const handleOnClose = (): void => {
|
||||
// Clean Up ...
|
||||
setModel(defaultModel);
|
||||
setErroInfo(undefined);
|
||||
|
||||
props.onClose(false);
|
||||
};
|
||||
|
||||
@ -73,12 +83,11 @@ function RenameDialog(props: DialogProps) {
|
||||
|
||||
// Fire rest call ...
|
||||
const mapId = props.mapId;
|
||||
props.service.remameMap(mapId, model).
|
||||
then(e => {
|
||||
// Close the dialog ...
|
||||
props.service.renameMap(mapId, model).
|
||||
then(() => {
|
||||
props.onClose(true);
|
||||
}).catch(e => {
|
||||
setNameErrorMsg("Error ....")
|
||||
}).catch((errorInfo: ErrorInfo) => {
|
||||
setErroInfo(errorInfo)
|
||||
});
|
||||
};
|
||||
|
||||
@ -103,24 +112,27 @@ function RenameDialog(props: DialogProps) {
|
||||
|
||||
<DialogContent>
|
||||
<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>
|
||||
|
||||
{Boolean(errorInfo?.msg) ? <Alert severity="error" variant="filled" hidden={!Boolean(errorInfo?.msg)}>{errorInfo?.msg}</Alert> : null}
|
||||
<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 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>
|
||||
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button color="primary" fullWidth type="submit">
|
||||
<FormattedMessage id="action.rename-button" defaultMessage="Rename" />
|
||||
<Button color="primary" variant="outlined" type="submit">
|
||||
<FormattedMessage id="action.rename-button" defaultMessage="Rename"/>
|
||||
</Button>
|
||||
|
||||
<Button color="secondary" autoFocus fullWidth onClick={handleOnClose}>
|
||||
<Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>
|
||||
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
|
||||
</Button>
|
||||
</DialogActions>
|
||||
|
||||
@ -29,7 +29,7 @@ export type FieldError = {
|
||||
|
||||
export type ErrorInfo = {
|
||||
msg?: string;
|
||||
fields?: FieldError[];
|
||||
fields?: Map<String, String>;
|
||||
}
|
||||
|
||||
interface Service {
|
||||
@ -38,7 +38,7 @@ interface Service {
|
||||
fetchAllMaps(): Promise<MapInfo[]>;
|
||||
|
||||
deleteMap(id: number): Promise<void>;
|
||||
remameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
|
||||
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
|
||||
loadMapInfo(id: number): Promise<BasicMapInfo>;
|
||||
}
|
||||
|
||||
@ -51,11 +51,17 @@ class RestService implements Service {
|
||||
}
|
||||
|
||||
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) {
|
||||
return Promise.resolve();
|
||||
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
|
||||
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> {
|
||||
@ -95,7 +101,6 @@ class RestService implements Service {
|
||||
createMapInfo(1, true, "El Mapa", [""], "Paulo", 67,),
|
||||
createMapInfo(2, false, "El Mapa2", [""], "Paulo2", 67),
|
||||
createMapInfo(3, false, "El Mapa3", [""], "Paulo3", 67)
|
||||
|
||||
];
|
||||
|
||||
return Promise.resolve(maps);
|
||||
@ -148,6 +153,7 @@ class RestService implements Service {
|
||||
if (data.fieldErrors) {
|
||||
// @Todo: Fix this ...
|
||||
result = { msg: data.fieldErrors };
|
||||
result.fields = new Map<string, string>();
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
11
yarn.lock
11
yarn.lock
@ -1764,6 +1764,17 @@
|
||||
dependencies:
|
||||
"@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":
|
||||
version "4.11.2"
|
||||
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.2.tgz#e70558be3f41719e8c0d63c7a3c9ae163fdc84cb"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user