Delete all portals on table refresh

frontend/src/app/components/work-packages/wp-single-view/wp-single-view.component.ts

@@ -46,6 +46,7 @@ import {DynamicCssService} from '../../../modules/common/dynamic-css/dynamic-css
 import {HookService} from 'core-app/modules/plugins/hook-service';
 import {randomString} from "core-app/helpers/random-string";
 import {BrowserDetector} from "core-app/modules/common/browser/browser-detector.service";
+import {PortalCleanupService} from "core-app/modules/fields/display/display-portal/portal-cleanup.service";
 
 export interface FieldDescriptor {
   name:string;
@@ -79,6 +80,8 @@ export const overflowingContainerAttribute = 'overflowingIdentifier';
 export class WorkPackageSingleViewComponent implements OnInit, OnDestroy {
   @Input('workPackage') public workPackage:WorkPackageResource;
 
+  public portalCleanupService:PortalCleanupService = this.injector.get(PortalCleanupService);
+
   // Grouped fields returned from API
   public groupedFields:GroupDescriptor[] = [];
 
@@ -186,7 +189,7 @@ export class WorkPackageSingleViewComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    // Nothing to do
+    this.portalCleanupService.clear();
   }
 
   /**

frontend/src/app/components/wp-fast-table/wp-fast-table.ts

@@ -16,6 +16,7 @@ import {WorkPackageTableEditingContext} from './wp-table-editing';
 
 import {WorkPackageTableRow} from './wp-table.interfaces';
 import {WorkPackageTableConfiguration} from 'core-app/components/wp-table/wp-table-configuration';
+import {PortalCleanupService} from "core-app/modules/fields/display/display-portal/portal-cleanup.service";
 
 export class WorkPackageTable {
 
@@ -24,6 +25,7 @@ export class WorkPackageTable {
   public wpCacheService:WorkPackageCacheService = this.injector.get(WorkPackageCacheService);
   public states:States = this.injector.get(States);
   public I18n:I18nService = this.injector.get(I18nService);
+  public portalCleanupService:PortalCleanupService = this.injector.get(PortalCleanupService);
 
   public originalRows:string[] = [];
   public originalRowIndex:{ [id:string]:WorkPackageTableRow } = {};
@@ -142,6 +144,7 @@ export class WorkPackageTable {
 
 
   private performRenderPass() {
+    this.portalCleanupService.clear();
     this.editing.reset();
     const renderPass = this.lastRenderPass = this.rowBuilder.buildRows();
 

frontend/src/app/modules/fields/display/display-portal/display-user-field-portal/user-field-portal-service.ts

@@ -33,6 +33,8 @@ export class UserFieldPortalService {
 
     // Attach the portal to the outlet
     outlet.attachComponentPortal(portal);
+
+    return outlet;
   }
 }
 

frontend/src/app/modules/fields/display/display-portal/display-user-field-portal/user-field-portal.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Injector, Input, OnDestroy, OnInit} from "@angular/core";
+import {ChangeDetectorRef, Component, ElementRef, Injector, Input, OnInit} from "@angular/core";
 import {UserResource} from "core-app/modules/hal/resources/user-resource";
 import {OpDisplayPortalUserToken} from "./user-field-portal.injector";
 
@@ -6,7 +6,7 @@ import {OpDisplayPortalUserToken} from "./user-field-portal.injector";
   selector: 'user-field-portal',
   templateUrl: './user-field-portal.component.html'
 })
-export class UserFieldPortalComponent implements OnInit, OnDestroy {
+export class UserFieldPortalComponent implements OnInit {
   @Input() userResource:UserResource;
 
   public user:UserResource;
@@ -19,8 +19,4 @@ export class UserFieldPortalComponent implements OnInit, OnDestroy {
     this.user = this.injector.get<UserResource>(OpDisplayPortalUserToken);
     this.userUrl = this.user.href || '';
   }
-
-  ngOnDestroy() {
-    console.log('DESTROY!!!!!!');
-  }
 }

frontend/src/app/modules/fields/display/display-portal/portal-cleanup.service.ts

@@ -0,0 +1,17 @@
+import {Injectable} from '@angular/core';
+
+
+@Injectable()
+export class PortalCleanupService {
+
+  public portalCallbacks:Function[] = [];
+
+  public add(callback:Function) {
+    this.portalCallbacks.push(callback);
+  }
+
+  public clear() {
+    this.portalCallbacks.forEach((callback) => callback());
+    this.portalCallbacks = [];
+  }
+}

frontend/src/app/modules/fields/display/field-types/wp-display-user-field.modules.ts

@@ -28,9 +28,13 @@
 
 import {DisplayField} from "core-app/modules/fields/display/display-field.module";
 import {UserFieldPortalService} from "core-app/modules/fields/display/display-portal/display-user-field-portal/user-field-portal-service";
+import {DomPortalOutlet} from "@angular/cdk/portal";
+import {PortalCleanupService} from "core-app/modules/fields/display/display-portal/portal-cleanup.service";
 
 export class UserDisplayField extends DisplayField {
   public userDisplayPortal = this.$injector.get(UserFieldPortalService);
+  public portalCleanup = this.$injector.get(PortalCleanupService);
+  public outlet:DomPortalOutlet;
 
   public get value() {
     if (this.schema) {
@@ -45,7 +49,8 @@ export class UserDisplayField extends DisplayField {
     if (this.placeholder === displayText) {
       this.renderEmpty(element);
     } else {
-      this.userDisplayPortal.create(element, this.attribute)
+      this.outlet = this.userDisplayPortal.create(element, this.attribute);
+      this.portalCleanup.add(() => this.outlet.dispose());
     }
   }
 }

frontend/src/app/modules/fields/openproject-fields.module.ts

@@ -50,6 +50,7 @@ import {WorkPackageEditFieldComponent} from "core-app/modules/fields/edit/field-
 import {OpenprojectEditorModule} from 'core-app/modules/editor/openproject-editor.module';
 import {UserFieldPortalComponent} from "core-app/modules/fields/display/display-portal/display-user-field-portal/user-field-portal.component";
 import {UserFieldPortalService} from "core-app/modules/fields/display/display-portal/display-user-field-portal/user-field-portal-service";
+import {PortalCleanupService} from "core-app/modules/fields/display/display-portal/portal-cleanup.service";
 
 @NgModule({
   imports: [
@@ -65,6 +66,7 @@ import {UserFieldPortalService} from "core-app/modules/fields/display/display-po
   providers: [
     WorkPackageEditingPortalService,
     UserFieldPortalService,
+    PortalCleanupService,
     DisplayFieldService,
     EditFieldService,
     { provide: APP_INITIALIZER, useFactory: initializeCoreEditFields, deps: [EditFieldService], multi: true },

frontend/src/app/modules/work_packages/query-space/wp-isolated-query-space.directive.ts

@@ -59,6 +59,7 @@ import {WpChildrenInlineCreateService} from "core-components/wp-relations/embedd
 import {WpRelationInlineCreateService} from "core-components/wp-relations/embedded/relations/wp-relation-inline-create.service";
 import {WorkPackagesListChecksumService} from "core-components/wp-list/wp-list-checksum.service";
 import {debugLog} from "core-app/helpers/debug_output";
+import {PortalCleanupService} from "core-app/modules/fields/display/display-portal/portal-cleanup.service";
 
 /**
  * Directive to open a work package query 'space', an isolated injector hierarchy
@@ -109,6 +110,8 @@ import {debugLog} from "core-app/helpers/debug_output";
 
     WorkPackageStatesInitializationService,
     ReorderQueryService,
+
+    PortalCleanupService,
   ]
 })
 export class WorkPackageIsolatedQuerySpaceDirective {