From 75e587f194a1f742866a1aa9d0757074910d25e1 Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Tue, 30 Jan 2018 18:11:17 +0200
Subject: [PATCH] WIP: Dashboard
---
.../src/components/Dashboard/Dashboard.js | 28 +++++
.../components/Dashboard/Dashboard.local.scss | 103 ++++++++++++++++++
.../src/components/Dashboard/DashboardCard.js | 74 +++++++++++++
.../components/Dashboard/DashboardFilters.js | 23 ++++
.../components/Dashboard/DashboardItems.js | 28 +++++
.../src/components/Dashboard/DashboardPage.js | 53 +++++++++
.../src/components/Dashboard/index.js | 3 +
.../src/components/Dashboard/withVersion.js | 13 +++
packages/xpub-faraday/app/routes.js | 3 +-
9 files changed, 327 insertions(+), 1 deletion(-)
create mode 100644 packages/components-faraday/src/components/Dashboard/Dashboard.js
create mode 100644 packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
create mode 100644 packages/components-faraday/src/components/Dashboard/DashboardCard.js
create mode 100644 packages/components-faraday/src/components/Dashboard/DashboardFilters.js
create mode 100644 packages/components-faraday/src/components/Dashboard/DashboardItems.js
create mode 100644 packages/components-faraday/src/components/Dashboard/DashboardPage.js
create mode 100644 packages/components-faraday/src/components/Dashboard/index.js
create mode 100644 packages/components-faraday/src/components/Dashboard/withVersion.js
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.js b/packages/components-faraday/src/components/Dashboard/Dashboard.js
new file mode 100644
index 000000000..df0a9d18e
--- /dev/null
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import { Button } from '@pubsweet/ui'
+
+import classes from './Dashboard.local.scss'
+import DashboardItems from './DashboardItems'
+import DashboardFilters from './DashboardFilters'
+
+const Dashboard = ({
+ currentUser,
+ dashboard,
+ listView,
+ changeViewMode,
+ deleteProject,
+ createDraftSubmission,
+}) => (
+ <div className={classes.root}>
+ <div className={classes.header}>
+ <div className={classes.heading}>Manuscripts</div>
+ <Button onClick={createDraftSubmission} primary>
+ New
+ </Button>
+ </div>
+ <DashboardFilters changeView={changeViewMode} listView={listView} />
+ <DashboardItems dashboard={dashboard} listView={listView} />
+ </div>
+)
+
+export default Dashboard
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss b/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
new file mode 100644
index 000000000..0335395bc
--- /dev/null
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
@@ -0,0 +1,103 @@
+.root {
+ display: flex;
+ flex-direction: column;
+ margin: auto;
+ max-width: 60em;
+}
+
+.filtersContainer {
+ border-bottom: 1px solid var(--color-primary);
+ color: var(--color-primary);
+ display: flex;
+ justify-content: space-between;
+ margin: 1em 0;
+ padding-bottom: 1em;
+}
+
+.filters {
+ > span {
+ border: 1px solid gray;
+ margin: 0 0.5em;
+ padding: 0 5px;
+ }
+}
+
+.section {
+ margin: 0.5em 0;
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+}
+
+.heading {
+ color: var(--color-primary);
+ font-size: 1.6em;
+ text-transform: uppercase;
+}
+
+.empty {
+ display: flex;
+ justify-content: center;
+}
+
+.card {
+ align-items: center;
+ border: 1px solid var(--color-primary);
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0.5em 0;
+ padding: 0.5em;
+
+ .leftSide {
+ flex: 1 0 80%;
+ flex-direction: column;
+
+ .quickInfo {
+ display: flex;
+ flex-direction: row;
+ }
+ }
+
+ .rightSide {
+ align-items: center;
+ border-left: 1px solid var(--color-primary);
+ display: flex;
+ flex: 1 0 15%;
+ justify-content: space-around;
+ padding: 0 0.5em;
+
+ span {
+ cursor: pointer;
+ }
+ }
+}
+
+.expandedView {
+ border-top: 1px solid var(--color-primary);
+ display: flex;
+ flex: 0 1 100%;
+ padding: 0.5em 0;
+}
+
+.column3 {
+ display: flex;
+ flex: 1 0 30%;
+ flex-direction: row;
+}
+
+.column2 {
+ margin: 0.5em;
+
+ > div {
+ margin: 0.5em 0;
+ }
+}
+
+.status {
+ border: 1px solid var(--color-primary);
+ margin: 0.5em 0;
+ padding: 0.2em 0.5em;
+ text-transform: uppercase;
+}
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
new file mode 100644
index 000000000..fc38cf412
--- /dev/null
+++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js
@@ -0,0 +1,74 @@
+import React from 'react'
+import { get, find } from 'lodash'
+import moment from 'moment'
+import { Icon } from '@pubsweet/ui'
+
+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 abstract = get(version, 'metadata.abstract')
+ const type = get(version, 'metadata.type')
+
+ return (
+ <div className={classes.card}>
+ <div className={classes.leftSide}>
+ <div className={classes.title}>
+ {get(version, 'metadata.title') || 'Untitled'}
+ </div>
+ <div className={classes.quickInfo}>
+ <div className={classes.status}>
+ {get(project, 'status') || 'Draft'}
+ </div>
+ </div>
+ </div>
+ <div className={classes.rightSide}>
+ <Icon>download</Icon>
+ <a href={`/projects/${project.id}/versions/${version.id}/manuscript`}>
+ Details
+ </a>
+ </div>
+ {!listView && (
+ <div className={classes.expandedView}>
+ <div className={classes.column3}>
+ <div className={classes.column2}>
+ <div>Submission author</div>
+ <div>Abstract</div>
+ </div>
+ <div className={classes.column2}>
+ <div>{author ? author.firstName : 'N/A'}</div>
+ <a>View</a>
+ </div>
+ </div>
+ <div className={classes.column3}>
+ <div className={classes.column2}>
+ <div>Submitted On</div>
+ <div>Type</div>
+ </div>
+ <div className={classes.column2}>
+ <div>
+ {submitted ? moment(submitted).format('DD-MM-YYYY') : 'N/A'}
+ </div>
+ <div>
+ <span className={classes.status}>{type || 'N/A'}</span>
+ </div>
+ </div>
+ </div>
+ <div className={classes.column3}>
+ <div className={classes.column2}>
+ <div>Handling Editor</div>
+ <div>Reviewers</div>
+ </div>
+ <div className={classes.column2}>
+ <div>Invite</div>
+ <div>Invite</div>
+ </div>
+ </div>
+ </div>
+ )}
+ </div>
+ )
+}
+
+export default DashboardCard
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
new file mode 100644
index 000000000..47a3cc2c5
--- /dev/null
+++ b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import classes from './Dashboard.local.scss'
+
+const DashboardFilters = ({
+ view,
+ status,
+ createdAt,
+ changeView,
+ listView,
+}) => (
+ <div className={classes.filtersContainer}>
+ <div className={classes.filters}>
+ Filter view:
+ <span> My work </span>
+ <span> Type </span>
+ <span> Status </span>
+ <span> Newest on top </span>
+ </div>
+ <div onClick={changeView}>View: {listView ? 'List' : 'Card'} </div>
+ </div>
+)
+
+export default DashboardFilters
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardItems.js b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
new file mode 100644
index 000000000..d21e82460
--- /dev/null
+++ b/packages/components-faraday/src/components/Dashboard/DashboardItems.js
@@ -0,0 +1,28 @@
+import React from 'react'
+
+import Item from './DashboardCard'
+import withVersion from './withVersion'
+import classes from './Dashboard.local.scss'
+
+const DashboardItem = withVersion(Item)
+
+const DashboardItems = ({ dashboard, listView = true }) => (
+ <div>
+ {!dashboard.owner.length &&
+ !dashboard.reviewer.length && (
+ <div className={classes.empty}>
+ Nothing to do at the moment. Please upload a manuscript.
+ </div>
+ )}
+
+ {!!dashboard.owner.length && (
+ <div className={classes.section}>
+ {dashboard.owner.map(p => (
+ <DashboardItem key={p.id} listView={listView} project={p} />
+ ))}
+ </div>
+ )}
+ </div>
+)
+
+export default DashboardItems
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardPage.js b/packages/components-faraday/src/components/Dashboard/DashboardPage.js
new file mode 100644
index 000000000..6915c5760
--- /dev/null
+++ b/packages/components-faraday/src/components/Dashboard/DashboardPage.js
@@ -0,0 +1,53 @@
+import { compose, withState, withHandlers } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { actions } from 'pubsweet-client'
+import { newestFirst, selectCurrentUser } from 'xpub-selectors'
+import { ConnectPage } from 'xpub-connect'
+import { createDraftSubmission } from 'pubsweet-component-wizard/src/redux/conversion'
+
+import Dashboard from './Dashboard'
+
+export default compose(
+ ConnectPage(() => [
+ actions.getCollections(),
+ actions.getTeams(),
+ actions.getUsers(),
+ ]),
+ withState('listView', 'changeView', false),
+ withHandlers({
+ changeViewMode: ({ changeView }) => () => changeView(listView => !listView),
+ }),
+ connect(
+ state => {
+ const { collections } = state
+ const { conversion } = state
+ const currentUser = selectCurrentUser(state)
+
+ const sortedCollections = newestFirst(collections)
+
+ const dashboard = {
+ owner: sortedCollections.filter(
+ collection =>
+ collection.owners &&
+ collection.owners.some(owner => owner.id === currentUser.id),
+ ),
+ reviewer: sortedCollections.filter(
+ collection =>
+ collection.reviewers &&
+ collection.reviewers.some(
+ reviewer => reviewer && reviewer.user === currentUser.id,
+ ),
+ ),
+ }
+
+ return { collections, conversion, currentUser, dashboard }
+ },
+ (dispatch, { history }) => ({
+ deleteProject: collection =>
+ dispatch(actions.deleteCollection(collection)),
+ createDraftSubmission: () => dispatch(createDraftSubmission(history)),
+ }),
+ ),
+ withRouter,
+)(Dashboard)
diff --git a/packages/components-faraday/src/components/Dashboard/index.js b/packages/components-faraday/src/components/Dashboard/index.js
new file mode 100644
index 000000000..3bd85297d
--- /dev/null
+++ b/packages/components-faraday/src/components/Dashboard/index.js
@@ -0,0 +1,3 @@
+import DashboardPage from './DashboardPage'
+
+export default DashboardPage
diff --git a/packages/components-faraday/src/components/Dashboard/withVersion.js b/packages/components-faraday/src/components/Dashboard/withVersion.js
new file mode 100644
index 000000000..a3bddb4ba
--- /dev/null
+++ b/packages/components-faraday/src/components/Dashboard/withVersion.js
@@ -0,0 +1,13 @@
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { actions } from 'pubsweet-client'
+import { ConnectPage } from 'xpub-connect'
+import { selectCurrentVersion } from 'xpub-selectors'
+
+export default Component =>
+ compose(
+ ConnectPage(({ project }) => [actions.getFragments({ id: project.id })]),
+ connect((state, { project }) => ({
+ version: selectCurrentVersion(state, project),
+ })),
+ )(Component)
diff --git a/packages/xpub-faraday/app/routes.js b/packages/xpub-faraday/app/routes.js
index 36a635a46..c9d5449e9 100644
--- a/packages/xpub-faraday/app/routes.js
+++ b/packages/xpub-faraday/app/routes.js
@@ -10,7 +10,8 @@ import {
LogoutPage,
} from 'pubsweet-component-xpub-authentication/src/components'
-import DashboardPage from 'pubsweet-component-xpub-dashboard/src/components/DashboardPage'
+// import DashboardPage from 'pubsweet-component-xpub-dashboard/src/components/DashboardPage'
+import DashboardPage from 'pubsweet-components-faraday/src/components/Dashboard'
import WizardPage from 'pubsweet-component-wizard/src/components/WizardPage'
import ManuscriptPage from 'pubsweet-component-xpub-manuscript/src/components/ManuscriptPage'
import ConfirmationPage from 'pubsweet-components-faraday/src/components/UIComponents/ConfirmationPage'
--
GitLab