Merge branch 'develop' of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend into develop

apps/domain/oms/src/lib/action-handlers/print-compartment-label.action-handler.ts

@@ -3,11 +3,16 @@ import { ActionHandler } from '@core/command';
 import { DomainPrinterService } from '@domain/printer';
 import { PrintModalComponent, PrintModalData } from '@modal/printer';
 import { UiModalService } from '@ui/modal';
+import { NativeContainerService } from 'native-container';
 import { OrderItemsContext } from './order-items.context';
 
 @Injectable()
 export class PrintCompartmentLabelActionHandler extends ActionHandler<OrderItemsContext> {
-  constructor(private uiModal: UiModalService, private domainPrinterService: DomainPrinterService) {
+  constructor(
+    private uiModal: UiModalService,
+    private domainPrinterService: DomainPrinterService,
+    private nativeContainerService: NativeContainerService
+  ) {
     super('PRINT_COMPARTMENTLABEL');
   }
 
@@ -16,7 +21,7 @@ export class PrintCompartmentLabelActionHandler extends ActionHandler<OrderItems
       .open({
         content: PrintModalComponent,
         data: {
-          printImmediately: true,
+          printImmediately: !this.nativeContainerService.isUiWebview().isNative,
           printerType: 'Label',
           print: (printer) =>
             this.domainPrinterService

apps/domain/oms/src/lib/action-handlers/print-shipping-note.action-handler.ts

@@ -5,10 +5,15 @@ import { DomainPrinterService, Printer } from '@domain/printer';
 import { UiModalService } from '@ui/modal';
 import { PrintModalComponent, PrintModalData } from '@modal/printer';
 import { groupBy } from '@ui/common';
+import { NativeContainerService } from 'native-container';
 
 @Injectable()
 export class PrintShippingNoteActionHandler extends ActionHandler<OrderItemsContext> {
-  constructor(private uiModal: UiModalService, private domainPrinterService: DomainPrinterService) {
+  constructor(
+    private uiModal: UiModalService,
+    private domainPrinterService: DomainPrinterService,
+    private nativeContainerService: NativeContainerService
+  ) {
     super('PRINT_SHIPPINGNOTE');
   }
 
@@ -17,7 +22,7 @@ export class PrintShippingNoteActionHandler extends ActionHandler<OrderItemsCont
       .open({
         content: PrintModalComponent,
         data: {
-          printImmediately: true,
+          printImmediately: !this.nativeContainerService.isUiWebview().isNative,
           printerType: 'Label',
           print: async (printer) => {
             try {

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

@@ -165,11 +165,19 @@ export class GoodsInReservationComponent implements OnInit, OnDestroy {
     const items = await this.items$.pipe(first()).toPromise();
     const selectedSubsetIds = await this.selectedOrderItemSubsetIds$.pipe(first()).toPromise();
     const itemsToUpdate = items.filter((item) => selectedSubsetIds.includes(item.orderItemSubsetId));
-    const itemQuantity = new Map(items.map((item) => [item.orderItemSubsetId, item.quantity]));
-    const data: OrderItemsContext = { items: itemsToUpdate, shippingDelayComment: `Aktion: ${action.label}`, itemQuantity };
+    const buyerNumbers = Array.from(new Set(itemsToUpdate.map((item) => item.buyerNumber)));
 
     try {
-      await this._commandService.handleCommand(action.command, data);
+      for (const buyerNumber of buyerNumbers) {
+        const itemsToUpdateForEachCustomer = itemsToUpdate.filter((item) => item.buyerNumber === buyerNumber);
+        const itemQuantity = new Map(itemsToUpdateForEachCustomer.map((item) => [item.orderItemSubsetId, item.quantity]));
+        const data: OrderItemsContext = {
+          items: itemsToUpdateForEachCustomer,
+          shippingDelayComment: `Aktion: ${action.label}`,
+          itemQuantity,
+        };
+        await this._commandService.handleCommand(action.command, data);
+      }
       this._store.reload();
       this.unselectAll();
     } catch (error) {

apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.store.ts

@@ -44,7 +44,7 @@ export class GoodsInReservationStore extends ComponentStore<GoodsInReservationSt
 
   readonly takeAwayAvailabilities$ = this.results$.pipe(
     switchMap((items) => {
-      const eans = items.map((item) => item?.product?.ean);
+      const eans = items?.map((item) => item?.product?.ean);
       return this._availabilityService.getTakeAwayAvailabilitiesByEans({ eans });
     })
   );

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

@@ -80,7 +80,7 @@
   </div>
 </ng-container>
 
-<ng-container *ngIf="info?.updateComment">
+<ng-container *ngIf="showUpdateComment$ | async">
   <hr *ngIf="info?.attachments === 0 || info?.articles?.length === 0" />
   <div class="update-comment">
     <ui-icon icon="refresh" size="19px"></ui-icon>

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

@@ -8,7 +8,7 @@ import { DateAdapter } from '@ui/common';
 import { UiModalRef, UiModalService } from '@ui/modal';
 import { isNullOrUndefined } from '@utils/common';
 import { combineLatest, ReplaySubject, Subject } from 'rxjs';
-import { catchError, filter, first, map, startWith, switchMap } from 'rxjs/operators';
+import { catchError, filter, first, map, shareReplay, startWith, switchMap } from 'rxjs/operators';
 import { ArticleListModalComponent } from '../../modals/article-list/article-list-modal.component';
 import { ImageViewerModalComponent } from '../../modals/image-viewer/image-viewer-modal.component';
 import { ImageViewerModalData } from '../../modals/image-viewer/image-viewer-modal.data';
@@ -108,6 +108,15 @@ export class TaskInfoComponent implements OnChanges {
     )
   );
 
+  processingStatus$ = this.info$.pipe(
+    map((info) => this.domainTaskCalendarService.getProcessingStatusList(info)),
+    shareReplay()
+  );
+
+  showUpdateComment$ = combineLatest([this.processingStatus$, this.info$]).pipe(
+    map(([processingStatus, info]) => info.updateComment && processingStatus.includes('Removed') && !!info.successor?.id)
+  );
+
   @HostBinding('class')
   get statusClass() {
     return this.domainTaskCalendarService.getProcessingStatusList(this.info);

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

@@ -26,7 +26,7 @@
     <b>{{ item?.title }}</b>
     <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 || !!item.successor"></ui-icon>
+    <ui-icon class="icon icon-update-comment" icon="refresh" size="16px" *ngIf="showUpdateIcon$ | async"></ui-icon>
   </div>
   <div>{{ item?.category | replace: '##':' / ' }}</div>
   <div class="task-content-text">{{ item?.text | stripHtmlTags | substr: 70 }}</div>

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

@@ -42,6 +42,15 @@ export class TaskListItemComponent implements OnChanges {
 
   showTime$ = this.item$.pipe(map((item) => !!item?.timeFrom && !!item?.timeTo));
 
+  processingStatus$ = this.item$.pipe(
+    map((info) => this.domainTaskCalendarService.getProcessingStatusList(info)),
+    shareReplay()
+  );
+
+  showUpdateIcon$ = combineLatest([this.processingStatus$, this.item$]).pipe(
+    map(([processingStatus, info]) => (info.successor && processingStatus.includes('Removed')) || info.predecessor)
+  );
+
   @HostBinding('class')
   get completed() {
     return this.domainTaskCalendarService.getProcessingStatusList(this.item);

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

@@ -1,7 +1,7 @@
 <h3 *ngIf="info?.isSpecial">Sonderinfo</h3>
 <div class="header">
   <h1>{{ info?.title }}</h1>
-  <ui-icon *ngIf="info?.updateComment || info?.successor" icon="refresh" size="22px"></ui-icon>
+  <ui-icon *ngIf="showUpdateIcon$ | async" icon="refresh" size="22px"></ui-icon>
 </div>
 <page-task-info [info]="info"></page-task-info>
 

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

@@ -25,6 +25,10 @@ export class InfoModalComponent {
     map(([processingStatus, info]) => processingStatus.includes('Removed') && !!info.successor?.id)
   );
 
+  showUpdateIcon$ = combineLatest([this.processingStatus$, this.info$]).pipe(
+    map(([processingStatus, info]) => (info.successor && processingStatus.includes('Removed')) || info.predecessor)
+  );
+
   @HostBinding('class')
   get statusClass() {
     return this.domainTaskCalendarService.getProcessingStatusList(this.info);

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

@@ -1,7 +1,7 @@
 <h3>Vorabinfo</h3>
 <div class="header">
   <h1>{{ info?.title }}</h1>
-  <ui-icon *ngIf="info?.updateComment || info?.successor" icon="refresh" size="22px"></ui-icon>
+  <ui-icon *ngIf="showUpdateIcon$ | async" icon="refresh" size="22px"></ui-icon>
 </div>
 <page-task-info [info]="info" showTaskDate="true"></page-task-info>
 

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

@@ -3,7 +3,7 @@ import { DomainTaskCalendarService } from '@domain/task-calendar';
 import { DisplayInfoDTO } from '@swagger/eis';
 import { UiModalRef } from '@ui/modal';
 import { combineLatest, ReplaySubject } from 'rxjs';
-import { map, shareReplay } from 'rxjs/operators';
+import { map, shareReplay, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'page-preinfo-modal',
@@ -25,6 +25,10 @@ export class PreInfoModalComponent {
     map(([processingStatus, info]) => processingStatus.includes('Removed') && !!info.successor?.id)
   );
 
+  showUpdateIcon$ = combineLatest([this.processingStatus$, this.info$]).pipe(
+    map(([processingStatus, info]) => (info.successor && processingStatus.includes('Removed')) || info.predecessor)
+  );
+
   @HostBinding('class')
   get statusClass() {
     return this.domainTaskCalendarService.getProcessingStatusList(this.info);

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

@@ -1,7 +1,7 @@
 <div class="header">
   <ui-tshirt [effort]="info?.effort"></ui-tshirt>
   <h1>{{ info?.title }}</h1>
-  <ui-icon *ngIf="info?.updateComment || !!info?.successor" icon="refresh" size="22px"></ui-icon>
+  <ui-icon *ngIf="showUpdateIcon$ | async" icon="refresh" size="22px"></ui-icon>
 </div>
 <div class="status">
   <div class="indicator" [style.backgroundColor]="indicatorColor$ | async"></div>

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

@@ -95,11 +95,17 @@ export class TaskModalComponent {
     )
   );
 
+  showUpdateIcon$ = combineLatest([this.processingStatus$, this.info$]).pipe(
+    map(([processingStatus, info]) => (info.successor && processingStatus.includes('Removed')) || info.predecessor)
+  );
+
   showResetEditCta$ = this.processingStatus$.pipe(
     map((processingStatus) => processingStatus.includes('Completed') && !processingStatus.includes('Removed'))
   );
 
-  showOpenSuccessorCta$ = this.info$.pipe(map((info) => !!info.successor?.id));
+  showOpenSuccessorCta$ = combineLatest([this.info$, this.processingStatus$]).pipe(
+    map(([info, processingStatus]) => !!info.successor?.id && processingStatus.includes('Removed'))
+  );
 
   constructor(
     private modalRef: UiModalRef<{ successorId: number }, DisplayInfoDTO>,

apps/sales/src/app/modules/remission/pages/remission-list-create/product-list/product-list.component.html

@@ -33,7 +33,7 @@
         ></app-remission-to-top-to-bottom-actions>
       </div>
     </ng-container>
-    <div class="empty-hits" *ngIf="data.productsData && data.productsData.hits === 0">
+    <div class="empty-hits" *ngIf="!data.isLoading && data.productsData && data.productsData.hits === 0">
       Es gibt im Moment keine Artikel, die <br />
       remittiert werden müssen.
     </div>

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

@@ -1,22 +0,0 @@
-<button class="close-btn" (click)="ref.close()">
-  <ui-icon icon="close" size="21px"></ui-icon>
-</button>
-
-<h1>
-  Ist Ihre
-  {{ isNative ? 'Wannennummer' : 'Packstück-ID' }}
-  korrekt oder möchten <br />
-  Sie diese 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-list-started/shipping-document-creation/confirm-receipt-number-modal/confirm-receipt-number-modal.component.scss

@@ -1,28 +0,0 @@
-: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-list-started/shipping-document-creation/confirm-receipt-number-modal/confirm-receipt-number-modal.component.ts

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

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

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

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

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

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

@@ -1,7 +1,7 @@
-import { Component, OnInit, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, ViewChild, ViewChildren } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
 import { RemissionSelectors } from 'apps/sales/src/app/core/store/selectors/remission.selectors';
-import { Observable, of } from 'rxjs';
+import { combineLatest, Observable, of } from 'rxjs';
 import { filter, catchError, map, switchMap, take, first } from 'rxjs/operators';
 import { RemissionScanProductInvalidBarcodeComponent } from '../../../components/remission-scan-product-invalid-barcode';
 import { isNullOrUndefined } from 'util';
@@ -10,7 +10,6 @@ import { RemissionService, ShippingDocument, RemissionProcess } from '@isa/remis
 import { SetRemissionShippingDocument } from 'apps/sales/src/app/core/store/actions/remission.actions';
 import { NativeContainerService } from 'shared/public_api';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
-import { ConfirmReceiptNumberModalComponent } from './confirm-receipt-number-modal/confirm-receipt-number-modal.component';
 import { UiSearchboxNextComponent } from '@ui/searchbox';
 
 @Component({
@@ -52,7 +51,9 @@ export class ShippingDocumentCreationComponent implements OnInit {
       map((allowScan) => !!allowScan && this.appService.isIPadEnv() && this.nativeService.isUiWebview())
     );
 
-    this.showSearchbox$ = this.showScanningButton$.pipe(map((s) => !s));
+    this.showSearchbox$ = combineLatest([this.currentRemissionProcess$, this.showScanningButton$]).pipe(
+      map(([process, showScanButton]) => process?.filter?.target?.name === 'Blank' && !showScanButton)
+    );
   }
 
   shippingDocumentWithGeneratedId() {
@@ -61,16 +62,11 @@ export class ShippingDocumentCreationComponent implements OnInit {
 
   async shippingDocumentScanned(receiptNumber: string) {
     if (receiptNumber && receiptNumber.length > 3) {
-      const result = await this.modal.open({ content: ConfirmReceiptNumberModalComponent, data: receiptNumber }).afterClosed$.toPromise();
-
-      if (result.data) {
-        this.createShippingDocument(receiptNumber);
-      } else {
-        this.searchbox?.focus();
-        this.searchbox?.setQuery('');
-      }
+      this.createShippingDocument(receiptNumber);
     } else {
       this.invalidBarcodeDialog.openDialog();
+      this.searchbox?.focus();
+      this.searchbox?.setQuery('');
     }
   }
 
@@ -95,10 +91,16 @@ export class ShippingDocumentCreationComponent implements OnInit {
           return this.remissionService.createShippingDocument(params).pipe(
             filter((shippingDocument) => !isNullOrUndefined(shippingDocument)),
             catchError((error) => {
-              this.modal.open({
-                content: UiErrorModalComponent,
-                data: error,
-              });
+              this.modal
+                .open({
+                  content: UiErrorModalComponent,
+                  data: error,
+                })
+                .afterClosed$.subscribe(() => {
+                  this.searchbox?.setQuery('');
+                  this.searchbox?.focus();
+                });
+
               return of(undefined);
             }),
             take(1)

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

@@ -84,7 +84,6 @@ import { RemissionScrollButtonComponent } from './components/remission-scroll-bu
 import { ShippingDocumentActionsComponent } from './pages/remission-list-started/shipping-document-container/shipping-document-actions';
 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';
 import { UiCommonModule } from '@ui/common';
 
@@ -159,7 +158,6 @@ import { UiCommonModule } from '@ui/common';
     FilterLoaderModule,
     RemissionUeberlaufCapacitiesModule,
     UiSearchboxNextModule,
-    ConfirmReceiptNumberModalModule,
     ConfirmContainerNumberModalModule,
     UiCommonModule,
   ],

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

@@ -1,6 +1,7 @@
 <div class="goods-in-out-order-details-tags-wrapper">
   <button
     class="goods-in-out-order-details-tag"
+    type="button"
     [class.selected]="tag === (selected$ | async) && !inputFocus.focused"
     *ngFor="let tag of defaultTags"
     (click)="setCompartmentInfo(tag)"
@@ -9,6 +10,7 @@
   </button>
   <button
     (click)="inputFocus.focus()"
+    type="button"
     class="goods-in-out-order-details-tag f-within"
     [class.selected]="(inputValue$ | async) === (selected$ | async) && (inputValue$ | async)"
   >

apps/shared/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-tags/goods-in-out-order-details-tags.component.scss

@@ -10,7 +10,7 @@
   @apply w-auto text-base border border-solid bg-white border-inactive-customer py-px-10 px-5 font-bold text-inactive-customer rounded-full;
 
   &:focus:not(.selected) {
-    @apply bg-white border-inactive-customer;
+    @apply bg-white border-inactive-customer text-inactive-customer;
   }
 
   &.selected,

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

@@ -1,23 +1,30 @@
-import { Component, ChangeDetectionStrategy, Host, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Host, OnInit, OnDestroy, ChangeDetectorRef, forwardRef, EventEmitter } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BehaviorSubject, Subscription } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { SharedGoodsInOutOrderDetailsComponent } from '../goods-in-out-order-details.component';
+import { first, map } from 'rxjs/operators';
 
 @Component({
   selector: 'shared-goods-in-out-order-details-tags',
   templateUrl: 'goods-in-out-order-details-tags.component.html',
   styleUrls: ['goods-in-out-order-details-tags.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SharedGoodsInOutOrderDetailsTagsComponent), multi: true }],
 })
-export class SharedGoodsInOutOrderDetailsTagsComponent implements OnInit, OnDestroy {
-  selected$ = this._host.compartmentInfo$;
+export class SharedGoodsInOutOrderDetailsTagsComponent implements OnInit, OnDestroy, ControlValueAccessor {
+  selected$ = new BehaviorSubject<string>('');
 
-  readonly defaultTags = ['Maxi', 'Mini', 'Kleinkram', 'Nonbook'];
+  readonly defaultTags = ['Maxi', 'Mini', 'Kleinkram', 'Nonbook', 'Kalender'];
 
   inputValueSubject = new BehaviorSubject<string>('');
 
   inputValue$ = this.inputValueSubject.asObservable();
 
+  disabled = false;
+
+  private onChange = (value: string) => {};
+
+  private onTouched = () => {};
+
   get inputValue() {
     return this.inputValueSubject.value;
   }
@@ -26,7 +33,24 @@ export class SharedGoodsInOutOrderDetailsTagsComponent implements OnInit, OnDest
 
   private subscription = new Subscription();
 
-  constructor(@Host() private _host: SharedGoodsInOutOrderDetailsComponent, private _cdr: ChangeDetectorRef) {}
+  constructor(private _cdr: ChangeDetectorRef) {}
+
+  writeValue(obj: any): void {
+    this.selected$.next(obj);
+    this._cdr.markForCheck();
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
 
   ngOnInit() {
     this.subscription.add(
@@ -39,11 +63,14 @@ export class SharedGoodsInOutOrderDetailsTagsComponent implements OnInit, OnDest
     this.subscription.unsubscribe();
   }
 
-  setCompartmentInfo(compartmentInfo: string) {
-    if (this._host.compartmentInfo === compartmentInfo) {
-      this._host.compartmentInfo = undefined;
+  async setCompartmentInfo(compartmentInfo: string) {
+    const currentCompartmentInfo = await this.selected$.pipe(first()).toPromise();
+    if (currentCompartmentInfo === compartmentInfo) {
+      this.onChange(undefined);
+      this.selected$.next(undefined);
     } else {
-      this._host.compartmentInfo = compartmentInfo;
+      this.onChange(compartmentInfo);
+      this.selected$.next(compartmentInfo);
     }
 
     this._cdr.markForCheck();

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

@@ -3,9 +3,10 @@ import { Component, ChangeDetectionStrategy, ContentChildren, QueryList } from '
 import { BreadcrumbService } from '@core/breadcrumb';
 import { CommandService } from '@core/command';
 import { OrderItemsContext } from '@domain/oms';
-import { KeyValueDTOOfStringAndString, OrderItemListItemDTO, ReceiptDTO } from '@swagger/oms';
+import { SharedGoodsInOutOrderDetailsTagsComponent } from '@shared/goods-in-out';
+import { KeyValueDTOOfStringAndString, OrderItemListItemDTO } from '@swagger/oms';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
-import { BehaviorSubject, combineLatest, merge, of, Subscription, zip } from 'rxjs';
+import { BehaviorSubject, combineLatest, merge, of, Subscription } from 'rxjs';
 import { first, switchMap } from 'rxjs/operators';
 import { SharedGoodsInOutOrderDetailsCoversComponent } from './goods-in-out-order-details-covers';
 import { SharedGoodsInOutOrderDetailsItemComponent } from './goods-in-out-order-details-item';
@@ -30,6 +31,9 @@ export class SharedGoodsInOutOrderDetailsComponent extends SharedGoodsInOutOrder
   @ContentChild(SharedGoodsInOutOrderDetailsCoversComponent, { static: false })
   orderDetailsCovers: SharedGoodsInOutOrderDetailsCoversComponent;
 
+  @ContentChild(SharedGoodsInOutOrderDetailsTagsComponent, { static: false })
+  orderDetailsTags: SharedGoodsInOutOrderDetailsTagsComponent;
+
   @Input()
   get itemsSelectable() {
     return this.get((s) => s.itemsSelectable);
@@ -56,7 +60,7 @@ export class SharedGoodsInOutOrderDetailsComponent extends SharedGoodsInOutOrder
     navigation: 'details' | 'main' | 'reservation';
   }>();
 
-  private _orderDetailsItemComponentsChangeSubscription: Subscription;
+  private _subscriptions = new Subscription();
 
   constructor(private commandService: CommandService, private _breadcrumb: BreadcrumbService, private _modal: UiModalService) {
     super();
@@ -64,18 +68,28 @@ export class SharedGoodsInOutOrderDetailsComponent extends SharedGoodsInOutOrder
 
   ngAfterContentInit() {
     this._registerOrderDetailsItemComponentsChanges();
+    this._registerOrderDetailsTagsComponentsChanges();
   }
 
   private _registerOrderDetailsItemComponentsChanges() {
-    this._orderDetailsItemComponentsChangeSubscription?.unsubscribe();
+    this._subscriptions.add(
+      merge(of(undefined), this.orderDetailsItemComponents.changes)
+        .pipe(switchMap((_) => combineLatest(this.orderDetailsItemComponents.map((orderItemComponent) => orderItemComponent.orderItem$))))
+        .subscribe((orderItems) => (this.orderItems = orderItems))
+    );
+  }
 
-    this._orderDetailsItemComponentsChangeSubscription = merge(of(undefined), this.orderDetailsItemComponents.changes)
-      .pipe(switchMap((_) => combineLatest(this.orderDetailsItemComponents.map((orderItemComponent) => orderItemComponent.orderItem$))))
-      .subscribe((orderItems) => (this.orderItems = orderItems));
+  private _registerOrderDetailsTagsComponentsChanges() {
+    this._subscriptions.add(
+      this.orderItems$.subscribe((_) => {
+        this.orderDetailsTags?.writeValue(this.compartmentInfo);
+        this.orderDetailsTags?.registerOnChange((compartmentInfo) => (this.compartmentInfo = compartmentInfo));
+      })
+    );
   }
 
   ngOnDestroy() {
-    this._orderDetailsItemComponentsChangeSubscription?.unsubscribe();
+    this._subscriptions?.unsubscribe();
   }
 
   getItemQuantityMap(): Map<number, number> {

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

@@ -40,6 +40,11 @@
           <input uiInput formControlName="compartmentCode" />
         </ui-form-control>
 
+        <shared-goods-in-out-order-details-tags
+          *ngIf="showTagsComponent[i]"
+          formControlName="compartmentInfo"
+        ></shared-goods-in-out-order-details-tags>
+
         <ui-form-control label="Status" variant="inline" statusLabel="Nicht Änderbar">
           <input uiInput formControlName="processingStatus" />
         </ui-form-control>

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

@@ -6,6 +6,7 @@ import {
   EventEmitter,
   Input,
   OnChanges,
+  OnDestroy,
   Output,
   SimpleChanges,
 } from '@angular/core';
@@ -14,7 +15,7 @@ import { DomainOmsService } from '@domain/oms';
 import { OrderItemListItemDTO, StockStatusCodeDTO, VATDTO } from '@swagger/oms';
 import { DateAdapter } from '@ui/common';
 import { UiSelectOptionComponent } from '@ui/select';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { first, shareReplay } from 'rxjs/operators';
 import { ProcessingStatusNameMap } from '../constants/processing-status-name.map';
 import { EnvironmentChannelPipe } from '../pipes/environment-channel.pipe';
@@ -28,7 +29,7 @@ import { validateSsc } from '../validators/ssc.validator';
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [EnvironmentChannelPipe, ProcessingStatusPipe],
 })
-export class SharedGoodsInOutOrderEditComponent implements OnChanges {
+export class SharedGoodsInOutOrderEditComponent implements OnChanges, OnDestroy {
   @Output()
   navigation = new EventEmitter<void>();
 
@@ -37,12 +38,16 @@ export class SharedGoodsInOutOrderEditComponent implements OnChanges {
 
   expanded: boolean[];
 
+  showTagsComponent: boolean[];
+
   control: FormGroup;
 
   minDate = this.dateAdapter.addCalendarDays(new Date(), -1);
 
   vats$: Observable<VATDTO[]> = this.omsService.getVATs().pipe(shareReplay());
 
+  private _subscriptions = new Subscription();
+
   displayDate = (option: UiSelectOptionComponent) => {
     return this.datePipe.transform(option.value, 'dd.MM.yy');
   };
@@ -65,10 +70,16 @@ export class SharedGoodsInOutOrderEditComponent implements OnChanges {
     private cdr: ChangeDetectorRef
   ) {}
 
+  ngOnDestroy(): void {
+    this._subscriptions?.unsubscribe();
+  }
+
   ngOnChanges({ items }: SimpleChanges) {
     if (items.currentValue) {
       this.expanded = new Array(items.currentValue.length);
       this.expanded[0] = true;
+
+      this.showTagsComponent = items.currentValue?.map((item) => !!item.compartmentCode);
       this.initForm(items.currentValue);
     }
   }
@@ -84,7 +95,7 @@ export class SharedGoodsInOutOrderEditComponent implements OnChanges {
       items: fb.array([]),
     });
 
-    items.forEach(async (item) => {
+    items.forEach(async (item, index) => {
       let statusCodes: StockStatusCodeDTO[];
       if (item.supplierId) {
         try {
@@ -92,9 +103,7 @@ export class SharedGoodsInOutOrderEditComponent implements OnChanges {
         } catch (error) {}
       }
       const fbItem = fb.group({
-        compartmentCode: fb.control(
-          item.compartmentCode && item.compartmentInfo ? item.compartmentCode + '_' + item.compartmentInfo : item.compartmentCode
-        ),
+        compartmentCode: fb.control(item.compartmentCode),
         compartmentInfo: fb.control(item.compartmentInfo),
         orderItemId: fb.control(item.orderItemId),
         orderItemSubsetId: fb.control(item.orderItemSubsetId),
@@ -124,6 +133,16 @@ export class SharedGoodsInOutOrderEditComponent implements OnChanges {
         specialComment: fb.control(item.specialComment),
       });
 
+      this._subscriptions.add(
+        fbItem.get('compartmentCode').valueChanges.subscribe((value) => {
+          this.showTagsComponent[index] = !!value;
+
+          if (!value) {
+            fbItem.get('compartmentInfo').reset('');
+          }
+        })
+      );
+
       this.itemsControl.push(fbItem);
       this.cdr.markForCheck();
     });
@@ -179,6 +198,7 @@ export class SharedGoodsInOutOrderEditComponent implements OnChanges {
                 itemCtrl.compartmentInfo && itemCtrl.compartmentCode
                   ? itemCtrl.compartmentCode.replace('_' + itemCtrl.compartmentInfo, '')
                   : itemCtrl.compartmentCode,
+              compartmentInfo: itemCtrl.compartmentInfo || '',
               estimatedShippingDate: itemCtrl.estimatedShippingDate || null,
               compartmentStop: itemCtrl.pickUpDeadline || null,
               specialComment: itemCtrl.specialComment || '',

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

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SharedGoodsInOutOrderDetailsModule } from '@shared/goods-in-out';
 import { UiCommonModule } from '@ui/common';
 import { UiDatepickerModule } from '@ui/datepicker';
 import { UiDropdownModule } from '@ui/dropdown';
@@ -26,6 +27,7 @@ import { SharedGoodsInOutOrderEditComponent } from './goods-in-out-order-edit.co
     UiIconModule,
     UiDatepickerModule,
     UiDropdownModule,
+    SharedGoodsInOutOrderDetailsModule,
   ],
   exports: [SharedGoodsInOutOrderEditComponent],
   declarations: [SharedGoodsInOutOrderEditComponent],

apps/ui/searchbox/src/lib/next/searchbox.component.ts

@@ -149,8 +149,8 @@ export class UiSearchboxNextComponent implements AfterViewInit, OnDestroy, After
 
   onKeyup(event: KeyboardEvent) {
     if (event.key === 'Enter') {
-      if (this.autocomplete.opend && this.autocomplete.activeItem) {
-        this.setQuery(this.autocomplete.activeItem?.item);
+      if (this.autocomplete?.opend && this.autocomplete?.activeItem) {
+        this.setQuery(this.autocomplete?.activeItem?.item);
         this.autocomplete?.close();
       }
       this.search.emit(this.query);