diff options
Diffstat (limited to 'src/tools/emcoui/src/admin/projects/ProjectForm.jsx')
| -rw-r--r-- | src/tools/emcoui/src/admin/projects/ProjectForm.jsx | 249 |
1 files changed, 130 insertions, 119 deletions
diff --git a/src/tools/emcoui/src/admin/projects/ProjectForm.jsx b/src/tools/emcoui/src/admin/projects/ProjectForm.jsx index 751de5d0..4ea87b2c 100644 --- a/src/tools/emcoui/src/admin/projects/ProjectForm.jsx +++ b/src/tools/emcoui/src/admin/projects/ProjectForm.jsx @@ -11,146 +11,157 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. -// ======================================================================== -import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button'; +// ======================================================================== +import React from "react"; +import PropTypes from "prop-types"; +import { withStyles } from "@material-ui/core/styles"; +import Button from "@material-ui/core/Button"; -import Dialog from '@material-ui/core/Dialog'; -import MuiDialogTitle from '@material-ui/core/DialogTitle'; -import MuiDialogContent from '@material-ui/core/DialogContent'; -import MuiDialogActions from '@material-ui/core/DialogActions'; -import IconButton from '@material-ui/core/IconButton'; -import CloseIcon from '@material-ui/icons/Close'; -import Typography from '@material-ui/core/Typography'; -import { TextField } from '@material-ui/core'; +import Dialog from "@material-ui/core/Dialog"; +import MuiDialogTitle from "@material-ui/core/DialogTitle"; +import MuiDialogContent from "@material-ui/core/DialogContent"; +import MuiDialogActions from "@material-ui/core/DialogActions"; +import IconButton from "@material-ui/core/IconButton"; +import CloseIcon from "@material-ui/icons/Close"; +import Typography from "@material-ui/core/Typography"; +import { TextField } from "@material-ui/core"; import * as Yup from "yup"; -import { Formik } from 'formik'; +import { Formik } from "formik"; const styles = (theme) => ({ - root: { - margin: 0, - padding: theme.spacing(2), - }, - closeButton: { - position: 'absolute', - right: theme.spacing(1), - top: theme.spacing(1), - color: theme.palette.grey[500], - }, + root: { + margin: 0, + padding: theme.spacing(2), + }, + closeButton: { + position: "absolute", + right: theme.spacing(1), + top: theme.spacing(1), + color: theme.palette.grey[500], + }, }); const DialogTitle = withStyles(styles)((props) => { - const { children, classes, onClose, ...other } = props; - return ( - <MuiDialogTitle disableTypography className={classes.root} {...other}> - <Typography variant="h6">{children}</Typography> - {onClose ? ( - <IconButton className={classes.closeButton} onClick={onClose}> - <CloseIcon /> - </IconButton> - ) : null} - </MuiDialogTitle> - ); + const { children, classes, onClose, ...other } = props; + return ( + <MuiDialogTitle disableTypography className={classes.root} {...other}> + <Typography variant="h6">{children}</Typography> + {onClose ? ( + <IconButton className={classes.closeButton} onClick={onClose}> + <CloseIcon /> + </IconButton> + ) : null} + </MuiDialogTitle> + ); }); const DialogActions = withStyles((theme) => ({ - root: { - margin: 0, - padding: theme.spacing(1), - }, + root: { + margin: 0, + padding: theme.spacing(1), + }, }))(MuiDialogActions); const DialogContent = withStyles((theme) => ({ - root: { - padding: theme.spacing(2), - } + root: { + padding: theme.spacing(2), + }, }))(MuiDialogContent); -const schema = Yup.object( - { - name: Yup.string().required(), - description: Yup.string(), - }) +const schema = Yup.object({ + name: Yup.string().required(), + description: Yup.string(), +}); const ProjectFormFunc = (props) => { - const { onClose, item, open, onSubmit } = props; - const buttonLabel = item ? "OK" : "Create" - const title = item ? "Edit Project" : "Create Project" - const handleClose = () => { - onClose(); - }; - let initialValues = item ? { name: item.metadata.name, description: item.metadata.description } : { name: "", description: "" } + const { onClose, item, open, onSubmit } = props; + const buttonLabel = item ? "OK" : "Create"; + const title = item ? "Edit Project" : "Create Project"; + const handleClose = () => { + onClose(); + }; + let initialValues = item + ? { name: item.metadata.name, description: item.metadata.description } + : { name: "", description: "" }; - return ( - <Dialog maxWidth={"xs"} onClose={handleClose} aria-labelledby="customized-dialog-title" open={open} disableBackdropClick> - <DialogTitle id="simple-dialog-title">{title}</DialogTitle> - <Formik - initialValues={initialValues} - onSubmit={async values => { - onSubmit(values); - }} - validationSchema={schema} - > - {props => { - const { - values, - touched, - errors, - isSubmitting, - handleChange, - handleBlur, - handleSubmit - } = props; - return ( - <form noValidate onSubmit={handleSubmit}> - <DialogContent dividers> - <TextField - style={{ width: "100%", marginBottom: "10px" }} - id="name" - label="Project name" - type="text" - value={values.name} - onChange={handleChange} - onBlur={handleBlur} - helperText={(errors.name && touched.name && ( - "Name is required" - ))} - required - error={errors.name && touched.name} - /> - <TextField - style={{ width: "100%", marginBottom: "25px" }} - name="description" - value={values.description} - onChange={handleChange} - onBlur={handleBlur} - id="description" - label="Description" - multiline - rowsMax={4} - /> - </DialogContent> - <DialogActions> - <Button autoFocus onClick={handleClose} color="secondary"> - Cancel - </Button> - <Button autoFocus type="submit" color="primary" disabled={isSubmitting}> - {buttonLabel} - </Button> - </DialogActions> - </form> - ); - }} - </Formik> - </Dialog> - ); + return ( + <Dialog + maxWidth={"xs"} + onClose={handleClose} + aria-labelledby="customized-dialog-title" + open={open} + disableBackdropClick + > + <DialogTitle id="simple-dialog-title">{title}</DialogTitle> + <Formik + initialValues={initialValues} + onSubmit={async (values) => { + onSubmit(values); + }} + validationSchema={schema} + > + {(props) => { + const { + values, + touched, + errors, + isSubmitting, + handleChange, + handleBlur, + handleSubmit, + } = props; + return ( + <form noValidate onSubmit={handleSubmit}> + <DialogContent dividers> + <TextField + style={{ width: "100%", marginBottom: "10px" }} + id="name" + label="Project name" + type="text" + value={values.name} + onChange={handleChange} + onBlur={handleBlur} + helperText={errors.name && touched.name && "Name is required"} + required + disabled={item} + error={errors.name && touched.name} + /> + <TextField + style={{ width: "100%", marginBottom: "25px" }} + name="description" + value={values.description} + onChange={handleChange} + onBlur={handleBlur} + id="description" + label="Description" + multiline + rowsMax={4} + /> + </DialogContent> + <DialogActions> + <Button autoFocus onClick={handleClose} color="secondary"> + Cancel + </Button> + <Button + autoFocus + type="submit" + color="primary" + disabled={isSubmitting} + > + {buttonLabel} + </Button> + </DialogActions> + </form> + ); + }} + </Formik> + </Dialog> + ); }; ProjectFormFunc.propTypes = { - onClose: PropTypes.func.isRequired, - open: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, + open: PropTypes.bool.isRequired, }; export default ProjectFormFunc; |