303 lines
12 KiB
JavaScript
303 lines
12 KiB
JavaScript
import jsonpath from "jsonpath";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import { useRouter } from "next/router";
|
|
import { connect } from "react-redux";
|
|
import xpath from "xpath";
|
|
import { setCurrentSection } from "../../store/appealType/action";
|
|
import { FieldsTranslations } from "../elements";
|
|
|
|
const BuildProgress = (props) => {
|
|
let { t } = useTranslation();
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
|
|
const {
|
|
titleList,
|
|
currentSection,
|
|
documentListObj,
|
|
formObjXML,
|
|
mandatoryFieldsData,
|
|
gotoSection,
|
|
} = 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);
|
|
|
|
return (
|
|
<>
|
|
<nav
|
|
role="navigation"
|
|
aria-labelledby="progress-list"
|
|
className="at-nav"
|
|
>
|
|
<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}
|
|
</span>
|
|
</h2>
|
|
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
|
|
|
|
<ol className="govuk-list" id="progress-list">
|
|
<ul className="govuk-list ">
|
|
<li className="at-nav__page">
|
|
<ol className="govuk-list">
|
|
{Object.keys(progObj).map((key, index) =>
|
|
parseInt(key) + 1 == currentSection ? (
|
|
<li key={key}>
|
|
<b>
|
|
{FieldsTranslations(
|
|
progObj[index].title
|
|
)}
|
|
</b>
|
|
</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(
|
|
progObj[index].title
|
|
)
|
|
)}
|
|
</li>
|
|
)
|
|
)}
|
|
</ol>
|
|
</li>
|
|
</ul>
|
|
</ol>
|
|
</nav>
|
|
|
|
{Object.keys(documentListObj).length > 0 && (
|
|
<div>
|
|
<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">
|
|
{Object.entries(documentListObj).map(
|
|
([key, value]) => {
|
|
return <li key={key}>{value}</li>;
|
|
}
|
|
)}
|
|
</ol>
|
|
</li>
|
|
</ul>
|
|
</ol>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
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 mapDispatchToProps = (dispatch) => {
|
|
return {
|
|
gotoSection: (thisSection) => {
|
|
dispatch(setCurrentSection(thisSection));
|
|
},
|
|
};
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(BuildProgress);
|