fix theming + ui improvements
This commit is contained in:
toni
@@ -1,142 +1,180 @@
|
||||
<h1>Mitglieder & Sportlerübersicht</h1>
|
||||
<button mat-raised-button color="accent" (click)="newMember()">
|
||||
Neues Mitglied
|
||||
</button>
|
||||
<div class="filter-container mat-elevation-z8">
|
||||
<div class="filter-header">
|
||||
<mat-form-field>
|
||||
<label>Filter:</label>
|
||||
<div>
|
||||
<h1>Mitglieder & Sportlerübersicht</h1>
|
||||
</div>
|
||||
<div>
|
||||
<button matButton="filled" class="primary-btn" (click)="newMember()">
|
||||
Neues Mitglied
|
||||
</button>
|
||||
</div>
|
||||
<div class="filter-container">
|
||||
<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
|
||||
[formControl]="filterControl"
|
||||
placeholder="Filter" />
|
||||
[matDatepicker]="picker"
|
||||
[formControl]="statusDateControl"
|
||||
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 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
|
||||
>
|
||||
</div>
|
||||
<mat-checkbox [formControl]="onlyWithID">Nur mit Passnummer</mat-checkbox>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<!--TODO implement row count, selecting and alternating colors-->
|
||||
<table
|
||||
mat-table
|
||||
[dataSource]="dataSource"
|
||||
class="member-table"
|
||||
matSort
|
||||
matSortActive="vorname"
|
||||
matSortDirection="asc"
|
||||
matSortDisableClear>
|
||||
<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>
|
||||
|
||||
<!--TODO implement row count, selecting and alternating colors-->
|
||||
<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>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="vorname">
|
||||
<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 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 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 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 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 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 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 {
|
||||
<ng-container matColumnDef="index" sticky>
|
||||
<th mat-header-cell *matHeaderCellDef>Nr.</th>
|
||||
<td mat-cell *matCellDef="let element; let i=index">{{i+1}}</td>
|
||||
</ng-container>
|
||||
|
||||
<mat-icon
|
||||
class="negative"
|
||||
aria-label="Verein Cross"
|
||||
fontIcon="close"></mat-icon>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="vorname">
|
||||
<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 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 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 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 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 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 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 {
|
||||
|
||||
<ng-container matColumnDef="kontakt">
|
||||
<th mat-header-cell *matHeaderCellDef>Kontakt</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.kontakt }}</td>
|
||||
</ng-container>
|
||||
<mat-icon
|
||||
class="negative"
|
||||
aria-label="Verein Cross"
|
||||
fontIcon="close"></mat-icon>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="kuendigungzum">
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef>
|
||||
Kündigung zum
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
{{ (element.kuendigungzum | datePipe) ?? "-" }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="kontakt">
|
||||
<th mat-header-cell *matHeaderCellDef>Kontakt</th>
|
||||
<td mat-cell *matCellDef="let element">{{ element.kontakt }}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
<ng-container matColumnDef="kuendigungzum">
|
||||
<th mat-header-cell mat-sort-header *matHeaderCellDef>
|
||||
Kündigung zum
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
{{ (element.kuendigungzum | datePipe) ?? "-" }}
|
||||
</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>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="totalCount">
|
||||
<td
|
||||
colspan="100%"
|
||||
mat-footer-cell
|
||||
*matFooterCellDef
|
||||
class="footer-entry">
|
||||
Zeige {{dataSource.filteredData.length}} von
|
||||
{{dataSource.data.length}} Mitgliedern
|
||||
@if(dataSource.filteredData.length !== dataSource.data.length)
|
||||
{(gefiltert) }
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr
|
||||
mat-header-row
|
||||
*matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr
|
||||
mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
class="table-row"></tr>
|
||||
<tr mat-footer-row *matFooterRowDef="['totalCount']; sticky: true"></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user