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 { FieldsTranslations } from "../elements";
import BuildProgress from "./buildprogress"; 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) => { let BuildSection = (props) => {
const [currentSectionSelected, setCurrentSectionSelected] = useState(1); const [currentSectionSelected, setCurrentSectionSelected] = useState(1);
@@ -354,11 +359,10 @@ let BuildSection = (props) => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}; };
let errorsobj = {}; const getErrorItems = () => {
const ShowErrorHeader = (props) => { let errorsobj = _.keys(
errorsobj = props.props.appealForm.syncErrors; _.get(props, "props.form.appealForm.syncErrors", {})
errorsobj = _.keys(errorsobj); );
const getErrorLabel = (whichField) => { const getErrorLabel = (whichField) => {
var doc = parseXml(props.formXML); var doc = parseXml(props.formXML);
var errorFieldLabel = selectErrorFieldLabelDescription( var errorFieldLabel = selectErrorFieldLabelDescription(
@@ -369,47 +373,15 @@ let BuildSection = (props) => {
return errorFieldLabel[0].value; return errorFieldLabel[0].value;
}; };
const ShowErrors = () => { let errorItems = [];
let errorList = []; for (let i = 0; i < errorsobj.length; ++i) {
for (let i = 0; i < errorsobj.length; ++i) { errorItems.push({
//get label from error key - search rowxml for id = errorobj "field": errorsobj[i],
"label": getErrorLabel(errorsobj[i])
});
}
errorList.push( return errorItems;
<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>
) : (
""
);
}; };
const hasUploadFiles = () => { const hasUploadFiles = () => {
@@ -425,19 +397,12 @@ let BuildSection = (props) => {
return ( return (
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds wgForm "> <div className="govuk-grid-column-two-thirds wgForm ">
<h1 className="govuk-heading-m "> <SectionHeader title={FieldsTranslations(titles[0].value)} />
{FieldsTranslations(titles[0].value)}
</h1>
<form onSubmit={handleSubmit(onHandleSubmit)}> <form onSubmit={handleSubmit(onHandleSubmit)}>
{hasErrors == true ? ( <ErrorSummary
<ShowErrorHeader hasErrors={hasErrors == true}
hasErrors={hasErrors} errorItems={getErrorItems()}
props={props.props.form} />
formXML={formXML}
/>
) : (
""
)}
<BuildRow <BuildRow
rowXML={rowXML} rowXML={rowXML}
whichSection={props.whichSection} whichSection={props.whichSection}
@@ -456,7 +421,7 @@ let BuildSection = (props) => {
} }
/> />
<div className="govuk-button-group"> <PrimaryActionButtons>
{props.sectionCount != currentSection ? ( {props.sectionCount != currentSection ? (
<> <>
<button <button
@@ -493,20 +458,13 @@ let BuildSection = (props) => {
</button> </button>
{currentSection > 1 && {currentSection > 1 &&
(savingStatus ? ( (savingStatus ? (
<span className=" progress-save-active"> <SaveStatusIndicator
{router.locale == "cy" text={
? "Nôl data" router.locale == "cy"
: "Saving data"} ? "Nôl data"
<img : "Saving data"
className="data-loading-icon" }
src="/assets/images/loading.gif" />
alt={
router.locale == "cy"
? "Nôl data"
: "Saving data"
}
/>
</span>
) : ( ) : (
<button <button
className="govuk-button progress-save " className="govuk-button progress-save "
@@ -562,20 +520,13 @@ let BuildSection = (props) => {
{t("common:submit-button")}{" "} {t("common:submit-button")}{" "}
</button> </button>
{savingStatus ? ( {savingStatus ? (
<span className=" progress-save-active"> <SaveStatusIndicator
{router.locale == "cy" text={
? "Nôl data" router.locale == "cy"
: "Saving data"} ? "Nôl data"
<img : "Saving data"
className="data-loading-icon" }
src="/assets/images/loading.gif" />
alt={
router.locale == "cy"
? "Nôl data"
: "Saving data"
}
/>
</span>
) : ( ) : (
<button <button
className="govuk-button progress-save " className="govuk-button progress-save "
@@ -621,29 +572,25 @@ let BuildSection = (props) => {
) : ( ) : (
"" ""
)} */} )} */}
</div> </PrimaryActionButtons>
</form> </form>
</div> </div>
<div className="govuk-grid-column-one-third"> <SidebarProgressPanel>
<div className="at-nav-container"> {/* <span>
{/* <span> Last section is {lastIndex} - {currentSection}
Last section is {lastIndex} - {currentSection} </span> */}
</span> */} <BuildProgress
<BuildProgress progObj={progObj}
progObj={progObj} props={props}
props={props} titleList={titleList}
titleList={titleList} documentListObj={documentListObj}
documentListObj={documentListObj} formObjXML={formXML}
formObjXML={formXML} mandatoryFieldsData={mandatoryFieldsData}
mandatoryFieldsData={mandatoryFieldsData} currentSection={currentSection}
currentSection={currentSection} initialValues={props.initialValues}
initialValues={props.initialValues} setCurrentSection={setCurrentSection}
setCurrentSection={setCurrentSection} />
/> </SidebarProgressPanel>
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
</div>
</div>
</div> </div>
); );
}; };
context/refactor-tracker.md
+2 -2
View File
@@ -4,7 +4,7 @@ Base branch for this tracker: `refactor`
## Status ## Status
Current slice: Slice 4 — BuildSection UI Extraction Current slice: Slice 5 — BuildCheckSection UI Extraction
Status: READY TO START Status: READY TO START
--- ---
@@ -50,7 +50,7 @@ Status: COMPLETE
### Slice 4 — BuildSection UI Extraction ### Slice 4 — BuildSection UI Extraction
Status: NOT STARTED Status: COMPLETE
--- ---