fix(admin-ui): Fix buggy price input in ProductVariant list & table

Fixes #770

packages/admin-ui/src/lib/catalog/src/components/product-variants-list/product-variants-list.component.html

@@ -77,11 +77,18 @@
                                     <clr-input-container>
                                         <label>{{ 'catalog.price' | translate }}</label>
                                         <vdr-currency-input
+                                            *ngIf="!channelPriceIncludesTax"
                                             clrInput
                                             [currencyCode]="variant.currencyCode"
                                             [readonly]="!('UpdateCatalog' | hasPermission)"
-                                            [value]="variantListPrice[variant.id]"
-                                            (valueChange)="updateVariantListPrice($event, variant.id, formGroup)"
+                                            formControlName="price"
+                                        ></vdr-currency-input>
+                                        <vdr-currency-input
+                                            *ngIf="channelPriceIncludesTax"
+                                            clrInput
+                                            [currencyCode]="variant.currencyCode"
+                                            [readonly]="!('UpdateCatalog' | hasPermission)"
+                                            formControlName="priceWithTax"
                                         ></vdr-currency-input>
                                     </clr-input-container>
                                 </div>

packages/admin-ui/src/lib/catalog/src/components/product-variants-list/product-variants-list.component.ts

@@ -75,7 +75,6 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
     GlobalFlag = GlobalFlag;
     globalTrackInventory: boolean;
     globalOutOfStockThreshold: number;
-    variantListPrice: { [variantId: string]: number } = {};
     private facetValues: FacetValue.Fragment[];
     private subscription: Subscription;
 
@@ -116,12 +115,6 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
             if (changes['variants'].currentValue?.length !== changes['variants'].previousValue?.length) {
                 this.pagination.currentPage = 1;
             }
-            if (this.channelPriceIncludesTax != null && Object.keys(this.variantListPrice).length === 0) {
-                this.buildVariantListPrices(this.formArray.value);
-            }
-        }
-        if ('channelPriceIncludesTax' in changes) {
-            this.buildVariantListPrices(this.formArray.value);
         }
     }
 
@@ -147,21 +140,6 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
         );
     }
 
-    updateVariantListPrice(price, variantId: string, group: FormGroup) {
-        // Why do this and not just use a conditional `formControlName` or `formControl`
-        // binding in the template? It breaks down when switching between Channels and
-        // the values no longer get updated. There seem to some lifecycle/memory-clean-up
-        // issues with Angular forms at the moment, which will hopefully be fixed soon.
-        // See https://github.com/angular/angular/issues/20007
-        this.variantListPrice[variantId] = price;
-        const controlName = this.channelPriceIncludesTax ? 'priceWithTax' : 'price';
-        const control = group.get(controlName);
-        if (control) {
-            control.setValue(price);
-            control.markAsDirty();
-        }
-    }
-
     getTaxCategoryName(group: FormGroup): string {
         const control = group.get(['taxCategoryId']);
         if (control && this.taxCategories) {
@@ -283,14 +261,6 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
             });
     }
 
