From 90735d10974f66d7c23ba11f91dbf13284985f97 Mon Sep 17 00:00:00 2001 From: Bello Babakolo Date: Wed, 21 Aug 2024 13:40:39 +0100 Subject: [PATCH] feat: pass variant data to the edit form --- .../src/lib/documents/fragments/product.gql | 3 + .../graphql/src/lib/generated/generated.ts | 97 ++++--------------- .../src/lib/+state/product/product.facade.ts | 2 +- .../product-variant-modal.component.ts | 9 +- .../lib/components/product-view.component.ts | 5 +- .../lib/jss-forms/product-variant.jss-form.ts | 31 +++--- .../src/lib/jss-forms/product.jss-form.ts | 35 ------- 7 files changed, 53 insertions(+), 129 deletions(-) diff --git a/packages/core/graphql/src/lib/documents/fragments/product.gql b/packages/core/graphql/src/lib/documents/fragments/product.gql index f2df02aa..aa2b3286 100644 --- a/packages/core/graphql/src/lib/documents/fragments/product.gql +++ b/packages/core/graphql/src/lib/documents/fragments/product.gql @@ -15,6 +15,7 @@ fragment ProductFragment on IoRestorecommerceProductProduct { variants { id name + description # images { # id # index @@ -26,7 +27,9 @@ fragment ProductFragment on IoRestorecommerceProductProduct { # url # } stockLevel + stockKeepingUnit parentVariantId + taxIds price { currencyId regularPrice diff --git a/packages/core/graphql/src/lib/generated/generated.ts b/packages/core/graphql/src/lib/generated/generated.ts index 8317c769..ff1f09f2 100644 --- a/packages/core/graphql/src/lib/generated/generated.ts +++ b/packages/core/graphql/src/lib/generated/generated.ts @@ -5429,19 +5429,11 @@ export type CatalogProductMutateMutation = { __typename?: 'IoRestorecommerceProductPhysicalVariant'; id?: string | null; name?: string | null; + description?: string | null; stockLevel?: number | null; + stockKeepingUnit?: string | null; parentVariantId?: string | null; - images?: Array<{ - __typename?: 'IoRestorecommerceImageImage'; - id?: string | null; - index?: number | null; - filename?: string | null; - caption?: string | null; - contentType?: string | null; - height?: number | null; - width?: number | null; - url?: string | null; - }> | null; + taxIds?: Array | null; price?: { __typename?: 'IoRestorecommercePricePrice'; currencyId?: string | null; @@ -5534,19 +5526,11 @@ export type CatalogProductReadQuery = { __typename?: 'IoRestorecommerceProductPhysicalVariant'; id?: string | null; name?: string | null; + description?: string | null; stockLevel?: number | null; + stockKeepingUnit?: string | null; parentVariantId?: string | null; - images?: Array<{ - __typename?: 'IoRestorecommerceImageImage'; - id?: string | null; - index?: number | null; - filename?: string | null; - caption?: string | null; - contentType?: string | null; - height?: number | null; - width?: number | null; - url?: string | null; - }> | null; + taxIds?: Array | null; price?: { __typename?: 'IoRestorecommercePricePrice'; currencyId?: string | null; @@ -6015,19 +5999,11 @@ export type OrderFragmentFragment = { __typename?: 'IoRestorecommerceProductPhysicalVariant'; id?: string | null; name?: string | null; + description?: string | null; stockLevel?: number | null; + stockKeepingUnit?: string | null; parentVariantId?: string | null; - images?: Array<{ - __typename?: 'IoRestorecommerceImageImage'; - id?: string | null; - index?: number | null; - filename?: string | null; - caption?: string | null; - contentType?: string | null; - height?: number | null; - width?: number | null; - url?: string | null; - }> | null; + taxIds?: Array | null; price?: { __typename?: 'IoRestorecommercePricePrice'; currencyId?: string | null; @@ -6561,19 +6537,11 @@ export type ProductFragmentFragment = { __typename?: 'IoRestorecommerceProductPhysicalVariant'; id?: string | null; name?: string | null; + description?: string | null; stockLevel?: number | null; + stockKeepingUnit?: string | null; parentVariantId?: string | null; - images?: Array<{ - __typename?: 'IoRestorecommerceImageImage'; - id?: string | null; - index?: number | null; - filename?: string | null; - caption?: string | null; - contentType?: string | null; - height?: number | null; - width?: number | null; - url?: string | null; - }> | null; + taxIds?: Array | null; price?: { __typename?: 'IoRestorecommercePricePrice'; currencyId?: string | null; @@ -8294,19 +8262,11 @@ export type OrderingOrderMutateMutation = { __typename?: 'IoRestorecommerceProductPhysicalVariant'; id?: string | null; name?: string | null; + description?: string | null; stockLevel?: number | null; + stockKeepingUnit?: string | null; parentVariantId?: string | null; - images?: Array<{ - __typename?: 'IoRestorecommerceImageImage'; - id?: string | null; - index?: number | null; - filename?: string | null; - caption?: string | null; - contentType?: string | null; - height?: number | null; - width?: number | null; - url?: string | null; - }> | null; + taxIds?: Array | null; price?: { __typename?: 'IoRestorecommercePricePrice'; currencyId?: string | null; @@ -8840,19 +8800,11 @@ export type OrderingOrderReadQuery = { __typename?: 'IoRestorecommerceProductPhysicalVariant'; id?: string | null; name?: string | null; + description?: string | null; stockLevel?: number | null; + stockKeepingUnit?: string | null; parentVariantId?: string | null; - images?: Array<{ - __typename?: 'IoRestorecommerceImageImage'; - id?: string | null; - index?: number | null; - filename?: string | null; - caption?: string | null; - contentType?: string | null; - height?: number | null; - width?: number | null; - url?: string | null; - }> | null; + taxIds?: Array | null; price?: { __typename?: 'IoRestorecommercePricePrice'; currencyId?: string | null; @@ -9456,18 +9408,11 @@ export const ProductFragmentFragmentDoc = gql` variants { id name - images { - id - index - filename - caption - contentType - height - width - url - } + description stockLevel + stockKeepingUnit parentVariantId + taxIds price { currencyId regularPrice diff --git a/packages/core/state/src/lib/+state/product/product.facade.ts b/packages/core/state/src/lib/+state/product/product.facade.ts index c6eb8739..0ae68fbd 100644 --- a/packages/core/state/src/lib/+state/product/product.facade.ts +++ b/packages/core/state/src/lib/+state/product/product.facade.ts @@ -73,7 +73,7 @@ export class ProductFacade { update = (payload: IIoRestorecommerceProductProductList) => { const tempPayload = addTemporaryMetaForCatalogSrv(payload); - console.log("tempPayload", tempPayload); + console.log('tempPayload', tempPayload); this.store.dispatch( productActions.productUpdateRequest({ payload: tempPayload }) diff --git a/packages/modules/product/src/lib/components/product-variant-modal.component.ts b/packages/modules/product/src/lib/components/product-variant-modal.component.ts index e95a93df..e4e7e7ef 100644 --- a/packages/modules/product/src/lib/components/product-variant-modal.component.ts +++ b/packages/modules/product/src/lib/components/product-variant-modal.component.ts @@ -4,6 +4,7 @@ import { v4 as uuidv4 } from 'uuid'; import { ComponentLayerRef, JssFormComponent } from '@vcl/ng-vcl'; import { + IIoRestorecommerceProductPhysicalVariant, IoRestorecommerceProductPhysicalVariant, ModeType, } from '@console-core/graphql'; @@ -45,7 +46,9 @@ export class ProductVariantEditComponent { @ViewChild('variantModalForm') variantModalForm!: JssFormComponent; - schema = buildProductVariantSchema({}); + schema = buildProductVariantSchema({ + product: this.variant, + }); get title(): string { return this.layer.data.title; @@ -55,6 +58,10 @@ export class ProductVariantEditComponent { return this.layer.data.product; } + get variant(): IIoRestorecommerceProductPhysicalVariant { + return this.layer.data.variant; + } + close(value?: string) { this.layer.close({ value, diff --git a/packages/modules/product/src/lib/components/product-view.component.ts b/packages/modules/product/src/lib/components/product-view.component.ts index 16e718f6..08707e8d 100644 --- a/packages/modules/product/src/lib/components/product-view.component.ts +++ b/packages/modules/product/src/lib/components/product-view.component.ts @@ -93,12 +93,13 @@ export class ProductViewComponent implements OnInit, OnDestroy { .subscribe(); } - onEditVariant(_: IIoRestorecommerceProductPhysicalVariant) { + onEditVariant(variant: IIoRestorecommerceProductPhysicalVariant) { + console.log('variant:', variant); this.subscriptions.sink = this.addVariantLayer .open({ data: { title: `Edit product variant`, - // product, + variant, }, }) .subscribe(); diff --git a/packages/modules/product/src/lib/jss-forms/product-variant.jss-form.ts b/packages/modules/product/src/lib/jss-forms/product-variant.jss-form.ts index 8ccae2fc..ae3778f8 100644 --- a/packages/modules/product/src/lib/jss-forms/product-variant.jss-form.ts +++ b/packages/modules/product/src/lib/jss-forms/product-variant.jss-form.ts @@ -2,17 +2,16 @@ import { Validators } from '@angular/forms'; import { VCLFormFieldSchemaRoot } from '@vcl/ng-vcl'; -import { IProduct } from '@console-core/types'; +// import { IProduct } from '@console-core/types'; +import { IoRestorecommerceProductPhysicalVariant } from '@console-core/graphql'; interface ISchemaOptions { - product?: IProduct; + product?: IoRestorecommerceProductPhysicalVariant; } export const buildProductVariantSchema = ( options: ISchemaOptions ): VCLFormFieldSchemaRoot => { - console.log('options?.product?.product', options?.product?.product); - return { type: 'form', fields: [ @@ -63,7 +62,7 @@ export const buildProductVariantSchema = ( label: 'Name', type: 'input', validators: [Validators.required], - defaultValue: 'Blue Type', + defaultValue: options?.product?.name || '', params: {}, hints: [ { @@ -78,8 +77,7 @@ export const buildProductVariantSchema = ( label: 'Description', type: 'input', validators: [], - defaultValue: - 'A test decription about this type of particular variant!', + defaultValue: options?.product?.description || '', params: {}, }, { @@ -87,7 +85,7 @@ export const buildProductVariantSchema = ( label: 'Stock level', type: 'input', validators: [Validators.required], - defaultValue: 99, + defaultValue: options?.product?.stockLevel || '', params: { inputType: 'number', }, @@ -104,7 +102,7 @@ export const buildProductVariantSchema = ( label: 'Stock keeping unit', type: 'input', validators: [], - defaultValue: 'qwerty1012', + defaultValue: options?.product?.stockKeepingUnit || '', params: {}, hints: [ { @@ -118,7 +116,7 @@ export const buildProductVariantSchema = ( name: 'taxIds', label: 'Taxes', type: 'select', - defaultValue: ['germany-reduced-rate', 'germany-standard-rate'], + defaultValue: options?.product?.taxIds || [], validators: [Validators.required], params: { placeholder: 'Select taxes', @@ -178,7 +176,7 @@ export const buildProductVariantSchema = ( label: 'Currency', type: 'select', // disabled: true, - defaultValue: 'USD', + defaultValue: options?.product?.price?.currencyId || '', validators: [Validators.required], params: { placeholder: 'Select currency', @@ -209,7 +207,7 @@ export const buildProductVariantSchema = ( label: 'Regular price', type: 'input', validators: [Validators.required], - defaultValue: 10, + defaultValue: options?.product?.price?.regularPrice || '', params: { inputType: 'number', }, @@ -219,6 +217,11 @@ export const buildProductVariantSchema = ( error: 'required', message: 'This field is required.', }, + { + type: 'error', + error: 'min', + message: '', + }, ], }, { @@ -226,7 +229,7 @@ export const buildProductVariantSchema = ( label: 'Sale price', type: 'input', validators: [Validators.required], - defaultValue: 10, + defaultValue: options?.product?.price?.salePrice || '', params: { inputType: 'number', }, @@ -240,7 +243,7 @@ export const buildProductVariantSchema = ( }, { type: 'checkbox', - defaultValue: false, + defaultValue: options?.product?.price?.sale || false, name: 'sale', label: 'On sales', }, diff --git a/packages/modules/product/src/lib/jss-forms/product.jss-form.ts b/packages/modules/product/src/lib/jss-forms/product.jss-form.ts index 6e1a0f09..b68ff22f 100644 --- a/packages/modules/product/src/lib/jss-forms/product.jss-form.ts +++ b/packages/modules/product/src/lib/jss-forms/product.jss-form.ts @@ -265,41 +265,6 @@ export const buildProductSchema = ( }, ], }, - // { - // name: 'offerings', - // label: 'Offerings', - // type: 'select', - // // disabled: true, - // defaultValue: '', - // validators: [Validators.required], - // params: { - // placeholder: 'Select offering', - // selectionMode: 'single', - // clearable: false, - // search: false, - // options: [ - // { - // label: 'Physical', - // value: 'physical', - // }, - // { - // label: 'Virtual', - // value: 'virtual', - // }, - // { - // label: 'Service', - // value: 'service' - // } - // ], - // }, - // hints: [ - // { - // type: 'error', - // error: 'required', - // message: 'This field is required.', - // }, - // ], - // }, { type: 'buttons', buttons: [