Merge branch 'develop' of gitlab.coko.foundation:xpub/xpub-faraday into develop

packages/component-manuscript/src/components/ManuscriptDetails.js

@@ -7,6 +7,7 @@ import { Authors, Files } from './'
 import { Expandable } from '../molecules/'
 
 const ManuscriptDetails = ({
+  startExpanded,
   fragment: {
     files = {},
     authors = [],
@@ -15,7 +16,7 @@ const ManuscriptDetails = ({
   },
 }) => (
   <Root>
-    <Expandable label="Details" startExpanded>
+    <Expandable label="Details" startExpanded={startExpanded}>
       {!!abstract && (
         <Expandable label="ABSTRACT" startExpanded>
           <Text dangerouslySetInnerHTML={{ __html: abstract }} />

packages/component-manuscript/src/components/ManuscriptLayout.js

@@ -14,6 +14,7 @@ import {
 import {
   SideBarRoles,
   SideBarActions,
+  SubmitRevision,
   ManuscriptHeader,
   ReviewsAndReports,
   ManuscriptDetails,
@@ -51,7 +52,13 @@ const ManuscriptLayout = ({
             project={project}
             version={version}
           />
-          <ManuscriptDetails fragment={version} />
+          <ManuscriptDetails
+            fragment={version}
+            startExpanded={isEmpty(version.revision)}
+          />
+          {version.revision && (
+            <SubmitRevision project={project} version={version} />
+          )}
           <ReviewsAndReports project={project} version={version} />
           {editorialRecommendations.length > 0 && (
             <EditorialComments

packages/component-manuscript/src/components/ReviewerReportForm.js

@@ -169,7 +169,7 @@ const ReviewerReportForm = ({
       </Row>
     )}
     <Row>
-      <ActionButton onClick={handleSubmit}> Submit report </ActionButton>
+      <ActionButton onClick={handleSubmit}>Submit report</ActionButton>
       <AutosaveIndicator
         formName="reviewerReport"
         lastUpdated={review.updatedOn}

packages/component-manuscript/src/components/SubmitRevision.js

+import React from 'react'
+import { get } from 'lodash'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { th } from '@pubsweet/ui-toolkit'
+import { required } from 'xpub-validators'
+import { DragDropContext } from 'react-dnd'
+import styled, { css } from 'styled-components'
+import HTML5Backend from 'react-dnd-html5-backend'
+import { ValidatedField, Button } from '@pubsweet/ui'
+import { AbstractEditor, TitleEditor } from 'xpub-edit'
+import {
+  reduxForm,
+  getFormSyncErrors,
+  getFormValues,
+  change as changeForm,
+} from 'redux-form'
+import { AuthorList, Files } from 'pubsweet-components-faraday/src/components'
+import { submitRevision } from 'pubsweet-component-wizard/src/redux/conversion'
+import AutosaveIndicator from 'pubsweet-component-wizard/src/components/AutosaveIndicator'
+import {
+  toClass,
+  compose,
+  withProps,
+  withContext,
+  withHandlers,
+} from 'recompose'
+import {
+  FileItem,
+  FilePicker,
+} from 'pubsweet-components-faraday/src/components/Files'
+import {
+  uploadFile,
+  deleteFile,
+  getRequestStatus,
+} from 'pubsweet-components-faraday/src/redux/files'
+import {
+  requiredHTML,
+  requiredFiles,
+  onRevisionSubmit,
+  onRevisionChange,
+} from './utils'
+
+import { Expandable } from '../molecules/'
+
+const TextAreaField = input => <Textarea {...input} height={70} rows={6} />
+const SubmitRevision = ({
+  addFile,
+  project,
+  version,
+  formError,
+  removeFile,
+  handleSubmit,
+  responseFiles,
+}) => (
+  <Root>
+    <Expandable label="Submit Revision" startExpanded>
+      <Expandable label="DETAILS & AUTHORS" startExpanded>
+        <Title>MANUSCRIPT TITLE*</Title>
+        <ValidatedField
+          component={input => <TitleEditor {...input} />}
+          name="metadata.title"
+          validate={[requiredHTML]}
+        />
+        <Title>ABSTRACT*</Title>
+        <ValidatedField
+          component={input => <AbstractEditor {...input} />}
+          name="metadata.abstract"
+          validate={[requiredHTML]}
+        />
+        <Title>AUTHORS DETAILS*</Title>
+        <CustomValidatedField>
+          <ValidatedField
+            component={() => (
+              <AuthorList authorPath="revision.authors" parentForm="revision" />
+            )}
+            name="authors"
+            validate={[required]}
+          />
+        </CustomValidatedField>
+      </Expandable>
+      <Expandable label="FILES" startExpanded>
+        <CustomValidatedField>
+          <ValidatedField
+            component={() => (
+              <Files filePath="revision.files" parentForm="revision" />
+            )}
+            name="files"
+            validate={[requiredFiles]}
+          />
+        </CustomValidatedField>
+      </Expandable>
+      <Expandable label="RESPONSE TO REVIEWER COMMENTS" startExpanded>
+        <Title>Reply text*</Title>
+        <Row>
+          <FullWidth className="full-width">
+            <ValidatedField
+              component={TextAreaField}
+              name="commentsToReviewers"
+              validate={[required]}
+            />
+          </FullWidth>
+        </Row>
+        <Row left>
+          {responseFiles.map(file => (
+            <FileItem
+              compact
+              id={file.id}
+              key={file.id}
+              {...file}
+              removeFile={removeFile}
+            />
+          ))}
+        </Row>
+        <FilePicker
+          allowedFileExtensions={['pdf', 'doc', 'docx']}
+          onUpload={addFile}
+        >
+          <ActionText left={12}>Upload file</ActionText>
+        </FilePicker>
+      </Expandable>
+      <SubmitContainer>
+        {formError && <Error>There are some errors above.</Error>}
+        <AutosaveIndicator formName="revision" />
+        <Button onClick={handleSubmit} primary>
+          SUBMIT REVISION
+        </Button>
+      </SubmitContainer>
+    </Expandable>
+  </Root>
+)
+
+export default compose(
+  withContext(
+    {
+      version: PropTypes.object,
+      project: PropTypes.object,
+    },
+    ({ project, version }) => ({
+      project,
+      version,
+    }),
+  ),
+  connect(
+    state => ({
+      fileFetching: getRequestStatus(state),
+      formValues: getFormValues('revision')(state),
+      formError: getFormSyncErrors('revision')(state),
+    }),
+    {
+      changeForm,
+      uploadFile,
+      deleteFile,
+      submitRevision,
+    },
+  ),
+  withHandlers({
+    addFile: ({ formValues = {}, uploadFile, changeForm, version }) => file => {
+      uploadFile(file, 'responseToReviewers', version.id)
+        .then(file => {
+          const { files } = formValues
+          const newFiles = files.responseToReviewers
+            ? [...files.responseToReviewers, file]
+            : [file]
+          changeForm('revision', 'files', {
+            ...files,
+            responseToReviewers: newFiles,
+          })
+        })
+        .catch(e => console.error(`Couldn't upload file.`, e))
+    },
+    removeFile: ({
+      formValues: { files },
+      changeForm,
+      deleteFile,
+    }) => id => e => {
+      deleteFile(id)
+        .then(r => {
+          const newFiles = files.responseToReviewers.filter(f => f.id !== id)
+          changeForm('revision', 'files', {
+            ...files,
+            responseToReviewers: newFiles,
+          })
+        })
+        .catch(e => console.error(`Couldn't delete the file.`, e))
+    },
+  }),
+  withProps(({ version, formValues }) => ({
+    initialValues: {
+      metadata: {
+        title: get(version, 'revision.metadata.title') || '',
+        abstract: get(version, 'revision.metadata.abstract') || '',
+      },
+      authors: get(version, 'revision.authors'),
+      files: get(version, 'revision.files') || [],
+      commentsToReviewers: get(version, 'revision.commentsToReviewers'),
+    },
+    responseFiles: get(formValues, 'files.responseToReviewers') || [],
+  })),
+  reduxForm({
+    form: 'revision',
+    onChange: onRevisionChange,
+    onSubmit: onRevisionSubmit,
+  }),
+  DragDropContext(HTML5Backend),
+  toClass,
+)(SubmitRevision)
+
+// #region styled-components
+const defaultText = css`
+  color: ${th('colorPrimary')};
+  font-family: ${th('fontReading')};
+  font-size: ${th('fontSizeBaseSmall')};
+`
+
+const Error = styled.span`
+  color: ${th('colorError')};
+  font-size: ${th('fontSizeBaseSmall')};
+  margin-right: ${th('subGridUnit')};
+`
+
+const CustomValidatedField = styled.div`
+  div {
+    div:last-child {
+      margin-top: 0;
+    }
+  }
+`
+
+const Textarea = styled.textarea`
+  border-color: ${({ hasError }) =>
+    hasError ? th('colorError') : th('colorPrimary')};
+  font-size: ${th('fontSizeBaseSmall')};
+  font-family: ${th('fontWriting')};
+  padding: calc(${th('subGridUnit')} * 2);
+  transition: all 300ms linear;
+  width: 100%;
+
+  &:read-only {
+    background-color: ${th('colorBackgroundHue')};
+  }
+`
+
+const FullWidth = styled.div`
+  flex: 1;
+  > div {
+    flex: 1;
+  }
+`
+
+const Row = styled.div`
+  ${defaultText};
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  flex-wrap: wrap;
+  justify-content: ${({ left }) => (left ? 'left' : 'space-between')};
+
+  div[role='alert'] {
+    margin-top: 0;
+  }
+`
+
+const ActionText = styled.span`
+  ${defaultText};
+  cursor: pointer;
+  margin-left: ${({ left }) => left || 0}px;
+  text-decoration: underline;
+`
+
+const Root = styled.div`
+  background-color: ${th('colorBackground')};
+`
+
+const Title = styled.span`
+  align-self: center;
+  font-family: ${th('fontHeading')};
+  font-size: ${th('fontSizeBaseSmall')};
+  text-transform: uppercase;
+`
+
+const SubmitContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: calc(${th('subGridUnit')} * 2);
+`
+// #endregion

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

@@ -4,6 +4,7 @@ export { default as ShowMore } from './ShowMore'
 export { default as SideBarRoles } from './SideBarRoles'
 export { default as ManuscriptPage } from './ManuscriptPage'
 export { default as SideBarActions } from './SideBarActions'
+export { default as SubmitRevision } from './SubmitRevision'
 export { default as EditorialComment } from './EditorialComment'
 export { default as ReviewReportCard } from './ReviewReportCard'
 export { default as ManuscriptHeader } from './ManuscriptHeader'
@@ -12,5 +13,5 @@ export { default as ManuscriptDetails } from './ManuscriptDetails'
 export { default as ManuscriptVersion } from './ManuscriptVersion'
 export { default as ReviewsAndReports } from './ReviewsAndReports'
 export { default as EditorialComments } from './EditorialComments'
-export { default as ReviewerReportForm } from './ReviewerReportForm'
 export { default as ReviewReportsList } from './ReviewReportsList'
+export { default as ReviewerReportForm } from './ReviewerReportForm'

packages/component-manuscript/src/components/utils.js

@@ -186,3 +186,40 @@ export const onReviewSubmit = (
     onCancel: hideModal,
   })
 }
+
+const _onRevisionChange = (values, dispatch, { project, version }) => {
+  const newValues = omit(values, 'authorForm')
+  dispatch(
+    actions.updateFragment(project, {
+      ...version,
+      revision: newValues,
+    }),
+  )
+}
+export const onRevisionChange = debounce(_onRevisionChange, 1000, {
+  maxWait: 5000,
+})
+
+export const onRevisionSubmit = (
+  values,
+  dispatch,
+  { submitRevision, version, project },
+) => {
+  // submitRevision(project.id, version.id)
+}
+
+// revision validators
+export const requiredHTML = value => {
+  if (value && value.replace('<p></p>', '').replace('<h1></h1>', '')) {
+    return undefined
+  }
+  return 'Required'
+}
+
+export const requiredFiles = (values, formValues) => {
+  const manuscripts = get(formValues, 'files.manuscripts')
+  if (!manuscripts || manuscripts.length === 0) {
+    return 'At least one main manuscript file is needed.'
+  }
+  return undefined
+}

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

@@ -63,9 +63,9 @@ const Indicator = ({
   )
 
 export default compose(
-  connect((state, { formName }) => ({
+  connect((state, { formName = 'wizard' }) => ({
     autosave: getAutosave(state),
-    form: !!getFormValues(formName || 'wizard')(state),
+    form: !!getFormValues(formName)(state),
   })),
   withProps(({ autosave: { isFetching, error, lastUpdate }, form }) => ({
     isVisibile: form && Boolean(isFetching || lastUpdate || error),

packages/component-wizard/src/redux/conversion.js

@@ -87,8 +87,8 @@ export const createRevision = (
   const {
     id,
     submitted,
-    recommendations,
     invitations,
+    recommendations,
     ...prev
   } = previousVersion
   return dispatch(

packages/components-faraday/src/components/AuthorList/AuthorAdder.js

@@ -105,7 +105,15 @@ export default compose(
     onSubmit: (
       values,
       dispatch,
-      { reset, match, changeForm, addAuthor, setEditMode, authors = [] },
+      {
+        reset,
+        match,
+        changeForm,
+        addAuthor,
+        setEditMode,
+        authors = [],
+        parentForm,
+      },
     ) => {
       const collectionId = get(match, 'params.project')
       const fragmentId = get(match, 'params.version')
@@ -116,7 +124,7 @@ export default compose(
         isCorresponding: isFirstAuthor,
       }
       addAuthor(newAuthor, collectionId, fragmentId).then(author => {
-        changeForm('wizard', 'authors', [...authors, author])
+        changeForm(parentForm, 'authors', [...authors, author])
         setEditMode(false)()
         reset()
       })

packages/components-faraday/src/components/AuthorList/AuthorEditor.js

@@ -95,10 +95,10 @@ export default compose(
     onSubmit: (
       { edit: newAuthor },
       dispatch,
-      { authors, changeForm, setAuthorEdit },
+      { authors, changeForm, setAuthorEdit, parentForm },
     ) => {
       const newAuthors = parseEditedAuthors(newAuthor, authors)
-      changeForm('wizard', 'authors', newAuthors)
+      changeForm(parentForm, 'authors', newAuthors)
       setAuthorEdit(-1)()
     },
   }),

packages/components-faraday/src/components/AuthorList/AuthorList.js

@@ -27,8 +27,6 @@ import {
 import { DragHandle } from './FormItems'
 import { Author, StaticList, AuthorAdder, AuthorEditor } from './'
 
-const wizardSelector = formValueSelector('wizard')
-
 const Authors = ({
   match,
   error,
@@ -43,6 +41,7 @@ const Authors = ({
   setEditMode,
   editedAuthor,
   setFormAuthors,
+  parentForm = 'wizard',
   ...rest
 }) => (
   <Root>
@@ -52,6 +51,7 @@ const Authors = ({
       editAuthor={editAuthor}
       editMode={addMode}
       match={match}
+      parentForm={parentForm}
       setEditMode={setEditMode}
       setFormAuthors={setFormAuthors}
     />
@@ -60,6 +60,7 @@ const Authors = ({
         authors={authors}
         editComponent={AuthorEditor}
         editIndex={editMode}
+        parentForm={parentForm}
         setFormAuthors={setFormAuthors}
         version={version}
         {...rest}
@@ -83,11 +84,11 @@ export default compose(
   withRouter,
   getContext({ version: PropTypes.object, project: PropTypes.object }),
   connect(
-    (state, { project }) => ({
+    (state, { project, parentForm = 'wizard' }) => ({
       error: getAuthorError(state),
       currentUser: get(state, 'currentUser.user'),
       version: selectCurrentVersion(state, project),
-      authorForm: wizardSelector(state, 'authorForm'),
+      authorForm: formValueSelector(parentForm)(state, 'authorForm'),
     }),
     {
       addAuthor,
@@ -97,25 +98,30 @@ export default compose(
     },
   ),
   withState('authors', 'setAuthors', []),
-  withProps(({ version, authorForm }) => ({
-    authors: get(version, 'authors') || [],
+  withProps(({ version, authorPath = 'authors', authorForm }) => ({
+    authors: get(version, authorPath) || [],
     addMode: isBoolean(authorForm) && authorForm,
     editMode: isNumber(authorForm) ? authorForm : -1,
   })),
   withHandlers({
-    setFormAuthors: ({ setAuthors, changeForm }) => (authors = []) => {
+    setFormAuthors: ({ setAuthors, changeForm, parentForm = 'wizard' }) => (
+      authors = [],
+    ) => {
       setAuthors(authors)
-      changeForm('wizard', 'authors', authors)
+      changeForm(parentForm, 'authors', authors)
     },
   }),
   withHandlers({
-    setAuthorEdit: ({ changeForm }) => authorIndex => e => {
+    setAuthorEdit: ({
+      changeForm,
+      parentForm = 'wizard',
+    }) => authorIndex => e => {
       e && e.preventDefault && e.preventDefault()
-      changeForm('wizard', 'authorForm', authorIndex)
+      changeForm(parentForm, 'authorForm', authorIndex)
     },
-    setEditMode: ({ changeForm }) => mode => e => {
+    setEditMode: ({ changeForm, parentForm = 'wizard' }) => mode => e => {
       e && e.preventDefault()
-      changeForm('wizard', 'authorForm', mode)
+      changeForm(parentForm, 'authorForm', mode)
     },
     parseAuthorType: () => (isSubmitting, isCorresponding, index) => {
       if (isSubmitting) return `#${index + 1} Submitting author`

packages/components-faraday/src/components/AuthorList/StaticList.js

@@ -7,6 +7,7 @@ export default ({
   project,
   authors,
   editIndex,
+  parentForm,
   removeAuthor,
   editComponent,
   setAuthorEdit,
@@ -28,6 +29,7 @@ export default ({
             setAuthors: setFormAuthors,
             setAuthorEdit,
             parseAuthorType,
+            parentForm,
             project,
             version,
             ...author,

packages/components-faraday/src/components/Files/Files.js

@@ -120,36 +120,43 @@ export default compose(
   }),
   lifecycle({
     componentDidMount() {
-      const { version: { files }, setFiles } = this.props
+      const { version, setFiles, filePath = 'files' } = this.props
       setFiles(prev => ({
-        manuscripts: get(files, 'manuscripts') || [],
-        coverLetter: get(files, 'coverLetter') || [],
-        supplementary: get(files, 'supplementary') || [],
-        responseToReviewers: get(files, 'responseToReviewers') || [],
+        manuscripts: get(version, `${filePath}.manuscripts`) || [],
+        coverLetter: get(version, `${filePath}.coverLetter`) || [],
+        supplementary: get(version, `${filePath}.supplementary`) || [],
+        responseToReviewers:
+          get(version, `${filePath}.responseToReviewers`) || [],
       }))
     },
     componentWillReceiveProps(nextProps) {
-      const { setFiles, version: { files: previousFiles } } = this.props
-      const { version: { files } } = nextProps
+      const { setFiles, version, filePath = 'files' } = this.props
+      const { version: newVersion } = nextProps
+
+      const files = get(newVersion, filePath)
+      const previousFiles = get(version, filePath)
+
       if (!isEqual(previousFiles, files)) {
         setFiles(files)
       }
     },
   }),
   withHandlers({
-    dropSortableFile: ({ files, setFiles, changeForm }) => (
-      otherProps,
-      dragProps,
-    ) => {
+    dropSortableFile: ({
+      files,
+      setFiles,
+      changeForm,
+      parentForm = 'wizard',
+    }) => (otherProps, dragProps) => {
       // do something if the file is not changing list
       const { listId: fromListId } = otherProps
       const { listId: toListId } = dragProps
       if (fromListId === toListId) {
         setFiles(files)
-        changeForm('wizard', 'files', files)
+        changeForm(parentForm, 'files', files)
       }
     },
-    changeList: ({ files, setFiles, changeForm }) => (
+    changeList: ({ files, setFiles, changeForm, parentForm = 'wizard' }) => (
       fromListId,
       toListId,
       id,
@@ -165,7 +172,7 @@ export default compose(
         [fromListId]: fromFiles,
       }
       setFiles(newFiles)
-      changeForm('wizard', 'files', newFiles)
+      changeForm(parentForm, 'files', newFiles)
     },
     addFile: ({
       files,
@@ -173,6 +180,7 @@ export default compose(
       setFiles,
       uploadFile,
       changeForm,
+      parentForm = 'wizard',
     }) => type => file => {
       uploadFile(file, type, version.id)
         .then(file => {
@@ -181,7 +189,7 @@ export default compose(
             [type]: [...files[type], file],
           }
           setFiles(newFiles)
-          changeForm('wizard', 'files', newFiles)
+          changeForm(parentForm, 'files', newFiles)
         })
         .catch(e => console.error(`Couldn't upload file.`, e))
     },
@@ -196,11 +204,12 @@ export default compose(
       setFiles(newFiles)
     },
     removeFile: ({
+      files,
+      version,
       setFiles,
       changeForm,
-      files,
       deleteFile,
-      version,
+      parentForm = 'wizard',
     }) => type => id => e => {
       e.preventDefault()
       deleteFile(id, type)
@@ -210,7 +219,7 @@ export default compose(
             [type]: files[type].filter(f => f.id !== id),
           }
           setFiles(newFiles)
-          changeForm('wizard', 'files', newFiles)
+          changeForm(parentForm, 'files', newFiles)
         })
         .catch(e => console.error(`Couldn't delete file.`, e))
     },

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

 import React from 'react'
 import styled from 'styled-components'
-import uploadFileFn from 'xpub-upload'
 import { AbstractEditor, TitleEditor } from 'xpub-edit'
 import { Menu, YesOrNo, CheckboxGroup } from '@pubsweet/ui'
 import { required, minChars, minSize } from 'xpub-validators'
@@ -47,8 +46,6 @@ const journal = {
   value: 'hindawi-faraday',
 }
 
-const uploadFile = input => uploadFileFn(input)
-
 export default {
   showProgress: true,
   formSectionKeys: [
@@ -59,7 +56,7 @@ export default {
     'files',
   ],
   submissionRedirect: '/confirmation-page',
-  dispatchFunctions: [uploadFile],
+  dispatchFunctions: [],
   steps: [
     {
       label: 'Journal details',

packages/xpub-faraday/config/validations.js

@@ -84,6 +84,7 @@ module.exports = {
       decision: Joi.object(),
       authors: Joi.array(),
       invitations: Joi.array(),
+      revision: Joi.any(),
       recommendations: Joi.array().items(
         Joi.object({
           id: Joi.string().required(),
@@ -111,7 +112,6 @@ module.exports = {
           ),
         }),
       ),
-      revision: Joi.object(),
     },
   ],
   user: {