From 5a2b8f9851d70d8eedd9730dd7096f919c4bc68e Mon Sep 17 00:00:00 2001
From: Tsvetelina <tsvetelina@ever.co>
Date: Mon, 18 May 2020 11:38:10 +0300
Subject: [PATCH] feat: #841 added validations on product variant form

---
 .../product-form/product-form.component.html  |   2 +-
 .../product-form/product-form.component.scss  |   6 +
 .../product-variant-form.component.html       | 176 +++++++++++++++++-
 .../product-variant-form.component.scss       |   6 +
 .../product-variant-form.component.ts         |  14 +-
 apps/gauzy/src/assets/i18n/en.json            |   4 +
 6 files changed, 195 insertions(+), 13 deletions(-)

diff --git a/apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.html b/apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.html
index 2faebdddd1..5335f4540b 100644
--- a/apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.html
+++ b/apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.html
@@ -15,7 +15,7 @@ <h5>
 		></nb-icon>
 	</nb-card-header>
 	<nb-card-body>
-		<form [formGroup]="form" *ngIf="form">
+		<form [formGroup]="form" *ngIf="form" class="mb-4">
 			<div class="form-group">
 				<div class="row">
 					<div class="col-sm-6 mb-4">
diff --git a/apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.scss b/apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.scss
index 223dc65d6d..95fe397323 100644
--- a/apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.scss
+++ b/apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.scss
@@ -16,3 +16,9 @@
 	color: #fff;
 	margin-right: 10px;
 }
+
+.text-danger {
+	max-width: 100%;
+	font-size: 12px;
+	margin-top: 5px;
+}
diff --git a/apps/gauzy/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.html b/apps/gauzy/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.html
index df5a9f283c..093bd3f853 100644
--- a/apps/gauzy/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.html
+++ b/apps/gauzy/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.html
@@ -30,7 +30,25 @@ <h5>
 								'INVENTORY_PAGE.INTERNATIONAL_REFERENCE'
 									| translate
 							"
+							[ngClass]="{
+								'status-danger':
+									form.controls['internationalReference']
+										.invalid &&
+									form.controls['internationalReference']
+										.touched
+							}"
 						/>
+						<div
+							class="text-danger"
+							*ngIf="
+								form.controls['internationalReference']
+									.errors &&
+								form.controls['internationalReference'].errors
+									.required
+							"
+						>
+							{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
+						</div>
 					</div>
 					<div class="col-sm-6 mb-4">
 						<label class="label" for="invoicingPolicyInput">
@@ -47,13 +65,27 @@ <h5>
 									| translate
 							"
 							formControlName="invoicingPolicy"
+							[ngClass]="{
+								'status-danger':
+									form.controls['invoicingPolicy'].invalid &&
+									form.controls['invoicingPolicy'].touched
+							}"
 						>
 							<nb-option
 								*ngFor="let policy of billingInvoicingPolicies"
 								value="{{ policy }}"
-								>{{ policy }}</nb-option
-							>
+								>{{ policy }}
+							</nb-option>
 						</nb-select>
+						<div
+							class="text-danger"
+							*ngIf="
+								form.controls['invoicingPolicy'].errors &&
+								form.controls['invoicingPolicy'].errors.required
+							"
+						>
+							{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
+						</div>
 					</div>
 				</div>
 				<div class="row">
@@ -70,7 +102,30 @@ <h5>
 							[placeholder]="
 								'INVENTORY_PAGE.QUANTITY' | translate
 							"
+							[ngClass]="{
+								'status-danger':
+									form.controls['quantity'].invalid &&
+									form.controls['quantity'].touched
+							}"
 						/>
