Skip to content
Snippets Groups Projects
Commit 5a978947 authored by Audrey Hamelers's avatar Audrey Hamelers
Browse files

#431

parent 43da59ce
No related branches found
No related tags found
2 merge requests!98Dev,!97Shared data model
Hide whitespace changes
Inline Side-by-side
app/components/review-wizard/Review.jsx
+ 242
− 234
View file @ 5a978947
......@@ -146,254 +146,262 @@ class Review extends React.Component {
waitingForGeneration,
} = this.state
const { files: allfiles, status, teams } = manuscript
const sourceFile = allfiles.find(f => f.type === 'manuscript')
const files = allfiles.filter(
f => !f.type || ReviewTypes.some(rev => rev.value === f.type),
)
const originalFiles = allfiles.filter(f =>
SubmissionTypes.some(sub => sub.value === f.type),
)
const html = files.find(file => file.type === 'tempHTML')
const pdf = files.find(f => f.type === 'pdf4load' || f.type === 'pdf4print')
const xml = files.find(f => f.type === 'PMC') || null
const final = files.find(f => f.type === 'PMCfinal') || null
const tempHTML = files.find(f => f.type === 'tempHTML') || null
// const pdf4print = files.find(f => f.type === 'pdf4print') || null
if (teams && allfiles) {
const sourceFile = allfiles.find(f => f.type === 'manuscript')
const files = allfiles.filter(
f => !f.type || ReviewTypes.some(rev => rev.value === f.type),
)
const originalFiles = allfiles.filter(f =>
SubmissionTypes.some(sub => sub.value === f.type),
)
const html = files.find(file => file.type === 'tempHTML')
const pdf = files.find(
f => f.type === 'pdf4load' || f.type === 'pdf4print',
)
const xml = files.find(f => f.type === 'PMC') || null
const final = files.find(f => f.type === 'PMCfinal') || null
const tempHTML = files.find(f => f.type === 'tempHTML') || null
// const pdf4print = files.find(f => f.type === 'pdf4print') || null
const finalFilename = final
? final.filename
.split('.')
.slice(0, -1)
.join('.')
: null
const tempHTMLFilename = tempHTML
? tempHTML.filename
.split('.')
.slice(0, -1)
.join('.')
: null
// const pdf4printFilename = pdf4print
// ? pdf4print.filename
// .split('.')
// .slice(0, -1)
// .join('.')
// : null
const finalFilename = final
? final.filename
.split('.')
.slice(0, -1)
.join('.')
: null
const tempHTMLFilename = tempHTML
? tempHTML.filename
.split('.')
.slice(0, -1)
.join('.')
: null
// const pdf4printFilename = pdf4print
// ? pdf4print.filename
// .split('.')
// .slice(0, -1)
// .join('.')
// : null
// const prod = window.location.hostname.startsWith('beta')
// const prod = window.location.hostname.startsWith('beta')
// const hasFinal =
// finalFilename === tempHTMLFilename &&
// (!prod || finalFilename === pdf4printFilename)
// const hasFinal =
// finalFilename === tempHTMLFilename &&
// (!prod || finalFilename === pdf4printFilename)
const hasFinal = finalFilename === tempHTMLFilename
const hasFinal = finalFilename === tempHTMLFilename
if (waitingForGeneration && hasFinal) {
this.setState({ waitingForGeneration: false })
}
const reviewer = teams.find(t => t.role === 'reviewer').teamMembers[0]
if (
!currentUser.admin &&
!(currentUser.external && manuscript.status === 'xml-qa') &&
!(
currentUser.id === reviewer.user.id &&
manuscript.status === 'xml-review'
)
) {
this.props.history.push('/')
return null
}
if (waitingForGeneration && hasFinal) {
this.setState({ waitingForGeneration: false })
}
const reviewer = teams.find(t => t.role === 'reviewer').teamMembers[0]
if (
!currentUser.admin &&
!(currentUser.external && manuscript.status === 'xml-qa') &&
!(
currentUser.id === reviewer.user.id &&
manuscript.status === 'xml-review'
)
) {
this.props.history.push('/')
return null
}
const generating = !xml || (waitingForGeneration && !hasFinal)
const generating = !xml || (waitingForGeneration && !hasFinal)
return (
<PreviewPageDiv>
{instruct && (
<ReviewInstructions
close={() => this.setState({ instruct: false })}
/>
)}
<PreviewPanel
style={{
flex: showManuscript && '1 1 750px',
width: showManuscript && '50%',
maxWidth: showManuscript && '50%',
}}
>
<PreviewPanelDiv style={{ maxWidth: showManuscript && '750px' }}>
<PreviewPanelHeader>
<H1>Review web versions of manuscript</H1>
</PreviewPanelHeader>
<Toggle>
{currentUser.admin && (
return (
<PreviewPageDiv>
{instruct && (
<ReviewInstructions
close={() => this.setState({ instruct: false })}
/>
)}
<PreviewPanel
style={{
flex: showManuscript && '1 1 750px',
width: showManuscript && '50%',
maxWidth: showManuscript && '50%',
}}
>
<PreviewPanelDiv style={{ maxWidth: showManuscript && '750px' }}>
<PreviewPanelHeader>
<H1>Review web versions of manuscript</H1>
</PreviewPanelHeader>
<Toggle>
{currentUser.admin && (
<Action
className={pane === 'files' ? 'current' : ''}
onClick={() => this.setState({ pane: 'files' })}
>
XML files
</Action>
)}
<Action
className={pane === 'files' ? 'current' : ''}
onClick={() => this.setState({ pane: 'files' })}
className={pane === 'web' ? 'current' : ''}
disabled={!html}
onClick={() => this.setState({ pane: 'web' })}
>
XML files
Web preview
</Action>
)}
<Action
className={pane === 'web' ? 'current' : ''}
disabled={!html}
onClick={() => this.setState({ pane: 'web' })}
>
Web preview
</Action>
<Action
className={pane === 'pdf' ? 'current' : ''}
disabled={!pdf}
onClick={() => this.setState({ pane: 'pdf' })}
>
PDF preview
</Action>
<Action
className={
pane === 'original' ? 'current show-mobile' : 'show-mobile'
}
onClick={() => this.setState({ pane: 'original' })}
primary={pane !== 'original'}
>
Submitted file
</Action>
</Toggle>
<PanelContent>
{pane === 'files' && (
<Mutation
mutation={CONVERT_XML}
refetchQueries={() => [
{
query: GET_MANUSCRIPT,
variables: { id: manuscript.id },
},
]}
<Action
className={pane === 'pdf' ? 'current' : ''}
disabled={!pdf}
onClick={() => this.setState({ pane: 'pdf' })}
>
{(convertXML, { data }) => {
const generatePreviews = async () => {
this.setState({ waitingForGeneration: true })
await convertXML({
variables: { id: xml.id },
})
}
return (
PDF preview
</Action>
<Action
className={
pane === 'original' ? 'current show-mobile' : 'show-mobile'
}
onClick={() => this.setState({ pane: 'original' })}
primary={pane !== 'original'}
>
Submitted file
</Action>
</Toggle>
<PanelContent>
{pane === 'files' && (
<Mutation
mutation={CONVERT_XML}
refetchQueries={() => [
{
query: GET_MANUSCRIPT,
variables: { id: manuscript.id },
},
]}
>
{(convertXML, { data }) => {
const generatePreviews = async () => {
this.setState({ waitingForGeneration: true })
await convertXML({
variables: { id: xml.id },
})
}
return (
<React.Fragment>
<Buttons left top>
<Button
disabled={generating}
onClick={() => generatePreviews()}
>
Regenerate previews
</Button>
<Button
onClick={() =>
this.setState({ showAll: !showAll })
}
>
{`${showAll ? 'Hide' : 'Show'} submission files`}
</Button>
</Buttons>
{manuscript.formState && (
<PreviewError>
{ReactHtmlParser(manuscript.formState)}
</PreviewError>
)}
<UploadFiles
checked
files={showAll ? allfiles : files}
manuscript={manuscript.id}
types={showAll ? AllTypes : ReviewTypes}
/>
<Buttons left top>
<Button
disabled={generating}
onClick={() => generatePreviews()}
>
Regenerate previews
</Button>
<Button
onClick={() =>
this.setState({ showAll: !showAll })
}
>
{`${showAll ? 'Hide' : 'Show'} submission files`}
</Button>
</Buttons>
</React.Fragment>
)
}}
</Mutation>
)}
{pane === 'pdf' && pdf && (
<React.Fragment>
{status === 'tagging' ? (
<PDFViewer url={pdf.url} />
) : (
<React.Fragment>
<AnnotatePDF
file={pdf}
reload={this.props.reload}
revId={(review && review.id) || null}
userId={currentUser.id}
/>
</React.Fragment>
)}
</React.Fragment>
)}
{pane === 'web' && html && (
<React.Fragment>
{status === 'tagging' ? (
<HTMLPreview url={html.url} />
) : (
<React.Fragment>
<Buttons left top>
<Button
disabled={generating}
onClick={() => generatePreviews()}
>
Regenerate previews
</Button>
<Button
onClick={() => this.setState({ showAll: !showAll })}
>
{`${showAll ? 'Hide' : 'Show'} submission files`}
</Button>
</Buttons>
{manuscript.formState && (
<PreviewError>
{ReactHtmlParser(manuscript.formState)}
</PreviewError>
)}
<UploadFiles
checked
files={showAll ? allfiles : files}
manuscript={manuscript.id}
types={showAll ? AllTypes : ReviewTypes}
<AnnotateHTML
file={html}
reload={this.props.reload}
revId={(review && review.id) || null}
userId={currentUser.id}
/>
<Buttons left top>
<Button
disabled={generating}
onClick={() => generatePreviews()}
>
Regenerate previews
</Button>
<Button
onClick={() => this.setState({ showAll: !showAll })}
>
{`${showAll ? 'Hide' : 'Show'} submission files`}
</Button>
</Buttons>
</React.Fragment>
)
}}
</Mutation>
)}
{pane === 'pdf' && pdf && (
<React.Fragment>
{status === 'tagging' ? (
<PDFViewer url={pdf.url} />
) : (
<React.Fragment>
<AnnotatePDF
file={pdf}
reload={this.props.reload}
revId={(review && review.id) || null}
userId={currentUser.id}
/>
</React.Fragment>
)}
</React.Fragment>
)}
{pane === 'web' && html && (
<React.Fragment>
{status === 'tagging' ? (
<HTMLPreview url={html.url} />
) : (
<React.Fragment>
<AnnotateHTML
file={html}
reload={this.props.reload}
revId={(review && review.id) || null}
userId={currentUser.id}
/>
</React.Fragment>
)}
</React.Fragment>
)}
{pane === 'original' && sourceFile && (
<ManuscriptPreview file={sourceFile} />
)}
</PanelContent>
</PreviewPanelDiv>
</PreviewPanel>
<EditPanel
style={{
flex: showManuscript && '1 1 750px',
width: showManuscript && '50%',
maxWidth: showManuscript && '50%',
}}
>
<div style={{ maxWidth: showManuscript && '750px' }}>
<PreviewPanelHeader>
<H2>Compare &amp; approve</H2>
</PreviewPanelHeader>
<Toggle className="hide-mobile">
<Button
onClick={() =>
this.setState({ showManuscript: !showManuscript })
}
>
{showManuscript
? 'Back to approval form'
: 'Compare with submitted file'}
</Button>
</Toggle>
<PanelContent className={showManuscript && 'pad'}>
{showManuscript && sourceFile ? (
<ManuscriptPreview file={sourceFile} />
) : (
<ReviewForm
files={originalFiles}
manuscript={manuscript}
previews={!!html && !!pdf}
review={review}
/>
)}
</PanelContent>
</div>
</EditPanel>
</PreviewPageDiv>
)
)}
</React.Fragment>
)}
{pane === 'original' && sourceFile && (
<ManuscriptPreview file={sourceFile} />
)}
</PanelContent>
</PreviewPanelDiv>
</PreviewPanel>
<EditPanel
style={{
flex: showManuscript && '1 1 750px',
width: showManuscript && '50%',
maxWidth: showManuscript && '50%',
}}
>
<div style={{ maxWidth: showManuscript && '750px' }}>
<PreviewPanelHeader>
<H2>Compare &amp; approve</H2>
</PreviewPanelHeader>
<Toggle className="hide-mobile">
<Button
onClick={() =>
this.setState({ showManuscript: !showManuscript })
}
>
{showManuscript
? 'Back to approval form'
: 'Compare with submitted file'}
</Button>
</Toggle>
<PanelContent className={showManuscript && 'pad'}>
{showManuscript && sourceFile ? (
<ManuscriptPreview file={sourceFile} />
) : (
<ReviewForm
files={originalFiles}
manuscript={manuscript}
previews={!!html && !!pdf}
review={review}
/>
)}
</PanelContent>
</div>
</EditPanel>
</PreviewPageDiv>
)
}
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment