705 lines
33 KiB
JavaScript
705 lines
33 KiB
JavaScript
import ReactPDF, {
|
|
Document,
|
|
Page,
|
|
Text,
|
|
View,
|
|
Image,
|
|
StyleSheet,
|
|
PDFViewer,
|
|
Font
|
|
} from "@react-pdf/renderer";
|
|
import Html from "react-pdf-html";
|
|
import { getFormCollectionByID, bytesToSize } from "../utils";
|
|
import fs from "fs";
|
|
import xpath from "xpath";
|
|
|
|
import _ from "lodash";
|
|
import { DOMParser, XMLSerializer } from "@xmldom/xmldom";
|
|
import { AppealRow_pdf } from "./appealRow_pdf";
|
|
|
|
import transLookupCY from "../../locales/cy/newappeal.json";
|
|
import transLookupEN from "../../locales/en/newappeal.json";
|
|
import transLookup from "../../data/lookuptranslations.json";
|
|
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
|
|
import { JSONPath as jsonpath } from "jsonpath-plus";
|
|
import resolveCrmDisplayValue from "../../lib/i18n/crmDisplay/resolveCrmDisplayValue";
|
|
|
|
const getTrans = (locale, key) => {
|
|
let jsonQuery = `$.${key}`;
|
|
|
|
let jsonObj = locale == "cy" ? transLookupCY : transLookupEN;
|
|
|
|
//console.log(locale, jsonObj[key]);
|
|
return jsonObj[key];
|
|
};
|
|
|
|
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,
|
|
fontFamily: "Helvetica-Bold"
|
|
},
|
|
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,
|
|
marginLeft: "5%",
|
|
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,
|
|
flexDirection: "column"
|
|
}
|
|
});
|
|
|
|
export const planningappeals78_pdf = ({ docProps, pickListData }) => {
|
|
//console.log("----", docProps);
|
|
const locale = docProps.locale;
|
|
function formatDates(dateObj) {
|
|
var dateObj = new Date(dateObj);
|
|
var dd = String(dateObj.getDate()).padStart(2, "0");
|
|
var mm = String(dateObj.getMonth() + 1).padStart(2, "0"); //January is 0!
|
|
var yyyy = dateObj.getFullYear();
|
|
|
|
return dd + "/" + mm + "/" + yyyy;
|
|
}
|
|
let values = docProps;
|
|
|
|
// let datestr = values.pinswg_name.split("-");
|
|
// let signedDate = datestr[2] + "/" + datestr[1] + "/" + datestr[0];
|
|
// let appealTypeValue = getFormCollectionByID(values.pinswg_appealcasetype);
|
|
|
|
var path = require("path");
|
|
const configDirectory = path.resolve(process.cwd(), "data/formsxml");
|
|
var xmlStr = fs.readFileSync(
|
|
path.join(configDirectory, "planningappeals78" + ".xml"),
|
|
"utf8"
|
|
);
|
|
|
|
xmlStr = xmlStr.replace(/\t/g, "");
|
|
xmlStr = xmlStr.replace(/\n/g, "");
|
|
xmlStr = xmlStr.replace(/> <"/g, "><");
|
|
xmlStr = xmlStr.toString();
|
|
|
|
//console.log(xmlStr);
|
|
|
|
const parser = new DOMParser();
|
|
var doc = parser.parseFromString(xmlStr, "text/xml");
|
|
var titles = xpath.select(
|
|
"//form/tabs/tab[*]/labels/label/@description",
|
|
doc
|
|
);
|
|
var rowXML = xpath.select(
|
|
"/form/tabs/tab[*]/columns//sections/section/rows/row",
|
|
doc
|
|
);
|
|
|
|
var titleList = xpath.select(
|
|
"//form/tabs/tab[*]/labels/label/@description",
|
|
doc
|
|
);
|
|
|
|
//console.log("\n//////////\n The Case:\n", docProps.caseObj);
|
|
|
|
Font.registerHyphenationCallback((word) => [word]);
|
|
|
|
const FieldsTranslations = (label, locale) => {
|
|
const appealtypes = getFormCollectionByID(
|
|
docProps.caseObj.pinswg_appealcasetype
|
|
).UrlName;
|
|
|
|
const formObj = jsonpath({
|
|
path: `$['${appealtypes}'].[?(@.value=="${label}")]`,
|
|
json: fieldLookup,
|
|
eval: true
|
|
});
|
|
|
|
const item = formObj?.[0];
|
|
|
|
if (locale === "cy" && !item?.value_cy) {
|
|
console.warn(`[Missing Welsh translation]`, {
|
|
label: item?.value,
|
|
orig: label,
|
|
appealType: appealtypes
|
|
});
|
|
}
|
|
|
|
return locale === "cy"
|
|
? (item?.value_cy ?? item?.value ?? label)
|
|
: (item?.value ?? label);
|
|
};
|
|
|
|
return (
|
|
<Document>
|
|
<Page size="A4" style={styles.page} wrap>
|
|
<View style={{ padding: 20 }}>
|
|
<View style={styles.header}>
|
|
<View>
|
|
<Text
|
|
style={{
|
|
width: "60%",
|
|
fontFamily: "Helvetica-Bold"
|
|
}}
|
|
>
|
|
{getTrans(locale, "pdf-s78-heading")}
|
|
</Text>
|
|
<View>
|
|
<Text
|
|
style={{
|
|
width: "60%",
|
|
fontSize: 15,
|
|
marginTop: 20,
|
|
fontFamily: "Helvetica-Bold"
|
|
}}
|
|
>
|
|
{" "}
|
|
{getTrans(
|
|
locale,
|
|
"pdf-s78-header-paragraph"
|
|
)}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<Image
|
|
style={styles.logoImage}
|
|
src="public/assets/images/pedw_logo.png"
|
|
alt="PEDW Logo"
|
|
/>
|
|
</View>
|
|
|
|
{Object.keys(titles).map(
|
|
(key) =>
|
|
key != 0 && (
|
|
<View key={key}>
|
|
<View
|
|
style={{
|
|
marginTop: 10,
|
|
fontFamily: "Helvetica-Bold"
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 14 }}>
|
|
{parseInt(key)}{" "}
|
|
{FieldsTranslations(
|
|
titles[key].value,
|
|
locale
|
|
)}
|
|
</Text>
|
|
<View style={styles.sectionContainer}>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<AppealRow_pdf
|
|
formXML={xmlStr}
|
|
whichSection={
|
|
parseInt(key) + 1
|
|
}
|
|
sectionCount={key}
|
|
props={docProps}
|
|
key={key}
|
|
mandatoryFieldsData={
|
|
null
|
|
}
|
|
pickListData={
|
|
pickListData
|
|
}
|
|
filesList={
|
|
values.filesList
|
|
}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
)}
|
|
</View>
|
|
<Text
|
|
style={styles.pageNumber}
|
|
render={({ pageNumber, totalPages }) =>
|
|
`${pageNumber} / ${totalPages}`
|
|
}
|
|
fixed
|
|
/>
|
|
<View
|
|
fixed
|
|
style={{
|
|
position: "absolute",
|
|
top: 20,
|
|
left: 20,
|
|
bottom: 20,
|
|
right: 20,
|
|
border: 1,
|
|
borderColor: "#eee",
|
|
padding: 20,
|
|
paddingTop: 30,
|
|
height: "100%"
|
|
}}
|
|
></View>
|
|
</Page>
|
|
<Page size="A4" style={styles.page} wrap>
|
|
<View>
|
|
<View
|
|
style={{
|
|
marginTop: 10,
|
|
fontFamily: "Helvetica-Bold"
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 14 }}>
|
|
{" "}
|
|
{getTrans(locale, "pdf-s78-heading")}
|
|
</Text>
|
|
<View style={styles.sectionContainer}>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text style={styles.questionText}>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-label-1"
|
|
)}
|
|
</Text>
|
|
<Text style={styles.questionAnswer}>
|
|
{" "}
|
|
{values.caseObj.pinswg_onbehalfof}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text style={styles.questionText}>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-label-2"
|
|
)}
|
|
</Text>
|
|
<Text style={styles.questionAnswer}>
|
|
{" "}
|
|
{values.caseObj
|
|
.pinswg_appellantagent ==
|
|
"846040000"
|
|
? locale == "cy"
|
|
? "Apelydd"
|
|
: "Appellant"
|
|
: locale == "cy"
|
|
? "Asiant"
|
|
: "Agent"}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text style={styles.questionText}>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-label-3"
|
|
)}
|
|
</Text>
|
|
<Text style={styles.questionAnswer}>
|
|
{values.caseObj
|
|
.pinswg_appellantfirstname +
|
|
" " +
|
|
values.caseObj
|
|
.pinswg_appellantlastname}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text style={styles.questionText}>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-label-4"
|
|
)}
|
|
</Text>
|
|
<Text style={styles.questionAnswer}>
|
|
{
|
|
values.caseObj
|
|
.pinswg_appellantemailaddress
|
|
}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text style={styles.questionText}>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-label-5"
|
|
)}
|
|
</Text>
|
|
<Text style={styles.questionAnswer}>
|
|
{
|
|
values.caseObj
|
|
.pinswg_appellantaddress
|
|
}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text style={styles.questionText}>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-label-6"
|
|
)}
|
|
</Text>
|
|
<Text style={styles.questionAnswer}>
|
|
{" "}
|
|
{
|
|
values.caseObj
|
|
.pinswg_appellantphonenumber
|
|
}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text style={styles.questionText}>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-label-8"
|
|
)}
|
|
</Text>
|
|
<Text style={styles.questionAnswer}>
|
|
{" "}
|
|
{values.caseObj
|
|
.pinswg_languagepreference ==
|
|
"846040000"
|
|
? locale == "cy"
|
|
? "Saesneg"
|
|
: "English"
|
|
: locale == "cy"
|
|
? "Cymraeg"
|
|
: "Welsh"}
|
|
</Text>
|
|
</View>
|
|
{values.caseObj.pinswg_appellantagent !=
|
|
"846040000" && (
|
|
<>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text
|
|
style={styles.questionText}
|
|
>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-agent-label-1"
|
|
)}
|
|
</Text>
|
|
<Text
|
|
style={
|
|
styles.questionAnswer
|
|
}
|
|
>
|
|
{
|
|
values.caseObj
|
|
.pinswg_agentcompanyname
|
|
}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text
|
|
style={styles.questionText}
|
|
>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-agent-label-2"
|
|
)}
|
|
</Text>
|
|
<Text
|
|
style={
|
|
styles.questionAnswer
|
|
}
|
|
>
|
|
{
|
|
values.caseObj
|
|
.pinswg_agentfirstname
|
|
}{" "}
|
|
{
|
|
values.caseObj
|
|
.pinswg_agentlastname
|
|
}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text
|
|
style={styles.questionText}
|
|
>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-agent-label-3"
|
|
)}
|
|
</Text>
|
|
<Text
|
|
style={
|
|
styles.questionAnswer
|
|
}
|
|
>
|
|
{
|
|
values.caseObj
|
|
.pinswg_agentemailaddress
|
|
}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text
|
|
style={styles.questionText}
|
|
>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-agent-label-4"
|
|
)}
|
|
</Text>
|
|
<Text
|
|
style={
|
|
styles.questionAnswer
|
|
}
|
|
>
|
|
{
|
|
values.caseObj
|
|
.pinswg_agentaddress
|
|
}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text
|
|
style={styles.questionText}
|
|
>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-agent-label-5"
|
|
)}
|
|
</Text>
|
|
<Text
|
|
style={
|
|
styles.questionAnswer
|
|
}
|
|
>
|
|
{
|
|
values.caseObj
|
|
.pinswg_agentphonenumber
|
|
}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text
|
|
style={styles.questionText}
|
|
>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-agent-label-6"
|
|
)}
|
|
</Text>
|
|
<Text
|
|
style={
|
|
styles.questionAnswer
|
|
}
|
|
>
|
|
{values.caseObj
|
|
.pinswg_agentlanguagepreference ==
|
|
"846040000"
|
|
? locale == "cy"
|
|
? "Saesneg"
|
|
: "English"
|
|
: locale == "cy"
|
|
? "Cymraeg"
|
|
: "Welsh"}
|
|
</Text>
|
|
</View>
|
|
</>
|
|
)}
|
|
<View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10
|
|
}}
|
|
>
|
|
<Text style={styles.questionText}>
|
|
{getTrans(
|
|
locale,
|
|
"pdf-case-details-label-7"
|
|
)}
|
|
</Text>
|
|
<Text style={styles.questionAnswer}>
|
|
{resolveCrmDisplayValue({
|
|
value: values.caseObj
|
|
.pinswg_lpaname,
|
|
locale,
|
|
translations: transLookup
|
|
})}
|
|
</Text>
|
|
</View>
|
|
{/* <View
|
|
wrap={false}
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Text style={styles.questionText}>
|
|
Contact Preference
|
|
</Text>
|
|
<Text style={styles.questionAnswer}>
|
|
{values.caseObj
|
|
.pinswg_contactprefs ==
|
|
"846040000"
|
|
? "Email"
|
|
: "Post"}
|
|
</Text>
|
|
</View> */}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Page>
|
|
</Document>
|
|
);
|
|
};
|