List Assets refactor

projects/lib/src/admin/components/asset-list/asset-list.component.html

@@ -30,6 +30,8 @@ <h1>Assets</h1>
       <div *ngIf="!loading">
         <div *ngFor="let asset of assets">
           <cms-asset-update
+            [resourceType]="resourceType"
+            [resourceID]="resourceID"
             [assetType]="type"
             [isNew]="false"
             [asset]="asset"
@@ -50,6 +52,8 @@ <h1>Assets</h1>
 
 <ng-template #uploadAssetModal>
   <cms-asset-upload
+    [resourceType]="resourceType"
+    [resourceID]="resourceID"
     [assetType]="selectedTab"
     (cancel)="modalReference.dismiss()"
     (submit)="handleSubmit()"

projects/lib/src/admin/components/asset-list/asset-list.component.ts

@@ -1,17 +1,16 @@
-import { Component, OnInit, Input } from '@angular/core';
-import {
-  HeadStartSDK,
-  ListArgs,
-  Asset,
-} from '@ordercloud/headstart-sdk';
+import { Component, Input, OnInit } from '@angular/core';
 import {
   NgbModal,
   NgbModalRef,
-  NgbNavChangeEvent,
+  NgbNavChangeEvent
 } from '@ng-bootstrap/ng-bootstrap';
-import { NgxSpinnerService } from 'ngx-spinner';
-import { ResourceType } from '../../../shared/models/resource-type.interface';
+import {
+  Asset, HeadStartSDK,
+  ListArgs
+} from '@ordercloud/headstart-sdk';
 import { RequiredDeep } from '@ordercloud/headstart-sdk/dist/models/RequiredDeep';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ResourceType } from 'projects/lib/src/shared/models/resource-type.interface';
 
 const ASSET_TYPE_IMAGE = 'Image';
 type ASSET_TYPE_IMAGE = typeof ASSET_TYPE_IMAGE;
@@ -34,8 +33,8 @@ type AssetType =
   styleUrls: ['./asset-list.component.scss'],
 })
 export class AssetListComponent implements OnInit {
-  @Input() resourceType?: ResourceType;
-  @Input() resourceID?: string;
+  @Input() resourceType?: ResourceType = null;
+  @Input() resourceID?: string = null;
   @Input() parentResourceID?: string = null;
   assets: any;
   modalReference: NgbModalRef;
@@ -54,32 +53,27 @@ export class AssetListComponent implements OnInit {
   ) {}
 
   async ngOnInit(): Promise<void> {
-    if (this.resourceID && this.resourceType) {
-      this.assets = await this.listAssetsPerResource()
-      .catch((ex) => ex)
-      .finally(() => {
-        this.loading = false;
-        this.spinner.hide();
-      })
-    } else {
-      this.listAssets(this.assetTypes[0], null);
+    if (!this.resourceType || !this.resourceID) {
+      throw new Error(
+        'cms-asset-list is missing required props resourceType or resourceID'
+      );
     }
+    await this.listAssets(this.selectedTab, null);
   }
 
-  listAssets(assetType: AssetType, searchTerm: string) {
+  async listAssets(assetType: AssetType, searchTerm: string) {
+    console.log('this is hit');
     this.spinner.show();
+    // TODO: options are not used yet - either handle searchTerm client side or wait for Oliver's updated endpoints
     let options: ListArgs<Asset> = {
-      filters: { Type: assetType },
-    };
+      filters: { Type: assetType }
+    }
     if (searchTerm) {
       options = { ...options, search: searchTerm, searchOn: ['Title'] };
     }
-    this.loading = true;
-    this.spinner.show();
-    return HeadStartSDK.Assets.List(options)
-      .then((assets) => {
-        this.assets = assets.Items;
-      })
+    this.assets = await this.listAssetsPerResource()
+      .then((assets) => assets.filter(a => a.Type === assetType))
+      .catch((ex) => ex)
       .finally(() => {
         this.loading = false;
         this.spinner.hide();

projects/lib/src/admin/components/asset-update/asset-update.component.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
-import { HeadStartSDK } from '@ordercloud/headstart-sdk';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AssetAssignment, HeadStartSDK } from '@ordercloud/headstart-sdk';
+import { ResourceType } from 'projects/lib/src/shared/models/resource-type.interface';
 
 @Component({
   selector: 'cms-asset-update',
@@ -13,6 +14,8 @@ export class AssetUpdateComponent implements OnInit {
 
   @Input() asset?: any;
   @Input() assetType: any;
+  @Input() resourceType: ResourceType;
+  @Input() resourceID: string;
   @Input() isNew: boolean;
   @Output() onSubmit = new EventEmitter();
   @Output() onDelete = new EventEmitter();
@@ -23,6 +26,11 @@ export class AssetUpdateComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
+    if (!this.resourceType || !this.resourceID) {
+      throw new Error(
+        'cms-asset-update is missing required props resourceType or resourceID'
+      );
+    }
     this.setForm();
   }
 
@@ -61,13 +69,20 @@ export class AssetUpdateComponent implements OnInit {
   saveChanges(asset) {
     const updatedAsset = asset.value;
     if (this.isNew) {
-      return HeadStartSDK.Upload.UploadAsset(updatedAsset).then(() => {
-        this.isNew = false;
-        this.onSubmit.emit({
-          action: 'UploadAsset',
-          asset: updatedAsset
-        });
-      });
+      return HeadStartSDK.Upload.UploadAsset(updatedAsset).then((response) => {
+        const assignment: AssetAssignment = {
+          ResourceType: this.resourceType,
+          ResourceID: this.resourceID,
+          AssetID: response.ID
+        }
+        return HeadStartSDK.Assets.SaveAssetAssignment(assignment).then(() => {
+          this.isNew = false;
+          this.onSubmit.emit({
+            action: 'UploadAsset',
+            asset: response
+          });
+        })
+      })
     } else {
       return HeadStartSDK.Assets.Save(updatedAsset.ID, updatedAsset).then(() => {
         this.onSubmit.emit({

projects/lib/src/admin/components/asset-upload/asset-upload.component.html

@@ -1,7 +1,9 @@
 <div class="modal-content">
     <div class="modal-body">
         <h2>New {{assetType}}</h2>
-        <cms-asset-update [assetType]="assetType" 
+        <cms-asset-update [assetType]="assetType"
+        [resourceType]="resourceType"
+        [resourceID]="resourceID"
         [isNew]="true"
         (onSubmit)="submit.emit($event)"></cms-asset-update>
     </div>

projects/lib/src/admin/components/asset-upload/asset-upload.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'cms-asset-upload',
@@ -7,6 +7,8 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 })
 export class AssetUploadComponent implements OnInit {
   @Input() assetType;
+  @Input() resourceType: 'Products' | 'Categories' | 'Catalogs' | 'Promotions' | 'Suppliers' | 'Buyers' | 'ProductFacets';
+  @Input() resourceID: string;
   @Output() cancel = new EventEmitter();
   @Output() submit = new EventEmitter();
 

projects/lib/src/stories/asset-list.stories.ts

@@ -25,6 +25,6 @@ export default {
 
 export const FullExample = () => ({
   component: AssetListComponent,
-  template: `<cms-asset-list></cms-asset-list>`,
+  template: `<cms-asset-list [resourceType]="'Suppliers'" [resourceID]="'40009'"></cms-asset-list>`,
   props: {},
 });