feat: add sub-section form for variant

restorecommerce · Aug 18, 2024 · 252af36 · 252af36
1 parent dc83065
commit 252af36
Show file tree

Hide file tree

Showing 10 changed files with 309 additions and 35 deletions.
diff --git a/...onents/product-creation-form.component.ts → .../forms/product-creation-form.component.ts b/...onents/product-creation-form.component.ts → .../forms/product-creation-form.component.ts
@@ -92,6 +92,14 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
           </vcl-select>
         </vcl-form-control-group>
 
+        <!--  TODO Should be dynamic to accomodate additional taxes -->
+        <vcl-form-control-group>
+          <vcl-label>Tax Id</vcl-label>
+          <vcl-input-field>
+            <input vclInput />
+          </vcl-input-field>
+        </vcl-form-control-group>
+
         <vcl-form-control-group>
           <vcl-label>Global trade item number</vcl-label>
           <vcl-input-field>

diff --git a/packages/modules/product/src/lib/components/forms/product-files-form.component.ts b/packages/modules/product/src/lib/components/forms/product-files-form.component.ts
@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+
+@Component({
+  template: `
+    <vcl-form-control-group>
+      <vcl-label>Filename</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Caption</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>URL</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Content type</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>File index</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+  `,
+  selector: 'app-module-product-file-form',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProductFileFormComponent {
+  @HostBinding('class') className = 'w-100p';
+}
diff --git a/packages/modules/product/src/lib/components/forms/product-image-form.component.ts b/packages/modules/product/src/lib/components/forms/product-image-form.component.ts
@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+
+@Component({
+  template: `
+    <vcl-form-control-group>
+      <vcl-label>Filename</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Caption</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>URL</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Content type</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Width</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Length</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Height</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Image index</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+  `,
+  selector: 'app-module-product-image-form',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProductImageFormComponent {
+  @HostBinding('class') className = 'w-100p';
+}
diff --git a/packages/modules/product/src/lib/components/forms/product-package-form.component.ts b/packages/modules/product/src/lib/components/forms/product-package-form.component.ts
@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+
+@Component({
+  template: `
+    <vcl-form-control-group>
+      <vcl-label>Width</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Length</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Height</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Weight (kg)</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-checkbox formControlName="terms">Rotatable</vcl-checkbox>
+    </vcl-form-control-group>
+  `,
+  selector: 'app-module-product-package-form',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProductPackageFormComponent {
+  @HostBinding('class') className = 'w-100p';
+}
diff --git a/packages/modules/product/src/lib/components/forms/product-price-form.component.ts b/packages/modules/product/src/lib/components/forms/product-price-form.component.ts
@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+
+@Component({
+  template: `
+    <vcl-form-control-group>
+      <vcl-label>Currency</vcl-label>
+      <vcl-select>
+        <vcl-select-list>
+          <vcl-select-list-item value="usd"> USD </vcl-select-list-item>
+          <vcl-select-list-item value="eur"> EURO </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-form-control-group>
+      <vcl-label>Sale Price</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-checkbox formControlName="terms"> Sale ? </vcl-checkbox>
+    </vcl-form-control-group>
+  `,
+  selector: 'app-module-product-price-form',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProductPriceFormComponent {
+  @HostBinding('class') className = 'w-100p';
+}
diff --git a/packages/modules/product/src/lib/components/forms/product-property-form.component.ts b/packages/modules/product/src/lib/components/forms/product-property-form.component.ts
@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+
+@Component({
+  template: `
+    <vcl-form-control-group>
+      <vcl-label>id</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>value</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Unit code</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+  `,
+  selector: 'app-module-product-props-form',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProductPropertyFormComponent {
+  @HostBinding('class') className = 'w-100p';
+}
diff --git a/packages/modules/product/src/lib/components/forms/product-variant-form.component.ts b/packages/modules/product/src/lib/components/forms/product-variant-form.component.ts
@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+
+@Component({
+  template: `
+    <vcl-form-control-group>
+      <vcl-label>Parent variant</vcl-label>
+      <vcl-select>
+        <vcl-select-list>
+          <vcl-select-list-item value="variant-1"
+            >Variant 1</vcl-select-list-item
+          >
+        </vcl-select-list>
+      </vcl-select>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Name</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Description</vcl-label>
+      <vcl-input-field class="auto-height">
+        <textarea
+          vclInput
+          [autogrow]="true"
+          [minRows]="5"
+          [maxRows]="10"
+        ></textarea>
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Stock Level</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <vcl-form-control-group>
+      <vcl-label>Stock Keeping Unit</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+
+    <!-- Money section -->
+    <app-module-product-price-form />
+
+    <!--  TODO Should be dynamic to accomodate additional taxes -->
+    <vcl-form-control-group>
+      <vcl-label>Tax Id</vcl-label>
+      <vcl-input-field>
+        <input vclInput />
+      </vcl-input-field>
+    </vcl-form-control-group>
+  `,
+  selector: 'app-module-product-variant-form',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProductVariantFormComponent {
+  @HostBinding('class') className = 'w-100p';
+}
diff --git a/packages/modules/product/src/lib/components/product-variant-form.component.ts b/packages/modules/product/src/lib/components/product-variant-form.component.ts
diff --git a/packages/modules/product/src/lib/modules-product.module.ts b/packages/modules/product/src/lib/modules-product.module.ts
@@ -3,11 +3,16 @@ import { RouterModule } from '@angular/router';
 
 import { ModulesUiModule } from '@console-modules/ui';
 
+import { ProductCreationFormComponent } from './components/forms/product-creation-form.component';
+import { ProductFileFormComponent } from './components/forms/product-files-form.component';
+import { ProductImageFormComponent } from './components/forms/product-image-form.component';
+import { ProductPackageFormComponent } from './components/forms/product-package-form.component';
+import { ProductPriceFormComponent } from './components/forms/product-price-form.component';
+import { ProductPropertyFormComponent } from './components/forms/product-property-form.component';
+import { ProductVariantFormComponent } from './components/forms/product-variant-form.component';
 import { ProductCreateComponent } from './components/product-create.component';
-import { ProductCreationFormComponent } from './components/product-creation-form.component';
 import { ProductEditComponent } from './components/product-edit.component';
 import { ProductIndexComponent } from './components/product-index.component';
-import { ProductVariantFormComponent } from './components/product-variant-form.component';
 import { ProductViewComponent } from './components/product-view.component';
 import { ProductTemplateComponent } from './components/template/product-template.component';
 import { modulesProductRoutes } from './lib.routes';
@@ -21,6 +26,11 @@ import { modulesProductRoutes } from './lib.routes';
     ProductViewComponent,
     ProductCreationFormComponent,
     ProductVariantFormComponent,
+    ProductPriceFormComponent,
+    ProductImageFormComponent,
+    ProductPropertyFormComponent,
+    ProductFileFormComponent,
+    ProductPackageFormComponent,
   ],
   imports: [
     ModulesUiModule.forChild(),

diff --git a/packages/modules/ui/src/lib/modules-ui.module.ts b/packages/modules/ui/src/lib/modules-ui.module.ts
@@ -28,6 +28,7 @@ import {
   VCLFormControlGroupModule,
   VCLDataListModule,
   VCLPanelModule,
+  VCLCheckboxModule,
 } from '@vcl/ng-vcl';
 
 import {
@@ -141,6 +142,7 @@ const modules = [
   VCLFormControlGroupModule,
   VCLDataListModule,
   VCLPanelModule,
+  VCLCheckboxModule,
 ];
 
 const atoms = [