Make ClaimedTaskActionsLoaderComponent extend AbstractComponentLoaderComponent

src/app/shared/mydspace-actions/claimed-task/switcher/claimed-task-actions-loader.component.html

@@ -1 +0,0 @@
-<ng-template dsClaimedTaskActions></ng-template>

src/app/shared/mydspace-actions/claimed-task/switcher/claimed-task-actions-loader.component.spec.ts

@@ -1,7 +1,7 @@
 import { ClaimedTaskActionsLoaderComponent } from './claimed-task-actions-loader.component';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ChangeDetectionStrategy, Injector, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ClaimedTaskActionsDirective } from './claimed-task-actions.directive';
+import { DynamicComponentLoaderDirective } from '../../../abstract-component-loader/dynamic-component-loader.directive';
 import { ClaimedTask } from '../../../../core/tasks/models/claimed-task-object.model';
 import { TranslateModule } from '@ngx-translate/core';
 import { ClaimedTaskActionsEditMetadataComponent } from '../edit-metadata/claimed-task-actions-edit-metadata.component';
@@ -17,6 +17,8 @@ import { getMockSearchService } from '../../../mocks/search-service.mock';
 import { getMockRequestService } from '../../../mocks/request.service.mock';
 import { Item } from '../../../../core/shared/item.model';
 import { WorkflowItem } from '../../../../core/submission/models/workflowitem.model';
+import { ThemeService } from 'src/app/shared/theme-support/theme.service';
+import { getMockThemeService } from '../../../mocks/theme-service.mock';
 
 const searchService = getMockSearchService();
 
