84 lines
3.1 KiB
HTML
84 lines
3.1 KiB
HTML
<section class="members-page">
|
|
<header class="page-header">
|
|
<div>
|
|
<p>Team</p>
|
|
<h1>Mitglieder</h1>
|
|
</div>
|
|
@if (canManage()) {
|
|
<button mat-flat-button (click)="showCreateForm.set(!showCreateForm())">
|
|
<mat-icon>person_add</mat-icon>Neu
|
|
</button>
|
|
}
|
|
</header>
|
|
@if (showCreateForm()) {
|
|
<mat-card class="create-card"
|
|
><mat-card-content
|
|
><h2>Mitglied anlegen</h2>
|
|
<form [formGroup]="createForm" (ngSubmit)="createPlayer()">
|
|
<div class="name-row">
|
|
<mat-form-field appearance="outline"
|
|
><mat-label>Vorname</mat-label
|
|
><input matInput formControlName="firstName" /></mat-form-field
|
|
><mat-form-field appearance="outline"
|
|
><mat-label>Nachname</mat-label><input matInput formControlName="lastName"
|
|
/></mat-form-field>
|
|
</div>
|
|
<mat-form-field appearance="outline"
|
|
><mat-label>Rolle</mat-label
|
|
><mat-select formControlName="teamRole"
|
|
><mat-option [value]="1">Spieler</mat-option
|
|
><mat-option [value]="2">2. Kassenwart</mat-option
|
|
><mat-option [value]="3">Kapitän</mat-option
|
|
><mat-option [value]="4">Kassenwart</mat-option
|
|
><mat-option [value]="5">Trainer</mat-option></mat-select
|
|
></mat-form-field
|
|
>
|
|
<div class="actions">
|
|
<button mat-button type="button" (click)="showCreateForm.set(false)">Abbrechen</button
|
|
><button mat-flat-button type="submit" [disabled]="createForm.invalid || saving()">
|
|
Anlegen
|
|
</button>
|
|
</div>
|
|
</form></mat-card-content
|
|
></mat-card
|
|
>
|
|
}
|
|
<div class="filters">
|
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"
|
|
><mat-label>Mitglieder suchen</mat-label><mat-icon matPrefix>search</mat-icon
|
|
><input
|
|
matInput
|
|
[value]="search()"
|
|
(input)="search.set($any($event.target).value)" /></mat-form-field
|
|
><button mat-button (click)="showInactive.set(!showInactive())">
|
|
{{ showInactive() ? 'Nur aktive' : 'Inaktive anzeigen' }}
|
|
</button>
|
|
</div>
|
|
@if (players().length === 0) {
|
|
<div class="empty">
|
|
<mat-icon>group_off</mat-icon><strong>Keine Mitglieder gefunden</strong>
|
|
</div>
|
|
} @else {
|
|
<div class="member-list">
|
|
@for (player of players(); track player.id) {
|
|
<a class="member" [class.inactive]="!player.active" [routerLink]="[player.id]"
|
|
><div class="avatar">{{ player.firstName.charAt(0) }}{{ player.lastName.charAt(0) }}</div>
|
|
<div class="member__copy">
|
|
<strong>{{ player.firstName }} {{ player.lastName }}</strong
|
|
><span
|
|
>{{ roleName(player.teamRole?.name) }}
|
|
@if (!player.active) {
|
|
· Inaktiv
|
|
}
|
|
</span>
|
|
</div>
|
|
<strong class="balance" [class.negative]="player.balance < 0">{{
|
|
player.balance | currency: 'EUR'
|
|
}}</strong
|
|
><mat-icon>chevron_right</mat-icon></a
|
|
>
|
|
}
|
|
</div>
|
|
}
|
|
</section>
|