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

#1208

parent 35ce8a02
No related branches found
No related tags found
1 merge request!387Deploy to production
Hide whitespace changes
Inline Side-by-side
app/components/dashboard/MyManuscripts.jsx
+ 252
− 211
View file @ ce406574
...@@ -19,6 +19,11 @@ const H2 = styled(HTwo)` ...@@ -19,6 +19,11 @@ const H2 = styled(HTwo)`
font-size: ${th('fontSizeHeading4')}; font-size: ${th('fontSizeHeading4')};
line-height: ${th('lineHeightHeading4')}; line-height: ${th('lineHeightHeading4')};
` `
const H3 = styled(HTwo)`
font-size: ${th('fontSizeHeading3')};
line-height: ${th('lineHeightHeading3')};
margin-top: 0;
`
const ToggleBar = styled(Toggle)` const ToggleBar = styled(Toggle)`
float: left; float: left;
@media screen and (max-width: 880px) { @media screen and (max-width: 880px) {
...@@ -30,229 +35,265 @@ const PaginationPane = styled.div` ...@@ -30,229 +35,265 @@ const PaginationPane = styled.div`
justify-content: flex-end; justify-content: flex-end;
` `
const MyManuscripts = ({ currentUser, errors, history }) => { const MyManuscripts = ({ currentUser, errors, history }) => (
const onPageEntered = p => { <Query fetchPolicy="cache-and-network" query={COUNT_MANUSCRIPTS}>
history.push(`/dashboard?completed=true&page=${p}`) {({ data, loading }) => {
} if (loading) {
return ( return (
<Query fetchPolicy="cache-and-network" query={COUNT_MANUSCRIPTS}> <Loading>
{({ data, loading }) => { <LoadingIcon />
if (loading) { </Loading>
return ( )
<Loading> }
<LoadingIcon /> if (!data) {
</Loading> createBrowserHistory({ forceRefresh: true }).push('/login')
) return null
} }
if (!data) { // get the total number of manuscripts to decide whether the toggles are required
createBrowserHistory({ forceRefresh: true }).push('/login') const { countByStatus } = data
return null const done = states.indexOf('xml-complete')
} const highlight = [
// get the total number of manuscripts to decide whether the toggles are required 'INITIAL',
const { countByStatus } = data 'READY',
const done = states.indexOf('xml-complete') 'submission-error',
const totalCount = countByStatus.reduce( 'in-review',
(sum, status) => sum + parseInt(status.count, 10), 'xml-review',
0, ]
const totalCount = countByStatus.reduce(
(sum, status) => sum + parseInt(status.count, 10),
0,
)
const totalAttention = countByStatus
.filter(s => highlight.includes(s.type))
.reduce((sum, status) => sum + parseInt(status.count, 10), 0)
const totalComplete = countByStatus
.filter(s => states.slice(done).includes(s.type))
.reduce((sum, status) => sum + parseInt(status.count, 10), 0)
const totalProcess = countByStatus
.filter(s =>
states
.slice(done)
.filter(s => !highlight.includes(s))
.includes(s.type),
) )
const totalComplete = countByStatus .reduce((sum, status) => sum + parseInt(status.count, 10), 0)
.filter(s => states.slice(done).includes(s.type)) const params = new URLSearchParams(history.location.search)
.reduce((sum, status) => sum + parseInt(status.count, 10), 0) const togglesRequired = totalCount > pageSize
const togglesRequired = totalCount > pageSize && totalComplete > 0 const query = togglesRequired ? MANUSCRIPTS_BY_STATUS : USER_MANUSCRIPTS
// determine the query and variables used to get manuscripts const showStates = params.get('status')
const query = togglesRequired ? MANUSCRIPTS_BY_STATUS : USER_MANUSCRIPTS const variables = {}
const params = new URLSearchParams(history.location.search) if (togglesRequired) {
// togglesRequired and on the completed toggle variables.page = params.get('page') ? params.get('page') - 1 : 0
const completed = params.get('completed') variables.pageSize = pageSize
variables.query =
(showStates === 'completed' && states.slice(done).join(',')) ||
(showStates === 'processing' &&
states
.slice(done)
.filter(s => !highlight.includes(s))
.join(',')) ||
highlight.join(',')
}
const searchTitle =
(showStates === 'completed' && 'Submission complete') ||
(showStates === 'processing' && 'In process at Europe PMC') ||
'Needs attention'
const onPageEntered = p => {
history.push(
`/dashboard?page=${p}${showStates ? `&status=${showStates}` : ''}`,
)
}
return (
<Query
fetchPolicy="cache-and-network"
query={query}
variables={variables}
>
{({ data, loading, errors: dErrors }) => {
if (loading) {
return (
<Loading>
<LoadingIcon />
</Loading>
)
}
if (dErrors) {
return dErrors.map(e => (
<Notification type="error">{e.message}</Notification>
))
}
const manuscripts = togglesRequired
? data.findByStatus.manuscripts
: data.manuscripts
const total = togglesRequired
? data.findByStatus.total
: data.manuscripts.length
const variables = {} const toggles = togglesRequired && (
if (togglesRequired) { <React.Fragment>
if (completed) { <ToggleBar>
variables.query = states.slice(done).join(',') <Link
variables.page = params.get('page') ? params.get('page') - 1 : 0 className={!showStates ? 'current' : ''}
variables.pageSize = pageSize to="/dashboard"
} else { >
variables.query = states.slice(0, done).join(',') Attention {showStates && `(${totalAttention})`}
variables.page = -1 </Link>
} <Link
} className={showStates === 'processing' ? 'current' : ''}
return ( to="/dashboard?status=processing"
<Query >
fetchPolicy="cache-and-network" In process{' '}
query={query} {showStates !== 'processing' && `(${totalProcess})`}
variables={variables} </Link>
> <Link
{({ data, loading, errors: dErrors }) => { className={
if (loading) { showStates === 'completed' ? `current (${total})` : ''
return ( }
<Loading> to="/dashboard?status=completed"
<LoadingIcon /> >
</Loading> Completed{' '}
) {showStates !== 'completed' && `(${totalComplete})`}
} </Link>
if (dErrors) { </ToggleBar>
return dErrors.map(e => ( <SearchBoxes reviewer />
<Notification type="error">{e.message}</Notification> </React.Fragment>
)) )
}
const manuscripts = togglesRequired if (togglesRequired) {
? data.findByStatus.manuscripts const currentPage = params.get('page')
: data.manuscripts ? parseInt(params.get('page'), 10)
const total = togglesRequired : 1
? data.findByStatus.total
: data.manuscripts.length
const toggles = togglesRequired && ( const PageNavigation = () => (
<Pagination
currentPage={currentPage}
onPageEntered={onPageEntered}
pageSize={pageSize}
totalSize={total}
/>
)
return (
<React.Fragment> <React.Fragment>
<ToggleBar> {toggles}
<Link <PaginationPane
className={!completed ? 'current' : ''} style={{
to="/dashboard" justifyContent: 'space-between',
> alignItems: 'baseline',
In process }}
</Link> >
<Link <H3>
className={completed ? `current (${total})` : ''} {searchTitle} ({total})
to="/dashboard?completed=true" </H3>
> {total > 0 && <PageNavigation />}
Completed </PaginationPane>
</Link> <DashboardList
</ToggleBar> currentUser={currentUser}
<SearchBoxes reviewer /> listData={manuscripts}
/>
{total > 0 && (
<PaginationPane>
<PageNavigation />
</PaginationPane>
)}
</React.Fragment> </React.Fragment>
) )
}
if (completed) { const attention = []
const currentPage = params.get('page') const warning = []
? parseInt(params.get('page'), 10) const processing = []
: 1 const complete = []
manuscripts.forEach(m => {
const PageNavigation = () => ( const reviewer = m.teams.find(t => t.role === 'reviewer')
<PaginationPane> const submitter = m.teams.find(t => t.role === 'submitter')
<Pagination if (highlight.includes(m.status)) {
currentPage={currentPage} if (
onPageEntered={onPageEntered} reviewer &&
pageSize={pageSize} reviewer.teamMembers[0].user.id === currentUser.id &&
totalSize={total} highlight.slice(-2).includes(m.status)
) {
attention.push(m)
} else if (
submitter.teamMembers[0].user.id === currentUser.id &&
highlight.slice(0, 3).includes(m.status)
) {
attention.push(m)
} else {
warning.push(m)
}
} else if (
!togglesRequired &&
states.slice(done).includes(m.status)
) {
complete.push(m)
} else {
processing.push(m)
}
})
return (
<React.Fragment>
{toggles}
{manuscripts.length === 0 && (
<Notification type="info">
There are currently no manuscripts connected to this
account.
</Notification>
)}
{errors.map(e => (
<Notification
key="message"
type={e.type ? e.type : 'warning'}
>
{e.message}
</Notification>
))}
{attention.length > 0 && (
<React.Fragment>
<H2>Needs my attention ({attention.length})</H2>
<DashboardList
currentUser={currentUser}
listData={attention}
sectionColor="error"
/> />
</PaginationPane> </React.Fragment>
) )}
return ( {warning.length > 0 && (
<React.Fragment> <React.Fragment>
{toggles} <H2>
{total && <PageNavigation />} Waiting for action by another user ({warning.length})
</H2>
<DashboardList <DashboardList
currentUser={currentUser} currentUser={currentUser}
listData={manuscripts} listData={warning}
sectionColor="warning"
/> />
{total && <PageNavigation />}
</React.Fragment> </React.Fragment>
) )}
} {processing.length > 0 && (
<React.Fragment>
const attention = [] <H2>In process at Europe PMC ({processing.length})</H2>
const warning = [] <DashboardList
const processing = [] currentUser={currentUser}
const complete = [] listData={processing}
const highlight = [ />
'INITIAL', </React.Fragment>
'READY', )}
'submission-error', {complete.length > 0 && (
'in-review', <React.Fragment>
'xml-review', <H2>Submission complete ({complete.length})</H2>
] <DashboardList
manuscripts.forEach(m => { currentUser={currentUser}
const reviewer = m.teams.find(t => t.role === 'reviewer') listData={complete}
const submitter = m.teams.find(t => t.role === 'submitter') />
if (highlight.includes(m.status)) { </React.Fragment>
if ( )}
reviewer && </React.Fragment>
reviewer.teamMembers[0].user.id === currentUser.id && )
highlight.slice(-2).includes(m.status) }}
) { </Query>
attention.push(m) )
} else if ( }}
submitter.teamMembers[0].user.id === currentUser.id && </Query>
highlight.slice(0, 3).includes(m.status) )
) {
attention.push(m)
} else {
warning.push(m)
}
} else if (
!togglesRequired &&
states.slice(done).includes(m.status)
) {
complete.push(m)
} else {
processing.push(m)
}
})
return (
<React.Fragment>
{toggles}
{manuscripts.length === 0 && (
<Notification type="info">
There are currently no manuscripts connected to this
account.
</Notification>
)}
{errors.map(e => (
<Notification
key="message"
type={e.type ? e.type : 'warning'}
>
{e.message}
</Notification>
))}
{attention.length > 0 && (
<React.Fragment>
<H2>Needs my attention ({attention.length})</H2>
<DashboardList
currentUser={currentUser}
listData={attention}
sectionColor="error"
/>
</React.Fragment>
)}
{warning.length > 0 && (
<React.Fragment>
<H2>
Waiting for action by another user ({warning.length})
</H2>
<DashboardList
currentUser={currentUser}
listData={warning}
sectionColor="warning"
/>
</React.Fragment>
)}
{processing.length > 0 && (
<React.Fragment>
<H2>In process at Europe PMC ({processing.length})</H2>
<DashboardList
currentUser={currentUser}
listData={processing}
/>
</React.Fragment>
)}
{complete.length > 0 && (
<React.Fragment>
<H2>Submission complete ({complete.length})</H2>
<DashboardList
currentUser={currentUser}
listData={complete}
/>
</React.Fragment>
)}
</React.Fragment>
)
}}
</Query>
)
}}
</Query>
)
}
export default MyManuscripts export default MyManuscripts
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