495 lines
22 KiB
JavaScript
495 lines
22 KiB
JavaScript
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import xpath from "xpath";
|
|
import jsonpath from "jsonpath";
|
|
import { useSelector, shallowEqual, connect } from "react-redux";
|
|
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
|
|
import {
|
|
getFormCollectionByID,
|
|
getPickListLabel,
|
|
getRadioLabel,
|
|
bytesToSize,
|
|
} from "../../components/utils";
|
|
|
|
import ReactPDF, {
|
|
Document,
|
|
Page,
|
|
Text,
|
|
View,
|
|
Image,
|
|
StyleSheet,
|
|
PDFViewer,
|
|
Font,
|
|
} from "@react-pdf/renderer";
|
|
import _ from "lodash";
|
|
import Html from "react-pdf-html";
|
|
|
|
import { DOMParser, XMLSerializer } from "@xmldom/xmldom";
|
|
|
|
export const AppealRow_pdf = (props) => {
|
|
let { t } = useTranslation();
|
|
|
|
// const router = useRouter();
|
|
// console.log(router);
|
|
// const { locale } = router;
|
|
|
|
const {
|
|
formXML,
|
|
whichSection,
|
|
sectionCount,
|
|
onSubmit,
|
|
updateCurrentSection,
|
|
mandatoryFieldsData,
|
|
} = props;
|
|
|
|
const styles = StyleSheet.create({
|
|
page: {
|
|
backgroundColor: "white",
|
|
padding: 20,
|
|
fontSize: 16,
|
|
paddingBottom: 50,
|
|
},
|
|
header: {
|
|
fontSize: 25,
|
|
fontFamily: "Helvetica",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
},
|
|
subHeader: {
|
|
fontSize: 20,
|
|
},
|
|
logoImage: { width: "200pt" },
|
|
questionBullet: { width: "5%", fontSize: 12 },
|
|
questionText: {
|
|
width: "35%",
|
|
fontSize: 12,
|
|
marginRight: 5,
|
|
},
|
|
questionTextMid: { width: "80%", fontSize: 12 },
|
|
questionTextWide: { width: "95%", fontSize: 12, marginBottom: 5 },
|
|
questionAnswer: {
|
|
color: "#757575",
|
|
width: "65%",
|
|
fontSize: 12,
|
|
padding: 5,
|
|
border: 1,
|
|
borderColor: "#eee",
|
|
paddingLeft: 10,
|
|
backgroundColor: "white",
|
|
},
|
|
questionAnswerMid: {
|
|
color: "#757575",
|
|
width: "20%",
|
|
fontSize: 12,
|
|
padding: 5,
|
|
border: 1,
|
|
borderColor: "#eee",
|
|
paddingLeft: 10,
|
|
backgroundColor: "white",
|
|
},
|
|
questionAnswerWide: {
|
|
color: "#757575",
|
|
width: "100%",
|
|
fontSize: 12,
|
|
border: 1,
|
|
borderColor: "#eee",
|
|
backgroundColor: "white",
|
|
padding: 5,
|
|
},
|
|
|
|
sectionContainer: {
|
|
backgroundColor: "#F8F8F8",
|
|
padding: 10,
|
|
marginTop: 20,
|
|
fontSize: 15,
|
|
},
|
|
pageNumber: {
|
|
position: "absolute",
|
|
fontSize: 12,
|
|
bottom: 20,
|
|
left: 0,
|
|
right: 0,
|
|
textAlign: "center",
|
|
color: "grey",
|
|
},
|
|
|
|
richArea: {
|
|
fontSize: 12,
|
|
color: "red",
|
|
flexDirection: "column",
|
|
},
|
|
});
|
|
|
|
const parser = new DOMParser();
|
|
var doc = parser.parseFromString(formXML, "text/xml");
|
|
|
|
var rowXML = xpath.select(
|
|
"/form/tabs/tab[" +
|
|
whichSection +
|
|
"]/columns//sections/section/rows/row",
|
|
doc
|
|
);
|
|
|
|
//console.log(rowXML);
|
|
|
|
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.query(fieldLookup, "$['" + appealtypes + "']");
|
|
|
|
// let labelTrans =
|
|
// router.locale == "cy"
|
|
// ? jsonpath.query(
|
|
// formObj,
|
|
// "$..[?(@.value=='" + label + "')].value_cy"
|
|
// )
|
|
// : label;
|
|
|
|
let labelTrans = label;
|
|
return labelTrans;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{Object.keys(rowXML).map((key, index) => {
|
|
var newRowXML = new XMLSerializer().serializeToString(
|
|
rowXML[key]
|
|
);
|
|
//console.log(newRowXML);
|
|
var doc = parser.parseFromString(newRowXML, "text/xml");
|
|
|
|
var rows = xpath.select("//label/@description", doc);
|
|
var fieldtype = xpath.select("//@classid", 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 documentTypeCode = xpath.select(
|
|
"//@ishareDocumentCode",
|
|
doc
|
|
);
|
|
console.log(datafieldname[0].value);
|
|
|
|
return (
|
|
<>
|
|
{(() => {
|
|
switch (fieldtype[0].value) {
|
|
case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Text
|
|
style={styles.questionTextWide}
|
|
>
|
|
{/* {FieldsTranslations(rows[0].value)} */}
|
|
{rows[0].value}
|
|
</Text>
|
|
|
|
<Text
|
|
style={
|
|
styles.questionAnswerWide
|
|
}
|
|
>
|
|
{formatDate(
|
|
props.props[
|
|
datafieldname[0].value
|
|
]
|
|
)}{" "}
|
|
</Text>
|
|
</View>
|
|
);
|
|
break;
|
|
case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Text
|
|
style={
|
|
styles.questionTextMid
|
|
}
|
|
>
|
|
{rows[0].value}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={
|
|
styles.questionAnswerWide
|
|
}
|
|
>
|
|
<Text>
|
|
{
|
|
props.props[
|
|
datafieldname[0]
|
|
.value
|
|
]
|
|
}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
break;
|
|
case "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
|
|
var fieldCopy = datafieldcontent[0].value
|
|
.split(",")
|
|
.find((a) =>
|
|
a.includes(
|
|
props.props[
|
|
datafieldname[0].value
|
|
]
|
|
)
|
|
);
|
|
|
|
fieldCopy =
|
|
typeof fieldCopy != "undefined"
|
|
? fieldCopy.split("|")[1]
|
|
: fieldCopy;
|
|
|
|
const transData = require("../../locales/en/" +
|
|
(typeof fieldCopy != "undefined"
|
|
? fieldCopy.split(":")[0]
|
|
: "common") +
|
|
".json");
|
|
|
|
let transCopy =
|
|
typeof fieldCopy != "undefined"
|
|
? transData[fieldCopy.split(":")[1]]
|
|
: fieldCopy;
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Text
|
|
style={
|
|
styles.questionTextWide
|
|
}
|
|
>
|
|
{rows[0].value}{" "}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={
|
|
styles.questionAnswerWide
|
|
}
|
|
>
|
|
<Text>{transCopy}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
break;
|
|
case "{E0DECE4B-6666-4a8f-A065-082708572369}":
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Text
|
|
style={
|
|
styles.questionTextWide
|
|
}
|
|
>
|
|
{rows[0].value}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={
|
|
styles.questionAnswerWide
|
|
}
|
|
>
|
|
<Html style={styles.richArea}>
|
|
{
|
|
props.props[
|
|
datafieldname[0]
|
|
.value
|
|
]
|
|
}{" "}
|
|
</Html>
|
|
</View>
|
|
</View>
|
|
);
|
|
break;
|
|
case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
|
|
return (
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Text style={styles.questionText}>
|
|
{/* {FieldsTranslations(rows[0].value)} */}
|
|
{rows[0].value}
|
|
</Text>
|
|
<Text style={styles.questionAnswer}>
|
|
{getPickListLabel(
|
|
props.pickListData,
|
|
datafieldname[0].value,
|
|
props.props[
|
|
datafieldname[0].value
|
|
]
|
|
)}
|
|
</Text>
|
|
</View>
|
|
);
|
|
break;
|
|
case "{16D63FD6-119B-4353-BDCA-18358721C3FE}":
|
|
const blobList = jsonpath.query(
|
|
props.filesList,
|
|
"$..[?(@.documentType=='" +
|
|
documentTypeCode[0].value +
|
|
"')]"
|
|
);
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Text
|
|
style={
|
|
styles.questionTextWide
|
|
}
|
|
>
|
|
{rows[0].value}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={
|
|
styles.questionAnswerWide
|
|
}
|
|
>
|
|
{blobList.map((blob, i) => (
|
|
<Text key={i}>
|
|
{blob.name} -{" "}
|
|
{bytesToSize(
|
|
blob.contentLength
|
|
)}
|
|
</Text>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
break;
|
|
default:
|
|
return (
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Text style={styles.questionText}>
|
|
{rows[0].value}
|
|
</Text>
|
|
<Text style={styles.questionAnswer}>
|
|
{" "}
|
|
{
|
|
props.props[
|
|
datafieldname[0].value
|
|
]
|
|
}
|
|
</Text>
|
|
</View>
|
|
);
|
|
break;
|
|
}
|
|
})()}
|
|
|
|
{/* <Text className="govuk-summary-list__value">
|
|
{fieldtype[0].value ==
|
|
"{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
|
|
? formatDate(
|
|
props.props.values[datafieldname[0].value]
|
|
)
|
|
: fieldtype[0].value ==
|
|
"{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}"
|
|
? getPickListLabel(
|
|
props.props.formData.pickListData,
|
|
datafieldname[0].value,
|
|
props.props.values[datafieldname[0].value]
|
|
)
|
|
: fieldtype[0].value ==
|
|
"{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}"
|
|
? getRadioLabel(
|
|
props.props.formData.pickListData,
|
|
datafieldname[0].value,
|
|
props.props.values[datafieldname[0].value]
|
|
)
|
|
: fieldtype[0].value ==
|
|
"{16D63FD6-119B-4353-BDCA-18358721C3FE}"
|
|
? "ssss"
|
|
: props.props.values[datafieldname[0].value]}
|
|
</Text> */}
|
|
</>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
};
|