unsubscribe subscriptions

Author: joschne

client/src/app/modules/information/components/appellation/appellation.component.html

@@ -1,7 +1,7 @@
 <div [ngClass]="{'dev-view': entityEditor.devView}">
 
   <span *ngIf="entityEditor.devView">
-      [state: {{peItAppeState}}]
+    [state: {{peItAppeState}}]
   </span>
 
 
@@ -13,7 +13,7 @@
 
   </div>
 
-  <form [formGroup]="formGroup" class="d-flex flex-row" *ngIf=" peItAppeState === 'edit' || peItAppeState === 'create' || peItAppeState === 'create-pe-it' || peItAppeState === 'create-pe-it-role'">
+  <form [formGroup]="formGroup" class="d-flex flex-row" *ngIf=" peItAppeState === 'edit' || peItAppeState === 'create' || peItAppeState === 'create-pe-it' || peItAppeState === 'create-pe-it-role' || peItAppeState === 'create-te-ent-role'">
 
     <gv-appellation-label-editor formControlName="appellationLabel" (touched)="markAsTouched()"></gv-appellation-label-editor>
 

client/src/app/modules/information/components/appellation/appellation.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy, forwardRef, OnDestroy } from '@angular/core';
 
 import { SlimLoadingBarService } from 'ng2-slim-loading-bar';
 import { InfAppellation, InfAppellationApi, ActiveProjectService, EntityEditorService, InfEntityProjectRel } from 'app/core';
@@ -9,6 +9,7 @@ import { IAppellationState } from './appellation.model';
 import { NgRedux, ObservableStore } from '@angular-redux/store';
 import { NG_VALUE_ACCESSOR, FormBuilder, FormGroup, FormControl, Validators, ControlValueAccessor } from '@angular/forms';
 import { Token, TokenInterface } from '../../shared/appellation-token/appellation-token';
+import { Subscription } from 'rxjs';
 
 
 @AutoUnsubscribe()
@@ -25,7 +26,7 @@ import { Token, TokenInterface } from '../../shared/appellation-token/appellatio
     }
   ]
 })
