Merge branch 'develop' into feature/signalr

apps/domain/oms/src/lib/action-handlers/order-at-supplier.action-handler.ts

@@ -1,6 +1,7 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ActionHandler } from '@core/command';
+import { OrderItemListItemDTO } from '@swagger/oms';
 import { isResponseArgs } from '@utils/object';
 import { first } from 'rxjs/operators';
 import { DomainOmsService } from '../oms.service';
@@ -13,6 +14,7 @@ export class OrderAtSupplierActionHandler extends ActionHandler<OrderItemsContex
   }
 
   async handler(data: OrderItemsContext): Promise<OrderItemsContext> {
+    const updatedItems: OrderItemListItemDTO[] = [];
     for (const item of data?.items) {
       try {
         const res = await this._domainOmsService
@@ -23,6 +25,7 @@ export class OrderAtSupplierActionHandler extends ActionHandler<OrderItemsContex
           })
           .pipe(first())
           .toPromise();
+        updatedItems.push({ ...item, processingStatus: 16 });
       } catch (err) {
         if (err instanceof HttpErrorResponse && isResponseArgs(err.error)) {
           console.error('InvalidProperties: ', err.error.invalidProperties);
@@ -34,6 +37,6 @@ export class OrderAtSupplierActionHandler extends ActionHandler<OrderItemsContex
         throw err;
       }
     }
-    return data;
+    return { ...data, items: updatedItems };
   }
 }

apps/domain/oms/src/lib/action-handlers/re-order.action-handler.ts

