File

src/app/workspace-admin/syscheck/syscheck.component.ts

Implements

OnInit

Metadata

styleUrls ./syscheck.component.css
templateUrl ./syscheck.component.html

Index

Properties
Methods

Constructor

constructor(bs: BackendService, deleteConfirmDialog: MatDialog, mds: MainDataService, snackBar: MatSnackBar)
Parameters :
Name Type Optional
bs BackendService No
deleteConfirmDialog MatDialog No
mds MainDataService No
snackBar MatSnackBar No

Methods

deleteReports
deleteReports()
Returns : void
downloadReportsCSV
downloadReportsCSV()
Returns : void
isAllSelected
isAllSelected()
Returns : boolean
masterToggle
masterToggle()
Returns : void
ngOnInit
ngOnInit()
Returns : void
updateTable
updateTable()
Returns : void

Properties

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>

./syscheck.component.css

.mat-icon {
  margin-right: 5px;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""