File
Implements
Metadata
styleUrls |
./syscheck.component.css |
templateUrl |
./syscheck.component.html |
Methods
deleteReports
|
deleteReports()
|
|
|
downloadReportsCSV
|
downloadReportsCSV()
|
|
|
isAllSelected
|
isAllSelected()
|
|
|
masterToggle
|
masterToggle()
|
|
|
updateTable
|
updateTable()
|
|
|
displayedColumns
|
Type : string[]
|
Default value : ['selectCheckbox', 'syscheckLabel', 'number', 'details-os', 'details-browser']
|
|
Public
resultDataSource
|
Default value : new MatTableDataSource<SysCheckStatistics>([])
|
|
Public
snackBar
|
Type : MatSnackBar
|
|
sort
|
Type : MatSort
|
Decorators :
@ViewChild(MatSort, {static: true})
|
|
Public
tableselectionCheckbox
|
Default value : new SelectionModel<SysCheckStatistics>(true, [])
|
|
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { SelectionModel } from '@angular/cdk/collections';
import { saveAs } from 'file-saver';
import { ConfirmDialogComponent, ConfirmDialogData } from 'iqb-components';
import { BackendService } from '../backend.service';
import { SysCheckStatistics } from '../workspace.interfaces';
import { MainDataService } from '../../maindata.service';
@Component({
templateUrl: './syscheck.component.html',
styleUrls: ['./syscheck.component.css']
})
export class SyscheckComponent implements OnInit {
displayedColumns: string[] = ['selectCheckbox', 'syscheckLabel', 'number', 'details-os', 'details-browser'];
public resultDataSource = new MatTableDataSource<SysCheckStatistics>([]);
// prepared for selection if needed sometime
public tableselectionCheckbox = new SelectionModel<SysCheckStatistics>(true, []);
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(
private bs: BackendService,
private deleteConfirmDialog: MatDialog,
private mds: MainDataService,
public snackBar: MatSnackBar
) {
}
ngOnInit(): void {
setTimeout(() => {
this.mds.setSpinnerOn();
this.updateTable();
});
}
updateTable(): void {
this.tableselectionCheckbox.clear();
this.bs.getSysCheckReportList().subscribe(
(resultData: SysCheckStatistics[]) => {
this.resultDataSource = new MatTableDataSource<SysCheckStatistics>(resultData);
this.resultDataSource.sort = this.sort;
this.mds.setSpinnerOff();
}
);
}
isAllSelected(): boolean {
const numSelected = this.tableselectionCheckbox.selected.length;
const numRows = this.resultDataSource.data.length;
return numSelected === numRows;
}
masterToggle(): void {
this.isAllSelected() ?
this.tableselectionCheckbox.clear() :
this.resultDataSource.data.forEach(row => this.tableselectionCheckbox.select(row));
}
downloadReportsCSV(): void {
if (this.tableselectionCheckbox.selected.length > 0) {
const selectedReports: string[] = [];
this.tableselectionCheckbox.selected.forEach(element => {
selectedReports.push(element.id);
});
// TODO determine OS dependent line ending char and use this
this.mds.setSpinnerOn();
this.bs.getSysCheckReport(selectedReports, ';', '"', '\n').subscribe(
(response) => {
this.mds.setSpinnerOff();
if (response === false) {
this.snackBar.open('Keine Daten verfügbar.', 'Fehler', {duration: 3000});
} else {
const reportData = response as Blob;
if (reportData.size > 0) {
saveAs(reportData, 'iqb-testcenter-syscheckreports.csv');
} else {
this.snackBar.open('Keine Daten verfügbar.', 'Fehler', {duration: 3000});
}
this.tableselectionCheckbox.clear();
}
});
}
}
deleteReports() {
if (this.tableselectionCheckbox.selected.length > 0) {
const selectedReports: string[] = [];
this.tableselectionCheckbox.selected.forEach((element) => {
selectedReports.push(element.id);
});
let prompt = 'Es werden alle Berichte für diese';
if (selectedReports.length > 1) {
prompt = `${prompt} ${selectedReports.length} System-Checks `;
} else {
prompt = prompt + 'n System-Check "' + selectedReports[0] + '" ';
}
const dialogRef = this.deleteConfirmDialog.open(ConfirmDialogComponent, {
width: '400px',
data: <ConfirmDialogData>{
title: 'Löschen von Berichten',
content: `${prompt}gelöscht. Fortsetzen?`,
confirmbuttonlabel: 'Berichtsdaten löschen',
showcancel: true
}
});
dialogRef.afterClosed().subscribe((result) => {
if (result !== false) {
this.mds.setSpinnerOn();
this.bs.deleteSysCheckReports(selectedReports).subscribe((fileDeletionReport) => {
const message = [];
if (fileDeletionReport.deleted.length > 0) {
message.push(`${fileDeletionReport.deleted.length} Berichte erfolgreich gelöscht.`);
}
if (fileDeletionReport.not_allowed.length > 0) {
message.push(`${fileDeletionReport.not_allowed.length} Berichte konnten nicht gelöscht werden.`);
}
this.snackBar.open(message.join('<br>'), message.length > 1 ? 'Achtung' : '', { duration: 1000 });
this.updateTable();
});
}
});
}
}
}
<div class="columnhost" fxLayout="column">
<div fxLayout="row" fxLayoutGap="10px">
<button mat-raised-button (click)="downloadReportsCSV()" [disabled]="!tableselectionCheckbox.hasValue()"
matTooltip="Download Berichte als CSV für Excel" matTooltipPosition="above">
<mat-icon>cloud_download</mat-icon>Berichte
</button>
<button mat-raised-button (click)="deleteReports()" [disabled]="!tableselectionCheckbox.hasValue()"
matTooltip="Löschen Berichte für markierte System-Checks" matTooltipPosition="above">
<mat-icon>delete</mat-icon>
</button>
</div>
<mat-table [dataSource]="resultDataSource" matSort>
<ng-container matColumnDef="selectCheckbox">
<mat-header-cell *matHeaderCellDef fxFlex="70px">
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="tableselectionCheckbox.hasValue() && isAllSelected()"
[indeterminate]="tableselectionCheckbox.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row" fxFlex="70px">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? tableselectionCheckbox.toggle(row) : null"
[checked]="tableselectionCheckbox.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="syscheckId">
<mat-header-cell *matHeaderCellDef mat-sort-header fxFlex="300px">System-Check Id</mat-header-cell>
<mat-cell *matCellDef="let element" fxFlex="300px">{{element.id}}</mat-cell>
</ng-container>
<ng-container matColumnDef="syscheckLabel">
<mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="start center">System-Check Name</mat-header-cell>
<mat-cell *matCellDef="let element" fxLayoutAlign="start center"> {{element.label}} </mat-cell>
</ng-container>
<ng-container matColumnDef="number">
<mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Anzahl Berichte</mat-header-cell>
<mat-cell *matCellDef="let element" fxLayoutAlign="center center">{{element.count}} </mat-cell>
</ng-container>
<ng-container matColumnDef="details-os">
<mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Betriebssysteme</mat-header-cell>
<mat-cell *matCellDef="let element" fxLayout="column" fxLayoutAlign="center start">
<div *ngFor="let d of element.details.os | keyvalue">{{d.key}}: {{d.value}}</div>
</mat-cell>
</ng-container>
<ng-container matColumnDef="details-browser">
<mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Browser</mat-header-cell>
<mat-cell *matCellDef="let element" fxLayout="column" fxLayoutAlign="center start">
<div *ngFor="let d of element.details.browser | keyvalue">{{d.key}}: {{d.value}}</div>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
.mat-icon {
margin-right: 5px;
}
Legend
Html element with directive