Unverified Commit 6620270a authored by ggrund-tsi's avatar ggrund-tsi Committed by GitHub
Browse files

Refactor pdf (#75)



* refactor pdf generation; add eu icon

* fix text and space
Co-authored-by: default avatarGordon Grund <gordon.grund@outlook.de>
parent 18a861dd
......@@ -31,7 +31,6 @@
"json-schema-to-typescript": "^10.1.4",
"jsonschema": "^1.4.0",
"jspdf": "^2.3.1",
"jspdf-customfonts": "^0.0.4-rc.4",
"keycloak-js": "^10.0.1",
"lint-staged": "^10.5.4",
"moment": "^2.29.1",
......@@ -51,8 +50,12 @@
"web-vitals": "^1.0.1"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": ["eslint --fix"],
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write"]
"*.{js,jsx,ts,tsx}": [
"eslint --fix"
],
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
]
},
"proxy": "http://localhost:8080",
"scripts": {
......
......@@ -315,11 +315,6 @@ hr {
display: none;
}
.eu-logo {
margin-left: 1rem;
margin: 13px 0px 13px 16px;
}
.header-title {
font-size: 18px;
margin-left: 16px;
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -38,7 +38,8 @@
"patientdata-exclude": "Include patient data in QR-Code",
"patient-data-correction": "Correct patient data",
"process-finish": "Finish process",
"generate-pdf": "Generate PDF",
"generate-pdf": "Generate PDF",
"show-pdf": "Show PDF",
"qr-code": "QR Code",
"your-certificate": "Your Certificate",
"personal-data": "Personal Details",
......
......@@ -26,7 +26,7 @@ import '../i18n';
import { useTranslation } from 'react-i18next';
import useNavigation from '../misc/navigation';
import EULogo from '../assets/images/EU_logo@3x.png'
import EULogo from '../assets/images/Flag+EU.png'
const Header = (props: any) => {
......@@ -44,7 +44,7 @@ const Header = (props: any) => {
<>
<Container className='bg-white px-0 position-relative'>
{/* simple header with logo */}
<Image src={EULogo} className='eu-logo' />
<Image src={EULogo} className='m-3' />
</Container>
<Container className='d-flex bg-gray-1 px-0 position-relative'>
<span className='header-title'>{t('translation:title')}</span>
......
This diff is collapsed.
......@@ -44,13 +44,16 @@ const ShowCertificate = (props: any) => {
const { t } = useTranslation();
const [isInit, setIsInit] = React.useState(false)
const [pdfIsInit, setPdfIsInit] = React.useState(false)
const [pdfIsReady, setPdfIsReady] = React.useState(false)
const [eudgc, setEudgc] = React.useState<EUDGC>();
const [qrCodeValue, setQrCodeValue] = React.useState('');
const [tan, setTAN] = React.useState('');
const [qrCodeForPDF, setQrCodeForPDF] = React.useState<any>();
const pdfGenerator = usePdfGenerator(qrCodeForPDF, eudgc);
const [eudgcForPDF, setEudgcForPDF] = React.useState<EUDGC>();
const pdf = usePdfGenerator(qrCodeForPDF, eudgcForPDF, (isInit) => setPdfIsInit(isInit), (isReady) => setPdfIsReady(isReady));
// set patient data on mount and set hash from uuid
React.useEffect(() => {
......@@ -89,6 +92,13 @@ const ShowCertificate = (props: any) => {
}
}, [navigation]);
React.useEffect(() => {
if (pdf) {
handleShowPdf();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pdfIsReady]);
const finishProcess = () => {
props.setEudgc(undefined);
navigation!.toLanding();
......@@ -122,6 +132,15 @@ const ShowCertificate = (props: any) => {
const handleGeneratePdf = () => {
setQrCodeForPDF(document.getElementById('qr-code-pdf'));
setEudgcForPDF(eudgc);
}
const handleShowPdf = () => {
if (pdf) {
const blobPDF = new Blob([pdf.output('blob')], { type: 'application/pdf' });
const blobUrl = URL.createObjectURL(blobPDF);
window.open(blobUrl);
}
}
return (
......@@ -139,7 +158,7 @@ const ShowCertificate = (props: any) => {
<Card.Body id='data-body' className='p-3'>
<Row>
<Col sm='6' className='p-3'>
<ShowCertificateData eudgc={eudgc} />
</Col>
......@@ -161,7 +180,7 @@ const ShowCertificate = (props: any) => {
{/* footer with correction and finish button */}
<Card.Footer id='data-footer'>
<Row>
<Col xs='6' md='4' className='pl-0 pr-2'>
<Col xs='12' md='4' className='pl-md-0 pr-md-2 pb-3 pb-md-0'>
<Button
className=''
variant='outline-primary'
......@@ -171,16 +190,26 @@ const ShowCertificate = (props: any) => {
{t('translation:patient-data-correction')}
</Button>
</Col>
<Col xs='6' md='4' className='pl-0 pr-2'>
<Col xs='6' md='4' className='px-md-2 pr-2'>
<Button
className='my-1 my-md-0'
className=''
block
onClick={handleGeneratePdf}
disabled={!pdfIsInit}
hidden={pdfIsReady}
>
{t('translation:generate-pdf')}
</Button>
<Button
className='m-0'
block
onClick={handleShowPdf}
hidden={!pdfIsReady}
>
{t('translation:show-pdf')}
</Button>
</Col>
<Col xs='6' md='3' className='pr-0 pl-2'>
<Col xs='6' md='4' className='pr-md-0 pl-2'>
<Button
className=''
block
......
declare module '*.woff';
declare module '*.woff2';
declare module '*.ttf';
\ No newline at end of file
......@@ -196,7 +196,7 @@ export const ShowCertificateData = (props: any) => {
export default ShowCertificateData
export const convertDateToOutputFormat = (dateString: string): string => dateString ? moment(dateString, 'YYYY-MM-DDTHH:mm:ss.sssZ').format(utils.momentDateTimeFormat).toString() : '';
export const convertDateToOutputFormat = (dateString?: string): string => dateString ? moment(dateString, 'YYYY-MM-DDTHH:mm:ss.sssZ').format(utils.momentDateTimeFormat).toString() : '';
// returns display value for key
export const getValueSetDisplay = (key: string | undefined, valueSet: IValueSet | undefined): string | undefined => {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment