From bacb4a601ea537bd5bf2fba31c7c0e332727b9b3 Mon Sep 17 00:00:00 2001
From: Bogdan Cochior <bogdan.cochior@thinslices.com>
Date: Mon, 27 Aug 2018 11:16:19 +0300
Subject: [PATCH] feat(authorslist): add affiliations
---
.../component-faraday-ui/src/AuthorTag.js | 15 +++-
.../component-faraday-ui/src/AuthorTagList.js | 85 +++++++++++++++++--
.../component-faraday-ui/src/AuthorTagList.md | 45 ++++++++--
packages/component-faraday-ui/src/index.js | 12 +--
.../manuscriptDetails/ManuscriptMetadata.js | 7 +-
5 files changed, 140 insertions(+), 24 deletions(-)
diff --git a/packages/component-faraday-ui/src/AuthorTag.js b/packages/component-faraday-ui/src/AuthorTag.js
index ab46aabc5..d6a42289a 100644
--- a/packages/component-faraday-ui/src/AuthorTag.js
+++ b/packages/component-faraday-ui/src/AuthorTag.js
@@ -6,9 +6,16 @@ import Tag from './Tag'
import Text from './Text'
const AuthorTag = ({
- author: { firstName, lastName, isCorresponding, isSubmitting },
+ author: {
+ firstName,
+ lastName,
+ isCorresponding,
+ isSubmitting,
+ affiliationNumber,
+ },
}) => (
<Root>
+ {affiliationNumber && <Superscript>{affiliationNumber}</Superscript>}
<Text>{`${firstName} ${lastName}`}</Text>
{isSubmitting && <Tag>SA</Tag>}
{isCorresponding && <Tag>CA</Tag>}
@@ -27,4 +34,10 @@ const Root = styled.div`
margin-left: calc(${th('gridUnit')} / 2);
}
`
+const Superscript = styled.span`
+ position: relative;
+ top: -0.5em;
+ font-size: 80%;
+ font-family: ${th('fontInterface')};
+`
// #endregion
diff --git a/packages/component-faraday-ui/src/AuthorTagList.js b/packages/component-faraday-ui/src/AuthorTagList.js
index 1792cd7b3..f1d7ceb2f 100644
--- a/packages/component-faraday-ui/src/AuthorTagList.js
+++ b/packages/component-faraday-ui/src/AuthorTagList.js
@@ -1,17 +1,46 @@
import React from 'react'
import styled from 'styled-components'
+import { groupBy } from 'lodash'
import { th } from '@pubsweet/ui-toolkit'
+import { compose, withState, withHandlers, withProps } from 'recompose'
-import { AuthorTag, AuthorWithTooltip } from 'pubsweet-component-faraday-ui'
+import {
+ Row,
+ Item,
+ Text,
+ AuthorTag,
+ ActionLink,
+ AuthorWithTooltip,
+} from 'pubsweet-component-faraday-ui'
+
+const parseAffiliationGroup = authors => {
+ const affiliationGroup = groupBy(authors, 'affiliation')
+ const affiliationList = Object.keys(affiliationGroup)
+ const list = affiliationList.reduce((acc, el, index) => {
+ const authorGroup = affiliationGroup[el].map(i => {
+ i.affiliationNumber = index + 1
+ return i
+ })
+ return [...authorGroup, ...acc]
+ }, [])
+
+ return {
+ list,
+ affiliationList,
+ }
+}
const AuthorTagList = ({
- authors = [],
- tooltip = false,
+ authorsAffiliations: { list = [], affiliationList = [] },
separator = ',',
authorKey = 'email',
+ tooltip = false,
+ affiliations = false,
+ showAffiliation = false,
+ toggleAffiliation,
}) => (
<Root>
- {authors
+ {list
.map(
a =>
tooltip ? (
@@ -27,10 +56,43 @@ const AuthorTagList = ({
: [prev, separator, <span key={curr}> </span>, curr],
[],
)}
+ {affiliations && (
+ <Item ml={1}>
+ {showAffiliation ? (
+ <ActionLink icon="minus" onClick={toggleAffiliation(false)}>
+ Hide Affiliations
+ </ActionLink>
+ ) : (
+ <ActionLink icon="plus" onClick={toggleAffiliation(true)}>
+ Show Affiliations
+ </ActionLink>
+ )}
+ </Item>
+ )}
+
+ {affiliations &&
+ showAffiliation && (
+ <AffiliationRow>
+ {affiliationList.map((a, i) => (
+ <Item flex={1} key={a}>
+ <Superscript>{i + 1}</Superscript>
+ <Text>{a}</Text>
+ </Item>
+ ))}
+ </AffiliationRow>
+ )}
</Root>
)
-
-export default AuthorTagList
+export default compose(
+ withState('showAffiliation', 'setAffiliation', false),
+ withProps(({ authors = [] }) => ({
+ authorsAffiliations: parseAffiliationGroup(authors),
+ })),
+ withHandlers({
+ toggleAffiliation: ({ setAffiliation }) => value => () =>
+ setAffiliation(value),
+ }),
+)(AuthorTagList)
// #region styles
const Root = styled.div`
@@ -40,4 +102,15 @@ const Root = styled.div`
font-family: ${th('fontReading')};
`
+const AffiliationRow = styled(Row)`
+ border-left: 1px solid ${th('colorBackgroundHue')};
+ padding-left: ${th('gridUnit')};
+ flex-direction: column;
+`
+const Superscript = styled.span`
+ position: relative;
+ top: -0.5em;
+ font-size: 80%;
+ font-family: ${th('fontInterface')};
+`
// #endregion
diff --git a/packages/component-faraday-ui/src/AuthorTagList.md b/packages/component-faraday-ui/src/AuthorTagList.md
index f948cc048..df88f967a 100644
--- a/packages/component-faraday-ui/src/AuthorTagList.md
+++ b/packages/component-faraday-ui/src/AuthorTagList.md
@@ -7,6 +7,7 @@ const authors = [
email: 'john.doe@gmail.com',
firstName: 'John',
lastName: 'Doe',
+ affiliation: 'University of California',
isSubmitting: true,
},
{
@@ -14,6 +15,7 @@ const authors = [
email: 'michael.felps@gmail.com',
firstName: 'Michael',
lastName: 'Felps',
+ affiliation: 'US Presidency',
isSubmitting: true,
isCorresponding: true,
},
@@ -22,37 +24,70 @@ const authors = [
email: 'barrack.obama@gmail.com',
firstName: 'Barrack',
lastName: 'Obama',
- affiliation: 'US Presidency'
+ affiliation: 'US Presidency',
},
]
-
;<AuthorTagList authors={authors} />
```
-A list of author tags with tooltip
+A list of author tags with affiliation and tooltip
```js
const authors = [
{
+ id: 1,
email: 'john.doe@gmail.com',
firstName: 'John',
lastName: 'Doe',
+ affiliation: 'University of California',
isSubmitting: true,
+ affiliationNumber: 1,
},
{
+ id: 2,
email: 'michael.felps@gmail.com',
firstName: 'Michael',
lastName: 'Felps',
+ affiliation: 'US Presidency',
isSubmitting: true,
isCorresponding: true,
+ affiliationNumber: 2,
},
{
+ id: 3,
email: 'barrack.obama@gmail.com',
firstName: 'Barrack',
lastName: 'Obama',
+ affiliation: 'US Presidency',
+ affiliationNumber: 2,
},
]
+;<AuthorTagList authors={authors} tooltip affiliations />
+```
+
+A list of author tags with tooltip
+```js
+const authors = [
+ {
+ email: 'john.doe@gmail.com',
+ firstName: 'John',
+ lastName: 'Doe',
+ isSubmitting: true,
+ },
+ {
+ email: 'michael.felps@gmail.com',
+ firstName: 'Michael',
+ lastName: 'Felps',
+ isSubmitting: true,
+ isCorresponding: true,
+ },
+ {
+ email: 'barrack.obama@gmail.com',
+ firstName: 'Barrack',
+ lastName: 'Obama',
+ },
+]
;<AuthorTagList authors={authors} tooltip />
```
@@ -78,6 +113,6 @@ const authors = [
firstName: 'Barrack',
lastName: 'Obama',
},
-];
-<AuthorTagList separator="* * *" authors={authors} authorKey="firstName" />
+]
+;<AuthorTagList separator="* * *" authors={authors} authorKey="firstName" />
```
diff --git a/packages/component-faraday-ui/src/index.js b/packages/component-faraday-ui/src/index.js
index 71413c78b..ba8692d3f 100644
--- a/packages/component-faraday-ui/src/index.js
+++ b/packages/component-faraday-ui/src/index.js
@@ -1,3 +1,9 @@
+export * from './styledHelpers'
+
+// modals
+export * from './modals'
+export * from './gridItems'
+
export { default as ActionLink } from './ActionLink'
export { default as AuthorWithTooltip } from './AuthorWithTooltip'
export { default as AppBar } from './AppBar'
@@ -26,9 +32,3 @@ export { default as DownloadZipFiles } from './DownloadZipFiles'
// Manuscript Details
export * from './manuscriptDetails'
-
-export * from './styledHelpers'
-
-// modals
-export * from './modals'
-export * from './gridItems'
diff --git a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptMetadata.js b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptMetadata.js
index 911feef48..214588cdb 100644
--- a/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptMetadata.js
+++ b/packages/component-faraday-ui/src/manuscriptDetails/ManuscriptMetadata.js
@@ -11,12 +11,7 @@ import {
const ManuscriptMetadata = ({
getSignedUrl,
currentUser: { token },
- fragment: {
- files = {},
- authors = [],
- conflicts = {},
- metadata: { abstract = '' },
- },
+ fragment: { files = {}, conflicts = {}, metadata: { abstract = '' } },
}) => (
<Fragment>
{!!abstract && (
--
GitLab