Skip to content

Commit

Permalink
Ricky/appeals-34350-Error-and-Validation-Handling (#20288)
Browse files Browse the repository at this point in the history 
* Updated LeverModal button and reducer to fix error handling

* Implemented new error handling in DocketTimeGoals and BatchSize Lever groups

* Updated error handling for lever inputs for affinity days

* Fixed incorrect check and messages in CheckIsInRange function

* Added first part of input validation for duplicate values

* Removed leftover code

* Updated logic to handle save button enabling if duplicate values are put in fields

---------

Co-authored-by: 631966 <amy.detwiler@va.gov>
  • Loading branch information
@Blake-Manus @amybids
Blake-Manus and amybids authored Dec 22, 2023
1 parent 0487ab7 commit 12ab324
Show file tree
Hide file tree
Showing 6 changed files with 359 additions and 64 deletions.
89 changes: 72 additions & 17 deletions client/app/caseflowDistribution/components/AffinityDays.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,31 @@ import styles from 'app/styles/caseDistribution/InteractableLevers.module.scss';
import NumberField from 'app/components/NumberField';
import TextField from 'app/components/TextField';
import COPY from '../../../COPY';
import leverInputValidation from './LeverInputValidation';

const AffinityDays = (props) => {
const { leverList, leverStore } = props;
const filteredLevers = leverList.map((item) => {
return leverStore.getState().levers.find((lever) => lever.item === item);
});

const checkIfOtherChangesExist = (currentLever) => {

let leversWithChangesList = [];

leverStore.getState().levers.map((lever) => {
if (lever.hasValueChanged === true && lever.item !== currentLever.item) {
leversWithChangesList.push(lever);
}
});

if (leversWithChangesList.length > 0) {
return true;
}

return false;
};

const leverNumberDiv = css({
'& .cf-form-int-input': { width: 'auto', display: 'inline-block', position: 'relative' },
'& .cf-form-int-input .input-container': { width: 'auto', display: 'inline-block', verticalAlign: 'middle' },
Expand All @@ -22,31 +41,66 @@ const AffinityDays = (props) => {
const errorMessages = {};
const [affinityLevers, setAffinityLevers] = useState(filteredLevers);
const [errorMessagesList, setErrorMessages] = useState(errorMessages);
const leverInputValidation = (lever, event) => { // eslint-disable-line no-unused-vars
let rangeError = !(/^\d{1,3}$/).test(event);

if (rangeError) {
setErrorMessages({ ...errorMessagesList, [lever.item]: 'Please enter a value less than or equal to 999' });

return 'FAIL';
}
setErrorMessages({ ...errorMessagesList, [lever.item]: null });

return 'SUCCESS';
};
const updatedLever = (lever, option) => (event) => {
const levers = affinityLevers.map((individualLever) => {
if (individualLever.item === lever.item) {
const updatedOptions = individualLever.options.map((op) => {
if (op.item === option.item) {
let validationResponse = leverInputValidation(individualLever, event);

let initialLever = leverStore.getState().initial_levers.find((original) => original.item === lever.item);

let validationResponse = leverInputValidation(lever, event, errorMessagesList, initialLever, op);

const newValue = isNaN(event) ? event : individualLever.value;

if (validationResponse === 'SUCCESS') {
if (validationResponse.statement === 'DUPLICATE') {

if (checkIfOtherChangesExist(lever)) {
op.value = event;
op.errorMessage = validationResponse.updatedMessages[`${lever.item}-${option.item}`];
setErrorMessages(validationResponse.updatedMessages[`${lever.item}-${option.item}`]);

leverStore.dispatch({
type: Constants.UPDATE_LEVER_VALUE,
updated_lever: { item: individualLever.item, value: newValue },
hasValueChanged: false,
validChange: true

});
} else {
op.value = event;
op.errorMessage = validationResponse.updatedMessages[`${lever.item}-${option.item}`];
setErrorMessages(validationResponse.updatedMessages[`${lever.item}-${option.item}`]);

leverStore.dispatch({
type: Constants.UPDATE_LEVER_VALUE,
updated_lever: { item: individualLever.item, value: newValue },
hasValueChanged: false,
validChange: false

});
}

}
if (validationResponse.statement === 'SUCCESS') {
op.value = event;
op.errorMessage = validationResponse.updatedMessages[`${lever.item}-${option.item}`];
setErrorMessages(validationResponse.updatedMessages[`${lever.item}-${option.item}`]);
leverStore.dispatch({
type: Constants.UPDATE_LEVER_VALUE,
updated_lever: { item: individualLever.item, value: newValue },
validChange: true
});
}
if (validationResponse.statement === 'FAIL') {
op.value = event;
op.errorMessage = validationResponse.updatedMessages[`${lever.item}-${option.item}`];
setErrorMessages(validationResponse.updatedMessages[`${lever.item}-${option.item}`]);
leverStore.dispatch({
type: Constants.UPDATE_LEVER_VALUE,
updated_lever: { item: individualLever.item, value: newValue }
updated_lever: { item: individualLever.item, value: newValue },
validChange: false
});
}
}
Expand Down Expand Up @@ -76,13 +130,14 @@ const AffinityDays = (props) => {
setAffinityLevers(updatedLevers);
leverStore.dispatch({
type: Constants.UPDATE_LEVER_VALUE,
updated_lever: { item: lever.item, value: option.item }
updated_lever: { item: lever.item, value: option.item },
validChange: true
});
}
};
const generateFields = (dataType, option, lever) => {
const useAriaLabel = !lever.is_disabled;
const tabIndex = lever.is_disabled ? -1 : 'undefined';
const tabIndex = lever.is_disabled ? -1 : null;

if (dataType === 'number') {
return (
Expand Down Expand Up @@ -128,7 +183,7 @@ const AffinityDays = (props) => {
<div>
<label className={lever.is_disabled ? styles.leverDisabled : styles.leverActive}
htmlFor={`${lever.item}-${option.item}`}>
{`${option.text} ${option.data_type === 'number' ? `${option.value } ${ option.unit}` : ''}`}
{`${option.text} ${option.data_type === 'number' ? `${option.value} ${option.unit}` : ''}`}
</label>
</div>
</div>
Expand Down
88 changes: 74 additions & 14 deletions client/app/caseflowDistribution/components/BatchSize.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import * as Constants from 'app/caseflowDistribution/reducers/Levers/leversActio
import { css } from 'glamor';
import styles from 'app/styles/caseDistribution/InteractableLevers.module.scss';
import NumberField from 'app/components/NumberField';
import leverInputValidation from './LeverInputValidation';
import COPY from '../../../COPY';

const BatchSize = (props) => {
Expand All @@ -20,26 +21,85 @@ const BatchSize = (props) => {
'& .usa-input-error label': { bottom: '15px', left: '89px' }
});

const [batchSizeLevers, setLever] = useState(filteredLevers);
const updateLever = (index, changedItem) => (event) => {
const checkIfOtherChangesExist = (currentLever) => {

let leversWithChangesList = [];

leverStore.dispatch({
type: Constants.UPDATE_LEVER_VALUE,
updated_lever: { item: changedItem, value: event }
leverStore.getState().levers.map((lever) => {
if (lever.hasValueChanged === true && lever.item !== currentLever.item) {
leversWithChangesList.push(lever);
}
});

if (leversWithChangesList.length > 0) {
return true;
}

return false;
};

const errorMessages = {};
const [batchSizeLevers, setLever] = useState(filteredLevers);
const [errorMessagesList, setErrorMessages] = useState(errorMessages);
const updateLever = (index) => (event) => {

const levers = batchSizeLevers.map((lever, i) => {
if (index === i) {
let errorResult = !(/^\d{0,3}$/).test(event);

if (errorResult) {
lever.errorMessage = 'Please enter a value less than or equal to 999';
} else {
lever.errorMessage = null;
let initialLever = leverStore.getState().initial_levers.find((original) => original.item === lever.item);

let validationResponse = leverInputValidation(lever, event, errorMessagesList, initialLever);

if (validationResponse.statement === 'DUPLICATE') {

if (checkIfOtherChangesExist(lever)) {
lever.value = event;
setErrorMessages(validationResponse.updatedMessages);

leverStore.dispatch({
type: Constants.UPDATE_LEVER_VALUE,
updated_lever: { item: lever.item, value: event },
hasValueChanged: false,
validChange: true
});
} else {

lever.value = event;
setErrorMessages(validationResponse.updatedMessages);

leverStore.dispatch({
type: Constants.UPDATE_LEVER_VALUE,
updated_lever: { item: lever.item, value: event },
hasValueChanged: false,
validChange: false
});
}

}
lever.value = event;
if (validationResponse.statement === 'SUCCESS') {

return lever;
lever.value = event;
setErrorMessages(validationResponse.updatedMessages);
leverStore.dispatch({
type: Constants.UPDATE_LEVER_VALUE,
updated_lever: { item: lever.item, value: event },
validChange: true
});

return lever;
}
if (validationResponse.statement === 'FAIL') {
lever.value = event;
setErrorMessages(validationResponse.updatedMessages);

leverStore.dispatch({
type: Constants.UPDATE_LEVER_VALUE,
updated_lever: { item: lever.item, value: event },
validChange: false
});

return lever;
}
}

return lever;
Expand Down Expand Up @@ -75,9 +135,9 @@ const BatchSize = (props) => {
isInteger
readOnly={lever.is_disabled}
value={lever.value}
errorMessage={lever.errorMessage}
errorMessage={errorMessagesList[lever.item]}
onChange={updateLever(index, lever.item, lever.item)}
tabIndex={lever.is_disabled ? -1 : 'undefined'}
tabIndex={lever.is_disabled ? -1 : null}
/>
}
</div>
Expand Down
Loading

0 comments on commit 12ab324

Please sign in to comment.