Kulturpass Warenkorb Mengenänderung und Entfernen

apps/shared/modals/kulturpass-order-modal/src/lib/kulturpass-order-item/kulturpass-order-item.component.html

@@ -13,5 +13,7 @@
 </div>
 <div class="text-right">
   <div class="font-bold text-xl mt-4">{{ item?.unitPrice?.value?.value | currency: 'EUR' }}</div>
-  <div class="font-bold">{{ item?.quantity }}x</div>
+  <div class="font-bold">
+    <ui-quantity-dropdown [quantity]="item?.quantity" (quantityChange)="onQuantityChange($event)"></ui-quantity-dropdown>
+  </div>
 </div>

apps/shared/modals/kulturpass-order-modal/src/lib/kulturpass-order-item/kulturpass-order-item.component.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, ChangeDetectionStrategy, Output, Input, EventEmitter } from '@angular/core';
 import { ProductImageModule } from '@cdn/product-image';
 import { ShoppingCartItemDTO } from '@swagger/checkout';
+import { UiQuantityDropdownModule } from '@ui/quantity-dropdown';
 
 @Component({
   selector: 'shared-kulturpass-order-item',
@@ -10,16 +11,20 @@ import { ShoppingCartItemDTO } from '@swagger/checkout';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'shared-kulturpass-order-item' },
   standalone: true,
-  imports: [ProductImageModule, CommonModule],
+  imports: [ProductImageModule, CommonModule, UiQuantityDropdownModule],
 })
 export class KulturpassOrderItemComponent {
   @Input() item: ShoppingCartItemDTO;
 
-  @Output() remove = new EventEmitter<ShoppingCartItemDTO>();
+  @Output() quantityChange = new EventEmitter<ShoppingCartItemDTO>();
 
   get iconSrc() {
     return `/assets/images/Icon_${this.item?.product?.format}.svg`;
   }
 
   constructor() {}
+
+  onQuantityChange(quantity: number) {
+    this.quantityChange.emit({ ...this.item, quantity });
+  }
 }

apps/shared/modals/kulturpass-order-modal/src/lib/kulturpass-order-modal.component.html

@@ -26,7 +26,7 @@
     class="border-b border-solid border-[#EFF1F5]"
     *ngFor="let item of items$ | async; trackBy: trackItemById"
     [item]="item"
-    (remove)="removeItem($event)"
+    (quantityChange)="quantityChange($event)"
   >
   </shared-kulturpass-order-item>
 </div>

apps/shared/modals/kulturpass-order-modal/src/lib/kulturpass-order-modal.component.ts

@@ -53,8 +53,8 @@ export class KulturpassOrderModalComponent implements OnInit {
     this._store.addItem(addToShoppingCart);
   }
 
-  removeItem(shoppingCartItem: ShoppingCartItemDTO) {
-    this._store.removeItem(shoppingCartItem);
+  quantityChange(shoppingCartItem: ShoppingCartItemDTO) {
+    this._store.quantityChange(shoppingCartItem);
   }
 
   order() {

apps/shared/modals/kulturpass-order-modal/src/lib/kulturpass-order-modal.store.ts

@@ -134,15 +134,15 @@ export class KulturpassOrderModalStore extends ComponentStore<KulturpassOrderMod
     console.log(err);
   };
 
-  removeItem = this.effect((remove$: Observable<ShoppingCartItemDTO>) =>
-    remove$.pipe(
+  quantityChange = this.effect((change$: Observable<ShoppingCartItemDTO>) =>
+    change$.pipe(
       withLatestFrom(this.orderItemListItem$),
-      switchMap(([remove, orderItemListItem]) =>
+      switchMap(([change, orderItemListItem]) =>
         this._checkoutService
           .updateItemInShoppingCart({
             processId: orderItemListItem.orderItemSubsetId,
-            shoppingCartItemId: remove.id,
-            update: { quantity: 0 },
+            shoppingCartItemId: change.id,
+            update: { quantity: change.quantity },
           })
           .pipe(tapResponse(this.handleRemoveItemResponse, this.handleRemoveItemError))
       )

apps/ui/quantity-dropdown/src/lib/quantity-dropdown.component.ts

@@ -7,6 +7,8 @@ import {
   forwardRef,
   ChangeDetectorRef,
   HostListener,
+  Output,
+  EventEmitter,
 } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -25,6 +27,9 @@ export class QuantityDropdownComponent implements ControlValueAccessor {
   @Input()
   quantity: number;
 
+  @Output()
+  quantityChange = new EventEmitter<number>();
+
   @Input()
   suffix: string = 'x';
 
@@ -75,6 +80,7 @@ export class QuantityDropdownComponent implements ControlValueAccessor {
 
     this.quantity = quantity;
     this.onChange(quantity);
+    this.quantityChange.emit(quantity);
     this.showDropdown = false;
     this.customInput = false;
   }