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 '../../components/text-field/text-field';
   9 import { Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core/';
  10 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
  11
  12 import { PROJECT_NAME_VALIDATION, PROJECT_DESCRIPTION_VALIDATION } from '../../validators/create-project/create-project-validator';
  13
  14 type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "dialog" | "dialogTitle" | "createProgress" | "dialogActions";
  15
  16 const styles: StyleRulesCallback<CssRules> = theme => ({
  17     button: {
  18         marginLeft: theme.spacing.unit
  19     },
  20     lastButton: {
  21         marginLeft: theme.spacing.unit,
  22         marginRight: "20px",
  23     },
  24     formContainer: {
  25         display: "flex",
  26         flexDirection: "column",
  27         marginTop: "20px",
  28     },
  29     dialogTitle: {
  30         paddingBottom: "0"
  31     },
  32     textField: {
  33         marginTop: "32px",
  34     },
  35     dialog: {
  36         minWidth: "600px",
  37         minHeight: "320px"
  38     },
  39     createProgress: {
  40         position: "absolute",
  41         minWidth: "20px",
  42         right: "95px"
  43     },
  44     dialogActions: {
  45         marginBottom: "24px"
  46     }
  47 });
  48 interface DialogProjectProps {
  49     open: boolean;
  50     handleClose: () => void;
  51     onSubmit: (data: { name: string, description: string }) => void;
  52     handleSubmit: any;
  53     submitting: boolean;
  54     invalid: boolean;
  55     pristine: boolean;
  56 }
  57
  58 export const PROJECT_CREATE_DIALOG = "projectCreateDialog";
  59
  60 export const DialogProjectCreate = compose(
  61     reduxForm({ form: PROJECT_CREATE_DIALOG }),
  62     withStyles(styles))(
  63     class DialogProjectCreate extends React.Component<DialogProjectProps & WithStyles<CssRules>> {
  64         render() {
  65             const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine } = this.props;
  66
  67             return (
  68                 <Dialog
  69                     open={open}
  70                     onClose={handleClose}
  71                     disableBackdropClick={true}
  72                     disableEscapeKeyDown={true}>
  73                     <div className={classes.dialog}>
  74                         <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
  75                             <DialogTitle id="form-dialog-title" className={classes.dialogTitle}>Create a
  76                                 project</DialogTitle>
  77                             <DialogContent className={classes.formContainer}>
  78                                 <Field name="name"
  79                                        component={TextField}
  80                                        validate={PROJECT_NAME_VALIDATION}
  81                                        className={classes.textField}
  82                                        label="Project Name"/>
  83                                 <Field name="description"
  84                                        component={TextField}
  85                                        validate={PROJECT_DESCRIPTION_VALIDATION}
  86                                        className={classes.textField}
  87                                        label="Description - optional"/>
  88                             </DialogContent>
  89                             <DialogActions className={classes.dialogActions}>
  90                                 <Button onClick={handleClose} className={classes.button} color="primary"
  91                                         disabled={submitting}>CANCEL</Button>
  92                                 <Button type="submit"
  93                                         className={classes.lastButton}
  94                                         color="primary"
  95                                         disabled={invalid || submitting || pristine}
  96                                         variant="contained">
  97                                     CREATE A PROJECT
  98                                 </Button>
  99                                 {submitting && <CircularProgress size={20} className={classes.createProgress}/>}
 100                             </DialogActions>
 101                         </form>
 102                     </div>
 103                 </Dialog>
 104             );
 105         }
 106     }
 107 );