File

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

Implements

OnInit

Metadata

styleUrls ./results.component.css
templateUrl ./results.component.html

Index

Properties
Methods

Constructor

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

Methods

deleteData
deleteData()
Returns : void
downloadCSVReport
downloadCSVReport(reportType: ReportType, filename: string)
Parameters :
Name Type Optional
reportType ReportType No
filename string No
Returns : void
downloadLogsCSV
downloadLogsCSV()
Returns : void
downloadResponsesCSV
downloadResponsesCSV()
Returns : void
downloadReviewsCSV
downloadReviewsCSV()
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', 'groupname', 'bookletsStarted', 'num_units_min', 'num_units_max', 'num_units_mean', 'lastchange' ]
resultDataSource
Default value : new MatTableDataSource<ResultData>([])
Public snackBar
Type : MatSnackBar
sort
Type : MatSort
Decorators :
@ViewChild(MatSort, {static: true})
tableselectionCheckbox
Default value : new SelectionModel<ResultData>(true, [])
Public wds
Type : WorkspaceDataService
import { Component, OnInit, ViewChild } from '@angular/core';
import { SelectionModel } from '@angular/cdk/collections';
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 { ConfirmDialogComponent, ConfirmDialogData } from 'iqb-components';

import { MainDataService } from '../../maindata.service';
import { BackendService } from '../backend.service';
import { WorkspaceDataService } from '../workspacedata.service';
import { ReportType, ResultData } from '../workspace.interfaces';

@Component({
  templateUrl: './results.component.html',
  styleUrls: ['./results.component.css']
})
export class ResultsComponent implements OnInit {
  displayedColumns: string[] = [
    'selectCheckbox', 'groupname', 'bookletsStarted', 'num_units_min', 'num_units_max', 'num_units_mean', 'lastchange'
  ];

  resultDataSource = new MatTableDataSource<ResultData>([]);
  // prepared for selection if needed sometime
  tableselectionCheckbox = new SelectionModel<ResultData>(true, []);

  @ViewChild(MatSort, { static: true }) sort: MatSort;

  constructor(
    private bs: BackendService,
    private deleteConfirmDialog: MatDialog,
    private mds: MainDataService,
    public wds: WorkspaceDataService,
    public snackBar: MatSnackBar
  ) { }

  ngOnInit(): void {
    setTimeout(() => {
      this.mds.setSpinnerOn();
      this.updateTable();
    });
  }

