Removing unuseful setTimeout and managin everything with CD

src/app/pages/algorithms/algorithm-forms/algorithm-form-entity.ts

@@ -3,7 +3,7 @@ import { FormGroup, FormBuilder } from '@angular/forms';
 import { Observable } from 'rxjs';
 
 import { MatRadioChange } from '@angular/material';
-import { OnInit, Output, EventEmitter, Injector, AfterViewInit } from '@angular/core';
+import { OnInit, Output, EventEmitter, Injector, AfterViewInit,ChangeDetectorRef } from '@angular/core';
 import { DeleteConfirmDialogComponent } from 'src/app/components/dialogs/delete-confirm-dialog/delete-confirm-dialog.component';
 import { EntitiesService } from 'src/app/services/entities/entities.service';
 import { HytModalService } from '@hyperiot/components';
@@ -46,7 +46,8 @@ export abstract class AlgorithmFormEntity implements OnInit, AfterViewInit {
 	protected algorithmService: AlgorithmService;
 
     constructor(
-        injector: Injector
+        injector: Injector,
+        private cd: ChangeDetectorRef
     ) {
         this.formBuilder = injector.get(FormBuilder);
         this.entitiesService = injector.get(EntitiesService);
@@ -60,9 +61,8 @@ export abstract class AlgorithmFormEntity implements OnInit, AfterViewInit {
     }
 
     ngAfterViewInit() {
-        setTimeout(() => {
-            this.buildHintMessages();
-        }, 0);
+        this.cd.detectChanges();
+        this.buildHintMessages();
     }
 
     private buildHintMessages() {

src/app/pages/algorithms/algorithm-forms/algorithm-info-form/algorithm-info-form.component.ts

@@ -53,7 +53,7 @@ export class AlgorithmInfoFormComponent extends AlgorithmFormEntity implements A
     injector: Injector,
     private cdr: ChangeDetectorRef
   ) {
-    super(injector);
+    super(injector,cdr);
     this.formTemplateId = 'algorithm-info-form';
     this.longDefinition = this.entitiesService.algorithm.longDefinition;
     this.formTitle = this.entitiesService.algorithm.formTitle;
@@ -94,17 +94,9 @@ export class AlgorithmInfoFormComponent extends AlgorithmFormEntity implements A
 
   load() {
     this.loadingStatus = LoadingStatusEnum.Loading;
-
-    /******* VALUE LOADING OVERLAY *******/
-
-    setTimeout(() => {
-
-      this.divHeight = this.overlayHeight.nativeElement.clientHeight;
-
-    }, 0);
-
     this.cdr.detectChanges();
-
+    /******* VALUE LOADING OVERLAY *******/
+    this.divHeight = this.overlayHeight.nativeElement.clientHeight;  
     /******* END VALUE LOADING OVERLAY *******/
 
     this.entity = this.algorithm;

src/app/pages/algorithms/algorithm-forms/algorithm-jar-form/algorithm-jar-form.component.ts

@@ -78,7 +78,7 @@ export class AlgorithmJarFormComponent extends AlgorithmFormEntity implements Af
     injector: Injector,
     private cdr: ChangeDetectorRef
   ) {
-    super(injector);
+    super(injector,cdr);
     this.formTemplateId = 'container-algorithm-jar';
     this.longDefinition = this.entitiesService.algorithm.longDefinition;
     this.formTitle = this.entitiesService.algorithm.formTitle;
@@ -170,17 +170,9 @@ export class AlgorithmJarFormComponent extends AlgorithmFormEntity implements Af
 
   load() {
     this.loadingStatus = LoadingStatusEnum.Loading;
-
-    /******* VALUE LOADING OVERLAY *******/
-
-    setTimeout(() => {
-
-      this.divHeight = this.overlayHeight.nativeElement.clientHeight;
-
-    }, 0);
-
     this.cdr.detectChanges();
-
+    /******* VALUE LOADING OVERLAY *******/
+    this.divHeight = this.overlayHeight.nativeElement.clientHeight;
     /******* END VALUE LOADING OVERLAY *******/
 
     this.entity = this.algorithm;
@@ -241,7 +233,6 @@ export class AlgorithmJarFormComponent extends AlgorithmFormEntity implements Af
    * Function used to simulate click on choose file
    */
   clickChooseLabel(){
-
     this.btnChooseIsDisabled = true;
     const inputChooseFile = document.getElementById('jarName');
     inputChooseFile.click();

src/app/pages/algorithms/algorithm-forms/input-fields-form/input-fields-form.component.ts

@@ -79,7 +79,7 @@ export class InputFieldsFormComponent extends AlgorithmFormEntity implements OnI
     private algorithmsService: AlgorithmsService,
     private cdr: ChangeDetectorRef
   ) {
-    super(injector);
+    super(injector,cdr);
     this.formTemplateId = 'container-input-field';
     this.longDefinition = this.entitiesService.algorithm.longDefinition;
     this.formTitle = this.entitiesService.algorithm.formTitle;

src/app/pages/algorithms/algorithm-forms/output-fields-form/output-fields-form.component.ts

@@ -85,7 +85,7 @@ export class OutputFieldsFormComponent extends AlgorithmFormEntity implements On
     private algorithmsService: AlgorithmsService,
     private cdr: ChangeDetectorRef
   ) {
-    super(injector);
+    super(injector,cdr);
     this.formTemplateId = 'container-output-field';
     this.longDefinition = this.entitiesService.algorithm.longDefinition;
     this.formTitle = this.entitiesService.algorithm.formTitle;

src/app/pages/algorithms/algorithm-wizard/algorithm-wizard.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation,ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { HytModalService } from '@hyperiot/components';
 import { HytStepperComponent } from '@hyperiot/components/lib/hyt-stepper/hyt-stepper.component';
@@ -54,7 +54,8 @@ export class AlgorithmWizardComponent implements OnInit, AfterViewInit {
       private algorithmsService: AlgorithmsService,
       public entitiesService: EntitiesService,
       private hytModalService: HytModalService,
-      private route: ActivatedRoute) {
+      private route: ActivatedRoute,
+      private cd: ChangeDetectorRef) {
     this.route.params.subscribe(routeParams => {
       this.algorithmId = +(route.snapshot.params.id);
     });
@@ -63,20 +64,19 @@ export class AlgorithmWizardComponent implements OnInit, AfterViewInit {
   ngOnInit() {}
 
   ngAfterViewInit() {
-    setTimeout(() => {// TODO...setimeout 0 to avoid 'expression changed after view checked'. Replace with chenge detection
-      if (this.algorithmId) {
-        this.algorithmsService.findAlgorithm(this.algorithmId).subscribe((a: Algorithm) => {
-          this.currentAlgorithm = a;
-          this.currentInput = JSON.parse(this.currentAlgorithm.baseConfig).input;
-          this.currentOutput = JSON.parse(this.currentAlgorithm.baseConfig).output;
-          this.currentAlgorithmSubject.next(this.currentAlgorithm);
-        });
-      }
-      else {
-        this.algorithmInfoForm.loadingStatus = LoadingStatusEnum.Ready;
-      }
-      this.currentForm = this.algorithmInfoForm;
-    }, 0);
+    this.cd.detectChanges();
+    if (this.algorithmId) {
+      this.algorithmsService.findAlgorithm(this.algorithmId).subscribe((a: Algorithm) => {
+        this.currentAlgorithm = a;
+        this.currentInput = JSON.parse(this.currentAlgorithm.baseConfig).input;
+        this.currentOutput = JSON.parse(this.currentAlgorithm.baseConfig).output;
+        this.currentAlgorithmSubject.next(this.currentAlgorithm);
+      });
+    }
+    else {
+      this.algorithmInfoForm.loadingStatus = LoadingStatusEnum.Ready;
+    }
+    this.currentForm = this.algorithmInfoForm;
   }
 
   getDirty(index: number): boolean {
@@ -150,19 +150,17 @@ export class AlgorithmWizardComponent implements OnInit, AfterViewInit {
       if (this.currentForm instanceof AlgorithmInfoFormComponent) {
         this.currentAlgorithm = ent;
         // wait for step 0 validation (next cicle)
-        setTimeout(() => {
-          this.stepper.next();
-        }, 0);
+        this.cd.detectChanges();
+        this.stepper.next();
       }
     }, (error) => {
       // TODO: ...
     });
   }
 
   openFinishModal() {
-    setTimeout(() => {
-      const modalRef = this.hytModalService.open(AlgorithmWizardReportModalComponent, this.finishData);
-    }, 0);
+    this.cd.detectChanges();
+    const modalRef = this.hytModalService.open(AlgorithmWizardReportModalComponent, this.finishData);
   }
 
   showCancel(): boolean {

src/app/pages/dashboard/widgets-layout/widgets-layout.component.ts

@@ -379,21 +379,9 @@ export class WidgetsLayoutComponent implements OnInit, OnDestroy {
       this.pageStatus = PageStatus.Loading;
       this.lastWindowSize = setTimeout(() => {
         this.loadDashboard();
-        // this.pageStatus = PageStatus.Standard;
       }, 500);
 
     }
-
-    // if (columns !== this.options.maxCols || cell !== this.options.maxCellSize) {
-
-    //   // TODO: Angular-Gridster2 won't apply maxCols option on change (bug??)
-    //   this.options.maxCols = columns;
-    //   if (this.options.maxCols > 1) {
-    //     this.options.mobileBreakpoint = 0;
-    //   }
-    //   this.options.api.optionsChanged();
-
-    // }
   }
 
   // Gridster events/methods

src/app/pages/projects/project-forms/application-form/application-form.component.ts

@@ -65,7 +65,7 @@ export class ApplicationFormComponent extends ProjectFormEntity implements After
     private activatedRoute: ActivatedRoute,
     private cdr: ChangeDetectorRef,
   ) {
-    super(injector);
+    super(injector,cdr);
     this.formTemplateId = 'container-application-form';
     this.longDefinition = this.entitiesService.application.longDefinition;
     this.formTitle = this.entitiesService.application.formTitle;
@@ -101,17 +101,9 @@ export class ApplicationFormComponent extends ProjectFormEntity implements After
 
   load() {
     this.loadingStatus = LoadingStatusEnum.Loading;
-
-    /******* VALUE LOADING OVERLAY *******/
-
-    setTimeout(() => {
-
-      this.divHeight = this.overlayHeight.nativeElement.clientHeight;
-
-    }, 0);
-
     this.cdr.detectChanges();
-
+    /******* VALUE LOADING OVERLAY *******/
+    this.divHeight = this.overlayHeight.nativeElement.clientHeight;
     /******* END VALUE LOADING OVERLAY *******/
 
     this.hDeviceService.findHDevice(this.id).subscribe((d: HDevice) => {

src/app/pages/projects/project-forms/areas-form/areas-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ElementRef, Injector, OnInit, OnDestroy, Output, EventEmitter, AfterViewInit } from '@angular/core';
+import { Component, ViewChild, ElementRef, Injector, OnInit, OnDestroy, Output, EventEmitter, AfterViewInit,ChangeDetectorRef } from '@angular/core';
 import { Router, ActivatedRoute, Event, NavigationStart } from '@angular/router';
 import { HytModalService } from '@hyperiot/components';
 import { ProjectFormEntity, LoadingStatusEnum } from '../project-form-entity';
@@ -52,9 +52,10 @@ export class AreasFormComponent extends ProjectFormEntity implements OnInit, Aft
     private areaService: AreasService,
     private projectService: HprojectsService,
     private modalService: HytModalService,
-    private httpClient: HttpClient
+    private httpClient: HttpClient,
+    private cdr: ChangeDetectorRef
   ) {
-    super(injector);
+    super(injector,cdr);
     this.formTemplateId = 'container-areas-form';
     this.formTitle = $localize`:@@HYT_project_areas:Project Areas`;
     this.projectId = this.activatedRoute.snapshot.parent.params.projectId;
@@ -111,10 +112,9 @@ export class AreasFormComponent extends ProjectFormEntity implements OnInit, Aft
     if (this.areaId === 0) {
       // Add New Area
       this.areaPath.push({ name: 'New', id: 0} as Area);
-      setTimeout(() => {
-        this.resetForm();
-        this.loadingStatus = LoadingStatusEnum.Ready;
-      }, 500);
+      this.cdr.detectChanges();
+      this.resetForm();
+      this.loadingStatus = LoadingStatusEnum.Ready;
       this.editMode = true;
       this.showSave = true;
       this.showCancel = true;

src/app/pages/projects/project-forms/categories-form/add-cetegory-modal/add-cetegory-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, AfterViewInit, ViewEncapsulation,ChangeDetectorRef } from '@angular/core';
 import { HytModal, HytModalService } from '@hyperiot/components';
 import { PageStatus } from 'src/app/pages/projects/models/pageStatus';
 import { AssetscategoriesService } from '@hyperiot/core';
@@ -11,7 +11,7 @@ import { HttpErrorHandlerService } from 'src/app/services/errorHandler/http-erro
   styleUrls: ['./add-cetegory-modal.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class AddCetegoryModalComponent extends HytModal implements OnInit, AfterViewInit {
+export class AddCetegoryModalComponent extends HytModal implements OnInit,AfterViewInit {
 
   pageStatus: PageStatus = PageStatus.Standard;
 
@@ -36,7 +36,8 @@ export class AddCetegoryModalComponent extends HytModal implements OnInit, After
     service: HytModalService,
     private assetCategoryService: AssetscategoriesService,
     private formBuilder: FormBuilder,
-    private errorHandler: HttpErrorHandlerService
+    private errorHandler: HttpErrorHandlerService,
+    private cd: ChangeDetectorRef
   ) {
     super(service);
   }
@@ -48,14 +49,13 @@ export class AddCetegoryModalComponent extends HytModal implements OnInit, After
     this.categoryForm = this.formBuilder.group({});
   }
 
-  ngAfterViewInit(): void {
-
-    setTimeout(() => {
-
-      (document.querySelector('#add-category-modal .hyt-input.mat-input-element') as HTMLElement).focus();
-
-    },0);
-
+  ngAfterViewInit(){
+    this.cd.detectChanges();
+    (
+      document.querySelector(
+        "#add-category-modal .hyt-input.mat-input-element"
+      ) as HTMLElement
+    ).focus();
   }
 
   submitCategory() {

src/app/pages/projects/project-forms/categories-form/categories-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Injector, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, Injector, ViewChild, ElementRef, ViewEncapsulation,ChangeDetectorRef } from '@angular/core';
 import { ProjectFormEntity } from '../project-form-entity';
 import { TreeNodeCategory, HytModalService } from '@hyperiot/components';
 import { AssetscategoriesService, AssetCategory } from '@hyperiot/core';
@@ -33,8 +33,9 @@ export class CategoriesFormComponent extends ProjectFormEntity implements OnInit
     private router: Router,
     private assetCategoriesService: AssetscategoriesService,
     private modalService: HytModalService,
+    private cdr:ChangeDetectorRef 
   ) {
-    super(injector);
+    super(injector,cdr);
     this.formTemplateId= 'container-category-form';
     this.formTitle = $localize`:@@HYT_project_categories:Project Categories`;
     this.hideDelete = true;