vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-12-23 04:03:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor dialog.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2020-12-27 16:37:10 -08:00
parent 911f131a2a
commit cbb53d244f
3 changed files with 71 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/webapp/src/components/form/input/index.tsx
View File

@ -23,7 +23,7 @@ const Input = (props: InputProps) => {
const value = props.value;
const onChange = props.onChange ? props.onChange : () => { };
const fieldError = error?.fields?.get(name);
const required = props.required ? props.required : true;
const required = props.required != undefined ? props.required : true;
return (
<FormControl margin="normal" required={required} fullWidth>

57
packages/webapp/src/components/maps-page/dialogs/Dialog.tsx Normal file
View File

@ -0,0 +1,57 @@
import React from "react";
import { Button, Dialog as DialogUI, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core";
import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl";
import GlobalError from "../../form/global-error";
import { ErrorInfo } from "../../../services/Service";
export type DialogProps = {
onClose: () => void;
onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
open: boolean;
children: any;
error?: ErrorInfo;
title: MessageDescriptor;
description:MessageDescriptor;
submitButton: MessageDescriptor;
}
const Dialog = (props: DialogProps) => {
const intl = useIntl();
const handleOnClose = props.onClose;
const isOpen = props.open;
const handleOnSubmit = props.onSubmit;
return (
<div>
<DialogUI
open={isOpen}
onClose={handleOnClose} >
<form autoComplete="off" onSubmit={handleOnSubmit}>
<DialogTitle>
{intl.formatMessage(props.title)}
</DialogTitle>
<DialogContent>
<DialogContentText>{intl.formatMessage(props.description)}</DialogContentText>
<GlobalError error={props.error} />
{props.children}
</DialogContent>
<DialogActions>
<Button color="primary" variant="outlined" type="submit">
<FormattedMessage id="action.rename-button" defaultMessage="Rename" />
</Button>
<Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
</Button>
</DialogActions>
</form>
</DialogUI>
</div>
);
}
export default Dialog;

53
packages/webapp/src/components/maps-page/dialogs/RenameDialog.tsx
View File

@ -1,12 +1,12 @@
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, TextField } from "@material-ui/core";
import { Alert } from "@material-ui/lab";
import React, { useEffect } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { useIntl } from "react-intl";
import { useMutation, useQueryClient } from "react-query";
import { useSelector } from "react-redux";
import { BasicMapInfo, ErrorInfo, Service } from "../../../services/Service";
import { activeInstance } from '../../../reducers/serviceSlice';
import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./DialogCommon";
import Dialog from "./Dialog";
import Input from "../../form/input";
export type RenameModel = {
id: number;
@ -39,9 +39,9 @@ const RenameDialog = (props: DialogProps) => {
);
const handleOnClose = (): void => {
props.onClose();
setModel(defaultModel);
setError(undefined);
props.onClose();
};
const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
@ -69,43 +69,16 @@ const RenameDialog = (props: DialogProps) => {
return (
<div>
<Dialog
open={open}
onClose={() => handleOnClose()} >
<form autoComplete="off" onSubmit={handleOnSubmit}>
<DialogTitle>
<FormattedMessage id="action.rename-title" defaultMessage="Rename" />
</DialogTitle>
<Dialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
title={{ id: 'rename.title', defaultMessage: 'Rename' }}
description={{ id: 'rename.description', defaultMessage: 'Rename' }}
submitButton={{ id: 'rename.title', defaultMessage: 'Rename Description' }}>
<Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
value={model.name} onChange={handleOnChange} error={error} />
<DialogContent>
<DialogContentText>
<FormattedMessage id="action.rename-description" defaultMessage="Please, update the name and description for your mindmap." />
</DialogContentText>
{Boolean(error?.msg) ? <Alert severity="error" variant="filled" hidden={!Boolean(error?.msg)}>{error?.msg}</Alert> : null}
<FormControl margin="normal" required fullWidth>
<TextField name="name" label={intl.formatMessage({ id: "action.rename-name-placeholder", defaultMessage: "Name" })}
value={model.name} onChange={handleOnChange}
error={Boolean(error?.fields?.get('name'))} helperText={error?.fields?.get('name')}
variant="filled" required={true} />
</FormControl>
<FormControl margin="normal" required fullWidth>
<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" variant="outlined" type="submit">
<FormattedMessage id="action.rename-button" defaultMessage="Rename" />
</Button>
<Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
</Button>
</DialogActions>
</form>
<Input name="description" type="text" label={{ id: "action.rename-description-placeholder", defaultMessage: "Description" }}
value={model.description} onChange={handleOnChange} required={false} />
</Dialog>
</div>
);