diff --git a/packages/component-manuscript/src/components/Authors.js b/packages/component-manuscript/src/components/Authors.js index 0e761b69f4fb52d51169a6f3c886c058f09ad639..afcf825b1883a752195249558f7be15e6884855e 100644 --- a/packages/component-manuscript/src/components/Authors.js +++ b/packages/component-manuscript/src/components/Authors.js @@ -10,14 +10,7 @@ const TR = ({ name, email, affiliation }) => ( </Row> ) -const authors = [ - { name: 'Pallavi1', email: 'cocojambo1@gmail.com', affiliation: 'UTI' }, - { name: 'Pallavi2', email: 'cocojambo2@gmail.com', affiliation: 'UTI' }, - { name: 'Pallavi3', email: 'cocojambo3@gmail.com', affiliation: 'UTI' }, - { name: 'Pallavi4', email: 'cocojambo4@gmail.com', affiliation: 'UTI' }, -] - -const Authors = () => ( +const Authors = ({ authors }) => ( <Table> <thead> <tr> @@ -26,7 +19,18 @@ const Authors = () => ( <td>Affiliation</td> </tr> </thead> - <tbody>{authors.map(a => <TR key={a.email} {...a} />)}</tbody> + <tbody> + {authors.map( + ({ firstName = '', lastName = '', email = '', affiliation = '' }) => ( + <TR + affiliation={affiliation} + email={email} + key={email} + name={`${firstName} ${lastName}`} + /> + ), + )} + </tbody> </Table> ) diff --git a/packages/component-manuscript/src/components/Expandable.js b/packages/component-manuscript/src/components/Expandable.js index 122e0d13e0b627d4db0e22d011c24394fa054314..386fa22d2b83a0191625d6b8d2e06b49fcf1fe0c 100644 --- a/packages/component-manuscript/src/components/Expandable.js +++ b/packages/component-manuscript/src/components/Expandable.js @@ -18,7 +18,7 @@ const Expandable = ({ expanded, label, children, toggle }) => ( ) export default compose( - withState('expanded', 'setExpanded', false), + withState('expanded', 'setExpanded', ({ startExpanded }) => startExpanded), withHandlers({ toggle: ({ setExpanded }) => () => { setExpanded(e => !e) @@ -60,7 +60,6 @@ const Root = styled.div` cursor: pointer; display: flex; flex-direction: column; - /* height: ${({ expanded }) => `${expanded ? 160 : 40}px`}; */ transition: all 0.3s; ` // #endregion diff --git a/packages/component-manuscript/src/components/Files.js b/packages/component-manuscript/src/components/Files.js index 7a5ff48b7f4f41e389f7439785e37564f165f118..68678e3e81d52b0053ea88c127a21d2c52a34c22 100644 --- a/packages/component-manuscript/src/components/Files.js +++ b/packages/component-manuscript/src/components/Files.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Fragment } from 'react' import styled, { css } from 'styled-components' import { th, Icon } from '@pubsweet/ui' @@ -17,7 +17,7 @@ const parseFileSize = (size = 0) => { return `${size} bytes` } -const File = ({ fileName = 'Some_awesome_stuff.pdf', fileSize }) => ( +const File = ({ name = 'filename', size }) => ( <FileRoot> <IconButton> <Icon primary size={3}> @@ -29,28 +29,42 @@ const File = ({ fileName = 'Some_awesome_stuff.pdf', fileSize }) => ( download </Icon> </IconButton> - <FileName>{fileName}</FileName> - <FileSize>{parseFileSize(fileSize)}</FileSize> + <FileName>{name}</FileName> + <FileSize>{parseFileSize(size)}</FileSize> </FileRoot> ) -const Files = () => ( +const Files = ({ + files: { manuscripts = [], coverLetter = [], supplementary = [] }, +}) => ( <Root> - <Header> - <span>Main manuscript</span> - <div /> - </Header> - <File fileName="file1.png" fileSize={212312312} /> - <File fileName="file2.png" fileSize={3231} /> - <File fileName="file3.png" fileSize={5521231} /> - <Header> - <span>Supplimentary files</span> - <div /> - </Header> - <Header> - <span>Cover letter</span> - <div /> - </Header> + {manuscripts.length > 0 && ( + <Fragment> + <Header> + <span>Main manuscript</span> + <div /> + </Header> + {manuscripts.map(file => <File key={file.id} {...file} />)} + </Fragment> + )} + {supplementary.length > 0 && ( + <Fragment> + <Header> + <span>Supplemetary files</span> + <div /> + </Header> + {supplementary.map(file => <File key={file.id} {...file} />)} + </Fragment> + )} + {coverLetter.length > 0 && ( + <Fragment> + <Header> + <span>Supplemetary files</span> + <div /> + </Header> + {coverLetter.map(file => <File key={file.id} {...file} />)} + </Fragment> + )} </Root> ) diff --git a/packages/component-manuscript/src/components/ManuscriptDetails.js b/packages/component-manuscript/src/components/ManuscriptDetails.js index ca2fcf96afbbeedb249b6cb0525807c46f049468..3e487e4e018138cb6fd095ffbaff537ff918f2cb 100644 --- a/packages/component-manuscript/src/components/ManuscriptDetails.js +++ b/packages/component-manuscript/src/components/ManuscriptDetails.js @@ -1,35 +1,56 @@ import React from 'react' +import { isEmpty } from 'lodash' import { th } from '@pubsweet/ui' import styled from 'styled-components' import { Authors, Expandable, Files } from './' -const Conflict = () => ( - <Text> - “Prevention is better than cure.†Well said and well understood! But there +const defaultConflict = ` +“Prevention is better than cure.†Well said and well understood! But there are certain types of headaches, which are part and parcel of you; gifted to you by birth! Sinus headache is one of them, unfortunately. Many say about sinus, “that which can not be cured, must be endured!’ You can control it, reduce its impact. Can it be ever eradicated? The answer is in the negative, as far as the present day medical research can take you! In sinus, invariably you have the headache, but every headache is not sinus! Sinus and - nasal passage problems are the cause of headache, mostly! It is not that you - </Text> + nasal passage problems are the cause of headache, mostly! It is not that you` +const Conflict = ({ conflict = defaultConflict }) => <Text>{conflict}</Text> + +const Abstract = ({ abstract }) => ( + <Text dangerouslySetInnerHTML={{ __html: abstract }} /> ) -const ManuscriptDetails = () => ( +const ManuscriptDetails = ({ + collection, + fragment: { + conflicts, + files = {}, + authors = [], + metadata: { abstract = '' }, + }, +}) => ( <Root> - <Expandable label="Details"> - <Expandable label="abstract">wai sebi nu fi nasol</Expandable> - <Expandable label="Conflict of interest"> - <Conflict /> - </Expandable> - <Expandable label="authors"> - <Authors /> - </Expandable> - <Expandable label="files"> - <Files /> - </Expandable> + <Expandable label="Details" startExpanded> + {!!abstract && ( + <Expandable label="abstract"> + <Abstract abstract={abstract} /> + </Expandable> + )} + {conflicts.hasConflicts !== 'no' && ( + <Expandable label="Conflict of interest"> + <Conflict conflict={conflicts.conflict} /> + </Expandable> + )} + {authors.length > 0 && ( + <Expandable label="authors" startExpanded> + <Authors authors={authors} /> + </Expandable> + )} + {!isEmpty(files) && ( + <Expandable label="files"> + <Files files={files} /> + </Expandable> + )} </Expandable> </Root> ) @@ -44,6 +65,7 @@ const Text = styled.span` ` const Root = styled.div` + background-color: ${th('colorBackground')}; border: ${th('borderDefault')}; margin-top: calc(${th('subGridUnit')} * 2); transition: height 0.3s; diff --git a/packages/component-manuscript/src/components/ManuscriptLayout.js b/packages/component-manuscript/src/components/ManuscriptLayout.js index c1289ce085b35ac36b2a2ea031dda6ae3a1a916c..645d8513206406de1cf22b9c2b7a305c7d35e92c 100644 --- a/packages/component-manuscript/src/components/ManuscriptLayout.js +++ b/packages/component-manuscript/src/components/ManuscriptLayout.js @@ -28,7 +28,7 @@ const ManuscriptLayout = ({ <ManuscriptId>{`- ID ${project.customId}`}</ManuscriptId> </Header> <ManuscriptHeader journal={journal} project={project} version={version} /> - <ManuscriptDetails /> + <ManuscriptDetails collection={project} fragment={version} /> </Container> <SideBar flex={1}>Sidebar</SideBar> </Root> diff --git a/packages/xpub-faraday/config/default.js b/packages/xpub-faraday/config/default.js index 3629049fa7465cc399362f78acc9b365411ff96d..be3a905e9e638fd76db16d4f0f8f31c6b9886bdf 100644 --- a/packages/xpub-faraday/config/default.js +++ b/packages/xpub-faraday/config/default.js @@ -39,7 +39,7 @@ module.exports = { 'pubsweet-client': { API_ENDPOINT: '/api', 'login-redirect': '/', - 'redux-log': false, + 'redux-log': true, theme: process.env.PUBSWEET_THEME, }, 'mail-transport': {