Merged PR 358: #1007 Fix Dropdown Not Shown After Error

#1007 Fix Dropdown Not Shown After Error

Related work items: #1007

apps/sales/src/app/modules/shelf/components/order-item-details/order-item-details.component.html

@@ -30,6 +30,7 @@
         <div class="name">Menge</div>
         <div class="value">
           <button
+            [class.hidden]="inputQuantity"
             class="isa-btn btn-quantity isa-text-left isa-p-0"
             [disabled]="!selectable"
             (click)="quantityDropdown.toggle()"
@@ -50,7 +51,9 @@
             [value]="orderItemListItem.quantity"
             [(ngModel)]="orderItemListItem.quantity"
             (ngModelChange)="
-              quantityChange.emit($event); quantityDropdown.close()
+              quantityChange.emit($event);
+              quantityDropdown.close();
+              verifyErrors($event)
             "
           >
             <button
@@ -73,6 +76,14 @@
           </app-ui-dropdown>
 
           <input
+            (blur)="
+              closeInputQuantity(+quantityInput.value);
+              quantityDropdown.selectValue(+quantityInput.value)
+            "
+            (keyup.enter)="
+              closeInputQuantity(+quantityInput.value);
+              quantityDropdown.selectValue(+quantityInput.value)
+            "
             class="quantity-input"
             [class.hidden]="!inputQuantity"
             #quantityInput

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

@@ -66,6 +66,7 @@ export class ShelfOrderItemDetailsComponent implements OnChanges {
 
   ngOnChanges({ orderItemListItem }: SimpleChanges): void {
     if (orderItemListItem) {
+      console.log(orderItemListItem);
       this.updateDropdownValues();
     }
   }
@@ -98,9 +99,45 @@ export class ShelfOrderItemDetailsComponent implements OnChanges {
     }, 0);
   }
 
+  closeInputQuantity(value: number) {
+    this.inputQuantity = false;
+    this.cdr.detectChanges();
+  }
+
+  verifyErrors(value: number) {
+    if (this.isMaxAutoSuggestion(value)) {
+      return;
+    }
+    this.clearError();
+    this.validate(value);
+    this.cdr.detectChanges();
+  }
+
   setValue(value: number) {
-    let quantity = value;
+    if (!value) {
+      return;
+    }
+
     this.inputQuantityError = undefined;
+    const quantity = this.validate(value);
+
+    this.renderer.setProperty(
+      this.quantityInputElement.nativeElement,
+      'value',
+      quantity
+    );
+
+    this.quantityChange.emit(quantity);
+
+    this.cdr.detectChanges();
+  }
+
+  clearError() {
+    this.inputQuantityError = '';
+  }
+
+  validate(value: number): number {
+    let quantity = value;
     if (this.originalOrderItemListItem.quantity < value) {
       this.inputQuantityError = `Maximal ${this.originalOrderItemListItem.quantity} Exemplare wählbar`;
       quantity = this.originalOrderItemListItem.quantity;
@@ -111,13 +148,10 @@ export class ShelfOrderItemDetailsComponent implements OnChanges {
       quantity = 1;
     }
 
-    this.renderer.setProperty(
-      this.quantityInputElement.nativeElement,
-      'value',
-      quantity
-    );
+    return quantity;
+  }
 
-    this.quantityChange.emit(quantity);
-    this.cdr.detectChanges();
+  isMaxAutoSuggestion(value: number): boolean {
+    return this.originalOrderItemListItem.quantity === value;
   }
 }

apps/sales/src/app/modules/ui/dropdown/dropdown-item.directive.ts

@@ -1,4 +1,11 @@
-import { Directive, ElementRef, HostListener, Input, Inject, Renderer2 } from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  Input,
+  Inject,
+  Renderer2,
+} from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 @Directive({ selector: '[appUiDropdownItem]' })
@@ -21,7 +28,11 @@ export class UiDropdownItemDirective {
 
   onSelect = (value) => {};
 
-  constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) {}
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    @Inject(DOCUMENT) private document: Document
+  ) {}
 
   registerOnSelect(fn: any) {
     this.onSelect = fn;