Merge pull request #43 from camptocamp/GSGGR-187-better-downloads

(feat) GSGGR-187 better downloads
camptocamp · Nov 7, 2024 · 72e237a · 72e237a
2 parents 37c0c35 + 5012b16
commit 72e237a
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 120 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "angular-split": "^16.2.1",
     "jasmine-spec-reporter": "^7.0.0",
     "lodash-es": "^4.17.21",
+    "mime-types": "^2.1.35",
     "ol": "^8.1.0",
     "ol-ext": "^4.0.24",
     "ol-geocoder": "^4.3.3",

diff --git a/src/app/_components/order-item-view/order-item-view.component.html b/src/app/_components/order-item-view/order-item-view.component.html
@@ -48,8 +48,8 @@
       <th mat-header-cell *matHeaderCellDef>{{ DOWNLAOD }}</th>
       <td mat-cell *matCellDef="let element">
         <button class="download-button" mat-raised-button color="primary"
-                *ngIf="element.status === 'PROCESSED'"
-                (click)="downloadOrder($event, element.id)">
+                *ngIf="element.status === 'PROCESSED' && element.download_guid"
+                (click)="downloadOrder($event, element)">
           {{ DOWNLAOD }}
         </button>
         <span *ngIf="element.status !== 'PROCESSED'">{{ getOrderStatus(element) }}</span>

