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