From e9f24a88d6b35e8782d63d4cada18ae072bc14ff Mon Sep 17 00:00:00 2001 From: Lorenz Hilpert Date: Tue, 19 Nov 2024 13:48:33 +0100 Subject: [PATCH 1/3] Refactor PickupShelfInDetailsComponent to use signals for customer number and update fetch logic --- .../pickup-shelf-in-details.component.ts | 24 +++++++++++++------ .../lib/store/pickup-shelf-details.store.ts | 16 ++++--------- 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/apps/page/pickup-shelf/src/lib/pickup-shelf-in/pickup-shelf-in-details/pickup-shelf-in-details.component.ts b/apps/page/pickup-shelf/src/lib/pickup-shelf-in/pickup-shelf-in-details/pickup-shelf-in-details.component.ts index c806bd4c9..e0f73af3c 100644 --- a/apps/page/pickup-shelf/src/lib/pickup-shelf-in/pickup-shelf-in-details/pickup-shelf-in-details.component.ts +++ b/apps/page/pickup-shelf/src/lib/pickup-shelf-in/pickup-shelf-in-details/pickup-shelf-in-details.component.ts @@ -1,4 +1,4 @@ -import { Component, ChangeDetectionStrategy, inject, OnInit, AfterViewInit, ViewChild } from '@angular/core'; +import { Component, ChangeDetectionStrategy, inject, OnInit, AfterViewInit, ViewChild, effect } from '@angular/core'; import { PickupShelfDetailsBaseComponent } from '../../pickup-shelf-details-base.component'; import { AsyncPipe, NgFor, NgIf } from '@angular/common'; import { PickUpShelfDetailsHeaderComponent } from '../../shared/pickup-shelf-details-header/pickup-shelf-details-header.component'; @@ -11,7 +11,7 @@ import { OnInitDirective } from '@shared/directives/element-lifecycle'; import { PickupShelfInNavigationService } from '@shared/services'; import { BehaviorSubject, asapScheduler, combineLatest } from 'rxjs'; import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop'; import { DBHOrderItemListItemDTO, KeyValueDTOOfStringAndString } from '@swagger/oms'; import { UiErrorModalComponent, UiModalService } from '@ui/modal'; import { ActivatedRoute } from '@angular/router'; @@ -52,6 +52,8 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone order$ = this.store.order$; + $customerNumber = toSignal(this.store.customerNumber$); + orderItems$ = this.store.orderItems$.pipe(shareReplay(1)); noOrderItemsFound$ = this.store.noOrderItemsFound$; @@ -105,6 +107,14 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone private _activatedRoute: ActivatedRoute, ) { super(); + + effect(() => { + const customerNumber = this.$customerNumber(); + + if (customerNumber) { + this.store.fetchCoverOrderItems(customerNumber); + } + }); } ngOnInit() { @@ -124,11 +134,11 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone }); // Fix #4696 - Always Fetch Cover Order Items - this._activatedRoute.params.pipe(distinctUntilChanged(isEqual), takeUntilDestroyed(this.destroyRef)).subscribe((_) => { - if (!this.store.coverOrderItems || this.store.coverOrderItems.length === 0) { - this.store.fetchCoverOrderItems(); - } - }); + // this._activatedRoute.params.pipe(distinctUntilChanged(isEqual), takeUntilDestroyed(this.destroyRef)).subscribe((_) => { + // if (!this.store.coverOrderItems || this.store.coverOrderItems.length === 0) { + // this.store.fetchCoverOrderItems(); + // } + // }); } ngAfterViewInit() { diff --git a/apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts b/apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts index 40e6268ee..5808b2d8e 100644 --- a/apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts +++ b/apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts @@ -1,4 +1,5 @@ -import { ComponentStore, tapResponse } from '@ngrx/component-store'; +import { ComponentStore } from '@ngrx/component-store'; +import { tapResponse } from '@ngrx/operators'; import { PickupShelfDetailsState } from './pickup-shelf-details.state'; import { Observable, combineLatest } from 'rxjs'; import { @@ -702,19 +703,10 @@ export class PickupShelfDetailsStore extends ComponentStore - this.customerNumber$.pipe( - filter((cn) => !!cn), - take(1), - ), - ); - - fetchCoverOrderItems = this.effect((trigger$: Observable) => + fetchCoverOrderItems = this.effect((trigger$: Observable) => trigger$.pipe( - this.delayWhenCustomerNumberNotExists, tap(() => this.beforeFetchCoverOrderItems()), - withLatestFrom(this.customerNumber$), - switchMap(([_, customerNumber]) => + switchMap((customerNumber) => this._pickupShelfIOService .getOrderItemsByCustomerNumber({ customerNumber, From 1126e4f0c176bf2fbee7ca8965c6dc9af962b692 Mon Sep 17 00:00:00 2001 From: Lorenz Hilpert Date: Tue, 19 Nov 2024 13:50:15 +0100 Subject: [PATCH 2/3] Import tapResponse alongside ComponentStore in pickup-shelf-details.store.ts --- .../pickup-shelf/src/lib/store/pickup-shelf-details.store.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts b/apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts index 5808b2d8e..dad8d4bae 100644 --- a/apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts +++ b/apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts @@ -1,5 +1,5 @@ -import { ComponentStore } from '@ngrx/component-store'; -import { tapResponse } from '@ngrx/operators'; +import { ComponentStore, tapResponse } from '@ngrx/component-store'; + import { PickupShelfDetailsState } from './pickup-shelf-details.state'; import { Observable, combineLatest } from 'rxjs'; import { From 8900a77d7a67b9d80918321b6272aa2b59e5aac5 Mon Sep 17 00:00:00 2001 From: Lorenz Hilpert Date: Tue, 19 Nov 2024 16:27:18 +0100 Subject: [PATCH 3/3] Enhance PickupShelfInDetailsComponent with signals for order items and optimize fetching logic --- .../pickup-shelf-in-details.component.ts | 9 +++++++-- .../src/lib/store/pickup-shelf-details.store.ts | 8 ++++++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/apps/page/pickup-shelf/src/lib/pickup-shelf-in/pickup-shelf-in-details/pickup-shelf-in-details.component.ts b/apps/page/pickup-shelf/src/lib/pickup-shelf-in/pickup-shelf-in-details/pickup-shelf-in-details.component.ts index e0f73af3c..07c1b5258 100644 --- a/apps/page/pickup-shelf/src/lib/pickup-shelf-in/pickup-shelf-in-details/pickup-shelf-in-details.component.ts +++ b/apps/page/pickup-shelf/src/lib/pickup-shelf-in/pickup-shelf-in-details/pickup-shelf-in-details.component.ts @@ -1,4 +1,4 @@ -import { Component, ChangeDetectionStrategy, inject, OnInit, AfterViewInit, ViewChild, effect } from '@angular/core'; +import { Component, ChangeDetectionStrategy, inject, OnInit, AfterViewInit, ViewChild, effect, untracked } from '@angular/core'; import { PickupShelfDetailsBaseComponent } from '../../pickup-shelf-details-base.component'; import { AsyncPipe, NgFor, NgIf } from '@angular/common'; import { PickUpShelfDetailsHeaderComponent } from '../../shared/pickup-shelf-details-header/pickup-shelf-details-header.component'; @@ -56,6 +56,8 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone orderItems$ = this.store.orderItems$.pipe(shareReplay(1)); + $orderItems = toSignal(this.orderItems$); + noOrderItemsFound$ = this.store.noOrderItemsFound$; fetchingOrder$ = this.store.fetchingOrder$; @@ -110,9 +112,12 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone effect(() => { const customerNumber = this.$customerNumber(); + this.$orderItems(); if (customerNumber) { - this.store.fetchCoverOrderItems(customerNumber); + untracked(() => { + this.store.fetchCoverOrderItems(customerNumber); + }); } }); } diff --git a/apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts b/apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts index dad8d4bae..2bae23b3a 100644 --- a/apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts +++ b/apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts @@ -19,7 +19,7 @@ import { } from '@swagger/oms'; import { PickupShelfIOService, PickupShelfService } from '@domain/pickup-shelf'; import { Injectable, inject } from '@angular/core'; -import { delayWhen, filter, map, mergeMap, switchMap, take, tap, withLatestFrom } from 'rxjs/operators'; +import { delayWhen, distinctUntilChanged, filter, map, mergeMap, switchMap, take, tap, withLatestFrom } from 'rxjs/operators'; import { UiModalService } from '@ui/modal'; import { CrmCustomerService } from '@domain/crm'; import * as Selectors from './pickup-shelf-details.selectors'; @@ -28,6 +28,7 @@ import { CacheService } from '@core/cache'; import { RunCheckTrigger } from '../trigger'; import { DomainReceiptService } from '@domain/oms'; import { PickupShelfStore } from './pickup-shelf.store'; +import { isEqual } from 'lodash'; @Injectable() export class PickupShelfDetailsStore extends ComponentStore { @@ -66,7 +67,10 @@ export class PickupShelfDetailsStore extends ComponentStore s).pipe(switchMap((s) => this._listStore.itemsForPreview$(s))), - ]).pipe(map(([orderItems, itemsForPreview]) => (orderItems?.length ? orderItems : itemsForPreview))); + ]).pipe( + map(([orderItems, itemsForPreview]) => (orderItems?.length ? orderItems : itemsForPreview)), + distinctUntilChanged(isEqual), + ); get orderItems() { const orderItems = this.get(Selectors.selectOrderItems);