Consolidated commit message to v22 signals

overlord/src/app/product/product-detail/product-detail-datasource.ts

@@ -1,16 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable } from 'rxjs';
-
-import { StockKeepingUnit } from '../../core/product';
-
-export class ProductDetailDatasource extends DataSource<StockKeepingUnit> {
-  constructor(private data: Observable<StockKeepingUnit[]>) {
-    super();
-  }
-
-  connect(): Observable<StockKeepingUnit[]> {
-    return this.data;
-  }
-
-  disconnect() {}
-}

overlord/src/app/product/product-detail/product-detail-dialog.component.html

@@ -1,26 +1,26 @@
 <h1 mat-dialog-title>Edit Product SKU</h1>
 <div mat-dialog-content>
-  <form [formGroup]="form">
+  <form [formRoot]="form">
     <div class="flex flex-row flex-wrap justify-around content-start items-start sm:max-lg:flex-col">
       <mat-form-field class="flex-auto">
         <mat-label>Units</mat-label>
-        <input matInput formControlName="units" />
+        <input matInput [formField]="form.units" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Fraction</mat-label>
-        <input matInput type="number" formControlName="fraction" />
+        <input matInput type="number" [formField]="form.fraction" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Yield</mat-label>
-        <input matInput type="number" formControlName="productYield" />
+        <input matInput type="number" [formField]="form.productYield" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>{{ data.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
-        <input matInput type="number" formControlName="costPrice" />
+        <input matInput type="number" [formField]="form.costPrice" />
       </mat-form-field>
       <mat-form-field class="flex-auto" [hidden]="!data.isSold">
         <mat-label>Sale Price</mat-label>
-        <input matInput type="number" formControlName="salePrice" />
+        <input matInput type="number" [formField]="form.salePrice" />
       </mat-form-field>
     </div>
   </form>

overlord/src/app/product/product-detail/product-detail-dialog.component.ts

@@ -1,6 +1,6 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { Component, inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, linkedSignal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -8,20 +8,30 @@ import { MatInputModule } from '@angular/material/input';
 
 import { StockKeepingUnit } from '../../core/product';
 
+export interface ProductDetailDialogFormData {
+  id: string | null;
+  units: string;
+  fraction: string;
+  productYield: string;
+  costPrice: string;
+  salePrice: string;
+}
+
 @Component({
-  selector: 'app-journal-dialog',
+  selector: 'app-product-detail-dialog',
   templateUrl: './product-detail-dialog.component.html',
   styleUrls: ['./product-detail-dialog.component.css'],
   imports: [
     MatDialogModule,
     CdkScrollableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatButtonModule,
   ],
 })
-export class ProductDetailDialogComponent implements OnInit {
+export class ProductDetailDialogComponent {
   dialogRef = inject<MatDialogRef<ProductDetailDialogComponent>>(MatDialogRef);
   data = inject<{
     item: StockKeepingUnit;
@@ -29,52 +39,46 @@ export class ProductDetailDialogComponent implements OnInit {
     isPurchased: boolean;
   }>(MAT_DIALOG_DATA);
 
-  form: FormGroup<{
-    units: FormControl<string>;
-    fraction: FormControl<number>;
-    productYield: FormControl<number>;
-    costPrice: FormControl<number>;
-    salePrice: FormControl<number>;
-  }>;
+  formModel = linkedSignal<
+    {
+      item: StockKeepingUnit;
+      isSold: boolean;
+      isPurchased: boolean;
+    },
+    ProductDetailDialogFormData
+  >({
+    source: () => this.data,
+    computation: (data): ProductDetailDialogFormData => ({
+      id: data.item.id,
+      units: data.item.units ?? '',
+      fraction: `${data.item.fraction ?? 1}`,
+      productYield: `${data.item.productYield ?? 1}`,
+      costPrice: `${data.item.costPrice ?? 0}`,
+      salePrice: `${data.item.salePrice ?? 0}`,
+    }),
+  });
 
-  constructor() {
-    this.form = new FormGroup({
-      units: new FormControl('', { nonNullable: true }),
-      fraction: new FormControl(1, { nonNullable: true }),
-      productYield: new FormControl(1, { nonNullable: true }),
-      costPrice: new FormControl(0, { nonNullable: true }),
-      salePrice: new FormControl(0, { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.form.setValue({
-      units: this.data.item.units,
-      fraction: this.data.item.fraction,
-      productYield: this.data.item.productYield,
-      costPrice: this.data.item.costPrice,
-      salePrice: this.data.item.salePrice,
-    });
-  }
+  form = form(this.formModel);
 
   accept(): void {
-    const formValue = this.form.value;
-    const fraction = formValue.fraction ?? 0;
+    const formValue = this.form().value();
+    const fraction = Number(formValue.fraction ?? 0);
     if (fraction < 1) {
       return;
     }
-    const productYield = formValue.productYield ?? 0;
+    const productYield = Number(formValue.productYield ?? 0);
     if (productYield < 0 || productYield > 1) {
       return;
     }
-    const costPrice = formValue.costPrice ?? 0;
+    const costPrice = Number(formValue.costPrice ?? 0);
     if (costPrice < 0) {
       return;
     }
-    const salePrice = formValue.salePrice ?? 0;
+    const salePrice = Number(formValue.salePrice ?? 0);
     if (salePrice < 0) {
       return;
     }
+    this.data.item.id = formValue.id;
     this.data.item.units = formValue.units ?? '';
     this.data.item.fraction = fraction;
     this.data.item.productYield = productYield;

overlord/src/app/product/product-detail/product-detail.component.html

@@ -1,37 +1,37 @@
 <h2>Product</h2>
-<form [formGroup]="form" class="flex-col wrapped">
+<form class="flex-col wrapped" [formRoot]="form">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Handle</mat-label>
-      <input matInput formControlName="handle" />
+      <input matInput [formField]="form.handle" />
     </mat-form-field>
   </div>
   <div class="row-container">
     <mat-form-field class="flex-auto basis-4-5">
       <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" />
+      <input matInput #nameElement [formField]="form.name" />
     </mat-form-field>
     <mat-form-field class="flex-auto basis-1-5">
       <mat-label>Fraction Units</mat-label>
-      <input matInput formControlName="fractionUnits" />
+      <input matInput [formField]="form.fractionUnits" />
     </mat-form-field>
   </div>
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Description</mat-label>
-      <input matInput #nameElement formControlName="description" />
+      <input matInput [formField]="form.description" />
     </mat-form-field>
   </div>
   <div class="row-container">
-    <mat-checkbox formControlName="isPurchased" class="flex-auto">Is Purchased?</mat-checkbox>
-    <mat-checkbox formControlName="isSold" class="flex-auto">Is Sold?</mat-checkbox>
-    <mat-checkbox formControlName="isActive" class="flex-auto">Is Active?</mat-checkbox>
+    <mat-checkbox [formField]="form.isPurchased" class="flex-auto">Is Purchased?</mat-checkbox>
+    <mat-checkbox [formField]="form.isSold" class="flex-auto">Is Sold?</mat-checkbox>
+    <mat-checkbox [formField]="form.isActive" class="flex-auto">Is Active?</mat-checkbox>
   </div>
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Product Type</mat-label>
-      <mat-select formControlName="productGroup" (selectionChange)="updatePG($event.value)">
-        @for (pg of productGroups; track pg) {
+      <mat-select [formField]="form.productGroup">
+        @for (pg of productGroups(); track pg) {
           <mat-option [value]="pg.id">
             {{ pg.name }}
           </mat-option>
@@ -42,148 +42,154 @@
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Allergen</mat-label>
-      <input matInput #nameElement formControlName="allergen" />
+      <input matInput [formField]="form.allergen" />
     </mat-form-field>
   </div>
-  @if (item.productGroup?.nutritional ?? false) {
+  @if (selectedProductGroup()?.nutritional ?? false) {
     <h2>Nutritional Information</h2>
     <div class="nutrition-grid">
       <mat-form-field class="flex-auto">
         <mat-label>Protein</mat-label>
-        <input matInput formControlName="protein" />
+        <input matInput type="number" [formField]="form.protein" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Carbohydrate</mat-label>
-        <input matInput formControlName="carbohydrate" />
+        <input matInput type="number" [formField]="form.carbohydrate" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Total Sugar</mat-label>
-        <input matInput formControlName="totalSugar" />
+        <input matInput type="number" [formField]="form.totalSugar" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Added Sugar</mat-label>
-        <input matInput formControlName="addedSugar" />
+        <input matInput type="number" [formField]="form.addedSugar" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Total Fat</mat-label>
-        <input matInput formControlName="totalFat" />
+        <input matInput type="number" [formField]="form.totalFat" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Saturated Fat</mat-label>
-        <input matInput formControlName="saturatedFat" />
+        <input matInput type="number" [formField]="form.saturatedFat" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Trans Fat</mat-label>
-        <input matInput formControlName="transFat" />
+        <input matInput type="number" [formField]="form.transFat" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Cholestrol</mat-label>
-        <input matInput formControlName="cholestrol" />
+        <input matInput type="number" [formField]="form.cholestrol" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Sodium</mat-label>
-        <input matInput formControlName="sodium" />
+        <input matInput type="number" [formField]="form.sodium" />
       </mat-form-field>
     </div>
   }
-  @if (item.productGroup?.iceCream ?? false) {
+  @if (selectedProductGroup()?.iceCream ?? false) {
     <h2>Ice Cream Information</h2>
     <div class="row-container">
       <mat-form-field class="flex-auto">
         <mat-label>MSNF</mat-label>
-        <input matInput formControlName="msnf" />
+        <input matInput type="number" [formField]="form.msnf" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Other Solids</mat-label>
-        <input matInput formControlName="otherSolids" />
+        <input matInput type="number" [formField]="form.otherSolids" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Total Solids</mat-label>
-        <input matInput formControlName="totalSolids" />
+        <input matInput type="number" [formField]="form.totalSolids" />
       </mat-form-field>
       <mat-form-field class="flex-auto">
         <mat-label>Water</mat-label>
-        <input matInput formControlName="water" />
+        <input matInput type="number" [formField]="form.water" />
       </mat-form-field>
     </div>
   }
   <h2>Stock Keeping Units</h2>
-  <div formGroupName="addRow" class="nutrition-grid">
+  <div class="nutrition-grid">
     <mat-form-field class="flex-auto">
       <mat-label>Units</mat-label>
-      <input matInput formControlName="units" />
+      <input matInput [formField]="form.addRow.units" />
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Fraction</mat-label>
-      <input matInput type="number" formControlName="fraction" />
+      <input matInput type="number" [formField]="form.addRow.fraction" />
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Yield</mat-label>
-      <input matInput type="number" formControlName="productYield" />
+      <input matInput type="number" [formField]="form.addRow.productYield" />
     </mat-form-field>
     <mat-form-field class="flex-auto">
-      <mat-label>{{ item.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
-      <input matInput type="number" formControlName="costPrice" />
+      <mat-label>{{ form.isPurchased().value() ? 'Purchase Price' : 'Cost Price' }}</mat-label>
+      <input matInput type="number" [formField]="form.addRow.costPrice" />
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Sale Price</mat-label>
-      <input matInput type="number" formControlName="salePrice" />
+      <input matInput type="number" [formField]="form.addRow.salePrice" />
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="addRow()" class="flex-auto">Add</button>
   </div>
 </form>
 <div class="row-container wrapped">
-  <mat-table [dataSource]="dataSource" aria-label="Elements" class="flex-auto">
-    <!-- Units Column -->
-    <ng-container matColumnDef="units">
-      <mat-header-cell *matHeaderCellDef>Units</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.units }}</mat-cell>
-    </ng-container>
+  @if (itemResource.isLoading()) {
+    <app-skeleton-loader type="table" [count]="1" />
+  } @else if (itemResource.error()) {
+    <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+  } @else {
+    <mat-table [dataSource]="form.skus().value() ?? []" class="flex-auto">
+      <!-- Units Column -->
+      <ng-container matColumnDef="units">
+        <mat-header-cell *matHeaderCellDef>Units</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.units }}</mat-cell>
+      </ng-container>
 
-    <!-- Fraction Column -->
-    <ng-container matColumnDef="fraction">
-      <mat-header-cell *matHeaderCellDef>Fraction</mat-header-cell>
-      <mat-cell *matCellDef="let row">{{ row.fraction }}</mat-cell>
-    </ng-container>
+      <!-- Fraction Column -->
+      <ng-container matColumnDef="fraction">
+        <mat-header-cell *matHeaderCellDef>Fraction</mat-header-cell>
+        <mat-cell *matCellDef="let row">{{ row.fraction }}</mat-cell>
+      </ng-container>
 
-    <!-- Yield Column -->
-    <ng-container matColumnDef="yield">
-      <mat-header-cell *matHeaderCellDef class="right">Yield</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.productYield }}</mat-cell>
-    </ng-container>
+      <!-- Yield Column -->
+      <ng-container matColumnDef="yield">
+        <mat-header-cell *matHeaderCellDef class="right">Yield</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.productYield }}</mat-cell>
+      </ng-container>
 
-    <!-- Cost Price Column -->
-    <ng-container matColumnDef="costPrice">
-      <mat-header-cell *matHeaderCellDef class="right">Cost Price</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.costPrice | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Cost Price Column -->
+      <ng-container matColumnDef="costPrice">
+        <mat-header-cell *matHeaderCellDef class="right">Cost Price</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.costPrice | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Sale Price Column -->
-    <ng-container matColumnDef="salePrice">
-      <mat-header-cell *matHeaderCellDef class="right">Sale Price</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="right">{{ row.salePrice | currency: 'INR' }}</mat-cell>
-    </ng-container>
+      <!-- Sale Price Column -->
+      <ng-container matColumnDef="salePrice">
+        <mat-header-cell *matHeaderCellDef class="right">Sale Price</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="right">{{ row.salePrice | currency: 'INR' }}</mat-cell>
+      </ng-container>
 
-    <!-- Action Column -->
-    <ng-container matColumnDef="action">
-      <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
-      <mat-cell *matCellDef="let row" class="center">
-        <button mat-icon-button tabindex="-1" (click)="editRow(row)">
-          <mat-icon>edit</mat-icon>
-        </button>
-        <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
+      <!-- Action Column -->
+      <ng-container matColumnDef="action">
+        <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="center">
+          <button mat-icon-button tabindex="-1" (click)="editRow(row)">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </mat-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
+  }
 </div>
 <div class="row-container">
   <button mat-raised-button color="primary" (click)="save()" class="">Save</button>
-  @if (!!item.id) {
+  @if (id()) {
     <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
   }
 </div>

overlord/src/app/product/product-detail/product-detail.component.ts

@@ -1,6 +1,6 @@
 import { CurrencyPipe } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { afterNextRender, Component, computed, inject, input, linkedSignal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -11,22 +11,65 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
-import { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject } from 'rxjs';
+import { Router } from '@angular/router';
 
 import { Product, StockKeepingUnit } from '../../core/product';
-import { ProductGroup } from '../../core/product-group';
+import { ProductGroupService } from '../../product-group/product-group.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { ProductService } from '../product.service';
-import { ProductDetailDatasource } from './product-detail-datasource';
 import { ProductDetailDialogComponent } from './product-detail-dialog.component';
 
+export interface ProductSkuFormData {
+  id: string | null;
+  units: string;
+  fraction: number;
+  productYield: number;
+  costPrice: number;
+  salePrice: number;
+}
+
+export interface ProductDetailFormModel {
+  handle: string;
+  name: string;
+  description: string;
+  fractionUnits: string;
+  addRow: {
+    units: string;
+    fraction: string;
+    productYield: string;
+    costPrice: string;
+    salePrice: string;
+  };
+  skus: ProductSkuFormData[];
+  isPurchased: boolean;
+  isSold: boolean;
+  isActive: boolean;
+  productGroup: string;
+  allergen: string;
+  protein: number;
+  carbohydrate: number;
+  totalSugar: number;
+  addedSugar: number;
+  totalFat: number;
+  saturatedFat: number;
+  transFat: number;
+  cholestrol: number;
+  sodium: number;
+  msnf: number;
+  otherSolids: number;
+  totalSolids: number;
+  water: number;
+}
+
 @Component({
   selector: 'app-product-detail',
   templateUrl: './product-detail.component.html',
   styleUrls: ['./product-detail.component.css'],
   imports: [
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatCheckboxModule,
@@ -36,112 +79,30 @@ import { ProductDetailDialogComponent } from './product-detail-dialog.component'
     MatTableModule,
     MatIconModule,
     CurrencyPipe,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class ProductDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class ProductDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private ser = inject(ProductService);
+  private pgSer = inject(ProductGroupService);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    handle: FormControl<string>;
-    name: FormControl<string | null>;
-    description: FormControl<string | null>;
-    fractionUnits: FormControl<string | null>;
-    addRow: FormGroup<{
-      units: FormControl<string | null>;
-      fraction: FormControl<string | null>;
-      productYield: FormControl<string | null>;
-      costPrice: FormControl<string | null>;
-      salePrice: FormControl<string | null>;
-    }>;
-    isPurchased: FormControl<boolean>;
-    isSold: FormControl<boolean>;
-    isActive: FormControl<boolean>;
-    productGroup: FormControl<string | null>;
+  itemResource = this.ser.get(this.id);
+  item = linkedSignal(() => this.itemResource.value() ?? new Product());
 
-    allergen: FormControl<string | null>;
-    protein: FormControl<number>;
-    carbohydrate: FormControl<number>;
-    totalSugar: FormControl<number>;
-    addedSugar: FormControl<number>;
-    totalFat: FormControl<number>;
-    saturatedFat: FormControl<number>;
-    transFat: FormControl<number>;
-    cholestrol: FormControl<number>;
-    sodium: FormControl<number>;
-
-    msnf: FormControl<number>;
-    otherSolids: FormControl<number>;
-    totalSolids: FormControl<number>;
-    water: FormControl<number>;
-  }>;
-
-  productGroups: ProductGroup[] = [];
-  public skus = new BehaviorSubject<StockKeepingUnit[]>([]);
-  dataSource: ProductDetailDatasource = new ProductDetailDatasource(this.skus);
-  item: Product = new Product();
-
-  displayedColumns = ['units', 'fraction', 'yield', 'costPrice', 'salePrice', 'action'];
-
-  constructor() {
-    this.form = new FormGroup({
-      handle: new FormControl<string>({ value: '', disabled: true }, { nonNullable: true }),
-      name: new FormControl<string | null>(null),
-      description: new FormControl<string | null>(null),
-      fractionUnits: new FormControl<string | null>(null),
-      addRow: new FormGroup({
-        units: new FormControl<string | null>(null),
-        fraction: new FormControl<string | null>(null),
-        productYield: new FormControl<string | null>(null),
-        costPrice: new FormControl<string | null>(null),
-        salePrice: new FormControl<string | null>(null),
-      }),
-      isPurchased: new FormControl<boolean>(true, { nonNullable: true }),
-      isSold: new FormControl<boolean>(true, { nonNullable: true }),
-      isActive: new FormControl<boolean>(true, { nonNullable: true }),
-      productGroup: new FormControl<string | null>(null),
-
-      allergen: new FormControl<string | null>(null),
-      protein: new FormControl<number>(0, { nonNullable: true }),
-      carbohydrate: new FormControl<number>(0, { nonNullable: true }),
-      totalSugar: new FormControl<number>(0, { nonNullable: true }),
-      addedSugar: new FormControl<number>(0, { nonNullable: true }),
-      totalFat: new FormControl<number>(0, { nonNullable: true }),
-      saturatedFat: new FormControl<number>(0, { nonNullable: true }),
-      transFat: new FormControl<number>(0, { nonNullable: true }),
-      cholestrol: new FormControl<number>(0, { nonNullable: true }),
-      sodium: new FormControl<number>(0, { nonNullable: true }),
-
-      msnf: new FormControl<number>(0, { nonNullable: true }),
-      otherSolids: new FormControl<number>(0, { nonNullable: true }),
-      totalSolids: new FormControl<number>(0, { nonNullable: true }),
-      water: new FormControl<number>(0, { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: Product; productGroups: ProductGroup[] };
-
-      this.productGroups = data.productGroups;
-      this.showItem(data.item);
-    });
-    this.dataSource = new ProductDetailDatasource(this.skus);
-    this.skus.next(this.item.skus);
-  }
-
-  showItem(item: Product) {
-    item.productGroup = this.productGroups.find((x) => x.id === item.productGroup?.id);
-    this.item = item;
-    this.form.setValue({
-      handle: this.item.handle || '',
-      name: this.item.name,
-      description: this.item.description || '',
-      fractionUnits: this.item.fractionUnits ?? '',
+  formModel = linkedSignal<Product, ProductDetailFormModel>({
+    source: this.item,
+    computation: (itemVal): ProductDetailFormModel => ({
+      handle: itemVal.handle || '',
+      name: itemVal.name || '',
+      description: itemVal.description || '',
+      fractionUnits: itemVal.fractionUnits ?? '',
       addRow: {
         units: '',
         fraction: '',
@@ -149,42 +110,58 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
         costPrice: '',
         salePrice: '',
       },
-      isPurchased: this.item.isPurchased,
-      isSold: this.item.isSold,
-      isActive: this.item.isActive,
-      productGroup: this.item.productGroup ? (this.item.productGroup.id ?? '') : '',
+      skus: (itemVal.skus || []).map((s) => ({
+        id: s.id,
+        units: s.units,
+        fraction: s.fraction,
+        productYield: s.productYield,
+        costPrice: s.costPrice,
+        salePrice: s.salePrice,
+      })),
+      isPurchased: itemVal.isPurchased ?? true,
+      isSold: itemVal.isSold ?? true,
+      isActive: itemVal.isActive ?? true,
+      productGroup: itemVal.productGroup ? (itemVal.productGroup.id ?? '') : '',
 
-      allergen: this.item.allergen ?? '',
-      protein: this.item.protein,
-      carbohydrate: this.item.carbohydrate,
-      totalSugar: this.item.totalSugar,
-      addedSugar: this.item.addedSugar,
-      totalFat: this.item.totalFat,
-      saturatedFat: this.item.saturatedFat,
-      transFat: this.item.transFat,
-      cholestrol: this.item.cholestrol,
-      sodium: this.item.sodium,
+      allergen: itemVal.allergen ?? '',
+      protein: itemVal.protein || 0,
+      carbohydrate: itemVal.carbohydrate || 0,
+      totalSugar: itemVal.totalSugar || 0,
+      addedSugar: itemVal.addedSugar || 0,
+      totalFat: itemVal.totalFat || 0,
+      saturatedFat: itemVal.saturatedFat || 0,
+      transFat: itemVal.transFat || 0,
+      cholestrol: itemVal.cholestrol || 0,
+      sodium: itemVal.sodium || 0,
 
-      msnf: this.item.msnf,
-      otherSolids: this.item.otherSolids,
-      totalSolids: this.item.totalSolids,
-      water: this.item.water,
+      msnf: itemVal.msnf || 0,
+      otherSolids: itemVal.otherSolids || 0,
+      totalSolids: itemVal.totalSolids || 0,
+      water: itemVal.water || 0,
+    }),
+  });
+
+  form = form(this.formModel);
+
+  productGroupsResource = this.pgSer.list();
+  productGroups = computed(() => this.productGroupsResource.value() ?? []);
+
+  selectedProductGroup = computed(() => {
+    const pgId = this.form.productGroup().value();
+    return this.productGroups().find((x) => x.id === pgId);
+  });
+
+  displayedColumns = ['units', 'fraction', 'yield', 'costPrice', 'salePrice', 'action'];
+
+  constructor() {
+    afterNextRender(() => {
+      this.form.name().focusBoundControl();
     });
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
-  updatePG(id: string) {
-    this.item.productGroup = this.productGroups.find((x) => x.id == id);
-  }
-
   addRow() {
-    const formValue = this.form.value.addRow;
-    if (formValue === undefined) {
+    const formValue = this.form().value().addRow;
+    if (!formValue) {
       return;
     }
     const fraction = Number(formValue.fraction);
@@ -207,47 +184,69 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
       this.snackBar.open('Sale Price has to be >= 0', 'Danger');
       return;
     }
-    this.item.skus.push(
-      new StockKeepingUnit({
-        units: formValue.units ?? '',
-        fraction,
-        productYield,
-        costPrice,
-        salePrice,
-      }),
-    );
-    this.skus.next(this.item.skus);
+    const newSku: ProductSkuFormData = {
+      id: null,
+      units: formValue.units ?? '',
+      fraction,
+      productYield,
+      costPrice,
+      salePrice,
+    };
+    this.formModel.update((m) => ({
+      ...m,
+      skus: [...m.skus, newSku],
+    }));
     this.resetAddRow();
   }
 
   resetAddRow() {
-    this.form.controls.addRow.reset();
+    this.formModel.update((m) => ({
+      ...m,
+      addRow: { units: '', fraction: '', productYield: '', costPrice: '', salePrice: '' },
+    }));
   }
 
-  editRow(row: StockKeepingUnit) {
+  editRow(row: ProductSkuFormData) {
     const dialogRef = this.dialog.open(ProductDetailDialogComponent, {
       width: '750px',
       data: {
-        item: { ...row },
-        isSold: this.item.isSold,
-        isPurchased: this.item.isPurchased,
+        item: new StockKeepingUnit({ ...row }),
+        isSold: this.form.isSold().value(),
+        isPurchased: this.form.isPurchased().value(),
       },
     });
 
     dialogRef.afterClosed().subscribe((result: boolean | StockKeepingUnit) => {
-      if (!result) {
+      if (!result || typeof result === 'boolean') {
         return;
       }
-      const j = result as StockKeepingUnit;
-      Object.assign(row, j);
-      this.skus.next(this.item.skus);
+      const j = result;
+      const updatedSkus = this.formModel().skus.map((item) =>
+        item === row
+          ? {
+              id: j.id,
+              units: j.units,
+              fraction: j.fraction,
+              productYield: j.productYield,
+              costPrice: j.costPrice,
+              salePrice: j.salePrice,
+            }
+          : item,
+      );
+      this.formModel.update((m) => ({
+        ...m,
+        skus: updatedSkus,
+      }));
       this.resetAddRow();
     });
   }
 
-  deleteRow(row: StockKeepingUnit) {
-    this.item.skus.splice(this.item.skus.indexOf(row), 1);
-    this.skus.next(this.item.skus);
+  deleteRow(row: ProductSkuFormData) {
+    const updatedSkus = this.formModel().skus.filter((item) => item !== row);
+    this.formModel.update((m) => ({
+      ...m,
+      skus: updatedSkus,
+    }));
   }
 
   save() {
@@ -257,26 +256,30 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/products');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
-      next: () => {
-        this.snackBar.open('', 'Success');
-        this.router.navigateByUrl('/products');
-      },
-      error: (error) => {
-        this.snackBar.open(error, 'Danger');
-      },
-    });
+    const id = this.id();
+    if (id) {
+      this.ser.delete(id).subscribe({
+        next: () => {
+          this.snackBar.open('', 'Success');
+          this.router.navigateByUrl('/products');
+        },
+        error: (error) => {
+          this.snackBar.open(error as string, 'Danger');
+        },
+      });
+    }
   }
 
   confirmDelete(): void {
+    const id = this.id();
+    if (!id) return;
     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '250px',
       data: { title: 'Delete Product?', content: 'Are you sure? This cannot be undone.' },
     });
 
@@ -288,30 +291,36 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): Product {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    this.item.description = formModel.description ?? '';
-    this.item.fractionUnits = formModel.fractionUnits ?? '';
-    this.item.isPurchased = formModel.isPurchased ?? true;
-    this.item.isSold = formModel.isSold ?? false;
-    this.item.isActive = formModel.isActive ?? true;
+    const formModel = this.formModel();
+    const base = this.item();
+    const item = new Product({ ...base });
+    item.handle = formModel.handle ?? '';
+    item.name = formModel.name ?? '';
+    item.description = formModel.description ?? '';
+    item.fractionUnits = formModel.fractionUnits ?? '';
+    item.isPurchased = formModel.isPurchased;
+    item.isSold = formModel.isSold;
+    item.isActive = formModel.isActive;
+    item.productGroup = this.productGroups().find((x) => x.id === formModel.productGroup);
 
-    this.item.allergen = formModel.allergen ?? '';
-    this.item.protein = formModel.protein ?? 0;
-    this.item.carbohydrate = formModel.carbohydrate ?? 0;
-    this.item.totalSugar = formModel.totalSugar ?? 0;
-    this.item.addedSugar = formModel.addedSugar ?? 0;
-    this.item.totalFat = formModel.totalFat ?? 0;
-    this.item.saturatedFat = formModel.saturatedFat ?? 0;
-    this.item.transFat = formModel.transFat ?? 0;
-    this.item.cholestrol = formModel.cholestrol ?? 0;
-    this.item.sodium = formModel.sodium ?? 0;
+    item.allergen = formModel.allergen ?? '';
+    item.protein = formModel.protein || 0;
+    item.carbohydrate = formModel.carbohydrate || 0;
+    item.totalSugar = formModel.totalSugar || 0;
+    item.addedSugar = formModel.addedSugar || 0;
+    item.totalFat = formModel.totalFat || 0;
+    item.saturatedFat = formModel.saturatedFat || 0;
+    item.transFat = formModel.transFat || 0;
+    item.cholestrol = formModel.cholestrol || 0;
+    item.sodium = formModel.sodium || 0;
 
-    this.item.msnf = formModel.msnf ?? 0;
-    this.item.otherSolids = formModel.otherSolids ?? 0;
-    this.item.totalSolids = formModel.totalSolids ?? 0;
-    this.item.water = formModel.water ?? 0;
+    item.msnf = formModel.msnf || 0;
+    item.otherSolids = formModel.otherSolids || 0;
+    item.totalSolids = formModel.totalSolids || 0;
+    item.water = formModel.water || 0;
 
-    return this.item;
+    item.skus = formModel.skus.map((s) => new StockKeepingUnit({ ...s }));
+
+    return item;
   }
 }