feat: add schema for creating order item

packages/modules/order/src/lib/components/order-edit.component.ts

@@ -275,10 +275,9 @@ export class OrderEditComponent {
     }
 
     textarea.setCustomValidity(error ? 'Invalid JSON: ' + error : '');
-
     textarea.reportValidity();
+
     this.jsonError = !!error;
-    console.log(this.orderJSON);
   }
 
   onSave() {

packages/modules/ui/src/lib/components/molecules/index.ts

@@ -6,4 +6,5 @@ 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';

packages/modules/ui/src/lib/components/molecules/order-address/order-address.component.html

@@ -1,5 +1,18 @@
 <div class="data-list m-0 p-0">
-  <div class="my-2 rc-lv-l-heading">{{ title }}</div>
+  <div class="row justify-content-between align-items-center">
+    <div class="my-2 rc-lv-l-heading">{{ title }}</div>
+    <button
+      vcl-button
+      square
+      class="emphasized-transparent"
+      title="Edit Address"
+    >
+      <vcl-icon
+        class="scale155p"
+        icon="mdi mdi-pencil"
+      />
+    </button>
+  </div>
   <ul class="data-list-body no-border">
     <li class="row data-list-item justify-between">
       <div class="flex text">Business name:</div>

packages/modules/ui/src/lib/components/molecules/order-items/order-item-form.component.ts

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { ComponentLayerRef } from '@vcl/ng-vcl';
+
+@Component({
+  selector: 'rc-order-item-form',
+  template: `
+    <vcl-panel-dialog
+      [showCloseButton]="true"
+      (close)="close()"
+    >
+      <vcl-panel-title>Add item</vcl-panel-title>
+      <vcl-jss-form
+        autocomplete="off"
+        ngDefaultControl
+        #createForm="vclJssForm"
+        [schema]="schema"
+        (formAction)="onAction($event)"
+        (formSubmit)="onSubmit()"
+      />
+    </vcl-panel-dialog>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RcOrderItemFormComponent {
+  constructor(private layer: ComponentLayerRef) {}
+
+  get schema() {
+    return this.layer.data.schema;
+  }
+
+  onAction(_: string): void {
+    // TODO
+  }
+
+  onSubmit(): void {
+    // TODO
+  }
+
+  close(value?: string) {
+    this.layer.close({
+      value,
+    });
+  }
+}

packages/modules/ui/src/lib/components/molecules/order-items/order-item.schema.ts

@@ -0,0 +1,57 @@
+import { Validators } from '@angular/forms';
+
+import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
+
+import { IOrder } from '@console-core/types';
+
+interface ISchemaOptions {
+  order?: IOrder;
+}
+
+export const buildOrderItemSchema = (
+  _: ISchemaOptions
+): VCLFormFieldSchemaRoot => {
+  return {
+    type: 'form',
+    fields: [
+      {
+        name: 'productId',
+        label: 'Items',
+        type: 'select',
+        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',
+            },
+          ],
+        },
+      },
+      {
+        type: 'buttons',
+        buttons: [
+          {
+            type: 'button',
+            label: 'Cancel',
+            action: 'reset',
+            class: 'transparent',
+          },
+          {
+            type: 'submit',
+            label: 'Save',
+          },
+        ],
+      },
+    ],
+  };
+};

packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.html

@@ -1,5 +1,19 @@
 <div class="data-list m-0 p-0">
-  <div class="my-2 rc-lv-l-heading">Items [{{ items.length }}]</div>
+  <div class="row justify-content-between align-items-center">
+    <div class="my-2 rc-lv-l-heading">Items [{{ items.length }}]</div>
+    <button
+      vcl-button
+      square
+      class="emphasized-transparent"
+      (click)="openAddOrderItemComponent()"
+      title="Add order item"
+    >
+      <vcl-icon
+        class="scale155p"
+        icon="mdi mdi-plus"
+      />
+    </button>
+  </div>
 
   <div
     class="order-item"

packages/modules/ui/src/lib/components/molecules/order-items/order-items.component.ts

@@ -1,13 +1,51 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+
+import { LayerRef, LayerService } from '@vcl/ng-vcl';
 
 import { IoRestorecommerceOrderItem } from '@console-core/graphql';
 
+import { RcOrderItemFormComponent } from './order-item-form.component';
+import { buildOrderItemSchema } from './order-item.schema';
+
 @Component({
   selector: 'rc-order-items',
   templateUrl: './order-items.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RcOrderItemsComponent {
+export class RcOrderItemsComponent implements OnInit, OnDestroy {
   @Input({ required: true })
   items: IoRestorecommerceOrderItem[] = [];
+
+  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: {
+          schema: buildOrderItemSchema({}),
+        },
+      })
+      .subscribe((result) => {
+        console.log('Result: ' + result?.value);
+      });
+  }
 }

packages/modules/ui/src/lib/modules-ui.module.ts

@@ -49,6 +49,7 @@ import {
   RcProductVariantComponent,
   RcProductVariantsComponent,
   RcProductImagesComponent,
+  RcOrderItemFormComponent,
 } from './components/molecules';
 import {
   RcAppComponent,
@@ -166,6 +167,7 @@ const molecules = [
   RcProductVariantComponent,
   RcProductVariantsComponent,
   RcProductImagesComponent,
+  RcOrderItemFormComponent,
 ];
 
 const organisms = [