diff --git a/packages/component-faraday-ui/src/AuthorTagList.js b/packages/component-faraday-ui/src/AuthorTagList.js
index 283000b2ebd028017aa3a21ba75bcdf8ec472dd7..20e5a3bf489d5623676ba60471e1146f275b71bd 100644
--- a/packages/component-faraday-ui/src/AuthorTagList.js
+++ b/packages/component-faraday-ui/src/AuthorTagList.js
@@ -4,16 +4,21 @@ import { th } from '@pubsweet/ui-toolkit'
import AuthorTag from './AuthorTag'
-const AuthorTagList = ({ authors, authorKey = 'email', separator = ',' }) => (
+const AuthorTagList = ({
+ authors = [],
+ separator = ',',
+ authorKey = 'email',
+}) => (
<Root>
{authors
.map(a => <AuthorTag author={a} key={a[authorKey]} />)
- .reduce((prev, curr) => [
- prev,
- separator,
- <span key={curr}> </span>,
- curr,
- ])}
+ .reduce(
+ (prev, curr, index) =>
+ index === 0
+ ? [prev, curr]
+ : [prev, separator, <span key={curr}> </span>, curr],
+ [],
+ )}
</Root>
)
diff --git a/packages/component-faraday-ui/src/ManuscriptCard.js b/packages/component-faraday-ui/src/ManuscriptCard.js
index e1c351f4eb1e0f52038b6c24b6e7f53690f69dd5..ad07495b2a6c65a8cd34b294a627a9894909c201 100644
--- a/packages/component-faraday-ui/src/ManuscriptCard.js
+++ b/packages/component-faraday-ui/src/ManuscriptCard.js
@@ -1,7 +1,9 @@
import React from 'react'
+import { get } from 'lodash'
import { H3, H4 } from '@pubsweet/ui'
import styled from 'styled-components'
-import { th, darken } from '@pubsweet/ui-toolkit'
+import { th } from '@pubsweet/ui-toolkit'
+import { compose, withHandlers, setDisplayName } from 'recompose'
import Tag from './Tag'
import Text from './Text'
@@ -10,27 +12,36 @@ import IconButton from './IconButton'
import AuthorTagList from './AuthorTagList'
const ManuscriptCard = ({
- fragment: { authors = [], metadata: { title, journal, type } },
+ onCardClick,
+ fragment: {
+ authors = [],
+ id: fragmentId,
+ metadata: { title = 'No title', journal = '', type = '' },
+ },
collection: { visibleStatus = 'Draft', handlingEditor, customId },
}) => (
- <Root>
+ <Root data-test-id={`fragment-${fragmentId}`} onClick={onCardClick}>
<MainContainer>
- <Row alignItems="center" justify="space-between">
+ <Row alignItems="center" justify="space-between" mb={1}>
<H3>{title}</H3>
- <Tag status>{visibleStatus}</Tag>
+ <Tag data-test-id="fragment-status" status>
+ {visibleStatus}
+ </Tag>
</Row>
- <Row alignItems="center" justify="flex-start">
- <AuthorTagList authors={authors} />
- </Row>
- <Row alignItems="center" justify="flex-start">
+ {authors && (
+ <Row alignItems="center" justify="flex-start" mb={1}>
+ <AuthorTagList authors={authors} />
+ </Row>
+ )}
+ <Row alignItems="center" justify="flex-start" mb={1}>
<Text customId>{`ID ${customId}`}</Text>
<Text secondary>Submitted on 03.07.2018</Text>
<H4>{type}</H4>
<Text secondary>{journal}</Text>
</Row>
- <Row alignItems="center" justify="flex-start">
+ <Row alignItems="center" justify="flex-start" mb={1}>
<H4>Handling editor</H4>
- <Text>{handlingEditor.name}</Text>
+ <Text>{get(handlingEditor, 'name', 'No HE')}</Text>
<H4>Reviewer Reports</H4>
<Text>0 invited</Text>
</Row>
@@ -41,7 +52,14 @@ const ManuscriptCard = ({
</Root>
)
-export default ManuscriptCard
+export default compose(
+ withHandlers({
+ onCardClick: ({ onClick, collection, fragment }) => () => {
+ onClick(collection, fragment)
+ },
+ }),
+ setDisplayName('ManuscriptCard'),
+)(ManuscriptCard)
// #region styles
const MainContainer = styled.div`
@@ -53,7 +71,9 @@ const MainContainer = styled.div`
padding-bottom: ${th('gridUnit')};
${Row} {
- margin-bottom: ${th('gridUnit')};
+ ${H3} {
+ margin-bottom: 0;
+ }
&:nth-child(3) {
${Text} {
@@ -82,19 +102,16 @@ const SideNavigation = styled.div`
background-color: ${th('colorBackgroundHue')};
border-top-right-radius: ${th('borderRadius')};
border-bottom-right-radius: ${th('borderRadius')};
- cursor: pointer;
display: flex;
width: calc(${th('gridUnit')} * 5 / 2);
-
- &:hover {
- background-color: ${darken('colorBackgroundHue', 0.05)};
- }
`
const Root = styled.div`
border-radius: ${th('borderRadius')};
box-shadow: ${th('boxShadow')};
+ cursor: pointer;
display: flex;
+ margin: ${th('gridUnit')};
&:hover {
box-shadow: ${th('dashboardCard.hoverShadow')};
diff --git a/packages/component-faraday-ui/src/gridItems/Row.js b/packages/component-faraday-ui/src/gridItems/Row.js
index 9c805a2da3e6c94e4804cbfe844aaa69f6437346..b7054f97600cbb95975372eecbe12b5c68970106 100644
--- a/packages/component-faraday-ui/src/gridItems/Row.js
+++ b/packages/component-faraday-ui/src/gridItems/Row.js
@@ -1,6 +1,7 @@
import { get } from 'lodash'
-import { th } from '@pubsweet/ui-toolkit'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
+
+import { marginHelper } from '../styledHelpers'
export default styled.div.attrs({
'data-test-id': props => props['data-test-id'] || 'row',
@@ -10,7 +11,6 @@ export default styled.div.attrs({
display: flex;
flex-direction: row;
justify-content: ${({ justify }) => justify || 'space-evenly'};
- margin: ${({ noMargin }) =>
- noMargin ? 0 : css`calc(${th('subGridUnit')} * 2) 0`};
- width: 100%;
+
+ ${marginHelper};
`
diff --git a/packages/component-faraday-ui/src/styledHelpers.js b/packages/component-faraday-ui/src/styledHelpers.js
new file mode 100644
index 0000000000000000000000000000000000000000..83022c5b0128aa85d7eb9094fa127302c790b5a7
--- /dev/null
+++ b/packages/component-faraday-ui/src/styledHelpers.js
@@ -0,0 +1,51 @@
+import { get } from 'lodash'
+import { css } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+export const marginHelper = props => {
+ const marginTop = css`
+ margin-top: calc(${th('gridUnit')} * ${get(props, 'mt', 0)});
+ `
+
+ const marginRight = css`
+ margin-right: calc(${th('gridUnit')} * ${get(props, 'mr', 0)});
+ `
+
+ const marginBottom = css`
+ margin-bottom: calc(${th('gridUnit')} * ${get(props, 'mb', 0)});
+ `
+ const marginLeft = css`
+ margin-left: calc(${th('gridUnit')} * ${get(props, 'ml', 0)});
+ `
+
+ return css`
+ ${marginTop};
+ ${marginRight};
+ ${marginBottom};
+ ${marginLeft};
+ `
+}
+
+export const paddingHelper = props => {
+ const paddingTop = css`
+ padding-top: calc(${th('gridUnit')} * ${get(props, 'pt', 0)});
+ `
+
+ const paddingRight = css`
+ padding-right: calc(${th('gridUnit')} * ${get(props, 'pr', 0)});
+ `
+
+ const paddingBottom = css`
+ padding-bottom: calc(${th('gridUnit')} * ${get(props, 'pb', 0)});
+ `
+ const paddingLeft = css`
+ padding-left: calc(${th('gridUnit')} * ${get(props, 'pl', 0)});
+ `
+
+ return css`
+ ${paddingTop};
+ ${paddingRight};
+ ${paddingBottom};
+ ${paddingLeft};
+ `
+}
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.js b/packages/components-faraday/src/components/Dashboard/Dashboard.js
index f38b570b376d77dfaf161426a64f26778a103ec1..fc93b86c5919072e7ad5c5b7485fa165318eb00f 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.js
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.js
@@ -1,6 +1,7 @@
import React from 'react'
import styled from 'styled-components'
import { Button, H1 } from '@pubsweet/ui'
+import { th } from '@pubsweet/ui-toolkit'
import { compose, withProps } from 'recompose'
import { Row } from 'pubsweet-component-faraday-ui'
@@ -46,9 +47,7 @@ export default compose(
const Root = styled.div`
display: flex;
flex-direction: column;
- margin: auto;
- max-width: 60em;
- min-height: 50vh;
overflow: auto;
+ padding: 0 calc(${th('gridUnit')} * 17);
`
// #endregion
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardItems.js b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
index 172ad34619239249c2ab126a0ad550f27f149dc9..c60d02548eeddeb9c750e46a2780a471aa901ba3 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardItems.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
@@ -1,41 +1,51 @@
-import React from 'react'
-import styled from 'styled-components'
+import React, { Fragment } from 'react'
+import { H3 } from '@pubsweet/ui'
+import { get, has } from 'lodash'
+import { withRouter } from 'react-router-dom'
+import { ManuscriptCard, Row } from 'pubsweet-component-faraday-ui'
+import { compose, setDisplayName, withHandlers, withProps } from 'recompose'
-import Item from './DashboardCard'
import withVersion from './withVersion'
-const DashboardItem = withVersion(Item)
+const DashboardItem = withVersion(ManuscriptCard)
-const DashboardItems = ({ list, deleteProject, listView = true }) => (
- <div>
- {!list.length && (
- <Empty>Nothing to do at the moment. Please upload a manuscript.</Empty>
+const DashboardItems = ({ onClick, list, deleteProject, listView = true }) => (
+ <Fragment>
+ {!list.length ? (
+ <Row justify="center" mt={4}>
+ <H3>Nothing to do at the moment. Please upload a manuscript.</H3>
+ </Row>
+ ) : (
+ list.map(p => (
+ <DashboardItem collection={p} key={p.id} onClick={onClick} />
+ ))
)}
-
- {!!list.length && (
- <Section>
- {list.map(p => (
- <DashboardItem
- deleteProject={deleteProject}
- key={p.id}
- listView={listView}
- project={p}
- />
- ))}
- </Section>
- )}
- </div>
+ </Fragment>
)
-export default DashboardItems
-
-// #region styles
-const Empty = styled.div`
- display: flex;
- justify-content: center;
-`
-
-const Section = styled.div`
- margin: 0.5em 0;
-`
-// #endregion
+export default compose(
+ withRouter,
+ withProps(({ collection, fragment }) => ({
+ hasDetails: get(collection, 'status', 'draft') !== 'draft',
+ isNotSubmitted:
+ get(collection, 'status', 'draft') === 'draft' ||
+ !has(fragment, 'submitted'),
+ })),
+ withHandlers({
+ onClick: ({ history, hasDetails, isNotSubmitted }) => (
+ collection,
+ fragment,
+ ) => {
+ if (isNotSubmitted) {
+ history.push(
+ `/projects/${collection.id}/versions/${fragment.id}/submit`,
+ )
+ } else if (hasDetails) {
+ history.push(
+ `/projects/${collection.id}/versions/${fragment.id}/details`,
+ )
+ }
+ },
+ }),
+ setDisplayName('DashboardItems'),
+)(DashboardItems)
diff --git a/packages/components-faraday/src/components/Dashboard/withVersion.js b/packages/components-faraday/src/components/Dashboard/withVersion.js
index a3bddb4ba10d4ef2e4605ee949600bbf3875a050..485576476625e8111a365b26b316bc0c9e65cfbf 100644
--- a/packages/components-faraday/src/components/Dashboard/withVersion.js
+++ b/packages/components-faraday/src/components/Dashboard/withVersion.js
@@ -6,8 +6,10 @@ import { selectCurrentVersion } from 'xpub-selectors'
export default Component =>
compose(
- ConnectPage(({ project }) => [actions.getFragments({ id: project.id })]),
- connect((state, { project }) => ({
- version: selectCurrentVersion(state, project),
+ ConnectPage(({ collection }) => [
+ actions.getFragments({ id: collection.id }),
+ ]),
+ connect((state, { collection }) => ({
+ fragment: selectCurrentVersion(state, collection),
})),
)(Component)
diff --git a/packages/xpub-faraday/config/default.js b/packages/xpub-faraday/config/default.js
index c9370cd7940d906ecb4d36896fd730b1440f4e6c..240d9aeb815ce076fea4b5ed7a6b214a4e8156a1 100644
--- a/packages/xpub-faraday/config/default.js
+++ b/packages/xpub-faraday/config/default.js
@@ -46,7 +46,7 @@ module.exports = {
API_ENDPOINT: '/api',
baseUrl: process.env.CLIENT_BASE_URL || 'http://localhost:3000',
'login-redirect': '/',
- 'redux-log': process.env.NODE_ENV !== 'production',
+ 'redux-log': false, // process.env.NODE_ENV !== 'production',
theme: process.env.PUBSWEET_THEME,
},
orcid: {