Fetch Partial Bugfix, Breadcrumb Fix, Details Store Selectors Refactor

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

@@ -115,6 +115,14 @@ export abstract class PickupShelfBaseComponent implements OnInit {
        * Wenn die Suche erfolgreich war, wird der Benutzer auf die Liste oder Detailseite des gefundenen Artikels weitergeleitet.
        */
       const filterQueryParams = this.listStore.filter.getQueryParams();
+
+      // Only Update QueryParams if the user is already on the details, edit or history page
+      const view: string = this.activatedRoute.snapshot.data.view;
+      if (['details', 'edit', 'history'].includes(view)) {
+        await this.router.navigate([], { queryParams: { ...queryParams, ...filterQueryParams }, skipLocationChange: true });
+        return;
+      }
+
       if (response.hits === 1) {
         const detailsPath = await this.getPathForDetail(response.result[0]).pipe(take(1)).toPromise();
         await this.router.navigate(detailsPath.path, { queryParams: { ...queryParams, ...filterQueryParams, ...detailsPath.queryParams } });
@@ -122,7 +130,6 @@ export abstract class PickupShelfBaseComponent implements OnInit {
         const listPath = await this.getPathFoListBreadcrumb({ processId, queryParams });
         await this.router.navigate(listPath.path, { queryParams: { ...queryParams, ...filterQueryParams, ...listPath.queryParams } });
       } else {
-        // TODO: Fehlermeldung in Suchbox
         await this.router.navigate([], { queryParams: { ...queryParams, ...filterQueryParams } });
       }
     });
