Refactor pdf (#75)

* refactor pdf generation; add eu icon

* fix text and space
Co-authored-by: Gordon Grund <gordon.grund@outlook.de>

package.json

@@ -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": {

src/assets/SCSS/custom.scss

@@ -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;

src/assets/i18n/en/translation.json

@@ -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",

src/components/header.component.tsx

@@ -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>

src/components/show-certificate.component.tsx

@@ -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

src/fonts.d.ts

-declare module '*.woff';
-declare module '*.woff2';
-declare module '*.ttf';
\ No newline at end of file

src/misc/ShowCertificateData.tsx

@@ -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 => {