From 90a1176e900194d33cf97cebd9973605a4ad8f8d Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Fri, 15 Jan 2021 10:51:17 +0100 Subject: [PATCH] refactor(admin-ui): Change the output of ProductAssetComponent Output the entire Asset object rather than just the ID --- .../collection-detail.component.ts | 8 +++++--- .../product-assets/product-assets.component.ts | 14 +++++++++----- .../product-detail/product-detail.component.ts | 14 ++++++++------ 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/packages/admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts b/packages/admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts index 16e797bb8c..1d4aa255a7 100644 --- a/packages/admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts +++ b/packages/admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts @@ -10,6 +10,7 @@ import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { + Asset, BaseDetailComponent, Collection, ConfigurableOperation, @@ -46,7 +47,7 @@ export class CollectionDetailComponent implements OnInit, OnDestroy { customFields: CustomFieldConfig[]; detailForm: FormGroup; - assetChanges: { assetIds?: string[]; featuredAssetId?: string } = {}; + assetChanges: { assets?: Asset[]; featuredAsset?: Asset } = {}; filters: ConfigurableOperation[] = []; allFilters: ConfigurableOperationDefinition[] = []; @ViewChild('collectionContents') contentsComponent: CollectionContentsComponent; @@ -217,7 +218,7 @@ export class CollectionDetailComponent } canDeactivate(): boolean { - return super.canDeactivate() && !this.assetChanges.assetIds && !this.assetChanges.featuredAssetId; + return super.canDeactivate() && !this.assetChanges.assets && !this.assetChanges.featuredAsset; } /** @@ -275,7 +276,8 @@ export class CollectionDetailComponent }); return { ...updatedCategory, - ...this.assetChanges, + assetIds: this.assetChanges.assets?.map(a => a.id), + featuredAssetId: this.assetChanges.featuredAsset?.id, isPrivate: !form.value.visible, filters: this.mapOperationsToInputs(this.filters, this.detailForm.value.filters), }; diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.ts b/packages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.ts index 2fe63c46d1..90a417e196 100644 --- a/packages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.ts +++ b/packages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.ts @@ -20,8 +20,8 @@ import { import { unique } from '@vendure/common/lib/unique'; export interface AssetChange { - assetIds: string[]; - featuredAssetId: string | undefined; + assets: Asset[]; + featuredAsset: Asset | undefined; } /** @@ -38,7 +38,10 @@ export interface AssetChange { changeDetection: ChangeDetectionStrategy.OnPush, }) export class ProductAssetsComponent implements AfterViewInit { - @Input() assets: Asset[] = []; + @Input('assets') set assetsSetter(val: Asset[]) { + // create a new non-readonly array of assets + this.assets = val.slice(); + } @Input() featuredAsset: Asset | undefined; @HostBinding('class.compact') @Input() @@ -53,6 +56,7 @@ export class ProductAssetsComponent implements AfterViewInit { public sourceIndex: number; public dragIndex: number; public activeContainer; + public assets: Asset[] = []; constructor( private modalService: ModalService, @@ -115,8 +119,8 @@ export class ProductAssetsComponent implements AfterViewInit { private emitChangeEvent(assets: Asset[], featuredAsset: Asset | undefined) { this.change.emit({ - assetIds: assets.map(a => a.id), - featuredAssetId: featuredAsset && featuredAsset.id, + assets, + featuredAsset, }); } diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts b/packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts index b28af0f6c9..180963735b 100644 --- a/packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts +++ b/packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts @@ -4,6 +4,7 @@ import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@ang import { ActivatedRoute, Router } from '@angular/router'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { + Asset, BaseDetailComponent, CreateProductInput, createUpdatedTranslatable, @@ -68,8 +69,8 @@ export interface VariantFormValue { } export interface SelectedAssets { - assetIds?: string[]; - featuredAssetId?: string; + assets?: Asset[]; + featuredAsset?: Asset; } @Component({ @@ -524,7 +525,7 @@ export class ProductDetailComponent } canDeactivate(): boolean { - return super.canDeactivate() && !this.assetChanges.assetIds && !this.assetChanges.featuredAssetId; + return super.canDeactivate() && !this.assetChanges.assets && !this.assetChanges.featuredAsset; } /** @@ -635,7 +636,8 @@ export class ProductDetailComponent }); return { ...updatedProduct, - ...this.assetChanges, + assetIds: this.assetChanges.assets?.map(a => a.id), + featuredAssetId: this.assetChanges.featuredAsset?.id, facetValueIds: productFormGroup.value.facetValueIds, } as UpdateProductInput | CreateProductInput; } @@ -677,8 +679,8 @@ export class ProductDetailComponent result.price = priceIncludesTax ? formValue.priceWithTax : formValue.price; const assetChanges = this.variantAssetChanges[variant.id]; if (assetChanges) { - result.featuredAssetId = assetChanges.featuredAssetId; - result.assetIds = assetChanges.assetIds; + result.featuredAssetId = assetChanges.featuredAsset?.id; + result.assetIds = assetChanges.assets?.map(a => a.id); } return result; })