Skip to content

GitLab

Commit 8b1eb9f9 authored by ext.sopra.ncastejon's avatar ext.sopra.ncastejon
Browse files

Manage manually the download of resources (remove the filesave depedency).

parent 7f97f4f5
Hide whitespace changes
Inline Side-by-side
src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.html
View file @ 8b1eb9f9
<div class="resource">
<ng-container *ngFor="let format of resource.formats">
<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)">
[resourceName]="resource.metadataLink.name" [isQueryable]="true" (saveEvent)="saveFile(format, i)"
(abortEvent)="abortDownload(format,i)"
[isLoading]="isLoading[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
View file @ 8b1eb9f9
import { Component, Input, OnInit } from '@angular/core';
import { notificationMessages } from '../../../../../i18n/traductions';
import { Component, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
import { NotificationService } from '../../../../core/services';
import { linkFormats } from '../../../../shared/models';
import { Format, Resource } from '../../../models';
......@@ -9,11 +8,21 @@ import { Format, Resource } from '../../../models';
templateUrl: './resource-custom-download.component.html',
styleUrls: ['./resource-custom-download.component.scss'],
})
export class ResourceCustomDownloadableComponent implements OnInit {
export class ResourceCustomDownloadableComponent implements OnInit, OnDestroy {
linkFormats = linkFormats;
@Input() resource: Resource;
// Event fired when one tab is closed or refreshed
@HostListener('window:beforeunload')
abortCurrentRequest() {
this.controller.abort();
}
isLoading: boolean[];
signal: AbortSignal;
controller: AbortController;
labelLayer = {
WFS: 'typename',
WMS: 'layers',
......@@ -30,16 +39,47 @@ export class ResourceCustomDownloadableComponent implements OnInit {
private _notificationService: NotificationService) { }
ngOnInit() {
this.isLoading = Array(this.resource.formats.length);
// Used to abort the request if needed
this.controller = new AbortController();
this.signal = this.controller.signal;
}
ngOnDestroy() {
this.controller.abort();
}
saveFile(format: Format) {
saveAs(this.getQueryableUrl(format), `${this.resource.metadataLink.name}.${format.fileExtension}`);
this._notificationService.notify(
{
type: 'success',
message: notificationMessages.general.startDownload,
},
);
saveFile(format: Format, index: number) {
this.isLoading[index] = true;
fetch(this.getQueryableUrl(format), { signal: this.signal }).then((response) => {
// To allow the download, get the repsons as a blob
return response.blob();
})
.then((blob) => {
// Create a temporary link and click on it to launch the blob download
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
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;
})
.catch((err) => {
console.log('The fetch could not succeeded', err.message);
});
}
abortDownload(format: Format, index: number) {
this.controller.abort();
this.isLoading[index] = false;
// Create a new for a new DOM Request
this.controller = new AbortController();
this.signal = this.controller.signal;
}
getQueryableUrl(format: Format) {
......
src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
View file @ 8b1eb9f9
......@@ -10,18 +10,25 @@
</div>
</div>
<ng-container *ngIf="isQueryable; else other">
<div class="resource-download-icon" (click)="saveResource()">
<a>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
<path fill="#4668AB"
d="M21.323 13.961h-.338c-.339 0-.677.339-.677.677v4.57H1.692v-4.57a.667.667 0 0 0-.677-.677H.677c-.339 0-.677.339-.677.677V20.223c0 .423.338.677.677.677h20.646c.338 0 .677-.339.677-.677v-5.585a.667.667 0 0 0-.677-.677z" />
<path fill="#4668AB"
d="M10.323 15.315c.085.085.254.17.339.17.084.084.254.084.338.084.085 0 .254 0 .339-.084.17 0 .254-.085.338-.17L17.6 9.223c.17-.254.17-.592 0-.761l-.423-.424c-.169-.253-.592-.253-.761 0l-4.57 4.654V.846C11.847.338 11.509 0 11 0c-.507 0-.846.338-.846.846v11.846L5.585 8.038c-.17-.253-.508-.253-.762 0l-.423.424c-.169.253-.169.592 0 .761l5.923 6.092z" />
</svg>
</a>
<div class="resource-download-icon" (click)="saveResource()" *ngIf="!isLoading">
<a>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
<path fill="#4668AB"
d="M21.323 13.961h-.338c-.339 0-.677.339-.677.677v4.57H1.692v-4.57a.667.667 0 0 0-.677-.677H.677c-.339 0-.677.339-.677.677V20.223c0 .423.338.677.677.677h20.646c.338 0 .677-.339.677-.677v-5.585a.667.667 0 0 0-.677-.677z" />
<path fill="#4668AB"
d="M10.323 15.315c.085.085.254.17.339.17.084.084.254.084.338.084.085 0 .254 0 .339-.084.17 0 .254-.085.338-.17L17.6 9.223c.17-.254.17-.592 0-.761l-.423-.424c-.169-.253-.592-.253-.761 0l-4.57 4.654V.846C11.847.338 11.509 0 11 0c-.507 0-.846.338-.846.846v11.846L5.585 8.038c-.17-.253-.508-.253-.762 0l-.423.424c-.169.253-.169.592 0 .761l5.923 6.092z" />
</svg>
</a>
</div>
<div class="resource-download-icon" *ngIf="isLoading">
<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>
</ng-container>
</div>
<ng-template #other>
<div class="resource-download-icon">
......
src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
View file @ 8b1eb9f9
@import '../../../../../../scss/variables.scss';
@import '../.././../../../../../node_modules/bulma/sass/utilities/_all.sass';
.resource-download {
display: flex;
background-color: white;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f2f2f2;
margin-top: 0.5rem;
padding-bottom: 0.5rem;
@import '../../../../../../scss/variables.scss';
@import '../.././../../../../../node_modules/bulma/sass/utilities/_all.sass';
.resource-download {
display: flex;
background-color: white;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f2f2f2;
margin-top: 0.5rem;
padding-bottom: 0.5rem;
}
.resource-left {
display: flex;
align-items: center;
margin-right: 0.5rem;
.resource-main {
margin-left: 2rem;
}
.resource-left {
display: flex;
align-items: center;
margin-right: 0.5rem;
.resource-main-name span {
font-size: 0.875rem;
word-break: break-all;
.resource-main {
margin-left: 2rem;
@media screen and (min-width: $tablet) {
font-size: 1rem;
}
}
}
.resource-main-name span {
font-size: 0.875rem;
word-break: break-all;
.resource-download-icon {
padding: 0.5rem 0.4rem;
border: 1px solid $grey-super-light-color;
border-radius: 4px;
margin-right: 0.75rem;
@media screen and (min-width: $tablet) {
font-size: 1rem;
}
}
a {
display: flex;
}
.resource-download-icon {
padding: 0.5rem 0.4rem;
border: 1px solid $grey-super-light-color;
border-radius: 4px;
margin-right: 0.75rem;
svg {
height: 1.5rem;
fill: $link-color;
}
a {
display: flex;
}
&:hover {
opacity: 0.7;
}
}
svg {
height: 1.5rem;
fill: $link-color;
}
.is-loading img {
height: 16px;
width: 16px;
&:hover {
opacity: 0.7;
}
&:hover {
cursor: pointer;
}
}
.is-loading {
i {
display: block;
}
img {
display: none;
}
}
.resource-download-icon:hover .is-loading{
i {
display: none;
}
img {
display: block;
}
}
src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts
View file @ 8b1eb9f9
......@@ -12,7 +12,9 @@ export class ResourceDownloadItemComponent implements OnInit {
@Input() resourceName: string;
@Input() resourceUrl ?: string;
@Input() isQueryable: boolean;
@Input() isLoading ?: boolean;
@Output() saveEvent = new EventEmitter();
@Output() abortEvent = new EventEmitter();
constructor() { }
......@@ -22,4 +24,10 @@ export class ResourceDownloadItemComponent implements OnInit {
saveResource() {
this.saveEvent.emit(null);
}
abortDownload() {
console.log('try to emit the event');
this.abortEvent.emit(null);
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment