From bb996763091e029dea122b46844358955a95069f Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Wed, 31 Jan 2018 14:11:52 +0200
Subject: [PATCH] Display info on dashboard
---
.../components/Dashboard/Dashboard.local.scss | 32 ++++++++--
.../src/components/Dashboard/DashboardCard.js | 53 ++++++++++-------
.../src/components/Dashboard/utils.js | 59 ++++++++++++++++++-
3 files changed, 118 insertions(+), 26 deletions(-)
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss b/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
index 0335395bc..553b4a452 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
@@ -55,6 +55,7 @@
flex-direction: column;
.quickInfo {
+ align-items: center;
display: flex;
flex-direction: row;
}
@@ -67,10 +68,6 @@
flex: 1 0 15%;
justify-content: space-around;
padding: 0 0.5em;
-
- span {
- cursor: pointer;
- }
}
}
@@ -88,9 +85,13 @@
}
.column2 {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
margin: 0.5em;
- > div {
+ > div,
+ > a {
margin: 0.5em 0;
}
}
@@ -101,3 +102,24 @@
padding: 0.2em 0.5em;
text-transform: uppercase;
}
+
+.button {
+ margin: 0.3em 0.5em;
+ padding: 0 0.5em;
+}
+
+.pointer {
+ cursor: pointer;
+}
+
+.disabled {
+ cursor: not-allowed;
+
+ svg {
+ stroke: gray;
+ }
+}
+
+.version {
+ margin-left: 1em;
+}
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index b68557636..b04385aa3 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -1,17 +1,18 @@
import React from 'react'
-import { get, find } from 'lodash'
-import moment from 'moment'
-import { Icon } from '@pubsweet/ui'
+import { get, isEmpty } from 'lodash'
+import classnames from 'classnames'
+import { Button, Icon } from '@pubsweet/ui'
-import { parseTitle } from './utils'
+import { parseVersion, getFilesURL, downloadAll } from './utils'
import classes from './Dashboard.local.scss'
const DashboardCard = ({ project, listView, version }) => {
- const author = find(get(version, 'authors'), a => a.isSubmitting)
- const submitted = get(version, 'submitted')
- const title = parseTitle(version)
- // const abstract = get(version, 'metadata.abstract')
- const type = get(version, 'metadata.type')
+ const { submitted, author, title, type, version: vers } = parseVersion(
+ version,
+ )
+ const files = getFilesURL(get(version, 'files'))
+ const status = get(project, 'status') || 'Draft'
+ const hasFiles = !isEmpty(files)
return (
<div className={classes.card}>
@@ -22,13 +23,23 @@ const DashboardCard = ({ project, listView, version }) => {
/>
<div className={classes.quickInfo}>
- <div className={classes.status}>
- {get(project, 'status') || 'Draft'}
- </div>
+ <div className={classes.status}>{status}</div>
+ <div className={classes.version}>{`v${vers} ${
+ submitted ? `- updated on ${submitted}` : ''
+ }`}</div>
</div>
</div>
<div className={classes.rightSide}>
- <Icon>download</Icon>
+ <div
+ className={classnames({
+ [classes.disabled]: !hasFiles,
+ [classes.pointer]: true,
+ })}
+ onClick={() => (hasFiles ? downloadAll(files) : null)}
+ >
+ <Icon>download</Icon>
+ </div>
+
<a href={`/projects/${project.id}/versions/${version.id}/submit`}>
Details
</a>
@@ -41,7 +52,7 @@ const DashboardCard = ({ project, listView, version }) => {
<div>Abstract</div>
</div>
<div className={classes.column2}>
- <div>{author ? author.firstName : 'N/A'}</div>
+ <div>{author}</div>
<a>View</a>
</div>
</div>
@@ -51,11 +62,9 @@ const DashboardCard = ({ project, listView, version }) => {
<div>Type</div>
</div>
<div className={classes.column2}>
+ <div>{submitted}</div>
<div>
- {submitted ? moment(submitted).format('DD-MM-YYYY') : 'N/A'}
- </div>
- <div>
- <span className={classes.status}>{type || 'N/A'}</span>
+ <span className={classes.status}>{type}</span>
</div>
</div>
</div>
@@ -65,8 +74,12 @@ const DashboardCard = ({ project, listView, version }) => {
<div>Reviewers</div>
</div>
<div className={classes.column2}>
- <div>Invite</div>
- <div>Invite</div>
+ <Button className={classes.button} primary>
+ Invite
+ </Button>
+ <Button className={classes.button} primary>
+ Invite
+ </Button>
</div>
</div>
</div>
diff --git a/packages/components-faraday/src/components/Dashboard/utils.js b/packages/components-faraday/src/components/Dashboard/utils.js
index f098c7680..50d39d73b 100644
--- a/packages/components-faraday/src/components/Dashboard/utils.js
+++ b/packages/components-faraday/src/components/Dashboard/utils.js
@@ -1,4 +1,5 @@
-import { get } from 'lodash'
+import { get, isEmpty, forEach, isArray, find } from 'lodash'
+import moment from 'moment'
export const parseTitle = version => {
const title = get(version, 'metadata.title')
@@ -7,3 +8,59 @@ export const parseTitle = version => {
}
return 'Untitled'
}
+
+export const getFilesURL = files => {
+ const urls = []
+
+ forEach(files, value => {
+ if (!isEmpty(value)) {
+ if (isArray(value)) {
+ value.forEach(v => {
+ urls.push(v)
+ })
+ } else {
+ urls.push(value)
+ }
+ }
+ })
+
+ return urls
+}
+
+export const downloadAll = urls => {
+ const link = document.createElement('a')
+ link.style.display = 'none'
+
+ document.body.appendChild(link)
+
+ urls.forEach(u => {
+ link.setAttribute('download', u.name)
+ link.setAttribute('href', u.signedUrl || u.url)
+ link.click()
+ })
+ document.body.removeChild(link)
+}
+
+export const parseAuthor = version => {
+ const author = find(get(version, 'authors'), a => a.isSubmitting)
+ return author ? `${author.firstName} ${author.lastName}` : 'N/A'
+}
+
+export const parseType = version => {
+ const type = get(version, 'metadata.type')
+ return type ? type.replace('-', ' ') : 'N/A'
+}
+
+export const parseSubmissionDate = version => {
+ const submitted = get(version, 'submitted')
+ return submitted ? moment(submitted).format('DD-MM-YYYY') : 'N/A'
+}
+
+export const parseVersion = version => ({
+ author: parseAuthor(version),
+ title: parseTitle(version),
+ submitted: parseSubmissionDate(version),
+ type: parseType(version),
+ abstract: get(version, 'metadata.abstract'),
+ version: get(version, 'version'),
+})
--
GitLab