Fix Front End's File Export UI

This commit is contained in:
George Kalampokis 2024-01-17 14:47:32 +02:00
parent aa75b3e3ab
commit 01d78cd491
20 changed files with 95 additions and 57 deletions

View File

@ -1,5 +1,5 @@
export interface FileFormat {
format: string;
formatName: string;
hasLogo: boolean;
icon: string;
}

View File

@ -25,15 +25,15 @@ export class FileTransformerHttpService extends BaseService {
return this.http.get<FileFormat[]>(url).pipe(catchError((error: any) => throwError(error)));
}
exportDmp(dmpId: Guid): Observable<any> {
exportDmp(dmpId: Guid, format: string): Observable<any> {
//TODO: implement
const url = `${this.apiBase}/export-dmp`;
return this.http.post<any>(url, null).pipe(catchError((error: any) => throwError(error)));
return this.http.post<any>(url, {id: dmpId, format: format}, {responseType: 'blob', observe: 'response'}).pipe(catchError((error: any) => throwError(error)));
}
exportDescription(item: any): Observable<any> {
exportDescription(id: Guid, format: string): Observable<any> {
//TODO: implement
const url = `${this.apiBase}/export-description`;
return this.http.post<any>(url, item).pipe(catchError((error: any) => throwError(error)));
return this.http.post<any>(url, {id: id, format: format}, {responseType: 'blob', observe: 'response'}).pipe(catchError((error: any) => throwError(error)));
}
}

View File

@ -3,12 +3,18 @@ import { FileFormat } from '@app/core/model/file/file-format.model';
import { BaseService } from '@common/base/base.service';
import { catchError, takeUntil } from 'rxjs/operators';
import { FileTransformerHttpService } from './file-transformer.http.service';
import { Guid } from '@common/types/guid';
import * as FileSaver from 'file-saver';
import { MatomoService } from '../matomo/matomo-service';
import { FileUtils } from '../utilities/file-utils.service';
@Injectable()
export class FileTransformerService extends BaseService {
constructor(
private fileTransformerHttpService: FileTransformerHttpService
private fileTransformerHttpService: FileTransformerHttpService,
private matomoService: MatomoService,
private fileUtils: FileUtils
) { super(); }
private _initialized: boolean = false;
@ -34,4 +40,36 @@ export class FileTransformerService extends BaseService {
this._initialized = true;
});
}
exportDmp(id: Guid, format: string) {
this._loading = true;
this.fileTransformerHttpService.exportDmp(id, format).pipe(takeUntil(this._destroyed), catchError((error) => {
this._loading = false;
return null;
})).subscribe(result => {
if (result !== null) {
const blob = new Blob([result.body], { type: 'application/octet-stream' });
const filename = this.fileUtils.getFilenameFromContentDispositionHeader(result.headers.get('Content-Disposition'));
FileSaver.saveAs(blob, filename);
this.matomoService.trackDownload('dmps', format, id.toString());
}
});
}
exportDescription(id: Guid, format: string) {
this._loading = true;
this.fileTransformerHttpService.exportDescription(id, format).pipe(takeUntil(this._destroyed), catchError((error) => {
this._loading = false;
return null;
})).subscribe(result => {
if (result !== null) {
const blob = new Blob([result.body], { type: 'application/octet-stream' });
const filename = this.fileUtils.getFilenameFromContentDispositionHeader(result.headers.get('Content-Disposition'));
FileSaver.saveAs(blob, filename);
this.matomoService.trackDownload('descriptions', format, id.toString());
}
});
}
}

View File

