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 TextField from '@material-ui/core/TextField';
   7 import Dialog from '@material-ui/core/Dialog';
   8 import DialogActions from '@material-ui/core/DialogActions';
   9 import DialogContent from '@material-ui/core/DialogContent';
  10 import DialogTitle from '@material-ui/core/DialogTitle';
  11 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
  12
  13 import Validator from '../../utils/dialog-validator';
  14
  15 interface ProjectCreateProps {
  16   open: boolean;
  17   pending: boolean;
  18   handleClose: () => void;
  19   onSubmit: (data: { name: string, description: string }) => void;
  20 }
  21
  22 interface DialogState {
  23   name: string;
  24   description: string;
  25   isNameValid: boolean;
  26   isDescriptionValid: boolean;
  27 }
  28
  29 class DialogProjectCreate extends React.Component<ProjectCreateProps & WithStyles<CssRules>> {
  30   state: DialogState = {
  31     name: '',
  32     description: '',
  33     isNameValid: false,
  34     isDescriptionValid: true
  35   };
  36
  37   render() {
  38     const { name, description, isNameValid, isDescriptionValid } = this.state;
  39     const { classes, open, handleClose, pending } = this.props;
  40
  41     return (
  42       <Dialog
  43         open={open}
  44         onClose={handleClose}>
  45         <div className={classes.dialog}>
  46           <DialogTitle id="form-dialog-title" className={classes.dialogTitle}>Create a project</DialogTitle>
  47           <DialogContent className={classes.dialogContent}>
  48             <Validator
  49               value={name}
  50               onChange={e => this.isNameValid(e)}
  51               isRequired={true}
  52               render={hasError =>
  53                 <TextField
  54                   margin="dense"
  55                   className={classes.textField}
  56                   id="name"
  57                   onChange={e => this.handleProjectName(e)}
  58                   label="Project name"
  59                   error={hasError}
  60                   fullWidth />} />
  61             <Validator
  62               value={description}
  63               onChange={e => this.isDescriptionValid(e)}
  64               isRequired={false}
  65               render={hasError =>
  66                 <TextField
  67                   margin="dense"
  68                   className={classes.textField}
  69                   id="description"
  70                   onChange={e => this.handleDescriptionValue(e)}
  71                   label="Description - optional"
  72                   error={hasError}
  73                   fullWidth />} />
  74           </DialogContent>
  75           <DialogActions>
  76             <Button onClick={handleClose} className={classes.button} color="primary" disabled={pending}>CANCEL</Button>
  77             <Button onClick={this.handleSubmit}
  78               className={classes.lastButton}
  79               color="primary"
  80               disabled={!isNameValid || (!isDescriptionValid && description.length > 0) || pending}
  81               variant="contained">
  82               CREATE A PROJECT
  83               </Button>
  84               {pending && <CircularProgress size={20} className={classes.createProgress} />}
  85           </DialogActions>
  86         </div>
  87       </Dialog>
  88     );
  89   }
  90
  91   handleSubmit = () => {
  92     this.props.onSubmit({
  93       name: this.state.name,
  94       description: this.state.description
  95     });
  96   }
  97
  98   handleProjectName(e: any) {
  99     this.setState({
 100       name: e.target.value,
 101     });
 102   }
 103
 104   handleDescriptionValue(e: any) {
 105     this.setState({
 106       description: e.target.value,
 107     });
 108   }
 109
 110   isNameValid(value: boolean | string) {
 111     this.setState({
 112       isNameValid: value,
 113     });
 114   }
 115
 116   isDescriptionValid(value: boolean | string) {
 117     this.setState({
 118       isDescriptionValid: value,
 119     });
 120   }
 121 }
 122
 123 type CssRules = "button" | "lastButton" | "dialogContent" | "textField" | "dialog" | "dialogTitle" | "createProgress";
 124
 125 const styles: StyleRulesCallback<CssRules> = theme => ({
 126   button: {
 127     marginLeft: theme.spacing.unit
 128   },
 129   lastButton: {
 130     marginLeft: theme.spacing.unit,
 131     marginRight: "20px",
 132   },
 133   dialogContent: {
 134     marginTop: "20px",
 135   },
 136   dialogTitle: {
 137     paddingBottom: "0"
 138   },
 139   textField: {
 140     marginTop: "32px",
 141   },
 142   dialog: {
 143     minWidth: "600px",
 144     minHeight: "320px"
 145   },
 146   createProgress: {
 147     position: "absolute",
 148     minWidth: "20px",
 149     right: "95px"
 150   }
 151 });
 152
 153 export default withStyles(styles)(DialogProjectCreate);