chore: refactor order item creation modal

restorecommerce · Aug 29, 2024 · 74d1c75 · 74d1c75
1 parent 4735166
commit 74d1c75
Show file tree

Hide file tree

Showing 12 changed files with 80 additions and 121 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
@@ -1,8 +1,15 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
 import { Router } from '@angular/router';
 import { combineLatest } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
+import { LayerRef, LayerService } from '@vcl/ng-vcl';
+
 import { ROUTER } from '@console-core/config';
 import {
   OrderFacade,
@@ -11,19 +18,21 @@ import {
   filterEmptyAndNullishAndUndefined,
 } from '@console-core/state';
 
+import { OrderItemFormComponent } from '../modals/order-item/order-item-form.component';
+
 @Component({
   selector: 'app-module-order-view',
   template: `
     <ng-container *ngIf="vm$ | async as vm">
       <rc-order-view
         [order]="vm.order"
-        [products]="vm.products"
+        (openAddItemModal)="onAddOrder()"
       />
     </ng-container>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OrderViewComponent {
+export class OrderViewComponent implements OnInit, OnDestroy {
   readonly vm$ = combineLatest({
     id: this.routerFacade.params$.pipe(
       map(({ id }) => id),
@@ -47,10 +56,36 @@ export class OrderViewComponent {
     products: this.productFacade.all$,
   });
 
+  addItemLayer!: LayerRef;
+
   constructor(
     private readonly router: Router,
     private readonly routerFacade: RouterFacade,
     private readonly productFacade: ProductFacade,
-    private readonly orderFacade: OrderFacade
+    private readonly orderFacade: OrderFacade,
+    private layerService: LayerService
   ) {}
+
+  ngOnInit(): void {
+    this.addItemLayer = this.layerService.create(OrderItemFormComponent, {
+      closeOnBackdropClick: false,
+      closeOnEscape: false,
+    });
+  }
+
+  ngOnDestroy() {
+    this.addItemLayer?.destroy();
+  }
+
+  onAddOrder() {
+    this.addItemLayer
+      .open({
+        data: {
+          products: [], //this.products,
+        },
+      })
+      .subscribe((result) => {
+        console.log('Result: ' + result?.value);
+      });
+  }
 }
diff --git a/...rder-items/order-item-form.component.html → ...order-item/order-item-form.component.html b/...rder-items/order-item-form.component.html → ...order-item/order-item-form.component.html
@@ -5,8 +5,9 @@
   <vcl-panel-title>Add item</vcl-panel-title>
 
   <form
+    vclForm
     [formGroup]="formGroup"
-    action=""
+    (submit)="onSubmit()"
   >
     <vcl-form-control-group>
       <vcl-label>Select a product</vcl-label>
@@ -89,5 +90,22 @@
         </vcl-input-field>
       </vcl-form-control-group>
     </div>
+
+    <div class="loose-button-group">
+      <button
+        vcl-button
+        type="submit"
+        [disabled]="this.formGroup.invalid"
+        class="emphasized"
+      >
+        Submit
+      </button>
+      <button
+        vcl-button
+        type="button"
+      >
+        Reset
+      </button>
+    </div>
   </form>
 </vcl-panel-dialog>
diff --git a/.../order-items/order-item-form.component.ts → ...s/order-item/order-item-form.component.ts b/.../order-items/order-item-form.component.ts → ...s/order-item/order-item-form.component.ts
@@ -13,11 +13,11 @@ import { IoRestorecommerceProductPhysicalVariant } from '@console-core/graphql';
 import { IProduct } from '@console-core/types';
 
 @Component({
-  selector: 'rc-order-item-form',
+  selector: 'app-order-item-form',
   templateUrl: './order-item-form.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RcOrderItemFormComponent implements OnInit, OnDestroy {
+export class OrderItemFormComponent implements OnInit, OnDestroy {
   private readonly subscriptions = new SubSink();
   variants: IoRestorecommerceProductPhysicalVariant[] = [];
 
@@ -75,12 +75,10 @@ export class RcOrderItemFormComponent implements OnInit, OnDestroy {
     return this.layer.data.products;
   }
 
-  onAction(_: string): void {
-    // TODO
-  }
-
   onSubmit(): void {
-    // TODO
+    if (this.formGroup.valid) {
+      console.log(this.formGroup.value);
+    }
   }
 
   close(value?: string) {

diff --git a/packages/modules/order/src/lib/modules-order.module.ts b/packages/modules/order/src/lib/modules-order.module.ts
@@ -9,6 +9,7 @@ import { OrderIndexComponent } from './components/order-index.component';
 import { OrderViewComponent } from './components/order-view.component';
 import { OrderTemplateComponent } from './components/template/order-template.component';
 import { modulesOrderRoutes } from './lib.routes';
+import { OrderItemFormComponent } from './modals/order-item/order-item-form.component';
 
 @NgModule({
   declarations: [
@@ -17,6 +18,7 @@ import { modulesOrderRoutes } from './lib.routes';
     OrderCreateComponent,
     OrderEditComponent,
     OrderViewComponent,
+    OrderItemFormComponent,
   ],
   imports: [
     ModulesUiModule.forChild(),

diff --git a/packages/modules/ui/src/lib/components/molecules/index.ts b/packages/modules/ui/src/lib/components/molecules/index.ts
@@ -6,5 +6,4 @@ export * from './product-variants/product-variant.component';
 export * from './product-variants/product-variants.component';
 export * from './product-variants/product-images.component';
 export * from './order-address/order-address.component';
-export * from './order-items/order-item-form.component';
 export * from './shop-info/shop-info.component';
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
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
@@ -5,7 +5,7 @@
       vcl-button
       square
       class="emphasized-transparent"
-      (click)="openAddOrderItemComponent()"
+      (click)="openAddItemModal.emit()"
       title="Add order item"
     >
       <vcl-icon

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
@@ -1,54 +1,21 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
-  OnDestroy,
-  OnInit,
+  Output,
 } from '@angular/core';
 
-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';
 
 @Component({
   selector: 'rc-order-items',
   templateUrl: './order-items.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RcOrderItemsComponent implements OnInit, OnDestroy {
+export class RcOrderItemsComponent {
   @Input({ required: true })
   items: IoRestorecommerceOrderItem[] = [];
 
-  @Input({ required: true })
-  products: IProduct[] = [];
-
-  addItemLayer!: LayerRef;
-
-  constructor(private layerService: LayerService) {}
-
-  ngOnInit(): void {
-    this.addItemLayer = this.layerService.create(RcOrderItemFormComponent, {
-      closeOnBackdropClick: false,
-      closeOnEscape: false,
-    });
-  }
-
-  ngOnDestroy() {
-    this.addItemLayer?.destroy();
-  }
-
-  openAddOrderItemComponent() {
-    this.addItemLayer
-      .open({
-        data: {
-          products: this.products,
-        },
-      })
-      .subscribe((result) => {
-        console.log('Result: ' + result?.value);
-      });
-  }
+  @Output() openAddItemModal = new EventEmitter<void>();
 }
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
@@ -9,8 +9,8 @@
 
   <div class="order-items">
     <rc-order-items
-      [products]="products"
       [items]="order.items || []"
+      (openAddItemModal)="openAddItemModal.emit()"
     />
   </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
@@ -1,15 +1,17 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
   OnInit,
+  Output,
 } from '@angular/core';
 
 import {
   IoRestorecommerceProductPhysicalVariant,
   IoRestorecommerceUserUser,
 } from '@console-core/graphql';
-import { IOrder, IProduct } from '@console-core/types';
+import { IOrder } from '@console-core/types';
 
 @Component({
   selector: 'rc-order-view',
@@ -18,7 +20,8 @@ import { IOrder, IProduct } from '@console-core/types';
 })
 export class RcOrderViewComponent implements OnInit {
   @Input({ required: true }) order!: IOrder;
-  @Input({ required: true }) products!: IProduct[];
+
+  @Output() openAddItemModal = new EventEmitter<void>();
 
   product?: IoRestorecommerceProductPhysicalVariant | null;
   customer?: IoRestorecommerceUserUser | null;

diff --git a/packages/modules/ui/src/lib/modules-ui.module.ts b/packages/modules/ui/src/lib/modules-ui.module.ts
@@ -49,7 +49,6 @@ import {
   RcProductVariantComponent,
   RcProductVariantsComponent,
   RcProductImagesComponent,
-  RcOrderItemFormComponent,
 } from './components/molecules';
 import {
   RcAppComponent,
@@ -167,7 +166,6 @@ const molecules = [
   RcProductVariantComponent,
   RcProductVariantsComponent,
   RcProductImagesComponent,
-  RcOrderItemFormComponent,
 ];
 
 const organisms = [

diff --git a/packages/modules/ui/tsconfig.lib.json b/packages/modules/ui/tsconfig.lib.json
@@ -13,5 +13,8 @@
     "jest.config.ts",
     "src/**/*.test.ts"
   ],
-  "include": ["src/**/*.ts"]
+  "include": [
+    "src/**/*.ts",
+    "../order/src/lib/modals/order-item/order-item-form.component.ts"
+  ]
 }