Merge pull request #567 from CruGlobal/metaToolManagement

GT-1564 Support managing metatools

src/app/components/attachments/attachments.component.ts

@@ -55,7 +55,12 @@ export class AttachmentsComponent implements OnInit {
 
     this.resourceService
       .getResources('attachments')
-      .then((resources) => (this.resources = resources))
+      .then(
+        (resources) =>
+          (this.resources = resources.filter(
+            (tool) => !Resource.isMetaTool(tool),
+          )),
+      )
       .catch(this.handleError.bind(this))
       .then(() => (this.loading = false));
   }

src/app/components/edit-resource/abstract-edit-resource.component.ts

@@ -6,6 +6,7 @@ import { System } from '../../models/system';
 import { SystemService } from '../../service/system.service';
 import { ResourceTypeService } from '../../service/resource-type.service';
 import { AceEditorDirective } from 'ng2-ace-editor';
+import { ResourceService } from '../../service/resource/resource.service';
 
 export abstract class AbstractEditResourceComponent implements OnDestroy {
   saving = false;
@@ -14,12 +15,14 @@ export abstract class AbstractEditResourceComponent implements OnDestroy {
   @ViewChild(AceEditorDirective) editor;
 
   @Input() resource: Resource = new Resource();
+  metatools: Resource[];
   resourceTypes: ResourceType[];
   systems: System[];
 
   protected constructor(
     protected systemService: SystemService,
     protected resourceTypeService: ResourceTypeService,
+    protected resourceService: ResourceService,
     protected activeModal: NgbActiveModal,
   ) {}
 
@@ -39,6 +42,10 @@ export abstract class AbstractEditResourceComponent implements OnDestroy {
         systemsCallback.call();
       }
     });