+						<div
+							class="text-danger"
+							*ngIf="
+								form.controls['quantity'].errors &&
+								form.controls['quantity'].errors.required
+							"
+						>
+							{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
+						</div>
+						<div
+							class="text-danger"
+							*ngIf="
+								form.controls['quantity'].errors &&
+								form.controls['quantity'].errors.min
+							"
+						>
+							{{ 'VALIDATION.ENTER_POSITIVE_NUMBER' | translate }}
+						</div>
 					</div>
 					<div class="col-sm-6 mb-4">
 						<label class="label" for="taxesInput">
@@ -83,7 +138,30 @@ <h5>
 							formControlName="taxes"
 							nbInput
 							[placeholder]="'INVENTORY_PAGE.TAXES' | translate"
+							[ngClass]="{
+								'status-danger':
+									form.controls['taxes'].invalid &&
+									form.controls['taxes'].touched
+							}"
 						/>
+						<div
+							class="text-danger"
+							*ngIf="
+								form.controls['taxes'].errors &&
+								form.controls['taxes'].errors.required
+							"
+						>
+							{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
+						</div>
+						<div
+							class="text-danger"
+							*ngIf="
+								form.controls['taxes'].errors &&
+								form.controls['taxes'].errors.min
+							"
+						>
+							{{ 'VALIDATION.ENTER_POSITIVE_NUMBER' | translate }}
+						</div>
 					</div>
 				</div>
 				<hr />
@@ -95,13 +173,36 @@ <h5>
 						<input
 							fullWidth
 							id="retailPriceInput"
-							type="text"
+							type="number"
 							formControlName="retailPrice"
 							nbInput
 							[placeholder]="
 								'INVENTORY_PAGE.RETAIL_PRICE' | translate
 							"
+							[ngClass]="{
+								'status-danger':
+									form.controls['retailPrice'].invalid &&
+									form.controls['retailPrice'].touched
+							}"
 						/>
+						<div
+							class="text-danger"
+							*ngIf="
+								form.controls['retailPrice'].errors &&
+								form.controls['retailPrice'].errors.required
+							"
+						>
+							{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
+						</div>
+						<div
+							class="text-danger"
+							*ngIf="
+								form.controls['retailPrice'].errors &&
+								form.controls['retailPrice'].errors.min
+							"
+						>
+							{{ 'VALIDATION.ENTER_POSITIVE_NUMBER' | translate }}
+						</div>
 					</div>
 					<div class="col-sm-4 mb-4">
 						<label class="label" for="retailPriceCurrencyInput">
@@ -118,13 +219,29 @@ <h5>
 								'INVENTORY_PAGE.RETAIL_PRICE_CURRENCY'
 									| translate
 							"
+							[ngClass]="{
+								'status-danger':
+									form.controls['retailPriceCurrency']
+										.invalid &&
+									form.controls['retailPriceCurrency'].touched
+							}"
 						>
 							<nb-option
 								*ngFor="let currency of currencies"
 								value="{{ currency }}"
-								>{{ currency }}</nb-option
-							>
+								>{{ currency }}
+							</nb-option>
 						</nb-select>
+						<div
+							class="text-danger"
+							*ngIf="
+								form.controls['retailPriceCurrency'].errors &&
+								form.controls['retailPriceCurrency'].errors
+									.required
+							"
+						>
+							{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
+						</div>
 					</div>
 				</div>
 				<div class="row">
@@ -141,7 +258,30 @@ <h5>
 							[placeholder]="
 								'INVENTORY_PAGE.UNIT_COST' | translate
 							"
+							[ngClass]="{
+								'status-danger':
+									form.controls['unitCost'].invalid &&
+									form.controls['unitCost'].touched
+							}"
 						/>
+						<div
+							class="text-danger"
+							*ngIf="
+								form.controls['unitCost'].errors &&
+								form.controls['unitCost'].errors.required
+							"
+						>
+							{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
+						</div>
+						<div
+							class="text-danger"
+							*ngIf="
+								form.controls['unitCost'].errors &&
+								form.controls['unitCost'].errors.min
+							"
+						>
+							{{ 'VALIDATION.ENTER_POSITIVE_NUMBER' | translate }}
+						</div>
 					</div>
 					<div class="col-sm-4 mb-4">
 						<label class="label" for="unitCostCurrency">
@@ -156,13 +296,28 @@ <h5>
 								'INVENTORY_PAGE.UNIT_COST_CURRENCY' | translate
 							"
 							formControlName="unitCostCurrency"
+							[ngClass]="{
+								'status-danger':
+									form.controls['unitCostCurrency'].invalid &&
+									form.controls['unitCostCurrency'].touched
+							}"
 						>
 							<nb-option
 								*ngFor="let currency of currencies"
 								value="{{ currency }}"
