Skip to content

Commit

Permalink
feat: #841 edit/delete product option on frontend
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 5a2b8f9 commit 3bb0333
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 29 deletions.
68 changes: 47 additions & 21 deletions apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.html
View file
Expand Up @@ -36,13 +36,14 @@ <h5>
}"
/>
<div
class="text-danger"
*ngIf="
form.controls['name'].errors &&
form.controls['name'].errors.required
form.controls['name'].touched
"
>
{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
<div *ngIf="form.controls['name'].errors.required">
{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
</div>
</div>
</div>
<div class="col-sm-6 mb-4">
Expand All @@ -63,13 +64,14 @@ <h5>
}"
/>
<div
class="text-danger"
*ngIf="
form.controls['code'].errors &&
form.controls['code'].errors.required
form.controls['code'].touched
"
>
{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
<div *ngIf="form.controls['code'].errors.required">
{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -99,13 +101,19 @@ <h5>
>
</nb-select>
<div
class="text-danger"
*ngIf="
form.controls['productTypeId'].errors &&
form.controls['productTypeId'].errors.required
form.controls['productTypeId'].touched
"
>
{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
<div
*ngIf="
form.controls['productTypeId'].errors
.required
"
>
{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
</div>
</div>
</div>
<div class="col-sm-6 mb-4">
Expand Down Expand Up @@ -135,14 +143,19 @@ <h5>
>
</nb-select>
<div
class="text-danger"
*ngIf="
form.controls['productCategoryId'].errors &&
form.controls['productCategoryId'].errors
.required
form.controls['productCategoryId'].touched
"
>
{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
<div
*ngIf="
form.controls['productCategoryId'].errors
.required
"
>
{{ 'VALIDATION.FIELD_REQUIRED' | translate }}
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -174,8 +187,19 @@ <h5>
</div>
</div>
<div class="options-wrap mb-4">
<div *ngFor="let option of options" class="option">
<div
*ngFor="let option of options"
class="option"
(click)="onEditOption($event)"
>
{{ option.name }}
<span class="option-delete">
<nb-icon
class="ml-auto mt-1 close"
icon="close-outline"
(click)="onRemoveOption($event)"
></nb-icon>
</span>
</div>
</div>
<div class="row d-bottom">
Expand All @@ -187,12 +211,10 @@ <h5>
fullWidth
id="addOption"
type="text"
[(ngModel)]="optionValue"
[(ngModel)]="activeOption.name"
[ngModelOptions]="{ standalone: true }"
nbInput
[placeholder]="
'INVENTORY_PAGE.ADD_OPTION' | translate
"
[placeholder]="'INVENTORY_PAGE.NAME' | translate"
/>
</div>
<div class="col-sm-4">
Expand All @@ -203,7 +225,7 @@ <h5>
fullWidth
id="optionCode"
type="text"
[(ngModel)]="optionCode"
[(ngModel)]="activeOption.code"
[ngModelOptions]="{ standalone: true }"
nbInput
[placeholder]="'INVENTORY_PAGE.CODE' | translate"
Expand All @@ -213,9 +235,13 @@ <h5>
<button
status="success"
nbButton
(click)="onAddOption()"
(click)="onSaveOption()"
>
{{ 'INVENTORY_PAGE.ADD_OPTION' | translate }}
{{
optionMode === 'create'
? ('INVENTORY_PAGE.ADD_OPTION' | translate)
: ('INVENTORY_PAGE.EDIT_OPTION' | translate)
}}
</button>
</div>
</div>
Expand Down
18 changes: 18 additions & 0 deletions apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.scss
View file
Expand Up @@ -8,13 +8,31 @@
display: flex;
}

.option-delete {
height: 20px;
width: 20px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 5px;

nb-icon {
width: 100%;
color: #fff;
padding-bottom: 2px;
}
}

.option {
padding: 5px 10px;
font-size: 12px;
background: #3366ff;
border-radius: 7px;
color: #fff;
margin-right: 10px;
display: flex;
align-items: center;
cursor: pointer;
}

.text-danger {
Expand Down
61 changes: 53 additions & 8 deletions apps/gauzy/src/app/@shared/product-mutation/product-form/product-form.component.ts
View file
Expand Up @@ -6,7 +6,8 @@ import {
ProductType,
ProductCategory,
ProductOption,
ProductVariant
ProductVariant,
ProductOptionUI
} from '@gauzy/models';
import { TranslateService } from '@ngx-translate/core';
import { ProductTypeService } from '../../../@core/services/product-type.service';
Expand All @@ -23,8 +24,8 @@ export class ProductFormComponent extends TranslationBaseComponent
form: FormGroup;
@Input() product: Product;

optionValue = '';
optionCode = '';
activeOption: ProductOptionUI = {};
optionMode = 'create';

productTypes: ProductType[];
productCategories: ProductCategory[];
Expand Down Expand Up @@ -110,12 +111,56 @@ export class ProductFormComponent extends TranslationBaseComponent
this.save.emit(productRequest);
}

onAddOption() {
if (!(this.optionValue && this.optionCode)) return;
onSaveOption() {
if (!(this.activeOption.name && this.activeOption.code)) return;

switch (this.optionMode) {
case 'create':
this.options.push({
name: this.activeOption.name,
code: this.activeOption.code
});
break;
case 'edit': {
const target = this.options.find(
(option) => option.name === this.activeOption.oldName
);
target.name = this.activeOption.name;
target.code = this.activeOption.code;
break;
}
}

this.optionMode = 'create';
this.activeOption = {};
}

onRemoveOption($event: any) {
const optionElement = $event.path.find((el: any) =>
el.classList.contains('option')
);
const removeOptionTitle = optionElement ? optionElement.innerText : '';

if (!removeOptionTitle) return;

this.options.push({ name: this.optionValue, code: this.optionCode });
this.optionValue = '';
this.optionCode = '';
this.options = this.options.filter(
(option) => option.name !== removeOptionTitle
);
}

onEditOption($event: any) {
this.optionMode = 'edit';
const target = this.options.find(
(option) => option.name === $event.target.innerText
);

if (!target) return;

this.activeOption = {
name: target.name,
code: target.code,
oldName: target.name
};
}

onEditProductVariant(productVariantId: string) {
Expand Down
1 change: 1 addition & 0 deletions apps/gauzy/src/assets/i18n/en.json
View file
Expand Up @@ -828,6 +828,7 @@
"IS_EQUIPMENT": "Is equipment",
"TRACK_INVENTORY": "Track inventory",
"ADD_OPTION": "Add option",
"EDIT_OPTION": "Edit option",
"INTERNATIONAL_REFERENCE": "International reference",
"CODE": "Code",
"NOTES": "Notes",
Expand Down
7 changes: 7 additions & 0 deletions libs/models/src/lib/product.model.ts
View file
Expand Up @@ -63,6 +63,13 @@ export interface ProductOption extends IBaseEntityModel {
code: string;
}

export interface ProductOptionUI {
name?: string;
code?: string;
oldName?: string;
oldCode?: string;
}

export enum BillingInvoicingPolicyEnum {
QUANTITY_ORDERED = 'Quantity ordered',
QUANTITY_DELIVERED = 'Quantity Delivered'
Expand Down

0 comments on commit 3bb0333

Please sign in to comment.