create pdf reps for lpa
This commit is contained in:
@@ -0,0 +1,390 @@
|
||||
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 renderers, { renderBlock } from "react-pdf-html/dist/renderers";
|
||||
|
||||
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",
|
||||
},
|
||||
});
|
||||
// const renderer_1 = require("@react-pdf/renderer");
|
||||
// const renderPara = {
|
||||
// "p": ({ style, element, children }) =>
|
||||
// createElement(renderer_1.View, { style: style }, children),
|
||||
// };
|
||||
|
||||
export const statement_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;
|
||||
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",
|
||||
}}
|
||||
>
|
||||
Statement
|
||||
</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,
|
||||
}}
|
||||
>
|
||||
<Text style={styles.questionBullet}>2.</Text>
|
||||
<Text style={styles.questionText}>
|
||||
LPA reference:
|
||||
</Text>
|
||||
<Text style={styles.questionAnswer}>
|
||||
{values.lpaRef}
|
||||
</Text>
|
||||
</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}>
|
||||
123 Big Street, Small Town, Little County,
|
||||
XD23 54X
|
||||
</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}>
|
||||
Planning applicaiton (s78)
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View>
|
||||
<View
|
||||
style={{
|
||||
marginTop: 10,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 14 }}>Comments</Text>
|
||||
</View>
|
||||
<View style={styles.sectionContainer}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "column",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
wrap={false}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Text style={styles.questionBullet}>
|
||||
5.
|
||||
</Text>
|
||||
<Text style={styles.questionTextMid}>
|
||||
Stament
|
||||
</Text>
|
||||
<Text style={styles.questionAnswerMid}>
|
||||
{values.representationComment}
|
||||
</Text>
|
||||
</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}>
|
||||
<Html style={styles.richArea}>
|
||||
{values.LPAcaseFileAndReps}
|
||||
</Html>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View>
|
||||
<View
|
||||
style={{
|
||||
marginTop: 10,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
}}
|
||||
>
|
||||
<Text>Declaration</Text>
|
||||
</View>
|
||||
<View style={styles.sectionContainer}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{ width: "40%", fontSize: 12 }}
|
||||
>
|
||||
Signed:
|
||||
</Text>
|
||||
<Text style={styles.questionAnswer}>
|
||||
{values.caseOfficer}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Text style={styles.questionText}>
|
||||
Date:
|
||||
</Text>
|
||||
<Text style={styles.questionAnswer}>
|
||||
{formatDates(values.signedDate)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
wrap={false}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Text style={{ width: "18%", fontSize: 12 }}>
|
||||
On behalf of:
|
||||
</Text>
|
||||
<Text style={styles.questionAnswerWide}>
|
||||
{values.onBehalfOfLPA}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ marginTop: 50, fontSize: 12 }}>
|
||||
<Text>
|
||||
* Article 11 of The Town and Country Planning
|
||||
(Development Management Procedure) (Wales) Order
|
||||
2012; Regulation 7 of The Town and Country
|
||||
Planning (Listed Buildings and Conservation
|
||||
Areas) (Wales) Regulations 2012
|
||||
</Text>
|
||||
<Text style={{ marginTop: 20 }}>
|
||||
** Article 12 of The Town and Country Planning
|
||||
(Development Management Procedure) (Wales) Order
|
||||
2012; Section 67/73 of The Town and Country
|
||||
Planning (Listed Buildings and Conservation
|
||||
Areas) Act 1990; Regulation 10 of The Town and
|
||||
Country Planning (Listed Buildings and
|
||||
Conservation Areas) (Wales) Regulations 2012
|
||||
</Text>
|
||||
</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