Merge pull request #13 from MiguelPelegrina/KAN-1-Download-order-as-pdf

implemented generating an pdf from an existing order

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
     "bootstrap": "^5.3.2",
+    "chart.js": "^4.4.2",
     "flatted": "^3.2.9",
     "jwt-decode": "^4.0.0",
     "moment": "^2.30.1",
@@ -29,6 +30,7 @@
     "rxjs": "~7.8.0",
     "sweetalert2": "^11.10.7",
     "tslib": "^2.3.0",
+    "uuid": "^9.0.1",
     "xlsx": "^0.18.5",
     "zone.js": "~0.13.0"
   },
@@ -37,6 +39,7 @@
     "@angular/cli": "~16.0.1",
     "@angular/compiler-cli": "^16.0.0",
     "@types/jasmine": "~4.3.0",
+    "@types/uuid": "^9.0.8",
     "jasmine-core": "~4.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

src/app/components/order/list-order/list-order.component.html

@@ -105,10 +105,17 @@ <h1 class="text-center mt-3">List of orders</h1>
     <ng-container matColumnDef="expand">
       <th mat-header-cell *matHeaderCellDef aria-label="row actions">Actions</th>
       <td mat-cell *matCellDef="let element">
+        <mat-icon
+          (click)="generateOrderPDF(element.id); $event.stopPropagation()"
+          fontIcon="file_download"
+          matTooltip="Download the order as PDF file"
+        >
+        </mat-icon>
         <button (click)="reorder(element); $event.stopPropagation()" *ngxPermissionsOnly="['CLIENT']" mat-mini-fab matTooltip="Order this order again">
           <mat-icon>add</mat-icon>
         </button>
-        <button mat-icon-button aria-label="expand row">
+
+        <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
           <mat-icon *ngIf="expandedElement !== element">keyboard_arrow_down</mat-icon>
           <mat-icon *ngIf="expandedElement === element">keyboard_arrow_up</mat-icon>
         </button>

src/app/components/order/list-order/list-order.component.ts

@@ -19,6 +19,7 @@ import { IIndexable } from 'src/app/shared/utils/interfaces/i-indexable';
 import { ANIMATION_DURATION, StringValues } from 'src/app/shared/utils/string-values';
 import { informUserOfError } from 'src/app/shared/utils/utils';
 import Swal from 'sweetalert2';
+import { v4 as uuidv4 } from 'uuid';
 
 /**
  * Component that lists all orders in a table.
@@ -173,6 +174,23 @@ export class ListOrderComponent implements AfterViewInit, OnDestroy, OnInit {
   }
 
   // Protected methods
+  /**
+   * Generates a PDF for a specific order and triggers a download of the PDF file.
+   *
+   * @param {number} id - The ID of the order for which the PDF should be generated.
+   */
+  protected generateOrderPDF(id: number){
+    this.orderService.generateOrderPDF(id).subscribe((blob) => {
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${uuidv4()}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    });
+  }
+
   /**
    * Gets the total cost of the expanded order.
    * @returns The total cost of the expanded order.

src/app/services/order/order.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable, catchError } from 'rxjs';
+import { Observable, catchError, throwError } from 'rxjs';
 import { Order } from 'src/app/shared/domain/order/order';
 import { OrderedBook } from 'src/app/shared/domain/order/ordered-book';
 import { AbstractService } from 'src/app/shared/service/abstract.service';
@@ -45,6 +45,21 @@ export class OrderService extends AbstractService<Order, number> {
     );
   }
 
+  /**
+   * Generates a PDF for a specific order and returns it as a Blob.
+   *
+   * @param {number} id - The ID of the order for which the PDF should be generated.
+   * @returns {Observable<any>} An Observable that emits the PDF file as a Blob.
+   */
+  public generateOrderPDF(id: number): Observable<any>{
+    return this.httpClient.get(
+      `${StringValues.BASE_ORDER_URL}/generateOrderPDF/${id}`,
+      {responseType: 'blob'},
+    ).pipe(
+      catchError(this.handleError)
+    );
+  }
+
   /**
    * Retrieves a list of orders based on optional query parameters.
    * @param filter - Optional. Filters orders based on a provided string.
@@ -111,4 +126,34 @@ export class OrderService extends AbstractService<Order, number> {
       catchError(this.handleError)
     );
   }
+
+  /**
+ * Handles errors that occur during the generation of the PDF.
+ *
+ * @param error - The error object.
+ * @returns An Observable that emits an error.
+ */
+private handleBlobError(error: any): Observable<never> {
+  if (error.error instanceof Blob) {
+     // Handle Blob error
+     const reader = new FileReader();
+     reader.onload = () => {
+       try {
+         const errorMessage = JSON.parse(reader.result as string);
+         console.error('Error generating PDF:', errorMessage);
+         // You can also display this error message to the user
+       } catch (e) {
+         console.error('Error parsing error Blob:', e);
+       }
+     };
+     reader.onerror = () => {
+       console.error('Error reading error Blob:', reader.error);
+     };
+     reader.readAsText(error.error);
+  } else {
+     // Handle other types of errors
+     console.error('Error generating PDF:', error);
+  }
+  return throwError(error);
+ }
 }