finalize migration (yay)
This commit is contained in:
tw-blue
@@ -1,125 +1,142 @@
|
||||
<h1>Mitglieder & Sportlerübersicht</h1>
|
||||
<button mat-raised-button color="accent" (click)="newMember()">
|
||||
Neues Mitglied
|
||||
Neues Mitglied
|
||||
</button>
|
||||
<div class="filter-container mat-elevation-z8">
|
||||
<div class="filter-header">
|
||||
<mat-form-field>
|
||||
<input
|
||||
matInput
|
||||
(keyup)="applyFilter($event)"
|
||||
[value]="filter$ | async"
|
||||
placeholder="Filter"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="dataSource$ | async as dataSource">
|
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="edit">
|
||||
<th mat-header-cell *matHeaderCellDef>Bearb.</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<button
|
||||
mat-mini-fab-button
|
||||
(click)="editMember(element.id)"
|
||||
aria-label="Edit Member"
|
||||
<div class="filter-header">
|
||||
<mat-form-field>
|
||||
<label>Filter:</label>
|
||||
<input
|
||||
matInput
|
||||
[formControl]="filterControl"
|
||||
placeholder="Filter" />
|
||||
</mat-form-field>
|
||||
<div class="status-filters">
|
||||
<mat-radio-group [formControl]="statusControl">
|
||||
<mat-radio-button [value]="MemberStatusFilter.ACTIVE"
|
||||
>Aktiv</mat-radio-button
|
||||
>
|
||||
<mat-radio-button [value]="MemberStatusFilter.INACTIVE"
|
||||
>Inaktiv</mat-radio-button
|
||||
>
|
||||
<mat-radio-button [value]="MemberStatusFilter.ALL"
|
||||
>Alle</mat-radio-button
|
||||
>
|
||||
</mat-radio-group>
|
||||
<mat-form-field
|
||||
matTooltip="Zeigt nur Mitglieder, die zum angegebenen Datum den ausgewählten status hatten"
|
||||
matTooltipPosition="above">
|
||||
<label>Zum Datum:</label>
|
||||
<input
|
||||
matInput
|
||||
[matDatepicker]="picker"
|
||||
[formControl]="statusDateControl"
|
||||
[disabled]="statusControl.value===MemberStatusFilter.ALL"
|
||||
placeholder="Aktiv bis" />
|
||||
<mat-hint>DD.MM.YYYY</mat-hint>
|
||||
<mat-datepicker-toggle
|
||||
matIconSuffix
|
||||
[disabled]="statusControl.value===MemberStatusFilter.ALL"
|
||||
[for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-checkbox [formControl]="onlyWithID"
|
||||
>Nur mit Passnummer</mat-checkbox
|
||||
>
|
||||
<mat-icon fontIcon="edit"></mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--TODO Sorting doesnt work anymore-->
|
||||
<table mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="edit">
|
||||
<th mat-header-cell *matHeaderCellDef>Bearb.</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<button
|
||||
mat-mini-fab-button
|
||||
(click)="editMember(element.id)"
|
||||
aria-label="Edit Member">
|
||||
<mat-icon fontIcon="edit"></mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="delete">
|
||||
<th mat-header-cell *matHeaderCellDef>Entf.</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<button
|
||||
mat-mini-fab-button
|
||||
(click)="deleteMember(element.id)"
|
||||
aria-label="Delete Member"
|
||||
>
|
||||
<mat-icon fontIcon="delete"></mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
<th mat-header-cell *matHeaderCellDef>Entf.</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<button
|
||||
mat-mini-fab-button
|
||||
(click)="deleteMember(element.id)"
|
||||
aria-label="Delete Member">
|
||||
<mat-icon fontIcon="delete"></mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="vorname">
|
||||
<th mat-header-cell *matHeaderCellDef>Vorname</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<span [innerHTML]="element.vorname | stylizeNames"></span>
|
||||
</td>
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef>Vorname</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<span [innerHTML]="element.vorname | stylizeNames"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="nachname">
|
||||
<th mat-header-cell *matHeaderCellDef>Nachname</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<span [innerHTML]="element.nachname | stylizeNames"></span>
|
||||
</td>
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef>Nachname</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<span [innerHTML]="element.nachname | stylizeNames"></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="geschlecht">
|
||||
<th mat-header-cell *matHeaderCellDef>Geschlecht</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.geschlecht }}</td>
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef>Geschlecht</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.geschlecht }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="passnummer">
|
||||
<th mat-header-cell *matHeaderCellDef>Passnummer</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
{{ element.passnummer | nobreakHyphen }}
|
||||
</td>
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef>Passnummer</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
{{ element.passnummer | nobreakHyphen }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="geburtsdatum">
|
||||
<th mat-header-cell *matHeaderCellDef>Geburtsdatum</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
{{ element.geburtsdatum | datePipe }}
|
||||
</td>
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef>Geburtsdatum</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
{{ element.geburtsdatum | datePipe }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="geburtsort">
|
||||
<th mat-header-cell *matHeaderCellDef>Geburtsort</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.geburtsort }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="uvertrag">
|
||||
<th mat-header-cell *matHeaderCellDef>Unterrichtsvertrag</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-icon
|
||||
*ngIf="element.uvertrag"
|
||||
class="positive"
|
||||
aria-label="Unterrichtsvertrag Check"
|
||||
fontIcon="check"
|
||||
></mat-icon>
|
||||
<mat-icon
|
||||
*ngIf="!element.uvertrag"
|
||||
class="negative"
|
||||
aria-label="Unterrichtsvertrag Cross"
|
||||
fontIcon="close"
|
||||
></mat-icon>
|
||||
</td>
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef>Geburtsort</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.geburtsort }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="verein">
|
||||
<th mat-header-cell *matHeaderCellDef>Vereinsmitgliedschaft</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<mat-icon
|
||||
*ngIf="element.verein"
|
||||
class="positive"
|
||||
aria-label="Verein Check"
|
||||
fontIcon="check"
|
||||
></mat-icon>
|
||||
<mat-icon
|
||||
*ngIf="!element.verein"
|
||||
class="negative"
|
||||
aria-label="Verein Cross"
|
||||
fontIcon="close"
|
||||
></mat-icon>
|
||||
</td>
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef>
|
||||
Vereinsmitgliedschaft
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
@if(element.verein){
|
||||
<mat-icon
|
||||
class="positive"
|
||||
aria-label="Verein Check"
|
||||
fontIcon="check"></mat-icon>
|
||||
}@else {
|
||||
|
||||
<mat-icon
|
||||
class="negative"
|
||||
aria-label="Verein Cross"
|
||||
fontIcon="close"></mat-icon>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="kontakt">
|
||||
<th mat-header-cell *matHeaderCellDef>Kontakt</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.kontakt }}</td>
|
||||
<th mat-header-cell *matHeaderCellDef>Kontakt</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.kontakt }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="kuendigungzum">
|
||||
<th mat-header-cell *matHeaderCellDef>Kündigung zum</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
{{ (element.kuendigungzum | datePipe) ?? "-" }}
|
||||
</td>
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef>
|
||||
Kündigung zum
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
{{ (element.kuendigungzum | datePipe) ?? "-" }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
</ng-container>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user