388 lines
15 KiB
JavaScript
388 lines
15 KiB
JavaScript
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 "../../components/utils";
|
|
|
|
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",
|
|
},
|
|
});
|
|
|
|
export const other_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.appealType);
|
|
|
|
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",
|
|
}}
|
|
>
|
|
Other
|
|
</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>
|
|
<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}>
|
|
Other Comments
|
|
</Text>
|
|
</View>
|
|
<View style={styles.questionAnswerWide}>
|
|
<Html style={styles.richArea}>
|
|
{values.representationComments}
|
|
</Html>
|
|
</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>
|
|
<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.firstname} {values.lastname}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
marginBottom: 10,
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text style={styles.questionText}>
|
|
Date:
|
|
</Text>
|
|
<Text style={styles.questionAnswer}>
|
|
{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.representationCapacity}
|
|
</Text>
|
|
</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>
|
|
);
|
|
};
|