fix(admin-ui): Fix variant price display issues

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

@@ -211,6 +211,7 @@
                         *ngIf="variantDisplayMode === 'table'"
                         [variants]="variants$ | async"
                         [optionGroups]="product.optionGroups"
+                        [channelPriceIncludesTax]="channelPriceIncludesTax$ | async"
                         [productVariantsFormArray]="detailForm.get('variants')"
                     ></vdr-product-variants-table>
                     <vdr-product-variants-list

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

@@ -115,6 +115,9 @@ 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.variants);
+            }
         }
         if ('channelPriceIncludesTax' in changes) {
             this.buildVariantListPrices(this.variants);

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

@@ -60,7 +60,8 @@
                         clrInput
                         [currencyCode]="variant.currencyCode"
                         [readonly]="!('UpdateCatalog' | hasPermission)"
-                        formControlName="price"
+                        [value]="variantListPrice[variant.id]"
+                        (valueChange)="updateVariantListPrice($event, variant.id, formGroup)"
                     ></vdr-currency-input>
                 </clr-input-container>
             </td>

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

@@ -3,11 +3,13 @@ import {
     ChangeDetectorRef,
     Component,
     Input,
+    OnChanges,
     OnDestroy,
     OnInit,
+    SimpleChanges,
 } from '@angular/core';
 import { FormArray, FormGroup } from '@angular/forms';
-import { ProductWithVariants } from '@vendure/admin-ui/core';
+import { flattenFacetValues, ProductWithVariants } from '@vendure/admin-ui/core';
 import { Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 
@@ -17,11 +19,13 @@ import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
     styleUrls: ['./product-variants-table.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProductVariantsTableComponent implements OnInit, OnDestroy {
+export class ProductVariantsTableComponent implements OnInit, OnChanges, OnDestroy {
     @Input('productVariantsFormArray') formArray: FormArray;
     @Input() variants: ProductWithVariants.Variants[];
+    @Input() channelPriceIncludesTax: boolean;
     @Input() optionGroups: ProductWithVariants.OptionGroups[];
     formGroupMap = new Map<string, FormGroup>();
+    variantListPrice: { [variantId: string]: number } = {};
     private subscription: Subscription;
 
     constructor(private changeDetector: ChangeDetectorRef) {}
@@ -40,6 +44,17 @@ export class ProductVariantsTableComponent implements OnInit, OnDestroy {
         this.buildFormGroupMap();
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        if ('variants' in changes) {
+            if (this.channelPriceIncludesTax != null && Object.keys(this.variantListPrice).length === 0) {
+                this.buildVariantListPrices(this.variants);
+            }
+        }
+        if ('channelPriceIncludesTax' in changes) {
+            this.buildVariantListPrices(this.variants);
+        }
+    }
+
     ngOnDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
@@ -51,6 +66,21 @@ export class ProductVariantsTableComponent implements OnInit, OnDestroy {
         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) {
@@ -58,4 +88,12 @@ export class ProductVariantsTableComponent implements OnInit, OnDestroy {
         }
         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 };
+            }, {});
+        }
+    }
 }