From 252af36f7de72c5c5c33f0ed46881f0f4a93fe3e Mon Sep 17 00:00:00 2001 From: Bello Babakolo Date: Sun, 18 Aug 2024 11:55:02 +0100 Subject: [PATCH] feat: add sub-section form for variant --- .../product-creation-form.component.ts | 8 +++ .../forms/product-files-form.component.ts | 45 +++++++++++++ .../forms/product-image-form.component.ts | 66 +++++++++++++++++++ .../forms/product-package-form.component.ts | 42 ++++++++++++ .../forms/product-price-form.component.ts | 38 +++++++++++ .../forms/product-property-form.component.ts | 31 +++++++++ .../forms/product-variant-form.component.ts | 65 ++++++++++++++++++ .../product-variant-form.component.ts | 33 ---------- .../product/src/lib/modules-product.module.ts | 14 +++- .../modules/ui/src/lib/modules-ui.module.ts | 2 + 10 files changed, 309 insertions(+), 35 deletions(-) rename packages/modules/product/src/lib/components/{ => forms}/product-creation-form.component.ts (94%) create mode 100644 packages/modules/product/src/lib/components/forms/product-files-form.component.ts create mode 100644 packages/modules/product/src/lib/components/forms/product-image-form.component.ts create mode 100644 packages/modules/product/src/lib/components/forms/product-package-form.component.ts create mode 100644 packages/modules/product/src/lib/components/forms/product-price-form.component.ts create mode 100644 packages/modules/product/src/lib/components/forms/product-property-form.component.ts create mode 100644 packages/modules/product/src/lib/components/forms/product-variant-form.component.ts delete mode 100644 packages/modules/product/src/lib/components/product-variant-form.component.ts diff --git a/packages/modules/product/src/lib/components/product-creation-form.component.ts b/packages/modules/product/src/lib/components/forms/product-creation-form.component.ts similarity index 94% rename from packages/modules/product/src/lib/components/product-creation-form.component.ts rename to packages/modules/product/src/lib/components/forms/product-creation-form.component.ts index 2ee5da2f..72f6efaa 100644 --- a/packages/modules/product/src/lib/components/product-creation-form.component.ts +++ b/packages/modules/product/src/lib/components/forms/product-creation-form.component.ts @@ -92,6 +92,14 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; + + + Tax Id + + + + + Global trade item number 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 new file mode 100644 index 00000000..7fe300e3 --- /dev/null +++ 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: ` + + Filename + + + + + + + Caption + + + + + + + URL + + + + + + + Content type + + + + + + + File index + + + + + `, + 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 new file mode 100644 index 00000000..ccdd55a1 --- /dev/null +++ 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: ` + + Filename + + + + + + + Caption + + + + + + + URL + + + + + + + Content type + + + + + + + Width + + + + + + + Length + + + + + + + Height + + + + + + + Image index + + + + + `, + 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 new file mode 100644 index 00000000..76fc4d9e --- /dev/null +++ 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: ` + + Width + + + + + + + Length + + + + + + + Height + + + + + + + Weight (kg) + + + + + + + Rotatable + + `, + 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 new file mode 100644 index 00000000..25b2caa3 --- /dev/null +++ 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: ` + + Currency + + + USD + EURO + + + + + + Regular Price + + + + + + + Sale Price + + + + + + + Sale ? + + `, + 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 new file mode 100644 index 00000000..a66be47a --- /dev/null +++ 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: ` + + id + + + + + + + value + + + + + + + Unit code + + + + + `, + 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 new file mode 100644 index 00000000..58efcccc --- /dev/null +++ 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: ` + + Parent variant + + + Variant 1 + + + + + + Name + + + + + + + Description + + + + + + + Stock Level + + + + + + + Stock Keeping Unit + + + + + + + + + + + Tax Id + + + + + `, + 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 deleted file mode 100644 index 57045cef..00000000 --- a/packages/modules/product/src/lib/components/product-variant-form.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core'; - -@Component({ - template: ` -
-
- - Name - - - - - - - Description - - - - -
-
- `, - 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 index a78756ee..3ee0efcc 100644 --- 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 index bd7b821c..0a1868f1 100644 --- 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 = [