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);

overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html

@@ -8,7 +8,7 @@
     <mat-form-field class="flex-auto basis-30">
       <mat-label>Product Group</mat-label>
       <mat-select [formField]="form.productGroup">
-        <mat-option>-- All Products --</mat-option>
+        <mat-option [value]="null">-- All Products --</mat-option>
         @for (pg of productGroups(); track pg) {
           <mat-option [value]="pg.id">
             {{ pg.name }}

overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts

@@ -9,7 +9,6 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
-import { Product, StockKeepingUnit } from '../../core/product';
 import { ProductGroupService } from '../../product-group/product-group.service';
 import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
 import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
@@ -18,7 +17,7 @@ import { TemporalProductService } from '../temporal-product.service';
 
 export interface TemporalProductListFormData {
   filter: string;
-  productGroup: Product | StockKeepingUnit | string | null;
+  productGroup: string | null;
 }
 
 @Component({
@@ -66,16 +65,11 @@ export class TemporalProductListComponent {
   form = createForm(this.formModel);
   filterSignal = computed(() => this.formModel().filter);
   debouncedFilter = debounced(this.filterSignal, 150);
+  productGroupFilter = computed(() => this.formModel().productGroup ?? null);
   filteredList = computed(() => {
     const data = this.list();
     const search = this.debouncedFilter.value() ?? '';
-    const productGroup = this.formModel().productGroup;
-    const groupId =
-      typeof productGroup === 'string'
-        ? productGroup
-        : productGroup && 'id' in productGroup
-          ? (productGroup.id ?? '')
-          : '';
+    const productGroup = this.productGroupFilter();
 
     const tokens = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
 
@@ -97,7 +91,7 @@ export class TemporalProductListComponent {
             }),
         );
 
-      const matchesProductGroup = !groupId || products.some((k) => (k.productGroup?.id ?? '') === groupId);
+      const matchesProductGroup = !productGroup || products.some((k) => k.productGroup?.id === productGroup);
       return matchesSearch && matchesProductGroup;
     });
   });