create rep pdf tweaks prior to multi types matrix
This commit is contained in:
@@ -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> */}
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user