feat: replace add order item jss with normal forms

restorecommerce · Aug 29, 2024 · bb2fcd8 · bb2fcd8
1 parent eebf493
commit bb2fcd8
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 24 deletions.
diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-item-form.component.html b/packages/modules/ui/src/lib/components/molecules/order-items/order-item-form.component.html
@@ -0,0 +1,84 @@
+<vcl-panel-dialog
+  [showCloseButton]="true"
+  (close)="close()"
+>
+  <vcl-panel-title>Add item</vcl-panel-title>
+
+  <form action="">
+    <vcl-form-control-group>
+      <vcl-label>Select a product</vcl-label>
+      <vcl-select [search]="true">
+        <ng-container empty>
+          <div class="p-1">No Product found!</div>
+        </ng-container>
+        <vcl-select-list
+          [value]="selectedProduct"
+          (valueChange)="onSelectProduct($event)"
+        >
+          @for (product of products; track product.id) {
+          <vcl-select-list-item [value]="product.id">{{
+            product.product.name
+          }}</vcl-select-list-item>
+          }
+        </vcl-select-list>
+      </vcl-select>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Select a variant</vcl-label>
+      <vcl-select>
+        <ng-container empty>
+          <div class="p-1">No Variant found!</div>
+        </ng-container>
+        <vcl-select-list
+          [(value)]="selectedVariant"
+          [disabled]="false"
+        >
+          @for (variant of variants; track variant.id) {
+          <vcl-select-list-item [value]="variant.id">{{
+            variant.name
+          }}</vcl-select-list-item>
+          }
+        </vcl-select-list>
+      </vcl-select>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Quantity</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <div>
+      <vcl-form-control-group>
+        <vcl-label>Select currency</vcl-label>
+        <vcl-select>
+          <vcl-select-list>
+            <vcl-select-list-item value="France"> France </vcl-select-list-item>
+            <vcl-select-list-item value="Germany">
+              Germany
+            </vcl-select-list-item>
+            <vcl-select-list-item value="uK"> UK </vcl-select-list-item>
+          </vcl-select-list>
+        </vcl-select>
+      </vcl-form-control-group>
+
+      <vcl-form-control-group>
+        <vcl-label>Regular price</vcl-label>
+        <vcl-input-field>
+          <input vclInput />
+        </vcl-input-field>
+      </vcl-form-control-group>
+
+      <vcl-checkbox>Sale</vcl-checkbox>
+
+      <vcl-form-control-group>
+        <vcl-label>Sale price</vcl-label>
+        <vcl-input-field>
+          <input vclInput />
+        </vcl-input-field>
+      </vcl-form-control-group>
+    </div>
+  </form>
+</vcl-panel-dialog>
diff --git a/packages/modules/ui/src/lib/components/molecules/order-items/order-item-form.component.ts b/packages/modules/ui/src/lib/components/molecules/order-items/order-item-form.component.ts
@@ -2,31 +2,30 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { ComponentLayerRef } from '@vcl/ng-vcl';
 
+import { IoRestorecommerceProductPhysicalVariant } from '@console-core/graphql';
+import { IProduct } from '@console-core/types';
+
 @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>
-  `,
+  templateUrl: './order-item-form.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RcOrderItemFormComponent {
+  selectedProduct = '';
+  selectedVariant = '';
+  variants: IoRestorecommerceProductPhysicalVariant[] = [];
+
   constructor(private layer: ComponentLayerRef) {}
 
-  get schema() {
-    return this.layer.data.schema;
+  get products(): IProduct[] {
+    return this.layer.data.products;
+  }
+
+  onSelectProduct(id: string) {
+    this.selectedProduct = id;
+    this.selectedVariant = '';
+    this.variants =
+      this.products.find((p) => p.id === id)?.product.physical?.variants || [];
   }
 
   onAction(_: string): void {

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
@@ -1,6 +1,6 @@
 import { Validators } from '@angular/forms';
 
-import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
+import { conditional, VCLFormFieldSchemaRoot } from '@vcl/ng-vcl';
 
 import { IProduct } from '@console-core/types';
 
@@ -20,14 +20,30 @@ export const buildOrderItemSchema = (
         type: 'select',
         validators: [Validators.required],
         params: {
-          placeholder: 'Select an items',
+          placeholder: 'Select an item',
           search: true,
           options: options.products.map((product) => ({
             value: product.id,
             label: product.product.name,
           })),
         },
       },
+      {
+        name: 'variantId',
+        label: 'Item variants',
+        type: 'select',
+        validators: [Validators.required],
+        params: {
+          placeholder: 'Select a variant',
+          // search: true,
+          options: (() => {
+            const x = conditional(['productId'], (enabled) => !!enabled.value);
+            console.log('xxx', x);
+            return [{ value: 'ex', label: 'ddd' }];
+          })(),
+        },
+        visible: conditional(['productId'], (enabled) => !!enabled.value),
+      },
       {
         type: 'buttons',
         buttons: [

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
@@ -12,7 +12,6 @@ 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';
 
 @Component({
   selector: 'rc-order-items',
@@ -45,9 +44,7 @@ export class RcOrderItemsComponent implements OnInit, OnDestroy {
     this.addItemLayer
       .open({
         data: {
-          schema: buildOrderItemSchema({
-            products: this.products,
-          }),
+          products: this.products,
         },
       })
       .subscribe((result) => {