Fix: When you would select all after selecting mat-select, it would give an error

overlord/src/app/recipe/recipe-list/recipe-list.component.html

@@ -16,16 +16,16 @@
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-select [formField]="form.period">
-        @for (p of periods(); track p.id) {
-          <mat-option [value]="p"> {{ p.validFrom }} to {{ p.validTill }} </mat-option>
+        @for (p of periods(); track p) {
+          <mat-option [value]="p.id"> {{ p.validFrom }} to {{ p.validTill }} </mat-option>
         }
       </mat-select>
     </mat-form-field>
     <mat-form-field class="flex-auto">
       <mat-label>Product Type</mat-label>
       <mat-select [formField]="form.productGroup" (selectionChange)="filterProductGroup($event.value)">
-        <mat-option>-- All Products --</mat-option>
-        @for (mc of productGroups(); track mc.id) {
+        <mat-option [value]="null">-- All Products --</mat-option>
+        @for (mc of productGroups(); track mc) {
           <mat-option [value]="mc.id">
             {{ mc.name }}
           </mat-option>

overlord/src/app/recipe/recipe-list/recipe-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, input, computed, effect, signal } from '@angular/core';
+import { Component, inject, input, computed, effect, signal, linkedSignal } from '@angular/core';
 import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
@@ -11,7 +11,6 @@ import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { Router, RouterModule } from '@angular/router';
 
-import { ProductGroup } from '../../core/product-group';
 import { Period } from '../../period/period';
 import { PeriodService } from '../../period/period.service';
 import { ProductGroupService } from '../../product-group/product-group.service';
@@ -19,6 +18,10 @@ import { ErrorStateComponent } from '../../shared/error-state/error-state.compon
 import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { RecipeService } from '../recipe.service';
 
+export interface RecipeListFormData {
+  period: string | null;
+  productGroup: string | null;
+}
 @Component({
   selector: 'app-recipe-list',
   templateUrl: './recipe-list.component.html',
@@ -52,31 +55,34 @@ export class RecipeListComponent {
   sortActive = signal('');
   sortDirection = signal('');
 
-  p = input<string>();
-  model = signal({
-    period: null as Period | null,
-    productGroup: null as ProductGroup | string | null,
-  });
-
-  form = createForm(this.model);
+  p = input('', { transform: (v: string | null | undefined) => v ?? null });
 
   periodsResource = this.periodSer.list();
   periods = computed(() => this.periodsResource.value() ?? []);
 
+  model = linkedSignal<string | null, RecipeListFormData>({
+    source: () => this.p(),
+    computation: (period) => ({
+      period: period,
+      productGroup: null,
+    }),
+  });
+
+  form = createForm(this.model);
+
   productGroupsResource = this.productGroupSer.list();
   productGroups = computed(() => this.productGroupsResource.value() ?? []);
 
-  periodFilter = computed(() => this.p() || '');
-  resource = this.ser.list(this.periodFilter);
+  resource = this.ser.list(this.p);
+  productGroupFilter = computed(() => this.model().productGroup ?? null);
 
   info = computed(() => this.resource.value() ?? []);
   sortedList = computed(() => {
     let data = this.info() ?? [];
 
-    const pg = this.model().productGroup;
+    const pg = this.productGroupFilter();
     if (pg) {
-      const pgId = typeof pg === 'string' ? pg : pg.id;
-      data = data.filter((r) => r.productGroupId === pgId);
+      data = data.filter((r) => r.productGroupId === pg);
     }
 
     const active = this.sortActive();
@@ -118,18 +124,13 @@ export class RecipeListComponent {
       const x = this.model().period;
       if (!x) return;
       this.router.navigate([], {
-        queryParams: { p: x.id },
+        queryParams: { p: x },
         replaceUrl: true,
         queryParamsHandling: 'merge',
       });
-      this.period = x;
     });
   }
 
-  filterProductGroup(val: string) {
-    this.model.update((m) => ({ ...m, productGroup: val }));
-  }
-
   handlePageEvent(e: PageEvent) {
     this.pageSize.set(e.pageSize);
     this.pageIndex.set(e.pageIndex);