Skip to content

Commit 70ca49d

Browse files
mattjokeHejdaJakub
mattjoke
authored and
HejdaJakub
committed
feat(admin): replaced old table export
* replaced mat-menu with a dialog * functionally it works the same
1 parent 2d03c6c commit 70ca49d

File tree

11 files changed

+155
-37
lines changed

11 files changed

+155
-37
lines changed

‎apps/admin-gui/src/assets/i18n/en.json

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3113,8 +3113,15 @@
31133113
},
31143114
"TABLE_OPTIONS": {
31153115
"EXPORT_TO_FILE": "Export to file",
3116-
"ALL_DATA": "All data",
3116+
"EXPORT_TITLE": "Export table",
3117+
"BUTTON_EXPORT": "Export",
3118+
"BUTTON_CLOSE": "Close",
3119+
"SELECT_FORMAT": "Select format",
3120+
"EXPORT_OPTIONS": "Export options",
31173121
"DISPLAYED_DATA": "Displayed data",
3122+
"ALL_DATA": "All data",
3123+
"ERROR_FORMAT":"Export format is not selected",
3124+
"ERROR_OPTION": "Export option is not selected",
31183125
"EXPORT_LOADING": "Exporting data...",
31193126
"MORE": "More"
31203127
},

‎apps/publications/src/assets/i18n/en.json

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -363,9 +363,17 @@
363363
},
364364
"TABLE_OPTIONS": {
365365
"EXPORT_TO_FILE": "Export to file",
366-
"ALL_DATA": "All data",
366+
"EXPORT_TITLE": "Export table",
367+
"BUTTON_EXPORT": "Export",
368+
"BUTTON_CLOSE": "Close",
369+
"SELECT_FORMAT": "Select format",
370+
"EXPORT_OPTIONS": "Export options",
367371
"DISPLAYED_DATA": "Displayed data",
368-
"EXPORT_LOADING": "Exporting data..."
372+
"ALL_DATA": "All data",
373+
"ERROR_FORMAT":"Export format is not selected",
374+
"ERROR_OPTION": "Export option is not selected",
375+
"EXPORT_LOADING": "Exporting data...",
376+
"MORE": "More"
369377
},
370378
"NOTIFICATOR": {
371379
"NOTIFICATION": {

‎apps/user-profile/src/assets/i18n/cs.json

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -320,9 +320,17 @@
320320
},
321321
"TABLE_OPTIONS": {
322322
"EXPORT_TO_FILE": "Exportovat do souboru",
323-
"ALL_DATA": "Všechna data",
323+
"EXPORT_TITLE": "Exportovat tabulku",
324+
"BUTTON_EXPORT": "Export",
325+
"BUTTON_CLOSE": "Zrušit",
326+
"SELECT_FORMAT": "Zvolte formát výstupu",
327+
"EXPORT_OPTIONS": "Možnosti exportu",
324328
"DISPLAYED_DATA": "Zobrazená data",
325-
"EXPORT_LOADING": "Probíhá exportování dat..."
329+
"ALL_DATA": "Všechna data",
330+
"ERROR_FORMAT":"Formát exportu není zvolen",
331+
"ERROR_OPTION": "Není vybrána možnost exportu",
332+
"EXPORT_LOADING": "Probíhá exportování dat...",
333+
"MORE": "Více"
326334
},
327335
"NOTIFICATOR": {
328336
"NOTIFICATION": {

‎apps/user-profile/src/assets/i18n/en.json

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -360,9 +360,17 @@
360360
},
361361
"TABLE_OPTIONS": {
362362
"EXPORT_TO_FILE": "Export to file",
363-
"ALL_DATA": "All data",
363+
"EXPORT_TITLE": "Export table",
364+
"BUTTON_EXPORT": "Export",
365+
"BUTTON_CLOSE": "Close",
366+
"SELECT_FORMAT": "Select format",
367+
"EXPORT_OPTIONS": "Export options",
364368
"DISPLAYED_DATA": "Displayed data",
365-
"EXPORT_LOADING": "Exporting data..."
369+
"ALL_DATA": "All data",
370+
"ERROR_FORMAT":"Export format is not selected",
371+
"ERROR_OPTION": "Export option is not selected",
372+
"EXPORT_LOADING": "Exporting data...",
373+
"MORE": "More"
366374
},
367375
"NOTIFICATOR": {
368376
"NOTIFICATION": {

‎libs/perun/utils/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export * from './lib/perun-utils.module';
22
export * from './lib/perun-utils';
33
export * from './lib/table-wrapper/table-wrapper.component';
44
export * from './lib/custom-validators';
5+
export * from './lib/export-table-dialog/export-table-dialog.component';

‎libs/perun/utils/src/lib/export-table-dialog/export-table-dialog.component.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<h1 mat-dialog-title>
2+
{{'SHARED_LIB.PERUN.COMPONENTS.TABLE_OPTIONS.EXPORT_TITLE'| translate}}
3+
</h1>
4+
<div mat-dialog-content class="dialog-container user-theme">
5+
<mat-form-field>
6+
<mat-label>{{'SHARED_LIB.PERUN.COMPONENTS.TABLE_OPTIONS.SELECT_FORMAT'| translate}}</mat-label>
7+
<mat-select [formControl]="selectedFormat">
8+
<mat-option *ngFor="let format of formats" [value]="format.value">
9+
{{format.viewValue}}
10+
</mat-option>
11+
</mat-select>
12+
</mat-form-field>
13+
14+
<p>{{'SHARED_LIB.PERUN.COMPONENTS.TABLE_OPTIONS.EXPORT_OPTIONS'| translate}}</p>
15+
16+
<mat-radio-group class="flex-column d-flex mb-2" required [formControl]="selectedExportType">
17+
<mat-radio-button value="current" color="primary">
18+
{{'SHARED_LIB.PERUN.COMPONENTS.TABLE_OPTIONS.DISPLAYED_DATA'| translate}}
19+
</mat-radio-button>
20+
<mat-radio-button *ngIf="inputData.allowExportAll" value="all" color="primary">
21+
{{'SHARED_LIB.PERUN.COMPONENTS.TABLE_OPTIONS.ALL_DATA'| translate}}
22+
</mat-radio-button>
23+
</mat-radio-group>
24+
</div>
25+
<div mat-dialog-actions align="end">
26+
<button mat-stroked-button mat-dialog-close>
27+
{{'SHARED_LIB.PERUN.COMPONENTS.TABLE_OPTIONS.BUTTON_CLOSE'| translate}}
28+
</button>
29+
<div
30+
matTooltip="{{'SHARED_LIB.PERUN.COMPONENTS.TABLE_OPTIONS.ERROR_FORMAT'| translate}}"
31+
[matTooltipDisabled]="selectedFormat.valid || selectedFormat.getRawValue()?.length > 0">
32+
<div
33+
matTooltip="{{'SHARED_LIB.PERUN.COMPONENTS.TABLE_OPTIONS.ERROR_OPTION'| translate}}"
34+
[matTooltipDisabled]="selectedFormat.invalid || selectedExportType.valid || selectedExportType.getRawValue()?.length > 0"
35+
class="ms-2">
36+
<button
37+
mat-flat-button
38+
color="accent"
39+
[disabled]="selectedFormat.invalid || selectedExportType.invalid"
40+
[matDialogClose]="export()">
41+
{{'SHARED_LIB.PERUN.COMPONENTS.TABLE_OPTIONS.BUTTON_EXPORT'| translate}}
42+
</button>
43+
</div>
44+
</div>
45+
</div>

‎libs/perun/utils/src/lib/export-table-dialog/export-table-dialog.component.scss

Whitespace-only changes.

‎libs/perun/utils/src/lib/export-table-dialog/export-table-dialog.component.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Component, Inject } from '@angular/core';
2+
import { FormControl, Validators } from '@angular/forms';
3+
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
4+
5+
interface Format {
6+
value: string;
7+
viewValue: string;
8+
}
9+
10+
interface InputData {
11+
allowExportAll: boolean;
12+
}
13+
14+
@Component({
15+
selector: 'perun-web-apps-export-table-dialog',
16+
templateUrl: './export-table-dialog.component.html',
17+
styleUrls: ['./export-table-dialog.component.scss'],
18+
})
19+
export class ExportTableDialogComponent {
20+
formats: Format[] = [{ value: 'csv', viewValue: 'CSV' }];
21+
selectedFormat = new FormControl<string>('csv', Validators.required);
22+
selectedExportType = new FormControl<string>('current', Validators.required);
23+
constructor(@Inject(MAT_DIALOG_DATA) public inputData: InputData) {}
24+
isValidSelection(): boolean {
25+
return this.selectedFormat.value !== null && this.selectedExportType.value !== null;
26+
}
27+
28+
export(): { exportType: string; format: string } {
29+
return {
30+
exportType: this.selectedExportType.value,
31+
format: this.selectedFormat.value,
32+
};
33+
}
34+
}

‎libs/perun/utils/src/lib/perun-utils.module.ts

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,17 @@
11
import { NgModule } from '@angular/core';
22
import { TableWrapperComponent } from './table-wrapper/table-wrapper.component';
3-
import { MatPaginatorModule } from '@angular/material/paginator';
43
import { TableOptionsComponent } from './table-options/table-options.component';
5-
import { MatMenuModule } from '@angular/material/menu';
6-
import { MatIconModule } from '@angular/material/icon';
7-
import { MatButtonModule } from '@angular/material/button';
84
import { TranslateModule } from '@ngx-translate/core';
95
import { CommonModule } from '@angular/common';
10-
import { MatTooltipModule } from '@angular/material/tooltip';
6+
import { ExportTableDialogComponent } from './export-table-dialog/export-table-dialog.component';
7+
import { UiMaterialModule } from '@perun-web-apps/ui/material';
8+
import { MatRadioModule } from '@angular/material/radio';
9+
import { ReactiveFormsModule } from '@angular/forms';
1110

1211
@NgModule({
13-
imports: [
14-
MatPaginatorModule,
15-
MatMenuModule,
16-
MatIconModule,
17-
MatButtonModule,
18-
TranslateModule,
19-
CommonModule,
20-
MatTooltipModule,
21-
],
22-
declarations: [TableWrapperComponent, TableOptionsComponent],
23-
exports: [TableWrapperComponent, TableOptionsComponent],
12+
imports: [TranslateModule, CommonModule, ReactiveFormsModule, UiMaterialModule, MatRadioModule],
13+
declarations: [TableWrapperComponent, TableOptionsComponent, ExportTableDialogComponent],
14+
exports: [TableWrapperComponent, TableOptionsComponent, ExportTableDialogComponent],
2415
providers: [],
2516
})
2617
export class PerunUtilsModule {}

‎libs/perun/utils/src/lib/table-options/table-options.component.html

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,8 @@
77
</button>
88

99
<mat-menu #menu="matMenu">
10-
<button mat-menu-item [matMenuTriggerFor]="exportOptions">
10+
<button mat-menu-item (click)="openDialog()">
1111
{{'SHARED_LIB.PERUN.COMPONENTS.TABLE_OPTIONS.EXPORT_TO_FILE' | translate}}
1212
</button>
1313
</mat-menu>
14-
15-
<mat-menu #exportOptions="matMenu">
16-
<button mat-menu-item [matMenuTriggerFor]="selectData">Csv</button>
17-
</mat-menu>
18-
19-
<mat-menu #selectData="matMenu" xPosition="before">
20-
<button mat-menu-item (click)="exportDisplayedData.emit( 'csv' )">
21-
{{'SHARED_LIB.PERUN.COMPONENTS.TABLE_OPTIONS.DISPLAYED_DATA' | translate}}
22-
</button>
23-
<button *ngIf="allowExportAll" mat-menu-item (click)="exportAllData.emit( 'csv' )">
24-
{{'SHARED_LIB.PERUN.COMPONENTS.TABLE_OPTIONS.ALL_DATA' | translate}}
25-
</button>
26-
</mat-menu>
2714
</div>

‎libs/perun/utils/src/lib/table-options/table-options.component.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
import { Component, EventEmitter, Input, Output } from '@angular/core';
2+
import { MatDialog } from '@angular/material/dialog';
3+
import { ExportTableDialogComponent } from '../export-table-dialog/export-table-dialog.component';
4+
import { getDefaultDialogConfig } from '../perun-utils';
5+
6+
interface DialogData {
7+
exportType: string;
8+
format: string;
9+
}
210

311
@Component({
412
selector: 'perun-web-apps-table-options',
@@ -9,4 +17,25 @@ export class TableOptionsComponent {
917
@Input() allowExportAll: boolean;
1018
@Output() exportDisplayedData = new EventEmitter<string>();
1119
@Output() exportAllData = new EventEmitter<string>();
20+
21+
constructor(private dialog: MatDialog) {}
22+
openDialog(): void {
23+
const config = getDefaultDialogConfig();
24+
config.width = '500px';
25+
config.data = {
26+
allowExportAll: this.allowExportAll,
27+
};
28+
this.dialog
29+
.open(ExportTableDialogComponent, config)
30+
.afterClosed()
31+
.subscribe((result: DialogData) => {
32+
if (result) {
33+
if (result.exportType === 'all') {
34+
this.exportAllData.emit(result.format);
35+
} else {
36+
this.exportDisplayedData.emit(result.format);
37+
}
38+
}
39+
});
40+
}
1241
}

0 commit comments

Comments
 (0)