Merge branch 'develop' of gitlab.coko.foundation:xpub/xpub-faraday into develop

packages/component-manuscript/src/atoms/index.js

@@ -16,8 +16,10 @@ const Title = styled.div`
   ${defaultText};
   font-size: ${th('fontSizeBase')};
   color: ${th('colorPrimary')};
-  margin-bottom: ${th('gridUnit')};
   text-align: left;
+  p {
+    margin: 0;
+  }
 `
 
 const Container = styled.div`
@@ -35,6 +37,7 @@ const Header = styled.div`
   align-items: center;
   display: flex;
   flex-direction: row;
+  margin-bottom: ${th('subGridUnit')};
 `
 
 const BreadCrumbs = styled.div`
@@ -62,7 +65,7 @@ const ManuscriptId = styled.div`
   ${defaultText};
   color: ${th('colorPrimary')};
   font-size: ${th('fontSizeBase')};
-  margin-right: 8px;
+  margin-right: ${th('subGridUnit')};
   text-align: left;
   text-transform: uppercase;
   white-space: nowrap;
@@ -102,6 +105,29 @@ const DateField = styled.span`
   margin: 0 ${th('subGridUnit')};
   text-align: left;
 `
+const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+`
+
+const ManuscriptType = styled.div`
+  ${defaultText};
+  padding: ${th('subGridUnit')};
+  margin-left: calc(${th('subGridUnit')}*2);
+  text-align: right;
+  text-transform: capitalize;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`
+
+const ManuscriptHeader = styled.div`
+  border-bottom: ${th('borderDefault')};
+  padding-bottom: calc(${th('subGridUnit')}*2);
+`
 
 export {
   Root,
@@ -109,10 +135,13 @@ export {
   Header,
   Title,
   ManuscriptId,
+  ManuscriptType,
   Container,
   SideBar,
   LeftDetails,
   RightDetails,
   StatusLabel,
   DateField,
+  Row,
+  ManuscriptHeader,
 }

packages/component-manuscript/src/components/ManuscriptDetails.js

-import React, { Fragment } from 'react'
-// import { AuthorsWithTooltip } from '@pubsweet/ui'
-
-import { Title } from '../atoms'
-
-import AuthorsWithTooltip from '../molecules/AuthorsWithTooltip'
-
-const ManuscriptDetails = ({ version, project }) => (
-  <Fragment>
-    <Title dangerouslySetInnerHTML={{ __html: version.metadata.title }} />
-    <AuthorsWithTooltip authors={project.authors} />
-  </Fragment>
-)
-
-export default ManuscriptDetails

packages/component-manuscript/src/components/ManuscriptHeader.js

+import React from 'react'
+import { get } from 'lodash'
+// import { AuthorsWithTooltip } from '@pubsweet/ui'
+
+import {
+  Title,
+  LeftDetails,
+  RightDetails,
+  Row,
+  StatusLabel,
+  DateField,
+  ManuscriptType,
+  ManuscriptHeader,
+} from '../atoms'
+
+import { parseVersion, parseJournalIssue, mapStatusToLabel } from './utils'
+import AuthorsWithTooltip from '../molecules/AuthorsWithTooltip'
+
+const ManuscriptDetails = ({ version, project, journal }) => {
+  const { submitted, title, type } = parseVersion(version)
+  const metadata = get(version, 'metadata')
+  const journalIssueType = parseJournalIssue(journal, metadata)
+  const manuscriptMeta = `${type} - ${
+    journalIssueType ? journalIssueType.label : 'N/A'
+  }`
+  return (
+    <ManuscriptHeader>
+      <Title dangerouslySetInnerHTML={{ __html: title }} />
+      <Row>
+        <LeftDetails flex={3}>
+          <StatusLabel>{mapStatusToLabel(project)}</StatusLabel>
+          <DateField>{submitted || ''}</DateField>
+        </LeftDetails>
+        <RightDetails flex={4}>
+          <ManuscriptType title={manuscriptMeta}>
+            {manuscriptMeta}
+          </ManuscriptType>
+        </RightDetails>
+      </Row>
+      <AuthorsWithTooltip authors={project.authors} />
+    </ManuscriptHeader>
+  )
+}
+
+export default ManuscriptDetails

packages/component-manuscript/src/components/ManuscriptLayout.js

 import React from 'react'
 
-import ManuscriptDetails from './ManuscriptDetails'
+import ManuscriptHeader from './ManuscriptHeader'
 import {
   Root,
   BreadCrumbs,
@@ -15,6 +15,7 @@ const ManuscriptLayout = ({
   updateManuscript,
   project,
   version,
+  journal,
 }) => (
   <Root>
     <Container flex={3}>
@@ -25,7 +26,7 @@ const ManuscriptLayout = ({
         </BreadCrumbs>
         <ManuscriptId>{`- ID ${project.customId}`}</ManuscriptId>
       </Header>
-      <ManuscriptDetails project={project} version={version} />
+      <ManuscriptHeader journal={journal} project={project} version={version} />
     </Container>
     <SideBar flex={1}>Sidebar</SideBar>
   </Root>

packages/component-manuscript/src/components/ManuscriptPage.js

 import { connect } from 'react-redux'
 import { actions } from 'pubsweet-client'
 import { ConnectPage } from 'xpub-connect'
+import { withJournal } from 'xpub-journal'
 import {
   selectCurrentUser,
   selectCollection,
@@ -14,6 +15,7 @@ import { parseSearchParams, redirectToError } from './utils'
 import { reviewerDecision } from '../../../components-faraday/src/redux/reviewers'
 
 export default compose(
+  withJournal,
   ConnectPage(({ match }) => [
     actions.getCollection({ id: match.params.project }),
     actions.getFragment(

packages/component-manuscript/src/components/utils.js

-/* eslint-disable */
-import { get } from 'lodash'
+import moment from 'moment'
+import { get, find, capitalize } from 'lodash'
+
+export const parseTitle = version => {
+  const title = get(version, 'metadata.title')
+  if (title) {
+    return title.replace(/<p[^>]*>/g, '').replace(/<\/p>/g, '')
+  }
+  return 'Untitled'
+}
+
+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')
+  const submittedDate = moment(submitted)
+  const today = moment()
+  const daysAgo = moment.duration(today - moment(submitted)).days()
+  return submitted
+    ? `${submittedDate.format('DD.MM.YYYY')} ${
+        daysAgo > 0 ? `(${daysAgo} days)` : ''
+      }`
+    : 'N/A'
+}
+
+export const mapStatusToLabel = ({ visibleStatus, status }) => {
+  if (visibleStatus) {
+    return visibleStatus
+  } else if (status) {
+    return capitalize(status)
+  }
+  return 'Draft'
+}
+
+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'),
+})
+
+export const parseJournalIssue = (journal, metadata) =>
+  journal.issueTypes.find(t => t.value === get(metadata, 'issue'))
 
 export const parseSearchParams = url => {
   const params = new URLSearchParams(url)
   const parsedObject = {}
+  /* eslint-disable */
   for ([key, value] of params) {
     parsedObject[key] = value
   }
+  /* eslint-enable */
   return parsedObject
 }