feat: add product variant form

restorecommerce · Aug 17, 2024 · dc83065 · dc83065
1 parent 86429d6
commit dc83065
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 0 deletions.
diff --git a/packages/modules/product/src/lib/components/product-creation-form.component.ts b/packages/modules/product/src/lib/components/product-creation-form.component.ts
@@ -116,6 +116,39 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
           </vcl-select>
         </vcl-form-control-group>
       </div>
+
+      <!-- <div class="row justify-content-end w-100p mt-2">
+        <div class="loose-button-group">
+          <button vcl-button>Add variant</button>
+        </div>
+      </div> -->
+      <div class="divider divider-horizontal row justify-center">
+        <div class="divider-rule"></div>
+        <div class="icogram divider-element">
+          <div class="text">Product variant</div>
+        </div>
+      </div>
+
+      <app-module-product-variant-form />
+
+      <div class="row justify-content-end w-100p mt-2">
+        <div class="loose-button-group">
+          <button
+            vcl-button
+            type="button"
+            class="transparent"
+          >
+            Cancel
+          </button>
+
+          <button
+            vcl-button
+            type="submit"
+          >
+            Save
+          </button>
+        </div>
+      </div>
     </div>
   `,
   selector: 'app-module-product-creation-form',

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
@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+
+@Component({
+  template: `
+    <div class="row">
+      <div class="flex-12">
+        <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>
+      </div>
+    </div>
+  `,
+  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/modules-product.module.ts b/packages/modules/product/src/lib/modules-product.module.ts
@@ -7,6 +7,7 @@ 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';
@@ -19,6 +20,7 @@ import { modulesProductRoutes } from './lib.routes';
     ProductEditComponent,
     ProductViewComponent,
     ProductCreationFormComponent,
+    ProductVariantFormComponent,
   ],
   imports: [
     ModulesUiModule.forChild(),