367 lines
16 KiB
JavaScript
367 lines
16 KiB
JavaScript
import { JSONPath as jsonpath } from "jsonpath-plus";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import { useRouter } from "next/router";
|
|
import { connect } from "react-redux";
|
|
import {
|
|
getPickListLabel,
|
|
getRadioLabel,
|
|
bytesToSize,
|
|
getDocumentTypeFromFilename,
|
|
getThumbnailIconByExtension
|
|
} from "../../components/utils";
|
|
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
|
|
|
|
import {
|
|
setCurrentSection,
|
|
setFormComplete
|
|
} from "../../store/appealType/action";
|
|
import {
|
|
parseRowOuterHTML,
|
|
parseXml,
|
|
selectCurrentSectionRows,
|
|
selectRowDataFieldName,
|
|
selectRowDocumentTypeCode,
|
|
selectRowFieldType,
|
|
selectRowLabelDescriptions
|
|
} from "../../lib/newappeal/formDerivation";
|
|
import { resolveCrmDisplayValue } from "../../lib/i18n/crmDisplay/resolveCrmDisplayValue";
|
|
|
|
let BuildCheckRow = (props) => {
|
|
let { t } = useTranslation();
|
|
const legacyProps = props.props;
|
|
const legacyFormState = legacyProps.form;
|
|
const legacyFormData = legacyProps.formData;
|
|
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
|
|
const {
|
|
formXML,
|
|
whichSection,
|
|
sectionCount,
|
|
onSubmit,
|
|
updateCurrentSection,
|
|
setCurrentSection,
|
|
mandatoryFieldsData
|
|
} = props;
|
|
|
|
var doc = parseXml(props.formXML);
|
|
|
|
var rowXML = selectCurrentSectionRows(doc, whichSection);
|
|
|
|
function formatDate(dateObj) {
|
|
var m = new Date(dateObj);
|
|
var dateString;
|
|
dateObj != null
|
|
? (dateString =
|
|
("0" + m.getDate()).slice(-2) +
|
|
"/" +
|
|
("0" + (m.getMonth() + 1)).slice(-2) +
|
|
"/" +
|
|
m.getFullYear())
|
|
: (dateString = "");
|
|
|
|
return dateString;
|
|
}
|
|
|
|
const FieldsTranslations = (label) => {
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
const { appealtypes } = router.query;
|
|
|
|
let formObj = jsonpath({
|
|
path: "$['" + appealtypes + "']",
|
|
json: fieldLookup,
|
|
eval: true
|
|
});
|
|
|
|
let labelTrans = resolveCrmDisplayValue({
|
|
value: label,
|
|
locale,
|
|
translations: formObj
|
|
});
|
|
|
|
return labelTrans;
|
|
};
|
|
|
|
function isObjectAndNotEmpty(value) {
|
|
return (
|
|
value !== null &&
|
|
typeof value === "object" &&
|
|
Object.keys(value).length > 0
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{Object.keys(rowXML).map((key, index) => {
|
|
var doc = parseRowOuterHTML(rowXML[key].outerHTML);
|
|
if (_.isEmpty(rowXML[key].innerHTML)) {
|
|
("");
|
|
} else {
|
|
var rows = selectRowLabelDescriptions(doc);
|
|
var fieldtype = selectRowFieldType(doc);
|
|
var datafieldname = selectRowDataFieldName(doc);
|
|
const isRequiredField = jsonpath({
|
|
path:
|
|
"$..value[?(@ && @.LogicalName=='" +
|
|
datafieldname[0].value +
|
|
"')]",
|
|
json: mandatoryFieldsData,
|
|
eval: true
|
|
});
|
|
|
|
var documentTypeCode = selectRowDocumentTypeCode(doc);
|
|
|
|
// if (datafieldname[0].value.indexOf("fileUpload") > 0) {
|
|
// isRequiredField.push({
|
|
// "LogicalName": datafieldname[0].value,
|
|
// "RequiredLevel": {
|
|
// "Value": "Recommended",
|
|
// "CanBeChanged": true,
|
|
// "ManagedPropertyLogicalName":
|
|
// "canmodifyrequirementlevelsettings",
|
|
// },
|
|
// "MetadataId":
|
|
// "32a7e6fc-4283-eb11-aac0-00224800be9c",
|
|
// });
|
|
// }
|
|
|
|
//console.log(
|
|
// datafieldname[0].value.indexOf("fileUpload") > 0,
|
|
// isRequiredField,
|
|
// props.props.form["appealForm"].values[
|
|
// datafieldname[0].value
|
|
// ]
|
|
// );
|
|
|
|
// if (
|
|
// typeof props.props.form["appealForm"].values[
|
|
// datafieldname[0].value
|
|
// ] != "undefined"
|
|
// ) {
|
|
const fieldTypeValue = fieldtype[0].value;
|
|
const fieldValue =
|
|
legacyFormState["appealForm"].values[
|
|
datafieldname[0].value
|
|
];
|
|
|
|
const renderFileUploadValue = () => (
|
|
<>
|
|
{props.filesArray.map((blob, i) => (
|
|
<div key={i}>
|
|
{getDocumentTypeFromFilename(blob.name) ===
|
|
documentTypeCode[0].value && (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "flex-start"
|
|
}}
|
|
className="govuk-!-margin-bottom-2"
|
|
>
|
|
<img
|
|
style={{
|
|
minWidth: "50",
|
|
width: "50"
|
|
}}
|
|
src={getThumbnailIconByExtension(
|
|
blob.name
|
|
)}
|
|
alt={blob.name}
|
|
width="50"
|
|
/>
|
|
<span
|
|
style={{
|
|
maxWidth: "85%"
|
|
}}
|
|
className="govuk-body govuk-!-font-size-14 govuk-!-margin-left-2"
|
|
>
|
|
{blob.name} -{" "}
|
|
{bytesToSize(blob.size)}{" "}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
<br />
|
|
{typeof fieldValue != "undefined" &&
|
|
fieldValue.map(
|
|
(blob, i) =>
|
|
isObjectAndNotEmpty(blob) && (
|
|
<div key={i}>
|
|
{getDocumentTypeFromFilename(
|
|
blob.name
|
|
) ===
|
|
documentTypeCode[0]
|
|
.value && (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems:
|
|
"flex-start"
|
|
}}
|
|
className="govuk-!-margin-bottom-2"
|
|
>
|
|
<img
|
|
style={{
|
|
minWidth: "50",
|
|
width: "50"
|
|
}}
|
|
src={getThumbnailIconByExtension(
|
|
blob.name
|
|
)}
|
|
alt={blob.name}
|
|
width="50"
|
|
/>
|
|
<span
|
|
style={{
|
|
maxWidth: "85%"
|
|
}}
|
|
className="govuk-body govuk-!-font-size-14 govuk-!-margin-left-2"
|
|
>
|
|
{blob.name} -{" "}
|
|
{bytesToSize(
|
|
blob.size
|
|
)}{" "}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
)}
|
|
</>
|
|
);
|
|
|
|
const renderTenantValue = () =>
|
|
typeof fieldValue != "undefined" && fieldValue != null
|
|
? fieldValue.map((tenant, index) => {
|
|
console.log(
|
|
typeof tenant.pinswg_owners_firstname
|
|
);
|
|
return typeof tenant.pinswg_owners_firstname !=
|
|
"undefined" ||
|
|
typeof tenant.pinswg_agriculturaltenantname_firstname !=
|
|
"undefined" ? (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
display: "flex"
|
|
}}
|
|
>
|
|
<div className="govuk-!-width-one-half">
|
|
{tenant?.pinswg_agriculturaltenantname_firstname &&
|
|
tenant.pinswg_agriculturaltenantname_firstname +
|
|
" " +
|
|
tenant.pinswg_agriculturaltenantname_lastname}
|
|
|
|
{tenant?.pinswg_owners_firstname &&
|
|
tenant.pinswg_owners_firstname +
|
|
" " +
|
|
tenant.pinswg_owners_lastname}
|
|
</div>
|
|
<div className="govuk-!-width-one-half">
|
|
Served:{" "}
|
|
{formatDate(tenant.dateserved)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
""
|
|
);
|
|
})
|
|
: "N/A";
|
|
|
|
const formatterMap = {
|
|
"{E0DECE4B-6666-4a8f-A065-082708572369}": () => (
|
|
<div
|
|
dangerouslySetInnerHTML={{
|
|
__html: fieldValue
|
|
}}
|
|
/>
|
|
),
|
|
"{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}": () =>
|
|
formatDate(fieldValue),
|
|
"{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}": () =>
|
|
getPickListLabel(
|
|
legacyFormData.pickListData,
|
|
datafieldname[0].value,
|
|
fieldValue
|
|
),
|
|
"{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}": () =>
|
|
getRadioLabel(
|
|
legacyFormData.pickListData,
|
|
datafieldname[0].value,
|
|
fieldValue
|
|
),
|
|
"{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}": () =>
|
|
fieldValue == "false"
|
|
? router.locale == "cy"
|
|
? "Nac ydw"
|
|
: "No"
|
|
: router.locale == "cy"
|
|
? "Oes"
|
|
: "Yes",
|
|
"{16D63FD6-119B-4353-BDCA-18358721C3FE}":
|
|
renderFileUploadValue,
|
|
"{0273EDBD-AC1D-40d3-9FB2-095C621B552D}":
|
|
renderTenantValue
|
|
};
|
|
|
|
const defaultFormatter = () => fieldValue;
|
|
const renderFieldValue =
|
|
formatterMap[fieldTypeValue] || defaultFormatter;
|
|
return (
|
|
<div className="govuk-summary-list__row" key={key}>
|
|
<dt className="govuk-summary-list__key">
|
|
{FieldsTranslations(rows[0].value)}
|
|
</dt>
|
|
|
|
<dd className="govuk-summary-list__value">
|
|
{renderFieldValue()}
|
|
</dd>
|
|
|
|
<dd className="govuk-summary-list__actions">
|
|
{rows[0].value != "Temporary reference" && (
|
|
<a
|
|
className="govuk-link"
|
|
href="#"
|
|
onClick={() => {
|
|
setCurrentSection(whichSection);
|
|
}}
|
|
>
|
|
{" "}
|
|
{t("newappeal:change-link-label")}
|
|
<span className="govuk-visually-hidden">
|
|
{" "}
|
|
{FieldsTranslations(rows[0].value)}
|
|
</span>
|
|
</a>
|
|
)}
|
|
</dd>
|
|
</div>
|
|
);
|
|
|
|
// }
|
|
}
|
|
})}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
return {
|
|
setCurrentSection: (currentSection) => {
|
|
dispatch(setCurrentSection(currentSection));
|
|
},
|
|
updateCurrentSection: (whichSection) => {
|
|
dispatch(setCurrentSection(whichSection));
|
|
dispatch(setFormComplete("true"));
|
|
}
|
|
};
|
|
};
|
|
|
|
const mapStateToProps = (state) => ({
|
|
count: state.count
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckRow);
|