Skip to content

Commit

Permalink
Merge pull request #3055 from ONSdigital/revert-3054-revert-3034-ear-…
Browse files Browse the repository at this point in the history 
…1948-option-values-for-rad-chk-sel-ans

EAR 1948 Option values for rad-chk-ans
  • Loading branch information
@sudeepkunhis
sudeepkunhis authored Oct 28, 2024
2 parents ecb9a8f + f90b8ba commit f3fdfdc
Show file tree
Hide file tree
Showing 10 changed files with 342 additions and 64 deletions.
10 changes: 7 additions & 3 deletions eq-author/src/App/QuestionnaireDesignPage/MainNavigation/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,10 @@ export const UtilityBtns = styled.div`
}
`;

const StyledIconText = styled(IconText)`
line-height: 1.2;
`;

export const UnwrappedMainNavigation = ({
hasQuestionnaire,
totalErrorCount,
Expand Down Expand Up @@ -195,9 +199,9 @@ export const UnwrappedMainNavigation = ({
title === "QCodes" || totalErrorCount > 0 || !qcodesEnabled
}
>
<IconText nav icon={qcodeIcon}>
QCodes
</IconText>
<StyledIconText nav icon={qcodeIcon}>
Q Codes and values
</StyledIconText>
{qcodesEnabled && hasQCodeError && (
<Badge data-test="small-badge" variant="main-nav" />
)}
Expand Down
142 changes: 128 additions & 14 deletions eq-author/src/App/qcodes/QCodesTable/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,16 @@ import { DRIVING, ANOTHER } from "constants/list-answer-types";
import {
QCODE_IS_NOT_UNIQUE,
QCODE_REQUIRED,
VALUE_IS_NOT_UNIQUE,
VALUE_REQUIRED,
} from "constants/validationMessages";

import {
getPageByAnswerId,
getAnswerByOptionId,
} from "utils/questionnaireUtils";
import { useQuestionnaire } from "components/QuestionnaireContext";

const SpacedTableColumn = styled(TableColumn)`
padding: 0.5em 0.5em 0.2em;
color: ${colors.text};
Expand All @@ -73,7 +81,7 @@ const StyledTableBody = styled(TableBody)`
background-color: white;
`;

const QcodeValidationError = styled(ValidationError)`
const StyledValidationError = styled(ValidationError)`
justify-content: unset;
margin: 0;
padding-top: 0.2em;
Expand Down Expand Up @@ -115,13 +123,16 @@ const Row = memo((props) => {
questionShortCode,
label,
qCode: initialQcode,
value: initialValue,
type,
errorMessage,
valueErrorMessage,
option,
secondary,
listAnswerType,
drivingQCode,
anotherQCode,
hideOptionValue,
} = props;

// Uses different initial QCode depending on the QCode defined in the props
Expand All @@ -137,6 +148,10 @@ const Row = memo((props) => {
const [updateListCollector] = useMutation(UPDATE_LIST_COLLECTOR_PAGE, {
refetchQueries: ["GetQuestionnaire"],
});
const [value, setValue] = useState(initialValue);
const [updateValue] = useMutation(UPDATE_OPTION_QCODE, {
refetchQueries: ["GetQuestionnaire"],
});

const handleBlur = useCallback(
(qCode) => {
Expand Down Expand Up @@ -170,6 +185,13 @@ const Row = memo((props) => {
]
);

const handleBlurOptionValue = useCallback(
(value) => {
updateValue(mutationVariables({ id, value }));
},
[id, updateValue]
);

return (
<TableRow data-test={`answer-row-test`}>
{questionShortCode || questionTitle ? (
Expand All @@ -188,7 +210,12 @@ const Row = memo((props) => {
<SpacedTableColumn>{TYPE_TO_DESCRIPTION[type]}</SpacedTableColumn>
<SpacedTableColumn>{stripHtmlToText(label)}</SpacedTableColumn>
{dataVersion === "3" ? (
[CHECKBOX_OPTION, RADIO_OPTION, SELECT_OPTION].includes(type) ? (
[
CHECKBOX_OPTION,
RADIO_OPTION,
SELECT_OPTION,
MUTUALLY_EXCLUSIVE_OPTION,
].includes(type) ? (
<EmptyTableColumn />
) : (
<SpacedTableColumn>
Expand All @@ -204,11 +231,16 @@ const Row = memo((props) => {
aria-label="QCode input field"
/>
{errorMessage && (
<QcodeValidationError>{errorMessage}</QcodeValidationError>
<StyledValidationError>{errorMessage}</StyledValidationError>
)}
</SpacedTableColumn>
)
) : [CHECKBOX, RADIO_OPTION, SELECT_OPTION].includes(type) ? (
) : [
CHECKBOX,
RADIO_OPTION,
SELECT_OPTION,
MUTUALLY_EXCLUSIVE_OPTION,
].includes(type) ? (
<EmptyTableColumn />
) : (
<SpacedTableColumn>
Expand All @@ -222,9 +254,34 @@ const Row = memo((props) => {
aria-label="QCode input field"
/>
{errorMessage && (
<QcodeValidationError>{errorMessage}</QcodeValidationError>
<StyledValidationError>{errorMessage}</StyledValidationError>
)}
</SpacedTableColumn>
)}
{dataVersion === "3" &&
[
CHECKBOX_OPTION,
RADIO_OPTION,
SELECT_OPTION,
MUTUALLY_EXCLUSIVE_OPTION,
].includes(type) &&
!hideOptionValue ? (
<SpacedTableColumn>
<ErrorWrappedInput
name={`${id}-optionValue-entry`}
data-test={`${id}-value-test-input`}
value={value}
onChange={(e) => setValue(e.value)}
onBlur={() => handleBlurOptionValue(value)}
hasError={Boolean(valueErrorMessage)}
aria-label="Option Value input field"
/>
{valueErrorMessage && (
<StyledValidationError>{valueErrorMessage}</StyledValidationError>
)}
</SpacedTableColumn>
) : (
<EmptyTableColumn />
)}
</TableRow>
);
Expand All @@ -237,35 +294,89 @@ Row.propTypes = {
questionShortCode: PropTypes.string,
label: PropTypes.string,
qCode: PropTypes.string,
value: PropTypes.string,
type: PropTypes.string,
qCodeCheck: PropTypes.func,
errorMessage: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
valueErrorMessage: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
secondary: PropTypes.bool,
option: PropTypes.bool,
listAnswerType: PropTypes.string,
drivingQCode: PropTypes.string,
anotherQCode: PropTypes.string,
hideOptionValue: PropTypes.bool,
};

export const QCodeTable = () => {
const { answerRows, duplicatedQCodes, dataVersion } = useQCodeContext();
const { questionnaire } = useQuestionnaire();
const { answerRows, duplicatedQCodes, dataVersion, duplicatedOptionValues } =
useQCodeContext();
const getErrorMessage = (qCode) =>
(!qCode && QCODE_REQUIRED) ||
(duplicatedQCodes.includes(qCode) && QCODE_IS_NOT_UNIQUE);

const getValueErrorMessage = (value, idValue) =>
(!value && VALUE_REQUIRED) ||
(duplicatedOptionValues.includes(idValue) && VALUE_IS_NOT_UNIQUE);

let currentQuestionId = "";
let idValue = "";
return (
<Table data-test="qcodes-table">
<TableHead>
<TableRow>
<TableHeadColumn width="20%">Short code</TableHeadColumn>
<TableHeadColumn width="20%">Question</TableHeadColumn>
<TableHeadColumn width="20%">Type</TableHeadColumn>
<TableHeadColumn width="20%">Answer label</TableHeadColumn>
<TableHeadColumn width="20%">Qcode</TableHeadColumn>
</TableRow>
{dataVersion === "3" ? (
<TableRow>
<TableHeadColumn width="10%">Short code</TableHeadColumn>
<TableHeadColumn width="15%">Question</TableHeadColumn>
<TableHeadColumn width="20%">Answer Type</TableHeadColumn>
<TableHeadColumn width="15%">Answer label</TableHeadColumn>
<TableHeadColumn width="20%">
Q code for answer type
</TableHeadColumn>
<TableHeadColumn width="20%">
Value for checkbox, radio and select answer labels
</TableHeadColumn>
</TableRow>
) : (
<TableRow>
<TableHeadColumn width="10%">Short code</TableHeadColumn>
<TableHeadColumn width="20%">Question</TableHeadColumn>
<TableHeadColumn width="25%">Answer Type</TableHeadColumn>
<TableHeadColumn width="20%">Answer label</TableHeadColumn>
<TableHeadColumn width="25%">
Q code for answer type
</TableHeadColumn>
</TableRow>
)}
</TableHead>
<StyledTableBody>
{answerRows?.map((item, index) => {
if (
![
CHECKBOX_OPTION,
RADIO_OPTION,
SELECT_OPTION,
MUTUALLY_EXCLUSIVE_OPTION,
].includes(item.type)
) {
currentQuestionId = item.id ? item.id : "";
}
if ([MUTUALLY_EXCLUSIVE_OPTION].includes(item.type)) {
const answer = getAnswerByOptionId(questionnaire, item.id);
const page = getPageByAnswerId(questionnaire, answer.id);
currentQuestionId = page.answers[0]?.id;
}
if (
item.value &&
[
CHECKBOX_OPTION,
RADIO_OPTION,
SELECT_OPTION,
MUTUALLY_EXCLUSIVE_OPTION,
].includes(item.type)
) {
idValue = currentQuestionId.concat(item.value);
}
if (
item.additionalAnswer &&
(dataVersion === "3" || item.type !== "CheckboxOption")
Expand All @@ -277,12 +388,14 @@ export const QCodeTable = () => {
dataVersion={dataVersion}
{...item}
errorMessage={getErrorMessage(item.qCode)}
valueErrorMessage={getValueErrorMessage(item.value, idValue)}
/>
<Row
key={`${item.additionalAnswer.id}-${index}`}
dataVersion={dataVersion}
{...item.additionalAnswer}
errorMessage={getErrorMessage(item.additionalAnswer.qCode)}
valueErrorMessage={getValueErrorMessage(item.value, idValue)}
/>
</React.Fragment>
);
Expand All @@ -293,8 +406,9 @@ export const QCodeTable = () => {
dataVersion={dataVersion}
{...item}
errorMessage={getErrorMessage(
item.qCode ?? item.drivingQCode ?? item.anotherQCode // Uses a different QCode depending on the QCode defined in item
item.qCode ?? item.drivingQCode ?? item.anotherQCode
)}
valueErrorMessage={getValueErrorMessage(item.value, idValue)}
/>
);
}
Expand Down
Loading

0 comments on commit f3fdfdc

Please sign in to comment.