-								>{{ currency }}</nb-option
-							>
+								>{{ currency }}
+							</nb-option>
 						</nb-select>
+						<div
+							class="text-danger"
+							*ngIf="
+								form.controls['unitCostCurrency'].errors &&
+								form.controls['unitCostCurrency'].errors
+									.required
+							"
+						>
+							{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
+						</div>
 					</div>
 				</div>
 				<div class="row mb-4">
@@ -241,7 +396,12 @@ <h5>
 		<button (click)="onCancel()" status="warning" class="mr-3" nbButton>
 			{{ 'BUTTONS.CANCEL' | translate }}
 		</button>
-		<button status="success" nbButton (click)="onSaveRequest()">
+		<button
+			status="success"
+			[disabled]="form.invalid"
+			nbButton
+			(click)="onSaveRequest()"
+		>
 			{{ 'BUTTONS.SAVE' | translate }}
 		</button>
 	</nb-card-footer>
diff --git a/apps/gauzy/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.scss b/apps/gauzy/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.scss
index 978c0e3125..071a8c6b7e 100644
--- a/apps/gauzy/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.scss
+++ b/apps/gauzy/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.scss
@@ -2,3 +2,9 @@
 	display: flex;
 	flex-direction: column;
 }
+
+.text-danger {
+	max-width: 100%;
+	font-size: 12px;
+	margin-top: 5px;
+}
diff --git a/apps/gauzy/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.ts b/apps/gauzy/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.ts
index abb519ea23..afda6509ff 100644
--- a/apps/gauzy/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.ts
+++ b/apps/gauzy/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.ts
@@ -41,11 +41,17 @@ export class ProductVariantFormComponent extends TranslationBaseComponent
 				this.productVariant.billingInvoicingPolicy || '',
 				Validators.required
 			],
-			quantity: [this.productVariant.quantity || 0, Validators.required],
-			taxes: [this.productVariant.taxes || 0, Validators.required],
+			quantity: [
+				this.productVariant.quantity || 0,
+				[Validators.required, Validators.min(0)]
+			],
+			taxes: [
+				this.productVariant.taxes || 0,
+				[Validators.required, Validators.min(0)]
+			],
 			retailPrice: [
 				this.productVariant.price.retailPrice || 0,
-				Validators.required
+				[Validators.required, Validators.min(0)]
 			],
 			retailPriceCurrency: [
 				this.productVariant.price.retailPriceCurrency ||
@@ -54,7 +60,7 @@ export class ProductVariantFormComponent extends TranslationBaseComponent
 			],
 			unitCost: [
 				this.productVariant.price.unitCost || 0,
-				Validators.required
+				[Validators.required, Validators.min(0)]
 			],
 			unitCostCurrency: [
 				this.productVariant.price.unitCostCurrency ||
diff --git a/apps/gauzy/src/assets/i18n/en.json b/apps/gauzy/src/assets/i18n/en.json
index e043841c66..0333651e9b 100644
--- a/apps/gauzy/src/assets/i18n/en.json
+++ b/apps/gauzy/src/assets/i18n/en.json
@@ -1210,5 +1210,9 @@
 	"ONBOARDING": {
 		"FIRST_ORGANIZATION": "Let's create your first organization",
 		"COMPLETE": "You're all set!"
+	},
+	"VALIDATION": {
+		"FIELD_REQUIRED": "This field is required!",
+		"ENTER_POSITIVE_NUMBER": "Please enter positive number!"
 	}
 }