Merged PR 909: #2271 WE Edit Zusatz

#2271 WE Edit Zusatz

Related work items: #2271

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],