Add clearing inputs after collection create, improved disabled create collection...

Feature #13856

Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos@contractors.roche.com>

diff --git a/src/components/file-upload/file-upload.tsx b/src/components/file-upload/file-upload.tsx
index aa3c0e967ff78b326b16f1966903093c6c0c72a8..ec4fdc2070bbc0c93578253d849dd2dbd5bfa334 100644 (file)
--- 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 023e5be6aec44677f189c023b4eb58e27231b4e3..d0a66b4cc0f629cf60dc935beee2cf3c42aadfbd 100644 (file)
--- 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 7c85d740dc422ea7095bbb207d2b2c49fff0fab3..f6b6bfa758b4c4ab5418a9f43912a4f2423b5ccf 100644 (file)
--- 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({\r
     SET_UPLOAD_FILES: ofType<File[]>(),\r
     START_UPLOAD: ofType(),\r
-    SET_UPLOAD_PROGRESS: ofType<{ fileId: number, loaded: number, total: number, currentTime: number }>()\r
+    SET_UPLOAD_PROGRESS: ofType<{ fileId: number, loaded: number, total: number, currentTime: number }>(),\r
+    CLEAR_UPLOAD: ofType()\r
 }, {\r
     tag: 'type',\r
     value: 'payload'\r

diff --git a/src/store/collections/uploader/collection-uploader-reducer.ts b/src/store/collections/uploader/collection-uploader-reducer.ts
index 5b24d2c49aebe537d5353f26a3a0708b5d8dda2f..9864056090eb6965d2219f0c85b47c25ad076b2a 100644 (file)
--- 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 32fc65724fe5e9a1cf4925aab04075c6e8386695..6083b640fe766f045673406565479487e145d1a9 100644 (file)
--- 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>