Skip to content
Snippets Groups Projects
Commit 5c6caa8f authored by Aanand Prasad's avatar Aanand Prasad
Browse files

Merge branch 'progress-bar' into 'master'

feat: add progress bar to submission form

See merge request !27
parents 7926e85f 85a050a0
No related branches found
No related tags found
1 merge request!27feat: add progress bar to submission form
Pipeline #6301 passed with stages
in 4 minutes and 33 seconds
Showing
with 63 additions and 32 deletions
...@@ -9,7 +9,7 @@ import { configureStore, Root } from 'pubsweet-client' ...@@ -9,7 +9,7 @@ import { configureStore, Root } from 'pubsweet-client'
import theme from '@pubsweet/elife-theme' import theme from '@pubsweet/elife-theme'
import Routes from './routes' import Routes from './routes'
import * as AuthorDetailsSchema from './components/submission/AuthorDetailsSchema' import * as AuthorDetailsSchema from './components/submission/AuthorDetails/AuthorDetailsSchema'
theme.space = [ theme.space = [
0, 0,
......
...@@ -4,11 +4,3 @@ export { ...@@ -4,11 +4,3 @@ export {
} from './global/AuthenticatedComponent' } from './global/AuthenticatedComponent'
export { default as Dashboard } from './dashboard/Dashboard' export { default as Dashboard } from './dashboard/Dashboard'
export { default as LoginPage } from './login/LoginPage' export { default as LoginPage } from './login/LoginPage'
export { default as AuthorDetailsPage } from './submission/AuthorDetailsPage'
export { default as FileUploadsPage } from './submission/FileUploadsPage'
export {
default as ManuscriptMetadataPage,
} from './submission/ManuscriptMetadataPage'
export {
default as ReviewerSuggestionsPage,
} from './submission/ReviewerSuggestionsPage'
...@@ -2,9 +2,10 @@ import React from 'react' ...@@ -2,9 +2,10 @@ import React from 'react'
import { Flex, Box } from 'grid-styled' import { Flex, Box } from 'grid-styled'
import { Button, Heading, H1 } from '@pubsweet/ui' import { Button, Heading, H1 } from '@pubsweet/ui'
import ValidatedField from '../ui/atoms/ValidatedField' import ValidatedField from '../../ui/atoms/ValidatedField'
import { emptyAssignee } from './AuthorDetailsSchema' import { emptyAssignee } from './AuthorDetailsSchema'
import ProgressBar from '../ProgressBar'
class AuthorDetails extends React.Component { class AuthorDetails extends React.Component {
constructor() { constructor() {
...@@ -28,6 +29,8 @@ class AuthorDetails extends React.Component { ...@@ -28,6 +29,8 @@ class AuthorDetails extends React.Component {
return ( return (
<form noValidate onSubmit={handleSubmit}> <form noValidate onSubmit={handleSubmit}>
<ProgressBar currentStep={0} />
<H1>Are you handling this submission?</H1> <H1>Are you handling this submission?</H1>
<Flex> <Flex>
......
import React from 'react' import React from 'react'
import { Flex, Box } from 'grid-styled' import { Flex, Box } from 'grid-styled'
import { H1 } from '@pubsweet/ui' import { H1 } from '@pubsweet/ui'
import FileUpload from '../ui/atoms/FileUpload' import FileUpload from '../../ui/atoms/FileUpload'
import ButtonLink from '../ui/atoms/ButtonLink' import ButtonLink from '../../ui/atoms/ButtonLink'
import ProgressBar from '../ProgressBar'
const FileUploads = () => ( const FileUploads = () => (
<React.Fragment> <React.Fragment>
<ProgressBar currentStep={1} />
<H1>Upload your manuscript and cover letter</H1> <H1>Upload your manuscript and cover letter</H1>
<Flex flexDirection="column"> <Flex flexDirection="column">
......
import React from 'react' import React from 'react'
import { H1 } from '@pubsweet/ui' import { H1 } from '@pubsweet/ui'
import ButtonLink from '../ui/atoms/ButtonLink' import ButtonLink from '../../ui/atoms/ButtonLink'
import ProgressBar from '../ProgressBar'
export default () => ( export default () => (
<React.Fragment> <React.Fragment>
<ProgressBar currentStep={2} />
<H1>Help us get your work seen by the right people</H1> <H1>Help us get your work seen by the right people</H1>
<ButtonLink primary to="/submit/suggestions"> <ButtonLink primary to="/submit/suggestions">
......
import React from 'react'
import { Steps } from '@pubsweet/ui'
import { Box } from 'grid-styled'
import PropTypes from 'prop-types'
const ProgressBar = ({ currentStep }) => (
<Box mx="auto" width={500}>
<Steps currentStep={currentStep}>
<Steps.Step />
<Steps.Step />
<Steps.Step />
<Steps.Step />
</Steps>
</Box>
)
ProgressBar.propTypes = {
currentStep: PropTypes.number.isRequired,
}
export default ProgressBar
...@@ -2,11 +2,14 @@ import React from 'react' ...@@ -2,11 +2,14 @@ import React from 'react'
import { Flex, Box } from 'grid-styled' import { Flex, Box } from 'grid-styled'
import { Button, H1 } from '@pubsweet/ui' import { Button, H1 } from '@pubsweet/ui'
import ValidatedField from '../ui/atoms/ValidatedField' import ValidatedField from '../../ui/atoms/ValidatedField'
import ButtonLink from '../ui/atoms/ButtonLink' import ButtonLink from '../../ui/atoms/ButtonLink'
import ProgressBar from '../ProgressBar'
const ReviewerSuggestions = ({ handleSubmit }) => ( const ReviewerSuggestions = ({ handleSubmit }) => (
<form noValidate onSubmit={handleSubmit}> <form noValidate onSubmit={handleSubmit}>
<ProgressBar currentStep={3} />
<H1>Who would you like to review your work?</H1> <H1>Who would you like to review your work?</H1>
<ValidatedField label="Suggested editor(s)" name="suggestedEditors" /> <ValidatedField label="Suggested editor(s)" name="suggestedEditors" />
......
import React from 'react'
import { Route, Switch } from 'react-router-dom'
import AuthorDetailsPage from './AuthorDetails/AuthorDetailsPage'
import FileUploadsPage from './FileUploads/FileUploadsPage'
import ManuscriptMetadataPage from './ManuscriptMetadata/ManuscriptMetadataPage'
import ReviewerSuggestionsPage from './ReviewerSuggestions/ReviewerSuggestionsPage'
const SubmissionPage = ({ match }) => (
<Switch>
<Route component={FileUploadsPage} path={`${match.path}/upload`} />
<Route component={ManuscriptMetadataPage} path={`${match.path}/metadata`} />
<Route
component={ReviewerSuggestionsPage}
path={`${match.path}/suggestions`}
/>
<Route component={AuthorDetailsPage} />
</Switch>
)
export default SubmissionPage
...@@ -5,12 +5,9 @@ import { ...@@ -5,12 +5,9 @@ import {
AppBar, AppBar,
AuthenticatedComponent, AuthenticatedComponent,
Dashboard, Dashboard,
AuthorDetailsPage,
FileUploadsPage,
LoginPage, LoginPage,
ManuscriptMetadataPage,
ReviewerSuggestionsPage,
} from './components' } from './components'
import SubmissionPage from './components/submission/SubmissionPage'
const Routes = () => ( const Routes = () => (
<Switch> <Switch>
...@@ -18,19 +15,8 @@ const Routes = () => ( ...@@ -18,19 +15,8 @@ const Routes = () => (
<AuthenticatedComponent> <AuthenticatedComponent>
<AppBar /> <AppBar />
<Switch> <Switch>
<Route component={AuthorDetailsPage} exact path="/submit" /> <Route component={SubmissionPage} path="/submit" />
<Route component={FileUploadsPage} exact path="/submit/upload" /> <Route component={Dashboard} />
<Route
component={ManuscriptMetadataPage}
exact
path="/submit/metadata"
/>
<Route
component={ReviewerSuggestionsPage}
exact
path="/submit/suggestions"
/>
<Route component={Dashboard} path="/" />
</Switch> </Switch>
</AuthenticatedComponent> </AuthenticatedComponent>
</Switch> </Switch>
......
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