Merged PR 344: Dropdown bei 10+ Exemplareren durch Input ersetzt

Dropdown bei 10+ Exemplareren durch Input ersetzt

Related work items: #1007

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

@@ -22,36 +22,51 @@
       <div class="detail">
         <div class="name">Menge</div>
         <div class="value">
-          <button class="isa-btn btn-quantity isa-text-left isa-p-0" [disabled]="!selectable" (click)="quantityDropdown.toggle()">
-            {{ orderItemListItem?.quantity }}x
+          <ng-container *ngIf="!inputQuantity">
+            <button class="isa-btn btn-quantity isa-text-left isa-p-0" [disabled]="!selectable" (click)="quantityDropdown.toggle()">
+              {{ orderItemListItem?.quantity }}x
 
-            <lib-icon
-              class="isa-ml-5"
-              *ngIf="selectable"
-              [class.up]="quantityDropdown.visible"
-              [class.down]="!quantityDropdown.visible"
-              name="Arrow_right"
-              [height]="'16px'"
-            ></lib-icon>
-          </button>
-          <app-ui-dropdown
-            #quantityDropdown
-            [value]="orderItemListItem.quantity"
-            [(ngModel)]="orderItemListItem.quantity"
-            (ngModelChange)="quantityChange.emit($event); quantityDropdown.close()"
-          >
-            <button
-              appUiDropdownItem
-              class="isa-btn isa-text-left isa-p-16"
-              *ngFor="let val of dropdownValues"
-              [selected]="val === orderItemListItem.quantity"
-              [value]="val"
-            >
-              {{ val }}x
+              <lib-icon
+                class="isa-ml-5"
+                *ngIf="selectable"
+                [class.up]="quantityDropdown.visible"
+                [class.down]="!quantityDropdown.visible"
+                name="Arrow_right"
+                [height]="'16px'"
+              ></lib-icon>
             </button>
-          </app-ui-dropdown>
+            <app-ui-dropdown
+              #quantityDropdown
+              [value]="orderItemListItem.quantity"
+              [(ngModel)]="orderItemListItem.quantity"
+              (ngModelChange)="quantityChange.emit($event); quantityDropdown.close()"
+            >
+              <button
+                appUiDropdownItem
+                class="isa-btn isa-text-left isa-p-16"
+                *ngFor="let val of dropdownValues"
+                [selected]="val === orderItemListItem.quantity"
+                [value]="val"
+              >
+                {{ val }}
+              </button>
+              <button appUiDropdownItem class="isa-btn isa-text-left isa-p-16" *ngIf="moreThan10" (click)="enableInput()">
+                10+
+              </button>
+            </app-ui-dropdown>
+          </ng-container>
+
+          <input
+            class="quantity-input"
+            [class.hidden]="!inputQuantity"
+            #quantityInput
+            type="number"
+            placeholder="..."
+            (change)="setValue(+quantityInput.value)"
+          />
         </div>
       </div>
+      <div *ngIf="inputQuantityError" class="quantity-input-error">{{ inputQuantityError }}</div>
       <div class="detail">
         <div class="name">Preis</div>
         <div class="value">

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

@@ -117,3 +117,23 @@
 .btn-quantity .down {
   transform: rotate(-270deg);
 }
+
+.hidden {
+  display: none;
+}
+
+.quantity-input {
+  outline: none;
+  font-weight: $font-weight-bold;
+  border: none;
+  width: fit-content;
+  caret-color: $isa-red;
+  font-size: 16px;
+}
+
+.quantity-input-error {
+  font-weight: $font-weight-bold;
+  font-size: 20px;
+  color: $isa-neutral-info;
+  margin-bottom: 16px;
+}

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

