1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
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";
18 type CssRules = "button" | "lastButton" | "formContainer" | "textField" | "createProgress" | "dialogActions";
20 const styles: StyleRulesCallback<CssRules> = theme => ({
22 marginLeft: theme.spacing.unit
25 marginLeft: theme.spacing.unit,
30 flexDirection: "column",
33 marginBottom: theme.spacing.unit * 3
41 marginBottom: theme.spacing.unit * 3
45 interface DialogCollectionCreateProps {
47 handleClose: () => void;
48 onSubmit: (data: { name: string, description: string }, files: UploadFile[]) => void;
56 export const COLLECTION_CREATE_DIALOG = "collectionCreateDialog";
58 export const DialogCollectionCreate = compose(
59 connect((state: RootState) => ({
60 files: state.collections.uploader
62 reduxForm({ form: COLLECTION_CREATE_DIALOG }),
64 class DialogCollectionCreate extends React.Component<DialogCollectionCreateProps & DispatchProp & WithStyles<CssRules>> {
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
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}>
84 validate={COLLECTION_NAME_VALIDATION}
85 className={classes.textField}
86 label="Collection Name" />
87 <Field name="description"
90 validate={COLLECTION_DESCRIPTION_VALIDATION}
91 className={classes.textField}
92 label="Description - optional" />
96 onDrop={files => this.props.dispatch(collectionUploaderActions.SET_UPLOAD_FILES(files))} />
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}
104 disabled={invalid || busy || pristine}
108 {busy && <CircularProgress size={20} className={classes.createProgress} />}