visual + updates

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

@@ -20,16 +20,16 @@
         <label>Filter:</label>
         <input
             matInput
-            [field]="filterForm.filterString"
+            [formField]="filterForm.filterString"
             placeholder="Filter" />
     </mat-form-field>
     <div class="status-filters">
-        <mat-radio-group [field]="filterForm.status">
+        <mat-radio-group [formField]="filterForm.status">
             <mat-radio-button [value]="MemberStatusFilter.ACTIVE"
-                >Aktiv</mat-radio-button
+                >Aktiv zum</mat-radio-button
             >
             <mat-radio-button [value]="MemberStatusFilter.INACTIVE"
-                >Inaktiv</mat-radio-button
+                >Gekündigt seit</mat-radio-button
             >
             <mat-radio-button [value]="MemberStatusFilter.ALL"
                 >Alle</mat-radio-button
@@ -42,7 +42,7 @@
             <input
                 matInput
                 [matDatepicker]="picker"
-                [field]="filterForm.statusDate"
+                [formField]="filterForm.statusDate"
                 placeholder="Aktiv bis" />
             <mat-hint>DD.MM.YYYY</mat-hint>
             <mat-datepicker-toggle
@@ -52,7 +52,7 @@
             <mat-datepicker #picker></mat-datepicker>
         </mat-form-field>
     </div>
-    <mat-checkbox [field]="filterForm.onlyWithID"
+    <mat-checkbox [formField]="filterForm.onlyWithID"
         >Nur mit Passnummer</mat-checkbox
     >
 </div>
@@ -110,7 +110,7 @@
         </ng-container>
         <ng-container matColumnDef="geburtsdatum">
             <th mat-header-cell mat-sort-header *matHeaderCellDef>
-                Geburtsdatum
+                Geburtsdatum Geboren am
             </th>
             <td mat-cell *matCellDef="let element">
                 {{ element.geburtsdatum | datePipe }}
@@ -123,9 +123,7 @@
             <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>
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>Verein?</th>
             <td mat-cell *matCellDef="let element">
                 @if(element.verein){
                 <mat-icon
@@ -149,12 +147,18 @@
 
         <ng-container matColumnDef="kuendigungzum">
             <th mat-header-cell mat-sort-header *matHeaderCellDef>
-                K&uuml;ndigung zum
+                K&uuml;ndigung
             </th>
             <td mat-cell *matCellDef="let element">
                 {{ (element.kuendigungzum | datePipe) ?? "-" }}
             </td>
         </ng-container>
+        <ng-container matColumnDef="creationDate">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>Beitritt</th>
+            <td mat-cell *matCellDef="let element">
+                {{ element.creationDate | datePipe }}
+            </td>
+        </ng-container>
 
         <ng-container matColumnDef="delete">
             <th mat-header-cell *matHeaderCellDef>Entf.</th>
@@ -187,7 +191,8 @@
         <tr
             mat-row
             *matRowDef="let row; columns: displayedColumns"
-            class="table-row"></tr>
+            class="table-row"
+            [class.expired]="isInPast(row.kuendigungzum)"></tr>
         <tr mat-footer-row *matFooterRowDef="['totalCount']; sticky: true"></tr>
     </table>
 </div>