src/views-components/dialog-create/dialog-collection-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 { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from '../../validators/create-collection/create-collection-validator';
  13 import { FileUpload } from "../../components/file-upload/file-upload";
  14 import { connect, DispatchProp } from "react-redux";
  15 import { RootState } from "../../store/store";
  16 import { collectionUploaderActions, UploadFile } from "../../store/collections/uploader/collection-uploader-actions";
  17
  18 type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "createProgress" | "dialogActions";
  19
  20 const styles: StyleRulesCallback<CssRules> = theme => ({
  21     button: {
  22         marginLeft: theme.spacing.unit
  23     },
  24     lastButton: {
  25         marginLeft: theme.spacing.unit,
  26         marginRight: "20px",
  27     },
  28     formContainer: {
  29         display: "flex",
  30         flexDirection: "column",
  31     },
  32     textField: {
  33         marginBottom: theme.spacing.unit * 3
  34     },
  35     createProgress: {
  36         position: "absolute",
  37         minWidth: "20px",
  38         right: "110px"
  39     },
  40     dialogActions: {
  41         marginBottom: theme.spacing.unit * 3
  42     }
  43 });
  44
  45 interface DialogCollectionCreateProps {
  46     open: boolean;
  47     handleClose: () => void;
  48     onSubmit: (data: { name: string, description: string }, files: UploadFile[]) => void;
  49     handleSubmit: any;
  50     submitting: boolean;
  51     invalid: boolean;
  52     pristine: boolean;
  53     files: UploadFile[];
  54 }
  55
  56 export const COLLECTION_CREATE_DIALOG = "collectionCreateDialog";
  57
  58 export const DialogCollectionCreate = compose(
  59     connect((state: RootState) => ({
  60         files: state.collections.uploader
  61     })),
  62     reduxForm({ form: COLLECTION_CREATE_DIALOG }),
  63     withStyles(styles))(
  64         class DialogCollectionCreate extends React.Component<DialogCollectionCreateProps & DispatchProp & WithStyles<CssRules>> {
  65             render() {
  66                 const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine, files } = this.props;
  67                 const busy = submitting || files.reduce(
  68                     (prev, curr) => prev + (curr.loaded > 0 && curr.loaded < curr.total ? 1 : 0), 0
  69                 ) > 0;
  70                 return (
  71                     <Dialog
  72                         open={open}
  73                         onClose={handleClose}
  74                         fullWidth={true}
  75                         maxWidth='sm'
  76                         disableBackdropClick={true}
  77                         disableEscapeKeyDown={true}>
  78                         <form onSubmit={handleSubmit((data: any) => onSubmit(data, files))}>
  79                             <DialogTitle id="form-dialog-title">Create a collection</DialogTitle>
  80                             <DialogContent className={classes.formContainer}>
  81                                 <Field name="name"
  82                                     disabled={submitting}
  83                                     component={TextField}
  84                                     validate={COLLECTION_NAME_VALIDATION}
  85                                     className={classes.textField}
  86                                     label="Collection Name" />
  87                                 <Field name="description"
  88                                     disabled={submitting}
  89                                     component={TextField}
  90                                     validate={COLLECTION_DESCRIPTION_VALIDATION}
  91                                     className={classes.textField}
  92                                     label="Description - optional" />
  93                                 <FileUpload
  94                                     files={files}
  95                                     disabled={busy}
  96                                     onDrop={files => this.props.dispatch(collectionUploaderActions.SET_UPLOAD_FILES(files))} />
  97                             </DialogContent>
  98                             <DialogActions className={classes.dialogActions}>
  99                                 <Button onClick={handleClose} className={classes.button} color="primary"
 100                                     disabled={busy}>CANCEL</Button>
 101                                 <Button type="submit"
 102                                     className={classes.lastButton}
 103                                     color="primary"
 104                                     disabled={invalid || busy || pristine}
 105                                     variant="contained">
 106                                     CREATE A COLLECTION
 107                             </Button>
 108                                 {busy && <CircularProgress size={20} className={classes.createProgress} />}
 109                             </DialogActions>
 110                         </form>
 111                     </Dialog>
 112                 );
 113             }
 114         }
 115     );