feat: add edit context action to the Order item

restorecommerce · Aug 31, 2024 · 994352a · 994352a
1 parent d2011b6
commit 994352a
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 33 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
@@ -11,6 +11,7 @@ import { map, tap } from 'rxjs/operators';
 import { LayerRef, LayerService } from '@vcl/ng-vcl';
 
 import { ROUTER } from '@console-core/config';
+import { IoRestorecommerceOrderItem } from '@console-core/graphql';
 import {
   OrderFacade,
   ProductFacade,
@@ -31,6 +32,7 @@ import { OrderItemFormComponent } from '../modals/order-item/order-item-form.com
         [order]="vm.order"
         (openAddItemModal)="onAddOrder(vm.order, vm.products)"
         (openAddressModal)="onOpenAddress(vm.order)"
+        (openEditOrderItemModal)="onOpenEditOrderItem($event)"
       />
     </ng-container>
   `,
@@ -60,8 +62,11 @@ export class OrderViewComponent implements OnInit, OnDestroy {
     products: this.productFacade.all$,
   });
 
+  // TODO REFACTOR the openAddItemModal to openAddOrderItemModal.
+
   addItemLayer!: LayerRef;
   addressLayer!: LayerRef;
+  editItemLayer!: LayerRef;
 
   constructor(
     private readonly router: Router,
@@ -81,6 +86,11 @@ export class OrderViewComponent implements OnInit, OnDestroy {
       closeOnBackdropClick: false,
       closeOnEscape: false,
     });
+
+    this.editItemLayer = this.layerService.create(OrderItemFormComponent, {
+      closeOnBackdropClick: false,
+      closeOnEscape: false,
+    });
   }
 
   ngOnDestroy() {
@@ -114,4 +124,18 @@ export class OrderViewComponent implements OnInit, OnDestroy {
         console.log('Result: ' + result?.value);
       });
   }
+
+  onOpenEditOrderItem(orderItem: IoRestorecommerceOrderItem) {
+    console.log(orderItem);
+    this.editItemLayer
+      .open({
+        data: {
+          // order,
+          // products,
+        },
+      })
+      .subscribe((result) => {
+        console.log('Result: ' + result?.value);
+      });
+  }
 }
diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-item.component.html b/packages/modules/ui/src/lib/components/molecules/order-items/order-item.component.html
@@ -1,7 +1,5 @@
-<div class="row">
-  <div class="flex-10">
-    <h4>{{ item.product?.product?.name }}</h4>
-  </div>
+<div class="row justify-content-between align-items-center">
+  <h4>{{ item.product?.product?.name }}</h4>
 
   <div #target>
     <button
@@ -59,8 +57,8 @@ <h4>{{ item.product?.product?.name }}</h4>
       <button
         vcl-button
         class="transparent"
+        (click)="openEditOrderItemModal.emit(item); popover.close()"
       >
-        <!-- (click)="editVariant.emit(variant); popover.close()" -->
         Edit
       </button>
       <button

diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-item.component.ts b/packages/modules/ui/src/lib/components/molecules/order-items/order-item.component.ts
@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  HostBinding,
   Input,
   Output,
 } from '@angular/core';
@@ -12,10 +13,20 @@ import { IoRestorecommerceOrderItem } from '@console-core/graphql';
   selector: 'rc-order-item',
   templateUrl: './order-item.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
 })
 export class RcOrderItemComponent {
+  @HostBinding('class') classNames = 'order-item';
+
   @Input({ required: true })
   item!: IoRestorecommerceOrderItem;
 
-  @Output() openEditItemModal = new EventEmitter<void>();
+  @Output() openEditOrderItemModal =
+    new EventEmitter<IoRestorecommerceOrderItem>();
 }
diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.html b/packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.html
@@ -15,31 +15,10 @@
     </button>
   </div>
 
-  <div
-    class="order-item"
-    *ngFor="let item of items"
-  >
-    <div class="row">
-      <div class="flex-10">
-        <h4>{{ item.product?.product?.name }}</h4>
-      </div>
-      <div class="flex-2 align-right mt-3 secondary-text-color">
-        [Qty: {{ item.quantity }}]
-      </div>
-    </div>
-
-    <img
-      [alt]="item?.product?.product?.physical?.variants?.[0]?.name"
-      [src]="item?.product?.product?.physical?.variants?.[0]?.images?.[0]?.url"
-      sizes="(max-width: 123px) 123px, 123px"
-      width="123"
-      loading="lazy"
-      ngOptimizedImage
-      priority="auto"
-    />
-    <p class="mt-2">
-      <strong>Price:</strong> {{ item.unitPrice?.currency || 'EUR' }}
-      {{ item.unitPrice?.regularPrice }}
-    </p>
-  </div>
+  @for (item of items; track item.id) {
+  <rc-order-item
+    [item]="item"
+    (openEditOrderItemModal)="openEditOrderItemModal.emit($event)"
+  />
+  }
 </div>
diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.ts b/packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.ts
@@ -18,4 +18,6 @@ export class RcOrderItemsComponent {
   items: IoRestorecommerceOrderItem[] = [];
 
   @Output() openAddItemModal = new EventEmitter<void>();
+  @Output() openEditOrderItemModal =
+    new EventEmitter<IoRestorecommerceOrderItem>();
 }
diff --git a/packages/modules/ui/src/lib/components/organisms/order/order-view.component.html b/packages/modules/ui/src/lib/components/organisms/order/order-view.component.html
@@ -11,6 +11,7 @@
     <rc-order-items
       [items]="order.items || []"
       (openAddItemModal)="openAddItemModal.emit()"
+      (openEditOrderItemModal)="openEditOrderItemModal.emit($event)"
     />
   </div>
 

diff --git a/packages/modules/ui/src/lib/components/organisms/order/order-view.component.ts b/packages/modules/ui/src/lib/components/organisms/order/order-view.component.ts
@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 
 import {
+  IoRestorecommerceOrderItem,
   IoRestorecommerceProductPhysicalVariant,
   IoRestorecommerceUserUser,
 } from '@console-core/graphql';
@@ -23,6 +24,8 @@ export class RcOrderViewComponent implements OnInit {
 
   @Output() openAddItemModal = new EventEmitter<void>();
   @Output() openAddressModal = new EventEmitter<string>();
+  @Output() openEditOrderItemModal =
+    new EventEmitter<IoRestorecommerceOrderItem>();
 
   product?: IoRestorecommerceProductPhysicalVariant | null;
   customer?: IoRestorecommerceUserUser | null;