From 3e533331a722bf55cfd12b5489485d35b50aa8f0 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Thu, 16 Aug 2018 20:46:16 +0300
Subject: [PATCH] feat(visual): finish dashboard page
---
.../component-faraday-ui/src/AuthorTagList.js | 19 +++--
.../src/ManuscriptCard.js | 53 ++++++++-----
.../component-faraday-ui/src/gridItems/Row.js | 10 +--
.../component-faraday-ui/src/styledHelpers.js | 51 ++++++++++++
.../src/components/Dashboard/Dashboard.js | 5 +-
.../components/Dashboard/DashboardItems.js | 78 +++++++++++--------
.../src/components/Dashboard/withVersion.js | 8 +-
packages/xpub-faraday/config/default.js | 2 +-
8 files changed, 155 insertions(+), 71 deletions(-)
create mode 100644 packages/component-faraday-ui/src/styledHelpers.js
diff --git a/packages/component-faraday-ui/src/AuthorTagList.js b/packages/component-faraday-ui/src/AuthorTagList.js
index 283000b2e..20e5a3bf4 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 e1c351f4e..ad07495b2 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 9c805a2da..b7054f976 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 000000000..83022c5b0
--- /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 f38b570b3..fc93b86c5 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 172ad3461..c60d02548 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 a3bddb4ba..485576476 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 c9370cd79..240d9aeb8 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: {
--
GitLab