@ -70,19 +70,19 @@
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadPDF(activity.id)">
<i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
<span>{{'GENERAL.FILE-TRANSFOMER.PDF' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadDocx(activity.id)">
<i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
<span>{{'GENERAL.FILE-TRANSFOMER.DOC' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadXml(activity.id)">
<i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
<span>{{'GENERAL.FILE-TRANSFOMER.XML' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadJson(activity.id)">
<i class="fa fa-file-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
<span>{{'GENERAL.FILE-TRANSFOMER.JSON' | translate}}</span>
</button>
</mat-menu>
<mat-menu #actionsMenu="matMenu" xPosition="before">

View File

@ -34,15 +34,15 @@
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadPDF(formGroup.get('id').value)">
<i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
<span>{{'GENERAL.FILE-TRANSFOMER.PDF' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadDOCX(formGroup.get('id').value)">
<i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
<span>{{'GENERAL.FILE-TRANSFOMER.DOC' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadXML(formGroup.get('id').value)">
<i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
<span>{{'GENERAL.FILE-TRANSFOMER.XML' | translate}}</span>
</button>
</mat-menu>
</div>

View File

@ -716,7 +716,7 @@ export class DescriptionFormFieldComponent extends BaseComponent implements OnIn
// this.filesToUpload = null;
// messages.push(this.language.instant('DATASET-WIZARD.MESSAGES.LARGE-FILE-OR-UNACCEPTED-TYPE'));
// messages.push(this.language.instant('DATASET-WIZARD.MESSAGES.MAX-FILE-SIZE', { 'maxfilesize': this.form.get("data").value.maxFileSizeInMB }));
// messages.push(this.language.instant('DATASET-WIZARD.MESSAGES.ACCEPTED-FILE-TYPES') + this.form.get("data").value.types.map(type => type.value).join(", "));
// messages.push(this.language.instant('DATASET-WIZARD.MESSAGES.ACCEPTED-FILE-TRANSFOMER') + this.form.get("data").value.types.map(type => type.value).join(", "));
// }
// if (messages && messages.length > 0) {

View File

@ -38,9 +38,9 @@
</button>
</mat-menu>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDescription(description.id)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format | translate}}</span>
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDescription(description.id, fileTransformer.format)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format.toUpperCase() | translate}}</span>
</button>
</mat-menu>
</div>

View File

@ -117,9 +117,9 @@
{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
</div>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDescription(description.id)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format | translate}}</span>
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDescription(description.id, fileTransformer.format)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format.toUpperCase() | translate}}</span>
</button>
</mat-menu>
</div>

View File

@ -38,9 +38,9 @@
<a class="col-auto pointer" *ngIf="isAuthenticated()" [matMenuTriggerFor]="actionsMenu"><span class="material-icons icon-align pl-2">more_horiz</span></a>
</div>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDmp(dmp.id)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format | translate}}</span>
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDmp(dmp.id, fileTransformer.format)">
<i class="fa pr-2" [ngClass]="fileTransformer.hasLogo ? fileTransformer.icon : 'fa-file-o'"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format.toUpperCase() | translate}}</span>
</button>
</mat-menu>
<mat-menu #actionsMenu="matMenu" xPosition="before">

View File

@ -166,9 +166,9 @@
</p>
</div>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDmp(dmp.id)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format | translate}}</span>
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDmp(dmp.id, fileTransformer.format)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.formatName.toUpperCase() | translate}}</span>
</button>
</mat-menu>
</div>

View File

