Change the way to display the spinner and abort icons.

package-lock.json

@@ -2732,9 +2732,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "6.14.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.14.7.tgz",
-      "integrity": "sha512-YbPXbaynBTe0pVExPhL76TsWnxSPeFAvImIsmylpBWn/yfw+lHy+Q68aawvZHsgskT44ZAoeE67GM5f+Brekew==",
+      "version": "6.14.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.14.9.tgz",
+      "integrity": "sha512-leP/gxHunuazPdZaCvsCefPQxinqUDsCxCR5xaDUrY2MkYxQRFZZwU5e7GojyYsGB7QVtCi7iVEl/hoFXQYc+w==",
       "dev": true
     },
     "@types/q": {
@@ -14092,4 +14092,4 @@
       "integrity": "sha512-GkPiJL8jifSrKReKaTZ5jkhrMEgXbXYC+IPo1iquBjayRa0q86w3Dipjn8b415jpitMExe9lV8iTsv8tk3DGag=="
     }
   }
-}
\ No newline at end of file
+}

package.json

@@ -63,7 +63,7 @@
     "@types/jasminewd2": "^2.0.6",
     "@types/jwt-decode": "^2.2.1",
     "@types/mapbox-gl": "^0.54.1",
-    "@types/node": "^6.14.2",
+    "@types/node": "^6.14.9",
     "codelyzer": "^5.0.1",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",

src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.html

@@ -3,8 +3,8 @@
   <ng-container *ngFor="let format of resource.formats; let i=index">
     <app-resource-download-item [formatName]="format.name" [formatExtension]="format.fileExtension"
       [resourceName]="resource.metadataLink.name" [isQueryable]="true" (saveEvent)="saveFile(format, i)"
-      (abortEvent)="abortDownload(format,i)"
-      [isLoading]="isLoading[i]">
+      (abortEvent)="abortDownload(i)"
+      [whichStepLoading]="whichStepLoading[i]">
     </app-resource-download-item>
   </ng-container>
 </div>
\ No newline at end of file

src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts

