Trigger Client Mapping only on change via data binding
MODIFY
src/app/components/admin/create-developer/client-mapping.component.ts
src/app/components/admin/create-developer/client-mapping.component.ts
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
import {ClientMapping} from '../../../services/api-data.service';
import {map} from 'rxjs/operators';
@@ -11,7 +11,7 @@ import {SpinnerService} from '../../../services/spinner.service';
templateUrl: './client-mapping.component.html',
styleUrls: ['./client-mapping.component.scss']
})
-export class ClientMappingComponent implements OnInit {
+export class ClientMappingComponent implements OnChanges {
constructor(private adminService: AdminService,
private toasterService: ToasterService,
@@ -22,13 +22,6 @@ export class ClientMappingComponent implements OnInit {
@Input('assignedClients') assignedClients: Array<ClientMapping> = [];
- /**
- * Load clients on initialization
- */
- ngOnInit() {
- this.loadClients();
- }
-
/**
* Load available clients
*/
@@ -59,8 +52,8 @@ export class ClientMappingComponent implements OnInit {
* Reset the client list including assigned clients
*/
reset() {
- this.loadClients();
this.assignedClients = [];
+ this.loadClients();
}
/**
@@ -78,4 +71,13 @@ export class ClientMappingComponent implements OnInit {
}
}
+ /**
+ * Load clients on change
+ */
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.assignedClients && changes.assignedClients.currentValue) {
+ this.loadClients();
+ }
+ }
+
}

MODIFY
src/app/components/admin/create-developer/create-developer.component.html
src/app/components/admin/create-developer/create-developer.component.html
</mat-step>
<mat-step>
<ng-template matStepLabel>Create Client Mapping</ng-template>
- <app-client-mapping #clientmapping></app-client-mapping>
+ <app-client-mapping #clientmapping [assignedClients]="[]"></app-client-mapping>
<p>
<button
[disabled]="!this.checkDeveloperNotExists(this.userFormGroup.get('username').value) || !userFormGroup.valid"

MODIFY
src/app/components/admin/edit-developer/edit-developer.component.ts
src/app/components/admin/edit-developer/edit-developer.component.ts
import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Developer} from '../../../services/api-data.service';
-import {ClientMappingComponent} from '../create-developer/client-mapping.component';
import {AdminService} from '../services/admin.service';
import {DeveloperDataCacheService} from '../services/developer-data-cache.service';
import {Toast, ToasterService} from 'angular2-toaster';
@@ -18,8 +17,6 @@ export class EditDeveloperComponent implements OnInit {
private developer: Developer;
public assignedClients;
- @ViewChild('clientmapping', {static: false}) clientMapping: ClientMappingComponent;
-
constructor(private adminService: AdminService,
private route: ActivatedRoute,
private router: Router,
@@ -38,7 +35,6 @@ export class EditDeveloperComponent implements OnInit {
this.developer = developer;
this.assignedClients = developer.clients;
this.loadingSpinnerService.stopWaiting();
- this.clientMapping.loadClients();
}, error => {
const errorMessage = 'Error loading developer';
console.error(errorMessage, error);

GW-328: Trigger Client Mapping only on change via data binding