nm-data-list-export-dialog
src/app/shared/widgets/data-list/data-list-dialog-component/data-list-export.component.ts
| selector | nm-data-list-export-dialog |
| styleUrls | data-list-export.component.scss |
| templateUrl | ./data-list-export.component.html |
Widget inputs |
Widget outputs |
Properties |
|
Methods |
constructor(dialogRef: MatDialogRef
|
|||||||||
|
Parameters :
|
| cancel |
cancel()
|
|
Returns :
void
|
| Private close | ||||||
close(download: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| download |
download()
|
|
Returns :
void
|
| export |
export()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Public assetFormat |
assetFormat:
|
Type : string
|
| Public assetFormats |
assetFormats:
|
Type : any[]
|
| Public csvEncoding |
csvEncoding:
|
Type : string
|
| Public csvHeaders |
csvHeaders:
|
Type : boolean
|
| Public csvSeparator |
csvSeparator:
|
Type : string
|
| Public dialogRef |
dialogRef:
|
Type : MatDialogRef<DataListExportComponent>
|
| Public exportFormat |
exportFormat:
|
Type : string
|
| Public httpClient |
httpClient:
|
Type : HttpClient
|
| Public onlySelectedRows |
onlySelectedRows:
|
Type : boolean
|
| Public showCsvHeaders |
showCsvHeaders:
|
Type : boolean
|
| Public showDownload |
showDownload:
|
Type : boolean
|
Default value : true
|
| Public showExport |
showExport:
|
Type : boolean
|
Default value : true
|
| Public showExportAssetFormats |
showExportAssetFormats:
|
Type : boolean
|
import { Component, OnInit } from "@angular/core";
import { MatDialogRef } from "@angular/material/dialog";
import { HttpClient } from "@angular/common/http";
@Component({
selector: "nm-data-list-export-dialog",
styleUrls: ["./data-list-export.component.scss"],
templateUrl: "./data-list-export.component.html",
})
export class DataListExportComponent implements OnInit {
public showDownload: boolean = true;
public showExport: boolean = true;
public assetFormats: any[];
public assetFormat: string;
public exportFormat: string;
public csvSeparator: string;
public csvEncoding: string;
public csvHeaders: boolean;
public onlySelectedRows: boolean;
public showExportAssetFormats: boolean;
public showCsvHeaders: boolean;
constructor(
public dialogRef: MatDialogRef<DataListExportComponent>,
public httpClient: HttpClient
) {}
export() {
this.close(false);
}
download() {
this.close(true);
}
private close(download: boolean) {
this.dialogRef.close({
assetFormat: this.assetFormat,
exportFormat: this.exportFormat,
csvSeparator: this.csvSeparator,
csvEncoding: this.csvEncoding,
csvHeaders: this.csvHeaders,
onlySelectedRows: this.onlySelectedRows,
download,
});
}
ngOnInit(): void {
if (this.showExportAssetFormats) {
this.httpClient
.get("/api/core/assets/formats")
.subscribe((resp: any[]) => {
this.assetFormats = resp;
});
}
}
cancel() {
this.dialogRef.close();
}
}
<nm-dialog [dialogRef]="dialogRef" class="nm-dialog nm-dataListExport">
<ng-container slot="title">
{{ "dialog.data.list.export.settings" | translate }}
</ng-container>
<ng-container slot="content">
<mat-form-field class="nm-dataListExport__selection">
<mat-select
[(ngModel)]="exportFormat"
[placeholder]="'placeholder.export.format' | translate"
>
<mat-option value="CSV"> CSV </mat-option>
<mat-option value="Excel"> Excel </mat-option>
</mat-select>
</mat-form-field>
<br />
<mat-form-field
*ngIf="showExportAssetFormats"
class="nm-dataListExport__selection"
>
<mat-select
[(ngModel)]="assetFormat"
[placeholder]="'placeholder.export.asset.format' | translate"
>
<mat-option *ngFor="let format of assetFormats" [value]="format.format"
>{{ format.ipimFormat }}
</mat-option>
</mat-select>
</mat-form-field>
<br />
<mat-form-field *ngIf="exportFormat == 'CSV'">
<input
[(ngModel)]="csvSeparator"
matInput
[placeholder]="'placeholder.export.csv.separator' | translate"
/>
</mat-form-field>
<mat-form-field *ngIf="exportFormat == 'CSV'">
<mat-select
[(ngModel)]="csvEncoding"
[placeholder]="'placeholder.export.csv.encoding' | translate"
>
<mat-option value="ISO-8859-15">ISO-8859-15</mat-option>
<mat-option value="UTF-8">UTF-8</mat-option>
</mat-select>
</mat-form-field>
<br /><br />
<mat-checkbox
color="primary"
*ngIf="showCsvHeaders && exportFormat == 'CSV'"
[(ngModel)]="csvHeaders"
>
{{ "placeholder.export.csv.headers" | translate }}
</mat-checkbox>
<br />
<mat-checkbox color="primary" [(ngModel)]="onlySelectedRows"
>{{ "placeholder.export.only.selected" | translate }}
</mat-checkbox>
</ng-container>
<ng-container slot="actions">
<button mat-button type="button" (click)="cancel()">
{{ "button.cancel" | translate }}
</button>
<button
*ngIf="showExport"
mat-raised-button
color="primary"
type="button"
[pTooltip]="'button.export.description' | translate"
[showDelay]="150"
(click)="export()"
>
{{ "button.export" | translate }}
</button>
<button
*ngIf="showDownload"
mat-raised-button
color="primary"
type="button"
[pTooltip]="'button.download.description' | translate"
[showDelay]="150"
(click)="download()"
>
{{ "button.download" | translate }}
</button>
</ng-container>
</nm-dialog>