Merged PR 815: #2149 WE Nachbestellen Popup Anpassungen

#2149 WE Nachbestellen Popup Anpassungen

Related work items: #2149

apps/page/goods-in/src/lib/goods-in-list/goods-in-list-reorder-modal/goods-in-list-reorder-modal.component.html

@@ -26,30 +26,29 @@
       <div class="product-ean">
         {{ orderItem.product?.ean }}
       </div>
-      <div class="quantity">
-        {{ orderItem.quantity }}
-      </div>
+      <div class="quantity">{{ orderItem.quantity }}x</div>
     </div>
   </div>
 
   <ng-container *ngIf="availabilities$ | async; let availabilities; else: showLoadingSpinner">
     <div class="supplier-grid">
       <span></span>
-      <span>Bestand</span>
+      <span class="number">Bestand</span>
       <span>MS</span>
       <span>vsl. Lieferdatum</span>
-      <span>Preis</span>
+      <span class="number">Preis</span>
       <span></span>
 
       <ng-container *ngFor="let availability of availabilities; let i = index">
         <ng-container *ngIf="availability">
           <span class="first-cell">{{ availability.supplier | supplierName }}</span>
-          <span>{{ availability.qty || 0 }}</span>
+          <span class="number">{{ availability.qty || 0 }}</span>
           <span>{{ availability.ssc }}</span>
           <span>{{ availability.at | date: 'dd.MM.yy' }}</span>
-          <span>{{ availability.price?.value?.value | currency: 'EUR':'code' }}</span>
+          <span class="number">{{ availability.price?.value?.value | currency: 'EUR':'code' }}</span>
           <span>
             <ui-select-bullet
+              *ngIf="availability.supplier !== 'F' || availability.qty > 0"
               [(ngModel)]="checkedSupplier"
               [value]="availability.supplier"
               (ngModelChange)="checked($event, availability)"
@@ -74,12 +73,20 @@
     </ng-container>
 
     <div class="actions">
-      <button class="cta-not-available cta-action-secondary" (click)="notAvailable()">Nicht lieferbar</button>
-      <button class="cta-reorder cta-action-primary" (click)="reorder()">Bestellen</button>
+      <button class="cta-not-available cta-action-secondary" [disabled]="ctaDisabled$ | async" (click)="notAvailable()">
+        <ui-spinner [show]="ctaDisabled$ | async">
+          Nicht lieferbar
+        </ui-spinner>
+      </button>
+      <button class="cta-reorder cta-action-primary" [disabled]="ctaDisabled$ | async" (click)="reorder()">
+        <ui-spinner [show]="ctaDisabled$ | async">
+          Bestellen
+        </ui-spinner>
+      </button>
     </div>
   </ng-container>
 
   <ng-template #showLoadingSpinner>
-    <ui-spinner [show]="true"></ui-spinner>
+    <ui-spinner class="load-spinner" [show]="true"></ui-spinner>
   </ng-template>
 </ng-container>

apps/page/goods-in/src/lib/goods-in-list/goods-in-list-reorder-modal/goods-in-list-reorder-modal.component.scss

@@ -54,12 +54,16 @@ hr {
 
 .supplier-grid {
   @apply grid font-bold;
-  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 0.4fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 
   span:not(.first-cell) {
     @apply text-center;
   }
 
+  span.number {
+    @apply text-right;
+  }
+
   span {
     @apply py-5 px-5 -ml-4;
     width: calc(100% + 2rem);
@@ -75,7 +79,7 @@ hr {
   @apply py-5 font-bold text-brand;
 }
 
-ui-spinner {
+.load-spinner {
   @apply py-8;
 }
 

apps/page/goods-in/src/lib/goods-in-list/goods-in-list-reorder-modal/goods-in-list-reorder-modal.component.ts

@@ -5,7 +5,7 @@ import { DomainOmsService } from '@domain/oms';
 import { ComponentStore } from '@ngrx/component-store';
 import { AvailabilityDTO2, OrderItemListItemDTO } from '@swagger/oms';
 import { UiModalRef } from '@ui/modal';
-import { combineLatest } from 'rxjs';
+import { combineLatest, Subject } from 'rxjs';
 import { catchError, map, switchMap, tap } from 'rxjs/operators';
 
 interface GoodsInListReorderModalState {
@@ -13,6 +13,7 @@ interface GoodsInListReorderModalState {
   checkedAvailability: AvailabilityDTO2;
   takeAwayAvailabilityError: boolean;
   storeAvailabilityError: boolean;
+  ctaDisabled: boolean;
 }
 
 @Component({
@@ -37,6 +38,16 @@ export class GoodsInListReorderModalComponent extends ComponentStore<GoodsInList
     }
   }
 
+  get ctaDisabled() {
+    return this.get((s) => s.ctaDisabled);
+  }
+  set ctaDisabled(ctaDisabled: boolean) {
+    if (this.ctaDisabled !== ctaDisabled) {
+      this.patchState({ ctaDisabled: ctaDisabled });
+    }
+  }
+  readonly ctaDisabled$ = this.select((s) => s.ctaDisabled);
+
   readonly storeAvailabilityError$ = this.select((s) => s.storeAvailabilityError);
   readonly takeAwayAvailabilityError$ = this.select((s) => s.takeAwayAvailabilityError);
 
@@ -108,6 +119,7 @@ export class GoodsInListReorderModalComponent extends ComponentStore<GoodsInList
       checkedAvailability: undefined,
       storeAvailabilityError: false,
       takeAwayAvailabilityError: false,
+      ctaDisabled: false,
     });
   }
 
@@ -117,6 +129,7 @@ export class GoodsInListReorderModalComponent extends ComponentStore<GoodsInList
 
   async reorder() {
     if (this.checkedAvailability) {
+      this.ctaDisabled = true;
       await this.domainCheckoutService
         .reorder(this.orderItem.orderId, this.orderItem.orderItemId, this.orderItem.orderItemSubsetId, {
           quantity: this.orderItem.quantity,
@@ -134,16 +147,21 @@ export class GoodsInListReorderModalComponent extends ComponentStore<GoodsInList
           },
         })
         .toPromise();
+
+      this.ctaDisabled = false;
       this.modalRef.close({ refresh: true });
     }
   }
 
   async notAvailable() {
+    this.ctaDisabled = true;
     await this.domainOmsService
       .changeOrderStatus(this.orderItem.orderId, this.orderItem.orderItemId, this.orderItem.orderItemSubsetId, {
         processingStatus: 4096,
       })
       .toPromise();
+
+    this.ctaDisabled = false;
     this.modalRef.close({ refresh: true });
   }
 }