Add adding files to upload zone

[arvados-workbench2.git] / src / views-components / dialog-create / dialog-collection-create.tsx

diff --git a/src/views-components/dialog-create/dialog-collection-create.tsx b/src/views-components/dialog-create/dialog-collection-create.tsx
index d0f793bfd854887df5b3afc1dbf6685d5b4290c0..a0cbcba504046ffbb03d4b760e8151a4870bee64 100644 (file)
--- a/src/views-components/dialog-create/dialog-collection-create.tsx
+++ b/src/views-components/dialog-create/dialog-collection-create.tsx
@@ -13,8 +13,12 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import { Button, StyleRulesCallback, WithStyles, withStyles, CircularProgress } from '@material-ui/core';
 
 import { COLLECTION_NAME_VALIDATION, COLLECTION_DESCRIPTION_VALIDATION } from '../../validators/create-project/create-project-validator';
+import { FileUpload } from "../../components/file-upload/file-upload";
+import { connect, DispatchProp } from "react-redux";
+import { RootState } from "../../store/store";
+import { collectionUploaderActions } from "../../store/collections/uploader/collection-uploader-actions";
 
-type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "dialog" | "dialogTitle" | "createProgress" | "dialogActions";
+type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "createProgress" | "dialogActions";
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     button: {
@@ -27,17 +31,9 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
     formContainer: {
         display: "flex",
         flexDirection: "column",
-        marginTop: "20px",
-    },
-    dialogTitle: {
-        paddingBottom: "0"
     },
     textField: {
-        marginTop: "32px",
-    },
-    dialog: {
-        minWidth: "600px",
-        minHeight: "320px"
+        marginBottom: theme.spacing.unit * 3
     },
     createProgress: {
         position: "absolute",
@@ -45,17 +41,19 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
         right: "110px"
     },
     dialogActions: {
-        marginBottom: "24px"
+        marginBottom: theme.spacing.unit * 3
     }
 });
+
 interface DialogCollectionCreateProps {
     open: boolean;
     handleClose: () => void;
-    onSubmit: (data: { name: string, description: string }) => void;
+    onSubmit: (data: { name: string, description: string, files: File[] }) => void;
     handleSubmit: any;
     submitting: boolean;
     invalid: boolean;
     pristine: boolean;
+    files: File[];
 }
 
 interface TextFieldProps {
@@ -67,9 +65,12 @@ interface TextFieldProps {
 }
 
 export const DialogCollectionCreate = compose(
+    connect((state: RootState) => ({
+        files: state.collections.uploader.files
+    })),
     reduxForm({ form: 'collectionCreateDialog' }),
     withStyles(styles))(
-    class DialogCollectionCreate extends React.Component<DialogCollectionCreateProps & WithStyles<CssRules>> {
+    class DialogCollectionCreate extends React.Component<DialogCollectionCreateProps & DispatchProp & WithStyles<CssRules>> {
         render() {
             const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine } = this.props;
 
@@ -77,39 +78,44 @@ export const DialogCollectionCreate = compose(
                 <Dialog
                     open={open}
                     onClose={handleClose}
+                    fullWidth={true}
+                    maxWidth='sm'
                     disableBackdropClick={true}
                     disableEscapeKeyDown={true}>
-                    <div className={classes.dialog}>
-                        <form onSubmit={handleSubmit((data: any) => onSubmit(data))}>
-                            <DialogTitle id="form-dialog-title" className={classes.dialogTitle}>Create a collection</DialogTitle>
-                            <DialogContent className={classes.formContainer}>
-                                <Field name="name"
-                                       component={this.renderTextField}
-                                       floatinglabeltext="Collection Name"
-                                       validate={COLLECTION_NAME_VALIDATION}
-                                       className={classes.textField}
-                                       label="Collection Name"/>
-                                <Field name="description"
-                                       component={this.renderTextField}
-                                       floatinglabeltext="Description - optional"
-                                       validate={COLLECTION_DESCRIPTION_VALIDATION}
-                                       className={classes.textField}
-                                       label="Description - optional"/>
-                            </DialogContent>
-                            <DialogActions className={classes.dialogActions}>
-                                <Button onClick={handleClose} className={classes.button} color="primary"
-                                        disabled={submitting}>CANCEL</Button>
-                                <Button type="submit"
-                                        className={classes.lastButton}
-                                        color="primary"
-                                        disabled={invalid || submitting || pristine}
-                                        variant="contained">
-                                    CREATE A COLLECTION
-                                </Button>
-                                {submitting && <CircularProgress size={20} className={classes.createProgress}/>}
-                            </DialogActions>
-                        </form>
-                    </div>
+                    <form onSubmit={handleSubmit((data: any) => onSubmit({ ...data, files: this.props.files }))}>
+                        <DialogTitle id="form-dialog-title">Create a collection</DialogTitle>
+                        <DialogContent className={classes.formContainer}>
+                            <Field name="name"
+                                    disabled={submitting}
+                                    component={this.renderTextField}
+                                    floatinglabeltext="Collection Name"
+                                    validate={COLLECTION_NAME_VALIDATION}
+                                    className={classes.textField}
+                                    label="Collection Name"/>
+                            <Field name="description"
+                                    disabled={submitting}
+                                    component={this.renderTextField}
+                                    floatinglabeltext="Description - optional"
+                                    validate={COLLECTION_DESCRIPTION_VALIDATION}
+                                    className={classes.textField}
+                                    label="Description - optional"/>
+                            <FileUpload
+                                files={this.props.files}
+                                onDrop={files => this.props.dispatch(collectionUploaderActions.SET_UPLOAD_FILES(files))}/>
+                        </DialogContent>
+                        <DialogActions className={classes.dialogActions}>
+                            <Button onClick={handleClose} className={classes.button} color="primary"
+                                    disabled={submitting}>CANCEL</Button>
+                            <Button type="submit"
+                                    className={classes.lastButton}
+                                    color="primary"
+                                    disabled={invalid || submitting || pristine}
+                                    variant="contained">
+                                CREATE A COLLECTION
+                            </Button>
+                            {submitting && <CircularProgress size={20} className={classes.createProgress}/>}
+                        </DialogActions>
+                    </form>
                 </Dialog>
             );
         }