From 09b11e7e7994766e1a12b5292e9077efc5a9528d Mon Sep 17 00:00:00 2001 From: Amritanshu Date: Sat, 29 Aug 2026 20:27:50 +0000 Subject: [PATCH] Fix: When you would select all after selecting mat-select, it would give an error --- .../recipe-list/recipe-list.component.html | 8 ++-- .../recipe-list/recipe-list.component.ts | 41 ++++++++++--------- .../temporal-product-list.component.html | 2 +- .../temporal-product-list.component.ts | 14 ++----- 4 files changed, 30 insertions(+), 35 deletions(-) diff --git a/overlord/src/app/recipe/recipe-list/recipe-list.component.html b/overlord/src/app/recipe/recipe-list/recipe-list.component.html index 2bae44f4..2ba54452 100644 --- a/overlord/src/app/recipe/recipe-list/recipe-list.component.html +++ b/overlord/src/app/recipe/recipe-list/recipe-list.component.html @@ -16,16 +16,16 @@
- @for (p of periods(); track p.id) { - {{ p.validFrom }} to {{ p.validTill }} + @for (p of periods(); track p) { + {{ p.validFrom }} to {{ p.validTill }} } Product Type - -- All Products -- - @for (mc of productGroups(); track mc.id) { + -- All Products -- + @for (mc of productGroups(); track mc) { {{ mc.name }} diff --git a/overlord/src/app/recipe/recipe-list/recipe-list.component.ts b/overlord/src/app/recipe/recipe-list/recipe-list.component.ts index 27844e71..328f1ec7 100644 --- a/overlord/src/app/recipe/recipe-list/recipe-list.component.ts +++ b/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(); - 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({ + 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); diff --git a/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html b/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html index 803aa134..5277761c 100644 --- a/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html +++ b/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html @@ -8,7 +8,7 @@ Product Group - -- All Products -- + -- All Products -- @for (pg of productGroups(); track pg) { {{ pg.name }} diff --git a/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts b/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts index f5db529b..a1def546 100644 --- a/overlord/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts +++ b/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; }); });