#4752 Performance in der WA verbessert -> Details Seite

apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out-details/pickup-shelf-out-details.component.ts

@@ -46,7 +46,9 @@ export class PickupShelfOutDetailsComponent extends PickupShelfDetailsBaseCompon
 
   order$ = this.store.order$;
 
-  groupedItems$: Observable<Array<{ type: string; items: DBHOrderItemListItemDTO[] }>> = this.store.orderItems$.pipe(
+  orderItems$ = this.store.orderItems$;
+
+  groupedItems$: Observable<Array<{ type: string; items: DBHOrderItemListItemDTO[] }>> = this.orderItems$.pipe(
     map((items) => {
       const groups: Array<{ type: string; items: DBHOrderItemListItemDTO[] }> = [];
 
@@ -66,10 +68,12 @@ export class PickupShelfOutDetailsComponent extends PickupShelfDetailsBaseCompon
     })
   );
 
-  fetching$ = this.store.fetchingOrder$;
+  fetchingOrder$ = this.store.fetchingOrder$;
   fetchingItems$ = this.store.fetchingOrderItems$;
 
-  viewFetching$ = combineLatest([this.fetching$, this.fetchingItems$]).pipe(map(([fetching, fetchingItems]) => fetching || fetchingItems));
+  viewFetching$ = combineLatest([this.orderItems$, this.fetchingItems$]).pipe(
+    map(([orderItems, fetchingItems]) => orderItems?.length === 0 && fetchingItems)
+  );
 
   selectedCompartmentInfo = this.store.selectedCompartmentInfo;
 

apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out.component.ts

@@ -7,7 +7,7 @@ import { PickupShelfIOService, PickupShelfOutService } from '@domain/pickup-shel
 import { GetNameForBreadcrumbData, GetPathForBreadcrumbData, PickupShelfBaseComponent } from '../pickup-shelf-base.component';
 import { NavigationRoute, PickUpShelfOutNavigationService } from '@shared/services';
 import { AsyncPipe } from '@angular/common';
-import { DBHOrderItemListItemDTO, ListResponseArgsOfDBHOrderItemListItemDTO } from '@swagger/oms';
+import { DBHOrderItemListItemDTO } from '@swagger/oms';
 import { Observable, of } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { provideActionHandlers } from '@core/command';

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-header/pickup-shelf-details-header.component.html

@@ -105,7 +105,7 @@
           <div class="flex flex-row font-bold">
             <shared-skeleton-loader class="w-32" *ngIf="fetchingOrder$ | async; else orderSourceTmpl"></shared-skeleton-loader>
             <ng-template #orderSourceTmpl>
-              {{ order?.features?.orderSource }}
+              {{ order()?.features?.orderSource }}
             </ng-template>
           </div>
         </div>

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-header/pickup-shelf-details-header.component.ts

@@ -13,6 +13,7 @@ import { PickupShelfProcessingStatusPipe } from '../pipes/processing-status.pipe
 import { UiDatepickerModule } from '@ui/datepicker';
 import { PickUpShelfDetailsHeaderNavMenuComponent } from '../pickup-shelf-details-header-nav-menu/pickup-shelf-details-header-nav-menu.component';
 import { SkeletonLoaderComponent } from '@shared/components/loader';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'page-pickup-shelf-details-header',
@@ -54,13 +55,9 @@ export class PickUpShelfDetailsHeaderComponent {
 
   fetchingOrder$ = this._store.fetchingOrder$;
 
-  get order$(): Observable<OrderDTO> {
+  order$ = this._store.order$;
-    return this._store.order$;
-  }
 
-  get order(): OrderDTO {
+  order = toSignal(this.order$);
-    return this._store.order;
-  }
 
   findLatestPreferredPickUpDate$: Observable<Date> = this.order$.pipe(
     withLatestFrom(this._store.selectedOrderItemIds$),
@@ -90,7 +87,7 @@ export class PickUpShelfDetailsHeaderComponent {
   processId?: number;
 
   get isKulturpass() {
-    return this.order?.features?.orderSource === 'KulturPass';
+    return this.order()?.features?.orderSource === 'KulturPass';
   }
 
   minDateDatepicker = this.dateAdapter.addCalendarDays(this.dateAdapter.today(), -1);

apps/page/pickup-shelf/src/lib/store/pickup-shelf-details.store.ts

@@ -1,6 +1,6 @@
 import { ComponentStore, tapResponse } from '@ngrx/component-store';
 import { PickupShelfDetailsState } from './pickup-shelf-details.state';
-import { Observable } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
 import {
   DBHOrderItemListItemDTO,
   EntityDTOContainerOfOrderItemSubsetDTO,
@@ -18,7 +18,7 @@ import {
 } from '@swagger/oms';
 import { PickupShelfIOService, PickupShelfService } from '@domain/pickup-shelf';
 import { Injectable, inject } from '@angular/core';
-import { delayWhen, filter, mergeMap, switchMap, take, tap, withLatestFrom } from 'rxjs/operators';
+import { delayWhen, 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';
@@ -56,10 +56,20 @@ export class PickupShelfDetailsStore extends ComponentStore<PickupShelfDetailsSt
     return this.get(Selectors.selectFetchingOrder);
   }
 
-  orderItems$ = this.select(Selectors.selectOrderItems);
+  // orderItems$ = this.select(Selectors.selectOrderItems);
+
+  // get orderItems() {
+  //   return this.get(Selectors.selectOrderItems);
+  // }
+
+  orderItems$ = combineLatest([
+    this.select(Selectors.selectOrderItems),
+    this.select((s) => s).pipe(switchMap((s) => this._listStore.itemsForPreview$(s))),
+  ]).pipe(map(([orderItems, itemsForPreview]) => (orderItems?.length ? orderItems : itemsForPreview)));
 
   get orderItems() {
-    return this.get(Selectors.selectOrderItems);
+    const orderItems = this.get(Selectors.selectOrderItems);
+    return orderItems?.length ? orderItems : this.get((s) => this._listStore.itemsForPreview(s));
   }
 
   fetchingOrderItems$ = this.select(Selectors.selectFetchingOrderItems);

apps/page/pickup-shelf/src/lib/store/pickup-shelf.selectors.ts

@@ -1,6 +1,13 @@
 import { Filter } from '@shared/components/filter';
 import { PickupShelfState } from './pickup-shelf.state';
 import { isEmpty } from 'lodash';
+import { PickupShelfDetailsState } from './pickup-shelf-details.state';
+import {
+  selectDisplayedCompartmentCode,
+  selectDisplayedCompartmentInfo,
+  selectDisplayedOrderItemProcessingStatus,
+  selectOrder,
+} from './pickup-shelf-details.selectors';
 
 export function selectProcessId(state: PickupShelfState) {
   return state.processId;
@@ -64,3 +71,27 @@ export function selectListHits(state: PickupShelfState) {
 export function selectSelectedListItems(state: PickupShelfState) {
   return state.selectedListItems ?? [];
 }
+
+export const selectItemsForPreview = (detailsState: PickupShelfDetailsState) => (state: PickupShelfState) => {
+  const orderId = selectOrder(detailsState)?.id;
+
+  let items = state.list.filter((item) => item.orderId === orderId);
+
+  const processingStatus = selectDisplayedOrderItemProcessingStatus(detailsState);
+  if (processingStatus) {
+    items = items?.filter((oi) => oi.processingStatus === processingStatus);
+  }
+
+  const compartmentCode = selectDisplayedCompartmentCode(detailsState);
+  if (compartmentCode) {
+    items = items?.filter((oi) => oi.compartmentCode === compartmentCode);
+
+    const compartmentInfo = selectDisplayedCompartmentInfo(detailsState);
+
+    if (compartmentInfo) {
+      items = items?.filter((oi) => oi.compartmentInfo === compartmentInfo);
+    }
+  }
+
+  return items;
+};

apps/page/pickup-shelf/src/lib/store/pickup-shelf.store.ts

@@ -28,6 +28,7 @@ import * as Selectors from './pickup-shelf.selectors';
 import { Observable, Subject, combineLatest } from 'rxjs';
 import { CacheService } from '@core/cache';
 import { Filter } from '@shared/components/filter';
+import { PickupShelfDetailsState } from './pickup-shelf-details.state';
 
 @Injectable()
 export class PickupShelfStore extends ComponentStore<PickupShelfState> implements OnStoreInit {
@@ -104,6 +105,10 @@ export class PickupShelfStore extends ComponentStore<PickupShelfState> implement
     return this.get(Selectors.selectSelectedListItems);
   }
 
+  itemsForPreview$ = (state: PickupShelfDetailsState) => this.select(Selectors.selectItemsForPreview(state));
+
+  itemsForPreview = (state: PickupShelfDetailsState) => this.get(Selectors.selectItemsForPreview(state));
+
   constructor() {
     // Nicht entfernen sonst wird der Store nicht initialisiert
     super({});