@@ -25,6 +27,7 @@ const requestService = getMockRequestService();
 describe('ClaimedTaskActionsLoaderComponent', () => {
   let comp: ClaimedTaskActionsLoaderComponent;
   let fixture: ComponentFixture<ClaimedTaskActionsLoaderComponent>;
+  let themeService: ThemeService;
 
   const option = 'test_option';
   const object = Object.assign(new ClaimedTask(), { id: 'claimed-task-1' });
@@ -61,9 +64,15 @@ describe('ClaimedTaskActionsLoaderComponent', () => {
   const workflowitem = Object.assign(new WorkflowItem(), { id: '333' });
 
   beforeEach(waitForAsync(() => {
+    themeService = getMockThemeService('dspace');
+
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
-      declarations: [ClaimedTaskActionsLoaderComponent, ClaimedTaskActionsEditMetadataComponent, ClaimedTaskActionsDirective],
+      declarations: [
+        ClaimedTaskActionsLoaderComponent,
+        ClaimedTaskActionsEditMetadataComponent,
+        DynamicComponentLoaderDirective,
+      ],
       schemas: [NO_ERRORS_SCHEMA],
       providers: [
         { provide: ClaimedTaskDataService, useValue: {} },
@@ -72,7 +81,8 @@ describe('ClaimedTaskActionsLoaderComponent', () => {
         { provide: Router, useValue: new RouterStub() },
         { provide: SearchService, useValue: searchService },
         { provide: RequestService, useValue: requestService },
-        { provide: PoolTaskDataService, useValue: {} }
+        { provide: PoolTaskDataService, useValue: {} },
+        { provide: ThemeService, useValue: themeService },
       ]
     }).overrideComponent(ClaimedTaskActionsLoaderComponent, {
       set: {
@@ -89,14 +99,14 @@ describe('ClaimedTaskActionsLoaderComponent', () => {
     comp.object = object;
     comp.option = option;
     comp.workflowitem = workflowitem;
-    spyOn(comp, 'getComponentByWorkflowTaskOption').and.returnValue(ClaimedTaskActionsEditMetadataComponent);
+    spyOn(comp, 'getComponent').and.returnValue(ClaimedTaskActionsEditMetadataComponent);
 
     fixture.detectChanges();
   }));
 
   describe('When the component is rendered', () => {
-    it('should call the getComponentByWorkflowTaskOption function with the right option', () => {
-      expect(comp.getComponentByWorkflowTaskOption).toHaveBeenCalledWith(option);
+    it('should call the getComponent function', () => {
+      expect(comp.getComponent).toHaveBeenCalled();
     });
   });
 });

src/app/shared/mydspace-actions/claimed-task/switcher/claimed-task-actions-loader.component.ts

@@ -1,33 +1,22 @@
-import {
-  Component,
-  ComponentFactoryResolver,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  ViewChild,
-  OnChanges,
-  SimpleChanges,
-  ComponentRef,
-} from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, } from '@angular/core';
 import { getComponentByWorkflowTaskOption } from './claimed-task-actions-decorator';
 import { ClaimedTask } from '../../../../core/tasks/models/claimed-task-object.model';
-import { ClaimedTaskActionsDirective } from './claimed-task-actions.directive';
-import { hasValue, isNotEmpty, hasNoValue } from '../../../empty.util';
 import { MyDSpaceActionsResult } from '../../mydspace-actions';
 import { Item } from '../../../../core/shared/item.model';
 import { WorkflowItem } from '../../../../core/submission/models/workflowitem.model';
 import { ClaimedTaskActionsAbstractComponent } from '../abstract/claimed-task-actions-abstract.component';
+import { AbstractComponentLoaderComponent } from '../../../abstract-component-loader/abstract-component-loader.component';
+import { GenericConstructor } from '../../../../core/shared/generic-constructor';
 
 @Component({
   selector: 'ds-claimed-task-actions-loader',
-  templateUrl: './claimed-task-actions-loader.component.html'
+  templateUrl: '../../../abstract-component-loader/abstract-component-loader.component.html',
 })
 /**
  * Component for loading a ClaimedTaskAction component depending on the "option" input
  * Passes on the ClaimedTask to the component and subscribes to the processCompleted output
  */
-export class ClaimedTaskActionsLoaderComponent implements OnInit, OnChanges {
+export class ClaimedTaskActionsLoaderComponent extends AbstractComponentLoaderComponent<ClaimedTaskActionsAbstractComponent> implements OnInit, OnChanges {
   /**
    * The item object that belonging to the ClaimedTask object
    */
@@ -54,85 +43,20 @@ export class ClaimedTaskActionsLoaderComponent implements OnInit, OnChanges {
    */
   @Output() processCompleted = new EventEmitter<MyDSpaceActionsResult>();
 
-  /**
-   * Directive to determine where the dynamic child component is located
-   */
-  @ViewChild(ClaimedTaskActionsDirective, {static: true}) claimedTaskActionsDirective: ClaimedTaskActionsDirective;
-
-  /**
-   * The reference to the dynamic component
-   */
-  protected compRef: ComponentRef<Component>;
-
   /**
    * The list of input and output names for the dynamic component
    */
-  protected inAndOutputNames: (keyof ClaimedTaskActionsAbstractComponent & keyof this)[] = [
+  protected inAndOutputNames: (keyof this)[] = [
+    ...this.inAndOutputNames,
+    'item',
     'object',
     'option',
+    'workflowitem',
     'processCompleted',
   ];
 
-  constructor(private componentFactoryResolver: ComponentFactoryResolver) {
+  public getComponent(): GenericConstructor<ClaimedTaskActionsAbstractComponent> {
+    return getComponentByWorkflowTaskOption(this.option);
   }
 
-  /**
-   * Fetch, create and initialize the relevant component
-   */
-  ngOnInit(): void {
-    this.instantiateComponent();
-  }
-
-  /**
-   * Whenever the inputs change, update the inputs of the dynamic component
-   */
-  ngOnChanges(changes: SimpleChanges): void {
-    if (hasNoValue(this.compRef)) {
-      // sometimes the component has not been initialized yet, so it first needs to be initialized
-      // before being called again
-      this.instantiateComponent(changes);
-    } else {
-      // if an input or output has changed
-      if (this.inAndOutputNames.some((name: any) => hasValue(changes[name]))) {
-        this.connectInputsAndOutputs();
-        if (this.compRef?.instance && 'ngOnChanges' in this.compRef.instance) {
-          (this.compRef.instance as any).ngOnChanges(changes);
-        }
-      }
-    }
-  }
-
-  private instantiateComponent(changes?: SimpleChanges): void {
-    const comp = this.getComponentByWorkflowTaskOption(this.option);
-    if (hasValue(comp)) {
-      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(comp);
-
-      const viewContainerRef = this.claimedTaskActionsDirective.viewContainerRef;
-      viewContainerRef.clear();
-
-      this.compRef = viewContainerRef.createComponent(componentFactory);
-
-      if (hasValue(changes)) {
-        this.ngOnChanges(changes);
-      } else {
-        this.connectInputsAndOutputs();
-      }
-    }
-  }
-
-  getComponentByWorkflowTaskOption(option: string) {
-    return getComponentByWorkflowTaskOption(option);
-  }
-
-  /**
-   * Connect the in and outputs of this component to the dynamic component,
-   * to ensure they're in sync
-   */
-  protected connectInputsAndOutputs(): void {
-    if (isNotEmpty(this.inAndOutputNames) && hasValue(this.compRef) && hasValue(this.compRef.instance)) {
-      this.inAndOutputNames.filter((name: any) => this[name] !== undefined).forEach((name: any) => {
-        this.compRef.instance[name] = this[name];
-      });
-    }
-  }
 }

src/app/shared/mydspace-actions/claimed-task/switcher/claimed-task-actions.directive.ts

@@ -1,11 +0,0 @@
-import { Directive, ViewContainerRef } from '@angular/core';
-
-@Directive({
-  selector: '[dsClaimedTaskActions]',
-})
-/**
- * Directive used as a hook to know where to inject the dynamic Claimed Task Actions component
- */
-export class ClaimedTaskActionsDirective {
-  constructor(public viewContainerRef: ViewContainerRef) { }
-}

src/app/shared/shared.module.ts

@@ -197,7 +197,6 @@ import { FileValueAccessorDirective } from './utils/file-value-accessor.directiv
 import {
   ModifyItemOverviewComponent
 } from '../item-page/edit-item-page/modify-item-overview/modify-item-overview.component';
-import { ClaimedTaskActionsDirective } from './mydspace-actions/claimed-task/switcher/claimed-task-actions.directive';
 import { ImpersonateNavbarComponent } from './impersonate-navbar/impersonate-navbar.component';
 import { NgForTrackByIdDirective } from './ng-for-track-by-id.directive';
 import { FileDownloadLinkComponent } from './file-download-link/file-download-link.component';
@@ -483,7 +482,6 @@ const DIRECTIVES = [
   AutoFocusDirective,
   RoleDirective,
   MetadataRepresentationDirective,
-  ClaimedTaskActionsDirective,
   FileValueAccessorDirective,
   FileValidator,
   NgForTrackByIdDirective,