From 3bb033365f209166b8d58964a88f5c9210526314 Mon Sep 17 00:00:00 2001 From: Tsvetelina Date: Mon, 18 May 2020 15:25:41 +0300 Subject: [PATCH] feat: #841 edit/delete product option on frontend --- .../product-form/product-form.component.html | 68 +++++++++++++------ .../product-form/product-form.component.scss | 18 +++++ .../product-form/product-form.component.ts | 61 ++++++++++++++--- apps/gauzy/src/assets/i18n/en.json | 1 + libs/models/src/lib/product.model.ts | 7 ++ 5 files changed, 126 insertions(+), 29 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 5335f4540b..8e1a0ccb20 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 @@ -36,13 +36,14 @@
}" />
- {{ 'VALIDATION.FIELD_REQUIRED' | translate }} +
+ {{ 'VALIDATION.FIELD_REQUIRED' | translate }} +
@@ -63,13 +64,14 @@
}" />
- {{ 'VALIDATION.FIELD_REQUIRED' | translate }} +
+ {{ 'VALIDATION.FIELD_REQUIRED' | translate }} +
@@ -99,13 +101,19 @@
>
- {{ 'VALIDATION.FIELD_REQUIRED' | translate }} +
+ {{ 'VALIDATION.FIELD_REQUIRED' | translate }} +
@@ -135,14 +143,19 @@
>
- {{ 'VALIDATION.FIELD_REQUIRED' | translate }} +
+ {{ 'VALIDATION.FIELD_REQUIRED' | translate }} +
@@ -174,8 +187,19 @@
-
+
{{ option.name }} + + +
@@ -187,12 +211,10 @@
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" />
@@ -203,7 +225,7 @@
fullWidth id="optionCode" type="text" - [(ngModel)]="optionCode" + [(ngModel)]="activeOption.code" [ngModelOptions]="{ standalone: true }" nbInput [placeholder]="'INVENTORY_PAGE.CODE' | translate" @@ -213,9 +235,13 @@
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 95fe397323..3abbcfd001 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 @@ -8,6 +8,21 @@ 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; @@ -15,6 +30,9 @@ border-radius: 7px; color: #fff; margin-right: 10px; + display: flex; + align-items: center; + cursor: pointer; } .text-danger { 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 index fd3e8ffbef..2a0701001b 100644 --- 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 @@ -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'; @@ -23,8 +24,8 @@ export class ProductFormComponent extends TranslationBaseComponent form: FormGroup; @Input() product: Product; - optionValue = ''; - optionCode = ''; + activeOption: ProductOptionUI = {}; + optionMode = 'create'; productTypes: ProductType[]; productCategories: ProductCategory[]; @@ -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) { diff --git a/apps/gauzy/src/assets/i18n/en.json b/apps/gauzy/src/assets/i18n/en.json index 0333651e9b..991a945666 100644 --- a/apps/gauzy/src/assets/i18n/en.json +++ b/apps/gauzy/src/assets/i18n/en.json @@ -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", diff --git a/libs/models/src/lib/product.model.ts b/libs/models/src/lib/product.model.ts index 4f31e4e034..3f5ebff5a2 100644 --- a/libs/models/src/lib/product.model.ts +++ b/libs/models/src/lib/product.model.ts @@ -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'