@@ -13,15 +13,20 @@ export class ResourceCustomDownloadableComponent implements OnInit, OnDestroy {
 
   @Input() resource: Resource;
 
-  // Event fired when one tab is closed or refreshed
+  // Event fired when one tab is closed or refreshed. We abort the on-going request
   @HostListener('window:beforeunload')
   abortCurrentRequest() {
     this.controller.abort();
   }
 
-  isLoading: boolean[];
+  // Variable to manage the icon display for each resource. Possible values:
+  // - 'loading': display the spinner
+  // - 'cancel': display the cross to abort the on-going request
+  // -  null: display the download icon
+  whichStepLoading: string[];
   signal: AbortSignal;
   controller: AbortController;
+  timeOut: number;
 
   labelLayer = {
     WFS: 'typename',
@@ -39,7 +44,7 @@ export class ResourceCustomDownloadableComponent implements OnInit, OnDestroy {
     private _notificationService: NotificationService) { }
 
   ngOnInit() {
-    this.isLoading = Array(this.resource.formats.length);
+    this.whichStepLoading = Array(this.resource.formats.length);
     // Used to abort the request if needed
     this.controller = new AbortController();
     this.signal = this.controller.signal;
@@ -50,7 +55,12 @@ export class ResourceCustomDownloadableComponent implements OnInit, OnDestroy {
   }
 
   saveFile(format: Format, index: number) {
-    this.isLoading[index] = true;
+    this.whichStepLoading[index] = 'loading';
+
+    this.timeOut = window.setTimeout(() => {
+      this.whichStepLoading[index] = 'cancel';
+      // tslint:disable-next-line: align
+    }, 2000);
 
     fetch(this.getQueryableUrl(format), { signal: this.signal }).then((response) => {
       // To allow the download, get the repsons as a blob
@@ -61,20 +71,22 @@ export class ResourceCustomDownloadableComponent implements OnInit, OnDestroy {
         const url = window.URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
+        a.rel = 'noopener';
         a.download = `${this.resource.metadataLink.name}.${format.fileExtension}`;
         document.body.appendChild(a); // append the element to the dom -> otherwise it will not work in firefox
         a.click();
         a.remove();
-        this.isLoading[index] = false;
+        this.whichStepLoading[index] = null;
+        clearTimeout(this.timeOut); // If the download is under 2000ms, we clear the ongoing timeout
       })
       .catch((err) => {
         console.log('The fetch could not succeeded', err.message);
       });
   }
 
-  abortDownload(format: Format, index: number) {
+  abortDownload(index: number) {
     this.controller.abort();
-    this.isLoading[index] = false;
+    this.whichStepLoading[index] = null;
 
     // Create a new for a new DOM Request
     this.controller = new AbortController();

src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html

@@ -10,7 +10,7 @@
      </div>
    </div>
 
-   <div class="resource-download-icon" (click)="saveResource()" *ngIf="!isLoading">
+   <div class="resource-download-icon" (click)="saveResource()" *ngIf="!whichStepLoading">
      <a>
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
          <path fill="#4668AB"
@@ -20,12 +20,14 @@
        </svg>
      </a>
    </div>
-   <div class="resource-download-icon" *ngIf="isLoading">
+   <div class="resource-download-icon" *ngIf="whichStepLoading">
 
-     <div class="is-loading">
-       <i class="fas fa-spinner fa-spin has-text-danger"></i>
-       <img src="../../../../../../assets/img/close.svg" alt="Icon pour arreter le téléchargement"
-         (click)=abortDownload()>
+     <div class="is-loading"
+       [attr.data-tooltip]="whichStepLoading === 'cancel' ? abortMessage : null">
+       <i class="fas fa-spinner fa-spin fa-2x" *ngIf="whichStepLoading === 'loading'"></i>
+
+       <img *ngIf="whichStepLoading === 'cancel'" src="../../../../../../assets/img/close.svg"
+         [alt]="abortMessage" (click)=abortDownload()>
      </div>
    </div>
 

src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss

@@ -31,7 +31,7 @@
 }
 
 .resource-download-icon {
-  padding: 0.5rem 0.4rem;
+  padding: 0.4rem 0.4rem;
   border: 1px solid $grey-super-light-color;
   border-radius: 4px;
   margin-right: 0.75rem;
@@ -42,6 +42,7 @@
 
   svg {
     height: 1.5rem;
+    width: 1.5rem;
     fill: $link-color;
   }
 
@@ -50,30 +51,19 @@
   }
 }
 
-.is-loading img {
-  height: 16px;
-  width: 16px;
+.is-loading {
 
-  &:hover {
-    cursor: pointer;
-  }
-}
+  display: flex;
 
-.is-loading {
   i {
     display: block;
-  }
-  img {
-    display: none;
-  }
-}
-
-.resource-download-icon:hover .is-loading{
-  i {
-    display: none;
+    height: 1.5rem;
+    font-size: 1.5rem;
   }
 
   img {
-    display: block;
+    height: 1.5rem;
+    width: 1.5rem;
+    cursor: pointer;
   }
 }

src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { geosource } from '../../../../../../i18n/traductions';
 
 @Component({
   selector: 'app-resource-download-item',
@@ -12,10 +13,12 @@ export class ResourceDownloadItemComponent implements OnInit {
   @Input() resourceName: string;
   @Input() resourceUrl ?: string;
   @Input() isQueryable: boolean;
-  @Input() isLoading ?: boolean;
+  @Input() whichStepLoading ?: string;
   @Output() saveEvent = new EventEmitter();
   @Output() abortEvent = new EventEmitter();
 
+  abortMessage: string = geosource.downloads.abort;
+
   constructor() { }
 
   ngOnInit() {
@@ -26,8 +29,7 @@ export class ResourceDownloadItemComponent implements OnInit {
   }
 
   abortDownload() {
-    console.log('try to emit the event');
-    
     this.abortEvent.emit(null);
   }
+
 }

src/i18n/messages.en.xlf

@@ -436,8 +436,8 @@
         <target>Downloads</target>
       </trans-unit>
       <trans-unit id="dataset.detail.api" datatype="html">
-        <source>Downloads</source>
-        <target>Downloads</target>
+        <source>API</source>
+        <target>API</target>
       </trans-unit>
       <trans-unit id="dataset.detail.info" datatype="html">
         <source>This dataset doesn't contain geographical data.</source>

src/i18n/traductions.fr.ts

@@ -203,6 +203,9 @@ export const geosource = {
     copied: 'Copié !',
     share: 'Copier le lien',
   },
+  downloads: {
+    abort: 'Annuler le téléchargement en cours',
+  },
   licence: {
     other: 'Autre licence',
   },

src/i18n/traductions.ts

@@ -203,6 +203,9 @@ export const geosource = {
     copied: 'Copied !',
     share: 'Copy the link',
   },
+  downloads: {
+    abort: 'Cancel the download in progress',
+  },
   licence: {
     other: 'Other license',
   },