zoneless + fix signal form refresh

packages/api/src/services/membersService.ts

@@ -43,12 +43,14 @@ export class MembersService {
         createArgs: MemberCreateArgs,
         request: express.Request,
     ): Promise<MemberDto> {
-        // const x: MemberCreateArgs = {
+        const x = {
-        //     ...createArgs,
+            ...createArgs,
-        //     geburtsdatum: createArgs.geburtsdatum ?? null,
+            geburtsdatum: createArgs.geburtsdatum
-        // };
+                ? createArgs.geburtsdatum
+                : null,
+        };
         const newMember = await this.database.doRequest(
-            async prisma => await prisma.member.create({ data: createArgs }),
+            async prisma => await prisma.member.create({ data: x }),
             request,
         );
         return mapDbMemberToMember(newMember);

packages/frontend/angular.json

@@ -21,7 +21,6 @@
           "builder": "@angular/build:application",
           "options": {
             "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -75,7 +74,6 @@
         "test": {
           "builder": "@angular/build:karma",
           "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": [

packages/frontend/package.json

@@ -42,8 +42,7 @@
     "keycloak-angular": "^20.0.0",
     "keycloak-js": "^26.2.1",
     "rxjs": "~7.8.2",
-    "tslib": "^2.8.1",
+    "tslib": "^2.8.1"
-    "zone.js": "~0.15.1"
   },
   "devDependencies": {
     "@angular/build": "^21.0.4",

packages/frontend/src/app/app.config.ts

@@ -4,7 +4,8 @@ import {
     LOCALE_ID,
     provideAppInitializer,
     provideBrowserGlobalErrorListeners,
-    provideZoneChangeDetection,
+    provideCheckNoChangesConfig,
+    provideZonelessChangeDetection,
 } from '@angular/core';
 import {
     PreloadAllModules,
@@ -48,7 +49,7 @@ export const appConfig: ApplicationConfig = {
             withComponentInputBinding(),
         ),
         provideBrowserGlobalErrorListeners(),
-        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideZonelessChangeDetection(),
         provideKeycloak({
             config: keycloakConfig,
             initOptions: {
@@ -90,3 +91,9 @@ export const appConfig: ApplicationConfig = {
         }),
     ],
 };
+
+if (isDevMode()) {
+    appConfig.providers.push(
+        provideCheckNoChangesConfig({ exhaustive: true, interval: 100 }),
+    );
+}

packages/frontend/src/app/app.ts

@@ -1,4 +1,10 @@
-import { Component, effect, inject, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule, RouterOutlet } from '@angular/router';
 import { Authentication } from './services/authentication';
@@ -9,6 +15,7 @@ import { keycloakConfig } from './util/keycloak-config';
     imports: [RouterOutlet, MatButtonModule, RouterModule],
     templateUrl: './app.html',
     styleUrl: './app.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class App {
     protected readonly title = signal('frontend');

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

@@ -1,4 +1,4 @@
-<form>
+<form (submit)="submit(); $event.preventDefault()">
     <p>Name: {{ member.vorname }} {{ member.nachname }}</p>
     <p>Passnummer: {{ member.passnummer }}</p>
     <p>Geburtsdatum: {{ member.geburtsdatum | datePipe }}</p>
@@ -11,7 +11,5 @@
             [for]="picker"></mat-datepicker-toggle>
         <mat-datepicker #picker></mat-datepicker>
     </mat-form-field>
-    <button mat-raised-button color="primary" (click)="submit()">
+    <button mat-raised-button color="primary" type="submit">Speichern</button>
-        Speichern
-    </button>
 </form>

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

@@ -1,4 +1,9 @@
-import { Component, inject, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    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';
@@ -32,6 +37,7 @@ import { EditMemberDialogComponent } from '../edit-member-dialog/edit-member-dia
     ],
     templateUrl: './delete-member-dialog.component.html',
     styleUrl: './delete-member-dialog.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DeleteMemberDialogComponent {
     private readonly data = inject<{ member: api.MemberDto }>(MAT_DIALOG_DATA);
@@ -46,13 +52,13 @@ export class DeleteMemberDialogComponent {
     protected readonly form = form(this.deletionModel);
     protected readonly member = this.data.member;
 
-    protected async submit() {
+    protected submit() {
         const date = this.deletionModel().kuendigungzum;
-        await api.scheduleDeletion(
+        api.scheduleDeletion(
             this.member.id,
             date ? dateToLocal(date).toISOString() : '',
-        );
+        ).then(() => {
-
             this.dialogRef.close();
+        });
     }
 }

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

@@ -1,4 +1,4 @@
-<form>
+<form (submit)="submit(); $event.preventDefault()">
     <mat-form-field>
         <mat-label>Vorname</mat-label>
         <input matInput placeholder="Vorname" [field]="form.vorname" />
@@ -35,7 +35,5 @@
             <mat-option [value]="false">Nein</mat-option>
         </mat-select>
     </mat-form-field>
-    <button mat-raised-button color="primary" (click)="submit()">
+    <button mat-raised-button color="primary" type="submit">Speichern</button>
-        Speichern
-    </button>
 </form>

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

@@ -1,4 +1,9 @@
-import { Component, inject, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    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';
@@ -26,6 +31,7 @@ import { MemberDtoHelper, MemberEditForm } from '../../util/member.js';
     ],
     templateUrl: './edit-member-dialog.component.html',
     styleUrl: './edit-member-dialog.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EditMemberDialogComponent {
     private readonly data = inject<{ member: api.MemberDto }>(MAT_DIALOG_DATA);
@@ -39,11 +45,12 @@ export class EditMemberDialogComponent {
     );
     protected readonly form = form(this.memberModel);
 
-    protected async submit() {
+    protected submit() {
         const member: api.MemberDto = this.memberDtoHelper.memberFromSignal(
             this.memberModel(),
         );
-        await api.updateMember(member);
+        api.updateMember(member).then(() => {
             this.dialogRef.close();
+        });
     }
 }

packages/frontend/src/app/components/home/home.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
 import { RouterModule } from '@angular/router';
@@ -15,6 +15,7 @@ import { Claim } from '../../generated-api/api';
     ],
     templateUrl: './home.html',
     styleUrl: './home.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Home {
     protected Claim = Claim;

packages/frontend/src/app/components/login/login.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { Authentication } from '../../services/authentication';
 
@@ -7,15 +7,16 @@ import { Authentication } from '../../services/authentication';
     imports: [],
     templateUrl: './login.html',
     styleUrl: './login.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Login {
     private readonly authentication = inject(Authentication);
     private readonly router = inject(Router);
 
     public constructor() {
-    if(this.authentication.loggedIn()){
+        if (this.authentication.loggedIn()) {
             this.router.navigate(['/home']);
-    }else{
+        } else {
             this.authentication.login();
         }
     }

packages/frontend/src/app/components/missing-page/missing-page.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 import { Authentication } from '../../services/authentication';
@@ -8,6 +8,7 @@ import { Authentication } from '../../services/authentication';
     imports: [MatButtonModule, RouterModule],
     templateUrl: './missing-page.html',
     styleUrl: './missing-page.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MissingPage {
     protected readonly auth = inject(Authentication);

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

@@ -1,5 +1,5 @@
 <h1>Neues Mitglied anlegen</h1>
-<form>
+<form (submit)="onSubmit(); $event.preventDefault()">
     <mat-form-field>
         <mat-label>Vorname</mat-label>
         <input matInput [field]="memberForm.vorname" />
@@ -37,7 +37,5 @@
         <mat-label>Kontakt</mat-label>
         <input matInput [field]="memberForm.kontakt" />
     </mat-form-field>
-    <button mat-flat-button color="primary" (click)="onSubmit()">
+    <button mat-flat-button color="primary" type="submit">Hinzufügen</button>
-        Hinzufügen
-    </button>
 </form>

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

@@ -1,4 +1,9 @@
-import { Component, inject, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    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';
@@ -23,6 +28,7 @@ import { MemberCreateForm, MemberDtoHelper } from '../../util/member.js';
     ],
     templateUrl: './new-member.component.html',
     styleUrl: './new-member.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NewMemberComponent {
     private readonly memberDtoHelper = inject(MemberDtoHelper);
@@ -35,7 +41,7 @@ export class NewMemberComponent {
     );
     protected readonly memberForm = form(this.memberModel);
 
-    protected async onSubmit(): Promise<void> {
+    protected onSubmit() {
         if (!this.memberForm().valid()) {
             return;
         }
@@ -44,12 +50,13 @@ export class NewMemberComponent {
             this.memberModel(),
         );
 
-        try {
+        api.createMember(newMember)
-            await api.createMember(newMember);
+            .then(() => {
                 console.log('Successfully added Member');
                 this.dialogRef.close();
-        } catch (e) {
+            })
+            .catch(e => {
                 console.error('Error adding member', e);
-        }
+            });
     }
 }

packages/frontend/src/app/components/test/test.ts

@@ -1,5 +1,11 @@
 import { JsonPipe } from '@angular/common';
-import { Component, effect, inject, signal } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    inject,
+    signal,
+} from '@angular/core';
 import * as api from '../../generated-api/api';
 import { Authentication } from '../../services/authentication';
 
@@ -8,35 +14,39 @@ import { Authentication } from '../../services/authentication';
     imports: [JsonPipe],
     templateUrl: './test.html',
     styleUrl: './test.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Test {
     protected auth = inject(Authentication);
 
-  protected apiStatus = signal<string>("Waiting");
+    protected apiStatus = signal<string>('Waiting');
-  protected authTest = signal<string>("Waiting");
+    protected authTest = signal<string>('Waiting');
 
-  public constructor(){
+    public constructor() {
-    effect(()=>{
+        effect(() => {
-    const loggedIn=this.auth.loggedIn();
+            const loggedIn = this.auth.loggedIn();
-    if(!loggedIn){
+            if (!loggedIn) {
-      this.apiStatus.set("N/A - not logged in");
+                this.apiStatus.set('N/A - not logged in');
-      this.authTest.set("N/A - not logged in");
+                this.authTest.set('N/A - not logged in');
                 return;
             }
 
-    this.apiStatus.set("Waiting for API");
+            this.apiStatus.set('Waiting for API');
-      this.authTest.set("Waiting for API");
+            this.authTest.set('Waiting for API');
-    api.getOk().then((status) => {
+            api.getOk()
-      this.apiStatus.set("Ok");
+                .then(status => {
-    }).catch((e) => {
+                    this.apiStatus.set('Ok');
-      this.apiStatus.set("Error");
+                })
+                .catch(e => {
+                    this.apiStatus.set('Error');
                 });
-    api.getAuth().then((response) => {
+            api.getAuth()
-      this.authTest.set("Ok");
+                .then(response => {
-    }).catch((e) => {
+                    this.authTest.set('Ok');
+                })
+                .catch(e => {
                     this.authTest.set(e);
                 });
-  })
+        });
     }
-  
 }

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

@@ -1,5 +1,6 @@
 import {
     AfterViewInit,
+    ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
     computed,
@@ -56,6 +57,7 @@ enum MemberStatusFilter {
     ],
     templateUrl: './view-members.html',
     styleUrl: './view-members.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ViewMembers implements AfterViewInit {
     private readonly changeDetectorRef = inject(ChangeDetectorRef);
@@ -73,7 +75,6 @@ export class ViewMembers implements AfterViewInit {
         () => this.filterForm.status().value() === MemberStatusFilter.ALL,
     );
 
-
     protected readonly dataSource = new MatTableDataSource<api.MemberDto>();
     private readonly datePipe = new DatePipePipe();
 
@@ -206,6 +207,6 @@ export class ViewMembers implements AfterViewInit {
     private async updateData(): Promise<void> {
         const members = await api.getMembers();
         this.dataSource.data = members;
-        this.changeDetectorRef.detectChanges();
+        this.changeDetectorRef.markForCheck();
     }
 }

packages/frontend/src/index.html

@@ -6,6 +6,7 @@
         <title>1.TC Chemnitz Mitgliederdatenbank</title>
         <base href="/" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="preconnect" href="https://fonts.gstatic.com/" />
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
         <link
             href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap"

pnpm-lock.yaml

@@ -144,9 +144,6 @@ importers:
       tslib:
         specifier: ^2.8.1
         version: 2.8.1
-      zone.js:
-        specifier: ~0.15.1
-        version: 0.15.1
     devDependencies:
       '@angular/build':
         specifier: ^21.0.4
@@ -4814,7 +4811,7 @@ snapshots:
       '@babel/types': 7.28.5
       '@jridgewell/remapping': 2.3.5
       convert-source-map: 2.0.0
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -4834,7 +4831,7 @@ snapshots:
       '@babel/types': 7.28.5
       '@jridgewell/remapping': 2.3.5
       convert-source-map: 2.0.0
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -4921,7 +4918,7 @@ snapshots:
       '@babel/parser': 7.28.5
       '@babel/template': 7.27.2
       '@babel/types': 7.28.5
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
@@ -6395,7 +6392,7 @@ snapshots:
     dependencies:
       bytes: 3.1.2
       content-type: 1.0.5
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
       http-errors: 2.0.1
       iconv-lite: 0.7.0
       on-finished: 2.4.1
@@ -6670,6 +6667,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
   debug@4.4.3(supports-color@5.5.0):
     dependencies:
       ms: 2.1.3
@@ -7029,7 +7030,7 @@ snapshots:
       content-type: 1.0.5
       cookie: 0.7.2
       cookie-signature: 1.2.2
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
       depd: 2.0.0
       encodeurl: 2.0.0
       escape-html: 1.0.3
@@ -7118,7 +7119,7 @@ snapshots:
 
   finalhandler@2.1.1:
     dependencies:
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
       encodeurl: 2.0.0
       escape-html: 1.0.3
       on-finished: 2.4.1
@@ -7339,7 +7340,7 @@ snapshots:
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
@@ -7358,7 +7359,7 @@ snapshots:
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
@@ -7494,7 +7495,7 @@ snapshots:
 
   istanbul-lib-source-maps@4.0.1:
     dependencies:
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
       istanbul-lib-coverage: 3.2.2
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -7692,7 +7693,7 @@ snapshots:
   log4js@6.9.1:
     dependencies:
       date-format: 4.0.14
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
       flatted: 3.3.3
       rfdc: 1.4.1
       streamroller: 3.1.5
@@ -8471,7 +8472,7 @@ snapshots:
 
   router@2.2.0:
     dependencies:
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
       depd: 2.0.0
       is-promise: 4.0.0
       parseurl: 1.3.3
@@ -8551,7 +8552,7 @@ snapshots:
 
   send@1.2.0:
     dependencies:
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
       encodeurl: 2.0.0
       escape-html: 1.0.3
       etag: 1.8.1
@@ -8706,7 +8707,7 @@ snapshots:
   socks-proxy-agent@8.0.5:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
       socks: 2.8.7
     transitivePeerDependencies:
       - supports-color
@@ -8766,7 +8767,7 @@ snapshots:
   streamroller@3.1.5:
     dependencies:
       date-format: 4.0.14
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
       fs-extra: 8.1.0
     transitivePeerDependencies:
       - supports-color
@@ -8894,7 +8895,7 @@ snapshots:
   tuf-js@4.1.0:
     dependencies:
       '@tufjs/models': 4.1.0
-      debug: 4.4.3(supports-color@5.5.0)
+      debug: 4.4.3
       make-fetch-happen: 15.0.3
     transitivePeerDependencies:
       - supports-color
@@ -9118,4 +9119,5 @@ snapshots:
 
   zod@4.1.13: {}
 
-  zone.js@0.15.1: {}
+  zone.js@0.15.1:
+    optional: true