robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 2237: refactor(newappeal): extract BuildSection presentation components (Slice 4)

Browse Source 
refactor(newappeal): extract BuildSection presentation components (Slice 4)

Related work items: #22583
This commit is contained in:
Robert Bond
2026-04-13 10:15:56 +00:00
parent d0f667ffbb
commit 869264b7fa
7 changed files with 123 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/newappeal/buildSection/ErrorSummary.js
+31
View File
@@ -0,0 +1,31 @@
const ErrorSummary = ({ hasErrors, errorItems }) => {
return hasErrors ? (
<div
className="govuk-error-summary"
aria-labelledby="error-summary-title"
role="alert"
tabIndex="-1"
data-module="govuk-error-summary"
>
<h2 className="govuk-error-summary__title" id="error-summary-title">
The following fields have a problem :
</h2>
<div className="govuk-error-summary__body">
<ul className="govuk-list govuk-error-summary__list">
{errorItems.map((item, i) => (
<li key={i}>
<a href={"#" + item.field + "_label"}>
{" "}
{item.label}
</a>
</li>
))}
</ul>
</div>
</div>
) : (
""
);
};
export default ErrorSummary;
components/newappeal/buildSection/PrimaryActionButtons.js
+5
View File
@@ -0,0 +1,5 @@
const PrimaryActionButtons = ({ children }) => {
return <div className="govuk-button-group">{children}</div>;
};
export default PrimaryActionButtons;
components/newappeal/buildSection/SaveStatusIndicator.js
+14
View File
@@ -0,0 +1,14 @@
const SaveStatusIndicator = ({ text }) => {
return (
<span className=" progress-save-active">
{text}
<img
className="data-loading-icon"
src="/assets/images/loading.gif"
alt={text}
/>
</span>
);
};
export default SaveStatusIndicator;
components/newappeal/buildSection/SectionHeader.js
+5
View File
@@ -0,0 +1,5 @@
const SectionHeader = ({ title }) => {
return <h1 className="govuk-heading-m ">{title}</h1>;
};
export default SectionHeader;
components/newappeal/buildSection/SidebarProgressPanel.js
+12
View File
@@ -0,0 +1,12 @@
const SidebarProgressPanel = ({ children }) => {
return (
<div className="govuk-grid-column-one-third">
<div className="at-nav-container">
{children}
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
</div>
</div>
);
};
export default SidebarProgressPanel;
components/newappeal/buildsection.js
+54 -107
View File
@@ -34,6 +34,11 @@ import {
import { FieldsTranslations } from "../elements";
import BuildProgress from "./buildprogress";
import ErrorSummary from "./buildSection/ErrorSummary";
import PrimaryActionButtons from "./buildSection/PrimaryActionButtons";
import SaveStatusIndicator from "./buildSection/SaveStatusIndicator";
import SectionHeader from "./buildSection/SectionHeader";
import SidebarProgressPanel from "./buildSection/SidebarProgressPanel";
let BuildSection = (props) => {
const [currentSectionSelected, setCurrentSectionSelected] = useState(1);
@@ -354,11 +359,10 @@ let BuildSection = (props) => {
window.scrollTo(0, 0);
};
let errorsobj = {};
const ShowErrorHeader = (props) => {
errorsobj = props.props.appealForm.syncErrors;
errorsobj = _.keys(errorsobj);
const getErrorItems = () => {
let errorsobj = _.keys(
_.get(props, "props.form.appealForm.syncErrors", {})
);
const getErrorLabel = (whichField) => {
var doc = parseXml(props.formXML);
var errorFieldLabel = selectErrorFieldLabelDescription(
@@ -369,47 +373,15 @@ let BuildSection = (props) => {
return errorFieldLabel[0].value;
};
const ShowErrors = () => {
let errorList = [];
for (let i = 0; i < errorsobj.length; ++i) {
//get label from error key - search rowxml for id = errorobj
let errorItems = [];
for (let i = 0; i < errorsobj.length; ++i) {
errorItems.push({
"field": errorsobj[i],
"label": getErrorLabel(errorsobj[i])
});
}
errorList.push(
<li key={i}>
<a href={"#" + errorsobj[i] + "_label"}>
{" "}
{getErrorLabel(errorsobj[i])}
</a>
</li>
);
}
return errorList;
};
return !_.isEmpty(errorsobj) ? (
<div
className="govuk-error-summary"
aria-labelledby="error-summary-title"
role="alert"
tabIndex="-1"
data-module="govuk-error-summary"
>
<h2
className="govuk-error-summary__title"
id="error-summary-title"
>
The following fields have a problem :
</h2>
<div className="govuk-error-summary__body">
<ul className="govuk-list govuk-error-summary__list">
<ShowErrors />
</ul>
</div>
</div>
) : (
""
);
return errorItems;
};
const hasUploadFiles = () => {
@@ -425,19 +397,12 @@ let BuildSection = (props) => {
return (
<div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds wgForm ">
<h1 className="govuk-heading-m ">
{FieldsTranslations(titles[0].value)}
</h1>
<SectionHeader title={FieldsTranslations(titles[0].value)} />
<form onSubmit={handleSubmit(onHandleSubmit)}>
{hasErrors == true ? (
<ShowErrorHeader
hasErrors={hasErrors}
props={props.props.form}
formXML={formXML}
/>
) : (
""
)}
<ErrorSummary
hasErrors={hasErrors == true}
errorItems={getErrorItems()}
/>
<BuildRow
rowXML={rowXML}
whichSection={props.whichSection}
@@ -456,7 +421,7 @@ let BuildSection = (props) => {
}
/>
<div className="govuk-button-group">
<PrimaryActionButtons>
{props.sectionCount != currentSection ? (
<>
<button
@@ -493,20 +458,13 @@ let BuildSection = (props) => {
</button>
{currentSection > 1 &&
(savingStatus ? (
<span className=" progress-save-active">
{router.locale == "cy"
? "Nôl data"
: "Saving data"}
<img
className="data-loading-icon"
src="/assets/images/loading.gif"
alt={
router.locale == "cy"
? "Nôl data"
: "Saving data"
}
/>
</span>
<SaveStatusIndicator
text={
router.locale == "cy"
? "Nôl data"
: "Saving data"
}
/>
) : (
<button
className="govuk-button progress-save "
@@ -562,20 +520,13 @@ let BuildSection = (props) => {
{t("common:submit-button")}{" "}
</button>
{savingStatus ? (
<span className=" progress-save-active">
{router.locale == "cy"
? "Nôl data"
: "Saving data"}
<img
className="data-loading-icon"
src="/assets/images/loading.gif"
alt={
router.locale == "cy"
? "Nôl data"
: "Saving data"
}
/>
</span>
<SaveStatusIndicator
text={
router.locale == "cy"
? "Nôl data"
: "Saving data"
}
/>
) : (
<button
className="govuk-button progress-save "
@@ -621,29 +572,25 @@ let BuildSection = (props) => {
) : (
""
)} */}
</div>
</PrimaryActionButtons>
</form>
</div>
<div className="govuk-grid-column-one-third">
<div className="at-nav-container">
{/* <span>
Last section is {lastIndex} - {currentSection}
</span> */}
<BuildProgress
progObj={progObj}
props={props}
titleList={titleList}
documentListObj={documentListObj}
formObjXML={formXML}
mandatoryFieldsData={mandatoryFieldsData}
currentSection={currentSection}
initialValues={props.initialValues}
setCurrentSection={setCurrentSection}
/>
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
</div>
</div>
<SidebarProgressPanel>
{/* <span>
Last section is {lastIndex} - {currentSection}
</span> */}
<BuildProgress
progObj={progObj}
props={props}
titleList={titleList}
documentListObj={documentListObj}
formObjXML={formXML}
mandatoryFieldsData={mandatoryFieldsData}
currentSection={currentSection}
initialValues={props.initialValues}
setCurrentSection={setCurrentSection}
/>
</SidebarProgressPanel>
</div>
);
};
context/refactor-tracker.md
+2 -2
View File
@@ -4,7 +4,7 @@ Base branch for this tracker: `refactor`
## Status
Current slice: Slice 4 — BuildSection UI Extraction
Current slice: Slice 5 — BuildCheckSection UI Extraction
Status: READY TO START
---
@@ -50,7 +50,7 @@ Status: COMPLETE
### Slice 4 — BuildSection UI Extraction
Status: NOT STARTED
Status: COMPLETE
---