@@ -186,7 +193,7 @@ export abstract class PickupShelfBaseComponent implements OnInit {
     const breadcrumbs = await this._getBreadcrumbByTag('list');
     let listBreadcrumb: Breadcrumb = breadcrumbs.pop();
 
-    const shouldHaveBreadcrumb = ['list', 'filter', 'details'].includes(view);
+    const shouldHaveBreadcrumb = ['list', 'filter', 'details', 'edit', 'history'].includes(view);
 
     if (shouldHaveBreadcrumb) {
       const name = await this.getNameForListBreadcrumb({ processId, queryParams });
@@ -247,7 +254,7 @@ export abstract class PickupShelfBaseComponent implements OnInit {
     const breadcrumbs = await this._getBreadcrumbByTag('details');
     let detailBreadcrumb: Breadcrumb = breadcrumbs.pop();
 
-    const shouldHaveBreadcrumb = ['details'].includes(view);
+    const shouldHaveBreadcrumb = ['details', 'edit', 'history'].includes(view);
 
     if (shouldHaveBreadcrumb) {
       const name = await this.getNameForDetailBreadcrumb({ processId, queryParams });

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

@@ -1,5 +1,6 @@
 :host {
   @apply box-border grid overflow-y-scroll h-split-screen-tablet desktop-small:h-split-screen-desktop;
+  grid-template-rows: auto 1fr;
 }
 
 .page-pickup-shelf-out-details__action-wrapper {

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

@@ -20,19 +20,6 @@
 </div>
 
 <div class="page-pickup-shelf-out-details__action-wrapper">
-  <button
-    [disabled]="addToPreviousCompartmentActionDisabled$ | async"
-    *ngIf="addToPreviousCompartmentAction$ | async; let action"
-    class="cta-action shadow-action"
-    [class.cta-action-primary]="action.selected"
-    [class.cta-action-secondary]="!action.selected"
-    (click)="handleAction(action)"
-  >
-    <ui-spinner [show]="(changeActionLoader$ | async) === action.command"
-      >{{ latestCompartmentCodeForOrder$ | async | addToPreviousCompartmentCodeLabelPipe }} zubuchen</ui-spinner
-    >
-  </button>
-
   <button
     [disabled]="actionsDisabled$ | async"
     class="cta-action shadow-action"

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

@@ -44,61 +44,17 @@ export class PickupShelfOutDetailsComponent extends PickupShelfDetailsBaseCompon
 
   fetching$ = this.store.fetchingOrder$;
 
-  fetchPartial$ = this.store.fetchPartial$;
-
-  selectedCompartmentInfo$ = this.store.selectedCompartmentInfo$;
   selectedCompartmentInfo = this.store.selectedCompartmentInfo;
 
-  compartmentCode$ = this.store.selectedCompartmentCode$;
-
-  latestCompartmentCodeForOrder$ = this.store.latestCompartmentCodeForOrder$;
-  latestCompartmentCodeForOrder = this.store.latestCompartmentCodeForOrder;
-
-  showTagsComponent$ = combineLatest([this.orderItems$, this.fetching$]).pipe(
-    map(([items, fetching]) => {
-      const first = items?.find((_) => true);
-      const hasArrivedAction = first?.actions?.some((a) => a.command?.includes('ARRIVED'));
-      return hasArrivedAction && !fetching;
-    })
-  );
+  showTagsComponent$ = this.store.showTagsComponent$;
 
   changeActionLoader$ = new BehaviorSubject<string>(undefined);
-  changeActionDisabled$ = this.fetchPartial$;
 
-  actionsDisabled$ = combineLatest([
-    this.changeActionDisabled$,
-    this.store.select((s) => (s.fetchPartial ? s.selectedOrderItemIds.length === 0 : false)),
-    this.orderItems$,
-  ]).pipe(map(([disabled, partial, orderItems]) => disabled || (partial && orderItems.length > 1)));
+  actionsDisabled$ = this.store.canSelectAction$.pipe(map((canSelectAction) => !canSelectAction));
 
-  addToPreviousCompartmentActionDisabled$ = combineLatest([this.store.compartmentInfo$, this.changeActionDisabled$, this.fetching$]).pipe(
-    map(([compartmentInfo, changeActionDisabled, fetching]) => (!!compartmentInfo || changeActionDisabled) && fetching)
-  );
+  addToPreviousCompartmentAction$ = this.store.addToPreviousCompartmentAction$;
 
-  addToPreviousCompartmentAction$ = combineLatest([this.orderItems$, this.latestCompartmentCodeForOrder$]).pipe(
-    map(([orderItems, latestCompartmentCode]) => {
-      const orderItem = orderItems?.find((_) => true);
-
-      if ([16, 8192].includes(orderItem?.processingStatus) && latestCompartmentCode) {
-        // Zubuchen von Bezahlte und unbezahlte Bestellungen nicht möglich
-        // Zubuchen bei Pay&Collect nur innerhalb der gleichen Bestellung möglich
-
-        return orderItem.actions.find((a) => a.key === '128');
-      }
-
-      return undefined;
-    })
-  );
-
-  mainActions$ = combineLatest([this.orderItems$, this.fetchPartial$]).pipe(
-    map(([items, fetchPartial]) =>
-      items
-        ?.find((_) => true)
-        ?.actions?.filter((action) => typeof action?.enabled !== 'boolean')
-        ?.filter((action) => (fetchPartial ? !action.command.includes('FETCHED_PARTIAL') : true))
-        ?.sort((a, b) => (a.selected === b.selected ? 0 : a.selected ? -1 : 1))
-    )
-  );
+  mainActions$ = this.store.mainActions$;
 
   get processId() {
     return this.listStore.processId;
@@ -125,6 +81,7 @@ export class PickupShelfOutDetailsComponent extends PickupShelfDetailsBaseCompon
 
   async handleAction(action: KeyValueDTOOfStringAndString) {
     try {
+      this.changeActionLoader$.next(action.command);
       const context = await this.execAction(action);
       if (!!context) {
         if (action.command.includes('ARRIVED') || action.command.includes('PRINT_PRICEDIFFQRCODELABEL')) {
@@ -156,6 +113,10 @@ export class PickupShelfOutDetailsComponent extends PickupShelfDetailsBaseCompon
         data: error,
       });
     }
+
+    setTimeout(() => {
+      this.changeActionLoader$.next(undefined);
+    }, 1000);
   }
 
   updateDate({ date, type }: { date: Date; type?: 'delivery' | 'pickup' | 'preferred' }) {

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

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, inject, TrackByFunction } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, TrackByFunction, OnInit } from '@angular/core';
 import { PickupShelfDetailsStore, PickupShelfStore } from '../../store';
 import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { map, take } from 'rxjs/operators';
@@ -37,7 +37,7 @@ import { UiErrorModalComponent, UiModalService } from '@ui/modal';
     UiSpinnerModule,
   ],
 })
-export class PickupShelfOutListComponent extends PickupShelfBaseComponent {
+export class PickupShelfOutListComponent extends PickupShelfBaseComponent implements OnInit {
   private _pickupShelfOutNavigationService = inject(PickUpShelfOutNavigationService);
 
   store = inject(PickupShelfStore);
@@ -104,6 +104,10 @@ export class PickupShelfOutListComponent extends PickupShelfBaseComponent {
     super();
   }
 
+  ngOnInit() {
+    this.store.fetchList();
+  }
+
   getNameForMainBreadcrumb(data: GetNameForBreadcrumbData): string | Promise<string> {
     return 'Warenausgabe';
   }
@@ -202,18 +206,6 @@ export class PickupShelfOutListComponent extends PickupShelfBaseComponent {
   }
 
   async getNameForEditBreadcrumb(data: GetNameForBreadcrumbData): Promise<string> {
-    const compartmentCode = await this.detailsStore.compartmentCode$.pipe(take(1)).toPromise();
-
-    if (compartmentCode) {
-      return compartmentCode;
-    }
-
-    const order = await this.detailsStore.order$.pipe(take(1)).toPromise();
-
-    if (order?.orderNumber) {
-      return order?.orderNumber;
-    }
-
     return 'Bearbeiten';
   }
 
@@ -248,18 +240,6 @@ export class PickupShelfOutListComponent extends PickupShelfBaseComponent {
   }
 
   async getNameForHistoryBreadcrumb(data: GetNameForBreadcrumbData): Promise<string> {
-    const compartmentCode = await this.detailsStore.compartmentCode$.pipe(take(1)).toPromise();
-
-    if (compartmentCode) {
-      return compartmentCode;
-    }
-
-    const order = await this.detailsStore.order$.pipe(take(1)).toPromise();
-
-    if (order?.orderNumber) {
-      return order?.orderNumber;
-    }
-
     return 'Historie';
   }
 

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

@@ -142,18 +142,6 @@ export class PickupShelfOutComponent extends PickupShelfBaseComponent {
   }
 
   async getNameForEditBreadcrumb(data: GetNameForBreadcrumbData): Promise<string> {
-    const compartmentCode = await this.detailsStore.compartmentCode$.pipe(take(1)).toPromise();
-
-    if (compartmentCode) {
-      return compartmentCode;
-    }
-
-    const order = await this.detailsStore.order$.pipe(take(1)).toPromise();
-
-    if (order?.orderNumber) {
-      return order?.orderNumber;
-    }
-
     return 'Bearbeiten';
   }
 
@@ -188,18 +176,6 @@ export class PickupShelfOutComponent extends PickupShelfBaseComponent {
   }
 
   async getNameForHistoryBreadcrumb(data: GetNameForBreadcrumbData): Promise<string> {
-    const compartmentCode = await this.detailsStore.compartmentCode$.pipe(take(1)).toPromise();
-
-    if (compartmentCode) {
-      return compartmentCode;
-    }
-
-    const order = await this.detailsStore.order$.pipe(take(1)).toPromise();
-
-    if (order?.orderNumber) {
-      return order?.orderNumber;
-    }
-
     return 'Historie';
   }
 }

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

@@ -126,3 +126,53 @@ export const selectLatestCompartmentCodeForOrder = (s: PickupShelfDetailsState)
     return acc;
   }, undefined);
 };
