create rep pdf tweaks prior to multi types matrix
This commit is contained in:
@@ -0,0 +1,362 @@
|
||||
import ReactPDF, {
|
||||
Document,
|
||||
Page,
|
||||
Text,
|
||||
View,
|
||||
Image,
|
||||
StyleSheet,
|
||||
PDFViewer,
|
||||
Font,
|
||||
} from "@react-pdf/renderer";
|
||||
import { createElement } from "react";
|
||||
import Html from "react-pdf-html";
|
||||
import { getFormCollectionByID } from "../utils";
|
||||
import fs from "fs";
|
||||
import xpath from "xpath";
|
||||
import renderers, { renderBlock } from "react-pdf-html/dist/renderers";
|
||||
import _ from "lodash";
|
||||
import { DOMParser, XMLSerializer } from "@xmldom/xmldom";
|
||||
import { AppealRow_pdf } from "./appealRow_pdf";
|
||||
|
||||
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: "30%", fontSize: 12 },
|
||||
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: "95%",
|
||||
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,
|
||||
color: "red",
|
||||
flexDirection: "column",
|
||||
},
|
||||
});
|
||||
|
||||
export const planningappeals78_pdf = ({ docProps }) => {
|
||||
//console.log("----", docProps);
|
||||
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(titles);
|
||||
|
||||
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",
|
||||
}}
|
||||
>
|
||||
Planning Appeals s78
|
||||
</Text>
|
||||
<View>
|
||||
<Text
|
||||
style={{
|
||||
width: "60%",
|
||||
fontSize: 15,
|
||||
marginTop: 20,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
}}
|
||||
>
|
||||
For Planning, Conservation area, Listed
|
||||
Building and Advertisement
|
||||
applications/appeals
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Image
|
||||
style={styles.logoImage}
|
||||
src="public/assets/images/pedw_logo.png"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<View
|
||||
style={{
|
||||
marginTop: 10,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 14 }}>Case details</Text>
|
||||
</View>
|
||||
<View style={styles.sectionContainer}>
|
||||
<View
|
||||
wrap={false}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Text style={styles.questionBullet}>1.</Text>
|
||||
<Text style={styles.questionText}>
|
||||
PEDW reference:
|
||||
</Text>
|
||||
<Text style={styles.questionAnswer}>
|
||||
{values.caseRef}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
wrap={false}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
></View>
|
||||
<View
|
||||
wrap={false}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Text style={styles.questionBullet}>3.</Text>
|
||||
<Text style={styles.questionText}>
|
||||
Site address/grid ref:
|
||||
</Text>
|
||||
<Text style={styles.questionAnswer}>
|
||||
{values.siteAddress}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
wrap={false}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Text style={styles.questionBullet}>4.</Text>
|
||||
<Text style={styles.questionText}>
|
||||
Case Type:
|
||||
</Text>
|
||||
<Text style={styles.questionAnswer}>
|
||||
{appealTypeValue.value}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{Object.keys(titles).map((key) => (
|
||||
<View key={key}>
|
||||
<View
|
||||
style={{
|
||||
marginTop: 10,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 14 }}>
|
||||
{parseInt(key) + 1} {titles[key].value}
|
||||
</Text>
|
||||
<View style={styles.sectionContainer}>
|
||||
<View
|
||||
wrap={false}
|
||||
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}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
<View>
|
||||
<View
|
||||
style={{
|
||||
marginTop: 10,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 14 }}>
|
||||
Supporting documents
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.sectionContainer}>
|
||||
<View
|
||||
wrap={false}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Text style={styles.questionBullet}>11.</Text>
|
||||
<Text style={styles.questionText}>
|
||||
List of attached files
|
||||
</Text>
|
||||
<View
|
||||
style={[
|
||||
styles.questionAnswer,
|
||||
{ flexDirection: "column" },
|
||||
]}
|
||||
>
|
||||
{values.hasOwnProperty("filesList") &&
|
||||
values.filesList.map(function (p) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 4,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
styles={
|
||||
styles.questionTextMid
|
||||
}
|
||||
>
|
||||
{p.name} - {p.size}
|
||||
</Text>
|
||||
</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>
|
||||
</Document>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user