feat: Add FacetValues to Product entity

Relates to #46

admin-ui/src/app/catalog/components/apply-facet-dialog/apply-facet-dialog.component.html

@@ -1,4 +1,4 @@
-<ng-template vdrDialogTitle>{{ 'catalog.apply-facets' | translate }}</ng-template>
+<ng-template vdrDialogTitle>{{ 'catalog.add-facets' | translate }}</ng-template>
 
 <vdr-facet-value-selector
     [facets]="facets"
@@ -13,6 +13,6 @@
         [disabled]="selectedValues.length === 0"
         class="btn btn-primary"
     >
-        {{ 'catalog.apply-facets' | translate }}
+        {{ 'catalog.add-facets' | translate }}
     </button>
 </ng-template>

admin-ui/src/app/catalog/components/product-detail/product-detail.component.html

@@ -68,6 +68,18 @@
                                     ></vdr-custom-field-control>
                                 </ng-container>
                             </section>
+
+                            <div class="facets">
+                                <vdr-facet-value-chip
+                                    *ngFor="let facetValue of (facetValues$ | async)"
+                                    [facetValue]="facetValue"
+                                    (remove)="removeProductFacetValue(facetValue.id)"
+                                ></vdr-facet-value-chip>
+                                <button class="btn btn-sm btn-secondary" (click)="selectProductFacetValue()">
+                                    <clr-icon shape="plus"></clr-icon>
+                                    {{ 'catalog.add-facets' | translate }}
+                                </button>
+                            </div>
                         </section>
                     </div>
                     <div class="clr-col-md-auto">
@@ -99,14 +111,14 @@
                             [taxCategories]="taxCategories$ | async"
                             (assetChange)="variantAssetChange($event)"
                             (selectionChange)="selectedVariantIds = $event"
-                            #productVariantsList
                         >
                             <button
                                 class="btn btn-sm btn-secondary"
                                 [disabled]="selectedVariantIds.length === 0"
-                                (click)="selectFacetValue(productVariantsList.selectedVariantIds)"
+                                (click)="selectVariantFacetValue(selectedVariantIds)"
                             >
-                                {{ 'catalog.apply-facets' | translate }}
+                                <clr-icon shape="plus"></clr-icon>
+                                {{ 'catalog.add-facets' | translate }}
                             </button>
                         </vdr-product-variants-list>
                     </ng-template>

admin-ui/src/app/catalog/components/product-detail/product-detail.component.ts

@@ -2,7 +2,7 @@ import { Location } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject, combineLatest, forkJoin, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest, forkJoin, merge, Observable } from 'rxjs';
 import { map, mergeMap, skip, take, withLatestFrom } from 'rxjs/operators';
 import {
     CreateProductInput,
@@ -16,9 +16,11 @@ import {
 import { normalizeString } from 'shared/normalize-string';
 import { CustomFieldConfig } from 'shared/shared-types';
 import { notNullOrUndefined } from 'shared/shared-utils';
+import { unique } from 'shared/unique';
 
 import { BaseDetailComponent } from '../../../common/base-detail.component';
 import { createUpdatedTranslatable } from '../../../common/utilities/create-updated-translatable';
+import { flattenFacetValues } from '../../../common/utilities/flatten-facet-values';
 import { _ } from '../../../core/providers/i18n/mark-for-extraction';
 import { NotificationService } from '../../../core/providers/notification/notification.service';
 import { DataService } from '../../../data/providers/data.service';
@@ -60,6 +62,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
     productForm: FormGroup;
     assetChanges: SelectedAssets = {};
     variantAssetChanges: { [variantId: string]: SelectedAssets } = {};
+    facetValues$: Observable<ProductWithVariants.FacetValues[]>;
     facets$ = new BehaviorSubject<FacetWithValues.Fragment[]>([]);
     selectedVariantIds: string[] = [];
 
@@ -82,6 +85,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
                 name: ['', Validators.required],
                 slug: '',
                 description: '',
+                facetValueIds: [[]],
                 customFields: this.formBuilder.group(
                     this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
                 ),
@@ -98,6 +102,25 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
             .getTaxCategories()
             .mapSingle(data => data.taxCategories);
         this.activeTab$ = this.route.queryParamMap.pipe(map(qpm => qpm.get('tab') as any));
+
+        // FacetValues are provided initially by the nested array of the
+        // Product entity, but once a fetch to get all Facets is made (as when
+        // opening the FacetValue selector modal), then these additional values
+        // are concatenated onto the initial array.
+        const productFacetValues$ = this.product$.pipe(map(product => product.facetValues));
+        const allFacetValues$ = this.facets$.pipe(map(flattenFacetValues));
+
+        const productGroup = this.getProductFormGroup();
+        const formChangeFacetValues$ = combineLatest(
+            productGroup.valueChanges.pipe(map(val => val.facetValueIds as string[])),
+            allFacetValues$,
+        ).pipe(
+            map(([facetValueIds, facetValues]) =>
+                facetValueIds.map(id => facetValues.find(fv => fv.id === id)).filter(notNullOrUndefined),
+            ),
+        );
+
+        this.facetValues$ = merge(productFacetValues$, formChangeFacetValues$);
     }
 
     ngOnDestroy() {
@@ -142,41 +165,43 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
         });
     }
 
