refactor
This commit is contained in:
+216
-235
@@ -17,246 +17,227 @@ import {
|
||||
} from "../elements";
|
||||
|
||||
export default function BuildField(props) {
|
||||
let { t } = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
const { locale } = useRouter();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const { fieldType, label, datafieldname, mandatoryFieldData } = props;
|
||||
const parser = new DOMParser();
|
||||
// Destructure frequently used props for clarity
|
||||
const {
|
||||
fieldType,
|
||||
label,
|
||||
datafieldname,
|
||||
picklistData,
|
||||
validation,
|
||||
hint,
|
||||
maxFieldLength,
|
||||
dateStart,
|
||||
dateEnd,
|
||||
documentTypeCode,
|
||||
uploadCount,
|
||||
setUploadCount,
|
||||
setFileCount,
|
||||
parentField,
|
||||
parentFieldShowOnValue,
|
||||
requiredDocumentValue,
|
||||
requiredDocumentLabel,
|
||||
setDocumentsList,
|
||||
documentList,
|
||||
maxSubField,
|
||||
datafieldcontent,
|
||||
} = props;
|
||||
|
||||
const whichFieldType = (classid) => {
|
||||
//console.log(props.datafieldname, classid);
|
||||
// Extract deeply nested props for convenience (avoid props.props.props all over)
|
||||
// Defensive checks in case nested props don't exist
|
||||
const appealType = props?.props?.props?.appealType || {};
|
||||
const form = props?.props?.props?.form || {};
|
||||
const formProps = props?.props?.props?.props?.form || {};
|
||||
const setFilesForAppeal = props?.props?.props?.setFilesForAppeal;
|
||||
const accountDetails = props?.props?.props?.props?.accountDetails || {};
|
||||
const ticketnumber = appealType.caseReference?.ticketnumber || "";
|
||||
const fileList = appealType.fileList || {};
|
||||
const containerID = accountDetails.containerID || "";
|
||||
|
||||
switch (classid) {
|
||||
case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
|
||||
return (
|
||||
<ReadOnlyfield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
value={
|
||||
props.props.props.appealType.caseReference
|
||||
.ticketnumber
|
||||
}
|
||||
props={props}
|
||||
ticketnumber={
|
||||
props.props.props.appealType.caseReference
|
||||
.ticketnumber
|
||||
}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
|
||||
return (
|
||||
<PickList
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
datafieldname={props.datafieldname}
|
||||
picklistData={props.picklistData}
|
||||
validation={props.validation}
|
||||
hint={props.hint}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
|
||||
return (
|
||||
<YesNofield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
validation={props.validation}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
documentList={props.documentList}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
|
||||
return (
|
||||
<Radiofield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
datafieldname={props.datafieldname}
|
||||
options={props.datafieldcontent}
|
||||
inline={false}
|
||||
hint={props.hint}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
documentList={props.documentList}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
|
||||
const required = (value) =>
|
||||
value ? undefined : t("newappeal:is-required-label");
|
||||
|
||||
return (
|
||||
<Textfield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
props={props}
|
||||
ticketnumber={
|
||||
props.props.props.appealType.caseReference
|
||||
.ticketnumber
|
||||
}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
hint={props.hint}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
|
||||
return (
|
||||
<DateFieldPicker
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
dateStart={props.dateStart}
|
||||
dateEnd={props.dateEnd}
|
||||
hint={props.hint}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
|
||||
return (
|
||||
<MultiLinefield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
hint={props.hint}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{E0DECE4B-6666-4a8f-A065-082708572369}":
|
||||
return (
|
||||
<RichMultiLinefield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
hint={props.hint}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
|
||||
return (
|
||||
<NumericField
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
validation={props.validation}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
|
||||
return (
|
||||
<DecimalField
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
validation={props.validation}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{16D63FD6-119B-4353-BDCA-18358721C3FE}":
|
||||
return (
|
||||
<div className="govuk-!-margin-bottom-9">
|
||||
<FileUploadField
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
ticketnumber={
|
||||
props.props.props.props.appealType.caseReference
|
||||
.ticketnumber
|
||||
}
|
||||
documentTypeCode={props.documentTypeCode}
|
||||
hint={props.hint}
|
||||
fileList={
|
||||
props.props.props.props.appealType.fileList
|
||||
}
|
||||
setFilesForAppeal={
|
||||
props.props.props.setFilesForAppeal
|
||||
}
|
||||
containerID={
|
||||
props.props.props.props.accountDetails
|
||||
.containerID
|
||||
}
|
||||
uploadCount={props.uploadCount}
|
||||
setFileCount={props.props.setFileCount}
|
||||
setUploadCount={props.setUploadCount}
|
||||
props={props.props.props.props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
|
||||
case "{0273EDBD-AC1D-40d3-9FB2-095C621B552D}":
|
||||
return (
|
||||
<FieldArrayForm
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
maxSubField={props.maxSubField}
|
||||
/>
|
||||
);
|
||||
case "{9EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
|
||||
return (
|
||||
<CheckBoxfield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
props={props}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
return (
|
||||
<Textfield name={props.datafieldname} label={props.label} />
|
||||
);
|
||||
}
|
||||
// Mapping fieldType to components
|
||||
const fieldTypeMap = {
|
||||
"{270BD3DB-D9AF-4782-9025-509E298DEC0A}": (
|
||||
<ReadOnlyfield
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
value={ticketnumber}
|
||||
props={props}
|
||||
ticketnumber={ticketnumber}
|
||||
/>
|
||||
),
|
||||
"{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}": (
|
||||
<PickList
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
datafieldname={datafieldname}
|
||||
picklistData={picklistData}
|
||||
validation={validation}
|
||||
hint={hint}
|
||||
/>
|
||||
),
|
||||
"{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}": (
|
||||
<YesNofield
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
requiredDocumentValue={requiredDocumentValue}
|
||||
requiredDocumentLabel={requiredDocumentLabel}
|
||||
validation={validation}
|
||||
setDocumentsList={setDocumentsList}
|
||||
documentList={documentList}
|
||||
form={form}
|
||||
formProps={formProps}
|
||||
parentField={parentField}
|
||||
parentFieldShowOnValue={parentFieldShowOnValue}
|
||||
/>
|
||||
),
|
||||
"{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}": (
|
||||
<Radiofield
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
datafieldname={datafieldname}
|
||||
options={datafieldcontent}
|
||||
inline={false}
|
||||
hint={hint}
|
||||
form={form}
|
||||
formProps={formProps}
|
||||
parentField={parentField}
|
||||
parentFieldShowOnValue={parentFieldShowOnValue}
|
||||
validation={validation}
|
||||
setDocumentsList={setDocumentsList}
|
||||
documentList={documentList}
|
||||
requiredDocumentValue={requiredDocumentValue}
|
||||
requiredDocumentLabel={requiredDocumentLabel}
|
||||
/>
|
||||
),
|
||||
"{4273EDBD-AC1D-40d3-9FB2-095C621B552D}": (
|
||||
<Textfield
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
props={props}
|
||||
ticketnumber={ticketnumber}
|
||||
form={form}
|
||||
formProps={formProps}
|
||||
parentField={parentField}
|
||||
parentFieldShowOnValue={parentFieldShowOnValue}
|
||||
validation={validation}
|
||||
hint={hint}
|
||||
maxFieldLength={maxFieldLength}
|
||||
/>
|
||||
),
|
||||
"{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}": (
|
||||
<DateFieldPicker
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
form={form}
|
||||
formProps={formProps}
|
||||
parentField={parentField}
|
||||
parentFieldShowOnValue={parentFieldShowOnValue}
|
||||
validation={validation}
|
||||
dateStart={dateStart}
|
||||
dateEnd={dateEnd}
|
||||
hint={hint}
|
||||
/>
|
||||
),
|
||||
"{E0DECE4B-6FC8-4a8f-A065-082708572369}": (
|
||||
<MultiLinefield
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
form={form}
|
||||
formProps={formProps}
|
||||
parentField={parentField}
|
||||
parentFieldShowOnValue={parentFieldShowOnValue}
|
||||
validation={validation}
|
||||
maxFieldLength={maxFieldLength}
|
||||
hint={hint}
|
||||
/>
|
||||
),
|
||||
"{E0DECE4B-6666-4a8f-A065-082708572369}": (
|
||||
<RichMultiLinefield
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
form={form}
|
||||
formProps={formProps}
|
||||
parentField={parentField}
|
||||
parentFieldShowOnValue={parentFieldShowOnValue}
|
||||
validation={validation}
|
||||
maxFieldLength={maxFieldLength}
|
||||
hint={hint}
|
||||
/>
|
||||
),
|
||||
"{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}": (
|
||||
<NumericField
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
form={form}
|
||||
formProps={formProps}
|
||||
validation={validation}
|
||||
parentField={parentField}
|
||||
parentFieldShowOnValue={parentFieldShowOnValue}
|
||||
maxFieldLength={maxFieldLength}
|
||||
/>
|
||||
),
|
||||
"{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}": (
|
||||
<DecimalField
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
form={form}
|
||||
formProps={formProps}
|
||||
validation={validation}
|
||||
parentField={parentField}
|
||||
parentFieldShowOnValue={parentFieldShowOnValue}
|
||||
maxFieldLength={maxFieldLength}
|
||||
/>
|
||||
),
|
||||
"{16D63FD6-119B-4353-BDCA-18358721C3FE}": (
|
||||
<div className="govuk-!-margin-bottom-9">
|
||||
<FileUploadField
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
ticketnumber={ticketnumber}
|
||||
documentTypeCode={documentTypeCode}
|
||||
hint={hint}
|
||||
fileList={fileList}
|
||||
setFilesForAppeal={setFilesForAppeal}
|
||||
containerID={containerID}
|
||||
uploadCount={uploadCount}
|
||||
setFileCount={setFileCount}
|
||||
setUploadCount={setUploadCount}
|
||||
props={props?.props?.props}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
"{0273EDBD-AC1D-40d3-9FB2-095C621B552D}": (
|
||||
<FieldArrayForm
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
form={form}
|
||||
formProps={formProps}
|
||||
parentField={parentField}
|
||||
parentFieldShowOnValue={parentFieldShowOnValue}
|
||||
maxSubField={maxSubField}
|
||||
/>
|
||||
),
|
||||
"{9EF39988-22BB-4f0b-BBBE-64B5A3748AEE}": (
|
||||
<CheckBoxfield
|
||||
name={datafieldname}
|
||||
label={label}
|
||||
props={props}
|
||||
form={form}
|
||||
formProps={formProps}
|
||||
parentField={parentField}
|
||||
parentFieldShowOnValue={parentFieldShowOnValue}
|
||||
validation={validation}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">{whichFieldType(props.fieldType)}</div>
|
||||
<div className="govuk-grid-row">
|
||||
{fieldTypeMap[fieldType] || (
|
||||
<Textfield name={datafieldname} label={label} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user