feat(admin-ui): More flexible assets component (#1358)

Closes #1357 
* feat(admin-ui): Rename ProductAssetsComponent to AssetsComponent
* feat(admin-ui): Change selector of the AssetsComponent
* feat(admin-ui): Replace hardcoded permissions with input
- Remove unused imports

packages/admin-ui/src/lib/catalog/src/catalog.module.ts

@@ -6,6 +6,7 @@ import { catalogRoutes } from './catalog.routes';
 import { ApplyFacetDialogComponent } from './components/apply-facet-dialog/apply-facet-dialog.component';
 import { AssetDetailComponent } from './components/asset-detail/asset-detail.component';
 import { AssetListComponent } from './components/asset-list/asset-list.component';
+import { AssetsComponent } from './components/assets/assets.component';
 import { AssignProductsToChannelDialogComponent } from './components/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component';
 import { CollectionContentsComponent } from './components/collection-contents/collection-contents.component';
 import { CollectionDetailComponent } from './components/collection-detail/collection-detail.component';
@@ -17,7 +18,6 @@ import { FacetDetailComponent } from './components/facet-detail/facet-detail.com
 import { FacetListComponent } from './components/facet-list/facet-list.component';
 import { GenerateProductVariantsComponent } from './components/generate-product-variants/generate-product-variants.component';
 import { OptionValueInputComponent } from './components/option-value-input/option-value-input.component';
-import { ProductAssetsComponent } from './components/product-assets/product-assets.component';
 import { ProductDetailComponent } from './components/product-detail/product-detail.component';
 import { ProductListComponent } from './components/product-list/product-list.component';
 import { ProductOptionsEditorComponent } from './components/product-options-editor/product-options-editor.component';
@@ -37,7 +37,7 @@ const CATALOG_COMPONENTS = [
     ProductVariantsListComponent,
     ApplyFacetDialogComponent,
     AssetListComponent,
-    ProductAssetsComponent,
+    AssetsComponent,
     VariantPriceDetailComponent,
     CollectionListComponent,
     CollectionDetailComponent,

packages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.ts → packages/admin-ui/src/lib/catalog/src/components/assets/assets.component.ts

@@ -1,5 +1,4 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { ViewportRuler } from '@angular/cdk/overlay';
 import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
@@ -7,7 +6,6 @@ import {
     EventEmitter,
     HostBinding,
     Input,
-    Optional,
     Output,
 } from '@angular/core';
 import {
@@ -19,27 +17,25 @@ import {
 } from '@vendure/admin-ui/core';
 import { unique } from '@vendure/common/lib/unique';
 
-import { CollectionDetailComponent } from '../collection-detail/collection-detail.component';
-
 export interface AssetChange {
     assets: Asset[];
     featuredAsset: Asset | undefined;
 }
 
 /**
- * A component which displays the Assets associated with a product, and allows assets to be removed and
+ * A component which displays the Assets, and allows assets to be removed and
  * added, and for the featured asset to be set.
  *
  * Note: rather complex code for drag drop is due to a limitation of the default CDK implementation
  * which is addressed by a work-around from here: https://github.com/angular/components/issues/13372#issuecomment-483998378
  */
 @Component({
-    selector: 'vdr-product-assets',
-    templateUrl: './product-assets.component.html',
-    styleUrls: ['./product-assets.component.scss'],
+    selector: 'vdr-assets',
+    templateUrl: './assets.component.html',
+    styleUrls: ['./assets.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProductAssetsComponent {
+export class AssetsComponent {
     @Input('assets') set assetsSetter(val: Asset[]) {
         // create a new non-readonly array of assets
         this.assets = (val || []).slice();
@@ -53,23 +49,10 @@ export class ProductAssetsComponent {
 
     public assets: Asset[] = [];
 
-    private readonly updateCollectionPermissions = [Permission.UpdateCatalog, Permission.UpdateCollection];
-    private readonly updateProductPermissions = [Permission.UpdateCatalog, Permission.UpdateProduct];
-
-    get updatePermissions(): Permission[] {
-        if (this.collectionDetailComponent) {
-            return this.updateCollectionPermissions;
-        } else {
-            return this.updateProductPermissions;
-        }
-    }
+    @Input()
+    updatePermissions: string | string[] | Permission | Permission[];
 
-    constructor(
-        private modalService: ModalService,
-        private changeDetector: ChangeDetectorRef,
-        private viewportRuler: ViewportRuler,
-        @Optional() private collectionDetailComponent?: CollectionDetailComponent,
-    ) {}
+    constructor(private modalService: ModalService, private changeDetector: ChangeDetectorRef) {}
 
     selectAssets() {
         this.modalService

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

@@ -93,11 +93,12 @@
             ></vdr-custom-detail-component-host>
         </div>
         <div class="clr-col-md-auto">
-            <vdr-product-assets
+            <vdr-assets
                 [assets]="category.assets"
                 [featuredAsset]="category.featuredAsset"
+                [updatePermissions]="updatePermission"
                 (change)="assetChanges = $event"
-            ></vdr-product-assets>
+            ></vdr-assets>
         </div>
     </div>
     <div class="clr-row" formArrayName="filters">

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

@@ -145,11 +145,12 @@
                         </section>
                     </div>
                     <div class="clr-col-md-auto">
-                        <vdr-product-assets
+                        <vdr-assets
                             [assets]="assetChanges.assets || product.assets"
                             [featuredAsset]="assetChanges.featuredAsset || product.featuredAsset"
+                            [updatePermissions]="updatePermissions"
                             (change)="assetChanges = $event"
-                        ></vdr-product-assets>
+                        ></vdr-assets>
                         <div class="facets">
                             <vdr-facet-value-chip
                                 *ngFor="let facetValue of facetValues$ | async"

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

@@ -19,6 +19,7 @@ import {
     LogicalOperator,
     ModalService,
     NotificationService,
+    Permission,
     ProductDetail,
     ProductVariant,
     ServerConfigService,
@@ -123,6 +124,7 @@ export class ProductDetailComponent
     // Used to store all ProductVariants which have been loaded.
     // It is needed when saving changes to variants.
     private productVariantMap = new Map<string, ProductVariant.Fragment>();
+    public readonly updatePermissions = [Permission.UpdateCatalog, Permission.UpdateProduct];
 
     constructor(
         route: ActivatedRoute,

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

@@ -44,14 +44,15 @@
             <div class="card-block">
                 <div class="variant-body">
                     <div class="assets">
-                        <vdr-product-assets
+                        <vdr-assets
                             [compact]="true"
                             [assets]="pendingAssetChanges[variant.id]?.assets || variant.assets"
                             [featuredAsset]="
                                 pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset
                             "
+                            [updatePermissions]="updatePermission"
                             (change)="onAssetChange(variant.id, $event)"
-                        ></vdr-product-assets>
+                        ></vdr-assets>
                     </div>
                     <div class="variant-form-inputs">
                         <div class="standard-fields">

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

@@ -33,7 +33,7 @@ import { PaginationInstance } from 'ngx-pagination';
 import { Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 
-import { AssetChange } from '../product-assets/product-assets.component';
+import { AssetChange } from '../assets/assets.component';
 import {
     PaginationConfig,
     SelectedAssets,

packages/admin-ui/src/lib/catalog/src/public_api.ts

@@ -4,6 +4,7 @@ export * from './catalog.routes';
 export * from './components/apply-facet-dialog/apply-facet-dialog.component';
 export * from './components/asset-detail/asset-detail.component';
 export * from './components/asset-list/asset-list.component';
+export * from './components/assets/assets.component';
 export * from './components/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component';
 export * from './components/collection-contents/collection-contents.component';
 export * from './components/collection-detail/collection-detail.component';
@@ -16,7 +17,6 @@ export * from './components/facet-detail/facet-detail.component';
 export * from './components/facet-list/facet-list.component';
 export * from './components/generate-product-variants/generate-product-variants.component';
 export * from './components/option-value-input/option-value-input.component';
-export * from './components/product-assets/product-assets.component';
 export * from './components/product-detail/product-detail.component';
 export * from './components/product-list/product-list.component';
 export * from './components/product-options-editor/product-options-editor.component';