+
+    this.resourceService.getResources().then((tools) => {
+      this.metatools = tools.filter((tool) => Resource.isMetaTool(tool));
+    });
   }
 
   ngOnDestroy(): void {
@@ -51,6 +58,14 @@ export abstract class AbstractEditResourceComponent implements OnDestroy {
     this.activeModal.dismiss('dismissed');
   }
 
+  isMetaTool(): boolean {
+    return Resource.isMetaTool(this.resource);
+  }
+
+  compareTools(o1: any, o2: any): boolean {
+    return o1 && o2 && o1.id === o2.id;
+  }
+
   protected handleError(message): void {
     this.saving = false;
     this.errorMessage = message;

src/app/components/edit-resource/create-resource/create-resource.component.ts

@@ -20,12 +20,12 @@ export class CreateResourceComponent
   systems: System[];
 
   constructor(
-    private resourceService: ResourceService,
+    resourceService: ResourceService,
     systemService: SystemService,
     resourceTypeService: ResourceTypeService,
     activeModal: NgbActiveModal,
   ) {
-    super(systemService, resourceTypeService, activeModal);
+    super(systemService, resourceTypeService, resourceService, activeModal);
   }
 
   ngOnInit(): void {

src/app/components/edit-resource/edit-resource.component.html

@@ -29,15 +29,42 @@
   </div>
 
   <div class="row mb-2">
-    <div class="col">
+    <div class="col-3">
       <label>Type</label>
       <select class="custom-select" [(ngModel)]="resource.resourceType">
         <option *ngFor="let type of resourceTypes" [ngValue]="type">
           {{ type.name }}
         </option>
       </select>
     </div>
-    <div class="col">
+    <div class="col-3" *ngIf="!isMetaTool()">
+      <label>Metatool</label>
+      <select
+        class="custom-select"
+        [(ngModel)]="resource.metatool"
+        [compareWith]="compareTools"
+      >
+        <option value=""></option>
+        <option *ngFor="let tool of metatools" [ngValue]="tool">
+          {{ tool.name }}
+        </option>
+      </select>
+    </div>
+    <div class="col-3" *ngIf="isMetaTool()">
+      <label>Default Variant</label>
+      <select
+        class="custom-select"
+        [(ngModel)]="resource['attr-default-variant']"
+      >
+        <option
+          *ngFor="let variant of resource.variants"
+          [ngValue]="variant.abbreviation"
+        >
+          {{ variant.name }}
+        </option>
+      </select>
+    </div>
+    <div class="col" *ngIf="!isMetaTool()">
       <label>Category</label>
       <select class="custom-select" [(ngModel)]="resource['attr-category']">
         <option value="articles">Articles</option>
@@ -47,7 +74,7 @@
         <option value="training">Training</option>
       </select>
     </div>
-    <div class="col">
+    <div class="col" *ngIf="!isMetaTool()">
       <label for="order">Order</label>
       <input
         id="order"
@@ -56,18 +83,9 @@
         [(ngModel)]="resource['attr-default-order']"
       />
     </div>
-    <div class="col">
-      <label for="onesky">OneSky Project ID</label>
-      <input
-        id="onesky"
-        class="form-control"
-        placeholder="OneSky Project ID"
-        [(ngModel)]="resource.oneskyProjectId"
-      />
-    </div>
   </div>
 
-  <div class="row mb-2">
+  <div class="row mb-2" *ngIf="!isMetaTool()">
     <div class="col-3">
       <label>Banner</label>
       <div class="row">
@@ -137,7 +155,7 @@
     </div>
   </div>
 
-  <div class="row">
+  <div class="row" *ngIf="!isMetaTool()">
     <div class="col-3">
       <input
         id="spotlight"
@@ -159,9 +177,19 @@
       &nbsp;
       <label for="hidden">Hidden</label>
     </div>
+    <div class="col-3"></div>
+    <div class="col-3" *ngIf="!isMetaTool()">
+      <label for="onesky">OneSky Project ID</label>
+      <input
+        id="onesky"
+        class="form-control"
+        placeholder="OneSky Project ID"
+        [(ngModel)]="resource.oneskyProjectId"
+      />
+    </div>
   </div>
 
-  <div class="row mb-2">
+  <div class="row mb-2" *ngIf="!isMetaTool()">
     <div class="col">
       <label>Description</label>
       <textarea
@@ -174,13 +202,9 @@
     </div>
   </div>
 
-  <div class="row">
+  <div class="row" *ngIf="!isMetaTool()">
     <div class="col">
       <label>Manifest XML</label>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col">
       <div
         ace-editor
         [(text)]="resource.manifest"

src/app/components/edit-resource/update-resource/update-resource.component.ts

@@ -20,12 +20,12 @@ export class UpdateResourceComponent
   systems: System[];
 
   constructor(
-    private resourceService: ResourceService,
+    resourceService: ResourceService,
     systemService: SystemService,
     resourceTypeService: ResourceTypeService,
     activeModal: NgbActiveModal,
   ) {
-    super(systemService, resourceTypeService, activeModal);
+    super(systemService, resourceTypeService, resourceService, activeModal);
   }
 
   ngOnInit(): void {

src/app/components/resource/resource.component.html

@@ -1,9 +1,10 @@
 <div class="card mb-3">
   <div
     class="card-header bg-dark text-white d-flex justify-content-between align-items-center"
+    [ngStyle]="{ cursor: isMetaTool() ? 'default' : 'pointer' }"
     (click)="showDetails = !showDetails"
   >
-    <span class="h4 mb-0" style="cursor: pointer">
+    <span class="h4 mb-0">
       {{ resource.name }}
     </span>
     <div class="btn-group" role="group">
@@ -16,12 +17,13 @@
       <button
         (click)="openGenerateModal(resource); $event.stopPropagation()"
         class="btn btn-secondary"
+        *ngIf="!isMetaTool()"
       >
         <i class="fa fa-plus"></i> Generate multiple drafts
       </button>
     </div>
   </div>
-  <div class="card-body bg-dark" [ngbCollapse]="!showDetails">
+  <div class="card-body bg-dark" [ngbCollapse]="!showDetails || isMetaTool()">
     <div class="row mt-3">
       <div class="col">
         <!-- Pages UI -->

src/app/components/resource/resource.component.ts

@@ -82,6 +82,10 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
     this._translationLoaded.complete();
   }
 
+  isMetaTool(): boolean {
+    return Resource.isMetaTool(this.resource);
+  }
+
   createPage(): void {
     const modal = this.modalService.open(CreatePageComponent, { size: 'lg' });
     modal.componentInstance.page.resource = this.resource;

src/app/components/resources/resources.component.spec.ts

@@ -62,7 +62,7 @@ describe('ResourcesComponent', () => {
 
     setTimeout(() => {
       expect(resourceServiceStub.getResources).toHaveBeenCalledWith(
-        'translations,pages,custom-manifests,tips,attachments',
+        'translations,pages,custom-manifests,tips,attachments,variants',
       );
 
       done();

src/app/components/resources/resources.component.ts

@@ -34,7 +34,9 @@ export class ResourcesComponent implements OnInit {
     this.loadingResources = true;
 
     this.resourceService
-      .getResources('translations,pages,custom-manifests,tips,attachments')
+      .getResources(
+        'translations,pages,custom-manifests,tips,attachments,variants',
+      )
       .then((resources) => {
         this.resources = resources;
       })

src/app/models/resource.ts

@@ -16,6 +16,8 @@ export class Resource {
   description: string;
   manifest: string;
   showTranslations: boolean;
+  metatool?: Resource;
+  variants: Resource[];
   translations: Translation[];
   attachments: Attachment[];
   pages: Page[];
@@ -33,10 +35,19 @@ export class Resource {
     | 'gospel'
     | 'growth'
     | 'training';
+  'attr-default-variant'?: string;
   'attr-default-order'?: number;
   'attr-hidden'?: boolean;
   'attr-spotlight'?: boolean;
 
+  static isMetaTool(resource: Resource): boolean {
+    return (
+      (resource.resourceType && resource.resourceType.name
+        ? resource.resourceType.name
+        : resource['resource-type']) === 'metatool'
+    );
+  }
+
   static getResourceTypeId(resource: Resource): number {
     return resource.resourceType ? resource.resourceType.id : null;
   }

src/app/service/resource/resource.service.spec.ts

@@ -36,7 +36,7 @@ describe('ResourceService', () => {
     );
 
     spyOn(mockHttp, 'put').and.returnValue(
-      Observable.create((observer) => observer.complete()),
+      new Observable((observer) => observer.complete()),
     );
   });
 

src/app/service/resource/resource.service.ts

@@ -15,9 +15,11 @@ export class ResourceService extends AbstractService {
     super();
   }
 
-  getResources(include: string): Promise<Resource[]> {
+  getResources(include?: string): Promise<Resource[]> {
     return this.http
-      .get(`${this.resourcesUrl}?include=${include}`)
+      .get(
+        include ? `${this.resourcesUrl}?include=${include}` : this.resourcesUrl,
+      )
       .toPromise()
       .then((response) => {
         return new JsonApiDataStore().sync(response.json());
@@ -70,6 +72,7 @@ export class ResourceService extends AbstractService {
           abbreviation: resource.abbreviation,
           system_id: Resource.getSystemId(resource),
           resource_type_id: Resource.getResourceTypeId(resource),
+          metatool_id: (resource.metatool && resource.metatool.id) || null,
           onesky_project_id: resource.oneskyProjectId,
           description: resource.description,
           manifest: resource.manifest,
@@ -80,6 +83,7 @@ export class ResourceService extends AbstractService {
           'attr-about-overview-video-youtube':
             resource.aboutOverviewVideoYoutube || null,
           'attr-category': resource['attr-category'] || null,
+          'attr-default-variant': resource['attr-default-variant'] || null,
           'attr-default-order': resource['attr-default-order'] || null,
           'attr-hidden': resource['attr-hidden'] || null,
           'attr-spotlight': resource['attr-spotlight'] || null,