Display PDF correctly

src/app/app.module.ts

@@ -15,6 +15,7 @@ import {SigningSidebarComponent} from './components/signing/signing-sidebar/sign
 import {
   SigningSidebarItemComponent
 } from './components/signing/signing-sidebar/signing-sidebar-item/signing-sidebar-item.component';
+import {PdfViewerModule} from 'ng2-pdf-viewer';
 
 @NgModule({
   declarations: [
@@ -27,7 +28,8 @@ import {
     BrowserModule,
     AppRoutingModule,
     FormsModule,
-    SigningSidebarItemComponent
+    SigningSidebarItemComponent,
+    PdfViewerModule
   ],
   providers: [
     {provide: BASE_PATH, useValue: environment.apiBasePath},

src/app/components/signing/signing.component.html

@@ -9,11 +9,14 @@
       <button class="bg-red-600 px-4 py-2 rounded cursor-pointer" (click)="onConfirm()">Confirm</button>
     </div>
 
-    <div class="bg-white p-6 shadow-lg mt-4">
-      <h2 class="text-xl font-bold">Dear Mr. Jones</h2>
-      <p class="mt-2 text-gray-700">
-        Evelitat endanda nonsecto bland autemque re exerio volorporeium eos eicabo...
-      </p>
+    <div class="bg-grey p-6 shadow-lg mt-4 h-[calc(100vh-10rem)] overflow-auto">
+      <pdf-viewer
+        *ngIf="selectedDocumentPdf != undefined"
+        [render-text]="true"
+        [original-size]="true"
+        [src]="selectedDocumentPdf"
+        class="w-full h-full"
+      ></pdf-viewer>
     </div>
   </div>
 </div>

src/app/components/signing/signing.component.ts

@@ -5,6 +5,7 @@ import {
   GetSigningRequestResponseSigningRequestDocument, PatchOperation, SigningRequestDocumentService,
   SigningRequestService
 } from '../../../gen';
+import {PDFSource} from 'ng2-pdf-viewer';
 
 @Component({
   selector: 'app-hello',
@@ -16,7 +17,8 @@ export class SigningComponent implements OnInit {
   documents: GetSigningRequestResponseSigningRequestDocument[] = [];
   selectedDocument: GetSigningRequestResponseSigningRequestDocument = {
     confirmed: false, id: '', name: ''
-  }
+  };
+  selectedDocumentPdf: PDFSource | undefined = undefined;
 
   constructor(private route: ActivatedRoute, private signingRequestService: SigningRequestService, private signingRequestDocumentService: SigningRequestDocumentService) {
   }
@@ -36,7 +38,31 @@ export class SigningComponent implements OnInit {
 
   setActiveDocument(document: GetSigningRequestResponseSigningRequestDocument): void {
     this.selectedDocument = document;
-    console.log(this.selectedDocument);
+    this.signingRequestDocumentService.getSigningRequestDocumentData(this.selectedDocument.id).subscribe({
+      next: (fileData: Blob): void => {
+        this.convertBlobToUint8Array(fileData).then((uInt8Array: Uint8Array) => {
+          this.selectedDocumentPdf = {data: uInt8Array};
+        });
+      },
+      error: (err: Error): void => {
+        console.log(err);
+      }
+    })
+  }
+
+  private convertBlobToUint8Array(blob: Blob): Promise<Uint8Array> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const arrayBuffer = reader.result as ArrayBuffer;
+        const uint8Array = new Uint8Array(arrayBuffer);
+        resolve(uint8Array);
+      };
+      reader.onerror = () => {
+        reject(reader.error);
+      };
+      reader.readAsArrayBuffer(blob);
+    });
   }
 
   onConfirm(): void {