+    selectProductFacetValue() {
+        this.displayFacetValueModal().subscribe(facetValueIds => {
+            if (facetValueIds) {
+                const productGroup = this.getProductFormGroup();
+                const currentFacetValueIds = productGroup.value.facetValueIds;
+                productGroup.patchValue({
+                    facetValueIds: unique([...currentFacetValueIds, ...facetValueIds]),
+                });
+                productGroup.markAsDirty();
+            }
+        });
+    }
+
+    removeProductFacetValue(facetValueId: string) {
+        const productGroup = this.getProductFormGroup();
+        const currentFacetValueIds = productGroup.value.facetValueIds;
+        productGroup.patchValue({
+            facetValueIds: currentFacetValueIds.filter(id => id !== facetValueId),
+        });
+    }
+
     /**
      * Opens a dialog to select FacetValues to apply to the select ProductVariants.
      */
-    selectFacetValue(selectedVariantIds: string[]) {
-        this.dataService.facet
-            .getFacets(9999999, 0)
-            .mapSingle(data => data.facets.items)
-            .subscribe(items => this.facets$.next(items));
-
-        this.facets$
-            .pipe(
-                skip(1),
-                take(1),
-                mergeMap(facets =>
-                    this.modalService.fromComponent(ApplyFacetDialogComponent, {
-                        size: 'md',
-                        locals: { facets },
-                    }),
-                ),
-                map(facetValues => facetValues && facetValues.map(v => v.id)),
-                withLatestFrom(this.variants$),
-            )
+    selectVariantFacetValue(selectedVariantIds: string[]) {
+        this.displayFacetValueModal()
+            .pipe(withLatestFrom(this.variants$))
             .subscribe(([facetValueIds, variants]) => {
                 if (facetValueIds) {
                     for (const variantId of selectedVariantIds) {
                         const index = variants.findIndex(v => v.id === variantId);
                         const variant = variants[index];
                         const existingFacetValueIds = variant ? variant.facetValues.map(fv => fv.id) : [];
-                        const uniqueFacetValueIds = Array.from(
-                            new Set([...existingFacetValueIds, ...facetValueIds]),
-                        );
                         const variantFormGroup = this.productForm.get(['variants', index]);
                         if (variantFormGroup) {
                             variantFormGroup.patchValue({
-                                facetValueIds: uniqueFacetValueIds,
+                                facetValueIds: unique([...existingFacetValueIds, ...facetValueIds]),
                             });
                             variantFormGroup.markAsDirty();
                         }
@@ -186,9 +211,32 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
             });
     }
 
+    private displayFacetValueModal(): Observable<string[] | undefined> {
+        let skipValue = 0;
+        if (this.facets$.value.length === 0) {
+            this.dataService.facet
+                .getFacets(9999999, 0)
+                .mapSingle(data => data.facets.items)
+                .subscribe(items => this.facets$.next(items));
+            skipValue = 1;
+        }
+
+        return this.facets$.pipe(
+            skip(skipValue),
+            take(1),
+            mergeMap(facets =>
+                this.modalService.fromComponent(ApplyFacetDialogComponent, {
+                    size: 'md',
+                    locals: { facets },
+                }),
+            ),
+            map(facetValues => facetValues && facetValues.map(v => v.id)),
+        );
+    }
+
     create() {
-        const productGroup = this.productForm.get('product');
-        if (!productGroup || !productGroup.dirty) {
+        const productGroup = this.getProductFormGroup();
+        if (!productGroup.dirty) {
             return;
         }
         combineLatest(this.product$, this.languageCode$)
@@ -226,10 +274,10 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
             .pipe(
                 take(1),
                 mergeMap(([product, languageCode]) => {
-                    const productGroup = this.productForm.get('product');
+                    const productGroup = this.getProductFormGroup();
                     const updateOperations: Array<Observable<any>> = [];
 
-                    if ((productGroup && productGroup.dirty) || this.assetsChanged()) {
+                    if (productGroup.dirty || this.assetsChanged()) {
                         const newProduct = this.getUpdatedProduct(
                             product,
                             productGroup as FormGroup,
@@ -280,6 +328,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
                     name: currentTranslation.name,
                     slug: currentTranslation.slug,
                     description: currentTranslation.description,
+                    facetValueIds: product.facetValues.map(fv => fv.id),
                 },
             });
 
@@ -350,7 +399,11 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
                 description: product.description || '',
             },
         });
-        return { ...updatedProduct, ...this.assetChanges } as UpdateProductInput | CreateProductInput;
+        return {
+            ...updatedProduct,
+            ...this.assetChanges,
+            facetValueIds: productFormGroup.value.facetValueIds,
+        } as UpdateProductInput | CreateProductInput;
     }
 
     /**
@@ -391,4 +444,8 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
             })
             .filter(notNullOrUndefined);
     }
+
+    private getProductFormGroup(): FormGroup {
+        return this.productForm.get('product') as FormGroup;
+    }
 }

admin-ui/src/app/catalog/providers/routing/product-resolver.ts

@@ -20,6 +20,7 @@ export class ProductResolver extends BaseEntityResolver<ProductWithVariants.Frag
                 description: '',
                 translations: [],
                 optionGroups: [],
+                facetValues: [],
                 variants: [],
             },
             id => this.dataService.product.getProduct(id).mapStream(data => data.product),

admin-ui/src/app/data/definitions/product-definitions.ts

@@ -88,6 +88,15 @@ export const PRODUCT_WITH_VARIANTS_FRAGMENT = gql`
         variants {
             ...ProductVariant
         }
+        facetValues {
+            id
+            code
+            name
+            facet {
+                id
+                name
+            }
+        }
     }
     ${PRODUCT_VARIANT_FRAGMENT}
     ${ASSET_FRAGMENT}

admin-ui/src/app/data/providers/product-data.service.ts

@@ -76,7 +76,13 @@ export class ProductDataService {
 
     createProduct(product: CreateProductInput) {
         const input: CreateProduct.Variables = {
-            input: pick(product, ['translations', 'customFields', 'assetIds', 'featuredAssetId']),
+            input: pick(product, [
+                'translations',
+                'customFields',
+                'assetIds',
+                'featuredAssetId',
+                'facetValueIds',
+            ]),
         };
         return this.baseDataService.mutate<CreateProduct.Mutation, CreateProduct.Variables>(
             CREATE_PRODUCT,
@@ -86,7 +92,14 @@ export class ProductDataService {
 
     updateProduct(product: UpdateProductInput) {
         const input: UpdateProduct.Variables = {
-            input: pick(product, ['id', 'translations', 'customFields', 'assetIds', 'featuredAssetId']),
+            input: pick(product, [
+                'id',
+                'translations',
+                'customFields',
+                'assetIds',
+                'featuredAssetId',
+                'facetValueIds',
+            ]),
         };
         return this.baseDataService.mutate<UpdateProduct.Mutation, UpdateProduct.Variables>(
             UPDATE_PRODUCT,

admin-ui/src/i18n-messages/en.json

@@ -25,7 +25,7 @@
     "add-asset-to-product": "Add {count, plural, 0 {assets} one {1 asset} other {{count} assets}} to product",
     "add-facet": "Add facet",
     "add-facet-value": "Add facet value",
-    "apply-facets": "Apply facets",
+    "add-facets": "Add facets",
     "assets-selected-count": "{ count } assets selected",
     "confirm-generate-product-variants": "Click 'Finish' to generate {count} product variants.",
     "create-group": "Create option group",

server/e2e/__snapshots__/product.e2e-spec.ts.snap

@@ -4,6 +4,7 @@ exports[`Product resolver product mutation createProduct creates a new Product 1
 Object {
   "assets": Array [],
   "description": "A baked potato",
+  "facetValues": Array [],
   "featuredAsset": null,
   "id": "T_21",
   "languageCode": "en",
@@ -32,6 +33,7 @@ exports[`Product resolver product mutation updateProduct updates a Product 1`] =
 Object {
   "assets": Array [],
   "description": "A blob of mashed potato",
+  "facetValues": Array [],
   "featuredAsset": null,
   "id": "T_21",
   "languageCode": "en",
@@ -79,6 +81,7 @@ Object {
     },
   ],
   "description": "en Accusantium sed libero repudiandae.",
+  "facetValues": Array [],
   "featuredAsset": Object {
     "fileSize": 4,
     "id": "T_5",

server/e2e/product.e2e-spec.ts

@@ -311,6 +311,19 @@ describe('Product resolver', () => {
             expect(result.updateProduct.featuredAsset!.id).toBe(assets[0].id);
         });
 
+        it('updateProduct updates FacetValues', async () => {
+            const result = await client.query<UpdateProduct.Mutation, UpdateProduct.Variables>(
+                UPDATE_PRODUCT,
+                {
+                    input: {
+                        id: newProduct.id,
+                        facetValueIds: ['T_1'],
+                    },
+                },
+            );
+            expect(result.updateProduct.facetValues.length).toEqual(1);
+        });
+
         it('updateProduct errors with an invalid productId', async () => {
             try {
                 await client.query<UpdateProduct.Mutation, UpdateProduct.Variables>(UPDATE_PRODUCT, {

server/src/api/resolvers/product.resolver.ts

@@ -65,7 +65,7 @@ export class ProductResolver {
 
     @Mutation()
     @Allow(Permission.CreateCatalog)
-    @Decode('assetIds', 'featuredAssetId')
+    @Decode('assetIds', 'featuredAssetId', 'facetValueIds')
     async createProduct(
         @Ctx() ctx: RequestContext,
         @Args() args: CreateProductMutationArgs,
@@ -76,7 +76,7 @@ export class ProductResolver {
 
     @Mutation()
     @Allow(Permission.UpdateCatalog)
-    @Decode('assetIds', 'featuredAssetId')
+    @Decode('assetIds', 'featuredAssetId', 'facetValueIds')
     async updateProduct(
         @Ctx() ctx: RequestContext,
         @Args() args: UpdateProductMutationArgs,

server/src/entity/product/product.entity.ts

@@ -7,6 +7,7 @@ import { Asset } from '../asset/asset.entity';
 import { VendureEntity } from '../base/base.entity';
 import { Channel } from '../channel/channel.entity';
 import { CustomProductFields } from '../custom-entity-fields';
+import { FacetValue } from '../facet-value/facet-value.entity';
 import { ProductOptionGroup } from '../product-option-group/product-option-group.entity';
 import { ProductVariant } from '../product-variant/product-variant.entity';
 
@@ -40,6 +41,10 @@ export class Product extends VendureEntity implements Translatable, HasCustomFie
     @JoinTable()
     optionGroups: ProductOptionGroup[];
 
+    @ManyToMany(type => FacetValue)
+    @JoinTable()
+    facetValues: FacetValue[];
+
     @Column(type => CustomProductFields)
     customFields: CustomProductFields;
 

server/src/entity/product/product.graphql

@@ -10,6 +10,7 @@ type Product implements Node {
     assets: [Asset!]!
     variants: [ProductVariant!]!
     optionGroups: [ProductOptionGroup!]!
+    facetValues: [FacetValue!]!
     translations: [ProductTranslation!]!
 }
 
@@ -34,6 +35,7 @@ input ProductTranslationInput {
 input CreateProductInput {
     featuredAssetId: ID
     assetIds: [ID!]
+    facetValueIds: [ID!]
     translations: [ProductTranslationInput!]!
 }
 
@@ -41,5 +43,6 @@ input UpdateProductInput {
     id: ID!
     featuredAssetId: ID
     assetIds: [ID!]
+    facetValueIds: [ID!]
     translations: [ProductTranslationInput!]
 }

server/src/service/services/product.service.ts

@@ -18,6 +18,7 @@ import { TranslatableSaver } from '../helpers/translatable-saver/translatable-sa
 import { translateDeep } from '../helpers/utils/translate-entity';
 
 import { ChannelService } from './channel.service';
+import { FacetValueService } from './facet-value.service';
 import { ProductVariantService } from './product-variant.service';
 import { TaxRateService } from './tax-rate.service';
 
@@ -28,6 +29,7 @@ export class ProductService {
         private channelService: ChannelService,
         private assetUpdater: AssetUpdater,
         private productVariantService: ProductVariantService,
+        private facetValueService: FacetValueService,
         private taxRateService: TaxRateService,
         private listQueryBuilder: ListQueryBuilder,
         private translatableSaver: TranslatableSaver,
@@ -37,14 +39,25 @@ export class ProductService {
         ctx: RequestContext,
         options?: ListQueryOptions<Product>,
     ): Promise<PaginatedList<Translated<Product>>> {
-        const relations = ['featuredAsset', 'assets', 'optionGroups', 'channels'];
+        const relations = [
+            'featuredAsset',
+            'assets',
+            'optionGroups',
+            'channels',
+            'facetValues',
+            'facetValues.facet',
+        ];
 
         return this.listQueryBuilder
             .build(Product, options, { relations, channelId: ctx.channelId })
             .getManyAndCount()
             .then(async ([products, totalItems]) => {
                 const items = products.map(product =>
-                    translateDeep(product, ctx.languageCode, ['optionGroups']),
+                    translateDeep(product, ctx.languageCode, [
+                        'optionGroups',
+                        'facetValues',
+                        ['facetValues', 'facet'],
+                    ]),
                 );
                 return {
                     items,
@@ -54,12 +67,16 @@ export class ProductService {
     }
 
     async findOne(ctx: RequestContext, productId: ID): Promise<Translated<Product> | undefined> {
-        const relations = ['featuredAsset', 'assets', 'optionGroups'];
+        const relations = ['featuredAsset', 'assets', 'optionGroups', 'facetValues', 'facetValues.facet'];
         const product = await this.connection.manager.findOne(Product, productId, { relations });
         if (!product) {
             return;
         }
-        return translateDeep(product, ctx.languageCode, ['optionGroups']);
+        return translateDeep(product, ctx.languageCode, [
+            'optionGroups',
+            'facetValues',
+            ['facetValues', 'facet'],
+        ]);
     }
 
     async create(ctx: RequestContext, input: CreateProductInput): Promise<Translated<Product>> {
@@ -69,6 +86,9 @@ export class ProductService {
             translationType: ProductTranslation,
             beforeSave: async p => {
                 this.channelService.assignToChannels(p, ctx);
+                if (input.facetValueIds) {
+                    p.facetValues = await this.facetValueService.findByIds(input.facetValueIds);
+                }
                 await this.assetUpdater.updateEntityAssets(p, input);
             },
         });
@@ -81,6 +101,9 @@ export class ProductService {
             entityType: Product,
             translationType: ProductTranslation,
             beforeSave: async p => {
+                if (input.facetValueIds) {
+                    p.facetValues = await this.facetValueService.findByIds(input.facetValueIds);
+                }
                 await this.assetUpdater.updateEntityAssets(p, input);
             },
         });

shared/generated-types.ts

@@ -544,6 +544,7 @@ export interface Product extends Node {
     assets: Asset[];
     variants: ProductVariant[];
     optionGroups: ProductOptionGroup[];
+    facetValues: FacetValue[];
     translations: ProductTranslation[];
     customFields?: Json | null;
 }
@@ -1253,6 +1254,7 @@ export interface UpdateProductOptionGroupInput {
 export interface CreateProductInput {
     featuredAssetId?: string | null;
     assetIds?: string[] | null;
+    facetValueIds?: string[] | null;
     translations: ProductTranslationInput[];
     customFields?: Json | null;
 }
@@ -1270,6 +1272,7 @@ export interface UpdateProductInput {
     id: string;
     featuredAssetId?: string | null;
     assetIds?: string[] | null;
+    facetValueIds?: string[] | null;
     translations?: ProductTranslationInput[] | null;
     customFields?: Json | null;
 }
@@ -3692,6 +3695,7 @@ export namespace ProductResolvers {
         assets?: AssetsResolver<Asset[], any, Context>;
         variants?: VariantsResolver<ProductVariant[], any, Context>;
         optionGroups?: OptionGroupsResolver<ProductOptionGroup[], any, Context>;
+        facetValues?: FacetValuesResolver<FacetValue[], any, Context>;
         translations?: TranslationsResolver<ProductTranslation[], any, Context>;
         customFields?: CustomFieldsResolver<Json | null, any, Context>;
     }
@@ -3723,6 +3727,11 @@ export namespace ProductResolvers {
         Parent,
         Context
     >;
+    export type FacetValuesResolver<R = FacetValue[], Parent = any, Context = any> = Resolver<
+        R,
+        Parent,
+        Context
+    >;
     export type TranslationsResolver<R = ProductTranslation[], Parent = any, Context = any> = Resolver<
         R,
         Parent,
@@ -6334,6 +6343,7 @@ export namespace ProductWithVariants {
         translations: Translations[];
         optionGroups: OptionGroups[];
         variants: Variants[];
+        facetValues: FacetValues[];
     };
 
     export type FeaturedAsset = Asset.Fragment;
@@ -6357,6 +6367,20 @@ export namespace ProductWithVariants {
     };
 
     export type Variants = ProductVariant.Fragment;
+
+    export type FacetValues = {
+        __typename?: 'FacetValue';
+        id: string;
+        code: string;
+        name: string;
+        facet: Facet;
+    };
+
+    export type Facet = {
+        __typename?: 'Facet';
+        id: string;
+        name: string;
+    };
 }
 
 export namespace ProductOptionGroup {