Update ng-mocks

#4721 Removed unnecessary check for scrolling to item

angular.json

@@ -959,10 +959,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "isa-app:build:production"
+              "buildTarget": "isa-app:build:production"
             },
             "development": {
-              "browserTarget": "isa-app:build:development"
+              "buildTarget": "isa-app:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -970,7 +970,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "isa-app:build"
+            "buildTarget": "isa-app:build"
           }
         },
         "test": {
@@ -1470,39 +1470,6 @@
           }
         }
       }
-    },
-    "shell": {
-      "projectType": "library",
-      "root": "apps/shell",
-      "sourceRoot": "apps/shell/src",
-      "prefix": "shell",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "apps/shell/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "apps/shell/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "apps/shell/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "tsConfig": "apps/shell/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
-          }
-        }
-      }
     }
   },
   "cli": {

apps/isa-app/src/app/app.component.ts

@@ -1,18 +1,18 @@
 import { DOCUMENT } from '@angular/common';
-import { Component, HostListener, Inject, OnInit, Renderer2 } from '@angular/core';
-import { Title } from '@angular/platform-browser';
-import { SwUpdate, UpdateAvailableEvent } from '@angular/service-worker';
 import { ApplicationService } from '@core/application';
 import { Config } from '@core/config';
 import { NotificationsHub } from '@hub/notifications';
 import packageInfo from 'package';
-import { asapScheduler, interval, Observable, Subscription } from 'rxjs';
+import { SwUpdate } from '@angular/service-worker';
+import { Title } from '@angular/platform-browser';
+
 import { UserStateService } from '@swagger/isa';
 import { IsaLogProvider } from './providers';
 import { EnvironmentService } from '@core/environment';
 import { AuthService } from '@core/auth';
 import { UiMessageModalComponent, UiModalService } from '@ui/modal';
-import { tap } from 'rxjs/operators';
+import { Component, HostListener, Inject, OnInit, Renderer2 } from '@angular/core';
+import { Subscription, asapScheduler, interval } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -21,7 +21,6 @@ import { tap } from 'rxjs/operators';
 })
 export class AppComponent implements OnInit {
   private _checkForUpdates: number = this._config.get('checkForUpdates');
-  updateAvailableObs: Observable<UpdateAvailableEvent>;
 
   get checkForUpdates(): number {
     return this._checkForUpdates;

apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts

@@ -155,7 +155,7 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
 
           const cleanQueryParams = this.cleanupQueryParams(queryParams);
 
-          if (this.route.outlet === 'primary' || processChanged) {
+          if (processChanged) {
             this.scrollToItem(this._getScrollIndexFromCache());
           }
 
@@ -271,7 +271,7 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
   }
 
   private _getScrollIndexFromCache(): number {
-    return this.cache.get<number>({ processId: this.getProcessId(), token: this.SCROLL_INDEX_TOKEN });
+    return this.cache.get<number>({ processId: this.getProcessId(), token: this.SCROLL_INDEX_TOKEN }) ?? 0;
   }
 
   scrollToItem(i?: number) {

apps/page/checkout/src/lib/checkout-review/special-comment/special-comment.component.html

@@ -19,17 +19,14 @@
       placeholder="Eine Anmerkung hinzufügen"
       [(ngModel)]="value"
       [rows]="rows"
-      (ngModelChange)="check()"
-      (blur)="save()"
+      (ngModelChange)="updateValue()"
+      (blur)="updateValue()"
     ></textarea>
 
     <div class="comment-actions py-4">
       <button type="reset" class="clear pl-4" *ngIf="!disabled && !!value" (click)="clear(); triggerResize()">
         <shared-icon icon="close" [size]="24"></shared-icon>
       </button>
-      <button class="cta-save ml-4" type="submit" *ngIf="!disabled && isDirty" (click)="save()">
-        Speichern
-      </button>
     </div>
   </div>
 

apps/page/checkout/src/lib/checkout-review/special-comment/special-comment.component.ts

@@ -61,7 +61,7 @@ export class SpecialCommentComponent implements ControlValueAccessor {
 
   clear() {
     this.value = '';
-    this.save();
+    this.updateValue();
   }
 
   check() {
@@ -80,11 +80,12 @@ export class SpecialCommentComponent implements ControlValueAccessor {
     this.cdr.markForCheck();
   }
 
-  save() {
+  updateValue() {
     this.initialValue = this.value;
     this.onChange(this.value);
     this.check();
   }
+
   setIsDirty(isDirty: boolean) {
     this.isDirty = isDirty;
     this.isDirtyChange.emit(isDirty);

apps/page/customer/src/lib/create-customer/abstract-create-customer.ts

@@ -1,6 +1,6 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { ChangeDetectorRef, Directive, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
-import { AbstractControl, AsyncValidatorFn, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { AbstractControl, AsyncValidatorFn, UntypedFormControl, UntypedFormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { CrmCustomerService } from '@domain/crm';
@@ -190,6 +190,47 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
     this.cdr.markForCheck();
   }
 
+  minBirthDateValidator = (): ValidatorFn => {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const minAge = 18; // 18 years
+
+      if (!control.value) {
+        return null;
+      }
+
+      const controlBirthDate = new Date(control.value);
+      const minBirthDate = new Date();
+      minBirthDate.setFullYear(minBirthDate.getFullYear() - minAge);
+
+      // Check if customer is over 18 years old
+      if (this._checkIfAgeOver18(controlBirthDate, minBirthDate)) {
+        return null;
+      } else {
+        return { minBirthDate: `Teilnahme ab ${minAge} Jahren` };
+      }
+    };
+  };
+
+  private _checkIfAgeOver18(inputDate: Date, minBirthDate: Date): boolean {
+    // Check year
+    if (inputDate.getFullYear() < minBirthDate.getFullYear()) {
+      return true;
+    }
+    // Check Year + Month
+    else if (inputDate.getFullYear() === minBirthDate.getFullYear() && inputDate.getMonth() < minBirthDate.getMonth()) {
+      return true;
+    }
+    // Check Year + Month + Day
+    else if (
+      inputDate.getFullYear() === minBirthDate.getFullYear() &&
+      inputDate.getMonth() === minBirthDate.getMonth() &&
+      inputDate.getDate() <= minBirthDate.getDate()
+    ) {
+      return true;
+    }
+    return false;
+  }
+
   emailExistsValidator: AsyncValidatorFn = (control) => {
     return of(control.value).pipe(
       tap((_) => this.customerExists$.next(false)),

apps/page/customer/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.ts

@@ -70,7 +70,7 @@ export class CreateP4MCustomerComponent extends AbstractCreateCustomer implement
 
   agbValidatorFns = [Validators.requiredTrue];
 
-  birthDateValidatorFns = [Validators.required];
+  birthDateValidatorFns = [];
 
   existingCustomer$: Observable<CustomerInfoDTO | null>;
 
@@ -138,6 +138,7 @@ export class CreateP4MCustomerComponent extends AbstractCreateCustomer implement
 
   initMarksAndValidators() {
     this.asyncLoyaltyCardValidatorFn = [this.checkLoyalityCardValidator];
+    this.birthDateValidatorFns = [Validators.required, this.minBirthDateValidator()];
     if (this._customerType === 'webshop') {
       this.emailRequiredMark = true;
       this.emailValidatorFn = [Validators.required, Validators.email, validateEmail];

apps/page/customer/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.ts

@@ -22,7 +22,7 @@ export class UpdateP4MWebshopCustomerComponent extends AbstractCreateCustomer im
 
   agbValidatorFns = [Validators.requiredTrue];
 
-  birthDateValidatorFns = [Validators.required];
+  birthDateValidatorFns = [Validators.required, this.minBirthDateValidator()];
 
   nameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
 

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

@@ -36,12 +36,22 @@
 
       <page-pickup-shelf-details-tags class="mb-px-2" *ngIf="showTagsComponent$ | async"></page-pickup-shelf-details-tags>
 
-      <page-pickup-shelf-details-covers
-        *ngIf="(coverOrderItems$ | async)?.length > 0"
-        [coverItems]="coverOrderItems$ | async"
-        [selectedOrderItem]="selectedItem$ | async"
-        (coverClick)="coverClick($event)"
-      ></page-pickup-shelf-details-covers>
+      <ng-container *ngIf="fetchingCoverItems$ | async; else coverItemsTmpl">
+        <div class="bg-white grid grid-flow-col gap-5 justify-center items-center h-40">
+          <shared-skeleton-loader class="h-16 w-12"></shared-skeleton-loader>
+          <shared-skeleton-loader class="h-16 w-12"></shared-skeleton-loader>
+          <shared-skeleton-loader class="h-16 w-12"></shared-skeleton-loader>
+        </div>
+      </ng-container>
+
+      <ng-template #coverItemsTmpl>
+        <page-pickup-shelf-details-covers
+          *ngIf="(coverOrderItems$ | async)?.length > 0"
+          [coverItems]="coverOrderItems$ | async"
+          [selectedOrderItem]="selectedItem$ | async"
+          (coverClick)="coverClick($event)"
+        ></page-pickup-shelf-details-covers>
+      </ng-template>
     </div>
 
     <div class="page-pickup-shelf-in-details__action-wrapper">

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

@@ -18,6 +18,7 @@ import { ActivatedRoute } from '@angular/router';
 import { RunCheckTrigger } from '../../trigger';
 import { PickUpShelfDetailsItemsGroupComponent } from '../../shared/pickup-shelf-details-items-group/pickup-shelf-details-items-group.component';
 import { isEqual } from 'lodash';
+import { SkeletonLoaderComponent } from '@shared/components/loader';
 
 @Component({
   selector: 'page-pickup-shelf-in-details',
@@ -38,6 +39,7 @@ import { isEqual } from 'lodash';
     PickupShelfAddToPreviousCompartmentCodeLabelPipe,
     UiSpinnerModule,
     OnInitDirective,
+    SkeletonLoaderComponent,
   ],
 })
 export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseComponent implements OnInit, AfterViewInit {
@@ -54,12 +56,12 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone
 
   noOrderItemsFound$ = this.store.noOrderItemsFound$;
 
-  fetching$ = this.store.fetchingOrder$;
+  fetchingOrder$ = this.store.fetchingOrder$;
   fetchingItems$ = this.store.fetchingOrderItems$;
   fetchingCoverItems$ = this.store.fetchingCoverOrderItems$;
 
-  viewFetching$ = combineLatest([this.fetching$, this.fetchingItems$, this.fetchingCoverItems$]).pipe(
-    map(([fetching, fetchingItems, fetchingCoverItems]) => fetching || fetchingItems || fetchingCoverItems)
+  viewFetching$ = combineLatest([this.fetchingItems$, this.orderItems$]).pipe(
+    map(([fetchingItems, orderItems]) => fetchingItems && orderItems.length === 0)
   );
 
   selectedCompartmentInfo = this.store.selectedCompartmentInfo;

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

@@ -212,7 +212,7 @@ export class PickupShelfOutComponent extends PickupShelfBaseComponent {
        */
       const filterQueryParams = this.listStore.filter.getQueryParams();
 
-      if (response.hits === 1 || this._hasSameOrderNumber(response)) {
+      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 } });
       } else if (response.hits > 1) {
@@ -224,10 +224,13 @@ export class PickupShelfOutComponent extends PickupShelfBaseComponent {
     });
   }
 
-  // Fix Ticket #4684 Navigate on Details if items contain same OrderNumber
-  private _hasSameOrderNumber(response: ListResponseArgsOfDBHOrderItemListItemDTO) {
-    if (response.hits === 0) return false;
-    const orderNumbers = new Set(response.result.map((item) => item.orderNumber));
-    return orderNumbers.size === 1;
-  }
+  // Ticket 4720 WA // Trefferliste wird übersprungen - Bei mehreren Bestellposten pro Bestellung soll IMMER auf Trefferliste navigiert werden
+  // Damit werden #4684 und #4688 überflüssig
+
+  // REMOVED: Fix Ticket #4684 Navigate on Details if items contain same OrderNumber
+  // private _hasSameOrderNumber(response: ListResponseArgsOfDBHOrderItemListItemDTO) {
+  //   if (response.hits === 0) return false;
+  //   const orderNumbers = new Set(response.result.map((item) => item.orderNumber));
+  //   return orderNumbers.size === 1;
+  // }
 }

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

@@ -1,11 +1,13 @@
 <ng-container *ngIf="orderItem$ | async; let orderItem">
   <div class="grid grid-flow-row gap-px-2">
     <div class="bg-[#F5F7FA] flex flex-row justify-between items-center p-4 rounded-t">
-      <div class="grid grid-flow-col gap-[0.4375rem] items-center" *ngIf="features$ | async; let features; else: featureLoading">
-        <shared-icon *ngIf="features?.length > 0" [size]="24" icon="person"></shared-icon>
-        <div class="grid grid-flow-col gap-2 items-center font-bold text-p2" *ngFor="let feature of features">
-          {{ feature?.description }}
-        </div>
+      <div class="grid grid-flow-col gap-[0.4375rem] items-center" *ngIf="fetchingCustomerDone$ | async; else featureLoading">
+        <ng-container *ngIf="features$ | async; let features">
+          <shared-icon *ngIf="features?.length > 0" [size]="24" icon="person"></shared-icon>
+          <div class="grid grid-flow-col gap-2 items-center font-bold text-p2" *ngFor="let feature of features">
+            {{ feature?.description }}
+          </div>
+        </ng-container>
       </div>
 
       <button
@@ -18,6 +20,10 @@
       </button>
     </div>
 
+    <ng-template #featureLoading>
+      <shared-skeleton-loader class="w-64 h-6"></shared-skeleton-loader>
+    </ng-template>
+
     <div class="page-pickup-shelf-details-header__details bg-white px-4 pt-4 pb-5">
       <div class="flex flex-row items-center" [class.mb-8]="!orderItem?.features?.paid && !isKulturpass">
         <page-pickup-shelf-details-header-nav-menu class="mr-2" [customer]="customer$ | async"></page-pickup-shelf-details-header-nav-menu>
@@ -96,7 +102,12 @@
         </div>
         <div class="flex flex-row page-pickup-shelf-details-header__order-source" data-detail-id="Bestellkanal">
           <div class="min-w-[9rem]">Bestellkanal</div>
-          <div class="flex flex-row font-bold">{{ order?.features?.orderSource }}</div>
+          <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 }}
+            </ng-template>
+          </div>
         </div>
         <div
           class="flex flex-row page-pickup-shelf-details-header__change-date justify-between"
@@ -137,21 +148,18 @@
             data-detail-id="Benachrichtigung"
           >
             <div class="min-w-[9rem]">Benachrichtigung</div>
-            <div class="flex flex-row font-bold">{{ (notificationsChannel$ | async | notificationsChannel) || '-' }}</div>
+            <div class="flex flex-row font-bold">
+              <shared-skeleton-loader class="w-32" *ngIf="fetchingOrder$ | async; else notificationsChannelTpl"></shared-skeleton-loader>
+              <ng-template #notificationsChannelTpl>
+                {{ (notificationsChannel$ | async | notificationsChannel) || '-' }}
+              </ng-template>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 
-  <ng-template #featureLoading>
-    <div class="fetch-wrapper">
-      <div class="fetching"></div>
-      <div class="fetching"></div>
-      <div class="fetching"></div>
-    </div>
-  </ng-template>
-
   <ng-template #abholfrist>
     <div class="min-w-[9rem]">Abholfrist</div>
     <div *ngIf="!(changeDateLoader$ | async)" class="flex flex-row font-bold">

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

@@ -12,6 +12,7 @@ import { PickupShelfNotificationsChannelPipe } from '../pipes/notifications-chan
 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';
 
 @Component({
   selector: 'page-pickup-shelf-details-header',
@@ -36,6 +37,7 @@ import { PickUpShelfDetailsHeaderNavMenuComponent } from '../pickup-shelf-detail
     UiCommonModule,
     UiDatepickerModule,
     PickUpShelfDetailsHeaderNavMenuComponent,
+    SkeletonLoaderComponent,
   ],
 })
 export class PickUpShelfDetailsHeaderComponent {
@@ -50,6 +52,8 @@ export class PickUpShelfDetailsHeaderComponent {
   @Output()
   updateDate = new EventEmitter<{ date: Date; type?: 'delivery' | 'pickup' | 'preferred' }>();
 
+  fetchingOrder$ = this._store.fetchingOrder$;
+
   get order$(): Observable<OrderDTO> {
     return this._store.order$;
   }
@@ -105,6 +109,8 @@ export class PickUpShelfDetailsHeaderComponent {
 
   changeDateDisabled$ = this.changeStatusDisabled$;
 
+  fetchingCustomerDone$ = this._store.fetchingCustomer$.pipe(map((fetchingCustomer) => !fetchingCustomer));
+
   customer$ = this._store.customer$;
 
   features$ = this.customer$.pipe(

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

@@ -3,7 +3,7 @@
   [routerLink]="itemDetailsLink"
   [routerLinkActive]="!isTablet && !primaryOutletActive ? 'active' : ''"
   queryParamsHandling="preserve"
-  (click)="isDesktopLarge ? scrollIntoView() : ''"
+  (click)="onDetailsClick()"
 >
   <div
     class="page-pickup-shelf-list-item__item-grid-container"

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

@@ -10,6 +10,7 @@ import { PickupShelfProcessingStatusPipe } from '../pipes/processing-status.pipe
 import { FormsModule } from '@angular/forms';
 import { PickupShelfStore } from '../../store';
 import { map } from 'rxjs/operators';
+import { CacheService } from '@core/cache';
 
 @Component({
   selector: 'page-pickup-shelf-list-item',
@@ -34,6 +35,8 @@ import { map } from 'rxjs/operators';
   providers: [PickupShelfProcessingStatusPipe],
 })
 export class PickUpShelfListItemComponent {
+  private cache = inject(CacheService);
+
   store = inject(PickupShelfStore);
 
   @Input() item: DBHOrderItemListItemDTO;
@@ -85,6 +88,45 @@ export class PickUpShelfListItemComponent {
     private _processingStatusPipe: PickupShelfProcessingStatusPipe
   ) {}
 
+  onDetailsClick() {
+    if (this.isDesktopLarge) {
+      this.scrollIntoView();
+    }
+
+    if (!this.hasOrderItemInCache()) {
+      this.addOrderItemIntoCache();
+    }
+  }
+
+  hasOrderItemInCache() {
+    const items =
+      this.cache.get<DBHOrderItemListItemDTO[]>({
+        name: 'orderItems',
+        orderId: this.item.orderId,
+        compartmentCode: this.item.compartmentCode,
+        compartmentInfo: this.item.compartmentInfo,
+        orderItemProcessingStatus: this.item.processingStatus,
+        store: 'PickupShelfDetailsStore',
+      }) ?? [];
+
+    return items.some((i) => i.orderItemSubsetId === this.item.orderItemSubsetId);
+  }
+
+  addOrderItemIntoCache() {
+    this.cache.set(
+      {
+        name: 'orderItems',
+        orderId: this.item.orderId,
+        compartmentCode: this.item.compartmentCode,
+        compartmentInfo: this.item.compartmentInfo,
+        orderItemProcessingStatus: this.item.processingStatus,
+        store: 'PickupShelfDetailsStore',
+      },
+      [this.item],
+      { persist: false, ttl: 1000 }
+    );
+  }
+
   scrollIntoView() {
     this._elRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
   }

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

@@ -18,7 +18,7 @@ import {
 } from '@swagger/oms';
 import { PickupShelfIOService, PickupShelfService } from '@domain/pickup-shelf';
 import { Injectable, inject } from '@angular/core';
-import { debounceTime, delayWhen, distinctUntilChanged, filter, mergeMap, switchMap, take, tap, withLatestFrom } from 'rxjs/operators';
+import { delayWhen, filter, 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';
@@ -27,7 +27,6 @@ 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<PickupShelfDetailsState> {
@@ -340,6 +339,7 @@ export class PickupShelfDetailsStore extends ComponentStore<PickupShelfDetailsSt
   fetchOrder = this.effect((trigger$: Observable<{ orderId: number }>) =>
     trigger$.pipe(
       tap(({ orderId }) => this.beforeFetchOrder(orderId)),
+      // delay(10000),
       switchMap(({ orderId }) =>
         this._pickupShelfService.getOrderByOrderId(orderId).pipe(tapResponse(this.fetchOrderSuccess, this.fetchOrderFailed))
       )
@@ -347,7 +347,7 @@ export class PickupShelfDetailsStore extends ComponentStore<PickupShelfDetailsSt
   );
 
   private beforeFetchOrder = (orderId) => {
-    const order = this._cacheService.get<OrderDTO>({ name: 'order', orderId, store: 'PickupShelfDetailsStore' });
+    const order = this._cacheService.get<OrderDTO>({ name: 'order', orderId, store: 'PickupShelfDetailsStore' }) ?? { id: orderId };
     const customer = this._cacheService.get<CustomerInfoDTO>({
       name: 'customer',
       orderId,
@@ -480,7 +480,7 @@ export class PickupShelfDetailsStore extends ComponentStore<PickupShelfDetailsSt
   fetchCustomer = this.effect((trigger$: Observable<{ buyerNumber: string }>) =>
     trigger$.pipe(
       filter(({ buyerNumber }) => this.customer?.customerNumber !== buyerNumber),
-      tap(this.beforeFetchCustomer),
+      tap(() => this.beforeFetchCustomer()),
       switchMap(({ buyerNumber }) =>
         this._customerService.getCustomers(buyerNumber).pipe(tapResponse(this.fetchCustomerSuccess, this.fetchCustomerFailed))
       )
@@ -493,7 +493,7 @@ export class PickupShelfDetailsStore extends ComponentStore<PickupShelfDetailsSt
       orderId: this.order.id,
       store: 'PickupShelfDetailsStore',
     });
-    this.patchState({ fetchingCustomer: true, customer });
+    this.patchState({ fetchingCustomer: !customer, customer: customer });
   };
 
   fetchCustomerSuccess = (res: ListResponseArgsOfCustomerInfoDTO) => {
@@ -502,6 +502,7 @@ export class PickupShelfDetailsStore extends ComponentStore<PickupShelfDetailsSt
     // check if response contains exactly one customer
     if (customers.length > 1) {
       this._modal.error('Fehler beim Laden des Kunden', new Error('Es wurde mehr als ein Kunde gefunden.'));
+      this.patchState({ fetchingCustomer: false });
       return;
     }
 
@@ -518,6 +519,7 @@ export class PickupShelfDetailsStore extends ComponentStore<PickupShelfDetailsSt
     // also check if the order is a KulturPass order, then there may be no customer
     if (!isKulturpass && customer?.customerNumber !== this.order.buyer.buyerNumber) {
       this._modal.error('Fehler beim Laden des Kunden', new Error('Der Kunde ist nicht der Bestellung zugeordnet.'));
+      this.patchState({ fetchingCustomer: false });
       return;
     }
 

apps/page/remission/src/lib/modals/add-product-modal/add-product-modal.module.ts

@@ -11,6 +11,7 @@ import { UiTooltipModule } from '@ui/tooltip';
 import { UiCommonModule } from '@ui/common';
 import { UiDropdownModule } from '@ui/dropdown';
 import { UiIconModule } from '@ui/icon';
+import { SharedProductGroupPipe } from '@shared/pipes/product-group';
 
 @NgModule({
   imports: [
@@ -25,6 +26,7 @@ import { UiIconModule } from '@ui/icon';
     UiTooltipModule,
     UiDropdownModule,
     UiIconModule,
+    SharedProductGroupPipe,
   ],
   exports: [AddProductModalComponent],
   declarations: [AddProductModalComponent],

apps/page/remission/src/lib/pipes/index.ts

@@ -1,2 +1 @@
-export * from './product-group.pipe';
 export * from './remission-pipe.module';

apps/page/remission/src/lib/pipes/remission-pipe.module.ts

@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core';
 import { AssortmentPipe } from './assortment.pipe';
-import { ProductGroupPipe } from './product-group.pipe';
 import { ShortReceiptNumberPipe } from './short-receipt-number.pipe';
 import { SupplierPipe } from './supplier.pipe';
 
 @NgModule({
-  declarations: [ProductGroupPipe, AssortmentPipe, ShortReceiptNumberPipe, SupplierPipe],
-  exports: [ProductGroupPipe, AssortmentPipe, ShortReceiptNumberPipe, SupplierPipe],
+  declarations: [AssortmentPipe, ShortReceiptNumberPipe, SupplierPipe],
+  exports: [AssortmentPipe, ShortReceiptNumberPipe, SupplierPipe],
 })
 export class RemissionPipeModule {}

apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.module.ts

@@ -8,6 +8,7 @@ import { UiTooltipModule } from '@ui/tooltip';
 import { UiCommonModule } from '@ui/common';
 import { AddProductToShippingDocumentModalModule } from '../../modals/add-product-to-shipping-document-modal/add-product-to-shipping-document-modal.module';
 import { UiSpinnerModule } from '@ui/spinner';
+import { SharedProductGroupPipe } from '@shared/pipes/product-group';
 
 @NgModule({
   imports: [
@@ -18,6 +19,7 @@ import { UiSpinnerModule } from '@ui/spinner';
     RemissionPipeModule,
     UiTooltipModule,
     AddProductToShippingDocumentModalModule,
+    SharedProductGroupPipe,
   ],
   exports: [RemissionListItemComponent],
   declarations: [RemissionListItemComponent],

apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details.module.ts

@@ -5,9 +5,10 @@ import { UiSpinnerModule } from '@ui/spinner';
 import { RemissionPipeModule } from '../../pipes';
 import { SharedShippingDocumentDetailsItemComponent } from './shipping-document-details-item/shipping-document-details-item.component';
 import { SharedShippingDocumentDetailsComponent } from './shipping-document-details.component';
+import { SharedProductGroupPipe } from '@shared/pipes/product-group';
 
 @NgModule({
-  imports: [CommonModule, RemissionPipeModule, ProductImageModule, UiSpinnerModule],
+  imports: [CommonModule, RemissionPipeModule, ProductImageModule, UiSpinnerModule, SharedProductGroupPipe],
   exports: [SharedShippingDocumentDetailsComponent, SharedShippingDocumentDetailsItemComponent],
   declarations: [SharedShippingDocumentDetailsComponent, SharedShippingDocumentDetailsItemComponent],
   providers: [],

apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group-item.component.html

@@ -18,7 +18,21 @@
   <div class="goods-in-out-order-group-item-details-thumbnail">
     <img loading="lazy" *ngIf="item?.product?.ean | productImage; let productImage" [src]="productImage" [alt]="item?.product?.name" />
   </div>
-  <div class="goods-in-out-order-group-item-details-data">
+  <div data-which="item-details-data" class="goods-in-out-order-group-item-details-data">
+    <div
+      data-what="product-group"
+      *ngIf="item?.product?.productGroup"
+      class="goods-in-out-order-group-item-details__product-group flex flex-row justify-end items-center text-p3"
+    >
+      {{ item?.product?.productGroup }}: {{ item?.product?.productGroup | productGroup }}
+    </div>
+    <div
+      *ngIf="compartmentFromStock"
+      data-what="compartment"
+      class="goods-in-out-order-group-item-details__compartment flex flex-row justify-end items-center text-p3"
+    >
+      {{ compartmentFromStock }}
+    </div>
     <div class="item-top-row">
       <div class="item-title">{{ [item.product.contributors, item.product.name] | title }}</div>
       <div class="item-processing-status">

apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group-item.component.ts

@@ -78,7 +78,15 @@ export class GoodsInOutOrderGroupItemComponent extends ComponentStore<GoodsInOut
   showSupplier: boolean;
 
   @Input()
-  showInStock: StockInfoDTO[];
+  showInStock?: StockInfoDTO[];
+
+  get stockInfoForItem() {
+    return this.showInStock?.find((stock) => stock?.ean === this.item?.product?.ean);
+  }
+
+  get compartmentFromStock() {
+    return this.stockInfoForItem?.compartment;
+  }
 
   get cruda() {
     return (this.item as any)?.cruda;

apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group.module.ts

@@ -10,6 +10,7 @@ import { UiSelectBulletModule } from '@ui/select-bullet';
 import { FormsModule } from '@angular/forms';
 import { UiQuantityDropdownModule } from '@ui/quantity-dropdown';
 import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module';
+import { SharedProductGroupPipe } from '@shared/pipes/product-group';
 
 @NgModule({
   imports: [
@@ -21,6 +22,7 @@ import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module';
     FormsModule,
     UiQuantityDropdownModule,
     UiSpinnerModule,
+    SharedProductGroupPipe,
   ],
   exports: [GoodsInOutOrderGroupComponent, GoodsInOutOrderGroupItemComponent],
   declarations: [GoodsInOutOrderGroupComponent, GoodsInOutOrderGroupItemComponent],

apps/shared/components/loader/src/lib/skeleton-loader.component.css

@@ -1,16 +1,20 @@
 :host {
-  @apply inline-block min-h-[1rem] min-w-[2rem] bg-gray-500;
+  @apply inline-block min-h-[1rem] min-w-[2rem] overflow-hidden rounded;
+  background: rgb(238, 238, 238);
+}
+
+.gr-bar {
+  @apply w-full h-full;
   animation: load 1s ease-in-out infinite;
+
+  background: linear-gradient(75deg, rgba(238, 238, 238, 1) 0%, rgba(190, 190, 190, 1) 50%, rgba(238, 238, 238, 1) 100%);
 }
 
 @keyframes load {
   0% {
-    opacity: 0;
-  }
-  30% {
-    opacity: 0.5;
+    transform: translateX(-100%);
   }
   100% {
-    opacity: 0;
+    transform: translateX(100%);
   }
 }

apps/shared/components/loader/src/lib/skeleton-loader.component.html

@@ -0,0 +1 @@
+<div class="gr-bar"></div>

apps/shared/pipes/product-group/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/shared/pipes/product-group/src/lib/product-group.pipe.ts

@@ -6,8 +6,9 @@ import { distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 @Pipe({
   name: 'productGroup',
   pure: false,
+  standalone: true,
 })
-export class ProductGroupPipe implements PipeTransform, OnDestroy {
+export class SharedProductGroupPipe implements PipeTransform, OnDestroy {
   result: string;
 
   productGroup$ = new Subject<string>();

apps/shared/pipes/product-group/src/public-api.ts

@@ -0,0 +1 @@
+export * from './lib/product-group.pipe';

package.json

@@ -62,17 +62,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.1.7",
-    "@angular/cdk": "^16.1.6",
-    "@angular/common": "^16.1.7",
-    "@angular/compiler": "^16.1.7",
-    "@angular/core": "^16.1.7",
-    "@angular/forms": "^16.1.7",
-    "@angular/localize": "^16.1.7",
-    "@angular/platform-browser": "^16.1.7",
-    "@angular/platform-browser-dynamic": "^16.1.7",
-    "@angular/router": "^16.1.7",
-    "@angular/service-worker": "^16.1.7",
+    "@angular/animations": "^17.3.10",
+    "@angular/cdk": "^17.3.10",
+    "@angular/common": "^17.3.10",
+    "@angular/compiler": "^17.3.10",
+    "@angular/core": "^17.3.10",
+    "@angular/forms": "^17.3.10",
+    "@angular/localize": "^17.3.10",
+    "@angular/platform-browser": "^17.3.10",
+    "@angular/platform-browser-dynamic": "^17.3.10",
+    "@angular/router": "^17.3.10",
+    "@angular/service-worker": "^17.3.10",
     "@microsoft/signalr": "^7.0.0",
     "@ngrx/component-store": "^16.1.0",
     "@ngrx/effects": "^16.1.0",
@@ -94,13 +94,13 @@
     "uglify-js": "^3.4.9",
     "uuid": "^8.3.2",
     "web-animations-js": "^2.3.2",
-    "zone.js": "~0.13.1"
+    "zone.js": "~0.14.6"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.1.6",
-    "@angular/cli": "^16.1.6",
-    "@angular/compiler-cli": "^16.1.7",
-    "@angular/language-service": "^16.1.7",
+    "@angular-devkit/build-angular": "^17.3.8",
+    "@angular/cli": "^17.3.8",
+    "@angular/compiler-cli": "^17.3.10",
+    "@angular/language-service": "^17.3.10",
     "@ngneat/spectator": "^15.0.1",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
@@ -121,8 +121,8 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-junit-reporter": "^2.0.1",
-    "ng-mocks": "^14.11.0",
-    "ng-packagr": "^16.1.0",
+    "ng-mocks": "^14.12.2",
+    "ng-packagr": "^17.3.0",
     "ng-swagger-gen": "^2.3.1",
     "ngrx-store-freeze": "^0.2.4",
     "npm-run-all": "^4.1.5",
@@ -137,10 +137,6 @@
     "tailwindcss": "^3.1.8",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",
-    "typescript": "~5.1.6"
-  },
-  "engines": {
-    "node": "18.x",
-    "npm": "8.x"
+    "typescript": "^5.2"
   }
 }