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