src/views-components/dialog-create/dialog-project-create.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { reduxForm, Field } from 'redux-form';
   7 import { compose } from 'redux';
   8 import TextField from '@material-ui/core/TextField';
   9 import Dialog from '@material-ui/core/Dialog';
  10 import DialogActions from '@material-ui/core/DialogActions';
  11 import DialogContent from '@material-ui/core/DialogContent';
  12 import DialogTitle from '@material-ui/core/DialogTitle';
  13 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
  14
  15 import { NAME, DESCRIPTION } from '../../validators/create-project/create-project-validator';
  16
  17 interface DialogProjectProps {
  18     open: boolean;
  19     handleClose: () => void;
  20     onSubmit: (data: { name: string, description: string }) => void;
  21     handleSubmit: any;
  22     submitting: boolean;
  23 }
  24
  25 interface TextFieldProps {
  26     label: string;
  27     floatinglabeltext: string;
  28     className?: string;
  29     input?: string;
  30     meta?: any;
  31 }
  32
  33 class DialogProjectCreate extends React.Component<DialogProjectProps & WithStyles<CssRules>> {
  34     render() {
  35         const { classes, open, handleClose, handleSubmit, onSubmit, submitting } = this.props;
  36
  37         return (
  38             <Dialog
  39                 open={open}
  40                 onClose={handleClose}
  41                 disableBackdropClick={true}
  42                 disableEscapeKeyDown={true}>
  43                 <div className={classes.dialog}>
  44                     <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
  45                         <DialogTitle id="form-dialog-title" className={classes.dialogTitle}>Create a project</DialogTitle>
  46                         <DialogContent className={classes.formContainer}>
  47                             <Field name="name"
  48                                 component={this.renderTextField}
  49                                 floatinglabeltext="Project Name"
  50                                 validate={NAME}
  51                                 className={classes.textField}
  52                                 label="Project Name" />
  53                             <Field name="description"
  54                                 component={this.renderTextField}
  55                                 floatinglabeltext="Description - optional"
  56                                 validate={DESCRIPTION}
  57                                 className={classes.textField}
  58                                 label="Description - optional" />
  59                         </DialogContent>
  60                         <DialogActions className={classes.dialogActions}>
  61                             <Button onClick={handleClose} className={classes.button} color="primary" disabled={submitting}>CANCEL</Button>
  62                             <Button type="submit"
  63                                 className={classes.lastButton}
  64                                 color="primary"
  65                                 disabled={submitting}
  66                                 variant="contained">
  67                                 CREATE A PROJECT
  68                             </Button>
  69                             {submitting && <CircularProgress size={20} className={classes.createProgress} />}
  70                         </DialogActions>
  71                     </form>
  72                 </div>
  73             </Dialog>
  74         );
  75     }
  76
  77     renderTextField = ({ input, label, meta: { touched, error }, ...custom }: TextFieldProps) => (
  78         <TextField
  79             helperText={touched && error}
  80             label={label}
  81             className={this.props.classes.textField}
  82             error={touched && !!error}
  83             autoComplete='off'
  84             {...input}
  85             {...custom}
  86         />
  87     )
  88 }
  89
  90 type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "dialog" | "dialogTitle" | "createProgress" | "dialogActions";
  91
  92 const styles: StyleRulesCallback<CssRules> = theme => ({
  93     button: {
  94         marginLeft: theme.spacing.unit
  95     },
  96     lastButton: {
  97         marginLeft: theme.spacing.unit,
  98         marginRight: "20px",
  99     },
 100     formContainer: {
 101         display: "flex",
 102         flexDirection: "column",
 103         marginTop: "20px",
 104     },
 105     dialogTitle: {
 106         paddingBottom: "0"
 107     },
 108     textField: {
 109         marginTop: "32px",
 110     },
 111     dialog: {
 112         minWidth: "600px",
 113         minHeight: "320px"
 114     },
 115     createProgress: {
 116         position: "absolute",
 117         minWidth: "20px",
 118         right: "95px"
 119     },
 120     dialogActions: {
 121         marginBottom: "24px"
 122     }
 123 });
 124
 125 export default compose(
 126     reduxForm({ form: 'projectCreateDialog' }),
 127     withStyles(styles)
 128 )(DialogProjectCreate);