Add validations and add files to submit wizard

packages/component-wizard/src/components/FileDropzone.js

@@ -3,24 +3,10 @@ import classnames from 'classnames'
 
 import classes from './FileDropzone.local.scss'
 
-const FileDropzone = ({ ...props }) => (
+const FileDropzone = ({ label }) => (
   <div className={classnames(classes.dropzone)}>
-    <span>Drag items here or use the upload button</span>
+    <span>{label}</span>
   </div>
 )
 
-// export default compose(
-//   DropTarget(
-//     'item',
-//     {
-//       drop(props) {
-//         console.log('s-a dat drop', props)
-//       },
-//     },
-//     (connect, monitor) => ({
-//       connectDropTarget: connect.dropTarget(),
-//     }),
-//   ),
-// )(FileDropzone)
-
 export default FileDropzone

packages/component-wizard/src/components/FilePicker.js

@@ -19,7 +19,7 @@ class FilePicker extends Component {
   }
 
   render() {
-    const { children } = this.props
+    const { children, disabled } = this.props
     return (
       <div>
         <input
@@ -32,7 +32,7 @@ class FilePicker extends Component {
         {React.cloneElement(children, {
           onClick: e => {
             e.preventDefault()
-            this.fileInput.click()
+            !disabled && this.fileInput.click()
           },
         })}
       </div>

packages/component-wizard/src/components/FileSection.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { Icon } from '@pubsweet/ui'
 import { DropTarget } from 'react-dnd'
-import { compose, getContext } from 'recompose'
 import { NativeTypes } from 'react-dnd-html5-backend'
+import { compose, getContext, withHandlers, withState } from 'recompose'
 import { SortableList } from 'pubsweet-components-faraday/src/components'
 
 import FileItem from './FileItem'
@@ -21,6 +21,7 @@ const DragHandle = () => (
 )
 
 const FileSection = ({
+  error,
   title,
   files,
   listId,
@@ -37,6 +38,8 @@ const FileSection = ({
   connectDropTarget,
   allowedFileExtensions,
   isFetching,
+  canDropFile,
+  disabledFilepicker,
 }) =>
   connectFileDrop(
     connectDropTarget(
@@ -49,21 +52,32 @@ const FileSection = ({
         })}
       >
         <div className={classnames(classes.header)}>
-          <span className={classnames(classes.title)}>{title}</span>
-          {!isFetching[listId] ? (
-            <FilePicker
-              allowedFileExtensions={allowedFileExtensions}
-              onUpload={addFile}
-            >
-              <div className={classnames(classes['upload-button'])}>
-                <Icon>file-plus</Icon>
+          <div className={classnames(classes['picker-container'])}>
+            <span className={classnames(classes.title)}>{title}</span>
+            {!isFetching[listId] ? (
+              <FilePicker
+                allowedFileExtensions={allowedFileExtensions}
+                disabled={disabledFilepicker()}
+                onUpload={addFile}
+              >
+                <div
+                  className={classnames({
+                    [classes['upload-button']]: true,
+                    [classes['disabled-picker']]: disabledFilepicker(),
+                  })}
+                >
+                  <Icon color={disabledFilepicker() ? '#999' : '#333'}>
+                    file-plus
+                  </Icon>
+                </div>
+              </FilePicker>
+            ) : (
+              <div className={classnames(classes.rotate, classes.icon)}>
+                <Icon size={16}>loader</Icon>
               </div>
-            </FilePicker>
-          ) : (
-            <div className={classnames(classes.rotate, classes.icon)}>
-              <Icon size={16}>loader</Icon>
-            </div>
-          )}
+            )}
+          </div>
+          <span className={classnames(classes.error)}>{error}</span>
         </div>
         <SortableList
           beginDragProps={['id', 'index', 'name', 'listId']}
@@ -75,7 +89,7 @@ const FileSection = ({
           moveItem={moveItem}
           removeFile={removeFile}
         />
-        <FileDropzone />
+        <FileDropzone label="Drag files here or use the add button." />
       </div>,
     ),
   )
@@ -84,15 +98,35 @@ export default compose(
   getContext({
     isFetching: PropTypes.object,
   }),
+  withState('error', 'setError', ''),
+  withHandlers({
+    clearError: ({ setError }) => () => {
+      setError(e => '')
+    },
+  }),
+  withHandlers({
+    setError: ({ setError, clearError }) => err => {
+      setError(e => err, () => setTimeout(clearError, 3000))
+    },
+    disabledFilepicker: ({ files, maxFiles }) => () => files.length >= maxFiles,
+  }),
   DropTarget(
     'item',
     {
-      drop({ changeList, listId: toListId }, monitor) {
+      drop(
+        { changeList, listId: toListId, maxFiles, files, setError },
+        monitor,
+      ) {
         const { listId: fromListId, id } = monitor.getItem()
+        if (files.length >= maxFiles) {
+          setError('No more files of this type can be added.')
+          return
+        }
+
         if (toListId === fromListId) return
         changeList(fromListId, toListId, id)
       },
-      canDrop({ listId: toListId }, monitor) {
+      canDrop({ listId: toListId, setError }, monitor) {
         const { listId: fromListId } = monitor.getItem()
         return toListId !== fromListId
       },
@@ -106,18 +140,32 @@ export default compose(
   DropTarget(
     NativeTypes.FILE,
     {
-      drop({ addFile, allowedFileExtensions }, monitor) {
+      drop(
+        { files, maxFiles, addFile, allowedFileExtensions, setError },
+        monitor,
+      ) {
         const [file] = monitor.getItem().files
         const fileExtention = file.name.split('.')[1]
 
-        if (allowedFileExtensions.includes(fileExtention)) {
+        if (files.length >= maxFiles) {
+          setError('No more files of this type can be added.')
+          return
+        }
+
+        if (
+          allowedFileExtensions &&
+          allowedFileExtensions.includes(fileExtention)
+        ) {
           addFile(file)
+        } else {
+          setError('File type not allowed for these kind of files.')
         }
       },
     },
     (connect, monitor) => ({
       connectFileDrop: connect.dropTarget(),
       isFileOver: monitor.isOver(),
+      canDropFile: monitor.canDrop(),
     }),
   ),
 )(FileSection)

packages/component-wizard/src/components/FileSection.local.scss

@@ -9,12 +9,28 @@
     display: flex;
     justify-content: flex-start;
 
+    .picker-container {
+      align-items: center;
+      display: flex;
+      flex: 1;
+    }
+
+    .error {
+      color: firebrick;
+      font-size: 14px;
+      margin-right: 5px;
+    }
+
     .upload-button {
       cursor: pointer;
       display: flex;
       margin-left: 5px;
     }
 
+    .disabled-picker {
+      cursor: default;
+    }
+
     .title {
       margin: 5px;
       text-transform: uppercase;

packages/component-wizard/src/components/Files.js

@@ -41,6 +41,7 @@ const Files = ({
       files={get(files, 'manuscripts') || []}
       isFirst
       listId="manuscripts"
+      maxFiles={Number.POSITIVE_INFINITY}
       moveItem={moveItem('manuscripts')}
       removeFile={removeFile('manuscripts')}
       title="Main manuscript"
@@ -50,6 +51,7 @@ const Files = ({
       changeList={changeList}
       files={get(files, 'supplementary') || []}
       listId="supplementary"
+      maxFiles={Number.POSITIVE_INFINITY}
       moveItem={moveItem('supplementary')}
       removeFile={removeFile('supplementary')}
       title="Supplementarry files"
@@ -61,6 +63,7 @@ const Files = ({
       files={get(files, 'coverLetter') || []}
       isLast
       listId="coverLetter"
+      maxFiles={1}
       moveItem={moveItem('coverLetter')}
       removeFile={removeFile('coverLetter')}
       title="Cover letter"

packages/component-wizard/src/components/WizardStep.js

@@ -66,7 +66,6 @@ export default ({
             )
           },
         )}
-      <Files />
       <div className={classnames(classes.buttons)}>
         <Button onClick={isFirst ? () => history.push('/') : prevStep}>
           {isFirst

packages/component-wizard/src/components/index.js

+export { default as Files } from './Files'
 export { default as Wizard } from './Wizard'
 export { default as Progress } from './Progress'
 export { default as WizardPage } from './WizardPage'

packages/xpub-faraday/app/config/journal/submit-wizard.js

@@ -9,6 +9,7 @@ import {
 } from '@pubsweet/ui'
 import uploadFileFn from 'xpub-upload'
 import { required, minChars, minSize } from 'xpub-validators'
+import { Files } from 'pubsweet-component-wizard/src/components/'
 import { AuthorList } from 'pubsweet-components-faraday/src/components'
 
 import { declarations } from './'
@@ -177,35 +178,39 @@ export default {
       title: '4. Manuscript Files Upload',
       children: [
         {
-          fieldId: 'label-manuscript',
-          renderComponent: Label,
-          label: 'Main Manuscript',
-        },
-        {
-          fieldId: 'files.manuscripts',
-          label: 'Main Manuscript',
-          renderComponent: Supplementary,
-        },
-        {
-          fieldId: 'label-supplementary',
-          renderComponent: Label,
-          label: 'Supplemental Files',
-        },
-        {
-          fieldId: 'files.supplementary',
-          label: 'Supplemental Files',
-          renderComponent: Supplementary,
-        },
-        {
-          fieldId: 'label-cover',
-          renderComponent: Label,
-          label: 'Cover Letter',
-        },
-        {
-          fieldId: 'files.coverLetter',
-          label: 'Cover Letter',
-          renderComponent: Supplementary,
-        },
+          fieldId: 'file-upload',
+          renderComponent: Files,
+        },
+        // {
+        //   fieldId: 'label-manuscript',
+        //   renderComponent: Label,
+        //   label: 'Main Manuscript',
+        // },
+        // {
+        //   fieldId: 'files.manuscripts',
+        //   label: 'Main Manuscript',
+        //   renderComponent: Supplementary,
+        // },
+        // {
+        //   fieldId: 'label-supplementary',
+        //   renderComponent: Label,
+        //   label: 'Supplemental Files',
+        // },
+        // {
+        //   fieldId: 'files.supplementary',
+        //   label: 'Supplemental Files',
+        //   renderComponent: Supplementary,
+        // },
+        // {
+        //   fieldId: 'label-cover',
+        //   renderComponent: Label,
+        //   label: 'Cover Letter',
+        // },
+        // {
+        //   fieldId: 'files.coverLetter',
+        //   label: 'Cover Letter',
+        //   renderComponent: Supplementary,
+        // },
       ],
     },
   ],