refactor
This commit is contained in:
@@ -24,25 +24,15 @@ let AdvancedSearch = (props) => {
|
||||
|
||||
//console.log("props here:", props.props);
|
||||
|
||||
const appealOptionsObj = _.isEmpty(props)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.appealTypeOptions)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.appealTypeOptions.value)
|
||||
? [{}]
|
||||
: props.appealType.appealTypeOptions.value;
|
||||
const appealOptionsObj =
|
||||
props?.appealType?.appealTypeOptions?.value?.length > 0
|
||||
? props.appealType.appealTypeOptions.value
|
||||
: [{}];
|
||||
|
||||
let lpaOptionsObj = _.isEmpty(props)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData.LPAData)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData.LPAData)
|
||||
? [{}]
|
||||
: props.LPAData.LPAData.value;
|
||||
const lpaOptionsObj =
|
||||
props?.LPAData?.LPAData?.value?.length > 0
|
||||
? props.LPAData.LPAData.value
|
||||
: [{}];
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
|
||||
+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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,31 +4,65 @@ import { connect } from "react-redux";
|
||||
import { setCurrentSection } from "../../store/appealType/action";
|
||||
import { FieldsTranslations } from "../elements";
|
||||
|
||||
const BuildProgress = (props) => {
|
||||
let { t } = useTranslation();
|
||||
const BuildProgress = ({
|
||||
progObj,
|
||||
titleList,
|
||||
currentSection,
|
||||
documentListObj,
|
||||
formObjXML,
|
||||
mandatoryFieldsData,
|
||||
gotoSection,
|
||||
setCurrentSection,
|
||||
props: outerProps,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const {
|
||||
progObj,
|
||||
titleList,
|
||||
currentSection,
|
||||
documentListObj,
|
||||
formObjXML,
|
||||
mandatoryFieldsData,
|
||||
gotoSection,
|
||||
setCurrentSection,
|
||||
} = props;
|
||||
const parser = new DOMParser();
|
||||
// Helper to safely access nested form values
|
||||
const getFormValue = (field) =>
|
||||
outerProps?.props?.form?.appealForm?.values?.[field];
|
||||
|
||||
//const progObj = getProgressObj(
|
||||
// formObjXML,
|
||||
// titleList,
|
||||
// mandatoryFieldsData,
|
||||
// props
|
||||
// );
|
||||
const renderDocumentList = () => {
|
||||
const formValues = outerProps?.props?.form?.appealForm?.values || {};
|
||||
|
||||
//console.log(progObj);
|
||||
return (
|
||||
<>
|
||||
<li>{t("newappeal:application-form")}</li>
|
||||
|
||||
{formValues.pinswg_developmentdescriptionchanged === "true" && (
|
||||
<li>Description of development change confirmation</li>
|
||||
)}
|
||||
|
||||
{formValues.pinswg_caseworkreason === "846040005" && (
|
||||
<li>{t("newappeal:registration-of-application-letter")}</li>
|
||||
)}
|
||||
|
||||
{formValues.pinswg_caseworkreason === "846040000" && (
|
||||
<li>Decision notice</li>
|
||||
)}
|
||||
|
||||
{formValues.pinswg_attachsoc === "true" && (
|
||||
<li>{t("newappeal:statement-of-case")}</li>
|
||||
)}
|
||||
|
||||
{formValues.pinswg_attachcostapplication === "true" && (
|
||||
<li>{t("newappeal:cost-application")}</li>
|
||||
)}
|
||||
|
||||
{formValues.pinswg_s106unilateralsubmitted === "true" && (
|
||||
<li>Planning obligation (S106/Unilateral)</li>
|
||||
)}
|
||||
|
||||
{/* Additional document list items from documentListObj if needed */}
|
||||
{/* {Object.entries(documentListObj).map(([key, value]) => (
|
||||
<li key={key}>{value}</li>
|
||||
))} */}
|
||||
|
||||
<li>{t("newappeal:site-location-plan")}</li>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -40,16 +74,17 @@ const BuildProgress = (props) => {
|
||||
<h2 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey progress-heading">
|
||||
{t("newappeal:new-appeal-progress-nav-label")}:{" "}
|
||||
<span className="progress-case-reference">
|
||||
{props.props.appealType.caseReference.ticketnumber}
|
||||
{
|
||||
outerProps?.props?.appealType?.caseReference
|
||||
?.ticketnumber
|
||||
}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
{/* <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" /> */}
|
||||
|
||||
<div
|
||||
id="step-by-step-navigation"
|
||||
data-module="gemstepnav"
|
||||
className="app-step-nav app-step-nav--active"
|
||||
className="app-step-nav app-step-nav--active"
|
||||
data-id="e01e924b-9c7c-4c71-8241-66a575c2f61f"
|
||||
data-show-text="show"
|
||||
data-hide-text="hide"
|
||||
@@ -57,290 +92,105 @@ const BuildProgress = (props) => {
|
||||
data-hide-all-text="Hide all"
|
||||
>
|
||||
<ol className="app-step-nav__steps">
|
||||
{Object.keys(progObj).map((key, index) => (
|
||||
<li
|
||||
key={key}
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(progObj[index].allFieldsComplete
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id={FieldsTranslations(progObj[index].title)
|
||||
.toString()
|
||||
.replace(/\s+/g, "-")
|
||||
.toLowerCase()}
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position={index}
|
||||
{Object.keys(progObj).map((key, index) => {
|
||||
const step = progObj[index];
|
||||
const stepId = FieldsTranslations(step.title)
|
||||
.toString()
|
||||
.replace(/\s+/g, "-")
|
||||
.toLowerCase();
|
||||
|
||||
return (
|
||||
<li
|
||||
key={key}
|
||||
className={`app-step-nav__step js-step app-step-nav__step--active ${
|
||||
step.allFieldsComplete
|
||||
? "sectionComplete"
|
||||
: "sectionIncomplete"
|
||||
}`}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id={stepId}
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
{index + 1}
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel"
|
||||
data-position={index}
|
||||
>
|
||||
<h3 className="app-step-nav__title">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
{index + 1}
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(
|
||||
parseInt(key) + 1
|
||||
);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls={
|
||||
"step-panel-" +
|
||||
FieldsTranslations(
|
||||
progObj[index].title
|
||||
)
|
||||
.toString()
|
||||
.replace(/\s+/g, "-")
|
||||
.toLowerCase()
|
||||
}
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{FieldsTranslations(
|
||||
progObj[index].title
|
||||
)}{" "}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{/* <li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active"
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position={10}
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
{progObj.length + 1}
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
gotoSection(
|
||||
parseInt(key, 10) +
|
||||
1
|
||||
);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls={`step-panel-${stepId}`}
|
||||
>
|
||||
:
|
||||
</span>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{FieldsTranslations(
|
||||
step.title
|
||||
)}{" "}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(progObj.length + 1);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls={
|
||||
"step-panel-confirmation"
|
||||
}
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
Confirmation
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li> */}
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div>
|
||||
<section>
|
||||
<h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
|
||||
{t("newappeal:new-appeal-documentlist-nav")}:
|
||||
</h3>
|
||||
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
|
||||
<ol className="govuk-list document-list">
|
||||
<ul className="govuk-list ">
|
||||
<li className="at-nav__page">
|
||||
<ol className="govuk-list govuk-list--bullet">
|
||||
<li>{t("newappeal:application-form")}</li>
|
||||
|
||||
{props.props.props.form.hasOwnProperty(
|
||||
"appealForm"
|
||||
) &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].hasOwnProperty("values") &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].values.hasOwnProperty(
|
||||
"pinswg_developmentdescriptionchanged"
|
||||
)
|
||||
? props.props.props.form["appealForm"]
|
||||
.values
|
||||
.pinswg_developmentdescriptionchanged ==
|
||||
"true" && (
|
||||
<li>
|
||||
Description of development change
|
||||
confirmation
|
||||
</li>
|
||||
)
|
||||
: ""}
|
||||
|
||||
{props.props.props.form.hasOwnProperty(
|
||||
"appealForm"
|
||||
) &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].hasOwnProperty("values") &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].values.hasOwnProperty("pinswg_caseworkreason")
|
||||
? props.props.props.form["appealForm"]
|
||||
.values.pinswg_caseworkreason ==
|
||||
"846040005" && (
|
||||
<li>
|
||||
{t(
|
||||
"newappeal:registration-of-application-letter"
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
: ""}
|
||||
|
||||
{props.props.props.form.hasOwnProperty(
|
||||
"appealForm"
|
||||
) &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].hasOwnProperty("values") &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].values.hasOwnProperty("pinswg_caseworkreason")
|
||||
? props.props.props.form["appealForm"]
|
||||
.values.pinswg_caseworkreason ==
|
||||
"846040000" && (
|
||||
<li>Decision notice</li>
|
||||
)
|
||||
: ""}
|
||||
|
||||
{props.props.props.form.hasOwnProperty(
|
||||
"appealForm"
|
||||
) &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].hasOwnProperty("values") &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].values.hasOwnProperty("pinswg_attachsoc")
|
||||
? props.props.props.form["appealForm"]
|
||||
.values.pinswg_attachsoc ==
|
||||
"true" && (
|
||||
<li>
|
||||
{t("newappeal:statement-of-case")}
|
||||
</li>
|
||||
)
|
||||
: ""}
|
||||
|
||||
{props.props.props.form.hasOwnProperty(
|
||||
"appealForm"
|
||||
) &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].hasOwnProperty("values") &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].values.hasOwnProperty(
|
||||
"pinswg_attachcostapplication"
|
||||
)
|
||||
? props.props.props.form["appealForm"]
|
||||
.values
|
||||
.pinswg_attachcostapplication ==
|
||||
"true" && (
|
||||
<li>
|
||||
{t("newappeal:cost-application")}
|
||||
</li>
|
||||
)
|
||||
: ""}
|
||||
|
||||
{props.props.props.form.hasOwnProperty(
|
||||
"appealForm"
|
||||
) &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].hasOwnProperty("values") &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].values.hasOwnProperty(
|
||||
"pinswg_s106unilateralsubmitted"
|
||||
)
|
||||
? props.props.props.form["appealForm"]
|
||||
.values
|
||||
.pinswg_s106unilateralsubmitted ==
|
||||
"true" && (
|
||||
<li>
|
||||
Planning obligation
|
||||
(S106/Unilateral)
|
||||
</li>
|
||||
)
|
||||
: ""}
|
||||
|
||||
{/* {Object.keys(documentListObj).length > 0 &&
|
||||
Object.entries(documentListObj).map(
|
||||
([key, value]) => {
|
||||
return <li key={key}>{value}</li>;
|
||||
}
|
||||
)} */}
|
||||
|
||||
<li>{t("newappeal:site-location-plan")}</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
<li className="at-nav__page">
|
||||
<ol className="govuk-list govuk-list--bullet">
|
||||
{renderDocumentList()}
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
initialValues: state.appealType.caseReference.caseDetails,
|
||||
//form: state.form,
|
||||
};
|
||||
};
|
||||
const mapStateToProps = (state) => ({
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
initialValues: state.appealType.caseReference.caseDetails,
|
||||
//form: state.form,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
gotoSection: (thisSection) => {
|
||||
dispatch(setCurrentSection(thisSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
gotoSection: (thisSection) => dispatch(setCurrentSection(thisSection)),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(BuildProgress);
|
||||
|
||||
@@ -376,25 +376,15 @@ let CreateCase = (props) => {
|
||||
|
||||
const { LPAData, onSubmit, handleSubmit, formData } = props;
|
||||
|
||||
const appealOptionsObj = _.isEmpty(props)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.appealTypeOptions)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.appealTypeOptions.value)
|
||||
? [{}]
|
||||
: props.appealType.appealTypeOptions.value;
|
||||
const appealOptionsObj =
|
||||
props?.appealType?.appealTypeOptions?.value?.length > 0
|
||||
? props.appealType.appealTypeOptions.value
|
||||
: [{}];
|
||||
|
||||
let lpaOptionsObj = _.isEmpty(props)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData.LPAData)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData.LPAData)
|
||||
? [{}]
|
||||
: props.LPAData.LPAData.value;
|
||||
const lpaOptionsObj =
|
||||
props?.LPAData?.LPAData?.value?.length > 0
|
||||
? props.LPAData.LPAData.value
|
||||
: [{}];
|
||||
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
|
||||
@@ -166,35 +166,20 @@ let AdvancedSearch = (props) => {
|
||||
submitting,
|
||||
} = props;
|
||||
|
||||
const appealOptionsObj = _.isEmpty(props)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.appealTypeOptions)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.appealTypeOptions.value)
|
||||
? [{}]
|
||||
: props.appealType.appealTypeOptions.value;
|
||||
const appealOptionsObj =
|
||||
props?.appealType?.appealTypeOptions?.value?.length > 0
|
||||
? props.appealType.appealTypeOptions.value
|
||||
: [{}];
|
||||
|
||||
const projecttypeOptionsObj = _.isEmpty(props)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.projectTypeOptions)
|
||||
? [{}]
|
||||
: _.isEmpty(props.appealType.projectTypeOptions.value)
|
||||
? [{}]
|
||||
: props.appealType.projectTypeOptions.value;
|
||||
const projecttypeOptionsObj =
|
||||
props?.appealType?.projectTypeOptions?.value?.length > 0
|
||||
? props.appealType.projectTypeOptions.value
|
||||
: [{}];
|
||||
|
||||
let lpaOptionsObj = _.isEmpty(props)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData.LPAData)
|
||||
? [{}]
|
||||
: _.isEmpty(props.LPAData.LPAData)
|
||||
? [{}]
|
||||
: props.LPAData.LPAData.value;
|
||||
const lpaOptionsObj =
|
||||
props?.LPAData?.LPAData?.value?.length > 0
|
||||
? props.LPAData.LPAData.value
|
||||
: [{}];
|
||||
|
||||
const RenderLPAList = ({
|
||||
name,
|
||||
|
||||
Reference in New Issue
Block a user