#4336 Warenausgabe - automatisches nachladen durch Scrollen

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

@@ -52,7 +52,10 @@
     [showSpacer]="(primaryOutletActive$ | async) || (isTablet$ | async)"
   >
     <ng-container *ngIf="processId$ | async; let processId">
-      <div class="page-pickup-shelf-out-list__items-list w-full" *ngFor="let bueryNumberGroup of list$ | async | groupBy: byBuyerNumberFn">
+      <div
+        class="page-pickup-shelf-out-list__items-list w-full"
+        *ngFor="let bueryNumberGroup of list$ | async | groupBy: byBuyerNumberFn; trackBy: trackByGroupFn"
+      >
         <ng-container *ngIf="bueryNumberGroup.items[0]; let firstItem">
           <div
             class="page-pickup-shelf-out-list__item-header-group w-full grid grid-flow-col gap-x-4 items-center justify-between bg-white text-xl rounded-t p-4 font-bold mb-px-2"
@@ -66,9 +69,13 @@
           </div>
         </ng-container>
 
-        <ng-container *ngFor="let orderNumberGroup of bueryNumberGroup.items | groupBy: byOrderNumberFn">
-          <ng-container *ngFor="let processingStatusGroup of orderNumberGroup.items | groupBy: byProcessingStatusFn">
-            <ng-container *ngFor="let compartmentCodeGroup of processingStatusGroup.items | groupBy: byCompartmentCodeFn">
+        <ng-container *ngFor="let orderNumberGroup of bueryNumberGroup.items | groupBy: byOrderNumberFn; trackBy: trackByGroupFn">
+          <ng-container
+            *ngFor="let processingStatusGroup of orderNumberGroup.items | groupBy: byProcessingStatusFn; trackBy: trackByGroupFn"
+          >
+            <ng-container
+              *ngFor="let compartmentCodeGroup of processingStatusGroup.items | groupBy: byCompartmentCodeFn; trackBy: trackByGroupFn"
+            >
               <page-pickup-shelf-list-item
                 *ngFor="let item of compartmentCodeGroup.items; let firstItem = first; trackBy: trackByFn"
                 class="page-pickup-shelf-out-list__result-item mb-[0.125rem]"
@@ -80,6 +87,7 @@
         </ng-container>
       </div>
     </ng-container>
+    <page-pickup-shelf-list-item-loader *ngIf="fetching$ | async"></page-pickup-shelf-list-item-loader>
   </ui-scroll-container>
   <div class="actions z-sticky h-0 gap-4" *ngIf="actions$ | async; let actions">
     <button

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

@@ -1,7 +1,7 @@
 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';
+import { map, take, tap } from 'rxjs/operators';
 import { NavigationRoute, PickUpShelfOutNavigationService } from '@shared/services';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { IconModule } from '@shared/components/icon';
@@ -12,10 +12,11 @@ import { isEqual } from 'lodash';
 import { PickUpShelfListItemComponent } from '../../shared/pickup-shelf-list-item/pickup-shelf-list-item.component';
 import { UiScrollContainerModule } from '@ui/scroll-container';
 import { DBHOrderItemListItemDTO, KeyValueDTOOfStringAndString } from '@swagger/oms';
-import { GroupByPipe } from '@shared/pipes/group-by';
+import { Group, GroupByPipe } from '@shared/pipes/group-by';
 import { UiSpinnerModule } from '@ui/spinner';
 import { GetNameForBreadcrumbData, GetPathForBreadcrumbData, PickupShelfBaseComponent } from '../../pickup-shelf-base.component';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
