use signal forms

packages/api/src/controllers/membersController.ts

@@ -103,7 +103,7 @@ export class MembersContoller extends Controller {
     ) {
         await this.membersService.scheduleDeletion(
             memberId,
-            cancelDate,
+            cancelDate ? cancelDate : null,
             request,
         );
     }

packages/api/src/dtos/member.ts

@@ -1,51 +1,52 @@
 import { type MemberModel as DbMember } from "../generated/prisma/models.js";
 
 export interface MemberDto {
-    id: string | null;
-    vorname: string | null;
-    nachname: string | null;
-    geburtsdatum: string | null;
-    geburtsort: string | null;
-    geschlecht: string | null;
-    passnummer: string | null;
-    verein: boolean | null;
-    graduierung: string | null;
-    letztePruefung: string | null;
-    kontakt: string | null;
-    kuendigungzum: string | null;
-    marker: boolean | null;
+    id: string;
+    vorname: string;
+    nachname: string;
+    geburtsdatum: string;
+    geburtsort: string;
+    geschlecht: string;
+    passnummer: string;
+    verein: boolean;
+    graduierung: string;
+    letztePruefung: string;
+    kontakt: string;
+    kuendigungzum: string;
+    marker: boolean;
 }
 
-export class MemberCreateArgs implements Omit<MemberDto, "id"> {
-    vorname!: string | null;
-    nachname!: string | null;
-    geburtsdatum!: string | null;
-    geburtsort!: string | null;
-    geschlecht!: string | null;
-    passnummer!: string | null;
-    verein!: boolean | null;
-    graduierung!: string | null;
-    letztePruefung!: string | null;
-    kontakt!: string | null;
-    kuendigungzum!: string | null;
-    marker!: boolean | null;
+export class MemberCreateArgs implements Omit<
+    MemberDto,
+    "id" | "kuendigungzum" | "letztePruefung"
+> {
+    vorname!: string;
+    nachname!: string;
+    geburtsdatum!: string;
+    geburtsort!: string;
+    geschlecht!: string;
+    passnummer!: string;
+    verein!: boolean;
+    graduierung!: string;
+    kontakt!: string;
+    marker!: boolean;
 }
 
 export function mapDbMemberToMember(dbMember: DbMember): MemberDto {
     return {
-        geburtsdatum: dbMember.geburtsdatum?.toDateString() ?? null,
+        geburtsdatum: dbMember.geburtsdatum?.toDateString() ?? "",
         id: dbMember.id,
-        nachname: dbMember.nachname,
-        geburtsort: dbMember.geburtsort,
-        geschlecht: dbMember.geschlecht,
-        graduierung: dbMember.graduierung,
-        vorname: dbMember.vorname,
-        kontakt: dbMember.kontakt,
-        kuendigungzum: dbMember.kuendigungzum?.toDateString() ?? null,
-        letztePruefung: dbMember.letztePruefung?.toDateString() ?? null,
-        passnummer: dbMember.passnummer,
-        verein: dbMember.verein,
-        marker: dbMember.marker,
+        nachname: dbMember.nachname ?? "",
+        geburtsort: dbMember.geburtsort ?? "",
+        geschlecht: dbMember.geschlecht ?? "",
+        graduierung: dbMember.graduierung ?? "",
+        vorname: dbMember.vorname ?? "",
+        kontakt: dbMember.kontakt ?? "",
+        kuendigungzum: dbMember.kuendigungzum?.toDateString() ?? "",
+        letztePruefung: dbMember.letztePruefung?.toDateString() ?? "",
+        passnummer: dbMember.passnummer ?? "",
+        verein: dbMember.verein ?? false,
+        marker: dbMember.marker ?? false,
     };
 }
 

packages/api/src/services/membersService.ts

@@ -68,7 +68,19 @@ export class MembersService {
         const modifiedMember = await this.database.doRequest(
             async prisma =>
                 await prisma.member.update({
-                    data: { ...member, id: id },
+                    data: {
+                        ...member,
+                        id: id,
+                        letztePruefung: member.letztePruefung
+                            ? member.letztePruefung
+                            : null,
+                        geburtsdatum: member.geburtsdatum
+                            ? member.geburtsdatum
+                            : null,
+                        kuendigungzum: member.kuendigungzum
+                            ? member.kuendigungzum
+                            : null,
+                    },
                     where: { id: id },
                 }),
             request,
@@ -79,7 +91,7 @@ export class MembersService {
 
     public async scheduleDeletion(
         memberId: string,
-        cancelDate: Date,
+        cancelDate: Date | null,
         request: express.Request,
     ) {
         await this.database.doRequest(

packages/frontend/src/app/components/delete-member-dialog/delete-member-dialog.component.html

@@ -1,13 +1,17 @@
-<form [formGroup]="form" (ngSubmit)="submit()">
-  <p>Name: {{ member.vorname }} {{ member.nachname }}</p>
-  <p>Passnummer: {{ member.passnummer }}</p>
-  <p>Geburtsdatum: {{ member.geburtsdatum??undefined |  datePipe }}</p>
-  <mat-form-field>
-    <mat-label>K&uuml;ndigun zum</mat-label>
-    <input matInput [matDatepicker]="picker" formControlName="kuendigungzum" />
-    <mat-hint>DD.MM.YYYY</mat-hint>
-    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-    <mat-datepicker #picker></mat-datepicker>
-  </mat-form-field>
-  <button mat-raised-button color="primary" type="submit">Speichern</button>
+<form>
+    <p>Name: {{ member.vorname }} {{ member.nachname }}</p>
+    <p>Passnummer: {{ member.passnummer }}</p>
+    <p>Geburtsdatum: {{ member.geburtsdatum | datePipe }}</p>
+    <mat-form-field>
+        <mat-label>K&uuml;ndigun zum</mat-label>
+        <input matInput [matDatepicker]="picker" [field]="form.kuendigungzum" />
+        <mat-hint>DD.MM.YYYY</mat-hint>
+        <mat-datepicker-toggle
+            matIconSuffix
+            [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+    </mat-form-field>
+    <button mat-raised-button color="primary" (click)="submit()">
+        Speichern
+    </button>
 </form>

packages/frontend/src/app/components/delete-member-dialog/delete-member-dialog.component.ts

@@ -1,5 +1,5 @@
-import { Component, Inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, signal } from '@angular/core';
+import { Field, form } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -9,18 +9,17 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import * as api from '../../generated-api/api';
-import { DatePipePipe, dateToLocal } from '../../pipes/date-pipe.pipe.js';
+import {
+    DatePipePipe,
+    dateToLocal,
+    dateToUTC,
+} from '../../pipes/date-pipe.pipe.js';
 import { EditMemberDialogComponent } from '../edit-member-dialog/edit-member-dialog.component.js';
 
-type DeletionForm = {
-    kuendigungzum: FormControl<Date | null>;
-};
-
 @Component({
     selector: 'app-delete-member-dialog',
     standalone: true,
     imports: [
-        ReactiveFormsModule,
         MatFormFieldModule,
         MatInputModule,
         MatCheckboxModule,
@@ -29,32 +28,31 @@ type DeletionForm = {
         MatOptionModule,
         MatDatepickerModule,
         DatePipePipe,
+        Field,
     ],
     templateUrl: './delete-member-dialog.component.html',
     styleUrl: './delete-member-dialog.component.scss',
 })
 export class DeleteMemberDialogComponent {
-    form: FormGroup<DeletionForm>;
-    member: api.MemberDto;
-    constructor(
-        @Inject(MAT_DIALOG_DATA) public data: { member: api.MemberDto },
-        private dialogRef: MatDialogRef<EditMemberDialogComponent>,
-    ) {
-        this.member = data.member;
-        this.form = new FormGroup<DeletionForm>({
-            kuendigungzum: new FormControl(null),
-        });
-    }
+    private readonly data = inject<{ member: api.MemberDto }>(MAT_DIALOG_DATA);
+    private readonly dialogRef = inject(
+        MatDialogRef<EditMemberDialogComponent>,
+    );
+    private readonly deletionModel = signal({
+        kuendigungzum: this.data.member.kuendigungzum
+            ? dateToUTC(this.data.member.kuendigungzum)
+            : null,
+    });
+    protected readonly form = form(this.deletionModel);
+    protected readonly member = this.data.member;
 
-    async submit() {
-        const date = this.form.controls.kuendigungzum.value;
-        if (date) {
-            await api.scheduleDeletion(
-                this.member.id!,
-                dateToLocal(date).toISOString(),
-            );
+    protected async submit() {
+        const date = this.deletionModel().kuendigungzum;
+        await api.scheduleDeletion(
+            this.member.id,
+            date ? dateToLocal(date).toISOString() : '',
+        );
 
-            this.dialogRef.close();
-        }
+        this.dialogRef.close();
     }
 }

packages/frontend/src/app/components/edit-member-dialog/edit-member-dialog.component.html

@@ -1,44 +1,41 @@
-<form [formGroup]="form" (ngSubmit)="submit()">
-  <mat-form-field>
-    <mat-label>Vorname</mat-label>
-    <input matInput placeholder="Vorname" formControlName="vorname" />
-  </mat-form-field>
-  <mat-form-field>
-    <mat-label>Nachname</mat-label>
-    <input matInput placeholder="Nachname" formControlName="nachname" />
-  </mat-form-field>
-  <mat-form-field>
-    <mat-label>Geschlecht</mat-label>
-    <input matInput placeholder="Geschlecht" formControlName="geschlecht" />
-  </mat-form-field>
-  <mat-form-field>
-    <mat-label>Passnummer</mat-label>
-    <input matInput placeholder="Passnummer" formControlName="passnummer" />
-  </mat-form-field>
-  <mat-form-field>
-    <mat-label>Geburtsdatum</mat-label>
-    <input matInput [matDatepicker]="picker" formControlName="geburtsdatum" />
-    <mat-hint>DD.MM.YYYY</mat-hint>
-    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-    <mat-datepicker #picker></mat-datepicker>
-  </mat-form-field>
-  <mat-form-field>
-    <mat-label>Geburtsort</mat-label>
-    <input matInput placeholder="Geburtsort" formControlName="geburtsort" />
-  </mat-form-field>
-  <mat-form-field>
-    <mat-label>Unterrichtsvertrag?</mat-label>
-    <mat-select matInput formControlName="uvertrag">
-      <mat-option [value]="true">Ja</mat-option>
-      <mat-option [value]="false">Nein</mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field>
-    <mat-label>Vereinsmitglied?</mat-label>
-    <mat-select matInput formControlName="verein">
-      <mat-option [value]="true">Ja</mat-option>
-      <mat-option [value]="false">Nein</mat-option>
-    </mat-select>
-  </mat-form-field>
-  <button mat-raised-button color="primary" type="submit">Speichern</button>
+<form>
+    <mat-form-field>
+        <mat-label>Vorname</mat-label>
+        <input matInput placeholder="Vorname" [field]="form.vorname" />
+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Nachname</mat-label>
+        <input matInput placeholder="Nachname" [field]="form.nachname" />
+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Geschlecht</mat-label>
+        <input matInput placeholder="Geschlecht" [field]="form.geschlecht" />
+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Passnummer</mat-label>
+        <input matInput placeholder="Passnummer" [field]="form.passnummer" />
+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Geburtsdatum</mat-label>
+        <input matInput [matDatepicker]="picker" [field]="form.geburtsdatum" />
+        <mat-hint>DD.MM.YYYY</mat-hint>
+        <mat-datepicker-toggle
+            matIconSuffix
+            [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Geburtsort</mat-label>
+        <input matInput placeholder="Geburtsort" [field]="form.geburtsort" />
+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Vereinsmitglied?</mat-label>
+        <mat-select matInput [field]="form.verein">
+            <mat-option [value]="true">Ja</mat-option>
+            <mat-option [value]="false">Nein</mat-option>
+        </mat-select>
+    </mat-form-field>
+    <button mat-raised-button color="primary" (click)="submit()">
+        Speichern
+    </button>
 </form>

packages/frontend/src/app/components/edit-member-dialog/edit-member-dialog.component.ts

@@ -1,5 +1,5 @@
-import { Component, Inject } from '@angular/core';
-import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, signal } from '@angular/core';
+import { Field, form } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -9,13 +9,12 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import * as api from '../../generated-api/api';
-import { MemberDtoHelper } from '../../util/member.js';
+import { MemberDtoHelper, MemberEditForm } from '../../util/member.js';
 
 @Component({
     selector: 'app-edit-member-dialog',
     standalone: true,
     imports: [
-        ReactiveFormsModule,
         MatFormFieldModule,
         MatInputModule,
         MatCheckboxModule,
@@ -23,25 +22,28 @@ import { MemberDtoHelper } from '../../util/member.js';
         MatSelectModule,
         MatOptionModule,
         MatDatepickerModule,
+        Field,
     ],
     templateUrl: './edit-member-dialog.component.html',
     styleUrl: './edit-member-dialog.component.scss',
 })
 export class EditMemberDialogComponent {
-    form: FormGroup;
-    constructor(
-        @Inject(MAT_DIALOG_DATA) public data: { member: api.MemberDto },
-        private memberDtoHelper: MemberDtoHelper,
-        private dialogRef: MatDialogRef<EditMemberDialogComponent>,
-    ) {
-        this.form = this.memberDtoHelper.newMemberForm(data.member);
-    }
+    private readonly data = inject<{ member: api.MemberDto }>(MAT_DIALOG_DATA);
+    private readonly memberDtoHelper = inject(MemberDtoHelper);
+    private readonly dialogRef = inject(
+        MatDialogRef<EditMemberDialogComponent>,
+    );
 
-    submit() {
-        const member: api.MemberDto = this.memberDtoHelper.memberFromForm(
-            this.form,
+    private readonly memberModel = signal<MemberEditForm>(
+        this.memberDtoHelper.editMemberForm(this.data.member),
+    );
+    protected readonly form = form(this.memberModel);
+
+    protected async submit() {
+        const member: api.MemberDto = this.memberDtoHelper.memberFromSignal(
+            this.memberModel(),
         );
-        api.updateMember(member);
+        await api.updateMember(member);
         this.dialogRef.close();
     }
 }

packages/frontend/src/app/components/new-member/new-member.component.html

@@ -1,23 +1,23 @@
 <h1>Neues Mitglied anlegen</h1>
-<form [formGroup]="memberForm" (ngSubmit)="onSubmit()">
+<form>
     <mat-form-field>
         <mat-label>Vorname</mat-label>
-        <input matInput formControlName="vorname" />
+        <input matInput [field]="memberForm.vorname" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Nachname</mat-label>
-        <input matInput formControlName="nachname" />
+        <input matInput [field]="memberForm.nachname" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Geschlecht</mat-label>
-        <input matInput formControlName="geschlecht" />
+        <input matInput [field]="memberForm.geschlecht" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Geburtsdatum</mat-label>
         <input
             matInput
             [matDatepicker]="picker"
-            formControlName="geburtsdatum" />
+            [field]="memberForm.geburtsdatum" />
         <mat-hint>DD.MM.YYYY</mat-hint>
         <mat-datepicker-toggle
             matIconSuffix
@@ -26,18 +26,18 @@
     </mat-form-field>
     <mat-form-field>
         <mat-label>Geburtsort</mat-label>
-        <input matInput formControlName="geburtsort" />
+        <input matInput [field]="memberForm.geburtsort" />
     </mat-form-field>
-    <mat-checkbox [formControl]="memberForm.controls.verein"
-        >Verein Beigetreten?</mat-checkbox
-    >
+    <mat-checkbox [field]="memberForm.verein">Verein Beigetreten?</mat-checkbox>
     <mat-form-field>
         <mat-label>Passnummer (falls vorhanden)</mat-label>
-        <input matInput formControlName="passnummer" />
+        <input matInput [field]="memberForm.passnummer" />
     </mat-form-field>
     <mat-form-field>
         <mat-label>Kontakt</mat-label>
-        <input matInput formControlName="kontakt" />
+        <input matInput [field]="memberForm.kontakt" />
     </mat-form-field>
-    <button mat-flat-button color="primary" type="submit">Hinzufügen</button>
+    <button mat-flat-button color="primary" (click)="onSubmit()">
+        Hinzufügen
+    </button>
 </form>

packages/frontend/src/app/components/new-member/new-member.component.ts

@@ -1,5 +1,5 @@
-import { Component, inject } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, signal } from '@angular/core';
+import { Field, form } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -7,43 +7,49 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import * as api from '../../generated-api/api.js';
-import { MemberDtoHelper } from '../../util/member.js';
+import { MemberCreateForm, MemberDtoHelper } from '../../util/member.js';
 
 @Component({
     selector: 'app-new-member',
     standalone: true,
     providers: [],
     imports: [
-        ReactiveFormsModule,
         MatFormFieldModule,
         MatDatepickerModule,
         MatInputModule,
         MatCheckboxModule,
         MatButtonModule,
+        Field,
     ],
     templateUrl: './new-member.component.html',
     styleUrl: './new-member.component.scss',
 })
 export class NewMemberComponent {
     private readonly memberDtoHelper = inject(MemberDtoHelper);
-
-    constructor() {}
-    memberForm = this.memberDtoHelper.newMemberForm();
-    private dialogRef: MatDialogRef<NewMemberComponent> = inject(
+    private readonly dialogRef: MatDialogRef<NewMemberComponent> = inject(
         MatDialogRef<NewMemberComponent>,
     );
 
-    onSubmit() {
-        const newMember: api.MemberCreateArgs =
-            this.memberDtoHelper.newMemberFromForm(this.memberForm);
+    private readonly memberModel = signal<MemberCreateForm>(
+        this.memberDtoHelper.newMemberForm(),
+    );
+    protected readonly memberForm = form(this.memberModel);
 
-        api.createMember(newMember)
-            .then(() => {
-                console.log('Successfully added Member');
-                this.dialogRef.close();
-            })
-            .catch(e => {
-                console.error('Error adding member', e);
-            });
+    protected async onSubmit(): Promise<void> {
+        if (!this.memberForm().valid()) {
+            return;
+        }
+
+        const newMember = this.memberDtoHelper.newMemberFromSignal(
+            this.memberModel(),
+        );
+
+        try {
+            await api.createMember(newMember);
+            console.log('Successfully added Member');
+            this.dialogRef.close();
+        } catch (e) {
+            console.error('Error adding member', e);
+        }
     }
 }

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

@@ -9,10 +9,13 @@
 <div class="filter-container">
     <mat-form-field>
         <label>Filter:</label>
-        <input matInput [formControl]="filterControl" placeholder="Filter" />
+        <input
+            matInput
+            [field]="filterForm.filterString"
+            placeholder="Filter" />
     </mat-form-field>
     <div class="status-filters">
-        <mat-radio-group [formControl]="statusControl">
+        <mat-radio-group [field]="filterForm.status">
             <mat-radio-button [value]="MemberStatusFilter.ACTIVE"
                 >Aktiv</mat-radio-button
             >
@@ -30,20 +33,21 @@
             <input
                 matInput
                 [matDatepicker]="picker"
-                [formControl]="statusDateControl"
+                [field]="filterForm.statusDate"
                 placeholder="Aktiv bis" />
             <mat-hint>DD.MM.YYYY</mat-hint>
             <mat-datepicker-toggle
                 matIconSuffix
-                [disabled]="statusControl.value===MemberStatusFilter.ALL"
+                [disabled]="statusDateDisabled()"
                 [for]="picker"></mat-datepicker-toggle>
             <mat-datepicker #picker></mat-datepicker>
         </mat-form-field>
     </div>
-    <mat-checkbox [formControl]="onlyWithID">Nur mit Passnummer</mat-checkbox>
+    <mat-checkbox [field]="filterForm.onlyWithID"
+        >Nur mit Passnummer</mat-checkbox
+    >
 </div>
 <div class="table-container">
-    <!--TODO implement row count, selecting and alternating colors-->
     <table
         mat-table
         [dataSource]="dataSource"

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

@@ -1,6 +1,14 @@
-import { AfterViewInit, Component, viewChild } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import {
+    AfterViewInit,
+    ChangeDetectorRef,
+    Component,
+    computed,
+    effect,
+    inject,
+    signal,
+    viewChild,
+} from '@angular/core';
+import { Field, form } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -13,7 +21,6 @@ import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
-import { combineLatest, startWith } from 'rxjs';
 import * as api from '../../generated-api/api';
 import { DatePipePipe } from '../../pipes/date-pipe.pipe.js';
 import { NobreakHyphenPipe } from '../../pipes/nobreak-hyphen.pipe.js';
@@ -40,25 +47,34 @@ enum MemberStatusFilter {
         RouterModule,
         MatButtonModule,
         DatePipePipe,
-        ReactiveFormsModule,
         MatDatepickerModule,
         MatTooltipModule,
         MatCheckbox,
         MatRadioModule,
         MatSortModule,
+        Field,
     ],
     templateUrl: './view-members.html',
     styleUrl: './view-members.scss',
 })
 export class ViewMembers implements AfterViewInit {
-    protected MemberStatusFilter = MemberStatusFilter;
-    protected readonly filterControl = new FormControl<string>('');
-    protected readonly statusControl = new FormControl<MemberStatusFilter>(
-        MemberStatusFilter.ACTIVE,
+    private readonly changeDetectorRef = inject(ChangeDetectorRef);
+    
+    protected readonly MemberStatusFilter = MemberStatusFilter;
+    private readonly filterModel = signal({
+        filterString: '',
+        status: MemberStatusFilter.ACTIVE,
+        statusDate: null as Date | null,
+        onlyWithID: false,
+    });
+    protected readonly filterForm = form(this.filterModel);
+
+    protected readonly statusDateDisabled = computed(
+        () => this.filterForm.status().value() === MemberStatusFilter.ALL,
     );
-    protected readonly statusDateControl = new FormControl<Date | null>(null);
-    protected readonly onlyWithID = new FormControl<boolean>(false);
-    protected dataSource = new MatTableDataSource<api.MemberDto>();
+
+
+    protected readonly dataSource = new MatTableDataSource<api.MemberDto>();
     private readonly datePipe = new DatePipePipe();
 
     protected readonly displayedColumns: string[] = [
@@ -159,7 +175,7 @@ export class ViewMembers implements AfterViewInit {
             return originalFilterPredicate(
                 {
                     ...data,
-                    id: null,
+                    id: '',
                     geburtsdatum: this.datePipe.transform(
                         data.geburtsdatum ?? undefined,
                     ),
@@ -173,42 +189,11 @@ export class ViewMembers implements AfterViewInit {
                 filter,
             );
         };
-        combineLatest([
-            this.filterControl.valueChanges.pipe(
-                startWith(this.filterControl.value),
-            ),
-            this.statusControl.valueChanges.pipe(
-                startWith(this.statusControl.value),
-            ),
-            this.statusDateControl.valueChanges.pipe(
-                startWith(this.statusDateControl.value),
-            ),
-            this.onlyWithID.valueChanges.pipe(startWith(this.onlyWithID.value)),
-        ])
-            // .pipe(takeUntilDestroyed())
-            .subscribe(combined => {
-                const filter = combined[0];
-                const status = combined[1];
-                const date = combined[2];
-                const onlyWithID = combined[3];
-                this.dataSource.filter = `${filter?.replaceAll(';', '') ?? ''};${status};${date?.toISOString()};${onlyWithID}`;
-            });
 
-        this.statusControl.valueChanges
-            .pipe(takeUntilDestroyed())
-            .subscribe(value => {
-                if (
-                    value === MemberStatusFilter.ALL &&
-                    this.statusDateControl.enabled
-                ) {
-                    return this.statusDateControl.disable();
-                } else if (
-                    value !== MemberStatusFilter.ALL &&
-                    this.statusDateControl.disabled
-                ) {
-                    return this.statusDateControl.enable();
-                }
-            });
+        effect(() => {
+            const filters = this.filterModel();
+            this.dataSource.filter = `${filters.filterString?.replaceAll(';', '') ?? ''};${filters.status};${filters.statusDate?.toISOString()};${filters.onlyWithID}`;
+        });
 
         this.updateData();
     }
@@ -221,5 +206,6 @@ export class ViewMembers implements AfterViewInit {
     private async updateData(): Promise<void> {
         const members = await api.getMembers();
         this.dataSource.data = members;
+        this.changeDetectorRef.detectChanges();
     }
 }

packages/frontend/src/app/util/member.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormControl } from '@angular/forms';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
-import { Locale, parse } from 'date-fns';
+import { Locale } from 'date-fns';
 import { MemberCreateArgs, MemberDto } from '../generated-api/api';
 import { dateToLocal, dateToUTC } from '../pipes/date-pipe.pipe';
 
@@ -21,86 +21,78 @@ interface MemberForm {
     marker: FormControl<boolean | null | undefined>;
 }
 
+export interface MemberCreateForm extends Omit<
+    MemberCreateArgs,
+    'geburtsdatum'
+> {
+    geburtsdatum: Date | null;
+}
+
+export interface MemberEditForm extends Omit<
+    MemberDto,
+    'geburtsdatum' | 'kuendigungzum' | 'letztePruefung'
+> {
+    geburtsdatum: Date | null;
+    kuendigungzum: Date | null;
+    letztePruefung: Date | null;
+}
+
 @Injectable({
     providedIn: 'root',
 })
 export class MemberDtoHelper {
     constructor(@Inject(MAT_DATE_LOCALE) private locale: Locale) {}
-    public newMemberForm(member?: MemberDto): FormGroup<MemberForm> {
-        const geburtsdatum = member?.geburtsdatum;
-        let enDate: Date | null = null;
-        if (geburtsdatum) {
-            enDate = parse(geburtsdatum, 'dd.MM.yyyy', new Date(), {
-                //TODO get dd.MM.yyyy from MAT_DATE_LOCALE or LOCALE_ID
-                locale: this.locale,
-            });
-        }
-
-        return new FormGroup<MemberForm>({
-            id: new FormControl(member?.id),
-            vorname: new FormControl(member?.vorname),
-            nachname: new FormControl(member?.nachname),
-            geschlecht: new FormControl(member?.geschlecht),
-            geburtsdatum: new FormControl(
-                member?.geburtsdatum ? dateToUTC(member?.geburtsdatum) : null,
-            ),
-            geburtsort: new FormControl(member?.geburtsort),
-            passnummer: new FormControl(member?.passnummer),
-            verein: new FormControl(member?.verein),
-            kontakt: new FormControl(member?.kontakt),
-            graduierung: new FormControl(member?.graduierung),
-            kuendigungzum: new FormControl(
-                member?.kuendigungzum ? dateToUTC(member?.kuendigungzum) : null,
-            ),
-            letztePruefung: new FormControl(
-                member?.letztePruefung
-                    ? dateToUTC(member?.letztePruefung)
-                    : null,
-            ),
-            marker: new FormControl(false),
-        });
-    }
-
-    memberFromForm(form: FormGroup<MemberForm>): MemberDto {
+    public newMemberForm(): MemberCreateForm {
         return {
-            id: form.controls.id.value ?? null,
-            vorname: form.controls.vorname.value ?? null,
-            nachname: form.controls.nachname.value ?? null,
-            geschlecht: form.controls.geschlecht.value ?? null,
-            geburtsdatum: form.controls.geburtsdatum.value
-                ? dateToLocal(form.controls.geburtsdatum.value).toISOString()
-                : null,
-            geburtsort: form.controls.geburtsort.value ?? null,
-            passnummer: form.controls.passnummer.value ?? null,
-            verein: form.controls.verein.value ?? null,
-            kontakt: form.controls.kontakt.value ?? null,
-            graduierung: form.controls.graduierung?.value ?? null,
-            kuendigungzum: form.controls.kuendigungzum.value
-                ? dateToLocal(form.controls.kuendigungzum.value).toISOString()
-                : null,
-            letztePruefung: form.controls.letztePruefung.value
-                ? dateToLocal(form.controls.letztePruefung.value).toISOString()
-                : null,
-            marker: form.controls.marker.value ?? false,
+            vorname: '',
+            nachname: '',
+            geschlecht: '',
+            geburtsdatum: null,
+            geburtsort: '',
+            passnummer: '',
+            verein: false,
+            kontakt: '',
+            graduierung: '',
+            marker: false,
         };
     }
 
-    newMemberFromForm(form: FormGroup<MemberForm>): MemberCreateArgs {
+    public newMemberFromSignal(sig: MemberCreateForm): MemberCreateArgs {
         return {
-            vorname: form.controls.vorname.value ?? null,
-            nachname: form.controls.nachname.value ?? null,
-            geschlecht: form.controls.geschlecht.value ?? null,
-            geburtsdatum: form.controls.geburtsdatum.value
-                ? dateToLocal(form.controls.geburtsdatum.value).toISOString()
+            ...sig,
+            geburtsdatum: sig.geburtsdatum
+                ? dateToLocal(sig.geburtsdatum).toISOString()
+                : '',
+        };
+    }
+
+    public editMemberForm(member: MemberDto): MemberEditForm {
+        return {
+            ...member,
+            geburtsdatum: member.geburtsdatum
+                ? dateToUTC(member.geburtsdatum)
                 : null,
-            geburtsort: form.controls.geburtsort.value ?? null,
-            passnummer: form.controls.passnummer.value ?? null,
-            verein: form.controls.verein.value ?? null,
-            kontakt: form.controls.kontakt.value ?? null,
-            graduierung: form.controls.graduierung?.value ?? null,
-            kuendigungzum: null, //TODO not for new member
-            letztePruefung: null, //TODO not for new member
-            marker: form.controls.marker.value ?? false,
+            kuendigungzum: member.kuendigungzum
+                ? dateToUTC(member.kuendigungzum)
+                : null,
+            letztePruefung: member.letztePruefung
+                ? dateToUTC(member.letztePruefung)
+                : null,
+        };
+    }
+
+    public memberFromSignal(sig: MemberEditForm): MemberDto {
+        return {
+            ...sig,
+            geburtsdatum: sig.geburtsdatum
+                ? dateToLocal(sig.geburtsdatum).toISOString()
+                : '',
+            kuendigungzum: sig.kuendigungzum
+                ? dateToLocal(sig.kuendigungzum).toISOString()
+                : '',
+            letztePruefung: sig.letztePruefung
+                ? dateToLocal(sig.letztePruefung).toISOString()
+                : '',
         };
     }
 }