-    private buildVariantListPrices(variants?: ProductWithVariants.Variants[]) {
-        if (variants) {
-            this.variantListPrice = variants.reduce((prices, v) => {
-                return { ...prices, [v.id]: this.channelPriceIncludesTax ? v.priceWithTax : v.price };
-            }, {});
-        }
-    }
-
     private buildFormGroupMap() {
         this.formGroupMap.clear();
         for (const controlGroup of this.formArray.controls) {

packages/admin-ui/src/lib/catalog/src/components/product-variants-table/product-variants-table.component.html

@@ -59,11 +59,18 @@
             <td class="left align-middle price" [class.disabled]="!formGroup.get('enabled')!.value">
                 <clr-input-container>
                     <vdr-currency-input
+                        *ngIf="!channelPriceIncludesTax"
                         clrInput
                         [currencyCode]="variant.currencyCode"
                         [readonly]="!('UpdateCatalog' | hasPermission)"
-                        [value]="variantListPrice[variant.id]"
-                        (valueChange)="updateVariantListPrice($event, variant.id, formGroup)"
+                        formControlName="price"
+                    ></vdr-currency-input>
+                    <vdr-currency-input
+                        *ngIf="channelPriceIncludesTax"
+                        clrInput
+                        [currencyCode]="variant.currencyCode"
+                        [readonly]="!('UpdateCatalog' | hasPermission)"
+                        formControlName="priceWithTax"
                     ></vdr-currency-input>
                 </clr-input-container>
             </td>

packages/admin-ui/src/lib/catalog/src/components/product-variants-table/product-variants-table.component.ts

@@ -3,13 +3,11 @@ import {
     ChangeDetectorRef,
     Component,
     Input,
-    OnChanges,
     OnDestroy,
     OnInit,
-    SimpleChanges,
 } from '@angular/core';
 import { FormArray, FormGroup } from '@angular/forms';
-import { flattenFacetValues, ProductWithVariants } from '@vendure/admin-ui/core';
+import { ProductWithVariants } from '@vendure/admin-ui/core';
 import { Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 
@@ -21,14 +19,13 @@ import { SelectedAssets } from '../product-detail/product-detail.component';
     styleUrls: ['./product-variants-table.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProductVariantsTableComponent implements OnInit, OnChanges, OnDestroy {
+export class ProductVariantsTableComponent implements OnInit, OnDestroy {
     @Input('productVariantsFormArray') formArray: FormArray;
     @Input() variants: ProductWithVariants.Variants[];
     @Input() channelPriceIncludesTax: boolean;
     @Input() optionGroups: ProductWithVariants.OptionGroups[];
     @Input() pendingAssetChanges: { [variantId: string]: SelectedAssets };
     formGroupMap = new Map<string, FormGroup>();
-    variantListPrice: { [variantId: string]: number } = {};
     private subscription: Subscription;
 
     constructor(private changeDetector: ChangeDetectorRef) {}
@@ -47,17 +44,6 @@ export class ProductVariantsTableComponent implements OnInit, OnChanges, OnDestr
         this.buildFormGroupMap();
     }
 
-    ngOnChanges(changes: SimpleChanges) {
-        if ('variants' in changes) {
-            if (this.channelPriceIncludesTax != null && Object.keys(this.variantListPrice).length === 0) {
-                this.buildVariantListPrices(this.formArray.value);
-            }
-        }
-        if ('channelPriceIncludesTax' in changes) {
-            this.buildVariantListPrices(this.formArray.value);
-        }
-    }
-
     ngOnDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
@@ -73,21 +59,6 @@ export class ProductVariantsTableComponent implements OnInit, OnChanges, OnDestr
         return group && group.name;
     }
 
-    updateVariantListPrice(price, variantId: string, group: FormGroup) {
-        // Why do this and not just use a conditional `formControlName` or `formControl`
-        // binding in the template? It breaks down when switching between Channels and
-        // the values no longer get updated. There seem to some lifecycle/memory-clean-up
-        // issues with Angular forms at the moment, which will hopefully be fixed soon.
-        // See https://github.com/angular/angular/issues/20007
-        this.variantListPrice[variantId] = price;
-        const controlName = this.channelPriceIncludesTax ? 'priceWithTax' : 'price';
-        const control = group.get(controlName);
-        if (control) {
-            control.setValue(price);
-            control.markAsDirty();
-        }
-    }
-
     private buildFormGroupMap() {
         this.formGroupMap.clear();
         for (const controlGroup of this.formArray.controls) {
@@ -95,12 +66,4 @@ export class ProductVariantsTableComponent implements OnInit, OnChanges, OnDestr
         }
         this.changeDetector.markForCheck();
     }
-
-    private buildVariantListPrices(variants?: ProductWithVariants.Variants[]) {
-        if (variants) {
-            this.variantListPrice = variants.reduce((prices, v) => {
-                return { ...prices, [v.id]: this.channelPriceIncludesTax ? v.priceWithTax : v.price };
-            }, {});
-        }
-    }
 }