From e3fba9a5383ee0799a97faf588b5b821553d3f13 Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Fri, 9 Feb 2018 16:39:45 +0200
Subject: [PATCH] WIP: Add temporary view abstract
---
.../src/components/Dashboard/Dashboard.js | 15 ++++++++-
.../components/Dashboard/Dashboard.local.scss | 33 +++++++++++++++++++
.../src/components/Dashboard/DashboardCard.js | 16 +++++++--
.../src/components/Dashboard/DashboardPage.js | 17 +++++++++-
4 files changed, 77 insertions(+), 4 deletions(-)
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.js b/packages/components-faraday/src/components/Dashboard/Dashboard.js
index 36429611c..29ba564fd 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.js
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { get } from 'lodash'
+import { get, isEmpty } from 'lodash'
import { Button } from '@pubsweet/ui'
import { connect } from 'react-redux'
import { compose, withHandlers } from 'recompose'
@@ -21,6 +21,8 @@ const Dashboard = ({
changeFilterValue,
filterValues,
filterItems,
+ abstractModal,
+ setModal,
...rest
}) => (
<div className={classes.root}>
@@ -41,6 +43,17 @@ const Dashboard = ({
list={getItems()}
listView={listView}
/>
+ {!isEmpty(abstractModal) && (
+ <div className={classes.modal}>
+ <div className={classes.modalContent}>
+ <div
+ className={classes.modalText}
+ dangerouslySetInnerHTML={{ __html: abstractModal }} // eslint-disable-line
+ />
+ <Button onClick={setModal()}>Close</Button>
+ </div>
+ </div>
+ )}
</div>
)
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss b/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
index c4b717e21..5a2dc6819 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
@@ -150,3 +150,36 @@
.version {
margin-left: 1em;
}
+
+.modal {
+ align-items: center;
+ background: rgba(255, 255, 255, 0.95);
+ bottom: 0;
+ display: flex;
+ justify-content: center;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+}
+
+.modalContent {
+ border: 1px solid var(--color-primary);
+ height: 50vw;
+ margin: 0 auto;
+ padding: 20px;
+ position: relative;
+ width: 50vw;
+
+ .modalText {
+ height: calc(100% - 60px);
+ overflow-y: scroll;
+ padding-right: 10px;
+ }
+
+ button {
+ bottom: 20px;
+ position: absolute;
+ right: 20px;
+ }
+}
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
index 792a4113b..970ce57a3 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -1,7 +1,9 @@
import React from 'react'
+import PropTypes from 'prop-types'
import { get, isEmpty } from 'lodash'
import classnames from 'classnames'
import { Button, Icon } from '@pubsweet/ui'
+import { compose, getContext } from 'recompose'
import { parseVersion, getFilesURL, downloadAll } from './utils'
import classes from './Dashboard.local.scss'
@@ -12,6 +14,7 @@ const DashboardCard = ({
listView,
project,
version,
+ setModal,
}) => {
const { submitted, author, title, type, version: vers } = parseVersion(
version,
@@ -19,6 +22,7 @@ const DashboardCard = ({
const files = getFilesURL(get(version, 'files'))
const status = get(project, 'status') || 'Draft'
const hasFiles = !isEmpty(files)
+ const abstract = get(version, 'metadata.abstract')
return (
<div className={classes.card}>
@@ -68,7 +72,11 @@ const DashboardCard = ({
</div>
<div className={classes.column2}>
<div>{author}</div>
- <a>View</a>
+ {abstract && (
+ <a href="#" onClick={setModal(abstract)}>
+ view
+ </a>
+ )}
</div>
</div>
<div className={classes.column3}>
@@ -103,4 +111,8 @@ const DashboardCard = ({
)
}
-export default DashboardCard
+export default compose(
+ getContext({
+ setModal: PropTypes.func,
+ }),
+)(DashboardCard)
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardPage.js b/packages/components-faraday/src/components/Dashboard/DashboardPage.js
index 3006b1890..36a4a7adf 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardPage.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardPage.js
@@ -1,9 +1,10 @@
import { get } from 'lodash'
+import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { actions } from 'pubsweet-client'
import { ConnectPage } from 'xpub-connect'
import { withRouter } from 'react-router-dom'
-import { compose, withState, withHandlers } from 'recompose'
+import { compose, withState, withHandlers, withContext } from 'recompose'
import { newestFirst, selectCurrentUser } from 'xpub-selectors'
import { createDraftSubmission } from 'pubsweet-component-wizard/src/redux/conversion'
@@ -18,8 +19,12 @@ export default compose(
actions.getUsers(),
]),
withState('listView', 'changeView', true),
+ withState('abstractModal', 'setAbstractModal', ''),
withHandlers({
changeViewMode: ({ changeView }) => () => changeView(listView => !listView),
+ setModal: ({ setAbstractModal }) => abstract => () => {
+ setAbstractModal(abstract)
+ },
}),
connect(
state => {
@@ -88,4 +93,14 @@ export default compose(
},
},
}),
+ withContext(
+ {
+ abstractModal: PropTypes.string,
+ setModal: PropTypes.func,
+ },
+ ({ abstractModal, setModal }) => ({
+ abstractModal,
+ setModal,
+ }),
+ ),
)(Dashboard)
--
GitLab