51 migrate playground app to signal based forms (#58)

Author: danielmurrmann

apps/playground/db.json

@@ -31,7 +31,7 @@
             "operator": {
                 "name": "Lufthansa",
                 "shortName": "LH",
-                "aircraftId": 1
+                "aircraftId": "1"
             },
             "price": {
                 "basePrice": 100,
@@ -55,19 +55,19 @@
             "operator": {
                 "name": "Lufthansa",
                 "shortName": "LH",
-                "aircraftId": 2
+                "aircraftId": "2"
             },
             "price": null
         }
     ],
     "aircrafts": [
         {
-            "id": 1,
+            "id": "1",
             "registration": "D-EYPA",
             "type": "PA28"
         },
         {
-            "id": 2,
+            "id": "2",
             "registration": "D-AATW",
             "type": "A220-100"
         }

apps/playground/server.js

@@ -46,7 +46,7 @@ server.get('/views/flightSearchVm', (req, res) => {
   }
 
   if (req.query.to) {
-    flights = flights.fill(f => f.connection.to === req.query.to);
+    flights = flights.filter(f => f.connection.to === req.query.to);
   }
 
   if (req.query.from === undefined && req.query.to === undefined) {
@@ -88,7 +88,7 @@ server.get('/views/flightCreateVm', (req, res) => {
       operator: {
         name: '',
         shortName: '',
-        aircraftId: 0
+        aircraftId: ''
       }
     },
     aircrafts: db.aircrafts

apps/playground/src/app/flight/flight-create/flight-create.component.html

@@ -6,10 +6,10 @@
 
 <div class="row">
     <div class="col">
-        <app-action-card #saveActionCard [disabled]="!saveEnabled()" (save)="onSaveFlight()">
-            <app-flight-connection-form [model]="flightConnection()" (modelChange)="flightConnection.set($event)" />
-            <app-flight-times-form [model]="flightTimes()" (modelChange)="flightTimes.set($event)" />
-            <app-flight-operator-form [aircrafts]="aircrafts()" [model]="flightOperator()" (modelChange)="flightOperator.set($event)" />
+        <app-action-card #saveActionCard [disabled]="!store.createFlightState.isAvailable()" (save)="onSaveFlight()">
+            <app-flight-connection-form [connection]="templateForm.connection" />
+            <app-flight-times-form [times]="templateForm.times" />
+            <app-flight-operator-form [aircrafts]="store.flightCreateVm.aircrafts()" [operator]="templateForm.operator" />
         </app-action-card>
     </div>
 </div>

apps/playground/src/app/flight/flight-create/flight-create.component.ts

@@ -5,6 +5,8 @@ import { FlightConnectionFormComponent } from '../shared/flight-connection-form/
 import { FlightOperatorFormComponent } from '../shared/flight-operator-form/flight-operator-form.component';
 import { FlightTimesFormComponent } from '../shared/flight-times-form/flight-times-form.component';
 import { FlightCreateStore } from './flight-create.store';
+import { flightConnectionSchema, flightOperatorSchema, flightTimesSchema } from '../flight.entities';
+import { apply, form } from '@angular/forms/signals';
 
 @Component({
     selector: 'app-flight-create',
@@ -14,16 +16,11 @@ import { FlightCreateStore } from './flight-create.store';
 export class FlightCreateComponent {
   location = inject(Location);
   store = inject(FlightCreateStore);
-  
-  viewModel = this.store.getFlightCreateVmAsPatchable();
-
-  saveEnabled = this.store.createFlightState.isAvailable;
-
-  aircrafts = this.viewModel.aircrafts;
-  
-  flightConnection = this.viewModel.template.connection;
-  flightTimes = this.viewModel.template.times;
-  flightOperator = this.viewModel.template.operator;
+  templateForm = form(this.store.localTemplate, template => {
+    apply(template.connection, flightConnectionSchema);
+    apply(template.times, flightTimesSchema);
+    apply(template.operator, flightOperatorSchema);
+  });
 
   async onSaveFlight() {
     await this.store.createFlight();

apps/playground/src/app/flight/flight-create/flight-create.store.ts

@@ -1,4 +1,4 @@
-import { withHypermediaAction, withLinkedHypermediaResource } from "@angular-architects/ngrx-hateoas";
+import { withHypermediaAction, withLinkedHypermediaResource, withWritableStateCopy } from "@angular-architects/ngrx-hateoas";
 import { signalStore } from "@ngrx/signals";
 import { FlightConnection, FlightTimes, FlightOperator, Aircraft, initialFlightConnection, initialFlightTimes, initialFlightOperator } from "../flight.entities";
 import { FlightSearchStore } from "../flight-search/flight-search.store";
@@ -25,5 +25,8 @@ export const initialFlightCreateVm: FlightCreateVm = {
 export const FlightCreateStore = signalStore(
   { providedIn: 'root' },
   withLinkedHypermediaResource('flightCreateVm', initialFlightCreateVm, () => inject(FlightSearchStore).flightSearchVm, 'flightCreateVm'),
-  withHypermediaAction('createFlight', store => store.flightCreateVm.template, 'create')
+  withWritableStateCopy(store => ({
+    localTemplate: store.flightCreateVm.template
+  })),
+  withHypermediaAction('createFlight', store => store.localTemplate, 'create')
 );

apps/playground/src/app/flight/flight-edit/flight-edit.component.html

@@ -4,37 +4,28 @@
     </div>
 </div>
 
-<pre>
-State
-{{ store.flightEditVm.flight.connection() | json }}
-WritableState
-{{ store.flightConnection() | json }}
-Local Flight Connection
-{{ localFlightConnection() | json }}    
-</pre>
-
 <div class="row">
     <div class="col">
         <app-action-card #connection
                          [disabled]="!store.updateFlightConnectionState.isAvailable()" 
                          (save)="onUpdateConnection()">
-            <app-flight-connection-form [(model)]="flightConnection" />
+            <app-flight-connection-form [connection]="flightForm.connection" />
         </app-action-card>
         <app-action-card #times
                          [disabled]="!store.updateFlightTimesState.isAvailable()" 
                          (save)="onUpdateTimes()">
-            <app-flight-times-form [(model)]="flightTimes" />
+            <app-flight-times-form [times]="flightForm.times" />
         </app-action-card>
         <app-action-card #operator
                          [disabled]="!store.updateFlightOperatorState.isAvailable()" 
                          (save)="onUpdateOperator()">
-            <app-flight-operator-form [aircrafts]="store.flightEditVm.aircrafts()" [(model)]="flightOperator" />
+            <app-flight-operator-form [aircrafts]="store.flightEditVm.aircrafts()" [operator]="flightForm.operator" />
         </app-action-card>
-        @if(flightPrice(); as flightPriceValue) {
+        @if(flightForm.price().value(); as flightPriceValue) {
             <app-action-card #price
                              [disabled]="!store.updateFlightPriceState.isAvailable()" 
                              (save)="onUpdatePrice()">
-                <app-flight-price-form [model]="flightPriceValue" (modelChange)="flightPrice.set($event)" />
+                <app-flight-price-form [price]="$any(flightForm.price)" />
             </app-action-card>
         }
     </div>

apps/playground/src/app/flight/flight-edit/flight-edit.component.ts

@@ -1,24 +1,21 @@
-import { Component, inject, linkedSignal, viewChild } from '@angular/core';
+import { Component, inject, viewChild } from '@angular/core';
 import { ActionCardComponent } from '../../shared/ui/action-card/action-card.component';
 import { FlightConnectionFormComponent } from '../shared/flight-connection-form/flight-connection-form.component';
 import { FlightOperatorFormComponent } from '../shared/flight-operator-form/flight-operator-form.component';
 import { FlightPriceFormComponent } from '../shared/flight-price-form/flight-price-form.component';
 import { FlightTimesFormComponent } from '../shared/flight-times-form/flight-times-form.component';
 import { FlightEditStore } from './flight-edit.store';
-import { JsonPipe } from "@angular/common";
+import { flightSchema } from '../flight.entities';
+import { form } from '@angular/forms/signals';
 
 @Component({
     selector: 'app-flight-edit',
-    imports: [ActionCardComponent, FlightConnectionFormComponent, FlightOperatorFormComponent, FlightTimesFormComponent, FlightPriceFormComponent, JsonPipe],
+    imports: [ActionCardComponent, FlightConnectionFormComponent, FlightOperatorFormComponent, FlightTimesFormComponent, FlightPriceFormComponent],
     templateUrl: './flight-edit.component.html'
 })
 export class FlightEditComponent {
   store = inject(FlightEditStore);
-  flightConnection = this.store.flightConnection;
-  localFlightConnection = linkedSignal(() => this.store.flightEditVm.flight.connection());
-  flightTimes = this.store.flightTimes;
-  flightOperator = this.store.flightOperator;
-  flightPrice = this.store.flightPrice;
+  flightForm = form(this.store.localFlight, flightSchema)
 
   _connectionCard = viewChild.required<ActionCardComponent>('connection');
   _timesCard = viewChild.required<ActionCardComponent>('times');
@@ -36,7 +33,7 @@ export class FlightEditComponent {
 
   onUpdateTimes() {
     try {
-      this.store.updateFlightConnection();
+      this.store.updateFlightTimes();
       this._timesCard().showSuccess();
     } catch {
       this._timesCard().showError();
@@ -45,7 +42,7 @@ export class FlightEditComponent {
 
   onUpdateOperator() {
     try {
-      this.store.updateFlightConnection();
+      this.store.updateFlightOperator();
       this._operatorCard().showSuccess();
     } catch {
       this._operatorCard().showError();
@@ -54,7 +51,7 @@ export class FlightEditComponent {
 
   onUpdatePrice() {
     try {
-      this.store.updateFlightConnection();
+      this.store.updateFlightPrice();
       this._priceCard()?.showSuccess();
     } catch {
       this._priceCard()?.showError();

apps/playground/src/app/flight/flight-edit/flight-edit.store.ts

@@ -16,15 +16,12 @@ export const FlightEditStore = signalStore(
   { providedIn: 'root' },
   withHypermediaResource('flightEditVm', initialFlightEditVm),
   withWritableStateCopy(store => ({
-    flightConnection: store.flightEditVm.flight.connection,
-    flightTimes: store.flightEditVm.flight.times,
-    flightOperator: store.flightEditVm.flight.operator,
-    flightPrice: store.flightEditVm.flight.price
+    localFlight: store.flightEditVm.flight
   })),
-  withHypermediaAction('updateFlightConnection', store => store.flightConnection, 'update'),
-  withHypermediaAction('updateFlightTimes', store => store.flightTimes, 'update'),
-  withHypermediaAction('updateFlightOperator', store => store.flightOperator, 'update'),
-  withHypermediaAction('updateFlightPrice', store => store.flightPrice, 'update')
+  withHypermediaAction('updateFlightConnection', store => store.localFlight.connection, 'update'),
+  withHypermediaAction('updateFlightTimes', store => store.localFlight.times, 'update'),
+  withHypermediaAction('updateFlightOperator', store => store.localFlight.operator, 'update'),
+  withHypermediaAction('updateFlightPrice', store => store.localFlight.price, 'update')
 );
 
 

apps/playground/src/app/flight/flight-search/flight-search.component.html

@@ -2,7 +2,7 @@
 <div class="row">
     <div class="col">
         <span class="lead">Flight Search</span>
-        @if(viewModel() | hasLink:'flightCreateVm') {
+        @if(store.flightSearchVm() | hasLink:'flightCreateVm') {
             <button class="btn btn-secondary float-end" [routerLink]="['/flight/create']">Create</button>
         }
     </div>
@@ -12,13 +12,13 @@
         <form #searchForm="ngForm">
             <div class="mb-3">
                 <label for="from" class="form-label">From</label>
-                <input class="form-control" id="from" name="from" [(ngModel)]="from" />
+                <input class="form-control" id="from" name="from" [(ngModel)]="store.flightSearchVmFromDelegate" />
             </div>
             <div class="mb-3">
                 <label for="to" class="form-label">To</label>
-                <input class="form-control" id="to" name="to" [(ngModel)]="to" />
+                <input class="form-control" id="to" name="to" [(ngModel)]="store.flightSearchVmToDelegate" />
             </div>
-            @if(viewModel() | hasLink:'flightSearchVm') {
+            @if(store.flightSearchVm() | hasLink:'flightSearchVm') {
                 <button 
                 [disabled]="!searchForm.valid" 
                 class="btn btn-primary"
@@ -36,14 +36,14 @@
     <span class="lead pb-3">Search Results</span>
 </div>
 
-@if(!viewModel.flights()) {
+@if(!store.flightSearchVm.flights()) {
     <div class="row">
         <p>Search for flights to show something here!</p>
     </div>
 } @else {
     <div class="row row-cols-1 row-cols-md-2 g-4">
 
-        @for(flight of viewModel.flights(); track flight.id) {
+        @for(flight of store.flightSearchVm.flights(); track flight.id) {
             <div class="col">
                 <app-flight-summary-card [flight]="flight" (delete)="onDelete(flight.id)">
                     @if(flight | hasLink:'flightEditVm') {

apps/playground/src/app/flight/flight-search/flight-search.component.ts

@@ -14,13 +14,9 @@ export class FlightSearchComponent {
   hateoasService = inject(HateoasService);
   router = inject(Router);
   store = inject(FlightSearchStore);
-  viewModel = this.store.getFlightSearchVmAsPatchable();
-  from = this.viewModel['from'];
-  to = this.viewModel['to'];
 
   onSearch() {
-    let url = this.hateoasService.getLink(this.viewModel(), 'flightSearchVm')?.href;
-    url = url + '?from=' + (this.from() ?? '') + '&to=' + (this.to() ?? '');
+    const url = this.hateoasService.getUrl(this.store.flightSearchVm(), 'flightSearchVm', { from: this.store.flightSearchVm.from() ?? '', to: this.store.flightSearchVm.to() ?? '' });
     this.router.navigate(['/flight/search', url]);
   }