fix(admin-ui): Preserve asset changes between product list/table view

Relates to #632
vendure-ecommerce · Jan 15, 2021 · c83e511 · c83e511
1 parent 90a1176
commit c83e511
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git a/...ages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.html b/...ages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.html
@@ -228,6 +228,7 @@ <h4>{{ 'catalog.product-variants' | translate }}</h4>
                         [optionGroups]="product.optionGroups"
                         [channelPriceIncludesTax]="channelPriceIncludesTax$ | async"
                         [productVariantsFormArray]="detailForm.get('variants')"
+                        [pendingAssetChanges]="variantAssetChanges"
                     ></vdr-product-variants-table>
                     <vdr-product-variants-list
                         *ngIf="variantDisplayMode === 'card'"
@@ -240,6 +241,7 @@ <h4>{{ 'catalog.product-variants' | translate }}</h4>
                         [customFields]="customVariantFields"
                         [customOptionFields]="customOptionFields"
                         [activeLanguage]="languageCode$ | async"
+                        [pendingAssetChanges]="variantAssetChanges"
                         (assignToChannel)="assignVariantToChannel($event)"
                         (removeFromChannel)="removeVariantFromChannel($event)"
                         (assetChange)="variantAssetChange($event)"

diff --git a/...src/lib/catalog/src/components/product-variants-list/product-variants-list.component.html b/...src/lib/catalog/src/components/product-variants-list/product-variants-list.component.html
@@ -42,8 +42,8 @@
                     <div class="assets">
                         <vdr-product-assets
                             [compact]="true"
-                            [assets]="variant.assets"
-                            [featuredAsset]="variant.featuredAsset"
+                            [assets]="pendingAssetChanges[variant.id]?.assets || variant.assets"
+                            [featuredAsset]="pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset"
                             (change)="onAssetChange(variant.id, $event)"
                         ></vdr-product-assets>
                     </div>

diff --git a/...i/src/lib/catalog/src/components/product-variants-list/product-variants-list.component.ts b/...i/src/lib/catalog/src/components/product-variants-list/product-variants-list.component.ts
@@ -56,6 +56,7 @@ export class ProductVariantsListComponent implements OnChanges, OnInit, OnDestro
     @Input() customFields: CustomFieldConfig[];
     @Input() customOptionFields: CustomFieldConfig[];
     @Input() activeLanguage: LanguageCode;
+    @Input() pendingAssetChanges: { [variantId: string]: SelectedAssets };
     @Output() assignToChannel = new EventEmitter<ProductWithVariants.Variants>();
     @Output() removeFromChannel = new EventEmitter<{
         channelId: string;

diff --git a/...c/lib/catalog/src/components/product-variants-table/product-variants-table.component.html b/...c/lib/catalog/src/components/product-variants-table/product-variants-table.component.html
@@ -14,12 +14,14 @@
                 <div class="card-img">
                     <div class="featured-asset">
                         <img
-                            *ngIf="variant.featuredAsset"
-                            [src]="variant.featuredAsset | assetPreview:'tiny'"
+                            *ngIf="getFeaturedAsset(variant) as featuredAsset; else placeholder"
+                            [src]="featuredAsset | assetPreview: 'tiny'"
                         />
-                        <div class="placeholder" *ngIf="!variant.featuredAsset">
-                            <clr-icon shape="image" size="48"></clr-icon>
-                        </div>
+                        <ng-template #placeholder>
+                            <div class="placeholder">
+                                <clr-icon shape="image" size="48"></clr-icon>
+                            </div>
+                        </ng-template>
                     </div>
                 </div>
             </td>

diff --git a/...src/lib/catalog/src/components/product-variants-table/product-variants-table.component.ts b/...src/lib/catalog/src/components/product-variants-table/product-variants-table.component.ts
@@ -13,6 +13,8 @@ import { flattenFacetValues, ProductWithVariants } from '@vendure/admin-ui/core'
 import { Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 
+import { SelectedAssets } from '../product-detail/product-detail.component';
+
 @Component({
     selector: 'vdr-product-variants-table',
     templateUrl: './product-variants-table.component.html',
@@ -24,6 +26,7 @@ export class ProductVariantsTableComponent implements OnInit, OnChanges, OnDestr
     @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;
@@ -61,6 +64,10 @@ export class ProductVariantsTableComponent implements OnInit, OnChanges, OnDestr
         }
     }
 
+    getFeaturedAsset(variant: ProductWithVariants.Variants) {
+        return this.pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset;
+    }
+
     optionGroupName(optionGroupId: string): string | undefined {
         const group = this.optionGroups.find(g => g.id === optionGroupId);
         return group && group.name;