  updateTable(): void {
    this.tableselectionCheckbox.clear();
    this.bs.getResultData(this.wds.wsId).subscribe(
      (resultData: ResultData[]) => {
        this.resultDataSource = new MatTableDataSource<ResultData>(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));
  }

  downloadResponsesCSV(): void {
    this.downloadCSVReport(ReportType.RESPONSE, 'iqb-testcenter-responses.csv');
  }

  downloadReviewsCSV(): void {
    this.downloadCSVReport(ReportType.REVIEW, 'iqb-testcenter-reviews.csv');
  }

  downloadLogsCSV(): void {
    this.downloadCSVReport(ReportType.LOG, 'iqb-testcenter-logs.csv');
  }

  downloadCSVReport(reportType: ReportType, filename: string): void {
    if (this.tableselectionCheckbox.selected.length > 0) {
      const dataIds: string[] = [];

      this.tableselectionCheckbox.selected.forEach(element => {
        dataIds.push(element.groupname);
      });

      this.wds.downloadReport(dataIds, reportType, filename);

      this.tableselectionCheckbox.clear();
    }
  }

  deleteData(): void {
    if (this.tableselectionCheckbox.selected.length > 0) {
      const selectedGroups: string[] = [];
      this.tableselectionCheckbox.selected.forEach(element => {
        selectedGroups.push(element.groupname);
      });

      let prompt = 'Es werden alle Antwort- und Logdaten in der Datenbank für diese ';
      if (selectedGroups.length > 1) {
        prompt += `${selectedGroups.length} Gruppen `;
      } else {
        prompt += `Gruppe "${selectedGroups[0]}" `;
      }

      const dialogRef = this.deleteConfirmDialog.open(ConfirmDialogComponent, {
        width: '400px',
        data: <ConfirmDialogData>{
          title: 'Löschen von Gruppendaten',
          content: `${prompt}gelöscht. Fortsetzen?`,
          confirmbuttonlabel: 'Gruppendaten löschen',
          showcancel: true
        }
      });

      dialogRef.afterClosed().subscribe(result => {
        if (result !== false) {
          this.mds.setSpinnerOn();
          this.bs.deleteData(this.wds.wsId, selectedGroups).subscribe((ok: boolean) => {
            if (ok) {
              this.snackBar.open('Löschen erfolgreich.', 'Ok.', { duration: 3000 });
            } else {
              this.snackBar.open('Löschen nicht erfolgreich.', 'Fehler', { duration: 3000 });
            }
            this.tableselectionCheckbox.clear();
            this.updateTable();
          });
        }
      });
    }
  }
}
<div class="columnhost" fxLayout="column">
  <div fxLayout="row">
    <button mat-raised-button (click)="downloadResponsesCSV()" [disabled]="!tableselectionCheckbox.hasValue()"
        matTooltip="Download markierte Gruppen als CSV für Excel" matTooltipPosition="above">
      <mat-icon>cloud_download</mat-icon>Antworten
    </button>
    <button mat-raised-button (click)="downloadLogsCSV()" [disabled]="!tableselectionCheckbox.hasValue()"
        matTooltip="Download markierte Gruppen als CSV für Excel" matTooltipPosition="above">
      <mat-icon>cloud_download</mat-icon>Logs
    </button>
    <button mat-raised-button (click)="downloadReviewsCSV()" [disabled]="!tableselectionCheckbox.hasValue()"
        matTooltip="Download markierte Gruppen als CSV für Excel" matTooltipPosition="above">
      <mat-icon>cloud_download</mat-icon>Kommentare
    </button>
    <button mat-raised-button (click)="deleteData()" [disabled]="!tableselectionCheckbox.hasValue() || (wds.wsRole !== 'RW')"
        matTooltip="Löschen Ergebnisdaten aus der Datenbank für markierte Gruppen" 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="groupname">
      <mat-header-cell *matHeaderCellDef mat-sort-header fxFlex="300px">Login-Gruppe</mat-header-cell>
      <mat-cell *matCellDef="let element" fxFlex="300px">{{element.groupname}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="bookletsStarted">
      <mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Testhefte gestartet</mat-header-cell>
      <mat-cell *matCellDef="let element" fxLayoutAlign="center center"> {{element.bookletsStarted}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="num_units_min">
      <mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Aufgaben min</mat-header-cell>
      <mat-cell *matCellDef="let element" fxLayoutAlign="center center">{{element.num_units_min}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="num_units_max">
      <mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Aufgaben max</mat-header-cell>
      <mat-cell *matCellDef="let element" fxLayoutAlign="center center">{{element.num_units_max}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="num_units_mean">
      <mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Aufgaben Mittelwert</mat-header-cell>
      <mat-cell *matCellDef="let element" fxLayoutAlign="center center">{{element.num_units_mean | number:'1.1-1'}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="lastchange">
      <mat-header-cell *matHeaderCellDef mat-sort-header fxLayoutAlign="center center">Letzte Änderung</mat-header-cell>
      <mat-cell *matCellDef="let element" fxLayoutAlign="center center">
        <span *ngIf="element.lastchange !== '0'">{{element.lastchange | date:'dd.MM.yyyy HH:mm'}}</span>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

./results.component.css

/* .columnhost {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: left;
} */

/* .mat-icon {
  margin-right: 5px;
} */

.mat-raised-button {
  min-width: 100px;
  margin: 2px;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""