Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ricky/appeals-34350-Error-and-Validation-Handling #20288

Merged
merged 11 commits into from
Dec 22, 2023
Merged

Ricky/appeals-34350-Error-and-Validation-Handling #20288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e378e58
Updated LeverModal button and reducer to fix error handling
Blake-Manus Dec 11, 2023
53f54ba
Implemented new error handling in DocketTimeGoals and BatchSize Lever…
Blake-Manus Dec 14, 2023
e824e27
Merged in feature updates to branch
Blake-Manus Dec 15, 2023
6b209a2
Merged in feature branch changes
Blake-Manus Dec 20, 2023
302941e
Updated error handling for lever inputs for affinity days
Blake-Manus Dec 21, 2023
81800d0
Fixed incorrect check and messages in CheckIsInRange function
Blake-Manus Dec 21, 2023
00c8bac
Added first part of input validation for duplicate values
Blake-Manus Dec 21, 2023
e9b2b41
Removed leftover code
Blake-Manus Dec 21, 2023
9ff6c99
Updated logic to handle save button enabling if duplicate values are …
Blake-Manus Dec 21, 2023
0ca82c4
Merged in feature changes
Blake-Manus Dec 21, 2023
32dd0a6
APPEALS-34350 fixed merge conflict
amybids Dec 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 72 additions & 17 deletions client/app/caseflowDistribution/components/AffinityDays.jsx
View file
Open in desktop
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
Open in desktop
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
Loading