#4885 Compartment Info Bugfix

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

@@ -34,7 +34,11 @@
         ></page-pickup-shelf-details-item>
       </ng-container>
 
-      <page-pickup-shelf-details-tags class="mb-px-2" *ngIf="showTagsComponent$ | async"></page-pickup-shelf-details-tags>
+      <page-pickup-shelf-details-tags
+        (selectedChange)="changeSelectedCompartmentInfo($event)"
+        class="mb-px-2"
+        *ngIf="showTagsComponent$ | async"
+      ></page-pickup-shelf-details-tags>
 
       <ng-container *ngIf="fetchingCoverItems$ | async; else coverItemsTmpl">
         <div class="bg-white grid grid-flow-col gap-5 justify-center items-center h-40">

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

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, inject, OnInit, AfterViewInit, ViewChild, effect, untracked } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, OnInit, ViewChild, effect, untracked } from '@angular/core';
 import { PickupShelfDetailsBaseComponent } from '../../pickup-shelf-details-base.component';
 import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { PickUpShelfDetailsHeaderComponent } from '../../shared/pickup-shelf-details-header/pickup-shelf-details-header.component';
@@ -42,7 +42,7 @@ import { SkeletonLoaderComponent } from '@shared/components/loader';
     SkeletonLoaderComponent,
   ],
 })
-export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseComponent implements OnInit, AfterViewInit {
+export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseComponent implements OnInit {
   runCheckTrigger = inject(RunCheckTrigger);
 
   @ViewChild(PickUpShelfDetailsTagsComponent, { static: false })
@@ -146,14 +146,8 @@ export class PickupShelfInDetailsComponent extends PickupShelfDetailsBaseCompone
     // });
   }
 
-  ngAfterViewInit() {
-    this._registerPickUpShelfDetailsTagsComponentChanges();
-  }
-
-  private _registerPickUpShelfDetailsTagsComponentChanges() {
-    this.orderItems$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((_) => {
-      this.pickUpShelfDetailsTags?.registerOnChange((compartmentInfo) => (this.store.selectedCompartmentInfo = compartmentInfo));
-    });
+  changeSelectedCompartmentInfo(compartmentInfo: string) {
+    this.store.selectedCompartmentInfo = compartmentInfo;
   }
 
   async handleAction({

apps/isa-app/src/page/pickup-shelf/pickup-shelf-out/pickup-shelf-out-details/pickup-shelf-out-details.component.html

@@ -33,9 +33,9 @@
       </ng-container>
 
       <page-pickup-shelf-details-tags
+        [selected]="selectedCompartmentInfo$ | async"
+        (selectedChange)="setSelectedCompartmentInfo($event)"
         *ngIf="showTagsComponent$ | async"
-        [ngModel]="selectedCompartmentInfo$ | async"
-        (ngModelChange)="setSelectedCompartmentInfo($event)"
       ></page-pickup-shelf-details-tags>
     </div>
 

apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-details-tags/pickup-shelf-details-tags.component.html

@@ -2,26 +2,26 @@
   <button
     class="page-pickup-shelf-details-tags__tag"
     type="button"
-    [class.selected]="tag === (selected$ | async) && !inputFocus.focused"
+    [class.selected]="tag === $selected() && !inputFocus.focused"
     *ngFor="let tag of defaultTags"
     (click)="setCompartmentInfo(tag)"
   >
     {{ tag }}
   </button>
   <button
-    (click)="inputFocus.focus()"
+    (click)="inputFocus.focus(); $selected.set($inputValue())"
     type="button"
     class="page-pickup-shelf-details-tags__tag"
-    [class.selected]="(inputValue$ | async) === (selected$ | async) && (inputValue$ | async)"
+    [class.selected]="$inputValue() === $selected() && !!$inputValue()"
   >
     <input
       #inputFocus="uiFocus"
       uiFocus
       type="text"
-      [ngModel]="inputValue$ | async"
-      (ngModelChange)="inputValueSubject.next($event); setCompartmentInfo(inputValue)"
+      [ngModel]="$inputValue()"
+      (ngModelChange)="$inputValue.set($event); setCompartmentInfo($event)"
       placeholder="..."
-      [size]="controlSize$ | async"
+      [size]="$controlSize()"
       maxlength="15"
     />
   </button>

apps/isa-app/src/page/pickup-shelf/shared/pickup-shelf-details-tags/pickup-shelf-details-tags.component.ts

@@ -1,9 +1,7 @@
-import { AsyncPipe, NgFor } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, forwardRef } from '@angular/core';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgFor } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { UiCommonModule } from '@ui/common';
-import { BehaviorSubject, Subscription } from 'rxjs';
-import { first, map } from 'rxjs/operators';
 
 @Component({
   selector: 'page-pickup-shelf-details-tags',
@@ -12,72 +10,28 @@ import { first, map } from 'rxjs/operators';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page-pickup-shelf-details-tags' },
   standalone: true,
-  imports: [NgFor, UiCommonModule, FormsModule, AsyncPipe],
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PickUpShelfDetailsTagsComponent), multi: true }],
+  imports: [NgFor, UiCommonModule, FormsModule],
 })
-export class PickUpShelfDetailsTagsComponent implements OnInit, OnDestroy, ControlValueAccessor {
-  selected$ = new BehaviorSubject<string>('');
+export class PickUpShelfDetailsTagsComponent {
+  $selected = model<string>(undefined, { alias: 'selected' });
+  $inputValue = model<string>(undefined, { alias: 'inputValue' });
 
   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;
-  }
-
-  controlSize$ = this.inputValue$.pipe(map((value) => (value ? Math.min(value?.length, 15) : 3)));
-
-  private subscription = new Subscription();
-
-  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(
-      this.selected$.pipe(map((selected) => (this.defaultTags.includes(selected) ? '' : selected))).subscribe(this.inputValueSubject),
-    );
-  }
-
-  ngOnDestroy() {
-    this.inputValueSubject.unsubscribe();
-    this.subscription.unsubscribe();
-  }
-
-  async setCompartmentInfo(compartmentInfo: string) {
-    const currentCompartmentInfo = await this.selected$.pipe(first()).toPromise();
-    if (currentCompartmentInfo === compartmentInfo) {
-      this.onChange(undefined);
-      this.selected$.next(undefined);
-    } else {
-      this.onChange(compartmentInfo);
-      this.selected$.next(compartmentInfo);
+  $controlSize = computed(() => {
+    const value = this.$inputValue();
+    if (!!value) {
+      return Math.min(value.length, 15);
     }
+    return 3;
+  });
 
-    this._cdr.markForCheck();
+  setCompartmentInfo(compartmentInfo: string) {
+    const currentCompartmentInfo = this.$selected();
+    if (currentCompartmentInfo === compartmentInfo) {
+      this.$selected.set(undefined);
+    } else {
+      this.$selected.set(compartmentInfo);
+    }
   }
 }