From bf48d0930bcf12459b74a4bfe55987792bf13ded Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Thu, 26 Apr 2018 14:12:14 +0300
Subject: [PATCH] feat(details): add version dropdown
---
.../src/components/ManuscriptLayout.js | 18 +++++++++----
.../src/components/ManuscriptVersion.js | 27 +++++++++++++++++++
.../src/components/utils.js | 8 ++++++
3 files changed, 48 insertions(+), 5 deletions(-)
create mode 100644 packages/component-manuscript/src/components/ManuscriptVersion.js
diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js
index ae4ea0de6..e0bf2d391 100644
--- a/packages/component-manuscript/src/components/ManuscriptLayout.js
+++ b/packages/component-manuscript/src/components/ManuscriptLayout.js
@@ -1,6 +1,7 @@
import React from 'react'
import ManuscriptHeader from './ManuscriptHeader'
+import ManuscriptVersion from './ManuscriptVersion'
import {
Root,
BreadCrumbs,
@@ -8,6 +9,8 @@ import {
ManuscriptId,
Container,
SideBar,
+ LeftDetails,
+ RightDetails,
} from '../atoms'
const ManuscriptLayout = ({
@@ -20,11 +23,16 @@ const ManuscriptLayout = ({
<Root>
<Container flex={3}>
<Header>
- <BreadCrumbs>
- <span>Dashboard</span>
- <span>Manuscript Details</span>
- </BreadCrumbs>
- <ManuscriptId>{`- ID ${project.customId}`}</ManuscriptId>
+ <LeftDetails>
+ <BreadCrumbs>
+ <span>Dashboard</span>
+ <span>Manuscript Details</span>
+ </BreadCrumbs>
+ <ManuscriptId>{`- ID ${project.customId}`}</ManuscriptId>
+ </LeftDetails>
+ <RightDetails>
+ <ManuscriptVersion project={project} />
+ </RightDetails>
</Header>
<ManuscriptHeader journal={journal} project={project} version={version} />
</Container>
diff --git a/packages/component-manuscript/src/components/ManuscriptVersion.js b/packages/component-manuscript/src/components/ManuscriptVersion.js
new file mode 100644
index 000000000..ddad835f7
--- /dev/null
+++ b/packages/component-manuscript/src/components/ManuscriptVersion.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { get } from 'lodash'
+import { Menu } from '@pubsweet/ui'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { selectFragments } from 'xpub-selectors'
+import { withRouter } from 'react-router-dom'
+
+import { parseVersionOptions } from './utils'
+
+const ManuscriptVersion = ({ project, fragments, history, match }) => (
+ <Menu
+ inline
+ onChange={v =>
+ history.push(`/projects/${project.id}/versions/${v}/details`)
+ }
+ options={parseVersionOptions(fragments)}
+ value={get(match, 'params.version')}
+ />
+)
+
+export default compose(
+ withRouter,
+ connect((state, { project }) => ({
+ fragments: selectFragments(state, project.fragments),
+ })),
+)(ManuscriptVersion)
diff --git a/packages/component-manuscript/src/components/utils.js b/packages/component-manuscript/src/components/utils.js
index aa176d4c0..0fb7764d1 100644
--- a/packages/component-manuscript/src/components/utils.js
+++ b/packages/component-manuscript/src/components/utils.js
@@ -63,6 +63,14 @@ export const parseSearchParams = url => {
return parsedObject
}
+export const parseVersionOptions = fragments =>
+ fragments.map(f => ({
+ value: f.id,
+ label: `Version ${f.version} - updated on ${moment(f.submitted).format(
+ 'DD.MM.YYYY',
+ )}`,
+ }))
+
const alreadyAnswered = `You have already answered this invitation.`
export const redirectToError = redirectFn => err => {
const errorText = get(JSON.parse(err.response), 'error')
--
GitLab