import React from 'react'
import styled, { withTheme } from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { Button, Action, CheckboxGroup, H1, H2, H3, Icon } from '@pubsweet/ui'
import {
Page,
Buttons,
Close,
CloseButton,
PreviewPage,
PreviewFooter,
PreviewPanel,
EditPanel,
PanelHeader,
PanelContent,
SectionContent as Content,
SectionHeader as Header,
Portal,
} from '../ui'
import UploadFiles, { SubmissionTypes } from '../upload-files'
import ManuscriptPreview from '../ManuscriptPreview'
import { NoteMutations } from '../SubmissionMutations'
import ResolveDuplicates from '../ResolveDuplicates'
import SubmitText from './SubmitText'
import SubmitComplete from './SubmitComplete'
import SubmitCancel from './SubmitCancel'
import SubmitApprove from './SubmitApprove'
import submitSections, { ErrorMessage } from './SubmitSections'
import SubmissionErrorReport, { adminOptions } from '../SubmissionErrorReport'
import ReviewerErrorReport from './ReviewerErrorReport'
const Alert = withTheme(({ children, theme }) => (
<Icon color={theme.colorError} size={2.75}>
{children}
</Icon>
))
const CloseEdit = styled(Close)`
margin: calc(${th('gridUnit')} * 6) auto calc(${th('gridUnit')} * 2);
`
const ErrorReport = styled.p`
white-space: pre-wrap;
font-style: italic;
margin-top: 0;
color: ${th('colorError')};
`
const DuplicatesWithMutations = NoteMutations(ResolveDuplicates)
class Submit extends React.Component {
constructor(props) {
super(props)
this.state = {
approve: false,
cancel: false,
checkedBoxes: [],
editing: null,
highlights: '',
error: '',
prune: false,
reject: false,
message: '',
}
}
componentDidMount() {
if (
this.props.currentUser.admin &&
this.props.manuscript.status === 'submitted' // &&
// this.props.currentVersion.source
) {
const fake = document.createElement('div')
// fake.innerHTML = this.props.currentVersion.source
this.setState({ highlights: fake.textContent })
}
}
changeCitation = citation => {
this.props.changeCitation(citation)
this.setState({ editing: null })
}
pruneDupes = () => this.setState({ prune: true })
render() {
const { currentUser, manuscript, duplicates: checkDupes = [] } = this.props
const {
id: mId,
meta,
files: allfiles,
status,
teams,
formState,
journal,
} = manuscript
if (teams && allfiles) {
const {
editing,
highlights,
prune,
cancel,
approve,
checkedBoxes,
reject,
message,
} = this.state
const sections = submitSections(
manuscript,
checkDupes,
this.changeCitation,
currentUser,
highlights,
this.pruneDupes,
this.props.updateEmbargo,
this.props.updateGrants,
)
const { notes, releaseDelay, unmatchedJournal } = meta
const files = allfiles
? allfiles.filter(
file =>
!file.type ||
file.type === 'manuscript' ||
SubmissionTypes.some(t => t.value === file.type),
)
: []
const xml = allfiles.find(f => f.type === 'PMC') || null
let reviewer = null
if (teams && teams.find(team => team.role === 'reviewer')) {
const rev = teams.find(team => team.role === 'reviewer').teamMembers[0]
reviewer = {
id: rev.user.id,
name: rev.alias.name,
}
}
const submitter =
teams && teams.find(team => team.role === 'submitter')
? teams.find(team => team.role === 'submitter').teamMembers[0]
: null
const { title, givenNames, surname } = submitter.alias.name
const submitterName = `${title && `${title} `}${givenNames} ${surname}`
const dupeNote = notes
? notes.find(n => n.notesType === 'notDuplicates')
: null
const notDupes = dupeNote ? JSON.parse(dupeNote.content) : []
const duplicates = checkDupes.filter(d => !notDupes.includes(d.id))
return (
<React.Fragment>
{(() => {
if (
(reviewer &&
reviewer.id === currentUser.id &&
!['in-review', 'submission-error'].includes(status)) ||
(submitter &&
submitter.user.id === currentUser.id &&
!['INITIAL', 'READY', 'submission-error'].includes(status))
) {
window.scrollY = 0
window.pageYOffset = 0
document.scrollingElement.scrollTop = 0
return (
<SubmitComplete
cancel={() => this.setState({ cancel: true })}
currentUser={currentUser}
history={this.props.history}
manuscript={manuscript}
/>
)
} else if (editing) {
return (
<Page>
<CloseEdit>
<CloseButton
onClick={() => this.setState({ editing: null })}
/>
</CloseEdit>
{editing.props['data-upload'] ? (
<div>
<H2>Files</H2>
<UploadFiles
checked
files={files}
manuscript={mId}
types={SubmissionTypes}
/>
</div>
) : (
<React.Fragment>{editing}</React.Fragment>
)}
{this.state.error && (
<ErrorMessage>
<Icon color="currentColor" size={2}>
alert_circle
</Icon>
{this.state.error}
</ErrorMessage>
)}
<Buttons>
<Button
onClick={() => this.setState({ editing: null })}
primary={!editing.props['data-citation']}
>
{editing.props['data-citation'] ? 'Cancel' : 'Save'}
</Button>
</Buttons>
</Page>
)
}
return (
<React.Fragment>
<PreviewPage>
<PreviewPanel>
<div>
<PanelHeader>
<H1>Preview submission</H1>
</PanelHeader>
<PanelContent>
<ManuscriptPreview
file={files.find(file => file.type === 'manuscript')}
textContent={highlights =>
currentUser.admin && status === 'submitted'
? this.setState({ highlights })
: false
}
/>
</PanelContent>
</div>
</PreviewPanel>
<EditPanel>
<div>
<PanelHeader>
<H2>Check submission details</H2>
</PanelHeader>
<PanelContent>
{status === 'submission-error' && formState && (
<ErrorReport>{formState}</ErrorReport>
)}
<SubmitText
currentUser={currentUser}
status={status}
teams={teams}
/>
{sections.map(sec => (
<React.Fragment key={sec.title}>
<Header error={!!sec.error}>
<H3>{sec.title}</H3>
{sec.edit && (
<Action
id={`edit-${sec.title}`}
onClick={() =>
this.setState({ editing: sec.edit })
}
style={{
display: 'inline-flex',
alignItems: 'center',
}}
>
{!!sec.error && <Alert>alert_circle</Alert>}
<Icon color="currentColor" size={2.5}>
edit
</Icon>
Edit
</Action>
)}
</Header>
<Content>
<div>
{sec.content}
{sec.error}
</div>
</Content>
</React.Fragment>
))}
{currentUser.admin && status === 'submitted' && (
<React.Fragment>
<Header>
<H3>Report Errors</H3>
</Header>
<Content>
<div>
<p>
{`Check the following and select anything that is missing:`}
</p>
<CheckboxGroup
name="admin-checklist"
onChange={c =>
this.setState({ checkedBoxes: c })
}
options={adminOptions}
value={checkedBoxes}
/>
</div>
</Content>
</React.Fragment>
)}
</PanelContent>
</div>
</EditPanel>
{duplicates.length > 0 && prune && (
<DuplicatesWithMutations
close={() => this.setState({ prune: false })}
duplicates={duplicates}
manuscript={manuscript}
note={dupeNote}
/>
)}
</PreviewPage>
<PreviewFooter>
<div>
<div>
{currentUser.admin && status === 'submitted' ? (
<SubmitApprove adminButton />
) : (
<Button
disabled={sections.some(sec => sec.error)}
onClick={() => this.setState({ approve: true })}
primary
>
Submit manuscript
</Button>
)}
{(currentUser.admin ||
(reviewer &&
reviewer.id === currentUser.id &&
status === 'in-review')) && (
<Button onClick={() => this.setState({ reject: true })}>
Reject submission
</Button>
)}
</div>
{submitter && submitter.user.id === currentUser.id && (
<Action
onClick={() => this.setState({ cancel: true })}
style={{ display: 'inline-flex', alignItems: 'center' }}
>
<Icon color="currentColor" size={2.5}>
trash-2
</Icon>
Cancel submission
</Action>
)}
</div>
</PreviewFooter>
</React.Fragment>
)
})()}
{cancel && (
<SubmitCancel
cancel={() =>
this.props.deleteMan(() => this.props.history.push('/'))
}
close={() => this.setState({ cancel: false })}
/>
)}
{approve && (
<SubmitApprove
checkedBoxes={checkedBoxes}
close={() => this.setState({ approve: false })}
currentUser={currentUser}
journal={journal ? journal.meta.nlmta : unmatchedJournal}
manuscriptId={manuscript.id}
releaseDelay={releaseDelay}
setChecked={c => this.setState({ checkedBoxes: c })}
xml={xml}
/>
)}
{reject && (
<Portal transparent>
<Close style={{ margin: 0 }}>
<CloseButton onClick={() => this.setState({ reject: false })} />
</Close>
{currentUser.admin && status === 'submitted' ? (
<SubmissionErrorReport
checkedBoxes={checkedBoxes}
close={() => this.setState({ reject: false })}
manuscript={manuscript}
teams={teams}
/>
) : (
<ReviewerErrorReport
close={() => this.setState({ reject: false })}
manuscriptId={manuscript.id}
message={message}
onChange={message => this.setState({ message })}
submitter={submitterName}
/>
)}
</Portal>
)}
</React.Fragment>
)
}
return null
}
}
export default Submit