+
+export const selectCanSelectAction = (s: PickupShelfDetailsState) => {
+  const items = selectOrderItems(s);
+  const selectedOrderItemIds = selectSelectedOrderItemIds(s);
+
+  if (items?.length === 1) {
+    return true;
+  }
+
+  if (selectedOrderItemIds.length > 0) {
+    return true;
+  }
+
+  return false;
+};
+
+export const selectShowTagsComponent = (s: PickupShelfDetailsState) => {
+  const items = selectOrderItems(s);
+  const orderFetching = selectFetchingOrder(s);
+  const firstItem = items?.find((_) => true);
+
+  const hasArrivedAction = firstItem?.actions?.some((a) => a.command?.includes('ARRIVED'));
+  return hasArrivedAction && !orderFetching;
+};
+
+export const selectAddToPreviousCompartmentAction = (s: PickupShelfDetailsState) => {
+  const items = selectOrderItems(s);
+  const latestCompartmentCode = selectLatestCompartmentCodeForOrder(s);
+  const firstItem = items?.find((_) => true);
+
+  if ([16, 8192].includes(firstItem?.processingStatus) && latestCompartmentCode) {
+    // Zubuchen von Bezahlte und unbezahlte Bestellungen nicht möglich
+    // Zubuchen bei Pay&Collect nur innerhalb der gleichen Bestellung möglich
+
+    return firstItem.actions.find((a) => a.key === '128');
+  }
+
+  return undefined;
+};
+
+export const selectMainActions = (s: PickupShelfDetailsState) => {
+  const items = selectOrderItems(s);
+  const fetchPartial = selectFetchPartial(s);
+  const firstItem = items?.find((_) => true);
+
+  return firstItem?.actions
+    ?.filter((action) => typeof action?.enabled !== 'boolean')
+    ?.filter((action) => (fetchPartial ? !action.command.includes('FETCHED_PARTIAL') : true))
+    ?.sort((a, b) => (a.selected === b.selected ? 0 : a.selected ? -1 : 1));
+};

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

@@ -159,6 +159,30 @@ export class PickupShelfDetailsStore extends ComponentStore<PickupShelfDetailsSt
     return this.get(Selectors.selectedOrderItems);
   }
 
+  canSelectAction$ = this.select(Selectors.selectCanSelectAction);
+
+  get canSelectAction() {
+    return this.get(Selectors.selectCanSelectAction);
+  }
+
+  showTagsComponent$ = this.select(Selectors.selectShowTagsComponent);
+
+  get showTagsComponent() {
+    return this.get(Selectors.selectShowTagsComponent);
+  }
+
+  addToPreviousCompartmentAction$ = this.select(Selectors.selectAddToPreviousCompartmentAction);
+
+  get addToPreviousCompartmentAction() {
+    return this.get(Selectors.selectAddToPreviousCompartmentAction);
+  }
+
+  mainActions$ = this.select(Selectors.selectMainActions);
+
+  get mainActions() {
+    return this.get(Selectors.selectMainActions);
+  }
+
   constructor(private _domainReceiptService: DomainReceiptService) {
     super({});
   }