From 2b95c9dce888f19bdefae5add1f65847da72f1a2 Mon Sep 17 00:00:00 2001
From: Daniel Kos <daniel.kos@contractors.roche.com>
Date: Tue, 7 Aug 2018 12:19:34 +0200
Subject: [PATCH] Add clearing inputs after collection create, improved
 disabled create collection button state

Feature #13856

Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos@contractors.roche.com>
---
 src/components/file-upload/file-upload.tsx            |  5 +++--
 .../collections/creator/collection-creator-action.ts  |  3 +++
 .../uploader/collection-uploader-actions.ts           |  3 ++-
 .../uploader/collection-uploader-reducer.ts           |  1 +
 .../dialog-create/dialog-collection-create.tsx        | 11 +++++++----
 5 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/file-upload/file-upload.tsx b/src/components/file-upload/file-upload.tsx
index aa3c0e96..ec4fdc20 100644
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -38,16 +38,17 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
 
 interface FileUploadProps {
     files: UploadFile[];
+    disabled: boolean;
     onDrop: (files: File[]) => void;
 }
 
 export const FileUpload = withStyles(styles)(
-    ({ classes, files, onDrop }: FileUploadProps & WithStyles<CssRules>) =>
+    ({ classes, files, disabled, onDrop }: FileUploadProps & WithStyles<CssRules>) =>
     <Grid container direction={"column"}>
         <Typography variant={"subheading"}>
             Upload data
         </Typography>
-        <Dropzone className={classes.dropzone} onDrop={files => onDrop(files)}>
+        <Dropzone className={classes.dropzone} onDrop={files => onDrop(files)} disabled={disabled}>
             {files.length === 0 &&
             <Grid container justify="center" alignItems="center" className={classes.container}>
                 <Grid item component={"span"}>
diff --git a/src/store/collections/creator/collection-creator-action.ts b/src/store/collections/creator/collection-creator-action.ts
index 023e5be6..d0a66b4c 100644
--- a/src/store/collections/creator/collection-creator-action.ts
+++ b/src/store/collections/creator/collection-creator-action.ts
@@ -9,6 +9,7 @@ import { RootState } from "../../store";
 import { CollectionResource } from '../../../models/collection';
 import { ServiceRepository } from "../../../services/services";
 import { collectionUploaderActions } from "../uploader/collection-uploader-actions";
+import { reset } from "redux-form";
 
 export const collectionCreateActions = unionize({
     OPEN_COLLECTION_CREATOR: ofType<{ ownerUuid: string }>(),
@@ -35,6 +36,8 @@ export const createCollection = (collection: Partial<CollectionResource>, files:
                     })
                 .then(collection => {
                     dispatch(collectionCreateActions.CREATE_COLLECTION_SUCCESS(collection));
+                    dispatch(reset('collectionCreateDialog'));
+                    dispatch(collectionUploaderActions.CLEAR_UPLOAD());
                 });
                 return collection;
             });
diff --git a/src/store/collections/uploader/collection-uploader-actions.ts b/src/store/collections/uploader/collection-uploader-actions.ts
index 7c85d740..f6b6bfa7 100644
--- a/src/store/collections/uploader/collection-uploader-actions.ts
+++ b/src/store/collections/uploader/collection-uploader-actions.ts
@@ -18,7 +18,8 @@ export interface UploadFile {
 export const collectionUploaderActions = unionize({
     SET_UPLOAD_FILES: ofType<File[]>(),
     START_UPLOAD: ofType(),
-    SET_UPLOAD_PROGRESS: ofType<{ fileId: number, loaded: number, total: number, currentTime: number }>()
+    SET_UPLOAD_PROGRESS: ofType<{ fileId: number, loaded: number, total: number, currentTime: number }>(),
+    CLEAR_UPLOAD: ofType()
 }, {
     tag: 'type',
     value: 'payload'
diff --git a/src/store/collections/uploader/collection-uploader-reducer.ts b/src/store/collections/uploader/collection-uploader-reducer.ts
index 5b24d2c4..98640560 100644
--- a/src/store/collections/uploader/collection-uploader-reducer.ts
+++ b/src/store/collections/uploader/collection-uploader-reducer.ts
@@ -37,6 +37,7 @@ export const collectionUploaderReducer = (state: CollectionUploaderState = initi
             }
             return files;
         },
+        CLEAR_UPLOAD: () => [],
         default: () => state
     });
 };
diff --git a/src/views-components/dialog-create/dialog-collection-create.tsx b/src/views-components/dialog-create/dialog-collection-create.tsx
index 32fc6572..6083b640 100644
--- a/src/views-components/dialog-create/dialog-collection-create.tsx
+++ b/src/views-components/dialog-create/dialog-collection-create.tsx
@@ -73,7 +73,9 @@ export const DialogCollectionCreate = compose(
     class DialogCollectionCreate extends React.Component<DialogCollectionCreateProps & DispatchProp & WithStyles<CssRules>> {
         render() {
             const { classes, open, handleClose, handleSubmit, onSubmit, submitting, invalid, pristine, files } = this.props;
-
+            const busy = submitting || files.reduce(
+                (prev, curr) => prev + (curr.loaded > 0 && curr.loaded < curr.total ? 1 : 0), 0
+            ) > 0;
             return (
                 <Dialog
                     open={open}
@@ -101,19 +103,20 @@ export const DialogCollectionCreate = compose(
                                     label="Description - optional"/>
                             <FileUpload
                                 files={files}
+                                disabled={busy}
                                 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>
+                                    disabled={busy}>CANCEL</Button>
                             <Button type="submit"
                                     className={classes.lastButton}
                                     color="primary"
-                                    disabled={invalid || submitting || pristine}
+                                    disabled={invalid || busy || pristine}
                                     variant="contained">
                                 CREATE A COLLECTION
                             </Button>
-                            {submitting && <CircularProgress size={20} className={classes.createProgress}/>}
+                            {busy && <CircularProgress size={20} className={classes.createProgress}/>}
                         </DialogActions>
                     </form>
                 </Dialog>
-- 
2.30.2