-export class AppellationComponent implements OnInit, ControlValueAccessor {
+export class AppellationComponent implements OnInit, OnDestroy, ControlValueAccessor {
 
   @Input() parentPath: string[];
 
@@ -64,6 +65,7 @@ export class AppellationComponent implements OnInit, ControlValueAccessor {
 
   appellationLabelInEdit: AppellationLabel;
 
+  subs: Subscription[] = [];
 
   constructor(
     private fb: FormBuilder,
@@ -78,7 +80,7 @@ export class AppellationComponent implements OnInit, ControlValueAccessor {
     this.formGroup = this.fb.group({})
 
     // subscribe to form changes here
-    this.formGroup.valueChanges.subscribe(val => {
+    this.subs.push(this.formGroup.valueChanges.subscribe(val => {
       if (this.formGroup.valid) {
 
         // build a appe with the appellation_label given by the formControl 
@@ -101,20 +103,32 @@ export class AppellationComponent implements OnInit, ControlValueAccessor {
       else {
         this.onChange(null)
       }
-    })
+    }))
 
   }
 
+  ngOnDestroy() {
+    this.subs.forEach(sub => sub.unsubscribe())
+  }
+
   ngOnInit() {
 
     this.basePath = this.getBasePath();
-    this.ngRedux.select<IAppellationState>(this.basePath).subscribe(d => {
+    this.subs.push(this.ngRedux.select<IAppellationState>(this.basePath).subscribe(d => {
       this.appeState = d;
-      if(d){
+      if (d) {
         this.appellation = this.appeState.appellation;
         this.peItAppeState = this.appeState.state;
+
+        this.formGroup.addControl('appellationLabel', new FormControl(
+          this.appeState.appellation.appellation_label,
+          [
+            Validators.required
+          ]
+        ))
+
       }
-    });
+    }));
 
     if (this.appellation.appellation_label) {
       this.appellationLabel = new AppellationLabel(this.appellation.appellation_label);
@@ -180,7 +194,7 @@ export class AppellationComponent implements OnInit, ControlValueAccessor {
   save(appeLabel: AppellationLabel) {
     this.startLoading();
 
-    this.appellationApi.findOrCreateAppellation(
+    this.subs.push(this.appellationApi.findOrCreateAppellation(
       this.activeProjectService.project.pk_project,
       {
         pk_entity: this.appellation.pk_entity,
@@ -198,7 +212,8 @@ export class AppellationComponent implements OnInit, ControlValueAccessor {
         isDisplayRoleInProject: false
       })
 
-    })
+    }))
+
     this.cancelEdit.emit()
 
   }
@@ -245,12 +260,6 @@ export class AppellationComponent implements OnInit, ControlValueAccessor {
    */
   writeValue(appellation: InfAppellation): void {
 
-    this.formGroup.addControl('appellationLabel', new FormControl(
-      this.appeState.appellation.appellation_label,
-      [
-        Validators.required
-      ]
-    ))
 
   }
 
@@ -285,7 +294,7 @@ export class AppellationComponent implements OnInit, ControlValueAccessor {
   onTouched = () => {
   };
 
-  markAsTouched(){
+  markAsTouched() {
     this.onTouched()
     this.touched.emit()
   }

client/src/app/modules/information/components/pe-it-entity-add/pe-it-entity-add.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, ChangeDetectorRef, EventEmitter, AfterViewInit } from '@angular/core';
+import { Component, OnInit, Input, Output, ChangeDetectorRef, EventEmitter, AfterViewInit, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 import { SlimLoadingBarService } from 'ng2-slim-loading-bar';
@@ -19,20 +19,21 @@ import { RoleService } from '../../shared/role.service';
 import { PropertyService } from '../../shared/property.service';
 import { RoleSetListService } from '../../shared/role-set-list.service';
 import { EntityAddModalComponent } from '../entity-add-modal/entity-add-modal.component';
+import { Subscriber, Subscription } from 'rxjs';
 
 
 @Component({
   selector: 'gv-pe-it-entity-add',
   templateUrl: './pe-it-entity-add.component.html',
   styleUrls: ['./pe-it-entity-add.component.scss']
 })
-export class PeItEntityAddComponent implements OnInit {
+export class PeItEntityAddComponent implements OnInit, OnDestroy {
 
 
   /**
    * Inputs
    */
-  @Input()  dfhClass: DfhClass;
+  @Input() dfhClass: DfhClass;
 
   /**
    * Output
@@ -41,6 +42,7 @@ export class PeItEntityAddComponent implements OnInit {
 
   @Output() open: EventEmitter<number> = new EventEmitter();
 
+  subs: Subscription[] = [];
 
   constructor(
     private modalService: NgbModal,
@@ -49,9 +51,12 @@ export class PeItEntityAddComponent implements OnInit {
     // super(peItApi, peItService, propertyPipe, activePeItService, slimLoadingBarService, entityEditor, changeDetector, ngRedux, actions, classService, roleService, propertyService, roleSetListService)
   }
 
-  ngOnInit(){
+  ngOnInit() {
     this.openModal()
   }
+  ngOnDestroy() {
+    this.subs.forEach(sub => sub.unsubscribe())
+  }
 
   openModal() {
 
@@ -66,10 +71,10 @@ export class PeItEntityAddComponent implements OnInit {
     this.entityAddModalService.state = 'search-existing';
     this.entityAddModalService.selectRoleRange = true;
     this.entityAddModalService.selectedClass = this.dfhClass;
-    this.entityAddModalService.onSelect.subscribe(pkEntity => {
+    this.subs.push(this.entityAddModalService.onSelect.subscribe(pkEntity => {
       this.selected.emit(pkEntity);
 
-    })
+    }))
 
   }
 

client/src/app/modules/information/components/pe-it-entity-preview/pe-it-entity-preview.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, ChangeDetectorRef, EventEmitter, ChangeDetectionStrategy, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, Output, ChangeDetectorRef, EventEmitter, ChangeDetectionStrategy, forwardRef, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 import { SlimLoadingBarService } from 'ng2-slim-loading-bar';
@@ -23,6 +23,7 @@ import { peItReducer } from '../../containers/pe-it/pe-it.reducer';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
 import { FormBuilder, ControlValueAccessor, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { StateCreatorService } from '../../shared/state-creator.service';
+import { Subscription } from 'rxjs';
 
 @AutoUnsubscribe()
 @Component({
@@ -37,7 +38,7 @@ import { StateCreatorService } from '../../shared/state-creator.service';
     }
   ]
 })
-export class PeItEntityPreviewComponent implements OnInit, ControlValueAccessor {
+export class PeItEntityPreviewComponent implements OnInit, OnDestroy, ControlValueAccessor {
 
   @Input() pkEntity: number;
   @Input() isCircular: boolean;
@@ -67,6 +68,8 @@ export class PeItEntityPreviewComponent implements OnInit, ControlValueAccessor
 
   pkProject: number;
 
+  subs: Subscription[] = [];
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,
@@ -75,24 +78,28 @@ export class PeItEntityPreviewComponent implements OnInit, ControlValueAccessor
     private fb: FormBuilder,
     private roleSetListService: RoleSetListService,
     private stateCreator: StateCreatorService,
+    private ref:ChangeDetectorRef
   ) {
   }
 
 
   ngOnInit() {
 
     this.basePath = this.getBasePath();
-    this.ngRedux.select<IPeItState>(this.basePath).subscribe(d => {
+    this.subs.push(this.ngRedux.select<IPeItState>(this.basePath).subscribe(d => {
       this.peItState = d;
       if (d)
         this.label = this.roleSetListService.getDisplayAppeLabelOfPeItRoleSets(d.roleSets);
-    })
+    }))
 
-    this.ngRedux.select<number>(['activeProject', 'pk_project']).subscribe(d => {
+    this.subs.push(this.ngRedux.select<number>(['activeProject', 'pk_project']).subscribe(d => {
       this.pkProject = d;
-    })
-
+    }))
+  }
 
+  ngOnDestroy() {
+    this.subs.forEach(sub => sub.unsubscribe())
+    this.ref.detach()
   }
 
 
@@ -108,9 +115,10 @@ export class PeItEntityPreviewComponent implements OnInit, ControlValueAccessor
   selected(pkEntity: number) {
     this.isSelected = true
 
-    this.stateCreator.initializePeItState(pkEntity, this.pkProject, 'view').subscribe(peItState => {
+    this.subs.push(this.stateCreator.initializePeItState(pkEntity, this.pkProject, 'view').subscribe(peItState => {
       this.label = this.roleSetListService.getDisplayAppeLabelOfPeItRoleSets(peItState.roleSets);
-    })
+      this.ref.detectChanges()
+    }))
 
     // send the pkEntity to the parent form
     this.onChange(pkEntity)

client/src/app/modules/information/components/pe-it-role-set/pe-it-role-set.component.html

@@ -2,6 +2,8 @@
   <span *ngIf="entityEditor.devView">
     <ng-container *ngTemplateOutlet="dev"></ng-container>
   </span>
+
+
   <!--
     ************************* Editable State & Create PeIt-Role State ************************* -->
 
@@ -12,13 +14,22 @@
       <ng-container *ngTemplateOutlet="header"></ng-container>
 
       <div [@slideInOut]="(toggle$|async)">
-
         <!-- The roles that are added -->
-
         <div class="card-body">
           <gv-pe-it-role *ngFor="let entry of (roleStatesInProject$ | async) | keys; trackBy:getKey" [parentPath]="basePath" [index]="entry.key"
             (appeChange)="emitAppeChange($event)" (onRequestStandard)="changeStandardRole($event)" (readyToAdd)="onRoleReadyToAdd($event)"
-            (roleRemoved)="onRoleRemoved($event)"></gv-pe-it-role>
+            (roleRemoved)="onRoleRemoved($event)">
+
+            <div headerRight ngbDropdown placement="bottom-right" class="gv-name-dropdown">
+              <button class="btn btn-link" ngbDropdownToggle>
+                <i class="fa fa-ellipsis-v"></i>
+              </button>
+              <div ngbDropdownMenu aria-labelledby="dropdown" class="dropdown-menu">
+                <button class="dropdown-item" (click)="removeFromProject(entry.key)">Remove from project </button>
+              </div>
+            </div>
+
+          </gv-pe-it-role>
         </div>
 
         <!-- If no roles in Project, show a big add button -->
@@ -44,8 +55,8 @@
 
               <form [formGroup]="formGroup" *ngIf="formGroup" [connect]="formValPath">
                 <div *ngFor="let entry of (roleStatesToCreate$ | async) | keys; trackBy:getKey">
-                  <gv-pe-it-role [parentPath]="basePath" intermediatePathSegment="roleStatesToCreate" [index]="entry.key"
-                    [formControlName]="entry.key" (touched)="markAsTouched()"></gv-pe-it-role>
+                  <gv-pe-it-role [parentPath]="basePath" intermediatePathSegment="roleStatesToCreate" [index]="entry.key" [formControlName]="entry.key"
+                    (touched)="markAsTouched()"></gv-pe-it-role>
                 </div>
 
                 <div class="card-body">
@@ -219,7 +230,7 @@
         </a>
       </div>
     </div>
-    <button class="btn btn-secondary rounded-bottom-0" (click)="removePropertySection()" *ngIf="removeSectionBtnVisible">
+    <button class="btn btn-secondary rounded-bottom-0" (click)="removeRoleSet()" *ngIf="removeRoleSetBtnVisible">
       <i class="fa fa-close"></i>
     </button>
   </div>