create rep pdf tweaks prior to multi types matrix
This commit is contained in:
@@ -432,40 +432,56 @@ let MakeRepresentation = (props) => {
|
||||
|
||||
detailsObj = detailsObj[0];
|
||||
|
||||
Object.assign(values, {
|
||||
"containerID": props.props.accountDetails.containerID,
|
||||
"appealType": props.props.currentView.caseReference.appealType,
|
||||
"incidentID": props.props.currentView.caseReference.incidentid,
|
||||
"caseRef": props.props.currentView.caseReference.currentReference,
|
||||
"pinswg_name":
|
||||
props.props.currentView.caseReference.currentReference,
|
||||
"firstname": props.props.accountDetails.accountDetails.firstname,
|
||||
"lastname": props.props.accountDetails.accountDetails.lastname,
|
||||
"emailAddress":
|
||||
props.props.accountDetails.accountDetails.emailaddress1,
|
||||
"siteAddress":
|
||||
detailsObj.pinswg_siteaddressline1 +
|
||||
" " +
|
||||
detailsObj.pinswg_siteaddressline2 +
|
||||
" " +
|
||||
detailsObj.pinswg_siteaddresstown +
|
||||
" " +
|
||||
detailsObj.pinswg_siteaddresspostcode,
|
||||
"pinswg_siteaddressline1": detailsObj.pinswg_siteaddressline1,
|
||||
"pinswg_siteaddressline2": detailsObj.pinswg_siteaddressline2,
|
||||
"pinswg_siteaddresstown": detailsObj.pinswg_siteaddresstown,
|
||||
"pinswg_siteaddresspostcode": detailsObj.pinswg_siteaddresspostcode,
|
||||
"_pinswg_appellant_value": detailsObj["_pinswg_appellant_value"],
|
||||
"_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue":
|
||||
detailsObj[
|
||||
"_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
|
||||
],
|
||||
"representationCapacity": router.query.hasOwnProperty("state")
|
||||
? router.query.state == "edit"
|
||||
? props.props.currentView.representationCapacity
|
||||
: values.representationCapacity
|
||||
: values.representationCapacity,
|
||||
});
|
||||
console.log(
|
||||
"Has data from form:",
|
||||
formObj.hasOwnProperty("representationForm") &&
|
||||
formObj.representationForm.hasOwnProperty("values")
|
||||
);
|
||||
|
||||
formObj.hasOwnProperty("representationForm") &&
|
||||
!router.query.hasOwnProperty("state") &&
|
||||
formObj.representationForm.hasOwnProperty("values") &&
|
||||
(Object.assign(values, formObj.representationForm.values),
|
||||
Object.assign(values, {
|
||||
"containerID": props.props.accountDetails.containerID,
|
||||
"appealType": props.props.currentView.caseReference.appealType,
|
||||
"incidentID": props.props.currentView.caseReference.incidentid,
|
||||
"caseRef":
|
||||
props.props.currentView.caseReference.currentReference,
|
||||
"pinswg_name":
|
||||
props.props.currentView.caseReference.currentReference,
|
||||
"firstname":
|
||||
props.props.accountDetails.accountDetails.firstname,
|
||||
"lastname": props.props.accountDetails.accountDetails.lastname,
|
||||
"emailAddress":
|
||||
props.props.accountDetails.accountDetails.emailaddress1,
|
||||
"siteAddress":
|
||||
detailsObj.pinswg_siteaddressline1 +
|
||||
" " +
|
||||
detailsObj.pinswg_siteaddressline2 +
|
||||
" " +
|
||||
detailsObj.pinswg_siteaddresstown +
|
||||
" " +
|
||||
detailsObj.pinswg_siteaddresspostcode,
|
||||
"pinswg_siteaddressline1": detailsObj.pinswg_siteaddressline1,
|
||||
"pinswg_siteaddressline2": detailsObj.pinswg_siteaddressline2,
|
||||
"pinswg_siteaddresstown": detailsObj.pinswg_siteaddresstown,
|
||||
"pinswg_siteaddresspostcode":
|
||||
detailsObj.pinswg_siteaddresspostcode,
|
||||
"_pinswg_appellant_value":
|
||||
detailsObj["_pinswg_appellant_value"],
|
||||
"_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue":
|
||||
detailsObj[
|
||||
"_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
|
||||
],
|
||||
"representationCapacity": router.query.hasOwnProperty("state")
|
||||
? router.query.state == "edit"
|
||||
? props.props.currentView.representationCapacity
|
||||
: values.representationCapacity
|
||||
: isLPA
|
||||
? "lpa"
|
||||
: values.representationCapacity,
|
||||
}));
|
||||
console.log(values);
|
||||
currentView.representationSubmit != true
|
||||
? _.isEmpty(currentView.representationCapacity)
|
||||
@@ -610,7 +626,7 @@ let MakeRepresentation = (props) => {
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
console.log("\\\\\\\\\\\\\\\\\\\\\\\\\\\\/nin map state", state);
|
||||
console.log("\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \n in map state", state);
|
||||
|
||||
return {
|
||||
search: state.search,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,348 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
import jsonpath from "jsonpath";
|
||||
import { useSelector, shallowEqual, connect } from "react-redux";
|
||||
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
|
||||
import {
|
||||
getFormCollectionByID,
|
||||
getPickListLabel,
|
||||
getRadioLabel,
|
||||
} from "../../components/utils";
|
||||
|
||||
import ReactPDF, {
|
||||
Document,
|
||||
Page,
|
||||
Text,
|
||||
View,
|
||||
Image,
|
||||
StyleSheet,
|
||||
PDFViewer,
|
||||
Font,
|
||||
} from "@react-pdf/renderer";
|
||||
import _ from "lodash";
|
||||
|
||||
import { DOMParser, XMLSerializer } from "@xmldom/xmldom";
|
||||
|
||||
export const AppealRow_pdf = (props) => {
|
||||
let { t } = useTranslation();
|
||||
|
||||
// const router = useRouter();
|
||||
// console.log(router);
|
||||
// const { locale } = router;
|
||||
|
||||
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: "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 parser = new DOMParser();
|
||||
var doc = parser.parseFromString(formXML, "text/xml");
|
||||
|
||||
var rowXML = xpath.select(
|
||||
"/form/tabs/tab[" +
|
||||
whichSection +
|
||||
"]/columns//sections/section/rows/row",
|
||||
doc
|
||||
);
|
||||
|
||||
//console.log(rowXML);
|
||||
|
||||
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 router = useRouter();
|
||||
// const { locale } = router;
|
||||
const { appealtypes } = router.query;
|
||||
|
||||
let formObj = jsonpath.query(fieldLookup, "$['" + appealtypes + "']");
|
||||
|
||||
// let labelTrans =
|
||||
// router.locale == "cy"
|
||||
// ? jsonpath.query(
|
||||
// formObj,
|
||||
// "$..[?(@.value=='" + label + "')].value_cy"
|
||||
// )
|
||||
// : label;
|
||||
|
||||
let labelTrans = label;
|
||||
return labelTrans;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.keys(rowXML).map((key, index) => {
|
||||
var newRowXML = new XMLSerializer().serializeToString(
|
||||
rowXML[key]
|
||||
);
|
||||
//console.log(newRowXML);
|
||||
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);
|
||||
|
||||
return (
|
||||
<>
|
||||
{(() => {
|
||||
switch (fieldtype[0].value) {
|
||||
case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
|
||||
return (
|
||||
<View
|
||||
wrap={false}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={styles.questionTextWide}
|
||||
>
|
||||
{/* {FieldsTranslations(rows[0].value)} */}
|
||||
{rows[0].value}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={
|
||||
styles.questionAnswerWide
|
||||
}
|
||||
>
|
||||
{formatDate(
|
||||
props.props[
|
||||
datafieldname[0].value
|
||||
]
|
||||
)}{" "}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
break;
|
||||
case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "column",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<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}":
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "column",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
wrap={false}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={styles.questionText}
|
||||
>
|
||||
{rows[0].value}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.questionAnswer}>
|
||||
<Text>
|
||||
{
|
||||
props.props[
|
||||
datafieldname[0]
|
||||
.value
|
||||
]
|
||||
}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
break;
|
||||
|
||||
default:
|
||||
return (
|
||||
<View
|
||||
wrap={false}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Text style={styles.questionText}>
|
||||
{/* {FieldsTranslations(rows[0].value)} */}
|
||||
{rows[0].value}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={
|
||||
styles.questionAnswerWide
|
||||
}
|
||||
>
|
||||
{
|
||||
props.props[
|
||||
datafieldname[0].value
|
||||
]
|
||||
}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
break;
|
||||
}
|
||||
})()}
|
||||
|
||||
{/* <Text className="govuk-summary-list__value">
|
||||
{fieldtype[0].value ==
|
||||
"{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
|
||||
? formatDate(
|
||||
props.props.values[datafieldname[0].value]
|
||||
)
|
||||
: fieldtype[0].value ==
|
||||
"{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}"
|
||||
? getPickListLabel(
|
||||
props.props.formData.pickListData,
|
||||
datafieldname[0].value,
|
||||
props.props.values[datafieldname[0].value]
|
||||
)
|
||||
: fieldtype[0].value ==
|
||||
"{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}"
|
||||
? getRadioLabel(
|
||||
props.props.formData.pickListData,
|
||||
datafieldname[0].value,
|
||||
props.props.values[datafieldname[0].value]
|
||||
)
|
||||
: fieldtype[0].value ==
|
||||
"{16D63FD6-119B-4353-BDCA-18358721C3FE}"
|
||||
? "ssss"
|
||||
: props.props.values[datafieldname[0].value]}
|
||||
</Text> */}
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -9,6 +9,7 @@ import ReactPDF, {
|
||||
Font,
|
||||
} from "@react-pdf/renderer";
|
||||
import Html from "react-pdf-html";
|
||||
import { getFormCollectionByID } from "../../components/utils";
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: {
|
||||
@@ -96,6 +97,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
|
||||
return dd + "/" + mm + "/" + yyyy;
|
||||
}
|
||||
let values = docProps;
|
||||
let appealTypeValue = getFormCollectionByID(values.appealType);
|
||||
|
||||
console.log("sdffhjdhjdjdgkj: ", values.procedureType);
|
||||
return (
|
||||
|
||||
@@ -103,7 +103,7 @@ export const other_pdf = ({ docProps }) => {
|
||||
|
||||
let datestr = values.pinswg_name.split("-");
|
||||
let signedDate = datestr[2] + "/" + datestr[1] + "/" + datestr[0];
|
||||
let appealTypeValue = getFormCollectionByID(values.appealType);
|
||||
const isLPA = values.representationCapacity == "lpa" ? true : false;
|
||||
|
||||
return (
|
||||
<Document>
|
||||
@@ -128,9 +128,13 @@ export const other_pdf = ({ docProps }) => {
|
||||
fontFamily: "Helvetica-Bold",
|
||||
}}
|
||||
>
|
||||
For Planning, Conservation area, Listed
|
||||
Building and Advertisement
|
||||
applications/appeals
|
||||
For Planning Appeal, Planning Conditions,
|
||||
Listed Building and Conservation Area
|
||||
Appeal, Lawful Development Appeal, Planning
|
||||
Obligations, Community Infrastructure Levy,
|
||||
Enforcement Notice appeal, Enforcement
|
||||
Listed Building Appeal, Maintenance of land,
|
||||
Called in Application applications/appeals
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -199,7 +203,10 @@ export const other_pdf = ({ docProps }) => {
|
||||
Case Type:
|
||||
</Text>
|
||||
<Text style={styles.questionAnswer}>
|
||||
{appealTypeValue.value}
|
||||
{
|
||||
getFormCollectionByID(values.appealType)
|
||||
.value
|
||||
}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -342,20 +349,24 @@ export const other_pdf = ({ docProps }) => {
|
||||
</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>
|
||||
{isLPA && (
|
||||
<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>
|
||||
|
||||
@@ -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