feat: #841/product variant mutation form template

ever-co · Apr 16, 2020 · 711519c · 711519c
1 parent b01ec5d
commit 711519c
Show file tree

Hide file tree

Showing 9 changed files with 271 additions and 126 deletions.
diff --git a/apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.ts b/apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.ts
@@ -81,8 +81,6 @@ export class ProductFormComponent extends TranslationBaseComponent
 			})
 		};
 
-		console.log(newProduct);
-
 		this.save.emit(newProduct);
 	}
 

diff --git a/apps/gauzy/src/app/@shared/product-mutation/product-mutation.component.html b/apps/gauzy/src/app/@shared/product-mutation/product-mutation.component.html
@@ -4,4 +4,6 @@
 		(save)="onSaveProduct($event)"
 		(cancel)="closeDialog()"
 	></ngx-product-form>
+	<ngx-product-variant-form *ngIf="edit === 'product-variant'">
+	</ngx-product-variant-form>
 </nb-card>
diff --git a/apps/gauzy/src/app/@shared/product-mutation/product-mutation.component.ts b/apps/gauzy/src/app/@shared/product-mutation/product-mutation.component.ts
@@ -15,7 +15,7 @@ export class ProductMutationComponent extends TranslationBaseComponent {
 	form: FormGroup;
 	productItem: Product;
 
-	edit = 'product';
+	edit = 'product-variant';
 
 	constructor(
 		readonly translationService: TranslateService,

diff --git a/apps/gauzy/src/app/@shared/product-mutation/product-mutation.module.ts b/apps/gauzy/src/app/@shared/product-mutation/product-mutation.module.ts
@@ -19,9 +19,14 @@ import { ProductFormComponent } from './product-form/product-form.component';
 import { ProductCategoryService } from '../../@core/services/product-category.service';
 import { ProductService } from '../../@core/services/product.service';
 import { ProductTypeService } from '../../@core/services/product-type.service';
+import { ProductVariantFormComponent } from './product-variant-form/product-variant-form.component';
 
 @NgModule({
-	declarations: [ProductMutationComponent, ProductFormComponent],
+	declarations: [
+		ProductMutationComponent,
+		ProductFormComponent,
+		ProductVariantFormComponent
+	],
 	imports: [
 		ThemeModule,
 		NgSelectModule,

diff --git a/...src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.html b/...src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.html
@@ -1,121 +1,231 @@
-<nb-card-body>
-	<form>
-		<nb-checkbox>
-			<span>{{ 'INVENTORY_PAGE.ENABLED' | translate }}</span>
-		</nb-checkbox>
-
-		<input
-			fullWidth
-			id="internationalReferenceInput"
-			type="text"
-			nbInput
-			[placeholder]="'INVENTORY_PAGE.INTERNATIONAL_REFERENCE' | translate"
-		/>
-
-		<input
-			fullWidth
-			id="invoicingPolicyInput"
-			type="text"
-			nbInput
-			[placeholder]="
-				'INVENTORY_PAGE.BILLING_INVOICING_POLICY' | translate
-			"
-		/>
-
-		<input
-			fullWidth
-			id="retailPriceInput"
-			type="text"
-			nbInput
-			[placeholder]="'INVENTORY_PAGE.RETAIL_PRICE' | translate"
-		/>
-
-		<nb-select
-			fullWidth
-			[placeholder]="'INVENTORY_PAGE.RETAIL_PRICE_CURRENCY' | translate"
-		>
-			<nb-option value="">Option 1</nb-option>
-		</nb-select>
-
-		<input
-			fullWidth
-			id="unitCost"
-			type="number"
-			nbInput
-			[placeholder]="'INVENTORY_PAGE.UNIT_COST' | translate"
-		/>
-
-		<nb-select
-			fullWidth
-			[placeholder]="'INVENTORY_PAGE.UNIT_COST_CURRENCY' | translate"
-		>
-			<nb-option value="">Option 1</nb-option>
-		</nb-select>
-
-		<input
-			fullWidth
-			id="quantityInput"
-			type="number"
-			nbInput
-			[placeholder]="'INVENTORY_PAGE.QUANTITY' | translate"
-		/>
-
-		<input
-			fullWidth
-			id="taxesInput"
-			type="number"
-			nbInput
-			[placeholder]="'INVENTORY_PAGE.TAXES' | translate"
-		/>
-
-		<nb-checkbox>
-			<span>{{ 'INVENTORY_PAGE.ENABLED' | translate }}</span>
-		</nb-checkbox>
-
-		<nb-checkbox>
-			<span>{{ 'INVENTORY_PAGE.IS_SUBSCRIPTION' | translate }}</span>
-		</nb-checkbox>
-
-		<nb-checkbox>
-			<span>{{
-				'INVENTORY_PAGE.IS_PURCHASE_AUTOMATICALLY' | translate
-			}}</span>
-		</nb-checkbox>
-
-		<nb-checkbox>
-			<span>{{ 'INVENTORY_PAGE.CAN_BE_SOLD' | translate }}</span>
-		</nb-checkbox>
-
-		<nb-checkbox>
-			<span>{{ 'INVENTORY_PAGE.CAN_BE_PURCHASED' | translate }}</span>
-		</nb-checkbox>
-
-		<nb-checkbox>
-			<span>{{ 'INVENTORY_PAGE.CAN_BE_CHARGED' | translate }}</span>
-		</nb-checkbox>
-
-		<nb-checkbox>
-			<span>{{ 'INVENTORY_PAGE.CAN_BE_RENTED' | translate }}</span>
-		</nb-checkbox>
-
-		<nb-checkbox>
-			<span>{{ 'INVENTORY_PAGE.IS_EQUIPMENT' | translate }}</span>
-		</nb-checkbox>
-
-		<input
-			fullWidth
-			id="notes"
-			type="string"
-			nbInput
-			[placeholder]="'INVENTORY_PAGE.NOTES' | translate"
-		/>
-
-		<textarea
-			nbInput
-			fullWidth
-			id="description"
-			[placeholder]="'INVENTORY_PAGE.DESCRIPTION' | translate"
-		>
-		</textarea>
-	</form>
-</nb-card-body>
+<nb-card>
+	<nb-card-header class="d-flex">
+		<h5>
+			{{ 'INVENTORY_PAGE.EDIT_PRODUCT_VARIANT' | translate }}
+		</h5>
+		<nb-icon
+			class="ml-auto mt-1 close"
+			icon="close-outline"
+			(click)="onCancel()"
+		></nb-icon>
+	</nb-card-header>
+	<nb-card-body>
+		<form>
+			<div class="form-group">
+				<div class="row">
+					<div class="col-sm-6 mb-4">
+						<label class="label" for="internationalReferenceInput">
+							{{
+								'INVENTORY_PAGE.INTERNATIONAL_REFERENCE'
+									| translate
+							}}
+						</label>
+
+						<input
+							fullWidth
+							id="internationalReferenceInput"
+							type="text"
+							nbInput
+							[placeholder]="
+								'INVENTORY_PAGE.INTERNATIONAL_REFERENCE'
+									| translate
+							"
+						/>
+					</div>
+					<div class="col-sm-6 mb-4">
+						<label class="label" for="invoicingPolicyInput">
+							{{
+								'INVENTORY_PAGE.BILLING_INVOICING_POLICY'
+									| translate
+							}}
+						</label>
+
+						<input
+							fullWidth
+							id="invoicingPolicyInput"
+							type="text"
+							nbInput
+							[placeholder]="
+								'INVENTORY_PAGE.BILLING_INVOICING_POLICY'
+									| translate
+							"
+						/>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-sm-6 mb-4">
+						<label class="label" for="quantityInput">
+							{{ 'INVENTORY_PAGE.QUANTITY' | translate }}
+						</label>
+						<input
+							fullWidth
+							id="quantityInput"
+							type="number"
+							nbInput
+							[placeholder]="
+								'INVENTORY_PAGE.QUANTITY' | translate
+							"
+						/>
+					</div>
+					<div class="col-sm-6 mb-4">
+						<label class="label" for="taxesInput">
+							{{ 'INVENTORY_PAGE.TAXES' | translate }}
+						</label>
+						<input
+							fullWidth
+							id="taxesInput"
+							type="number"
+							nbInput
+							[placeholder]="'INVENTORY_PAGE.TAXES' | translate"
+						/>
+					</div>
+				</div>
+				<hr />
+				<div class="row">
+					<div class="col-sm-8 mb-4">
+						<label class="label" for="retailPriceInput">
+							{{ 'INVENTORY_PAGE.RETAIL_PRICE' | translate }}
+						</label>
+
+						<input
+							fullWidth
+							id="retailPriceInput"
+							type="text"
+							nbInput
+							[placeholder]="
+								'INVENTORY_PAGE.RETAIL_PRICE' | translate
+							"
+						/>
+					</div>
+					<div class="col-sm-4 mb-4">
+						<label class="label" for="retailPriceCurrencyInput">
+							{{
+								'INVENTORY_PAGE.RETAIL_PRICE_CURRENCY'
+									| translate
+							}}
+						</label>
+						<nb-select
+							id="retailPriceCurrencyInput"
+							fullWidth
+							[placeholder]="
+								'INVENTORY_PAGE.RETAIL_PRICE_CURRENCY'
+									| translate
+							"
+						>
+							<nb-option value="">Option 1</nb-option>
+						</nb-select>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-sm-8 mb-4">
+						<label class="label" for="unitCost">
+							{{ 'INVENTORY_PAGE.UNIT_COST' | translate }}
+						</label>
+
+						<input
+							fullWidth
+							id="unitCost"
+							type="number"
+							nbInput
+							[placeholder]="
+								'INVENTORY_PAGE.UNIT_COST' | translate
+							"
+						/>
+					</div>
+					<div class="col-sm-4 mb-4">
+						<label class="label" for="uniCostCurrency">
+							{{
+								'INVENTORY_PAGE.UNIT_COST_CURRENCY' | translate
+							}}
+						</label>
+						<nb-select
+							id="uniCostCurrency"
+							fullWidth
+							[placeholder]="
+								'INVENTORY_PAGE.UNIT_COST_CURRENCY' | translate
+							"
+						>
+							<nb-option value="">Option 1</nb-option>
+						</nb-select>
+					</div>
+				</div>
+				<div class="row mb-4">
+					<div class="col-sm-4 flex-column">
+						<nb-checkbox>
+							<span>{{
+								'INVENTORY_PAGE.ENABLED' | translate
+							}}</span>
+						</nb-checkbox>
+
+						<nb-checkbox>
+							<span>{{
+								'INVENTORY_PAGE.IS_SUBSCRIPTION' | translate
+							}}</span>
+						</nb-checkbox>
+
+						<nb-checkbox>
+							<span>{{
+								'INVENTORY_PAGE.IS_PURCHASE_AUTOMATICALLY'
+									| translate
+							}}</span>
+						</nb-checkbox>
+					</div>
+					<div class="col-sm-4 flex-column">
+						<nb-checkbox>
+							<span>{{
+								'INVENTORY_PAGE.CAN_BE_SOLD' | translate
+							}}</span>
+						</nb-checkbox>
+
+						<nb-checkbox>
+							<span>{{
+								'INVENTORY_PAGE.CAN_BE_PURCHASED' | translate
+							}}</span>
+						</nb-checkbox>
+
+						<nb-checkbox>
+							<span>{{
+								'INVENTORY_PAGE.CAN_BE_CHARGED' | translate
+							}}</span>
+						</nb-checkbox>
+					</div>
+					<div class="col-sm-4 flex-column">
+						<nb-checkbox>
+							<span>{{
+								'INVENTORY_PAGE.CAN_BE_RENTED' | translate
+							}}</span>
+						</nb-checkbox>
+
+						<nb-checkbox>
+							<span>{{
+								'INVENTORY_PAGE.IS_EQUIPMENT' | translate
+							}}</span>
+						</nb-checkbox>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-sm-12 mb-4">
+						<label class="label" for="notes">
+							{{ 'INVENTORY_PAGE.NOTES' | translate }}
+						</label>
+						<textarea
+							nbInput
+							fullWidth
+							id="notes"
+							[placeholder]="'INVENTORY_PAGE.NOTES' | translate"
+						>
+						</textarea>
+					</div>
+				</div>
+			</div>
+		</form>
+	</nb-card-body>
+	<nb-card-footer class="text-right">
+		<button (click)="onCancel()" status="warning" class="mr-3" nbButton>
+			{{ 'BUTTONS.CANCEL' | translate }}
+		</button>
+		<button status="success" nbButton (click)="onSaveRequest()">
+			{{ 'BUTTONS.SAVE' | translate }}
+		</button>
+	</nb-card-footer>
+</nb-card>
diff --git a/...src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.scss b/...src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.scss
@@ -0,0 +1,4 @@
+.flex-column {
+	display: flex;
+	flex-direction: column;
+}