feat: implement editing of order item on the backend

restorecommerce · Aug 31, 2024 · 03246a8 · 03246a8
1 parent c1cd9d2
commit 03246a8
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 24 deletions.
diff --git a/packages/modules/order/src/lib/components/order-view.component.ts b/packages/modules/order/src/lib/components/order-view.component.ts
@@ -134,7 +134,6 @@ export class OrderViewComponent implements OnInit, OnDestroy {
     products: IProduct[],
     orderItem: IoRestorecommerceOrderItem
   ) {
-    console.log(orderItem);
     this.editItemLayer
       .open({
         data: {

diff --git a/packages/modules/order/src/lib/modals/order-item/order-item-form.component.html b/packages/modules/order/src/lib/modals/order-item/order-item-form.component.html
@@ -15,7 +15,10 @@
         <ng-container empty>
           <div class="p-1">No Product found!</div>
         </ng-container>
-        <vcl-select-list formControlName="productId">
+        <vcl-select-list
+          [disabled]="!!orderItem"
+          formControlName="productId"
+        >
           @for (product of products; track product.id) {
           <vcl-select-list-item [value]="product.id">{{
             product.product.name

diff --git a/packages/modules/order/src/lib/modals/order-item/order-item-form.component.ts b/packages/modules/order/src/lib/modals/order-item/order-item-form.component.ts
@@ -10,6 +10,7 @@ import { SubSink } from 'subsink';
 import { ComponentLayerRef } from '@vcl/ng-vcl';
 
 import {
+  IIoRestorecommerceOrderItem,
   IIoRestorecommerceOrderOrder,
   IoRestorecommerceOrderItem,
   IoRestorecommerceProductPhysicalVariant,
@@ -30,15 +31,15 @@ export class OrderItemFormComponent implements OnInit, OnDestroy {
   variants: IoRestorecommerceProductPhysicalVariant[] = [];
 
   formGroup = new FormGroup({
-    productId: new FormControl(this.orderItem.productId || ''),
-    variantId: new FormControl(this.orderItem.variantId || ''),
-    quantity: new FormControl(this.orderItem.quantity || 0),
+    productId: new FormControl(this.orderItem?.productId || ''),
+    variantId: new FormControl(this.orderItem?.variantId || ''),
+    quantity: new FormControl(this.orderItem?.quantity || 0),
     unitPrice: new FormGroup({
-      sale: new FormControl(this.orderItem.unitPrice?.sale || false),
-      currencyId: new FormControl(this.orderItem.unitPrice?.currencyId || ''),
-      salePrice: new FormControl(this.orderItem.unitPrice?.salePrice || 0),
+      sale: new FormControl(this.orderItem?.unitPrice?.sale || false),
+      currencyId: new FormControl(this.orderItem?.unitPrice?.currencyId || ''),
+      salePrice: new FormControl(this.orderItem?.unitPrice?.salePrice || 0),
       regularPrice: new FormControl(
-        this.orderItem.unitPrice?.regularPrice || 0
+        this.orderItem?.unitPrice?.regularPrice || 0
       ),
     }),
   });
@@ -92,34 +93,80 @@ export class OrderItemFormComponent implements OnInit, OnDestroy {
     return this.layer.data.products;
   }
 
-  get orderItem(): IoRestorecommerceOrderItem {
+  get orderItem(): IoRestorecommerceOrderItem | undefined {
     return this.layer.data.orderItem;
   }
 
   onSubmit(): void {
     if (this.formGroup.valid) {
       const currentOrderInput = transformOrderToInput(this.order);
-      const updatedOrderInput: IIoRestorecommerceOrderOrder = {
-        ...currentOrderInput,
-        items: [
-          ...(currentOrderInput.items || []),
-          {
-            ...this.formGroup.value,
+
+      if (this.orderItem) {
+        // Edit mode for an order!
+        const currentOrderItem = currentOrderInput.items?.find(
+          (item) =>
+            item.productId === this.orderItem?.productId &&
+            item.variantId === this.orderItem?.variantId
+        );
+
+        if (currentOrderItem) {
+          const updatedOrderItem: IIoRestorecommerceOrderItem = {
+            ...currentOrderItem,
             quantity: +(this.formGroup.value.quantity || 0),
             unitPrice: {
+              sale: Boolean(this.formGroup.value.unitPrice?.sale),
               salePrice: +(this.formGroup.value.unitPrice?.salePrice || 0),
               regularPrice: +(
                 this.formGroup.value.unitPrice?.regularPrice || 0
               ),
             },
-          },
-        ],
-      };
-
-      this.orderFacade.update({
-        items: [updatedOrderInput],
-        mode: ModeType.Update,
-      });
+          };
+
+          const updatedOrderItems = currentOrderInput.items?.map((item) => {
+            if (
+              item.productId === this.orderItem?.productId &&
+              item.variantId === this.orderItem?.variantId
+            ) {
+              return updatedOrderItem;
+            }
+
+            return item;
+          });
+
+          const updatedOrderInput: IIoRestorecommerceOrderOrder = {
+            ...currentOrderInput,
+            items: updatedOrderItems,
+          };
+
+          this.orderFacade.update({
+            items: [updatedOrderInput],
+            mode: ModeType.Update,
+          });
+        }
+      } else {
+        const updatedOrderInput: IIoRestorecommerceOrderOrder = {
+          ...currentOrderInput,
+          items: [
+            ...(currentOrderInput.items || []),
+            {
+              ...this.formGroup.value,
+              quantity: +(this.formGroup.value.quantity || 0),
+              unitPrice: {
+                sale: Boolean(this.formGroup.value.unitPrice?.sale),
+                salePrice: +(this.formGroup.value.unitPrice?.salePrice || 0),
+                regularPrice: +(
+                  this.formGroup.value.unitPrice?.regularPrice || 0
+                ),
+              },
+            },
+          ],
+        };
+
+        this.orderFacade.update({
+          items: [updatedOrderInput],
+          mode: ModeType.Update,
+        });
+      }
     }
   }