+import { PickupShelfListItemLoaderComponent } from '../../shared/pickup-shelf-list-item/pickup-shelf-list-item-loader.component';
 
 @Component({
   selector: 'page-pcikup-shelf-out-list',
@@ -35,6 +36,7 @@ import { UiErrorModalComponent, UiModalService } from '@ui/modal';
     UiScrollContainerModule,
     GroupByPipe,
     UiSpinnerModule,
+    PickupShelfListItemLoaderComponent,
   ],
 })
 export class PickupShelfOutListComponent extends PickupShelfBaseComponent implements OnInit {
@@ -82,6 +84,8 @@ export class PickupShelfOutListComponent extends PickupShelfBaseComponent implem
 
   byBuyerNumberFn = (item: DBHOrderItemListItemDTO) => item.buyerNumber;
 
+  trackByGroupFn: TrackByFunction<Group<string, DBHOrderItemListItemDTO>> = (index, group) => group.group;
+
   byOrderNumberFn = (item: DBHOrderItemListItemDTO) => item.orderNumber;
 
   byProcessingStatusFn = (item: DBHOrderItemListItemDTO) => item.processingStatus;

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-list-item/pickup-shelf-list-item-loader.component.css

@@ -0,0 +1,55 @@
+:host {
+  @apply grid h-28 p-4 rounded bg-white gap-x-4;
+  grid-template-areas:
+    'cover author ean order'
+    'cover title quantity .';
+  grid-template-columns: auto 1fr 1fr auto;
+}
+
+.cover {
+  grid-area: cover;
+}
+
+.cover shared-skeleton-loader {
+  @apply h-20 w-12;
+}
+
+.author {
+  grid-area: author;
+}
+
+.author shared-skeleton-loader {
+  @apply h-6 w-28;
+}
+
+.ean {
+  grid-area: ean;
+}
+
+.ean shared-skeleton-loader {
+  @apply h-6 w-32;
+}
+
+.order {
+  grid-area: order;
+}
+
+.order shared-skeleton-loader {
+  @apply h-8 w-36;
+}
+
+.title {
+  grid-area: title;
+}
+
+.title shared-skeleton-loader {
+  @apply h-6 w-44;
+}
+
+.quantity {
+  grid-area: quantity;
+}
+
+.quantity shared-skeleton-loader {
+  @apply h-6 w-20;
+}

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-list-item/pickup-shelf-list-item-loader.component.html

@@ -0,0 +1,18 @@
+<div class="cover">
+  <shared-skeleton-loader></shared-skeleton-loader>
+</div>
+<div class="author">
+  <shared-skeleton-loader></shared-skeleton-loader>
+</div>
+<div class="ean">
+  <shared-skeleton-loader></shared-skeleton-loader>
+</div>
+<div class="order">
+  <shared-skeleton-loader></shared-skeleton-loader>
+</div>
+<div class="title">
+  <shared-skeleton-loader></shared-skeleton-loader>
+</div>
+<div class="quantity">
+  <shared-skeleton-loader></shared-skeleton-loader>
+</div>

apps/page/pickup-shelf/src/lib/shared/pickup-shelf-list-item/pickup-shelf-list-item-loader.component.ts

@@ -0,0 +1,15 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { SkeletonLoaderComponent } from '@shared/components/loader';
+
+@Component({
+  selector: 'page-pickup-shelf-list-item-loader',
+  templateUrl: 'pickup-shelf-list-item-loader.component.html',
+  styleUrls: ['pickup-shelf-list-item-loader.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'page-pickup-shelf-list-item-loader' },
+  standalone: true,
+  imports: [SkeletonLoaderComponent],
+})
+export class PickupShelfListItemLoaderComponent {
+  constructor() {}
+}

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

@@ -1,7 +1,7 @@
 import { ComponentStore, tapResponse, OnStoreInit } from '@ngrx/component-store';
 import { PickupShelfState } from './pickup-shelf.state';
 import { PickupShelfIOService } from '@domain/pickup-shelf';
-import { delayWhen, filter, map, skipWhile, switchMap, take, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
+import { delayWhen, filter, map, skipWhile, switchMap, take, takeUntil, tap, throttleTime, withLatestFrom } from 'rxjs/operators';
 import {
   DBHOrderItemListItemDTO,
   ListResponseArgsOfDBHOrderItemListItemDTO,
@@ -251,16 +251,21 @@ export class PickupShelfStore extends ComponentStore<PickupShelfState> implement
 
   fetchMoreList = this.effect((trigger$) =>
     trigger$.pipe(
+      throttleTime(500),
       skipWhile(() => this.fetchingList),
-      tap(this.beforeFetchMoreList),
+      tap(() => this.beforeFetchMoreList()),
       withLatestFrom(this.filter$, this.list$),
       switchMap(([_, filter, list]) => {
         const queryToken = filter.getQueryToken();
         queryToken.skip = list?.length ?? 0;
         queryToken.take = 25;
-        return this._pickupShelfIOService
-          .search(queryToken)
-          .pipe(takeUntil(this._cancelListRequests), tapResponse(this.fetchMoreListDone, this.fetchMoreListError));
+        return this._pickupShelfIOService.search(queryToken).pipe(
+          takeUntil(this._cancelListRequests),
+          tapResponse(
+            (r) => this.fetchMoreListDone(r),
+            (e) => this.fetchMoreListError(e)
+          )
+        );
       })
     )
   );