Merged PR 1648: #4358 Improved implementation by using order$ as observable

#4358 Improved implementation by using order$ as observable

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

@@ -1,6 +1,5 @@
 <div class="mb-4">
   <page-pickup-shelf-details-header
-    [order]="order$ | async"
     (handleAction)="handleAction($event)"
     (updateDate)="updateDate($event)"
     (editClick)="navigateToEditPage($event)"

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

@@ -1,7 +1,6 @@
 <div class="mb-4">
   <page-pickup-shelf-details-header
     [processId]="processId"
-    [order]="order$ | async"
     (handleAction)="handleAction($event)"
     (updateDate)="updateDate($event)"
     (editClick)="navigateToEditPage($event)"

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

@@ -140,7 +140,7 @@
             data-detail-id="Benachrichtigung"
           >
             <div class="min-w-[9rem]">Benachrichtigung</div>
-            <div class="flex flex-row font-bold">{{ (notificationsChannel | notificationsChannel) || '-' }}</div>
+            <div class="flex flex-row font-bold">{{ (notificationsChannel$ | async | notificationsChannel) || '-' }}</div>
           </div>
         </div>
       </div>
@@ -283,7 +283,7 @@
         [disabled]="(!isKulturpass && !!orderItem?.features?.paid) || (changeDateDisabled$ | async)"
         class="cta-pickup-preferred"
       >
-        <strong class="border-r border-[#AEB7C1] pr-4" *ngIf="preferredPickUpDate$ | async; let pickUpDate; else: selectTemplate">
+        <strong class="border-r border-[#AEB7C1] pr-4" *ngIf="findLatestPreferredPickUpDate$ | async; let pickUpDate; else: selectTemplate">
           {{ pickUpDate | date: 'dd.MM.yy' }}
         </strong>
         <ng-template #selectTemplate>
@@ -298,7 +298,7 @@
         [xOffset]="8"
         [min]="minDateDatepicker"
         [disabledDaysOfWeek]="[0]"
-        [selected]="(preferredPickUpDate$ | async) || today"
+        [selected]="(findLatestPreferredPickUpDate$ | async) || today"
         (save)="updatePreferredPickUpDate($event)"
       >
       </ui-datepicker>

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

@@ -1,19 +1,9 @@
 import { AsyncPipe, DatePipe, NgFor, NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  SimpleChanges,
-  inject,
-  OnChanges,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, inject } from '@angular/core';
 import { DBHOrderItemListItemDTO, KeyValueDTOOfStringAndString, NotificationChannel, OrderDTO } from '@swagger/oms';
 import { PickupShelfDetailsStore } from '../../store';
-import { map, shareReplay } from 'rxjs/operators';
-import { BehaviorSubject, combineLatest } from 'rxjs';
+import { map, shareReplay, withLatestFrom } from 'rxjs/operators';
+import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
 import { DateAdapter, UiCommonModule } from '@ui/common';
 import { IconModule } from '@shared/components/icon';
 import { UiDropdownModule } from '@ui/dropdown';
@@ -48,7 +38,7 @@ import { PickUpShelfDetailsHeaderNavMenuComponent } from '../pickup-shelf-detail
     PickUpShelfDetailsHeaderNavMenuComponent,
   ],
 })
-export class PickUpShelfDetailsHeaderComponent implements OnChanges {
+export class PickUpShelfDetailsHeaderComponent {
   private _store = inject(PickupShelfDetailsStore);
 
   @Output()
@@ -60,8 +50,37 @@ export class PickUpShelfDetailsHeaderComponent implements OnChanges {
   @Output()
   updateDate = new EventEmitter<{ date: Date; type?: 'delivery' | 'pickup' | 'preferred' }>();
 
-  @Input()
-  order: OrderDTO;
+  get order$(): Observable<OrderDTO> {
+    return this._store.order$;
+  }
+
+  get order(): OrderDTO {
+    return this._store.order;
+  }
+
+  findLatestPreferredPickUpDate$: Observable<Date> = this.order$.pipe(
+    withLatestFrom(this._store.selectedOrderItemIds$),
+    map(([order, selectedOrderItemIds]) => {
+      let latestDate;
+      const subsetItems = order?.items
+        ?.reduce((acc, item) => {
+          return [...acc, ...item.data.subsetItems];
+        }, [])
+        ?.filter((a) => !!a.data.preferredPickUpDate && selectedOrderItemIds.find((id) => id === a.data.id));
+
+      if (subsetItems?.length > 0) {
+        latestDate = new Date(
+          subsetItems?.reduce((a, b) => {
+            return new Date(a.data.preferredPickUpDate) > new Date(b.data.preferredPickUpDate) ? a : b;
+          })?.data?.preferredPickUpDate
+        );
+      }
+
+      return latestDate;
+    })
+  );
+
+  notificationsChannel$: Observable<NotificationChannel> = this.order$.pipe(map((order) => order?.notificationChannels ?? 0));
 
   @Input()
   processId?: number;
@@ -79,10 +98,6 @@ export class PickUpShelfDetailsHeaderComponent implements OnChanges {
 
   orderItem$ = this._store.orderItems$.pipe(map((orderItems) => orderItems?.find((_) => true)));
 
-  preferredPickUpDate$ = new BehaviorSubject<Date>(undefined);
-
-  notificationsChannel: NotificationChannel = 0;
-
   changeDateLoader$ = new BehaviorSubject<boolean>(false);
   changePreferredDateLoader$ = new BehaviorSubject<boolean>(false);
   changeStatusLoader$ = new BehaviorSubject<boolean>(false);
@@ -134,19 +149,6 @@ export class PickUpShelfDetailsHeaderComponent implements OnChanges {
 
   constructor(private dateAdapter: DateAdapter, private cdr: ChangeDetectorRef) {}
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.order) {
-      this.findLatestPreferredPickUpDate();
-      this.computeNotificationChannel();
-    }
-  }
-
-  computeNotificationChannel() {
-    const order = this.order;
-    this.notificationsChannel = order?.notificationChannels ?? 0;
-    this.cdr.markForCheck();
-  }
-
   async handleActionClick(action?: KeyValueDTOOfStringAndString) {
     this.changeStatusLoader$.next(true);
     this.handleAction.emit(action);
@@ -169,21 +171,4 @@ export class PickUpShelfDetailsHeaderComponent implements OnChanges {
   updatePreferredPickUpDate(date: Date) {
     this.updateDate.emit({ date, type: 'preferred' });
   }
-
-  findLatestPreferredPickUpDate() {
-    let latestDate;
-    const subsetItems = this.order?.items
-      ?.reduce((acc, item) => {
-        return [...acc, ...item.data.subsetItems];
-      }, [])
-      ?.filter((a) => !!a.data.preferredPickUpDate && this._store.selectedOrderItemIds.find((id) => id === a.data.id));
-    if (subsetItems?.length > 0) {
-      latestDate = new Date(
-        subsetItems?.reduce((a, b) => {
-          return new Date(a.data.preferredPickUpDate) > new Date(b.data.preferredPickUpDate) ? a : b;
-        })?.data?.preferredPickUpDate
-      );
-    }
-    this.preferredPickUpDate$.next(latestDate);
-  }
 }