danielk/bildungdb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

noch einmal

Browse Source
This commit is contained in:
Daniel Kirchmeier
2022-08-26 15:37:47 +02:00
parent 3c0d400505
commit 5f3a5605fe
21 changed files with 521 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/prergebnis/prergebnis.component.css Normal file
View File

@@ -0,0 +1,17 @@
.demo-table {
width: 100%;
}
.row-is-clicked {
color: red;
background-color: #fdf9e9;
font-weight: bold;
}
.mat-row.hovered {
background: #eee;
}
.mat-row.highlighted {
background: #fdf9e9;
}

114
src/app/prergebnis/prergebnis.component.html Normal file
View File

@@ -0,0 +1,114 @@
<div class="container col-12 float-left">
<div class="row">
<div class="auswahl col-6">
<mat-form-field>
<mat-label>Ergebnis zuordnen</mat-label>
<mat-select [(ngModel)]="displayType" (ngModelChange)="onChange(displayType)">
<mat-option *ngFor="let type of selectType" [value]="type.value">
{{type.text}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="row">
<div class="prueffilter col-6">
<mat-form-field class="pl-4" appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applypruefFilter($event)" placeholder="Suchbegriff" #input>
</mat-form-field>
</div>
<div class="personfilter col-6">
<mat-form-field class="pl-4" appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applypersonFilter($event)" placeholder="Suchbegriff" #input>
</mat-form-field>
</div>
</div>
</div>
<div class="row col-12">
<div class="person col-6">
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)" class="mat-elevation-z8">
<!-- Checkbox Column -->
<!-- <ng-container matColumnDef="select">
<mat-header-cell class="kopf col-1" *matHeaderCellDef></mat-header-cell>
<mat-cell class="align-bottom" *matCellDef="let pruerow">
<mat-checkbox class="pt-3" (click)="$event.stopPropagation()" (change)="selectHandler(pruerow)"
[checked]="selection.isSelected(pruerow)">
</mat-checkbox>
</mat-cell>
</ng-container>
-->
<ng-container matColumnDef="examid">
<th class="kopf col-1" mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let prue"> {{prue.examid}} </td>
</ng-container>
<ng-container matColumnDef="examshort">
<th class="kopf col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Prüfung </th>
<td mat-cell *matCellDef="let prue"> {{prue.examshort}} </td>
</ng-container>
<ng-container matColumnDef="examname">
<th class="kopf col-3" mat-sort-header mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let prue"> {{prue.examname}} </td>
</ng-container>
<ng-container matColumnDef="examdescription">
<th class="kopf col-5" mat-sort-header mat-header-cell *matHeaderCellDef> Beschreibung </th>
<td mat-cell *matCellDef="let prue"> {{prue.examdescription}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row
*matRowDef="let pruerow; columns: displayedColumns;"
(click)="selectHandler(pruerow)" (change)="selectHandler(pruerow)"
[ngClass]="{hovered: pruerow.hovered, highlighted: selection.isSelected(pruerow)}"
(mouseover)="pruerow.hovered = true" (mouseout)="pruerow.hovered = false"></tr>
</table>
<mat-paginator class="mat-elevation-z8 mt-3" #paginator [pageSizeOptions]="[5, 10, 20, 30]" showFirstLastButtons></mat-paginator>
</div>
<div class="pruef col-6">
<table mat-table [dataSource]="ergdataSource" matSort (matSortChange)="ergannounceSortChange($event)" class="mat-elevation-z8">
<!-- Checkbox Column -->
<!-- <ng-container matColumnDef="select">
<mat-header-cell class="kopf col-1" *matHeaderCellDef></mat-header-cell>
<mat-cell class="align-bottom" *matCellDef="let pruerow">
<mat-checkbox class="pt-3" (click)="$event.stopPropagation()" (change)="selectHandler(pruerow)"
[checked]="selection.isSelected(pruerow)">
</mat-checkbox>
</mat-cell>
</ng-container>
-->
<ng-container matColumnDef="firstname">
<th class="kopf col-4" mat-sort-header mat-header-cell *matHeaderCellDef> Vorname </th>
<td mat-cell *matCellDef="let pers"> {{pers.firstname}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th class="kopf col-4" mat-sort-header mat-header-cell *matHeaderCellDef> Nachname </th>
<td mat-cell *matCellDef="let pers"> {{pers.lastname}} </td>
</ng-container>
<ng-container matColumnDef="date_of_exam">
<th class="kopf col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Datum </th>
<td mat-cell *matCellDef="let pers"> {{pers.date_of_exam}} </td>
</ng-container>
<ng-container matColumnDef="acquired">
<th class="kopf text-right col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Bestanden </th>
<td mat-cell class="text-center" *matCellDef="let pers">{{pers.acquired}}
<!-- <div *ngIf="1">
<img src="../../assets/icons/ok.png">
</div> -->
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="ergdisplayedColumns"></tr>
<tr mat-row
*matRowDef="let persrow; columns: ergdisplayedColumns;"
(click)="selectHandler(persrow)" (change)="selectHandler(persrow)"
[ngClass]="{hovered: persrow.hovered, highlighted: selection.isSelected(persrow)}"
(mouseover)="persrow.hovered = true" (mouseout)="persrow.hovered = false"></tr>
</table>
<mat-paginator class="mat-elevation-z8 mt-3" #ergpaginator [pageSizeOptions]="[5, 10, 20, 50]" showFirstLastButtons></mat-paginator>
</div>
</div>
<div>
<h3>
Ausgewählt:
</h3>
{{selection.selected | json}}
</div>
</div>

23
src/app/prergebnis/prergebnis.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PrergebnisComponent } from './prergebnis.component';
describe('PrergebnisComponent', () => {
let component: PrergebnisComponent;
let fixture: ComponentFixture<PrergebnisComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ PrergebnisComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(PrergebnisComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

152
src/app/prergebnis/prergebnis.component.ts Normal file
View File

@@ -0,0 +1,152 @@
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';
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) { }
public dataSource: any;
public ergdataSource: any;
public pruefungen: any;
public pruefergebnisse: any;
public angewaehlt: any;
public ergangewaehlt: any;
public abgewählt: any;
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(
(
data: any) => {
// console.log(data);
this.pruefergebnisse = data;
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(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(this.dataSource);
}
else
console.log("DataSource undefined in AfterViewInit");
}
onclick(pruerow: any) {
this.angewaehlt = pruerow;
console.log(this.angewaehlt);
}
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');
}
}
}