diff --git a/packages/component-manuscript/src/components/ReviewReportCard.js b/packages/component-manuscript/src/components/ReviewReportCard.js new file mode 100644 index 0000000000000000000000000000000000000000..077c7da4c98ab3e5ca643e18c85e89cce4b7b887 --- /dev/null +++ b/packages/component-manuscript/src/components/ReviewReportCard.js @@ -0,0 +1,91 @@ +import React, { Fragment } from 'react' +import moment from 'moment' +import { th } from '@pubsweet/ui' +import { compose } from 'recompose' +import { withJournal } from 'xpub-journal' +import styled, { css } from 'styled-components' +import { FileItem } from 'pubsweet-components-faraday/src/components/Files' + +const ReviewReportCard = ({ report = {}, journal: { recommendations } }) => ( + <Root> + <Row> + <Label>Recommendation</Label> + {report.submittedOn && ( + <Text> + Submitted on: {moment(report.submittedOn).format('DD.MM.YYYY')} + </Text> + )} + </Row> + <Row> + <Text> + {recommendations.find(r => report.recommendation === r.value).label} + </Text> + </Row> + <Spacing /> + <Row left> + <Label>Report Text</Label> + </Row> + <Row> + <Text>{report.comments[0].content}</Text> + </Row> + <Spacing /> + + {!!report.comments[0].files.length && ( + <Fragment> + <Row left> + <Label>Files</Label> + </Row> + <Row left> + {report.comments[0].files.map(file => ( + <FileItem compact id={file.id} key={file.id} {...file} /> + ))} + </Row> + </Fragment> + )} + </Root> +) + +export default compose(withJournal)(ReviewReportCard) + +// #region styled-components +const defaultText = css` + color: ${th('colorPrimary')}; + font-family: ${th('fontReading')}; + font-size: ${th('fontSizeBaseSmall')}; +` +const Root = styled.div` + display: flex; + flex-direction: column; + margin: auto; + [role='listbox'] { + min-width: 280px; + } +` +const Text = styled.div` + ${defaultText}; +` +const Label = styled.div` + ${defaultText}; + text-transform: uppercase; + i { + text-transform: none; + margin-left: ${th('gridUnit')}; + } +` + +const Spacing = styled.div` + margin-top: ${th('gridUnit')}; + flex: 1; +` + +const Row = styled.div` + display: flex; + flex-direction: row; + align-items: center; + flex: 1; + box-sizing: border-box; + flex-wrap: wrap; + justify-content: ${({ left }) => (left ? 'left' : 'space-between')}; + ${defaultText}; +` +// #endregion diff --git a/packages/component-manuscript/src/components/ReviewsAndReports.js b/packages/component-manuscript/src/components/ReviewsAndReports.js index 976793bc6823cbcbe9b4a1887d7ee75800c4d8b2..62feede02d3d178b3b2b6384932328acd35087bc 100644 --- a/packages/component-manuscript/src/components/ReviewsAndReports.js +++ b/packages/component-manuscript/src/components/ReviewsAndReports.js @@ -7,6 +7,7 @@ import { compose, withHandlers, lifecycle, withProps } from 'recompose' import { ReviewerBreakdown } from 'pubsweet-components-faraday/src/components/Invitations' import ReviewersDetailsList from 'pubsweet-components-faraday/src/components/Reviewers/ReviewersDetailsList' import ReviewerReportForm from 'pubsweet-component-manuscript/src/components/ReviewerReportForm' +import ReviewReportCard from 'pubsweet-component-manuscript/src/components/ReviewReportCard' import { selectReviewers, selectFetchingReviewers, @@ -64,10 +65,7 @@ const ReviewsAndReports = ({ <Root id="review-report"> <Expandable label="Your Report" startExpanded> {report ? ( - <div> - You have a submitted report with recommendation{' '} - {report.recommendation} - </div> + <ReviewReportCard report={report} /> ) : ( <ReviewerReportForm project={project} diff --git a/packages/component-manuscript/src/components/SideBarActions.js b/packages/component-manuscript/src/components/SideBarActions.js index 21492ae0171c9c51d06f6878328a8f1d1991feef..e31d92a43e2cb4ac057523a11b2afc4fbc9277e8 100644 --- a/packages/component-manuscript/src/components/SideBarActions.js +++ b/packages/component-manuscript/src/components/SideBarActions.js @@ -2,7 +2,7 @@ import React from 'react' import { th, Icon } from '@pubsweet/ui' import styled from 'styled-components' -import ZipFiles from 'pubsweet-components-faraday/src/components/Dashboard/ZipFiles' +import ZipFiles from 'pubsweet-components-faraday/src/components/Files/ZipFiles' import { MakeDecision } from './' const SideBarActions = ({ project, version, currentUserIs }) => ( diff --git a/packages/components-faraday/src/components/Dashboard/DashboardCard.js b/packages/components-faraday/src/components/Dashboard/DashboardCard.js index 178beba7f7570922b48c50635af978a5b2525c83..e2456344997492259fe08b99369f8d5f30f94ace 100644 --- a/packages/components-faraday/src/components/Dashboard/DashboardCard.js +++ b/packages/components-faraday/src/components/Dashboard/DashboardCard.js @@ -12,7 +12,7 @@ import { import AuthorsWithTooltip from 'pubsweet-component-manuscript/src/molecules/AuthorsWithTooltip' // import { AuthorsWithTooltip } from '@pubsweet/ui' -import ZipFiles from './ZipFiles' +import ZipFiles from '../Files/ZipFiles' import { InviteReviewers } from '../Reviewers/' import { selectInvitation } from '../../redux/reviewers' import { parseVersion, parseJournalIssue, mapStatusToLabel } from './../utils' diff --git a/packages/components-faraday/src/components/Dashboard/ZipFiles.js b/packages/components-faraday/src/components/Files/ZipFiles.js similarity index 100% rename from packages/components-faraday/src/components/Dashboard/ZipFiles.js rename to packages/components-faraday/src/components/Files/ZipFiles.js