@ -175,7 +175,7 @@
"LANGUAGE": "Sprache",
"SIGN-IN": "Sign in to account"
},
"FILE-TYPES": {
"FILE-TRANSFOMER": {
"PDF": "PDF",
"XML": "XML",
"JSON": "JSON",
@ -776,7 +776,7 @@
"NO-FILES-SELECTED": "There is no selected file to upload",
"LARGE-FILE-OR-UNACCEPTED-TYPE": "The file is too large or its type is not supported.",
"MAX-FILE-SIZE": "Uploaded files should be up to {{maxfilesize}} MB.",
"ACCEPTED-FILE-TYPES": "Supported media types are: "
"ACCEPTED-FILE-TRANSFOMER": "Supported media types are: "
},
"UPLOAD": {
"UPLOAD-XML": "Importieren",

View File

@ -176,7 +176,7 @@
"TENANTS": "Tenants",
"REFERENCES": "References"
},
"FILE-TYPES": {
"FILE-TRANSFORMER": {
"PDF": "PDF",
"XML": "XML",
"JSON": "RDA JSON",
@ -844,7 +844,7 @@
"NO-FILES-SELECTED": "There is no selected file to upload",
"LARGE-FILE-OR-UNACCEPTED-TYPE": "The file is too large or its type is not supported.",
"MAX-FILE-SIZE": "Uploaded files should be up to {{maxfilesize}} MB.",
"ACCEPTED-FILE-TYPES": "Supported media types are: "
"ACCEPTED-FILE-TRANSFOMER": "Supported media types are: "
},
"UPLOAD": {
"UPLOAD-XML": "Import",

View File

@ -175,7 +175,7 @@
"LANGUAGE": "Idioma",
"SIGN-IN": "Identificarse con su cuenta"
},
"FILE-TYPES": {
"FILE-TRANSFOMER": {
"PDF": "PDF",
"XML": "XML",
"JSON": "RDA JSON",
@ -776,7 +776,7 @@
"NO-FILES-SELECTED": "There is no selected file to upload",
"LARGE-FILE-OR-UNACCEPTED-TYPE": "The file is too large or its type is not supported.",
"MAX-FILE-SIZE": "Uploaded files should be up to {{maxfilesize}} MB.",
"ACCEPTED-FILE-TYPES": "Supported media types are: "
"ACCEPTED-FILE-TRANSFOMER": "Supported media types are: "
},
"UPLOAD": {
"UPLOAD-XML": "Importar",

View File

@ -175,7 +175,7 @@
"LANGUAGE": "Γλώσσα",
"SIGN-IN": "Σύνδεση στο λογαριασμό"
},
"FILE-TYPES": {
"FILE-TRANSFOMER": {
"PDF": "PDF",
"XML": "XML",
"JSON": "JSON",
@ -776,7 +776,7 @@
"NO-FILES-SELECTED": "Δεν υπάρχουν επιλεγμένα αρχεία για μεταφόρτωση",
"LARGE-FILE-OR-UNACCEPTED-TYPE": "Το αρχείο είναι πολύ μεγάλο ή ο τύπος του δεν υποστηρίζεται.",
"MAX-FILE-SIZE": "Τα αρχεία πρέπει να είναι έως {{maxfilesize}} MB.",
"ACCEPTED-FILE-TYPES": "Οι υποστηριζόμενοι τύποι πολυμέσων είναι: "
"ACCEPTED-FILE-TRANSFOMER": "Οι υποστηριζόμενοι τύποι πολυμέσων είναι: "
},
"UPLOAD": {
"UPLOAD-XML": "Εισαγωγή",

View File

@ -175,7 +175,7 @@
"LANGUAGE": "Jezik",
"SIGN-IN": "Prijava"
},
"FILE-TYPES": {
"FILE-TRANSFOMER": {
"PDF": "PDF",
"XML": "XML",
"JSON": "RDA JSON",
@ -776,7 +776,7 @@
"NO-FILES-SELECTED": "Nije izabrana niti jedna datoteka",
"LARGE-FILE-OR-UNACCEPTED-TYPE": "Datoteka je prevelika ili format nije podržan.",
"MAX-FILE-SIZE": "Veličina odabranih datoteka ne smije biti veća od {{maxfilesize}} MB.",
"ACCEPTED-FILE-TYPES": "Podržani formati datoteka su: "
"ACCEPTED-FILE-TRANSFOMER": "Podržani formati datoteka su: "
},
"UPLOAD": {
"UPLOAD-XML": "Uvezi",

View File

@ -175,7 +175,7 @@
"LANGUAGE": "Język",
"SIGN-IN": "Zaloguj się na konto"
},
"FILE-TYPES": {
"FILE-TRANSFOMER": {
"PDF": "PDF",
"XML": "XML",
"JSON": "RDA JSON",
@ -776,7 +776,7 @@
"NO-FILES-SELECTED": "Nie zaznaczono pliku do przesłania",
"LARGE-FILE-OR-UNACCEPTED-TYPE": "Plik jest za duży lub jego typ nie jest obsługiwany.",
"MAX-FILE-SIZE": "Przesyłane pliki powinny mieć do {{maxfilesize}} MB.",
"ACCEPTED-FILE-TYPES": "Obsługiwane typy nośników to: "
"ACCEPTED-FILE-TRANSFOMER": "Obsługiwane typy nośników to: "
},
"UPLOAD": {
"UPLOAD-XML": "Importuj",

View File

@ -175,7 +175,7 @@
"LANGUAGE": "Idioma",
"SIGN-IN": "Entrar na conta"
},
"FILE-TYPES": {
"FILE-TRANSFOMER": {
"PDF": "PDF",
"XML": "XML",
"JSON": "RDA JSON",
@ -776,7 +776,7 @@
"NO-FILES-SELECTED": "There is no selected file to upload",
"LARGE-FILE-OR-UNACCEPTED-TYPE": "The file is too large or its type is not supported.",
"MAX-FILE-SIZE": "Uploaded files should be up to {{maxfilesize}} MB.",
"ACCEPTED-FILE-TYPES": "Supported media types are: "
"ACCEPTED-FILE-TRANSFOMER": "Supported media types are: "
},
"UPLOAD": {
"UPLOAD-XML": "Importar",

View File

@ -175,7 +175,7 @@
"LANGUAGE": "Jazyk",
"SIGN-IN": "Prihlásiť sa do účtu"
},
"FILE-TYPES": {
"FILE-TRANSFOMER": {
"PDF": "PDF",
"XML": "XML",
"JSON": "JSON",
@ -776,7 +776,7 @@
"NO-FILES-SELECTED": "There is no selected file to upload",
"LARGE-FILE-OR-UNACCEPTED-TYPE": "The file is too large or its type is not supported.",
"MAX-FILE-SIZE": "Uploaded files should be up to {{maxfilesize}} MB.",
"ACCEPTED-FILE-TYPES": "Supported media types are: "
"ACCEPTED-FILE-TRANSFOMER": "Supported media types are: "
},
"UPLOAD": {
"UPLOAD-XML": "Importovať",

View File

@ -175,7 +175,7 @@
"LANGUAGE": "Jezik",
"SIGN-IN": "Prijavljivanje korisnika"
},
"FILE-TYPES": {
"FILE-TRANSFOMER": {
"PDF": "PDF",
"XML": "XML",
"JSON": "RDA JSON",
@ -776,7 +776,7 @@
"NO-FILES-SELECTED": "There is no selected file to upload",
"LARGE-FILE-OR-UNACCEPTED-TYPE": "The file is too large or its type is not supported.",
"MAX-FILE-SIZE": "Uploaded files should be up to {{maxfilesize}} MB.",
"ACCEPTED-FILE-TYPES": "Supported media types are: "
"ACCEPTED-FILE-TRANSFOMER": "Supported media types are: "
},
"UPLOAD": {
"UPLOAD-XML": "Uvezite",

View File

@ -175,7 +175,7 @@
"LANGUAGE": "Dil",
"SIGN-IN": "Oturum aç"
},
"FILE-TYPES": {
"FILE-TRANSFOMER": {
"PDF": "PDF",
"XML": "XML",
"JSON": "RDA JSON",
@ -776,7 +776,7 @@
"NO-FILES-SELECTED": "There is no selected file to upload",
"LARGE-FILE-OR-UNACCEPTED-TYPE": "The file is too large or its type is not supported.",
"MAX-FILE-SIZE": "Uploaded files should be up to {{maxfilesize}} MB.",
"ACCEPTED-FILE-TYPES": "Supported media types are: "
"ACCEPTED-FILE-TRANSFOMER": "Supported media types are: "
},
"UPLOAD": {
"UPLOAD-XML": "İçeri Aktar",