636 lines
32 KiB
JavaScript
636 lines
32 KiB
JavaScript
import { JSONPath as jsonpath } from "jsonpath-plus";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import xpath from "xpath";
|
|
import {
|
|
bytesToSize,
|
|
getPickListLabel,
|
|
getDocumentTypeFromFilename,
|
|
} from "../../components/utils";
|
|
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
|
|
|
|
import { StyleSheet, Text, View, Font } from "@react-pdf/renderer";
|
|
import Html from "react-pdf-html";
|
|
|
|
import { DOMParser, XMLSerializer } from "@xmldom/xmldom";
|
|
|
|
export const AppealRow_pdf = (props) => {
|
|
let { t } = useTranslation();
|
|
|
|
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",
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
},
|
|
questionAnswerMid: {
|
|
color: "#757575",
|
|
width: "20%",
|
|
fontSize: 12,
|
|
padding: 5,
|
|
border: 1,
|
|
borderColor: "#eee",
|
|
paddingLeft: 10,
|
|
backgroundColor: "white",
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
},
|
|
questionAnswerWide: {
|
|
color: "#757575",
|
|
width: "100%",
|
|
fontSize: 12,
|
|
border: 1,
|
|
borderColor: "#eee",
|
|
backgroundColor: "white",
|
|
padding: 5,
|
|
},
|
|
questionAnswerRow: {
|
|
width: "100%",
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
flexGrow: 1,
|
|
},
|
|
questionAnswerColLeft: {
|
|
width: "40%",
|
|
},
|
|
questionAnswerColRight: {
|
|
padding: 5,
|
|
width: "40%",
|
|
},
|
|
sectionContainer: {
|
|
backgroundColor: "#F8F8F8",
|
|
padding: 10,
|
|
marginTop: 20,
|
|
fontSize: 15,
|
|
},
|
|
pageNumber: {
|
|
position: "absolute",
|
|
fontSize: 12,
|
|
bottom: 20,
|
|
left: 0,
|
|
right: 0,
|
|
textAlign: "center",
|
|
color: "grey",
|
|
},
|
|
documentList: {
|
|
fontSize: 10,
|
|
},
|
|
richArea: {
|
|
fontSize: 12,
|
|
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
|
|
);
|
|
|
|
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 { appealtypes } = router.query;
|
|
|
|
let formObj = jsonpath({
|
|
path: "$['" + appealtypes + "']",
|
|
json: fieldLookup,
|
|
eval: true,
|
|
});
|
|
|
|
let labelTrans = label;
|
|
return labelTrans;
|
|
};
|
|
Font.registerHyphenationCallback((word) => [word]);
|
|
|
|
function CleanHTML(htmlStr) {
|
|
let cleanStr =
|
|
typeof htmlStr === "string"
|
|
? htmlStr.replace(
|
|
/<p><br><\/p>|<p class=\"ql-align-justify\"><br><\/p>/g,
|
|
""
|
|
)
|
|
: "";
|
|
|
|
return cleanStr;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{Object.keys(rowXML).map((key, index) => {
|
|
var newRowXML = new XMLSerializer().serializeToString(
|
|
rowXML[key]
|
|
);
|
|
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
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{(() => {
|
|
switch (fieldtype[0].value) {
|
|
case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10,
|
|
}}
|
|
wrap={false}
|
|
>
|
|
<Text
|
|
style={styles.questionTextWide}
|
|
>
|
|
{/* {FieldsTranslations(rows[0].value)} */}
|
|
{rows[0].value}
|
|
</Text>
|
|
|
|
<Text
|
|
style={styles.questionAnswerMid}
|
|
>
|
|
{formatDate(
|
|
props.props[
|
|
datafieldname[0].value
|
|
]
|
|
)}{" "}
|
|
</Text>
|
|
</View>
|
|
);
|
|
break;
|
|
case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
marginBottom: 10,
|
|
}}
|
|
wrap={false}
|
|
>
|
|
<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
|
|
.replace("]", "")
|
|
.replace("[", "")
|
|
.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,
|
|
}}
|
|
wrap={false}
|
|
>
|
|
<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}>
|
|
{CleanHTML(
|
|
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({path:
|
|
// "$..[?(@ && @.documentType=='" +
|
|
// documentTypeCode[0].value +
|
|
// "')]",
|
|
// props.filesList
|
|
// );
|
|
|
|
const blobList = props.filesList;
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
marginBottom: 10,
|
|
}}
|
|
wrap={false}
|
|
>
|
|
<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}>
|
|
{getDocumentTypeFromFilename(
|
|
blob.name
|
|
) ===
|
|
documentTypeCode[0]
|
|
.value && (
|
|
<Text
|
|
style={
|
|
styles.documentList
|
|
}
|
|
>
|
|
{blob.name} -{" "}
|
|
{bytesToSize(
|
|
blob.size
|
|
)}{" "}
|
|
{"\n"}
|
|
</Text>
|
|
)}
|
|
</Text>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
break;
|
|
case "{0273EDBD-AC1D-40d3-9FB2-095C621B552D}":
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
marginBottom: 10,
|
|
}}
|
|
wrap={false}
|
|
>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Text
|
|
style={
|
|
styles.questionTextMid
|
|
}
|
|
>
|
|
{rows[0].value}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={
|
|
styles.questionAnswerWide
|
|
}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
{props.props.hasOwnProperty(
|
|
datafieldname[0].value
|
|
) &&
|
|
props.props[
|
|
datafieldname[0].value
|
|
] == null ? (
|
|
<View>
|
|
<Text>N/A</Text>
|
|
</View>
|
|
) : (
|
|
props.props[
|
|
datafieldname[0]
|
|
.value
|
|
].map(
|
|
(tenant, index) => {
|
|
return typeof tenant.pinswg_owners_firstname !=
|
|
"undefined" ||
|
|
typeof tenant.pinswg_agriculturaltenantname_firstname !=
|
|
"undefined" ? (
|
|
<View
|
|
key={
|
|
index
|
|
}
|
|
style={{
|
|
flexDirection:
|
|
"row",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
width: "50%",
|
|
paddingRight:
|
|
"20",
|
|
}}
|
|
>
|
|
{tenant?.pinswg_agriculturaltenantname_firstname &&
|
|
tenant.pinswg_agriculturaltenantname_firstname +
|
|
" " +
|
|
tenant.pinswg_agriculturaltenantname_lastname}
|
|
|
|
{tenant?.pinswg_owners_firstname &&
|
|
tenant.pinswg_owners_firstname +
|
|
" " +
|
|
tenant.pinswg_owners_lastname}
|
|
{
|
|
" "
|
|
}
|
|
{tenant?.pinswg_owners_email &&
|
|
tenant.pinswg_owners_email}
|
|
{tenant?.pinswg_agriculturaltenantname_email &&
|
|
tenant.pinswg_agriculturaltenantname_email}
|
|
</Text>
|
|
|
|
<Text
|
|
style={{
|
|
width: "40%",
|
|
}}
|
|
>
|
|
Notice
|
|
served:{" "}
|
|
{formatDate(
|
|
tenant.dateserved
|
|
)}
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
""
|
|
);
|
|
}
|
|
)
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
marginBottom: 10,
|
|
}}
|
|
wrap={false}
|
|
>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Text
|
|
style={styles.questionText}
|
|
wrap={false}
|
|
>
|
|
{rows[0].value}
|
|
</Text>
|
|
<Text
|
|
style={
|
|
styles.questionAnswer
|
|
}
|
|
>
|
|
{props.props[
|
|
datafieldname[0].value
|
|
] == "true"
|
|
? "Yes"
|
|
: "No"}
|
|
</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;
|
|
}
|
|
})()}
|
|
</>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
};
|