@@ -1,4 +1,15 @@
-import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  ElementRef,
+  ViewChild,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { OrderItemListItemDTO } from '@swagger/oms';
 
 @Component({
@@ -12,12 +23,15 @@ export class ShelfOrderItemDetailsComponent implements OnChanges {
 
   private _orderItemListItem: OrderItemListItemDTO;
 
+  public originalOrderItemListItem: OrderItemListItemDTO;
+
   @Input()
   get orderItemListItem() {
     return this._orderItemListItem;
   }
   set orderItemListItem(val) {
     if (val) {
+      this.originalOrderItemListItem = val;
       this._orderItemListItem = { ...val };
     } else {
       this._orderItemListItem = val;
@@ -36,9 +50,16 @@ export class ShelfOrderItemDetailsComponent implements OnChanges {
   @Output()
   quantityChange = new EventEmitter<number>();
 
+  @ViewChild('quantityInput', { read: ElementRef, static: true })
+  quantityInputElement: ElementRef;
+
   dropdownValues: number[] = [];
 
-  constructor() {}
+  inputQuantity = false;
+  inputQuantityError: string;
+  moreThan10 = false;
+
+  constructor(private cdr: ChangeDetectorRef) {}
 
   ngOnChanges({ orderItemListItem }: SimpleChanges): void {
     if (orderItemListItem) {
@@ -53,11 +74,36 @@ export class ShelfOrderItemDetailsComponent implements OnChanges {
 
   updateDropdownValues() {
     if (!!this.orderItemListItem) {
-      this.dropdownValues = Array(this.orderItemListItem.quantity)
+      this.moreThan10 = this.orderItemListItem.quantity > 10;
+
+      this.dropdownValues = Array(Math.min(this.orderItemListItem.quantity, this.moreThan10 ? 9 : 10))
         .fill(0)
         .map((x, i) => i + 1);
     } else {
       this.dropdownValues = [];
+      this.moreThan10 = false;
     }
   }
+
+  enableInput() {
+    this.inputQuantity = true;
+    this.cdr.detectChanges();
+    setTimeout(() => {
+      this.quantityInputElement.nativeElement.focus();
+    }, 0);
+  }
+
+  setValue(value: number) {
+    this.inputQuantityError = undefined;
+    if (this.originalOrderItemListItem.quantity < value) {
+      this.inputQuantityError = `Maximal ${this.orderItemListItem.quantity} Exemplare wählbar`;
+    }
+
+    if (0 >= value) {
+      this.inputQuantityError = `Mindestens 1 Exemplar wählbar`;
+    }
+
+    this.quantityChange.emit(value);
+    this.cdr.detectChanges();
+  }
 }

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

@@ -162,6 +162,13 @@ export class ShelfOrderDetailsComponent {
       if (this.partialPickup) {
         items = items.filter(({ orderItemId }) => this.selectedForPartialPickup.has(orderItemId));
       }
+
+      const hasInvalidQuantity = items.some((item) => !this.isPickupQuantityValid(item));
+
+      if (hasInvalidQuantity) {
+        console.warn({ message: 'Has Invalid Quantity', items, quantity: this.quantityForPartialPickup });
+        return;
+      }
       results = await this.detailsFacade.pickedUp(items, this.quantityForPartialPickup);
     } else if (status === 262144) {
       results = await this.detailsFacade.backToStock(items);
@@ -291,4 +298,8 @@ export class ShelfOrderDetailsComponent {
     const items = await this.orderItems$.pipe(first()).toPromise();
     items.forEach((item) => this.selectOrderItem(item, false));
   }
+
+  isPickupQuantityValid(item: OrderItemListItemDTO): boolean {
+    return item.quantity >= this.quantityForPartialPickup.get(item.orderItemId) && this.quantityForPartialPickup.get(item.orderItemId) > 0;
+  }
 }

apps/sales/src/app/modules/ui/dropdown/dropdown.component.scss

@@ -18,7 +18,7 @@
 .dropdown {
   position: absolute;
   right: -1rem;
-  max-height: 50vh;
+  max-height: 50px * 5;
   overflow: auto;
   background-color: #ffffff;
   box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.144);