Taekwondo-Admin/packages/frontend/src/app/components/view-members/view-members.html

<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
                [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>
    <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>

        <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>

        <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 {

                <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>
        </ng-container>

        <ng-container matColumnDef="kuendigungzum">
            <th mat-header-cell mat-sort-header *matHeaderCellDef>
                K&uuml;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>