bildungdb/src/app/prergebnis/prergebnis.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';
import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort, Sort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Pruefung } from '../Pruefung';
import { PruefungService } from '../services/pruefung.service';
import {MatSelectModule} from '@angular/material/select';
import { PruefungsergebnisService } from '../services/pruefungsergebnis.service';
import { Pruefungsergebnis } from '../Pruefungsergebnis';
import { MatRadioModule} from '@angular/material/radio';
import { MatNativeDateModule } from '@angular/material/core';
import { FormControl } from '@angular/forms';


export enum SelectType {
  single,
  multiple
}

@Component({
  selector: 'app-prergebnis',
  templateUrl: './prergebnis.component.html',
  styleUrls: ['./prergebnis.component.css']
})

export class PrergebnisComponent implements OnInit {

  constructor(private Pruefung: PruefungService, 
              private pruefungsergebnis: PruefungsergebnisService,
              private _liveAnnouncer: LiveAnnouncer,
              private _ergliveAnnouncer: LiveAnnouncer) { }

              formatLabel(value: number | null) {
                if (!value) {
                  return 0;
                }
            
                if (value >= 3) {
                  // da wäre schön, die Farbe zu ändern
                }
                return value;
              }

   public dataSource: any;
   public ergdataSource: any;
   public pruefungen: any;  
   public pruefergebnisse: any;
   public angewaehlt: any;
   public ergangewaehlt: any;
   public abgewählt: any;
   public pruefungsdatum: any;
   date = new FormControl(new Date());
   serializedDate = new FormControl(new Date().toISOString());

   displayedColumns: any = [  "examid", "examshort", "examname", "examdescription"];
   ergdisplayedColumns: any = [  "firstname", "lastname", "date_of_exam", "acquired"];
   selection = new SelectionModel<Pruefung>(true, []);
   ergselection = new SelectionModel<Pruefungsergebnis>(true, []);
   displayType = SelectType.single;

   //clickedRows = new Set<Pruefung>();

  ngOnInit(): void {
    
    this.Pruefung.getPruefungen().subscribe(
      (
        data: any) => {
      //  console.log(data);
        this.pruefungen = data.exam;
        this.dataSource = new MatTableDataSource(this.pruefungen);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
    })
    this.pruefungsergebnis.getPruefergebnisse().subscribe(
      (
        dataerg: any) => {
      //  console.log(data);
        this.pruefergebnisse = dataerg;
        this.ergdataSource = new MatTableDataSource(this.pruefergebnisse);
        this.ergdataSource.ergpaginator = this.ergpaginator;
        this.ergdataSource.sort = this.sort;
    })
  }

  selectHandler(row: Pruefung) {
    if (this.displayType == SelectType.single) {
      if (!this.selection.isSelected(row)) {
        this.selection.clear();
      }
    }
    this.selection.toggle(row);
  }

  ergselectHandler(row: Pruefungsergebnis) {
    if (this.displayType == SelectType.single) {
      if (!this.ergselection.isSelected(row)) {
        this.ergselection.clear();
      }
    }
    this.ergselection.toggle(row);
  }

  onChange(typeValue: number) {
    this.displayType = typeValue;
    this.selection.clear();
  }

  selectType = [
    { text: "Einfachauswahl", value: SelectType.single },
    { text: "Mehrfachauswahl", value: SelectType.multiple }
  ];

  @ViewChild('paginator') paginator: MatPaginator;
  @ViewChild('ergpaginator') ergpaginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatSort) ergsort: MatSort;

  ngAfterViewInit() {
    if(this.ergdataSource != undefined) {
      this.ergdataSource.ergpaginator = this.ergpaginator;
      this.ergdataSource.ergsort = this.ergsort;
      console.log("ErgDatasource: " + this.ergdataSource);
    }
    else
      console.log("Erg Datasource ist undefined in AfterViewInit");

    if(this.dataSource != undefined) {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      console.log("Datasource: " + this.dataSource);
    }
    else
      console.log("DataSource undefined in AfterViewInit");
  }
  onclick(pruerow: any) {
    this.angewaehlt = pruerow;
  }

  onergclick(persrow: any) {
    this.ergangewaehlt = persrow;
  }

  applypruefFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
 //   console.log("Filter: " + this.dataSource.filter);
  }

  applypersonFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.ergdataSource.filter = filterValue.trim().toLowerCase();
  //  console.log("Filter: " + this.ergdataSource.filter);
  }

  /** Announce the change in sort state for assistive technology. */
  announceSortChange(sortState: Sort) {
    if (sortState.direction) {
      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
    } else {
      this._liveAnnouncer.announce('Sorting cleared');
    }
  }
  ergannounceSortChange(ergsortState: Sort) {
    if (ergsortState.direction) {
      this._ergliveAnnouncer.announce(`Sorted ${ergsortState.direction}ending`);
    } else {
      this._ergliveAnnouncer.announce('Sorting cleared');
    }
  }
}