update pdf templates with attched docs

This commit is contained in:
2023-09-26 13:39:23 +01:00
parent b56f73d854
commit 2ce248fba8
10 changed files with 367 additions and 185 deletions
+29 -1
View File
@@ -403,6 +403,22 @@ let MakeRepresentation = (props) => {
const onHandleSubmit = (values) => {
console.log("form values - ", JSON.stringify(values));
const buildFileArray = [];
console.log("attached docs: - ", buildFileArray);
let setCaseDetailsObj = props.props.searchResultsObj.searchDetailsObj;
var detailsObj = {};
detailsObj = jsonpath.query(
setCaseDetailsObj,
'$..[?(@.pinswg_name=="' + caseReference + '")]'
);
detailsObj = detailsObj[0];
Object.assign(values, {
"containerID": props.props.accountDetails.containerID,
"appealType": props.props.currentView.caseReference.appealType,
@@ -414,8 +430,16 @@ let MakeRepresentation = (props) => {
"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,
});
console.log(values);
currentView.representationSubmit != true
? _.isEmpty(currentView.representationCapacity)
? isLPA
@@ -431,6 +455,10 @@ let MakeRepresentation = (props) => {
console.log("has errors:", props.invalid),
props.invalid == false &&
updateRepresentation(values, false, false),
values.representationDocuments.map((Blob) =>
buildFileArray.push({ "name": Blob.name, "size": Blob.size })
),
Object.assign(values, { "filesList": buildFileArray }),
generateRepPDF(
values,
props.props.accountDetails.containerID,
@@ -30,6 +30,56 @@ const RepCompleteSubmit = (props) => {
const repFormData = formObj.representationForm.values;
const getThumbnailIconByExtension = (blobName) => {
let fileType = blobName.slice(blobName.lastIndexOf(".") + 1);
switch (fileType) {
case "html":
return "/assets/images/documenttypes/html.png";
break;
case "txt":
return "/assets/images/documenttypes/txt.png";
break;
case "doc":
return "/assets/images/documenttypes/doc.png";
break;
case "pdf":
return "/assets/images/documenttypes/pdf.png";
break;
case "docx":
return "/assets/images/documenttypes/docx.png";
break;
case "csv":
return "/assets/images/documenttypes/csv.png";
break;
case "xlsx":
return "/assets/images/documenttypes/xlsx.png";
break;
case "zip":
return "/assets/images/documenttypes/zip.png";
break;
case "jpeg":
case "jpg":
return "/assets/images/documenttypes/jpg.png";
case "png":
return "/assets/images/documenttypes/png.png";
break;
default:
return "/assets/images/documenttypes/txt.png";
break;
}
};
function bytesToSize(bytes) {
var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
if (bytes == 0) return "0 Byte";
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
}
console.log("///////// formObj:", formObj);
return (
<>
{currentView.representationSubmitConfirmation == true ? (
@@ -190,7 +240,37 @@ const RepCompleteSubmit = (props) => {
</dt>
<dd className="govuk-summary-list__value">
files
{formObj.representationForm.values
.representationDocuments.length > 0
? formObj.representationForm.values.representationDocuments.map(
(blob, i) => (
<div
key={
blob.name +
"_" +
i
}
className="govuk-!-margin-bottom-5 fileThumb "
>
<img
src={getThumbnailIconByExtension(
blob.name
)}
alt={blob.name}
width="50"
/>
<span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
{blob.name} (
{bytesToSize(
blob.size
)}
)
</span>
</div>
)
)
: ""}{" "}
</dd>
<dd className="govuk-summary-list__actions">
+42 -48
View File
@@ -10,6 +10,7 @@ import ReactPDF, {
} 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";
@@ -87,11 +88,6 @@ const styles = StyleSheet.create({
flexDirection: "column",
},
});
// const renderer_1 = require("@react-pdf/renderer");
// const renderPara = {
// "p": ({ style, element, children }) =>
// createElement(renderer_1.View, { style: style }, children),
// };
export const finalComments_pdf = ({ docProps }) => {
//console.log("----", docProps);
@@ -104,6 +100,11 @@ export const finalComments_pdf = ({ docProps }) => {
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>
@@ -170,15 +171,7 @@ export const finalComments_pdf = ({ docProps }) => {
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>
<View
wrap={false}
style={{
@@ -191,8 +184,7 @@ export const finalComments_pdf = ({ docProps }) => {
Site address/grid ref:
</Text>
<Text style={styles.questionAnswer}>
123 Big Street, Small Town, Little County,
XD23 54X
{values.siteAddress}
</Text>
</View>
<View
@@ -207,7 +199,7 @@ export const finalComments_pdf = ({ docProps }) => {
Case Type:
</Text>
<Text style={styles.questionAnswer}>
Planning applicaiton (s78)
{appealTypeValue.value}
</Text>
</View>
</View>
@@ -241,11 +233,11 @@ export const finalComments_pdf = ({ docProps }) => {
<Text style={styles.questionTextMid}>
Final Comments
</Text>
<View style={styles.questionAnswer}>
<Html style={styles.richArea}>
{values.representationComments}
</Html>
</View>
</View>
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{values.representationComments}
</Html>
</View>
</View>
</View>
@@ -271,12 +263,32 @@ export const finalComments_pdf = ({ docProps }) => {
>
<Text style={styles.questionBullet}>11.</Text>
<Text style={styles.questionText}>
List of attachec files
List of attached files
</Text>
<View style={styles.questionAnswer}>
<Html style={styles.richArea}>
{values.LPAcaseFileAndReps}
</Html>
<View
style={[
styles.questionAnswer,
{ flexDirection: "column" },
]}
>
{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>
@@ -311,7 +323,7 @@ export const finalComments_pdf = ({ docProps }) => {
Signed:
</Text>
<Text style={styles.questionAnswer}>
{values.caseOfficer}
{values.firstname} {values.lastname}
</Text>
</View>
<View
@@ -325,7 +337,7 @@ export const finalComments_pdf = ({ docProps }) => {
Date:
</Text>
<Text style={styles.questionAnswer}>
{formatDates(values.signedDate)}
{signedDate}
</Text>
</View>
</View>
@@ -340,28 +352,10 @@ export const finalComments_pdf = ({ docProps }) => {
On behalf of:
</Text>
<Text style={styles.questionAnswerWide}>
{values.onBehalfOfLPA}
{values.representationCapacity}
</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
@@ -193,8 +193,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
Site address/grid ref:
</Text>
<Text style={styles.questionAnswer}>
123 Big Street, Small Town, Little County,
XD23 54X
{values.siteAddress}
</Text>
</View>
<View
@@ -209,7 +208,7 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
Case Type:
</Text>
<Text style={styles.questionAnswer}>
Planning applicaiton (s78)
{appealTypeValue.value}
</Text>
</View>
</View>
@@ -1300,6 +1299,57 @@ export const lpaQuestionnaire_pdf = ({ docProps }) => {
</Text>
</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}></Text>
<Text style={styles.questionText}>
List of attached files
</Text>
<View
style={[
styles.questionAnswer,
{ flexDirection: "column" },
]}
>
{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 style={{ marginTop: 50, fontSize: 12 }}>
<Text>
* Article 11 of The Town and Country Planning
+74 -36
View File
@@ -10,6 +10,7 @@ import ReactPDF, {
} 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";
@@ -87,11 +88,6 @@ const styles = StyleSheet.create({
flexDirection: "column",
},
});
// const renderer_1 = require("@react-pdf/renderer");
// const renderPara = {
// "p": ({ style, element, children }) =>
// createElement(renderer_1.View, { style: style }, children),
// };
export const other_pdf = ({ docProps }) => {
//console.log("----", docProps);
@@ -104,6 +100,11 @@ export const other_pdf = ({ docProps }) => {
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>
@@ -164,8 +165,29 @@ export const other_pdf = ({ docProps }) => {
{values.caseRef}
</Text>
</View>
{/* <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",
@@ -177,9 +199,9 @@ export const other_pdf = ({ docProps }) => {
Case Type:
</Text>
<Text style={styles.questionAnswer}>
Planning applicaiton (s78)
{appealTypeValue.value}
</Text>
</View> */}
</View>
</View>
</View>
<View>
@@ -198,6 +220,20 @@ export const other_pdf = ({ docProps }) => {
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}
@@ -206,7 +242,7 @@ export const other_pdf = ({ docProps }) => {
</View>
</View>
</View>
{/* <View>
<View>
<View
style={{
marginTop: 10,
@@ -229,10 +265,30 @@ export const other_pdf = ({ docProps }) => {
<Text style={styles.questionText}>
List of attached files
</Text>
<View style={styles.questionAnswer}>
<Html style={styles.richArea}>
{values.LPAcaseFileAndReps}
</Html>
<View
style={[
styles.questionAnswer,
{ flexDirection: "column" },
]}
>
{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>
@@ -267,7 +323,7 @@ export const other_pdf = ({ docProps }) => {
Signed:
</Text>
<Text style={styles.questionAnswer}>
{values.caseOfficer}
{values.firstname} {values.lastname}
</Text>
</View>
<View
@@ -281,7 +337,7 @@ export const other_pdf = ({ docProps }) => {
Date:
</Text>
<Text style={styles.questionAnswer}>
{formatDates(values.signedDate)}
{signedDate}
</Text>
</View>
</View>
@@ -296,29 +352,11 @@ export const other_pdf = ({ docProps }) => {
On behalf of:
</Text>
<Text style={styles.questionAnswerWide}>
{values.onBehalfOfLPA}
{values.representationCapacity}
</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>
</View>
<Text
style={styles.pageNumber}
+42 -46
View File
@@ -10,6 +10,7 @@ import ReactPDF, {
} 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";
@@ -87,11 +88,6 @@ const styles = StyleSheet.create({
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);
@@ -104,6 +100,11 @@ export const statement_pdf = ({ docProps }) => {
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>
@@ -170,15 +171,7 @@ export const statement_pdf = ({ docProps }) => {
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>
<View
wrap={false}
style={{
@@ -191,8 +184,7 @@ export const statement_pdf = ({ docProps }) => {
Site address/grid ref:
</Text>
<Text style={styles.questionAnswer}>
123 Big Street, Small Town, Little County,
XD23 54X
{values.siteAddress}
</Text>
</View>
<View
@@ -207,7 +199,7 @@ export const statement_pdf = ({ docProps }) => {
Case Type:
</Text>
<Text style={styles.questionAnswer}>
Planning applicaiton (s78)
{appealTypeValue.value}
</Text>
</View>
</View>
@@ -239,12 +231,14 @@ export const statement_pdf = ({ docProps }) => {
5.
</Text>
<Text style={styles.questionTextMid}>
Stament
</Text>
<Text style={styles.questionAnswerMid}>
{values.representationComment}
Statement
</Text>
</View>
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{values.representationComments}
</Html>
</View>
</View>
</View>
</View>
@@ -271,10 +265,30 @@ export const statement_pdf = ({ docProps }) => {
<Text style={styles.questionText}>
List of attached files
</Text>
<View style={styles.questionAnswer}>
<Html style={styles.richArea}>
{values.LPAcaseFileAndReps}
</Html>
<View
style={[
styles.questionAnswer,
{ flexDirection: "column" },
]}
>
{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>
@@ -309,7 +323,7 @@ export const statement_pdf = ({ docProps }) => {
Signed:
</Text>
<Text style={styles.questionAnswer}>
{values.caseOfficer}
{values.firstname} {values.lastname}
</Text>
</View>
<View
@@ -323,7 +337,7 @@ export const statement_pdf = ({ docProps }) => {
Date:
</Text>
<Text style={styles.questionAnswer}>
{formatDates(values.signedDate)}
{signedDate}
</Text>
</View>
</View>
@@ -338,28 +352,10 @@ export const statement_pdf = ({ docProps }) => {
On behalf of:
</Text>
<Text style={styles.questionAnswerWide}>
{values.onBehalfOfLPA}
{values.representationCapacity}
</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
+42 -46
View File
@@ -10,6 +10,7 @@ import ReactPDF, {
} 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";
@@ -87,11 +88,6 @@ const styles = StyleSheet.create({
flexDirection: "column",
},
});
// const renderer_1 = require("@react-pdf/renderer");
// const renderPara = {
// "p": ({ style, element, children }) =>
// createElement(renderer_1.View, { style: style }, children),
// };
export const writtenStatement_pdf = ({ docProps }) => {
//console.log("----", docProps);
@@ -104,6 +100,11 @@ export const writtenStatement_pdf = ({ docProps }) => {
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>
@@ -170,15 +171,7 @@ export const writtenStatement_pdf = ({ docProps }) => {
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>
<View
wrap={false}
style={{
@@ -191,8 +184,7 @@ export const writtenStatement_pdf = ({ docProps }) => {
Site address/grid ref:
</Text>
<Text style={styles.questionAnswer}>
123 Big Street, Small Town, Little County,
XD23 54X
{values.siteAddress}
</Text>
</View>
<View
@@ -207,7 +199,7 @@ export const writtenStatement_pdf = ({ docProps }) => {
Case Type:
</Text>
<Text style={styles.questionAnswer}>
Planning applicaiton (s78)
{appealTypeValue.value}
</Text>
</View>
</View>
@@ -239,12 +231,14 @@ export const writtenStatement_pdf = ({ docProps }) => {
5.
</Text>
<Text style={styles.questionTextMid}>
Stament
</Text>
<Text style={styles.questionAnswerMid}>
{values.representationComment}
Statement
</Text>
</View>
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{values.representationComments}
</Html>
</View>
</View>
</View>
</View>
@@ -271,10 +265,30 @@ export const writtenStatement_pdf = ({ docProps }) => {
<Text style={styles.questionText}>
List of attached files
</Text>
<View style={styles.questionAnswer}>
<Html style={styles.richArea}>
{values.LPAcaseFileAndReps}
</Html>
<View
style={[
styles.questionAnswer,
{ flexDirection: "column" },
]}
>
{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>
@@ -309,7 +323,7 @@ export const writtenStatement_pdf = ({ docProps }) => {
Signed:
</Text>
<Text style={styles.questionAnswer}>
{values.caseOfficer}
{values.firstname} {values.lastname}
</Text>
</View>
<View
@@ -323,7 +337,7 @@ export const writtenStatement_pdf = ({ docProps }) => {
Date:
</Text>
<Text style={styles.questionAnswer}>
{formatDates(values.signedDate)}
{signedDate}
</Text>
</View>
</View>
@@ -338,28 +352,10 @@ export const writtenStatement_pdf = ({ docProps }) => {
On behalf of:
</Text>
<Text style={styles.questionAnswerWide}>
{values.onBehalfOfLPA}
{values.representationCapacity}
</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