diff --git a/app/javascript/components/ActionItemCreationPage/index.js b/app/javascript/components/ActionItemCreationPage/index.js index 1e3ac33b..d8f01a29 100644 --- a/app/javascript/components/ActionItemCreationPage/index.js +++ b/app/javascript/components/ActionItemCreationPage/index.js @@ -18,11 +18,17 @@ import { apiPost, apiDelete } from 'utils/axios'; import * as Sentry from '@sentry/browser'; import styles from './styles'; +const steps = { + CHOOSE_ASSIGNMENT: 0, + CHOOSE_PARTICIPANT: 1, + CONFIRM_SUBMIT: 2, +}; + class ActionItemCreationPage extends React.Component { constructor(props) { super(props); this.state = { - step: 0, + step: steps.CHOOSE_ASSIGNMENT, participants: this.props.participants, selectedParticipants: [], actionItemTitle: '', @@ -372,17 +378,23 @@ class ActionItemCreationPage extends React.Component { let leftComponentText; let rightComponentText; let headerText; + let forwardButtonEnabled; switch (stepSize) { - case 0: + case steps.CHOOSE_ASSIGNMENT: leftComponentText = 'Assignments'; rightComponentText = 'Add Assignments'; headerText = 'Add Assignments to List'; - leftComponent = ( + leftComponent = this.state.selectedActionItems.length ? ( + ) : ( + + Select or create from scratch at least one assignment to assign to + participants. + ); rightComponent = ( ); + forwardButtonEnabled = !!this.state.selectedActionItems.length; break; - case 1: + case steps.CHOOSE_PARTICIPANT: leftComponentText = 'Students'; rightComponentText = 'Add Students'; headerText = 'Add Students to Assignments'; - leftComponent = ( + leftComponent = this.state.selectedParticipants.length ? ( + ) : ( + + Select at least one individual from the right to attach your + assignments to. + ); rightComponent = ( ); + forwardButtonEnabled = !!this.state.selectedParticipants.length; break; - case 2: + case steps.CONFIRM_SUBMIT: leftComponentText = 'Review Students'; rightComponentText = this.state.submitErrored ? 'Failed Assignments' @@ -449,6 +468,7 @@ class ActionItemCreationPage extends React.Component { handleOpenModal={this.handleOpenModal} /> ); + forwardButtonEnabled = true; break; default: leftComponent = null; @@ -456,6 +476,7 @@ class ActionItemCreationPage extends React.Component { leftComponentText = null; rightComponentText = null; headerText = null; + forwardButtonEnabled = false; } return { leftComponent, @@ -463,14 +484,16 @@ class ActionItemCreationPage extends React.Component { leftComponentText, rightComponentText, headerText, + forwardButtonEnabled, }; } - getButtons(stepSize) { + getButtons(stepSize, forwardButtonEnabled) { const { classes } = this.props; - const forwardButtonText = stepSize === 2 ? 'ASSIGN' : 'SAVE & CONTINUE'; + const forwardButtonText = + stepSize === steps.CONFIRM_SUBMIT ? 'ASSIGN' : 'SAVE & CONTINUE'; const handleForwardButtonClick = - stepSize === 2 ? this.handleSubmit : this.nextStep; + stepSize === steps.CONFIRM_SUBMIT ? this.handleSubmit : this.nextStep; const backButton = ( @@ -496,6 +519,7 @@ class ActionItemCreationPage extends React.Component { variant="extended" size="medium" aria-label="category" + disabled={!forwardButtonEnabled} onClick={handleForwardButtonClick} > @@ -522,8 +546,12 @@ class ActionItemCreationPage extends React.Component { rightComponent, rightComponentText, headerText, + forwardButtonEnabled, } = this.getMainComponents(this.state.step); - const buttonsGrid = this.getButtonsGrid(this.state.step); + const buttonsGrid = this.getButtonsGrid( + this.state.step, + forwardButtonEnabled, + ); return (