@@ -18,6 +18,7 @@ export class ReOrderActionHandler extends ActionHandler<OrderItemsContext> {
       const result = await this._uiModal
         .open<ReorderResult, OrderItemListItemDTO>({
           content: ReorderModalComponent,
+          title: 'Artikel nachbestellen',
           data: orderItem,
         })
         .afterClosed$.toPromise();

apps/domain/oms/src/lib/goods.service.spec.ts

@@ -1,6 +1,6 @@
 import { createServiceFactory, SpectatorService } from '@ngneat/spectator';
 import { AbholfachService, AutocompleteTokenDTO, QueryTokenDTO } from '@swagger/oms';
-import { DateAdapter, NativeDateAdapter } from '@ui/common';
+import { DateAdapter } from '@ui/common';
 import { cold, hot } from 'jasmine-marbles';
 import { DomainGoodsService } from './goods.service';
 
@@ -8,7 +8,7 @@ describe('DomainGoodsInServie', () => {
   let spectator: SpectatorService<DomainGoodsService>;
   const createService = createServiceFactory({
     service: DomainGoodsService,
-    providers: [{ provide: DateAdapter, useClass: NativeDateAdapter }],
+    providers: [DateAdapter],
     mocks: [AbholfachService],
   });
 

apps/domain/oms/src/lib/oms.service.ts

@@ -60,9 +60,10 @@ export class DomainOmsService {
     return this.orderService.OrderGetVATs({}).pipe(map((response) => response.result));
   }
 
-  @memorize()
-  getStockStatusCodes(supplierId: number) {
-    return this.orderService.OrderGetStockStatusCodes({ supplierId }).pipe(
+  // ttl 4 Stunden
+  @memorize({ ttl: 14400000 })
+  getStockStatusCodes({ supplierId, eagerLoading = 0 }: { supplierId: number; eagerLoading?: number }) {
+    return this.orderService.OrderGetStockStatusCodes({ supplierId, eagerLoading }).pipe(
       map((response) => response.result),
       shareReplay()
     );

apps/modal/availabilities/src/lib/availabilities.component.html

@@ -1,9 +1,3 @@
-<button class="close-btn" (click)="close()">
-  <ui-icon icon="close" size="21px"></ui-icon>
-</button>
-
-<h1>Weitere Verfügbarkeiten</h1>
-
 <ui-searchbox>
   <input #input [ngModel]="search$ | async" uiSearchboxInput type="text" placeholder="PLZ, Ort" (keydown.enter)="filter(input.value)" />
   <button

apps/modal/availabilities/src/lib/availabilities.component.scss

@@ -2,14 +2,6 @@
   @apply flex flex-col relative;
 }
 
-h1 {
-  @apply text-xl font-bold text-center;
-}
-
-.close-btn {
-  @apply absolute right-0 top-0 bg-transparent border-none text-ucla-blue;
-}
-
 .subtitle {
   @apply text-center text-regular my-6;
 }
@@ -51,15 +43,18 @@ hr {
   min-height: 600px;
 
   .branch {
-    @apply flex flex-row justify-between px-2 pt-6;
+    @apply flex flex-row justify-between items-center px-2 pt-6;
     padding-bottom: 19px;
 
     .branch-info {
+      @apply flex flex-row;
+      max-width: 505px;
+
       .branch-name {
-        @apply font-bold;
+        @apply font-bold whitespace-nowrap;
       }
       .branch-address {
-        @apply ml-5;
+        @apply ml-5 whitespace-nowrap overflow-hidden overflow-ellipsis;
       }
     }
 
@@ -85,3 +80,13 @@ hr {
     }
   }
 }
+
+@media (min-width: 900px) {
+  .branches {
+    .branch {
+      .branch-info {
+        max-width: none;
+      }
+    }
+  }
+}

apps/modal/history/src/lib/history.component.html

@@ -1,10 +1,4 @@
 <div class="wrapper">
-  <div class="actions">
-    <button class="close-btn" (click)="ref.close()">
-      <ui-icon icon="close" size="21px"></ui-icon>
-    </button>
-  </div>
-  <h2>Historie</h2>
   <div class="customer">
     <div class="row">
       <span class="label">Kundenname</span>
@@ -28,7 +22,12 @@
           <div *ngIf="history.changedBy">| {{ history.changedBy }}</div>
         </div>
         <div class="row details title">
-          Kundendaten wurden geändert
+          <ng-container *ngIf="ref?.data?.mode === 'goods'; else customer">
+            Status der Bestellung wurde geändert
+          </ng-container>
+          <ng-template #customer>
+            Kundendaten wurden geändert
+          </ng-template>
         </div>
         <br />
         <div *ngFor="let values of history?.values" class="row details changes">

apps/modal/history/src/lib/history.component.scss

@@ -10,18 +10,6 @@ $border-size-cover: 2px;
   min-height: 500px;
 }
 
-.actions {
-  @apply flex flex-row justify-end;
-}
-
-.close-btn {
-  @apply bg-transparent border-none text-ucla-blue;
-}
-
-h2 {
-  @apply mt-0 font-bold text-center text-card-sub;
-}
-
 .row {
   @apply w-full flex flex-row flex-grow items-center px-2 my-2;
 

apps/modal/images/src/lib/images.component.html

@@ -1,9 +1,3 @@
-<button class="close-btn" (click)="close()">
-  <ui-icon icon="close" size="21px"></ui-icon>
-</button>
-
-<h1>{{ title }}</h1>
-
 <div class="image-wrapper">
   <img class="image" [src]="activeImage.url" alt="product-image" />
 </div>

apps/modal/images/src/lib/images.component.scss

@@ -2,14 +2,6 @@
   @apply flex flex-col relative;
 }
 
-h1 {
-  @apply text-center text-xl;
-}
-
-.close-btn {
-  @apply absolute right-0 top-0 bg-transparent border-none text-ucla-blue;
-}
-
 .image-wrapper {
   @apply flex flex-row justify-center mt-2;
 

apps/modal/images/src/lib/images.component.ts

@@ -9,7 +9,6 @@ import { UiModalRef } from '@ui/modal';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ModalImagesComponent {
-  title = this.modalRef.data.title;
   images = this.modalRef.data.images;
   activeImage = this.modalRef.data.images[0];
 

apps/modal/printer/src/lib/modal-printer.component.html

@@ -1,10 +1,4 @@
 <div class="wrapper">
-  <div class="actions">
-    <button class="close-btn" (click)="modalRef.close()">
-      <ui-icon icon="close" size="21px"></ui-icon>
-    </button>
-  </div>
-
   <div class="header">
     <h1>Wählen Sie einen Drucker aus</h1>
 

apps/modal/printer/src/lib/modal-printer.component.scss

@@ -1,11 +1,3 @@
-.actions {
-  @apply flex flex-row justify-end;
-}
-
-.close-btn {
-  @apply bg-transparent border-none text-ucla-blue;
-}
-
 .header {
   @apply text-center;
 

apps/modal/reorder/src/lib/reorder.component.html

@@ -1,8 +1,3 @@
-<button class="close-btn" (click)="modalRef.close()">
-  <ui-icon icon="close" size="21px"></ui-icon>
-</button>
-
-<h1>Artikel nachbestellen</h1>
 <h3>Woher wollen Sie den Artikel beziehen?</h3>
 
 <hr />

apps/modal/reorder/src/lib/reorder.component.scss

@@ -2,14 +2,6 @@
   @apply block box-border relative;
 }
 
-.close-btn {
-  @apply absolute top-0 right-0 text-ucla-blue border-none bg-transparent;
-}
-
-h1 {
-  @apply text-card-sub font-bold text-center pt-5;
-}
-
 h3 {
   @apply text-regular font-semibold text-center;
 }

apps/modal/reorder/src/lib/reorder.component.ts

@@ -99,7 +99,7 @@ export class ReorderModalComponent extends ComponentStore<GoodsInListReorderModa
   );
 
   readonly availabilities$ = combineLatest([this.storeAvailabilities$, this.takeAwayAvailability$]).pipe(
-    map(([storeAvailabilities, takeAwayAvailability]) => [...storeAvailabilities, takeAwayAvailability])
+    map(([storeAvailabilities, takeAwayAvailability]) => [...(storeAvailabilities ?? []), takeAwayAvailability])
   );
 
   isChecked: boolean;

apps/modal/reviews/src/lib/reviews.component.html

@@ -1,9 +1,3 @@
-<button class="close-btn" (click)="close()">
-  <ui-icon icon="close" size="21px"></ui-icon>
-</button>
-
-<h1>{{ reviews.length }} Rezensionen</h1>
-
 <div class="full-rating">
   <ui-stars [rating]="rating" size="18px"></ui-stars>
   <span class="label">{{ rating }} Sterne</span>

apps/modal/reviews/src/lib/reviews.component.scss

@@ -3,14 +3,6 @@
   max-height: 850px;
 }
 
-h1 {
-  @apply text-center text-xl;
-}
-
-.close-btn {
-  @apply absolute right-0 top-0 bg-transparent border-none text-ucla-blue;
-}
-
 .full-rating {
   @apply flex items-center justify-center text-lg font-bold text-ucla-blue mt-5;
 

apps/page/catalog/src/lib/article-details/article-details.component.ts

@@ -131,6 +131,7 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
 
     this.uiModal.open({
       content: ModalReviewsComponent,
+      title: `${item.reviews?.length} Rezensionen`,
       data: item.reviews,
     });
   }
@@ -139,6 +140,7 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
     const item = await this.store.item$.pipe(first()).toPromise();
     const modal = this.uiModal.open<BranchDTO>({
       content: ModalAvailabilitiesComponent,
+      title: 'Weitere Verfügbarkeiten',
       data: {
         item,
       },
@@ -172,8 +174,8 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
 
     this.uiModal.open({
       content: ModalImagesComponent,
+      title: item.product.name,
       data: {
-        title: item.product.name,
         images,
       },
     });

apps/page/catalog/src/lib/article-details/article-details.store.ts

@@ -80,7 +80,7 @@ export class ArticleDetailsStore extends ComponentStore<ArticleDetailsState> {
         : of(undefined)
     ),
     tap(() => this.patchState({ fetchingPromotionPoints: false })),
-    shareReplay()
+    shareReplay(1)
   );
   //#endregion
 
@@ -100,7 +100,7 @@ export class ArticleDetailsStore extends ComponentStore<ArticleDetailsState> {
         : of(undefined)
     ),
     tap(() => this.patchState({ fetchingTakeAwayAvailability: false })),
-    shareReplay()
+    shareReplay(1)
   );
   readonly isTakeAwayAvailabilityAvailable$ = this.select(this.takeAwayAvailability$, (availability) =>
     this.domainAvailabilityService.isAvailable({ availability })
@@ -123,7 +123,7 @@ export class ArticleDetailsStore extends ComponentStore<ArticleDetailsState> {
         : of(undefined)
     ),
     tap(() => this.patchState({ fetchingPickUpAvailability: false })),
-    shareReplay()
+    shareReplay(1)
   );
   readonly isPickUpAvailabilityAvailable$ = this.select(this.pickUpAvailability$, (availability) =>
     this.domainAvailabilityService.isAvailable({ availability })
@@ -146,7 +146,7 @@ export class ArticleDetailsStore extends ComponentStore<ArticleDetailsState> {
         : of(undefined)
     ),
     tap(() => this.patchState({ fetchingDownloadAvailability: false })),
-    shareReplay()
+    shareReplay(1)
   );
   readonly isDownloadAvailabilityAvailable$ = this.select(this.downloadAvailability$, (availability) =>
     this.domainAvailabilityService.isAvailable({ availability })
@@ -169,7 +169,7 @@ export class ArticleDetailsStore extends ComponentStore<ArticleDetailsState> {
         : of(undefined)
     ),
     tap(() => this.patchState({ fetchingDeliveryAvailability: false })),
-    shareReplay()
+    shareReplay(1)
   );
   readonly isDeliveryAvailabilityAvailable$ = this.select(this.deliveryAvailability$, (availability) =>
     this.domainAvailabilityService.isAvailable({ availability })
@@ -192,7 +192,7 @@ export class ArticleDetailsStore extends ComponentStore<ArticleDetailsState> {
         : of(undefined)
     ),
     tap(() => this.patchState({ fetchingDeliveryDigAvailability: false })),
-    shareReplay()
+    shareReplay(1)
   );
   readonly isDeliveryDigAvailabilityAvailable$ = this.select(this.deliveryDigAvailability$, (availability) =>
     this.domainAvailabilityService.isAvailable({ availability })
@@ -215,7 +215,7 @@ export class ArticleDetailsStore extends ComponentStore<ArticleDetailsState> {
         : of(undefined)
     ),
     tap(() => this.patchState({ fetchingDeliveryB2BAvailability: false })),
-    shareReplay()
+    shareReplay(1)
   );
   readonly isDeliveryB2BAvailabilityAvailable$ = this.select(this.deliveryB2BAvailability$, (availability) =>
     this.domainAvailabilityService.isAvailable({ availability })

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html

@@ -16,11 +16,11 @@
 
   <div
     class="item-title"
-    [class.xl]="item?.product?.name.length >= 50"
-    [class.lg]="item?.product?.name.length >= 60"
-    [class.md]="item?.product?.name.length >= 70"
-    [class.sm]="item?.product?.name.length >= 80"
-    [class.xs]="item?.product?.name.length >= 90"
+    [class.xl]="item?.product?.name?.length >= 35"
+    [class.lg]="item?.product?.name?.length >= 40"
+    [class.md]="item?.product?.name?.length >= 50"
+    [class.sm]="item?.product?.name?.length >= 60"
+    [class.xs]="item?.product?.name?.length >= 100"
   >
     {{ item?.product?.name }}
   </div>
@@ -31,7 +31,9 @@
 
   <div class="item-stock"><ui-icon icon="home" size="1em"></ui-icon> {{ item?.stockInfos | stockInfos }} x</div>
 
-  <div class="item-ssc">{{ item?.catalogAvailability?.ssc }} - {{ item?.catalogAvailability?.sscText }}</div>
+  <div class="item-ssc" [class.xs]="item?.catalogAvailability?.sscText?.length >= 60">
+    {{ item?.catalogAvailability?.ssc }} - {{ item?.catalogAvailability?.sscText }}
+  </div>
 
   <div class="item-format">
     <img
@@ -44,7 +46,7 @@
   </div>
 
   <div class="item-misc">
-    {{ item?.product?.manufacturer | substr: 25 }} | {{ item?.product?.ean }} <br />
+    {{ item?.product?.manufacturer | substr: 18 }} | {{ item?.product?.ean }} <br />
     {{ item?.product?.volume }} <span *ngIf="item?.product?.volume && item?.product?.publicationDate">|</span>
     {{ item?.product?.publicationDate | date: 'MMMM yyyy' }}
   </div>

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss

@@ -1,6 +1,6 @@
 .product-list-result-content {
   @apply text-black no-underline grid;
-  grid-template-columns: auto 1fr 230px;
+  grid-template-columns: 102px 50% auto;
   grid-template-rows: auto;
   grid-template-areas:
     'item-thumbnail item-contributors item-contributors'
@@ -67,7 +67,7 @@
 
 .item-format {
   grid-area: item-format;
-  @apply flex flex-row items-center font-bold text-lg;
+  @apply flex flex-row items-center font-bold text-lg whitespace-nowrap;
 
   img {
     @apply mr-2;
@@ -92,6 +92,10 @@
   @apply font-bold text-right;
 }
 
+.item-ssc.xs {
+  @apply font-bold text-xs;
+}
+
 @media (min-width: 1025px) {
   .item-contributors {
     max-width: 780px;

apps/page/checkout/src/lib/modals/purchasing-options-modal/pick-up-option/pick-up-dropdown/pick-up-dropdown.component.html

@@ -23,7 +23,7 @@
           [(ngModel)]="searchFilter"
           class="searchbox"
           type="text"
-          placeholder="Suche nach PLZ, ..."
+          placeholder="Suche nach Filialnamen"
         />
         <button class="search-icon">
           <ui-icon size="15px" icon="search"></ui-icon>

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.html

@@ -1,8 +1,5 @@
 <ng-container *ngIf="(hasOption$ | async) === false">
   <h3 class="modal-title">Wie möchten Sie den Artikel erhalten?</h3>
-  <button class="close-btn" (click)="modalRef.close()">
-    <ui-icon icon="close" size="21px"></ui-icon>
-  </button>
 
   <div class="options-wrapper">
     <ng-container *ngFor="let option of availableOptions$ | async" [ngSwitch]="option">
@@ -17,9 +14,6 @@
 
 <ng-container *ngIf="hasOption$ | async">
   <h3 class="modal-title">Artikel dem Warenkorb hinzufügen</h3>
-  <button class="close-btn" (click)="modalRef.close()">
-    <ui-icon icon="close" size="21px"></ui-icon>
-  </button>
 
   <div class="option-product-summary" *ngIf="item$ | async; let item">
     <div class="header-row">
@@ -30,7 +24,7 @@
 
         {{ option | purchaseOptionName }}
       </h5>
-      <span>
+      <span *ngIf="(option$ | async) !== 'download'">
         in der Filiale:
         <span class="option-branch">{{ (branch$ | async)?.name }}</span>
       </span>

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.scss

@@ -1,15 +1,11 @@
 :host {
-  @apply block box-border relative;
+  @apply block box-border;
 }
 
 .modal-title {
   @apply text-center mt-2 text-xl;
 }
 
-.close-btn {
-  @apply absolute top-0 right-0 text-ucla-blue border-none bg-transparent;
-}
-
 .cta-modify {
   @apply self-end bg-transparent text-brand font-bold text-lg outline-none border-none;
 }

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.ts

@@ -133,12 +133,12 @@ export class PurchasingOptionsModalComponent {
     private breadcrumb: BreadcrumbService
   ) {
     this.purchasingOptionsModalStore.setShoppingCartItem(this.modalRef.data.shoppingCartItem);
-    this.purchasingOptionsModalStore.setAvailableOptions(this.modalRef.data.availableOptions);
     this.purchasingOptionsModalStore.setItem(this.modalRef.data.item);
     this.purchasingOptionsModalStore.setProcessId(this.modalRef.data.processId || this.application.activatedProcessId);
     this.purchasingOptionsModalStore.setAvailabilities(this.modalRef.data.availabilities || {});
     this.purchasingOptionsModalStore.setQuantity(this.modalRef?.data?.shoppingCartItem?.quantity || 1);
     this.purchasingOptionsModalStore.setOption(this.modalRef.data.option);
+    this.purchasingOptionsModalStore.setAvailableOptions(this.modalRef.data.availableOptions);
 
     if (this.modalRef.data.availableOptions?.some((option) => option === 'pick-up' || option === 'take-away')) {
       this.purchasingOptionsModalStore.loadBranches(this.modalRef?.data?.branchId);

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.store.ts

@@ -267,7 +267,7 @@ export class PurchasingOptionsModalStore extends ComponentStore<PurchasingOption
   });
 
   readonly setAvailableOptions = this.updater((state, availableOptions: PurchasingOptions[]) => {
-    let option;
+    let option = state.option;
     if (availableOptions?.length === 1 && availableOptions[0] === 'download') {
       option = availableOptions[0];
     }

apps/page/customer/src/lib/customer-create/customer-create-b2b.component.html

@@ -24,13 +24,13 @@
       </ng-container>
 
       <div class="control-row">
-        <ui-form-control label="Anrede" [clearable]="false" [requiredMark]="control.value.lastName ? '*' : ''">
+        <ui-form-control label="Anrede" [clearable]="true" [requiredMark]="control.value.lastName ? '*' : ''">
           <ui-select formControlName="gender" tabindex="4">
             <ui-select-option [value]="2" label="Herr"></ui-select-option>
             <ui-select-option [value]="4" label="Frau"></ui-select-option>
           </ui-select>
         </ui-form-control>
-        <ui-form-control label="Titel">
+        <ui-form-control [clearable]="true" label="Titel">
           <ui-select formControlName="title" tabindex="5">
             <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
             <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -74,7 +74,7 @@
           <input uiInput type="text" formControlName="info" tabindex="12" />
         </ui-form-control>
 
-        <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+        <ui-form-control label="Land" [clearable]="true" requiredMark="*">
           <ui-select formControlName="country" tabindex="13">
             <ui-select-option
               *ngFor="let country of countries$ | async"
@@ -131,7 +131,7 @@
         <div class="control-row">
           <ui-form-control
             label="Anrede"
-            [clearable]="false"
+            [clearable]="true"
             [requiredMark]="control.get('shippingAddress').get('organisation').value.name ? '' : '*'"
           >
             <ui-select formControlName="gender" tabindex="21">
@@ -139,7 +139,7 @@
               <ui-select-option [value]="4" label="Frau"></ui-select-option>
             </ui-select>
           </ui-form-control>
-          <ui-form-control label="Titel">
+          <ui-form-control [clearable]="true" label="Titel">
             <ui-select formControlName="title" tabindex="22">
               <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
               <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -183,7 +183,7 @@
             <input uiInput type="text" formControlName="info" tabindex="29" />
           </ui-form-control>
 
-          <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+          <ui-form-control label="Land" [clearable]="true" requiredMark="*">
             <ui-select formControlName="country" tabindex="30">
               <ui-select-option
                 *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-create/customer-create-branch.component.html

@@ -10,13 +10,13 @@
   <div class="router-outlet-wrapper">
     <form *ngIf="control" [formGroup]="control" (ngSubmit)="submit()">
       <div class="control-row">
-        <ui-form-control label="Anrede" requiredMark="*">
+        <ui-form-control [clearable]="true" label="Anrede" requiredMark="*">
           <ui-select formControlName="gender" tabindex="1">
             <ui-select-option [value]="2" label="Herr"></ui-select-option>
             <ui-select-option [value]="4" label="Frau"></ui-select-option>
           </ui-select>
         </ui-form-control>
-        <ui-form-control label="Titel">
+        <ui-form-control [clearable]="true" label="Titel">
           <ui-select formControlName="title" tabindex="2">
             <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
             <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -72,7 +72,7 @@
           <input uiInput type="text" formControlName="info" tabindex="11" />
         </ui-form-control>
 
-        <ui-form-control label="Land" [clearable]="false">
+        <ui-form-control label="Land" [clearable]="true">
           <ui-select formControlName="country" tabindex="12">
             <ui-select-option
               *ngFor="let country of countries$ | async"
@@ -130,13 +130,13 @@
         </ng-container>
 
         <div class="control-row">
-          <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+          <ui-form-control label="Anrede" [clearable]="true" requiredMark="*">
             <ui-select formControlName="gender" tabindex="22">
               <ui-select-option [value]="2" label="Herr"></ui-select-option>
               <ui-select-option [value]="4" label="Frau"></ui-select-option>
             </ui-select>
           </ui-form-control>
-          <ui-form-control label="Titel">
+          <ui-form-control [clearable]="true" label="Titel">
             <ui-select formControlName="title" tabindex="23">
               <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
               <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -180,7 +180,7 @@
             <input uiInput type="text" formControlName="info" tabindex="30" />
           </ui-form-control>
 
-          <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+          <ui-form-control label="Land" [clearable]="true" requiredMark="*">
             <ui-select formControlName="country" tabindex="31">
               <ui-select-option
                 *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-create/customer-create-guest.component.html

@@ -9,13 +9,13 @@
   <div class="router-outlet-wrapper">
     <form *ngIf="control" [formGroup]="control" (ngSubmit)="submit()">
       <div class="control-row">
-        <ui-form-control label="Anrede" requiredMark="*">
+        <ui-form-control label="Anrede" [clearable]="true" requiredMark="*">
           <ui-select formControlName="gender" tabindex="1">
             <ui-select-option [value]="2" label="Herr"></ui-select-option>
             <ui-select-option [value]="4" label="Frau"></ui-select-option>
           </ui-select>
         </ui-form-control>
-        <ui-form-control label="Titel">
+        <ui-form-control [clearable]="true" label="Titel">
           <ui-select formControlName="title" tabindex="2">
             <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
             <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -77,7 +77,7 @@
           <input uiInput type="text" formControlName="info" tabindex="11" />
         </ui-form-control>
 
-        <ui-form-control label="Land" requiredMark="*">
+        <ui-form-control [clearable]="true" label="Land" requiredMark="*">
           <ui-select formControlName="country" tabindex="12">
             <ui-select-option
               *ngFor="let country of countries$ | async"
@@ -135,13 +135,13 @@
         </ng-container>
 
         <div class="control-row">
-          <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+          <ui-form-control label="Anrede" [clearable]="true" requiredMark="*">
             <ui-select formControlName="gender" tabindex="22">
               <ui-select-option [value]="2" label="Herr"></ui-select-option>
               <ui-select-option [value]="4" label="Frau"></ui-select-option>
             </ui-select>
           </ui-form-control>
-          <ui-form-control label="Titel">
+          <ui-form-control label="Titel" [clearable]="true">
             <ui-select formControlName="title" tabindex="23">
               <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
               <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -185,7 +185,7 @@
             <input uiInput type="text" formControlName="info" tabindex="30" />
           </ui-form-control>
 
-          <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+          <ui-form-control label="Land" [clearable]="true" requiredMark="*">
             <ui-select formControlName="country" tabindex="31">
               <ui-select-option
                 *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-create/customer-create-online.component.html

@@ -10,13 +10,13 @@
   <div class="router-outlet-wrapper">
     <form *ngIf="control" [formGroup]="control" (ngSubmit)="submit()">
       <div class="control-row">
-        <ui-form-control label="Anrede" requiredMark="*">
+        <ui-form-control [clearable]="true" label="Anrede" requiredMark="*">
           <ui-select formControlName="gender" tabindex="1">
             <ui-select-option [value]="2" label="Herr"></ui-select-option>
             <ui-select-option [value]="4" label="Frau"></ui-select-option>
           </ui-select>
         </ui-form-control>
-        <ui-form-control label="Titel">
+        <ui-form-control [clearable]="true" label="Titel">
           <ui-select formControlName="title" tabindex="2">
             <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
             <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -72,7 +72,7 @@
           <input uiInput type="text" formControlName="info" tabindex="11" />
         </ui-form-control>
 
-        <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+        <ui-form-control label="Land" [clearable]="true" requiredMark="*">
           <ui-select formControlName="country" tabindex="12">
             <ui-select-option
               *ngFor="let country of countries$ | async"
@@ -132,13 +132,13 @@
         </ng-container>
 
         <div class="control-row">
-          <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+          <ui-form-control label="Anrede" [clearable]="true" requiredMark="*">
             <ui-select formControlName="gender" tabindex="22">
               <ui-select-option [value]="2" label="Herr"></ui-select-option>
               <ui-select-option [value]="4" label="Frau"></ui-select-option>
             </ui-select>
           </ui-form-control>
-          <ui-form-control label="Titel">
+          <ui-form-control label="Titel" [clearable]="true">
             <ui-select formControlName="title" tabindex="23">
               <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
               <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -182,7 +182,7 @@
             <input uiInput type="text" formControlName="info" tabindex="30" />
           </ui-form-control>
 
-          <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+          <ui-form-control label="Land" [clearable]="true" requiredMark="*">
             <ui-select formControlName="country" tabindex="31">
               <ui-select-option
                 *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-details/address/payer-create/payer-create-b2b.component.html

@@ -19,13 +19,13 @@
     </ng-container>
 
     <div class="control-row">
-      <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Anrede" [clearable]="true" requiredMark="*">
         <ui-select formControlName="gender" tabindex="4">
           <ui-select-option [value]="2" label="Herr"></ui-select-option>
           <ui-select-option [value]="4" label="Frau"></ui-select-option>
         </ui-select>
       </ui-form-control>
-      <ui-form-control label="Titel">
+      <ui-form-control label="Titel" [clearable]="true">
         <ui-select formControlName="title" tabindex="5">
           <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
           <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -69,7 +69,7 @@
         <input uiInput type="text" formControlName="info" tabindex="12" />
       </ui-form-control>
 
-      <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Land" [clearable]="true" requiredMark="*">
         <ui-select formControlName="country" tabindex="13">
           <ui-select-option
             *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-details/address/payer-create/payer-create-b2c.component.html

@@ -5,13 +5,13 @@
 
   <form [formGroup]="control" (ngSubmit)="submit()">
     <div class="control-row">
-      <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Anrede" [clearable]="true" requiredMark="*">
         <ui-select formControlName="gender" tabindex="1">
           <ui-select-option [value]="2" label="Herr"></ui-select-option>
           <ui-select-option [value]="4" label="Frau"></ui-select-option>
         </ui-select>
       </ui-form-control>
-      <ui-form-control label="Titel">
+      <ui-form-control label="Titel" [clearable]="true">
         <ui-select formControlName="title" tabindex="2">
           <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
           <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -59,7 +59,7 @@
         <input uiInput type="text" formControlName="info" tabindex="10" />
       </ui-form-control>
 
-      <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Land" [clearable]="true" requiredMark="*">
         <ui-select formControlName="country" tabindex="11">
           <ui-select-option
             *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2b.component.html

@@ -19,13 +19,13 @@
     </ng-container>
 
     <div class="control-row">
-      <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Anrede" [clearable]="true" requiredMark="*">
         <ui-select formControlName="gender" tabindex="4">
           <ui-select-option [value]="2" label="Herr"></ui-select-option>
           <ui-select-option [value]="4" label="Frau"></ui-select-option>
         </ui-select>
       </ui-form-control>
-      <ui-form-control label="Titel">
+      <ui-form-control label="Titel" [clearable]="true">
         <ui-select formControlName="title" tabindex="5">
           <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
           <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -69,7 +69,7 @@
         <input uiInput type="text" formControlName="info" tabindex="12" />
       </ui-form-control>
 
-      <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Land" [clearable]="true" requiredMark="*">
         <ui-select formControlName="country" tabindex="13">
           <ui-select-option
             *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2c.component.html

@@ -5,13 +5,13 @@
 
   <form *ngIf="control" [formGroup]="control" (ngSubmit)="submit()">
     <div class="control-row">
-      <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Anrede" [clearable]="true" requiredMark="*">
         <ui-select formControlName="gender" tabindex="1">
           <ui-select-option [value]="2" label="Herr"></ui-select-option>
           <ui-select-option [value]="4" label="Frau"></ui-select-option>
         </ui-select>
       </ui-form-control>
-      <ui-form-control label="Titel">
+      <ui-form-control label="Titel" [clearable]="true">
         <ui-select formControlName="title" tabindex="2">
           <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
           <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -59,7 +59,7 @@
         <input uiInput type="text" formControlName="info" tabindex="10" />
       </ui-form-control>
 
-      <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Land" [clearable]="true" requiredMark="*">
         <ui-select formControlName="country" tabindex="11">
           <ui-select-option
             *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create-b2b.component.html

@@ -22,13 +22,13 @@
     </ng-container>
 
     <div class="control-row">
-      <ui-form-control label="Anrede" [clearable]="false" [requiredMark]="control.get('organisation').value.name ? '' : '*'">
+      <ui-form-control label="Anrede" [clearable]="true" [requiredMark]="control.get('organisation').value.name ? '' : '*'">
         <ui-select formControlName="gender" tabindex="4">
           <ui-select-option [value]="2" label="Herr"></ui-select-option>
           <ui-select-option [value]="4" label="Frau"></ui-select-option>
         </ui-select>
       </ui-form-control>
-      <ui-form-control label="Titel">
+      <ui-form-control label="Titel" [clearable]="true">
         <ui-select formControlName="title" tabindex="5">
           <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
           <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -72,7 +72,7 @@
         <input uiInput type="text" formControlName="info" tabindex="12" />
       </ui-form-control>
 
-      <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Land" [clearable]="true" requiredMark="*">
         <ui-select formControlName="country" tabindex="13">
           <ui-select-option
             *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create-b2c.component.html

@@ -5,13 +5,13 @@
 
   <form [formGroup]="control" (ngSubmit)="submit()">
     <div class="control-row">
-      <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Anrede" [clearable]="true" requiredMark="*">
         <ui-select formControlName="gender" tabindex="1">
           <ui-select-option [value]="2" label="Herr"></ui-select-option>
           <ui-select-option [value]="4" label="Frau"></ui-select-option>
         </ui-select>
       </ui-form-control>
-      <ui-form-control label="Titel">
+      <ui-form-control [clearable]="true" label="Titel">
         <ui-select formControlName="title" tabindex="2">
           <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
           <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -59,7 +59,7 @@
         <input uiInput type="text" formControlName="info" tabindex="10" />
       </ui-form-control>
 
-      <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Land" [clearable]="true" requiredMark="*">
         <ui-select formControlName="country" tabindex="11">
           <ui-select-option
             *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2b.component.html

@@ -22,13 +22,13 @@
     </ng-container>
 
     <div class="control-row">
-      <ui-form-control label="Anrede" [clearable]="false" [requiredMark]="control.get('organisation').value.name ? '' : '*'">
+      <ui-form-control label="Anrede" [clearable]="true" [requiredMark]="control.get('organisation').value.name ? '' : '*'">
         <ui-select formControlName="gender" tabindex="4">
           <ui-select-option [value]="2" label="Herr"></ui-select-option>
           <ui-select-option [value]="4" label="Frau"></ui-select-option>
         </ui-select>
       </ui-form-control>
-      <ui-form-control label="Titel">
+      <ui-form-control label="Titel" [clearable]="true">
         <ui-select formControlName="title" tabindex="5">
           <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
           <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -72,7 +72,7 @@
         <input uiInput type="text" formControlName="info" tabindex="12" />
       </ui-form-control>
 
-      <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Land" [clearable]="true" requiredMark="*">
         <ui-select formControlName="country" tabindex="13">
           <ui-select-option
             *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2c.component.html

@@ -5,13 +5,13 @@
 
   <form *ngIf="control" [formGroup]="control" (ngSubmit)="submit()">
     <div class="control-row">
-      <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Anrede" [clearable]="true" requiredMark="*">
         <ui-select formControlName="gender" tabindex="1">
           <ui-select-option [value]="2" label="Herr"></ui-select-option>
           <ui-select-option [value]="4" label="Frau"></ui-select-option>
         </ui-select>
       </ui-form-control>
-      <ui-form-control label="Titel">
+      <ui-form-control label="Titel" [clearable]="true">
         <ui-select formControlName="title" tabindex="2">
           <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
           <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -59,7 +59,7 @@
         <input uiInput type="text" formControlName="info" tabindex="10" />
       </ui-form-control>
 
-      <ui-form-control label="Land" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Land" [clearable]="true" requiredMark="*">
         <ui-select formControlName="country" tabindex="11">
           <ui-select-option
             *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit-b2b.component.html

@@ -15,13 +15,13 @@
     </ui-form-control>
   </ng-container>
 
-  <ui-form-control label="Anrede" variant="inline">
+  <ui-form-control [clearable]="true" label="Anrede" variant="inline">
     <ui-select formControlName="gender" tabindex="4">
       <ui-select-option [value]="2" label="Herr"></ui-select-option>
       <ui-select-option [value]="4" label="Frau"></ui-select-option>
     </ui-select>
   </ui-form-control>
-  <ui-form-control label="Titel" variant="inline">
+  <ui-form-control [clearable]="true" label="Titel" variant="inline">
     <ui-select formControlName="title" tabindex="5">
       <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
       <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -67,7 +67,7 @@
     <ui-form-control label="Adresszusatz" variant="inline">
       <input uiInput type="text" formControlName="info" tabindex="15" />
     </ui-form-control>
-    <ui-form-control label="Land" variant="inline">
+    <ui-form-control [clearable]="true" label="Land" variant="inline">
       <ui-select formControlName="country" tabindex="16">
         <ui-select-option
           *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit-b2c.component.html

@@ -3,13 +3,13 @@
 </div>
 
 <form *ngIf="control" [formGroup]="control" (ngSubmit)="submit()">
-  <ui-form-control label="Anrede" variant="inline">
+  <ui-form-control [clearable]="true" label="Anrede" variant="inline">
     <ui-select formControlName="gender" tabindex="1">
       <ui-select-option [value]="2" label="Herr"></ui-select-option>
       <ui-select-option [value]="4" label="Frau"></ui-select-option>
     </ui-select>
   </ui-form-control>
-  <ui-form-control label="Titel" variant="inline">
+  <ui-form-control [clearable]="true" label="Titel" variant="inline">
     <ui-select formControlName="title" tabindex="2">
       <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
       <ui-select-option value="Dr." label="Dr."></ui-select-option>
@@ -45,7 +45,7 @@
     <ui-form-control label="Adresszusatz" variant="inline">
       <input uiInput type="text" formControlName="info" tabindex="10" />
     </ui-form-control>
-    <ui-form-control label="Land" variant="inline">
+    <ui-form-control [clearable]="true" label="Land" variant="inline">
       <ui-select formControlName="country" tabindex="11">
         <ui-select-option
           *ngFor="let country of countries$ | async"

apps/page/customer/src/lib/customer-details/customer-details.component.ts

@@ -197,6 +197,7 @@ export class CustomerDetailsComponent implements OnInit {
     const customer = await this.customer$.pipe(first()).toPromise();
     this.modal.open({
       content: HistoryComponent,
+      title: 'Historie',
       data: {
         mode: 'customer',
         item: customer,

apps/page/customer/src/lib/modals/address-selection-modal/address-selection-modal.component.html

@@ -1,10 +1,4 @@
 <div class="wrapper">
-  <div class="actions">
-    <button class="close-btn" (click)="ref.close('close')">
-      <ui-icon icon="close" size="21px"></ui-icon>
-    </button>
-  </div>
-
   <h2>Bitte überprüfen Sie die eingegebenen Adressdaten</h2>
   <p>Vorschläge:</p>
 

apps/page/customer/src/lib/modals/address-selection-modal/address-selection-modal.component.scss

@@ -2,14 +2,6 @@
   @apply bg-white;
 }
 
-.actions {
-  @apply flex flex-row justify-end;
-}
-
-.close-btn {
-  @apply bg-transparent border-none text-ucla-blue;
-}
-
 h2,
 p {
   @apply text-center text-regular;

apps/page/customer/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.html

@@ -1,10 +1,4 @@
 <div class="wrapper">
-  <div class="actions">
-    <button class="close-btn" (click)="ref.close()">
-      <ui-icon icon="close" size="21px"></ui-icon>
-    </button>
-  </div>
-
   <h2>Warenkorb kann dem Kunden nicht zugewiesen werden</h2>
   <p>
     <!-- Der Kundentyp ist mit der gewählten Kaufoption nicht kombinierbar. -->

apps/page/customer/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss

@@ -2,14 +2,6 @@
   @apply bg-white;
 }
 
-.actions {
-  @apply flex flex-row justify-end;
-}
-
-.close-btn {
-  @apply bg-transparent border-none text-ucla-blue;
-}
-
 h2 {
   @apply mt-0;
 }

apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.component.html

@@ -1,4 +1,13 @@
 <div class="header">
+  <div class="cleanup-headline">
+    <h1 class="cleanup-title">
+      Abholfachbereinigungsliste
+    </h1>
+    <p class="cleanup-paragraph">
+      Bitte nehmen Sie die<br />
+      Artikel auf die Fläche.
+    </p>
+  </div>
   <div class="hits">{{ hits$ | async }} Titel</div>
 </div>
 

apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.component.scss

@@ -5,6 +5,19 @@
 .header {
   @apply text-right;
 
+  .cleanup-headline {
+    @apply text-center;
+    margin-bottom: -16px;
+
+    .cleanup-title {
+      @apply text-2xl font-bold m-0;
+    }
+
+    .cleanup-paragraph {
+      @apply text-2xl m-0 mt-1;
+    }
+  }
+
   .hits {
     @apply text-active-branch mb-3 font-semibold text-base;
   }

apps/page/goods-in/src/lib/goods-in-details/goods-in-details.component.ts

@@ -5,7 +5,7 @@ import { DomainGoodsService, OrderItemsContext } from '@domain/oms';
 import { ComponentStore, tapResponse } from '@ngrx/component-store';
 import { OrderItemListItemDTO, OrderItemProcessingStatusValue } from '@swagger/oms';
 import { combineLatest, Subject } from 'rxjs';
-import { debounceTime, first, map, switchMap, takeUntil, tap, throttleTime, withLatestFrom } from 'rxjs/operators';
+import { debounceTime, first, map, switchMap, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
 
 export interface GoodsInDetailsComponentState {
   fetching: boolean;
@@ -159,9 +159,22 @@ export class GoodsInDetailsComponent extends ComponentStore<GoodsInDetailsCompon
       this.navigateToDetailsPage(orderItems[0]);
     } else {
       if (orderItems.every((item) => item.processingStatus === 128)) {
-        // Suche nach Abholfachnummer
+        // Search by processingStatus and compartmentCode
+        const queryParams = {
+          main_qs: encodeURIComponent(orderItems.find((_) => true).compartmentCode),
+          filter_orderitemprocessingstatus: orderItems.find((_) => true).processingStatus,
+        };
+        this._router.navigate(['/goods/in', 'results'], { queryParams });
       } else {
-        // Suche nach VorgangsId und Status suchen
+        // Search by processingStatus and orderNumber
+        const queryParams = {
+          main_qs: encodeURIComponent(orderItems.find((_) => true).orderNumber),
+          filter_orderitemprocessingstatus: orderItems
+            .map((item) => item.processingStatus)
+            .filter((v, i, a) => a.indexOf(v) === i)
+            .join(';'),
+        };
+        this._router.navigate(['/goods/in', 'results'], { queryParams });
       }
     }
   }

apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.html

@@ -1,25 +1,40 @@
 <ng-container *ngIf="item$ | async; let orderItem">
   <div class="header">
-    <h3 class="customer-name">
-      <span *ngIf="orderItem.organisation != null">{{ orderItem.organisation }}</span>
-      <span *ngIf="orderItem.organisation != null && orderItem.firstName != null && orderItem.lastName != null"> - </span>
-      <span *ngIf="orderItem.firstName != null && orderItem.lastName != null">{{ orderItem.lastName }} {{ orderItem.firstName }}</span>
-    </h3>
+    <strong class="instruction" *ngIf="instruction$ | async; let instruction">
+      {{ instruction }}
+    </strong>
 
-    <h3 class="ssc" *ngIf="!(editSsc$ | async) && orderItem.ssc && orderItem.sscText">{{ orderItem.ssc }} - {{ orderItem.sscText }}</h3>
+    <div class="info">
+      <h3 class="customer">
+        <div class="name">
+          <span *ngIf="orderItem.organisation != null">{{ orderItem.organisation }}</span>
+          <span *ngIf="orderItem.organisation != null && orderItem.firstName != null && orderItem.lastName != null"> - </span>
+          <span *ngIf="orderItem.firstName != null && orderItem.lastName != null">{{ orderItem.lastName }} {{ orderItem.firstName }}</span>
+        </div>
+        <div class="buyer-number">{{ orderItem?.buyerNumber }}</div>
+      </h3>
 
-    <ng-container *ngIf="editSsc$ | async">
-      <div *ngIf="!(supplierIdError$ | async)" class="ssc-wrapper">
-        <label>Meldenummer</label>
-        <input class="ssc-input" [class.err-border]="sscInvalid$ | async" type="text" [ngModel]="ssc" (ngModelChange)="sscChange($event)" />
+      <h3 class="ssc" *ngIf="!(editSsc$ | async) && orderItem.ssc && orderItem.sscText">{{ orderItem.ssc }} - {{ orderItem.sscText }}</h3>
 
-        <span class="ssc-text" [class.err]="sscInvalid$ | async">{{ sscText$ | async }}</span>
-      </div>
+      <ng-container *ngIf="editSsc$ | async">
+        <div *ngIf="!(supplierIdError$ | async)" class="ssc-wrapper">
+          <label>Meldenummer</label>
+          <input
+            class="ssc-input"
+            [class.err-border]="sscInvalid$ | async"
+            type="text"
+            [ngModel]="ssc"
+            (ngModelChange)="sscChange($event)"
+          />
 
-      <div class="err" *ngIf="supplierIdError$ | async">
-        Kein Lieferant vorhanden
-      </div>
-    </ng-container>
+          <span class="ssc-text" [class.err]="sscInvalid$ | async">{{ sscText$ | async }}</span>
+        </div>
+
+        <div class="err" *ngIf="supplierIdError$ | async">
+          Kein Lieferant vorhanden
+        </div>
+      </ng-container>
+    </div>
   </div>
 
   <div class="grid-container">
@@ -79,7 +94,7 @@
   </div>
 
   <div class="footer">
-    <button class="cta-reorder" (click)="showReorderModal()" [disabled]="editSsc$ | async">
+    <button class="cta-reorder" (click)="showReorderModal(); $event.stopPropagation()" [disabled]="editSsc$ | async">
       Nachbestellen
     </button>
   </div>

apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.scss

@@ -3,16 +3,33 @@
 }
 
 .header {
-  @apply w-full flex flex-row justify-between;
+  @apply w-full flex flex-col;
   min-height: 60px;
 
-  .customer-name {
-    @apply mr-6;
-    max-width: 550px;
+  .instruction {
+    @apply text-base text-warning text-right;
   }
 
-  .ssc {
-    min-width: 155px;
+  .info {
+    @apply flex flex-row justify-between;
+
+    .customer {
+      @apply flex flex-col;
+
+      .name {
+        @apply mr-6 mt-px-10 mb-4;
+        max-width: 550px;
+      }
+
+      .buyer-number {
+        @apply text-base;
+      }
+    }
+
+    .ssc {
+      @apply mt-px-10;
+      min-width: 155px;
+    }
   }
 }
 

apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.ts

@@ -2,11 +2,11 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, Out
 import { CommandService } from '@core/command';
 import { DomainOmsService } from '@domain/oms';
 import { ComponentStore } from '@ngrx/component-store';
-import { OrderItemListItemDTO } from '@swagger/oms';
+import { OrderItemListItemDTO, StockStatusCodeDTO } from '@swagger/oms';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
 import { isEqual } from 'lodash';
-import { Subject } from 'rxjs';
-import { catchError, first, shareReplay, switchMap } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { catchError, first, map, shareReplay, switchMap } from 'rxjs/operators';
 
 interface GoodsInListItemComponentState {
   item: OrderItemListItemDTO;
@@ -100,10 +100,10 @@ export class GoodsInListItemComponent extends ComponentStore<GoodsInListItemComp
 
   readonly supplierIdError$ = this.select((s) => s.supplierIdError);
 
-  readonly statusCodes$ = this.item$.pipe(
+  readonly statusCodes$: Observable<StockStatusCodeDTO[]> = this.item$.pipe(
     switchMap((item) => {
       if (item.supplierId) {
-        return this._omsService.getStockStatusCodes(item.supplierId);
+        return this._omsService.getStockStatusCodes({ supplierId: item.supplierId, eagerLoading: 2 });
       }
       this.patchState({ supplierIdError: true });
     }),
@@ -113,6 +113,15 @@ export class GoodsInListItemComponent extends ComponentStore<GoodsInListItemComp
     })
   );
 
+  readonly instruction$ = this.statusCodes$.pipe(
+    map((statusCodes) => {
+      const code = statusCodes?.find((statusCode) => statusCode?.code === this.item.ssc);
+      const textObj = code?.texts?.find((text) => text?.textType === 'REWORK');
+      return textObj && textObj.text ? textObj.text : '';
+    }),
+    shareReplay()
+  );
+
   private _onDestroy$ = new Subject();
 
   constructor(private _omsService: DomainOmsService, private _command: CommandService, private _modal: UiModalService) {

apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.html

@@ -1,3 +1,12 @@
+<div class="goods-in-list-headline">
+  <h1 class="goods-in-list-title">
+    Wareneingangsliste
+  </h1>
+  <p class="goods-in-list-paragraph">
+    Vergeben Sie Meldenummern oder<br />
+    bestellen Sie Artikel nach
+  </p>
+</div>
 <div class="list-count">{{ hits$ | async }} Titel</div>
 
 <ui-scroll-container
@@ -8,7 +17,13 @@
   [itemLength]="itemLength$ | async"
 >
   <ng-container *ngFor="let item of items$ | async">
-    <goods-in-list-item [item]="item" [editSsc]="editSsc" (refresh)="refreshList()"></goods-in-list-item>
+    <goods-in-list-item
+      [class.cursor]="!editSsc"
+      (click)="navigateToDetails(item)"
+      [item]="item"
+      [editSsc]="editSsc"
+      (refresh)="refreshList()"
+    ></goods-in-list-item>
     <hr />
   </ng-container>
 </ui-scroll-container>

apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.scss

@@ -2,12 +2,35 @@
   @apply block;
 }
 
+.goods-in-list-headline {
+  @apply text-center;
+  margin-bottom: -16px;
+
+  .goods-in-list-title {
+    @apply text-2xl font-bold m-0;
+  }
+
+  .goods-in-list-paragraph {
+    @apply text-2xl m-0 mt-1;
+  }
+}
+
+.cursor {
+  @apply cursor-pointer;
+}
+
 .list-count {
   @apply text-active-branch text-right mb-3 font-semibold text-base;
 }
 
-::ng-deep page-goods-in-list ui-scroll-container .scroll-container {
-  @apply bg-white;
+::ng-deep page-goods-in-list ui-scroll-container {
+  .scroll-container {
+    @apply bg-white;
+  }
+
+  .cta-scroll {
+    @apply bottom-9 !important;
+  }
 }
 
 .empty-message {

apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.ts

@@ -1,8 +1,10 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { DomainOmsService } from '@domain/oms';
+import { OrderItemListItemDTO } from '@swagger/oms';
 import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
-import { map, shareReplay, takeUntil } from 'rxjs/operators';
+import { first, map, shareReplay, takeUntil } from 'rxjs/operators';
 import { GoodsInListItemComponent } from './goods-in-list-item/goods-in-list-item.component';
 import { GoodsInListStore } from './goods-in-list.store';
 
@@ -37,11 +39,17 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
 
   private _onDestroy$ = new Subject();
 
-  constructor(private _breadcrumb: BreadcrumbService, private _domainOmsService: DomainOmsService, private _store: GoodsInListStore) {}
+  constructor(
+    private _breadcrumb: BreadcrumbService,
+    private _domainOmsService: DomainOmsService,
+    private _store: GoodsInListStore,
+    private _router: Router
+  ) {}
 
   ngOnInit() {
     this.initInitialSearch();
     this.updateBreadcrumb();
+    this.removeBreadcrumbs();
   }
 
   ngOnDestroy(): void {
@@ -55,6 +63,30 @@ export class GoodsInListComponent implements OnInit, AfterViewInit, OnDestroy {
     this.listItems.changes.pipe(takeUntil(this._onDestroy$)).subscribe(() => this.registerEditSscDisabled());
   }
 
+  navigateToDetails(orderItem: OrderItemListItemDTO) {
+    if (this.editSsc) {
+      return;
+    }
+    const orderNumber = orderItem.orderNumber;
+    const processingStatus = orderItem.processingStatus;
+    const orderItemId = orderItem.orderItemId;
+
+    this._router.navigate([`/goods/in/details/order/${encodeURIComponent(orderNumber)}/item/${orderItemId}/${processingStatus}`]);
+  }
+
+  async removeBreadcrumbs() {
+    const detailsCrumbs = await this._breadcrumb.getBreadcrumbsByKeyAndTags$('goods-in', ['goods-in', 'details']).pipe(first()).toPromise();
+    const editCrumbs = await this._breadcrumb.getBreadcrumbsByKeyAndTags$('goods-in', ['goods-in', 'edit']).pipe(first()).toPromise();
+
+    detailsCrumbs.forEach((crumb) => {
+      this._breadcrumb.removeBreadcrumb(crumb.id, true);
+    });
+
+    editCrumbs.forEach((crumb) => {
+      this._breadcrumb.removeBreadcrumb(crumb.id, true);
+    });
+  }
+
   async updateBreadcrumb() {
     await this._breadcrumb.addOrUpdateBreadcrumbIfNotExists({
       key: 'goods-in',

apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.html

@@ -1,4 +1,13 @@
 <div class="header">
+  <div class="reservations-headline">
+    <h1 class="reservations-title">
+      Reservierungsliste
+    </h1>
+    <p class="reservations-paragraph">
+      Hier sehen Sie alle zu<br />
+      reservierenden Bestellposten.
+    </p>
+  </div>
   <div class="hits">{{ hits$ | async }} Titel</div>
 </div>
 
@@ -39,8 +48,7 @@
 
 <ng-template #emptyMessage>
   <div class="empty-message">
-    Es sind im Moment keine Artikel vorhanden, die<br />
-    Reserviert werden sollen.
+    Es sind derzeit keine Reservierungen offen.
   </div>
 </ng-template>
 

apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.scss

@@ -5,6 +5,19 @@
 .header {
   @apply text-right;
 
+  .reservations-headline {
+    @apply text-center;
+    margin-bottom: -16px;
+
+    .reservations-title {
+      @apply text-2xl font-bold m-0;
+    }
+
+    .reservations-paragraph {
+      @apply text-2xl m-0 mt-1;
+    }
+  }
+
   .hits {
     @apply text-active-branch mb-3 font-semibold text-base;
   }

apps/page/goods-in/src/lib/goods-in-search/goods-in-search-filter/goods-in-search-filter.component.scss

@@ -12,6 +12,7 @@
 }
 
 .goods-in-search-filter-content-main {
+  @apply px-4;
   h1.title {
     @apply text-center;
   }

apps/page/goods-in/src/lib/goods-in-search/search-main/goods-in-search-main.component.html

@@ -10,9 +10,9 @@
 <div class="search-main">
   <h1 class="search-main-title">Bestellpostensuche</h1>
   <p class="search-main-paragraph">
-    Scannen Sie die Ware aus der<br />
-    Wanne oder suchen Sie via ISBN/ <br />
-    EAN oder Kundenname.
+    Scannen Sie den Artikel,<br />
+    um diesen einzubuchen oder<br />
+    suchen Sie nach Kundennamen.
   </p>
   <ng-container *ngIf="filter$ | async; let filter">
     <ui-filter-input-group-main

apps/page/goods-in/src/lib/goods-in-search/search-results/goods-in-search-results.component.html

@@ -1,3 +1,12 @@
+<div class="goods-in-search-results-headline">
+  <h1 class="goods-in-search-results-title">
+    Bestellpostentrefferliste
+  </h1>
+  <p class="goods-in-search-results-paragraph">
+    Setzen Sie die Bestellposten<br />
+    auf eingetroffen
+  </p>
+</div>
 <div class="hits">{{ hits$ | async }} Titel</div>
 <ui-scroll-container
   *ngIf="!(listEmpty$ | async); else emptyMessage"

apps/page/goods-in/src/lib/goods-in-search/search-results/goods-in-search-results.component.scss

@@ -2,6 +2,19 @@
   @apply block relative;
 }
 
+.goods-in-search-results-headline {
+  @apply text-center;
+  margin-bottom: -16px;
+
+  .goods-in-search-results-title {
+    @apply text-2xl font-bold m-0;
+  }
+
+  .goods-in-search-results-paragraph {
+    @apply text-2xl m-0 mt-1;
+  }
+}
+
 .hits {
   @apply text-active-branch text-right mb-3 font-semibold text-base;
 }

apps/page/goods-out/src/lib/goods-out-search/goods-out-search-filter/goods-out-search-filter.component.scss

@@ -12,6 +12,7 @@
 }
 
 .goods-out-search-filter-content-main {
+  @apply px-4;
   h1.title {
     @apply text-center;
   }

apps/page/task-calendar/src/lib/components/task-info/task-info.component.ts

@@ -61,7 +61,7 @@ export class TaskInfoComponent implements OnChanges {
       }
 
       if (dateFrom.getHours() === dateTo.getHours() && dateFrom.getMinutes() === dateTo.getMinutes()) {
-        if (this.dateAdapter.equals(dateFrom, dateTo)) {
+        if (this.dateAdapter.equals({ first: dateFrom, second: dateTo, precision: 'day' })) {
           return `am ${this.datePipe.transform(dateFrom, 'dd.MM.yy')}`;
         }
         return `${this.datePipe.transform(dateFrom, 'dd.MM.yy')} bis ${this.datePipe.transform(dateTo, 'dd.MM.yy')}`;
@@ -139,6 +139,8 @@ export class TaskInfoComponent implements OnChanges {
     if (file.mime === 'application/pdf') {
       this.uiModal.open({
         content: PdfViewerModalComponent,
+        title: file?.name,
+        config: { showScrollbarX: true, showScrollbarY: false },
         data: {
           file,
           content,
@@ -152,6 +154,7 @@ export class TaskInfoComponent implements OnChanges {
   openImage(file: FileDTO, content: Blob) {
     this.uiModal.open({
       content: ImageViewerModalComponent,
+      title: file?.name,
       data: {
         file,
         content,
@@ -165,7 +168,7 @@ export class TaskInfoComponent implements OnChanges {
   }
 
   checkSameDay(): boolean {
-    return this.dateAdapter.equals(this.date, this.dateAdapter.today());
+    return this.dateAdapter.equals({ first: this.date, second: this.dateAdapter.today(), precision: 'day' });
   }
 
   async openArticleList() {
@@ -182,9 +185,11 @@ export class TaskInfoComponent implements OnChanges {
   openUrl(url: string) {
     this.uiModal.open({
       content: WebViewerModalComponent,
+      title: 'Digitale Titelvorschau',
       data: url,
       config: {
         width: '1120px',
+        showScrollbarY: false,
       },
     });
   }

apps/page/task-calendar/src/lib/components/task-list/task-list-item.component.html

@@ -24,7 +24,7 @@
 <div class="task-content">
   <div class="task-content-title">
     <b>{{ item?.title }}</b>
-    <ui-icon class="icon" icon="camera" size="16px" *ngIf="item.requiresImageOnConfirmation"></ui-icon>
+    <ui-icon class="icon" icon="camera" [style.transform]="'rotateX(0deg)'" size="16px" *ngIf="item.requiresImageOnConfirmation"></ui-icon>
     <ui-icon class="icon" icon="attachment" size="16px" *ngIf="hasAttachments$ | async"></ui-icon>
     <ui-icon class="icon icon-update-comment" icon="refresh" size="16px" *ngIf="!!item.updateComment"></ui-icon>
   </div>

apps/page/task-calendar/src/lib/components/task-list/task-list.component.ts

@@ -42,7 +42,7 @@ export class TaskListComponent {
     }
   }
 
-  isToday$ = this.selected$.pipe(map((selected) => this.dateAdapter.equals(selected, this.today)));
+  isToday$ = this.selected$.pipe(map((selected) => this.dateAdapter.equals({ first: selected, second: this.today, precision: 'day' })));
 
   overdueItems$ = combineLatest([this.items$, this.selected$]).pipe(
     map(([items, selectedDate]) => {
@@ -67,11 +67,13 @@ export class TaskListComponent {
         const processingStatus = this.domainTaskCalendarService.getProcessingStatusList(item);
         if (
           type === 'Task' &&
-          processingStatus.includes('InProcess') &&
+          (processingStatus.includes('InProcess') || processingStatus.includes('Approved')) &&
+          !processingStatus.includes('Removed') &&
+          !processingStatus.includes('Uncompleted') &&
           !processingStatus.includes('Overdue') &&
           !processingStatus.includes('Completed')
         ) {
-          return new Date(item.taskDate) < this.today;
+          return new Date(item.publicationDate || item.taskDate) < this.today;
         }
         return false;
       });
@@ -80,7 +82,11 @@ export class TaskListComponent {
   );
 
   selectedItems$ = combineLatest([this.items$, this.selected$]).pipe(
-    map(([items, date]) => items.filter((item) => this.dateAdapter.equals(this.domainTaskCalendarService.getDisplayInfoDate(item), date))),
+    map(([items, date]) =>
+      items.filter((item) =>
+        this.dateAdapter.equals({ first: this.domainTaskCalendarService.getDisplayInfoDate(item), second: date, precision: 'day' })
+      )
+    ),
     // Sortierung der aufgaben nach Rot => Gelb => Grau => Grün
     map((list) => this.sort(list, ['Overdue', 'InProcess', 'Approved', 'Completed', 'Removed'])),
     map((list) => list.sort(this.moveRemovedToEnd.bind(this)))

apps/page/task-calendar/src/lib/modals/article-list/article-list-modal.component.html

@@ -1,4 +1,3 @@
-<button class="close" type="button" (click)="close()"><ui-icon icon="close" size="16px"></ui-icon></button>
 <ng-container *ngIf="!expandedArticle">
   <h1>Artikelliste</h1>
   <ui-slider [scrollDistance]="210">

apps/page/task-calendar/src/lib/modals/article-list/article-list-modal.component.scss

@@ -1,5 +1,5 @@
 :host {
-  @apply flex flex-col relative;
+  @apply flex flex-col;
 }
 
 h1 {
@@ -44,12 +44,3 @@ h1 {
     @apply text-brand border-2 border-none bg-white font-bold text-lg px-4 py-2 rounded-full mr-2;
   }
 }
-
-.close {
-  @apply absolute -top-4 -right-4  p-4 outline-none border-none bg-transparent;
-  z-index: 10;
-
-  ui-icon {
-    @apply text-inactive-branch;
-  }
-}

apps/page/task-calendar/src/lib/modals/image-viewer/image-viewer-modal.component.html

@@ -1,5 +1 @@
-<button class="close" type="button" (click)="close()"><ui-icon icon="close" size="16px"></ui-icon></button>
-
-<h1>{{ file?.name }}</h1>
-
 <img alt="file?.name" [isaBlobImage]="content" />

apps/page/task-calendar/src/lib/modals/image-viewer/image-viewer-modal.component.scss

@@ -2,18 +2,6 @@
   @apply flex flex-col relative items-center;
 }
 
-h1 {
-  @apply my-6 text-card-heading text-center;
-}
-
 img {
   @apply max-w-full h-auto;
 }
-
-button.close {
-  @apply absolute -top-4 -right-4  p-4 outline-none border-none bg-transparent;
-
-  ui-icon {
-    @apply text-inactive-branch;
-  }
-}

apps/page/task-calendar/src/lib/modals/info/info-modal.component.html

@@ -4,7 +4,6 @@
   <ui-icon *ngIf="info?.updateComment" icon="refresh" size="22px"></ui-icon>
 </div>
 <page-task-info [info]="info"></page-task-info>
-<button class="btn-close" type="button" (click)="close()"><ui-icon icon="close" size="16px"></ui-icon></button>
 
 <div class="actions">
   <button *ngIf="showOpenSuccessorCta$ | async" class="btn-cta" type="button" (click)="close(info.successor?.id)">

apps/page/task-calendar/src/lib/modals/info/info-modal.component.scss

@@ -24,14 +24,6 @@ h3 {
   @apply absolute m-0 -top-4 p-4 pl-0 text-regular text-active-branch uppercase;
 }
 
-.btn-close {
-  @apply absolute -top-4 -right-4  p-4 outline-none border-none bg-transparent;
-
-  ui-icon {
-    @apply text-inactive-branch;
-  }
-}
-
 .actions {
   @apply text-center mb-5 mt-6 sticky bottom-1;
 

apps/page/task-calendar/src/lib/modals/pdf-viewer/pdf-viewer-modal.component.html

@@ -1,7 +1,3 @@
-<button class="close" type="button" (click)="close()"><ui-icon icon="close" size="16px"></ui-icon></button>
-
-<h1>{{ file?.name }}</h1>
-
 <h5>Seite {{ page }} / {{ totalPages }}</h5>
 
 <pdf-viewer

apps/page/task-calendar/src/lib/modals/pdf-viewer/pdf-viewer-modal.component.scss

@@ -3,10 +3,6 @@
   max-height: calc(100vh - 4rem);
 }
 
-h1 {
-  @apply my-6 text-card-heading text-center;
-}
-
 h5 {
   @apply mt-0 mb-6 text-lg text-center text-inactive-branch font-normal;
 }
@@ -19,14 +15,6 @@ pdf-viewer {
   }
 }
 
-button.close {
-  @apply absolute -top-4 -right-4  p-4 outline-none border-none bg-transparent;
-
-  ui-icon {
-    @apply text-inactive-branch;
-  }
-}
-
 button.cta-print {
   @apply sticky bottom-6 bg-brand text-xl px-6 py-3 text-white rounded-full border-none outline-none font-bold shadow-cta;
   transform: translateX(-50%);

apps/page/task-calendar/src/lib/modals/preinfo/preinfo-modal.component.html

@@ -4,7 +4,6 @@
   <ui-icon *ngIf="info?.updateComment" icon="refresh" size="22px"></ui-icon>
 </div>
 <page-task-info [info]="info" showTaskDate="true"></page-task-info>
-<button class="btn-close" type="button" (click)="close()"><ui-icon icon="close" size="16px"></ui-icon></button>
 
 <div class="actions">
   <button *ngIf="showOpenSuccessorCta$ | async" class="btn-cta" type="button" (click)="close(info.successor?.id)">

apps/page/task-calendar/src/lib/modals/preinfo/preinfo-modal.component.scss

@@ -24,14 +24,6 @@ h3 {
   @apply absolute m-0 -top-4 p-4 pl-0 text-regular text-active-branch uppercase;
 }
 
-.btn-close {
-  @apply absolute top-0 right-0 outline-none border-none bg-transparent;
-
-  ui-icon {
-    @apply text-inactive-branch;
-  }
-}
-
 .actions {
   @apply text-center mb-5 mt-6 sticky bottom-1;
 

apps/page/task-calendar/src/lib/modals/task/task-modal.component.html

@@ -1,5 +1,3 @@
-<button class="btn-close" type="button" (click)="close()"><ui-icon icon="close" size="16px"></ui-icon></button>
-
 <div class="header">
   <ui-tshirt [effort]="info?.effort"></ui-tshirt>
   <h1>{{ info?.title }}</h1>

apps/page/task-calendar/src/lib/modals/task/task-modal.component.scss

@@ -43,14 +43,6 @@
   }
 }
 
-.btn-close {
-  @apply absolute -top-4 -right-4  p-4 outline-none border-none bg-transparent;
-
-  ui-icon {
-    @apply text-inactive-branch;
-  }
-}
-
 .actions {
   @apply text-center mb-5 mt-6 sticky bottom-1;
 

apps/page/task-calendar/src/lib/modals/task/task-modal.component.ts

@@ -52,9 +52,13 @@ export class TaskModalComponent {
   editDisabled$ = this.info$.pipe(
     map((info) => {
       if (info.publicationDate && info.taskDate && info.taskOverdueDate) {
-        return this.dateAdapter.isGreaterThan(this.dateAdapter.today(), new Date(info.taskDate));
+        return this.dateAdapter.isLessThan({ first: this.dateAdapter.today(), second: new Date(info.taskDate), precision: 'day' });
       }
-      return this.dateAdapter.isGreaterThan(this.dateAdapter.today(), new Date(info.publicationDate || info.taskDate));
+      return this.dateAdapter.isLessThan({
+        first: this.dateAdapter.today(),
+        second: new Date(info.publicationDate || info.taskDate),
+        precision: 'day',
+      });
     })
   );
 
@@ -95,9 +99,7 @@ export class TaskModalComponent {
     map((processingStatus) => processingStatus.includes('Completed') && !processingStatus.includes('Removed'))
   );
 
-  showOpenSuccessorCta$ = combineLatest([this.processingStatus$, this.info$]).pipe(
-    map(([processingStatus, info]) => processingStatus.includes('Removed') && !!info.successor?.id)
-  );
+  showOpenSuccessorCta$ = this.info$.pipe(map((info) => !!info.successor?.id));
 
   constructor(
     private modalRef: UiModalRef<{ successorId: number }, DisplayInfoDTO>,

apps/page/task-calendar/src/lib/modals/web-viewer/web-viewer-modal.component.html

@@ -1,5 +1,3 @@
-<button class="close" type="button" (click)="close()"><ui-icon icon="close" size="16px"></ui-icon></button>
-<h1>Digitale Titelvorschau</h1>
 <div class="iframe-container">
   <iframe class="iframe" [src]="src"></iframe>
 </div>

apps/page/task-calendar/src/lib/modals/web-viewer/web-viewer-modal.component.scss

@@ -10,15 +10,3 @@
 .iframe {
   @apply w-full h-full;
 }
-
-h1 {
-  @apply my-6 text-card-heading text-center;
-}
-
-button.close {
-  @apply absolute -top-10 -right-4  p-4 outline-none border-none bg-transparent;
-
-  ui-icon {
-    @apply text-inactive-branch;
-  }
-}

apps/page/task-calendar/src/lib/pages/calendar/calendar.component.ts

@@ -30,8 +30,8 @@ export class CalendarComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    if (this.activatedRoute.snapshot.queryParams.date) {
-      this.setDisplayedDate(new Date(this.activatedRoute.snapshot.queryParams.date));
+    if (this.activatedRoute.snapshot.queryParams.displayDate) {
+      this.setDisplayedDate(new Date(this.activatedRoute.snapshot.queryParams.displayDate));
     }
 
     this.updateBreadcrumb();
@@ -44,6 +44,7 @@ export class CalendarComponent implements OnInit {
     this.taskCalendarStore.setSelectedDate({ date });
     this.taskCalendarStore.setDisplayedDate({ date });
     this.router.navigate(['../tasks'], {
+      queryParams: { selectedDate: date },
       relativeTo: this.activatedRoute,
     });
   };
@@ -52,7 +53,7 @@ export class CalendarComponent implements OnInit {
     this.taskCalendarStore.setDisplayedDate({ date });
     this.taskCalendarStore.loadItems();
     this.router.navigate([], {
-      queryParams: { date: date?.toJSON() },
+      queryParams: { displayDate: date?.toJSON() },
     });
 
     this.updateBreadcrumb(date);
@@ -66,7 +67,7 @@ export class CalendarComponent implements OnInit {
       tags: ['task-calendar'],
       section: 'branch',
       params: {
-        date: date?.toISOString(),
+        displayDate: date?.toISOString(),
       },
     });
   }

apps/page/task-calendar/src/lib/pages/tasks/tasks.component.html

@@ -5,8 +5,8 @@
   [minDate]="minDate"
   [maxDate]="maxDate"
   [indicators]="indicators$ | async"
-  (selectedChange)="setSelectedDate($event)"
-  (displayedChange)="setDisplayedDate($event)"
+  (selectedChange)="setSelectedAndDisplayedDate({ selectedDate: $event })"
+  (displayedChange)="setSelectedAndDisplayedDate({ displayDate: $event })"
 ></ui-calendar>
 
 <page-task-list [items]="items$ | async" [selected]="selectedDate$ | async" (select)="open($event)"></page-task-list>

apps/page/task-calendar/src/lib/pages/tasks/tasks.component.ts

@@ -33,36 +33,59 @@ export class TasksComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    if (this.activatedRoute.snapshot.queryParams.date) {
-      this.setDisplayedDate(new Date(this.activatedRoute.snapshot.queryParams.date));
+    const displayDate = this.activatedRoute.snapshot.queryParams.displayDate;
+    const selectedDate = this.activatedRoute.snapshot.queryParams.selectedDate;
+    if (displayDate || selectedDate) {
+      this.setSelectedAndDisplayedDate({
+        displayDate: displayDate ? new Date(this.activatedRoute.snapshot.queryParams.displayDate) : undefined,
+        selectedDate: selectedDate ? new Date(this.activatedRoute.snapshot.queryParams.selectedDate) : undefined,
+      });
+    } else {
+      this.updateBreadcrumb({});
     }
 
-    this.updateBreadcrumb();
-
     this.taskCalendarStore.setMode({ mode: 'week' });
     this.taskCalendarStore.loadItems();
   }
 
-  setSelectedDate = (date: Date) => {
-    this.taskCalendarStore.setSelectedDate({ date });
-    this.taskCalendarStore.setDisplayedDate({ date });
-  };
+  setSelectedAndDisplayedDate({ displayDate, selectedDate }: { displayDate?: Date; selectedDate?: Date }) {
+    const queryParams = this.activatedRoute.snapshot.queryParams;
 
-  setDisplayedDate = (date: Date) => {
-    this.taskCalendarStore.setDisplayedDate({ date });
-    this.taskCalendarStore.loadItems();
-    this.router.navigate([], {
-      queryParams: { date: date?.toJSON() },
-    });
+    if (displayDate && selectedDate) {
+      this.taskCalendarStore.setSelectedDate({ date: selectedDate });
+      this.taskCalendarStore.setDisplayedDate({ date: displayDate });
+      this.taskCalendarStore.loadItems();
+      this.router.navigate([], {
+        queryParams: { displayDate: displayDate?.toJSON(), selectedDate: selectedDate?.toJSON() },
+      });
+      this.updateBreadcrumb({ displayDate, selectedDate });
+    }
 
-    this.updateBreadcrumb(date);
-  };
+    if (selectedDate) {
+      this.taskCalendarStore.setSelectedDate({ date: selectedDate });
+      this.taskCalendarStore.setDisplayedDate({ date: selectedDate });
+      this.router.navigate([], {
+        queryParams: { ...queryParams, selectedDate: selectedDate?.toJSON() },
+      });
+      this.updateBreadcrumb({ selectedDate });
+    }
+
+    if (displayDate) {
+      this.taskCalendarStore.setDisplayedDate({ date: displayDate });
+      this.taskCalendarStore.loadItems();
+      this.router.navigate([], {
+        queryParams: { ...queryParams, displayDate: displayDate?.toJSON() },
+      });
+      this.updateBreadcrumb({ displayDate });
+    }
+  }
 
   open(item: DisplayInfoDTO) {
     this.taskCalendarStore.open(item);
   }
 
-  updateBreadcrumb(date?: Date) {
+  updateBreadcrumb({ displayDate, selectedDate }: { displayDate?: Date; selectedDate?: Date }) {
+    const queryParams = this.activatedRoute.snapshot.queryParams;
     this.breadcrumb.addOrUpdateBreadcrumbIfNotExists({
       key: 'task-calendar',
       name: 'Tätigkeitskalender',
@@ -70,7 +93,8 @@ export class TasksComponent implements OnInit {
       tags: ['task-calendar'],
       section: 'branch',
       params: {
-        date: date?.toISOString(),
+        selectedDate: selectedDate ? selectedDate.toISOString() : queryParams.selectedDate,
+        displayDate: displayDate ? displayDate?.toISOString() : queryParams.displayDate,
       },
     });
   }

apps/page/task-calendar/src/lib/task-calendar.store.ts

@@ -39,7 +39,13 @@ export class TaskCalendarStore extends ComponentStore<TaskCalendarState> {
   readonly selectCalendarIndicators = this.select(this.selectDisplayInfos, (displayItems) =>
     displayItems.reduce<CalendarIndicator[]>((agg, item) => {
       const calendarIndicator = this.mapDisplayInfoToCalendarIndicator(item);
-      if (!agg.some((s) => this.dateAdapter.equals(s.date, new Date(calendarIndicator.date)) && s.color === calendarIndicator.color)) {
+      if (
+        !agg.some(
+          (s) =>
+            this.dateAdapter.equals({ first: s.date, second: new Date(calendarIndicator.date), precision: 'day' }) &&
+            s.color === calendarIndicator.color
+        )
+      ) {
         return [...agg, calendarIndicator];
       }
       return agg;

apps/sales/src/app/app.module.ts

@@ -52,7 +52,7 @@ import { UiModalModule } from '@ui/modal';
 import { ProcessRefactImp } from './refact-imp/process.refact-imp';
 import { DomainCheckoutModule } from '@domain/checkout';
 import { CDN_PRODUCT_PICTURES } from './tokens';
-import { DateAdapter, NativeDateAdapter } from '@ui/common';
+import { DateAdapter } from '@ui/common';
 import { ApplicationRefactImp } from './refact-imp/application.refact-imp';
 import { CDN_PRODUCT_IMAGE } from 'apps/cdn/product-image/src/lib/tokens';
 import { DomainCatalogModule } from '@domain/catalog';
@@ -188,10 +188,7 @@ export function _notificationsHubOptionsFactory(config: AppConfiguration, sso: S
       provide: SsoInterface,
       useClass: SsoConfigurationService,
     },
-    {
-      provide: DateAdapter,
-      useClass: NativeDateAdapter,
-    },
+    DateAdapter,
     {
       provide: ProcessService,
       useClass: ProcessRefactImp,

apps/sales/src/app/modules/remission/pages/remission-finish/confirm-container-number/confirm-container-number-modal.component.html

@@ -0,0 +1,20 @@
+<button class="close-btn" (click)="ref.close()">
+  <ui-icon icon="close" size="21px"></ui-icon>
+</button>
+
+<h1>
+  Ist die Wannenummer korrekt oder möchten Sie die<br />
+  Wannenummer erneut scannen?
+</h1>
+<h3>
+  {{ ref.data }}
+</h3>
+
+<div class="actions-wrapper">
+  <button type="button" (click)="ref.close(false)">
+    Erneut Scannen
+  </button>
+  <button type="button" class="primary" (click)="ref.close(true)">
+    Nummer korrekt
+  </button>
+</div>

apps/sales/src/app/modules/remission/pages/remission-finish/confirm-container-number/confirm-container-number-modal.component.scss

@@ -0,0 +1,28 @@
+:host {
+  @apply block box-content relative;
+}
+
+.close-btn {
+  @apply absolute -top-2 right-0 text-ucla-blue border-none bg-transparent;
+}
+
+h1 {
+  @apply text-xl font-bold text-center;
+}
+
+h3 {
+  @apply text-3xl font-bold text-center;
+}
+
+.actions-wrapper {
+  @apply grid grid-flow-col items-center content-center gap-4 mx-auto mb-4;
+  width: fit-content;
+
+  button {
+    @apply border-solid border-brand border-2 rounded-full px-6 py-3 bg-white text-brand text-cta-l font-bold;
+
+    &.primary {
+      @apply bg-brand text-white;
+    }
+  }
+}

apps/sales/src/app/modules/remission/pages/remission-finish/confirm-container-number/confirm-container-number-modal.component.ts

@@ -0,0 +1,17 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { UiModalRef } from '@ui/modal';
+import { NativeContainerService } from 'native-container';
+
+@Component({
+  selector: 'app-confirm-container-number-modal',
+  templateUrl: 'confirm-container-number-modal.component.html',
+  styleUrls: ['confirm-container-number-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfirmContainerNumberModalComponent {
+  get isNative() {
+    return this._nativeContainer.isUiWebview().isNative;
+  }
+
+  constructor(public ref: UiModalRef<boolean, string>, private _nativeContainer: NativeContainerService) {}
+}

apps/sales/src/app/modules/remission/pages/remission-finish/confirm-container-number/confirm-container-number-modal.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ConfirmContainerNumberModalComponent } from './confirm-container-number-modal.component';
+import { UiIconModule } from '@ui/icon';
+
+@NgModule({
+  imports: [CommonModule, UiIconModule],
+  exports: [ConfirmContainerNumberModalComponent],
+  declarations: [ConfirmContainerNumberModalComponent],
+})
+export class ConfirmContainerNumberModalModule {}

apps/sales/src/app/modules/remission/pages/remission-finish/confirm-container-number/index.ts

@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './confirm-container-number-modal.component';
+export * from './confirm-container-number-modal.module';
+// end:ng42.barrel

apps/sales/src/app/modules/remission/pages/remission-finish/remission-finish.component.ts

@@ -29,6 +29,8 @@ import { RemissionScanShippingDocumentClosedComponent } from '../../components/r
 import { RemissionProcessStatuses } from 'apps/sales/src/app/core/models/remission-process-statuses.model';
 import { PrinterSelectionComponent } from 'apps/sales/src/app/components/printer-selection/printer-selection.component';
 import { RemissionScanConfirmationDialogComponent } from '../../components/remission-scan-confirmation-dialog';
+import { UiModalService } from '@ui/modal';
+import { ConfirmContainerNumberModalComponent } from './confirm-container-number';
 
 @Component({
   selector: 'app-remission-finish',
@@ -99,7 +101,8 @@ export class RemissionFinishComponent implements OnInit, OnDestroy {
     private remissionService: RemissionService,
     private cdrf: ChangeDetectorRef,
     private appService: AppService,
-    private nativeContainerService: NativeContainerService
+    private nativeContainerService: NativeContainerService,
+    private modal: UiModalService
   ) {}
 
   ngOnInit() {
@@ -249,12 +252,21 @@ export class RemissionFinishComponent implements OnInit, OnDestroy {
       });
   }
 
-  handleScanResult(barcode: string) {
+  async handleScanResult(barcode: string) {
     if (!barcode) {
       return this.showInvalidBarcodeDialog();
     }
 
-    return this.openConfirmationDialog(barcode);
+    const result = await this.modal
+      .open({
+        content: ConfirmContainerNumberModalComponent,
+        data: barcode,
+      })
+      .afterClosed$.toPromise();
+
+    if (result.data) {
+      this.completeScan(barcode);
+    }
   }
 
   finishRemission() {

apps/sales/src/app/modules/remission/pages/remission-list-started/shipping-document-creation/confirm-receipt-number-modal/confirm-receipt-number-modal.component.html

@@ -13,10 +13,10 @@
 </h3>
 
 <div class="actions-wrapper">
-  <button type="button">
+  <button type="button" (click)="ref.close(false)">
     Erneut Scannen
   </button>
-  <button type="button" class="primary">
+  <button type="button" class="primary" (click)="ref.close(true)">
     Nummer korrekt
   </button>
 </div>

apps/sales/src/app/modules/remission/pages/remission-list-started/shipping-document-creation/shipping-document-creation.component.ts

@@ -11,7 +11,7 @@ import { ErrorService } from 'apps/sales/src/app/core/error/component/error.serv
 import { SetRemissionShippingDocument } from 'apps/sales/src/app/core/store/actions/remission.actions';
 import { NativeContainerService } from 'shared/public_api';
 import { HttpErrorResponse } from '@angular/common/http';
-import { UiMessageModalComponent, UiModalService } from '@ui/modal';
+import { UiErrorModalComponent, UiMessageModalComponent, UiModalService } from '@ui/modal';
 import { ConfirmReceiptNumberModalComponent } from './confirm-receipt-number-modal/confirm-receipt-number-modal.component';
 
 @Component({
@@ -91,23 +91,10 @@ export class ShippingDocumentCreationComponent implements OnInit {
           return this.remissionService.createShippingDocument(params).pipe(
             filter((shippingDocument) => !isNullOrUndefined(shippingDocument)),
             catchError((error) => {
-              const invalidProperties =
-                error.invalidProperties && Object.keys(error.invalidProperties).length > 0 ? error.invalidProperties : undefined;
-
-              const message = Object.values(invalidProperties).join('\n') || error.message;
-
-              if (error?.httpError?.code === 400) {
-                this.modal.open({
-                  content: UiMessageModalComponent,
-                  data: {
-                    title: 'Warenbegleitschein kann nicht verwendet werden',
-                    message,
-                    closeAction: 'Erneut versuchen',
-                  },
-                });
-              } else {
-                this.errorService.addErrors(error.httpError.code, error.message, message);
-              }
+              this.modal.open({
+                content: UiErrorModalComponent,
+                data: error,
+              });
               return of(undefined);
             }),
             take(1)

apps/sales/src/app/modules/remission/remission-client.module.ts

@@ -85,6 +85,7 @@ import { ShippingDocumentActionsComponent } from './pages/remission-list-started
 import { RemissionListStartActionComponent } from './components/remission-list-actions/remission-list-start';
 import { UiSearchboxNextModule } from '@ui/searchbox';
 import { ConfirmReceiptNumberModalModule } from './pages/remission-list-started/shipping-document-creation/confirm-receipt-number-modal/confirm-receipt-number-modal.module';
+import { ConfirmContainerNumberModalModule } from './pages/remission-finish/confirm-container-number';
 
 @NgModule({
   declarations: [
@@ -158,6 +159,7 @@ import { ConfirmReceiptNumberModalModule } from './pages/remission-list-started/
     RemissionUeberlaufCapacitiesModule,
     UiSearchboxNextModule,
     ConfirmReceiptNumberModalModule,
+    ConfirmContainerNumberModalModule,
   ],
 })
 export class RemissionClientModule {}

apps/sales/src/app/modules/shelf/components/order-details-card/order-details-card.component.ts

@@ -62,5 +62,5 @@ export class ShelfOrderDetailsCardComponent {
   @Output()
   changePickUpDeadline = new EventEmitter<Date>();
 
-  constructor(private dateAdapter: DateAdapter<Date>, private orderDetailsService: ShelfOrderDetailsService) {}
+  constructor(private dateAdapter: DateAdapter, private orderDetailsService: ShelfOrderDetailsService) {}
 }

apps/sales/src/assets/images/Icon_UNKNOWN.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="1px" height="1px" viewBox="0 0 1 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+</svg>

apps/shared/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-header/goods-in-out-order-details-header.component.html

@@ -59,9 +59,9 @@
             <ng-container *ngIf="!!(statusActions$ | async)?.length">
               <button
                 class="cta-status-dropdown"
-                [uiDropdownTrigger]="statusDropdown"
+                [uiOverlayTrigger]="statusDropdown"
                 [disabled]="changeStatusDisabled$ | async"
-                #dropdown="uiDropdownTrigger"
+                #dropdown="uiOverlayTrigger"
               >
                 {{ orderItem?.processingStatus | processingStatus }}
                 <ui-icon [rotate]="dropdown.opened ? '270deg' : '90deg'" icon="arrow_head"></ui-icon>
@@ -116,8 +116,8 @@
     <div class="label">Abholfrist</div>
     <div *ngIf="!(changeDateLoader$ | async)" class="value">
       <button
-        [uiDropdownTrigger]="deadlineDropdown"
-        #deadlineDropdownTrigger="uiDropdownTrigger"
+        [uiOverlayTrigger]="deadlineDropdown"
+        #deadlineDropdownTrigger="uiOverlayTrigger"
         [disabled]="!!orderItem?.features?.paid || (changeDateDisabled$ | async)"
         class="cta-pickup-deadline"
       >
@@ -141,8 +141,8 @@
       <button
         class="cta-datepicker"
         [disabled]="changeDateDisabled$ | async"
-        [uiDatepickerTrigger]="uiDatepicker"
-        #datepicker="uiDatepickerTrigger"
+        [uiOverlayTrigger]="uiDatepicker"
+        #datepicker="uiOverlayTrigger"
       >
         <span>
           {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}

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

@@ -12,7 +12,12 @@
       <div class="detail">
         <div class="label">Format</div>
         <div class="value">
-          <img class="format-icon" [src]="'/assets/images/Icon_' + orderItem.product?.format + '.svg'" alt="format icon" />
+          <img
+            *ngIf="orderItem?.product?.format && orderItem?.product?.format !== 'UNKNOWN'"
+            class="format-icon"
+            [src]="'/assets/images/Icon_' + orderItem.product?.format + '.svg'"
+            alt="format icon"
+          />
           <span>{{ orderItem.product?.formatDetail }}</span>
         </div>
       </div>

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

@@ -179,6 +179,7 @@ export class SharedGoodsInOutOrderDetailsItemComponent extends ComponentStore<Sh
   openHistory() {
     this._modal.open({
       content: HistoryComponent,
+      title: 'Historie',
       data: {
         mode: 'goods',
         item: this.orderItem,

apps/shared/goods-in-out/src/lib/goods-in-out-order-edit/goods-in-out-order-edit.component.html

@@ -64,7 +64,7 @@
 
         <ng-template #vslLieferdatum>
           <ui-form-control class="datepicker" label="vsl. Lieferdatum" variant="inline">
-            <button class="date-btn" type="button" [uiDatepickerTrigger]="uiDatepicker" #datepicker="uiDatepickerTrigger">
+            <button class="date-btn" type="button" [uiOverlayTrigger]="uiDatepicker" #datepicker="uiOverlayTrigger">
               <strong>
                 {{ items[i]?.estimatedShippingDate | date: 'dd.MM.yy' }}
               </strong>