new appeal progress pattern
This commit is contained in:
@@ -5,6 +5,7 @@ import { connect } from "react-redux";
|
||||
import xpath from "xpath";
|
||||
import { setCurrentSection } from "../../store/appealType/action";
|
||||
import { FieldsTranslations } from "../elements";
|
||||
import { getProgressObj } from "../utils";
|
||||
|
||||
const BuildProgress = (props) => {
|
||||
let { t } = useTranslation();
|
||||
@@ -12,185 +13,23 @@ const BuildProgress = (props) => {
|
||||
const { locale } = router;
|
||||
|
||||
const {
|
||||
progObj,
|
||||
titleList,
|
||||
currentSection,
|
||||
documentListObj,
|
||||
formObjXML,
|
||||
mandatoryFieldsData,
|
||||
gotoSection,
|
||||
setCurrentSection,
|
||||
} = props;
|
||||
const parser = new DOMParser();
|
||||
|
||||
const BuildFormObj = (formObjXML) => {
|
||||
var doc = parser.parseFromString(formObjXML, "text/xml");
|
||||
|
||||
var tabs = xpath.select("//form/tabs/tab[*]", doc);
|
||||
|
||||
const formObj = Object.keys(tabs).map((key, index) => {
|
||||
var sectionXML = xpath.select(
|
||||
"//tabs/tab[" +
|
||||
(index + 1) +
|
||||
"]//rows/row/*/control[not(@parentField)]/../..",
|
||||
doc
|
||||
);
|
||||
|
||||
return BuildRowObj(sectionXML, titleList[key].value);
|
||||
});
|
||||
|
||||
const progressObj = Object.keys(formObj).map((key, index) => {
|
||||
let fieldObj = formObj[key].fieldsrowObj;
|
||||
|
||||
let rowCount = 0;
|
||||
typeof props.props.initialValues != "undefined" &&
|
||||
Object.keys(fieldObj).map((key, index) => {
|
||||
fieldObj[key].datafieldname in props.props.initialValues &&
|
||||
props.props.initialValues[
|
||||
fieldObj[key].datafieldname
|
||||
] != null &&
|
||||
rowCount++;
|
||||
});
|
||||
|
||||
return {
|
||||
"title": titleList[key].value,
|
||||
rowCount,
|
||||
"totalFields": formObj[key].fieldsTotal,
|
||||
"allFieldsComplete": rowCount == formObj[key].fieldsTotal,
|
||||
};
|
||||
});
|
||||
|
||||
return progressObj;
|
||||
};
|
||||
|
||||
const BuildRowObj = (rowXML, titleList) => {
|
||||
const rowObj = Object.keys(rowXML).map((key, index) => {
|
||||
var doc = parser.parseFromString(rowXML[key].outerHTML, "text/xml");
|
||||
if (_.isEmpty(rowXML[key].innerHTML)) {
|
||||
("");
|
||||
} else {
|
||||
var rows = xpath.select("//label/@description", doc);
|
||||
var fieldtype = xpath.select("//@classid", doc);
|
||||
var validation = xpath.select("//@validation", doc);
|
||||
var datafieldname = xpath.select("//@datafieldname", doc);
|
||||
var datafieldcontent = xpath.select("//@datafieldcontent", doc);
|
||||
var parentField = xpath.select("//@parentField", doc);
|
||||
|
||||
var parentFieldShowOnValue = xpath.select(
|
||||
"//@parentFieldShowOnValue",
|
||||
doc
|
||||
);
|
||||
|
||||
var requiredDocumentValue = xpath.select(
|
||||
"//@requiredDocumentValue",
|
||||
doc
|
||||
);
|
||||
|
||||
var requiredDocumentLabel = xpath.select(
|
||||
"//@requiredDocumentLabel",
|
||||
doc
|
||||
);
|
||||
|
||||
var hint = xpath.select("//label/@hint", doc);
|
||||
var dateStart = xpath.select("//@dateStart", doc);
|
||||
var dateEnd = xpath.select("//@dateEnd", doc);
|
||||
|
||||
hint = !_.isEmpty(hint) && hint[0].value;
|
||||
|
||||
validation = !_.isEmpty(validation) ? validation[0].value : [];
|
||||
|
||||
parentField = !_.isEmpty(parentField) && parentField[0].value;
|
||||
|
||||
parentFieldShowOnValue =
|
||||
!_.isEmpty(parentFieldShowOnValue) &&
|
||||
parentFieldShowOnValue[0].value;
|
||||
|
||||
datafieldcontent =
|
||||
!_.isEmpty(datafieldcontent) && datafieldcontent[0].value;
|
||||
|
||||
requiredDocumentValue =
|
||||
!_.isEmpty(requiredDocumentValue) &&
|
||||
requiredDocumentValue[0].value;
|
||||
|
||||
requiredDocumentLabel =
|
||||
!_.isEmpty(requiredDocumentLabel) &&
|
||||
requiredDocumentLabel[0].value;
|
||||
|
||||
dateStart = !_.isEmpty(dateStart) && dateStart[0].value;
|
||||
|
||||
dateEnd = !_.isEmpty(dateEnd) && dateEnd[0].value;
|
||||
|
||||
const isRequiredField = jsonpath.query(
|
||||
mandatoryFieldsData,
|
||||
"$..value[?(@.LogicalName=='" +
|
||||
datafieldname[0].value +
|
||||
"')]"
|
||||
);
|
||||
|
||||
if (datafieldname[0].value == "pinswg_fileUpload") {
|
||||
return {
|
||||
"fieldType": fieldtype[0].value,
|
||||
"label": rows[0].value,
|
||||
"datafieldname": datafieldname[0].value,
|
||||
"key": key,
|
||||
"picklistData": props.props.formData.pickListData,
|
||||
"mandatoryFieldsData": mandatoryFieldsData,
|
||||
};
|
||||
} else {
|
||||
if (typeof isRequiredField[0] != "undefined") {
|
||||
if (isRequiredField[0].RequiredLevel.Value != "None") {
|
||||
//console.log(datafieldname[0].value, validation);
|
||||
return {
|
||||
"fieldType": fieldtype[0].value,
|
||||
"label": rows[0].value,
|
||||
"datafieldname": datafieldname[0].value,
|
||||
"datafieldcontent": datafieldcontent,
|
||||
"parentField": parentField,
|
||||
"parentFieldShowOnValue":
|
||||
parentFieldShowOnValue,
|
||||
"key": key,
|
||||
"picklistData":
|
||||
props.props.formData.pickListData,
|
||||
"mandatoryFieldsData": mandatoryFieldsData,
|
||||
"hint": hint,
|
||||
"requiredDocumentLabel": requiredDocumentLabel,
|
||||
"requiredDocumentValue": requiredDocumentValue,
|
||||
"validation": validation,
|
||||
"dateStart": dateStart,
|
||||
"dateEnd": dateEnd,
|
||||
"setDocumentsList":
|
||||
props.props.setDocumentsList,
|
||||
"documentList":
|
||||
props.props.appealType.documentList,
|
||||
};
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
rowObj = rowObj.filter(function (el) {
|
||||
return el != null;
|
||||
});
|
||||
|
||||
const filterUnwanted = (rowObj) => {
|
||||
const required = rowObj.filter((el) => {
|
||||
return !_.isEmpty(el.validation);
|
||||
});
|
||||
return required;
|
||||
};
|
||||
|
||||
return {
|
||||
"title": titleList,
|
||||
"validationFieldsTotal": filterUnwanted(rowObj).length,
|
||||
"fieldsTotal": rowObj.length,
|
||||
"fieldsrowObj": rowObj,
|
||||
};
|
||||
};
|
||||
|
||||
const progObj = BuildFormObj(formObjXML);
|
||||
// const progObj = getProgressObj(
|
||||
// formObjXML,
|
||||
// titleList,
|
||||
// mandatoryFieldsData,
|
||||
// props
|
||||
// );
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -205,9 +44,82 @@ const BuildProgress = (props) => {
|
||||
{props.props.appealType.caseReference.ticketnumber}
|
||||
</span>
|
||||
</h2>
|
||||
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
|
||||
|
||||
<ol className="govuk-list" id="progress-list">
|
||||
{/* <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"
|
||||
data-id="e01e924b-9c7c-4c71-8241-66a575c2f61f"
|
||||
data-show-text="show"
|
||||
data-hide-text="hide"
|
||||
data-show-all-text="Show all"
|
||||
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="check-youre-allowed-to-drive"
|
||||
>
|
||||
<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 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-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{FieldsTranslations(
|
||||
progObj[index].title
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{/* <ol className="govuk-list" id="progress-list">
|
||||
<ul className="govuk-list ">
|
||||
<li className="at-nav__page">
|
||||
<ol className="govuk-list">
|
||||
@@ -222,37 +134,40 @@ const BuildProgress = (props) => {
|
||||
</li>
|
||||
) : (
|
||||
<li key={key}>
|
||||
{props.props.appealType
|
||||
.formComplete == "true" ||
|
||||
parseInt(key) + 1 <
|
||||
currentSection ||
|
||||
progObj[index].allFieldsComplete ==
|
||||
true ? (
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(
|
||||
parseInt(key) + 1
|
||||
);
|
||||
}}
|
||||
>
|
||||
{FieldsTranslations(
|
||||
progObj[index].title
|
||||
)}
|
||||
</a>
|
||||
) : (
|
||||
FieldsTranslations(
|
||||
{" "}
|
||||
<span
|
||||
title={
|
||||
progObj[index].title +
|
||||
` complete`
|
||||
}
|
||||
className={
|
||||
progObj[index]
|
||||
.allFieldsComplete ==
|
||||
true
|
||||
? `sectionCompleteTick`
|
||||
: `sectionIncomplete`
|
||||
}
|
||||
></span>
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(
|
||||
parseInt(key) + 1
|
||||
);
|
||||
}}
|
||||
>
|
||||
{FieldsTranslations(
|
||||
progObj[index].title
|
||||
)
|
||||
)}
|
||||
)}
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</ol>
|
||||
</ol> */}
|
||||
</nav>
|
||||
|
||||
{Object.keys(documentListObj).length > 0 && (
|
||||
|
||||
Reference in New Issue
Block a user