diff --git a/src/app/_components/order-item-view/order-item-view.component.ts b/src/app/_components/order-item-view/order-item-view.component.ts
@@ -1,9 +1,9 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {IOrderItem, Order} from '../../_models/IOrder';
-import {GeoshopUtils} from '../../_helpers/GeoshopUtils';
-import {ApiOrderService} from '../../_services/api-order.service';
-import {MatLegacySnackBar as MatSnackBar} from '@angular/material/legacy-snack-bar';
-import {ConstantsService} from '../../constants.service';
+import { Component, Input, OnInit } from '@angular/core';
+import { IOrderItem, Order } from '../../_models/IOrder';
+import { ApiOrderService } from '../../_services/api-order.service';
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { ConstantsService } from '../../constants.service';
+import { HttpResponse } from '@angular/common/http';
 
 @Component({
   selector: 'gs2-order-item-view',
@@ -21,7 +21,7 @@ export class OrderItemViewComponent implements OnInit {
   readonly DOWNLAOD = ConstantsService.DOWNLAOD;
 
   constructor(private apiOrderService: ApiOrderService,
-              private snackBar: MatSnackBar) {
+    private snackBar: MatSnackBar) {
   }
 
   ngOnInit(): void {
@@ -42,34 +42,22 @@ export class OrderItemViewComponent implements OnInit {
     return returnValue;
   }
 
-  downloadOrder(event: MouseEvent, id: number) {
+  downloadOrder(event: MouseEvent, item: IOrderItem) {
     event.stopPropagation();
     event.preventDefault();
 
-    this.apiOrderService.downloadOrder(id, true).subscribe(link => {
-      if (!link) {
-        this.snackBar.open(
-          'Aucun fichier disponible', 'Ok', {panelClass: 'notification-info'}
-        );
-        return;
+    this.apiOrderService.downloadResult(item.download_guid!).subscribe({
+      next: (response: HttpResponse<Blob>) => {
+        const link = document.createElement('a');
+        // TODO: resolve filename properly after upgrading to the latest Angular
+        link.download = 'result.zip';
+        link.href = window.URL.createObjectURL(response.body!);
+        link.click();
+        window.URL.revokeObjectURL(link.href);
+      },
+      error: (error: any) => {
+        this.snackBar.open(error.detail ?? 'Aucun fichier disponible', 'Ok', { panelClass: 'notification-info' });
       }
-
-      if (link.detail) {
-        this.snackBar.open(
-          link.detail, 'Ok', {panelClass: 'notification-info'}
-        );
-        return;
-      }
-
-      if (link.download_link) {
-        const downloadLink = link.download_link;
-        if (downloadLink) {
-          const urlsParts = downloadLink.split('/');
-          const filename = urlsParts.pop() || urlsParts.pop();
-          GeoshopUtils.downloadData(downloadLink, filename || 'download.zip');
-        }
-      }
-
     });
   }
 }
diff --git a/src/app/_helpers/GeoshopUtils.ts b/src/app/_helpers/GeoshopUtils.ts
@@ -30,7 +30,7 @@ export class GeoshopUtils {
       total_with_vat_currency: '',
       total_with_vat: '',
       title: '',
-      status: 'DRAFT',
+      order_status: 'DRAFT',
       processing_fee_currency: '',
       processing_fee: '',
       part_vat_currency: '',

diff --git a/src/app/_models/IOrder.ts b/src/app/_models/IOrder.ts
@@ -49,6 +49,7 @@ export interface IOrderItem {
   /** id of the order   */
   order?: number;
   status?: OrderItemStatus;
+  download_guid?: string;
 }
 
 export interface IOrderToPost {
@@ -77,11 +78,12 @@ export interface IOrderSummary {
   total_with_vat: string;
   invoice_reference: string;
   email_deliver: string;
-  status: OrderStatus;
+  order_status: OrderStatus;
   date_ordered: string | undefined;
   date_processed: string | undefined;
   statusAsReadableIconText?: IStatusAsReadableIcon;
   id?: number;
+  download_guid?: string;
 }
 
 export interface IOrderDowloadLink {
@@ -113,7 +115,7 @@ export interface IOrder {
   geom: string | undefined;
   invoice_reference: string;
   email_deliver: string;
-  status: OrderStatus;
+  order_status: OrderStatus;
   date_ordered: string | undefined;
   date_processed: string | undefined;
   invoice_contact: string | number;
@@ -160,10 +162,11 @@ export class Order {
   geom: Polygon;
   invoice_reference: string;
   email_deliver: string;
-  status: OrderStatus;
+  order_status: OrderStatus;
   date_ordered: Date | undefined;
   date_processed: Date | undefined;
   invoice_contact: number;
+  download_guid: string|undefined;
 
   statusAsReadableIconText: IStatusAsReadableIcon;
   private readonly _isAllOrderItemCalculated: boolean = true;
@@ -172,7 +175,7 @@ export class Order {
   }
 
   get isQuotationCalculationFinished() {
-    return this.status === 'QUOTE_DONE';
+    return this.order_status === 'QUOTE_DONE';
   }
 
   private _invoiceContact: Contact | undefined;
@@ -234,7 +237,7 @@ export class Order {
       part_vat_currency: this.part_vat_currency,
       processing_fee: this.processing_fee,
       processing_fee_currency: this.processing_fee_currency,
-      status: this.status,
+      order_status: this.order_status,
       title: this.title,
       total_with_vat: this.total_with_vat,
       total_with_vat_currency: this.total_with_vat_currency,
@@ -283,7 +286,7 @@ export class Order {
       color: ''
     };
 
-    switch (order.status) {
+    switch (order.order_status) {
       case 'DRAFT':
         result = {
           text: ConstantsService.ORDER_STATUS.DRAFT,

diff --git a/src/app/_services/api-order.service.ts b/src/app/_services/api-order.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable, of, zip } from 'rxjs';
 import { IOrder, IOrderDowloadLink, IOrderItem, IOrderSummary, IOrderToPost, IOrderType, Order } from '../_models/IOrder';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpResponse } from '@angular/common/http';
 import { ConfigService } from './config.service';
 import { IApiResponse } from '../_models/IApi';
 import { catchError, flatMap, map } from 'rxjs/operators';
@@ -244,31 +244,13 @@ export class ApiOrderService {
       );
   }
 
-  public downloadOrder(orderId: number, isOrderItem = false) {
+  public downloadResult(guid: string): Observable<HttpResponse<Blob|null>> {
     this._getApiUrl();
-
-    const orderText = isOrderItem ? 'orderitem' : 'order';
-    const url = new URL(`${this.apiUrl}/${orderText}/${orderId}/download_link/`);
-
-    return this.http.get<IOrderDowloadLink | null>(url.toString())
-      .pipe(
-        catchError(() => {
-          return of(null);
-        })
-      );
-  }
-
-  public downloadOrderByUUID(uuid: string) {
-    this._getApiUrl();
-
-    const url = new URL(`${this.apiUrl}/download/${uuid}/get_link/`);
-
-    return this.http.get<IOrderDowloadLink | null>(url.toString())
-      .pipe(
-        catchError(() => {
-          return of(null);
-        })
-      );
+    const url = new URL(`${this.apiUrl}/download/${guid}/result`);
+    return this.http.get(url.toString(), {
+      observe: 'response',
+      responseType: 'blob'
+    });
   }
 
   getContact(contactId: number | string) {

diff --git a/src/app/_store/cart/cart.reducer.ts b/src/app/_store/cart/cart.reducer.ts
@@ -12,7 +12,7 @@ export const initialState: CartState = {
   total_with_vat_currency: '',
   total_with_vat: '',
   title: '',
-  status: 'DRAFT',
+  order_status: 'DRAFT',
   processing_fee_currency: '',
   processing_fee: '',
   part_vat_currency: '',
@@ -38,7 +38,7 @@ const cartReducer = createReducer(initialState,
       total_with_vat_currency: '',
       total_with_vat: '',
       title: '',
-      status: 'DRAFT',
+      order_status: 'DRAFT',
       processing_fee_currency: '',
       processing_fee: '',
       part_vat_currency: '',

diff --git a/src/app/account/orders/order/order.component.html b/src/app/account/orders/order/order.component.html
@@ -19,12 +19,12 @@
     <mat-panel-description>
       <span [class]="panel.expanded ? '' : 'text-ellipsis-2'">{{order?.description}}</span>
       <button class="download-button" mat-raised-button color="warn"
-              *ngIf="order?.status === 'DRAFT' || (selectedOrder && selectedOrder.isQuotationCalculationFinished)"
+              *ngIf="order?.order_status === 'DRAFT' || (selectedOrder && selectedOrder.isQuotationCalculationFinished)"
               (click)="deleteOrder($event)" i18n="@@order.delete">
         Supprimer
       </button>
       <button class="download-button" mat-raised-button color="primary"
-              *ngIf="order?.status === 'PROCESSED'"
+              *ngIf="order?.order_status === 'PROCESSED'"
               (click)="downloadOrder($event)">
         {{ DOWNLAOD }}
       </button>
@@ -46,8 +46,8 @@
               (click)="confirmOrder()" i18n="@@order.confirm">
         Confirmer la commande
       </button>
-      <button *ngIf="order?.status === 'DRAFT'" mat-raised-button color="primary" (click)="pushBackToCart()" i18="order.back_to_chart">Remettre au panier</button>
-      <button *ngIf="order?.status !== 'DRAFT' && order?.status !== 'ARCHIVED'" mat-raised-button color="primary" (click)="duplicateInCart()" i18n="@@order.duplicate">Dupliquer dans le panier</button>
+      <button *ngIf="order?.order_status === 'DRAFT'" mat-raised-button color="primary" (click)="pushBackToCart()" i18="order.back_to_chart">Remettre au panier</button>
+      <button *ngIf="order?.order_status !== 'DRAFT' && order?.order_status !== 'ARCHIVED'" mat-raised-button color="primary" (click)="duplicateInCart()" i18n="@@order.duplicate">Dupliquer dans le panier</button>
     </div>
   </div>
 

diff --git a/src/app/account/orders/order/order.component.ts b/src/app/account/orders/order/order.component.ts
@@ -15,6 +15,7 @@ import {MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef} from '
 import {ConfirmDialogComponent} from '../../../_components/confirm-dialog/confirm-dialog.component';
 import Geometry from 'ol/geom/Geometry';
 import { ConstantsService } from 'src/app/constants.service';
+import { HttpResponse } from '@angular/common/http';
 
 // TODO tranlsate after updating SnackBar!
 @Component({
@@ -56,28 +57,17 @@ export class OrderComponent implements OnInit {
       return;
     }
 
-    this.apiOrderService.downloadOrder(this.order.id).subscribe(link => {
-      if (!link) {
-        this.snackBar.open(
-          'Aucun fichier disponible', 'Ok', {panelClass: 'notification-info'}
-        );
-        return;
-      }
-
-      if (link.detail) {
-        this.snackBar.open(
-          link.detail, 'Ok', {panelClass: 'notification-info'}
-        );
-        return;
-      }
-
-      if (link.download_link) {
-        const downloadLink = (link as IOrderDowloadLink).download_link;
-        if (downloadLink) {
-          const urlsParts = downloadLink.split('/');
-          const filename = urlsParts.pop() || urlsParts.pop();
-          GeoshopUtils.downloadData(downloadLink, filename || 'download.zip');
-        }
+    this.apiOrderService.downloadResult(this.order.download_guid!).subscribe({
+      next: (response: HttpResponse<Blob>) => {
+        const link = document.createElement('a');
+        // TODO: resolve filename properly after upgrading to the latest Angular
+        link.download = 'result.zip';
+        link.href = window.URL.createObjectURL(response.body!);
+        link.click();
+        window.URL.revokeObjectURL(link.href);
+      },
+      error: (error: any) => {
+        this.snackBar.open(error.detail ?? 'Aucun fichier disponible', 'Ok', { panelClass: 'notification-info' });
       }
     });
   }

diff --git a/src/app/welcome/download/download.component.html b/src/app/welcome/download/download.component.html
@@ -15,14 +15,14 @@
         Commande du {{order.date_ordered | date}}.<span class="text-ellipsis-2">{{order.description}}</span>
       </mat-card-subtitle>
       <mat-card-content>
-        <div *ngIf="order && order.status === 'PROCESSED'" class="mb-2">
+        <div *ngIf="order && order.order_status === 'PROCESSED'" class="mb-2">
           <div class="flex">
             <button mat-raised-button color="primary" class="action-button" (click)="downloadOrder($event)">
               <mat-icon>download</mat-icon> {{ DOWNLAOD }}
             </button>
           </div>
         </div>
-        <div *ngIf="order?.status !== 'PROCESSED'">
+        <div *ngIf="order?.order_status !== 'PROCESSED'">
           <p i18n>Votre commande n'est plus disponible.</p>
           <p i18n>Les liens de téléchargement ne sont valables que pendant un mois. <br>
             N'hésitez pas à nous contacter si vous souhaitez une nouvelle extraction.</p>
@@ -33,4 +33,4 @@
     </div>
   </mat-card>
 
-</div>
+</div>