feat: display products list in the add order item modal

restorecommerce · Aug 28, 2024 · eebf493 · eebf493
1 parent 62345be
commit eebf493
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 21 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
@@ -6,6 +6,7 @@ import { map, tap } from 'rxjs/operators';
 import { ROUTER } from '@console-core/config';
 import {
   OrderFacade,
+  ProductFacade,
   RouterFacade,
   filterEmptyAndNullishAndUndefined,
 } from '@console-core/state';
@@ -14,7 +15,10 @@ import {
   selector: 'app-module-order-view',
   template: `
     <ng-container *ngIf="vm$ | async as vm">
-      <rc-order-view [order]="vm.order" />
+      <rc-order-view
+        [order]="vm.order"
+        [products]="vm.products"
+      />
     </ng-container>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -40,11 +44,13 @@ export class OrderViewComponent {
       }),
       filterEmptyAndNullishAndUndefined()
     ),
+    products: this.productFacade.all$,
   });
 
   constructor(
     private readonly router: Router,
     private readonly routerFacade: RouterFacade,
+    private readonly productFacade: ProductFacade,
     private readonly orderFacade: OrderFacade
   ) {}
 }
diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-item.schema.ts b/packages/modules/ui/src/lib/components/molecules/order-items/order-item.schema.ts
@@ -2,14 +2,14 @@ import { Validators } from '@angular/forms';
 
 import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
 
-import { IOrder } from '@console-core/types';
+import { IProduct } from '@console-core/types';
 
 interface ISchemaOptions {
-  order?: IOrder;
+  products: IProduct[];
 }
 
 export const buildOrderItemSchema = (
-  _: ISchemaOptions
+  options: ISchemaOptions
 ): VCLFormFieldSchemaRoot => {
   return {
     type: 'form',
@@ -21,20 +21,11 @@ export const buildOrderItemSchema = (
         validators: [Validators.required],
         params: {
           placeholder: 'Select an items',
-          options: [
-            {
-              label: 'Item 1',
-              value: 'item #1',
-            },
-            {
-              label: 'Item 2',
-              value: 'item #2',
-            },
-            {
-              label: 'Item 3',
-              value: 'item #3',
-            },
-          ],
+          search: true,
+          options: options.products.map((product) => ({
+            value: product.id,
+            label: product.product.name,
+          })),
         },
       },
       {

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
@@ -9,6 +9,7 @@ import {
 import { LayerRef, LayerService } from '@vcl/ng-vcl';
 
 import { IoRestorecommerceOrderItem } from '@console-core/graphql';
+import { IProduct } from '@console-core/types';
 
 import { RcOrderItemFormComponent } from './order-item-form.component';
 import { buildOrderItemSchema } from './order-item.schema';
@@ -22,6 +23,9 @@ export class RcOrderItemsComponent implements OnInit, OnDestroy {
   @Input({ required: true })
   items: IoRestorecommerceOrderItem[] = [];
 
+  @Input({ required: true })
+  products: IProduct[] = [];
+
   addItemLayer!: LayerRef;
 
   constructor(private layerService: LayerService) {}
@@ -41,7 +45,9 @@ export class RcOrderItemsComponent implements OnInit, OnDestroy {
     this.addItemLayer
       .open({
         data: {
-          schema: buildOrderItemSchema({}),
+          schema: buildOrderItemSchema({
+            products: this.products,
+          }),
         },
       })
       .subscribe((result) => {

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
@@ -8,7 +8,10 @@
   </div>
 
   <div class="order-items">
-    <rc-order-items [items]="order.items || []" />
+    <rc-order-items
+      [products]="products"
+      [items]="order.items || []"
+    />
   </div>
 
   <div class="order-shipping-address pt-3">

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
@@ -9,7 +9,7 @@ import {
   IoRestorecommerceProductPhysicalVariant,
   IoRestorecommerceUserUser,
 } from '@console-core/graphql';
-import { IOrder } from '@console-core/types';
+import { IOrder, IProduct } from '@console-core/types';
 
 @Component({
   selector: 'rc-order-view',
@@ -18,6 +18,7 @@ import { IOrder } from '@console-core/types';
 })
 export class RcOrderViewComponent implements OnInit {
   @Input({ required: true }) order!: IOrder;
+  @Input({ required: true }) products!: IProduct[];
 
   product?: IoRestorecommerceProductPhysicalVariant | null;
   customer?: IoRestorecommerceUserUser | null;