PDF Download

client/src/app/modules/keys/components/create-handover-pdf-dialog/create-handover-pdf-dialog.component.ts

@@ -37,7 +37,6 @@ export class CreateHandoverPdfDialogComponent {
   });
 
   ngOnInit() {
-    console.log(this.data)
     this.patchInitialData();
   }
 

client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts

@@ -80,7 +80,18 @@ export class HandoverDialogComponent extends AgGridContainerComponent {
         , sort: 'desc'
         , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value))
       },
-    
+      {
+        colId: 'download',
+        headerName: 'PDF',
+        field: 'pdfFormKey',
+        width: 60,
+        tooltipValueGetter: () => 'Übergabeprotokoll herunterladen',
+        cellRenderer: () => '',
+        cellClass: (data: any) => data.value ? 'download-pdf' : '',
+        onCellClicked: (event) => {
+          this.downloadHandoverPDF(event.value)
+        },
+      }
     ]
   }
 
@@ -94,7 +105,7 @@ export class HandoverDialogComponent extends AgGridContainerComponent {
     key: new FormControl(this.data),
     direction: new FormControl('out', Validators.required),
     timestamp: new FormControl(new Date(), Validators.required),
-    handoverDocument: new FormControl<boolean>(false)
+    handoverDocument: new FormControl<boolean>(true)
   });
 
   ngOnInit() {
@@ -104,7 +115,6 @@ export class HandoverDialogComponent extends AgGridContainerComponent {
   loadData() {
     this.isLoading = true;
     const promises: Observable<any>[] = [
-      this.getHandovers(),
       from(this.loadCustomers())
     ];
 
@@ -218,6 +228,13 @@ export class HandoverDialogComponent extends AgGridContainerComponent {
   onGridReady(params: GridReadyEvent) {
     this.gridApi = params.api;
     this.gridApi.addEventListener("cellEditingStopped", evt => {})
+    this.getHandovers();
+    //this.downloadHandoverPDF('5b1f92d9-c66c-49ad-b654-b9a9a6a59752')
+  }
+
+  downloadHandoverPDF(key: string) {
+    if (!key) { return; }
+    this.api.getHandoverPdf(key)
   }
 
 }

client/src/app/shared/api.service.ts

@@ -482,4 +482,20 @@ export class ApiService {
     })
     
   }
+
+  getHandoverPdf(handoverId: string) {
+    return new Promise(resolve => {
+      this.http.get(`/api/key/${handoverId}/handover/pdf`,{
+        responseType: 'blob',
+      }).subscribe((blob) => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'schluesseluebergabe.pdf';
+        a.click();
+        URL.revokeObjectURL(url);
+        resolve(null)
+      });
+    })
+  }
 }

client/src/styles.scss

@@ -62,6 +62,19 @@ html, body {
 
 }
 
+.download-pdf {
+  background-image: url("./assets/img/pdf.png");
+  background-size: 22px;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  // background-color: red;
+  &:hover {
+    background-color: #ccc;
+  }
+}
+
 .icon-btn-xs {
   width: 28px;
   height: 28px;