From 7cd8001f84c54561455d6490df21b6df9e04cb01 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munteanu@thinslices.com>
Date: Mon, 22 Jan 2018 11:28:11 +0200
Subject: [PATCH] Improve adding authors
---
.../src/components/AuthorList.js | 93 ++++++++++++-------
.../src/components/AuthorList.local.scss | 14 ++-
.../src/components/WizardStep.js | 2 +
3 files changed, 75 insertions(+), 34 deletions(-)
diff --git a/packages/component-wizard/src/components/AuthorList.js b/packages/component-wizard/src/components/AuthorList.js
index 9c0f19d8b..3c557a2a4 100644
--- a/packages/component-wizard/src/components/AuthorList.js
+++ b/packages/component-wizard/src/components/AuthorList.js
@@ -14,6 +14,7 @@ import {
withProps,
getContext,
lifecycle,
+ withState,
} from 'recompose'
import { TextField, Menu, Icon, ValidatedField, Button } from '@pubsweet/ui'
@@ -70,38 +71,52 @@ const DragHandle = () => (
</div>
)
-const AuthorAdder = ({ authors, handleSubmit }) => (
+const AuthorAdder = ({ authors, editMode, setEditMode, handleSubmit }) => (
<div className={classnames(classes.adder)}>
- <Button onClick={handleSubmit} primary>
+ <Button onClick={setEditMode(true)} primary>
{authors.length === 0 ? '+ Add submitting author' : '+ Add author'}
</Button>
- <span className={classnames(classes.title)}>
- {authors.length === 0 ? 'Submitting author' : 'Author'}
- </span>
- <div className={classnames(classes.row)}>
- <ValidatedTextField
- isRequired
- label="First name"
- name="author.firstName"
- />
- <ValidatedTextField label="Middle name" name="author.middleName" />
- <ValidatedTextField isRequired label="Last name" name="author.lastName" />
- </div>
+ {editMode && (
+ <div className={classnames(classes['form-body'])}>
+ <span className={classnames(classes.title)}>
+ {authors.length === 0 ? 'Submitting author' : 'Author'}
+ </span>
+ <div className={classnames(classes.row)}>
+ <ValidatedTextField
+ isRequired
+ label="First name"
+ name="author.firstName"
+ />
+ <ValidatedTextField label="Middle name" name="author.middleName" />
+ <ValidatedTextField
+ isRequired
+ label="Last name"
+ name="author.lastName"
+ />
+ </div>
- <div className={classnames(classes.row)}>
- <ValidatedTextField
- isRequired
- label="Email"
- name="author.email"
- validators={[emailValidator]}
- />
- <ValidatedTextField
- isRequired
- label="Affiliation"
- name="author.affiliation"
- />
- <MenuItem label="Country" name="author.country" options={countries} />
- </div>
+ <div className={classnames(classes.row)}>
+ <ValidatedTextField
+ isRequired
+ label="Email"
+ name="author.email"
+ validators={[emailValidator]}
+ />
+ <ValidatedTextField
+ isRequired
+ label="Affiliation"
+ name="author.affiliation"
+ />
+ <MenuItem label="Country" name="author.country" options={countries} />
+ </div>
+ <div className={classnames(classes['form-buttons'])}>
+ <Button onClick={setEditMode(false)}>Cancel</Button>
+ <Button onClick={handleSubmit} primary>
+ Save
+ </Button>
+ </div>
+ </div>
+ )}
</div>
)
@@ -124,7 +139,11 @@ const Adder = compose(
}),
reduxForm({
form: 'author',
- onSubmit: (values, dispatch, { authors, addAuthor, reset, match }) => {
+ onSubmit: (
+ values,
+ dispatch,
+ { authors, addAuthor, setEditMode, reset, match },
+ ) => {
const collectionId = get(match, 'params.project')
const fragmentId = get(match, 'params.version')
const isFirstAuthor = authors.length === 0
@@ -136,7 +155,10 @@ const Adder = compose(
},
collectionId,
fragmentId,
- ).then(reset)
+ ).then(() => {
+ reset()
+ setEditMode(false)()
+ })
},
}),
)(AuthorAdder)
@@ -207,7 +229,6 @@ const Author = ({
)
const Authors = ({
- author,
authors,
moveAuthor,
addAuthor,
@@ -215,15 +236,18 @@ const Authors = ({
match,
version,
dropItem,
+ editMode,
+ setEditMode,
...rest
}) => (
<div>
<Adder
addAuthor={addAuthor}
- author={author}
authors={authors}
editAuthor={editAuthor}
+ editMode={editMode}
match={match}
+ setEditMode={setEditMode}
/>
<SortableList
dragHandle={DragHandle}
@@ -255,7 +279,12 @@ export default compose(
setAuthors(version.authors, version.id)
},
}),
+ withState('editMode', 'setEditMode', false),
withHandlers({
+ setEditMode: ({ setEditMode }) => mode => e => {
+ e && e.preventDefault()
+ setEditMode(v => mode)
+ },
dropItem: ({ updateFragment, authors, project, version }) =>
debounce(() => {
updateFragment(project, {
diff --git a/packages/component-wizard/src/components/AuthorList.local.scss b/packages/component-wizard/src/components/AuthorList.local.scss
index ea18aada1..cb4905b40 100644
--- a/packages/component-wizard/src/components/AuthorList.local.scss
+++ b/packages/component-wizard/src/components/AuthorList.local.scss
@@ -49,11 +49,21 @@
}
.adder {
- border: 1px solid #444;
display: flex;
flex-direction: column;
margin: 10px 0;
- padding: 10px;
+
+ .form-body {
+ border: 1px solid #444;
+ margin-top: 10px;
+ padding: 10px;
+ }
+
+ .form-buttons {
+ display: flex;
+ justify-content: space-around;
+ margin: 15px 0 0 0;
+ }
.button {
background-color: #444;
diff --git a/packages/component-wizard/src/components/WizardStep.js b/packages/component-wizard/src/components/WizardStep.js
index afd2ba1fe..9e30dbc9c 100644
--- a/packages/component-wizard/src/components/WizardStep.js
+++ b/packages/component-wizard/src/components/WizardStep.js
@@ -4,6 +4,7 @@ import classnames from 'classnames'
import { ValidatedField, Button } from '@pubsweet/ui'
import classes from './WizardStep.local.scss'
+import AuthorList from './AuthorList'
export default ({
children: stepChildren,
@@ -58,6 +59,7 @@ export default ({
)
},
)}
+ <AuthorList />
<div className={classnames(classes.buttons)}>
<Button onClick={isFirst ? () => history.push('/') : prevStep}>
{isFirst
--
GitLab