Skip to content

Commit

Permalink
feat: #841 added validations on product variant form
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsvetelina-e-y
tsvetelina-e-y committed May 18, 2020
1 parent 77133f3 commit 5a2b8f9
Show file tree
Hide file tree
Showing 6 changed files with 195 additions and 13 deletions.
2 changes: 1 addition & 1 deletion apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.html
View file
Expand Up @@ -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">
Expand Down
6 changes: 6 additions & 0 deletions apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.scss
View file
Expand Up @@ -16,3 +16,9 @@
color: #fff;
margin-right: 10px;
}

.text-danger {
max-width: 100%;
font-size: 12px;
margin-top: 5px;
}
176 changes: 168 additions & 8 deletions ...src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.html
View file
Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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 />
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 6 additions & 0 deletions ...src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.scss
View file
Expand Up @@ -2,3 +2,9 @@
display: flex;
flex-direction: column;
}

.text-danger {
max-width: 100%;
font-size: 12px;
margin-top: 5px;
}
14 changes: 10 additions & 4 deletions ...y/src/app/@shared/product-mutation/product-variant-form/product-variant-form.component.ts
View file
Expand Up @@ -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 ||
Expand All @@ -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 ||
Expand Down
4 changes: 4 additions & 0 deletions apps/gauzy/src/assets/i18n/en.json
View file
Expand Up @@ -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!"
}
}

0 comments on commit 5a2b8f9

Please sign in to comment.