Display info on dashboard

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;
+}

packages/components-faraday/src/components/Dashboard/DashboardCard.js

 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>

packages/components-faraday/src/components/Dashboard/utils.js

-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'),
+})