rich text field and pdf create for appeal

This commit is contained in:
2024-01-16 14:23:11 +00:00
parent e0badd6b11
commit 5f82c59abb
30 changed files with 592 additions and 288 deletions
+49 -11
View File
@@ -22,6 +22,7 @@ import ReactPDF, {
Font,
} from "@react-pdf/renderer";
import _ from "lodash";
import Html from "react-pdf-html";
import { DOMParser, XMLSerializer } from "@xmldom/xmldom";
@@ -59,7 +60,11 @@ export const AppealRow_pdf = (props) => {
},
logoImage: { width: "200pt" },
questionBullet: { width: "5%", fontSize: 12 },
questionText: { width: "30%", fontSize: 12 },
questionText: {
width: "35%",
fontSize: 12,
marginRight: 5,
},
questionTextMid: { width: "80%", fontSize: 12 },
questionTextWide: { width: "95%", fontSize: 12, marginBottom: 5 },
questionAnswer: {
@@ -84,9 +89,8 @@ export const AppealRow_pdf = (props) => {
},
questionAnswerWide: {
color: "#757575",
width: "95%",
width: "100%",
fontSize: 12,
marginLeft: "5%",
border: 1,
borderColor: "#eee",
backgroundColor: "white",
@@ -182,7 +186,6 @@ export const AppealRow_pdf = (props) => {
case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
return (
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
@@ -283,7 +286,46 @@ export const AppealRow_pdf = (props) => {
</View>
);
break;
case "{E0DECE4B-6666-4a8f-A065-082708572369}":
return (
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text
style={
styles.questionTextWide
}
>
{rows[0].value}
</Text>
</View>
<View
style={
styles.questionAnswerWide
}
>
<Html style={styles.richArea}>
{
props.props[
datafieldname[0]
.value
]
}{" "}
</Html>
</View>
</View>
);
break;
default:
return (
<View
@@ -297,12 +339,8 @@ export const AppealRow_pdf = (props) => {
{/* {FieldsTranslations(rows[0].value)} */}
{rows[0].value}
</Text>
<Text
style={
styles.questionAnswerWide
}
>
<Text style={styles.questionAnswer}>
{" "}
{
props.props[
datafieldname[0].value
@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
},
questionAnswerWide: {
color: "#757575",
width: "95%",
width: "100%",
fontSize: 12,
marginLeft: "5%",
border: 1,
@@ -121,7 +121,7 @@ export const planningappeals78_pdf = ({ docProps }) => {
xmlStr = xmlStr.replace(/> <"/g, "><");
xmlStr = xmlStr.toString();
console.log(xmlStr);
//console.log(xmlStr);
const parser = new DOMParser();
var doc = parser.parseFromString(xmlStr, "text/xml");
@@ -177,74 +177,6 @@ export const planningappeals78_pdf = ({ docProps }) => {
/>
</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}>
{t(
"myrepresentations:s78-section-question-1"
)}
:
</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
@@ -305,12 +237,12 @@ export const planningappeals78_pdf = ({ docProps }) => {
}}
>
<Text style={styles.questionBullet}>11.</Text>
<Text style={styles.questionText}>
<Text style={styles.questionTextWide}>
List of attached files
</Text>
<View
style={[
styles.questionAnswer,
styles.questionAnswerWide,
{ flexDirection: "column" },
]}
>