From c0e22f8184f9570713a28a7016f29701b384b37c Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Wed, 16 May 2018 14:04:38 +0300
Subject: [PATCH] feat(make-recommendation): request a revision form
---
.../MakeRecommendation/FormItems.js | 6 +-
.../components/MakeRecommendation/StepTwo.js | 194 +++++++++++++++---
packages/xpub-faraday/app.js | 2 +-
3 files changed, 167 insertions(+), 35 deletions(-)
diff --git a/packages/components-faraday/src/components/MakeRecommendation/FormItems.js b/packages/components-faraday/src/components/MakeRecommendation/FormItems.js
index 596aa0042..66534ec0c 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/FormItems.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/FormItems.js
@@ -8,7 +8,7 @@ export const RootContainer = styled.div`
flex-direction: column;
margin: 0 auto;
max-width: 550px;
- min-width: 350px;
+ min-width: 450px;
padding: calc(${th('subGridUnit')} * 2) calc(${th('subGridUnit')} * 4);
`
@@ -48,7 +48,7 @@ export const Row = styled.div`
export const RowItem = styled.div`
display: flex;
- flex: 1;
+ flex: ${({ flex }) => flex || 1};
flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};
`
@@ -67,7 +67,7 @@ export const Err = styled.span`
`
export const Textarea = styled.textarea`
- width: 100%;
+ width: 400px;
padding: calc(${th('subGridUnit')}*2);
font-size: ${th('fontSizeBaseSmall')};
font-family: ${th('fontWriting')};
diff --git a/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js b/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
index f549c1cd5..1f7f86db2 100644
--- a/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
+++ b/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
@@ -1,8 +1,18 @@
-import React from 'react'
+import React, { Fragment } from 'react'
import { capitalize } from 'lodash'
-import { compose } from 'recompose'
-import { reduxForm } from 'redux-form'
-import { Button, Spinner, ValidatedField } from '@pubsweet/ui'
+import { connect } from 'react-redux'
+import { required } from 'xpub-validators'
+import styled, { css } from 'styled-components'
+import { reduxForm, change as changeForm } from 'redux-form'
+import { compose, withState, withHandlers } from 'recompose'
+import {
+ th,
+ Icon,
+ Button,
+ Spinner,
+ RadioGroup,
+ ValidatedField,
+} from '@pubsweet/ui'
import {
Row,
@@ -15,41 +25,118 @@ import {
FormContainer,
} from './'
+const revisionOptions = [
+ { value: 'minor', label: 'Minor' },
+ { value: 'major', label: 'Major' },
+]
+
const Form = RootContainer.withComponent(FormContainer)
const StepTwo = ({
- recommendationError,
goBack,
+ hasNote,
decision,
- handleSubmit,
+ showNote,
+ removeNote,
isFetching,
+ handleSubmit,
+ recommendationError,
}) => (
<Form onSubmit={handleSubmit}>
- <Title>{`Recommandation to ${capitalize(decision)}`}</Title>
- <Row>
- <RowItem vertical>
- <Label>Message for Editor in Chief (optional)</Label>
- <ValidatedField
- component={input => <Textarea {...input} />}
- name="message.eic"
- />
- </RowItem>
- </Row>
- <Row>
- <RowItem vertical>
- <Label>Message for Author (optional)</Label>
- <ValidatedField
- component={input => <Textarea {...input} />}
- name="message.author"
- />
- </RowItem>
- </Row>
- {recommendationError && (
- <Row>
- <RowItem centered>
- <Err>{recommendationError}</Err>
- </RowItem>
- </Row>
+ <Title>
+ {decision !== 'revise'
+ ? `Recommandation to ${capitalize(decision)}`
+ : `Request a revision from Author`}
+ </Title>
+ {decision !== 'revise' ? (
+ <Fragment>
+ <Row>
+ <RowItem vertical>
+ <Label>Message for Editor in Chief (optional)</Label>
+ <ValidatedField
+ component={input => <Textarea {...input} />}
+ name="message.eic"
+ />
+ </RowItem>
+ </Row>
+ <Row>
+ <RowItem vertical>
+ <Label>Message for Author (optional)</Label>
+ <ValidatedField
+ component={input => <Textarea {...input} />}
+ name="message.author"
+ />
+ </RowItem>
+ </Row>
+ {recommendationError && (
+ <Row>
+ <RowItem centered>
+ <Err>{recommendationError}</Err>
+ </RowItem>
+ </Row>
+ )}
+ </Fragment>
+ ) : (
+ <Fragment>
+ <CustomRow>
+ <RowItem vertical>
+ <Label>REVISION TYPE</Label>
+ <ValidatedField
+ component={input => (
+ <RadioGroup
+ name="revision.revision-type"
+ {...input}
+ options={revisionOptions}
+ />
+ )}
+ name="revision.revisionType"
+ />
+ </RowItem>
+ </CustomRow>
+ <CustomRow>
+ <RowItem vertical>
+ <Label>REASON & DETAILS</Label>
+ <ValidatedField
+ component={input => <Textarea {...input} />}
+ name="revision.reason"
+ validate={[required]}
+ />
+ </RowItem>
+ </CustomRow>
+ {!hasNote ? (
+ <Row>
+ <RowItem>
+ <TextButton onClick={showNote}>Add Internal Note</TextButton>
+ <HintText>Not shared with author</HintText>
+ </RowItem>
+ </Row>
+ ) : (
+ <Fragment>
+ <CustomRow>
+ <RowItem>
+ <Label>INTERNAL NOTE</Label>
+ </RowItem>
+ <RowItem>
+ <HintText>Not shared with author</HintText>
+ </RowItem>
+ <CustomRowItem onClick={removeNote}>
+ <IconButton>
+ <Icon primary>x</Icon>
+ </IconButton>
+ <TextButton>Remove</TextButton>
+ </CustomRowItem>
+ </CustomRow>
+ <CustomRow>
+ <RowItem>
+ <ValidatedField
+ component={input => <Textarea {...input} />}
+ name="revision.internal-note"
+ />
+ </RowItem>
+ </CustomRow>
+ </Fragment>
+ )}
+ </Fragment>
)}
<Row>
<RowItem centered>
@@ -69,9 +156,54 @@ const StepTwo = ({
)
export default compose(
+ connect(null, { changeForm }),
+ withState('hasNote', 'changeHasNote', false),
+ withHandlers({
+ showNote: ({ changeHasNote }) => () => {
+ changeHasNote(true)
+ },
+ removeNote: ({ changeHasNote, changeForm }) => () => {
+ changeHasNote(false)
+ changeForm('recommendation', 'revision.internal-note', '')
+ },
+ }),
reduxForm({
form: 'recommendation',
destroyOnUnmount: false,
forceUnregisterOnUnmount: true,
}),
)(StepTwo)
+
+// #region styled components
+const defaultText = css`
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontInterface')};
+ font-size: ${th('fontSizeBaseSmall')};
+`
+
+const TextButton = styled.span`
+ ${defaultText};
+ cursor: pointer;
+ margin-right: ${th('subGridUnit')};
+ text-decoration: underline;
+`
+
+const HintText = styled.span`
+ ${defaultText};
+ font-style: oblique;
+`
+
+const IconButton = styled.div`
+ display: flex;
+ justify-content: center;
+`
+
+const CustomRowItem = RowItem.extend`
+ align-items: center;
+ justify-content: flex-end;
+`
+
+const CustomRow = Row.extend`
+ margin: ${th('subGridUnit')} 0;
+`
+// #endregion
diff --git a/packages/xpub-faraday/app.js b/packages/xpub-faraday/app.js
index 91f061e68..5eefe9509 100644
--- a/packages/xpub-faraday/app.js
+++ b/packages/xpub-faraday/app.js
@@ -3,6 +3,6 @@ const startServer = require('pubsweet-server')
require('dotenv').config()
startServer().catch(err => {
- logger.error('FATAL ERROR, SHUTTING DOWN::', err)
+ logger.error('FATAL ERROR, SHUTTING DOWN:', err)
process.exit(1)
})
--
GitLab