From f19bc1daec26479cd5c924017ecffebfa916069b Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Tue, 15 May 2018 14:12:13 +0300
Subject: [PATCH] feat(make-recommendation): create modal form
---
.../src/components/Dashboard/DashboardCard.js | 4 +-
.../MakeRecommendation/FormItems.js | 67 +++++++++++++++++++
.../MakeRecommendation/RecommendWizard.js | 51 ++++++++++++++
.../MakeRecommendation/Recommendation.js | 54 +++++++++++++++
.../components/MakeRecommendation/StepOne.js | 48 +++++++++++++
.../components/MakeRecommendation/StepTwo.js | 51 ++++++++++++++
.../components/MakeRecommendation/index.js | 5 ++
7 files changed, 279 insertions(+), 1 deletion(-)
create mode 100644 packages/components-faraday/src/components/MakeRecommendation/FormItems.js
create mode 100644 packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js
create mode 100644 packages/components-faraday/src/components/MakeRecommendation/Recommendation.js
create mode 100644 packages/components-faraday/src/components/MakeRecommendation/StepOne.js
create mode 100644 packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
create mode 100644 packages/components-faraday/src/components/MakeRecommendation/index.js
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index e24563449..3895e3605 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -15,10 +15,11 @@ import AuthorsWithTooltip from 'pubsweet-component-manuscript/src/molecules/Auth
import ZipFiles from '../Files/ZipFiles'
import { InviteReviewers } from '../Reviewers/'
import { selectInvitation } from '../../redux/reviewers'
-import { parseVersion, parseJournalIssue, mapStatusToLabel } from './../utils'
import { ReviewerDecision, HandlingEditorSection } from './'
+import { parseVersion, parseJournalIssue, mapStatusToLabel } from './../utils'
import { ReviewerBreakdown } from '../Invitations'
+import { Recommendation } from '../MakeRecommendation'
const DashboardCard = ({
deleteProject,
@@ -57,6 +58,7 @@ const DashboardCard = ({
/>
</LeftDetails>
<RightDetails flex={2}>
+ <Recommendation modalKey={`recommend-${version.id}`} />
<ZipFiles
archiveName={`ID-${project.customId}`}
collectionId={project.id}
diff --git a/packages/components-faraday/src/components/MakeRecommendation/FormItems.js b/packages/components-faraday/src/components/MakeRecommendation/FormItems.js
new file mode 100644
index 000000000..f1163dbd2
--- /dev/null
+++ b/packages/components-faraday/src/components/MakeRecommendation/FormItems.js
@@ -0,0 +1,67 @@
+import { th } from '@pubsweet/ui'
+import styled from 'styled-components'
+
+export const RootContainer = styled.div`
+ background-color: ${th('backgroundColorReverse')};
+ border: ${({ bordered }) => (bordered ? th('borderDefault') : 'none')};
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+ max-width: 550px;
+ min-width: 350px;
+ padding: calc(${th('subGridUnit')} * 2) calc(${th('subGridUnit')} * 4);
+`
+
+export const Title = styled.div`
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontHeading')};
+ font-size: ${th('fontSizeHeading5')};
+ font-weight: bold;
+ margin: 10px auto;
+ text-align: center;
+`
+export const Subtitle = styled.div`
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeBase')};
+ font-weight: normal;
+ margin: 10px auto;
+ text-align: center;
+`
+
+export const Email = styled.div`
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeBase')};
+ font-weight: normal;
+ margin: 10px auto;
+ text-align: center;
+`
+
+export const FormContainer = styled.form``
+
+export const Row = styled.div`
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ margin: calc(${th('subGridUnit')} * 2) 0;
+`
+
+export const RowItem = styled.div`
+ display: flex;
+ flex: 1;
+ flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
+ justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};
+`
+
+export const Label = styled.div`
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeBaseSmall')};
+ text-transform: uppercase;
+`
+export const Err = styled.span`
+ color: ${th('colorError')};
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeBase')};
+ margin-top: calc(${th('gridUnit')}*-1);
+ text-align: center;
+`
diff --git a/packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js b/packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js
new file mode 100644
index 000000000..418738132
--- /dev/null
+++ b/packages/components-faraday/src/components/MakeRecommendation/RecommendWizard.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import { get } from 'lodash'
+import { Icon } from '@pubsweet/ui'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+import { getFormValues } from 'redux-form'
+import { compose, withState, withHandlers } from 'recompose'
+
+import { StepOne, StepTwo, RootContainer } from './'
+
+const RecommendWizard = ({
+ step,
+ hideModal,
+ decision,
+ nextStep,
+ prevStep,
+ submitForm,
+ ...rest
+}) => (
+ <RootContainer>
+ <IconButton onClick={hideModal}>
+ <Icon primary>x</Icon>
+ </IconButton>
+ {step === 0 && (
+ <StepOne disabled={!decision} onSubmit={nextStep} {...rest} />
+ )}
+ {step === 1 && (
+ <StepTwo decision={decision} goBack={prevStep} onSubmit={submitForm} />
+ )}
+ </RootContainer>
+)
+
+export default compose(
+ connect(state => ({
+ decision: get(getFormValues('recommendation')(state), 'decision'),
+ })),
+ withState('step', 'changeStep', 0),
+ withHandlers({
+ nextStep: ({ changeStep }) => () => changeStep(s => s + 1),
+ prevStep: ({ changeStep }) => () => changeStep(s => (s === 0 ? 0 : s - 1)),
+ submitForm: () => values => {},
+ }),
+)(RecommendWizard)
+
+// #region styled components
+const IconButton = styled.div`
+ align-self: flex-end;
+ cursor: pointer;
+`
+
+// #endregion
diff --git a/packages/components-faraday/src/components/MakeRecommendation/Recommendation.js b/packages/components-faraday/src/components/MakeRecommendation/Recommendation.js
new file mode 100644
index 000000000..f5249bf2a
--- /dev/null
+++ b/packages/components-faraday/src/components/MakeRecommendation/Recommendation.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import { th } from '@pubsweet/ui'
+import styled from 'styled-components'
+import { compose, withHandlers } from 'recompose'
+
+import {
+ ConfirmationModal,
+ withModal2,
+} from 'pubsweet-component-modal/src/components'
+import { RecommendWizard } from './'
+
+const Recommendation = ({ showFirstStep }) => (
+ <Root onClick={showFirstStep}>Recommend</Root>
+)
+
+const SHOW_WIZARD = 'SHOW_WIZARD'
+
+const ModalComponent = ({ type, ...rest }) => {
+ switch (type) {
+ case SHOW_WIZARD:
+ return <RecommendWizard {...rest} />
+ default:
+ return <ConfirmationModal {...rest} />
+ }
+}
+
+export default compose(
+ withModal2(props => ({
+ modalComponent: ModalComponent,
+ })),
+ withHandlers({
+ showFirstStep: ({ showModal }) => () => {
+ showModal({
+ type: SHOW_WIZARD,
+ })
+ },
+ }),
+)(Recommendation)
+
+// #region styled components
+const Root = styled.div`
+ align-items: center;
+ background-color: ${th('colorPrimary')};
+ color: ${th('colorTextReverse')};
+ cursor: pointer;
+ display: flex;
+ font-family: ${th('fontInterface')};
+ font-size: ${th('fontSizeBaseSmall')};
+ height: calc(${th('subGridUnit')} * 5);
+ justify-content: center;
+ padding: 0 calc(${th('subGridUnit')} * 2);
+ text-transform: uppercase;
+`
+// #endregion
diff --git a/packages/components-faraday/src/components/MakeRecommendation/StepOne.js b/packages/components-faraday/src/components/MakeRecommendation/StepOne.js
new file mode 100644
index 000000000..48a0e9c9a
--- /dev/null
+++ b/packages/components-faraday/src/components/MakeRecommendation/StepOne.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import { reduxForm } from 'redux-form'
+import { RadioGroup, ValidatedField, Button } from '@pubsweet/ui'
+
+import { RootContainer, Row, RowItem, Title } from './'
+
+const radioOptions = [
+ { value: 'reject', label: 'Reject' },
+ { value: 'publish', label: 'Publish' },
+ { value: 'revision', label: 'Request revision' },
+]
+
+const StepOne = ({ hideModal, disabled, onSubmit }) => (
+ <RootContainer>
+ <Title>Recommendation for Next Phase</Title>
+ <Row>
+ <RowItem>
+ <ValidatedField
+ component={({ onChange }) => (
+ <RadioGroup
+ name="decision"
+ onChange={onChange}
+ options={radioOptions}
+ />
+ )}
+ name="decision"
+ />
+ </RowItem>
+ </Row>
+ <Row>
+ <RowItem centered>
+ <Button onClick={hideModal}>Cancel</Button>
+ </RowItem>
+ <RowItem centered>
+ <Button disabled={disabled} onClick={onSubmit} primary>
+ Next
+ </Button>
+ </RowItem>
+ </Row>
+ </RootContainer>
+)
+
+export default reduxForm({
+ form: 'recommendation',
+ destroyOnUnmount: false,
+ enableReinitialize: true,
+ forceUnregisterOnUnmount: true,
+})(StepOne)
diff --git a/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js b/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
new file mode 100644
index 000000000..1e04dae16
--- /dev/null
+++ b/packages/components-faraday/src/components/MakeRecommendation/StepTwo.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import { capitalize } from 'lodash'
+import { compose } from 'recompose'
+import { reduxForm } from 'redux-form'
+import { ValidatedField, TextField, Button } from '@pubsweet/ui'
+
+import { RootContainer, FormContainer, Row, RowItem, Label, Title } from './'
+
+const Form = RootContainer.withComponent(FormContainer)
+
+const StepTwo = ({ goBack, decision, handleSubmit }) => (
+ <Form onSubmit={handleSubmit}>
+ <Title>{`Recommandation to ${capitalize(decision)}`}</Title>
+ <Row>
+ <RowItem vertical>
+ <Label>Message for Editor in Chief (optional)</Label>
+ <ValidatedField
+ component={input => <TextField {...input} />}
+ name="eic-message"
+ />
+ </RowItem>
+ </Row>
+ <Row>
+ <RowItem vertical>
+ <Label>Message for Author (optional)</Label>
+ <ValidatedField
+ component={input => <TextField {...input} />}
+ name="author-message"
+ />
+ </RowItem>
+ </Row>
+ <Row>
+ <RowItem centered>
+ <Button onClick={goBack}>Back</Button>
+ </RowItem>
+ <RowItem centered>
+ <Button primary type="submit">
+ Submit
+ </Button>
+ </RowItem>
+ </Row>
+ </Form>
+)
+
+export default compose(
+ reduxForm({
+ form: 'recommendation',
+ destroyOnUnmount: false,
+ forceUnregisterOnUnmount: true,
+ }),
+)(StepTwo)
diff --git a/packages/components-faraday/src/components/MakeRecommendation/index.js b/packages/components-faraday/src/components/MakeRecommendation/index.js
new file mode 100644
index 000000000..a8545992f
--- /dev/null
+++ b/packages/components-faraday/src/components/MakeRecommendation/index.js
@@ -0,0 +1,5 @@
+export * from './FormItems'
+export { default as StepOne } from './StepOne'
+export { default as StepTwo } from './StepTwo'
+export { default as Recommendation } from './Recommendation'
+export { default as RecommendWizard } from './RecommendWizard'
--
GitLab