WEB-954: Migrate Subscription management : loans

Author: alberto-art3ch

src/app/loans/create-loans-account/create-loans-account.component.ts

@@ -12,11 +12,13 @@ import {
   AfterViewInit,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   QueryList,
   ViewChild,
   ViewChildren,
   inject
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
 
 /** Custom Services */
@@ -62,6 +64,7 @@ import { Dates } from 'app/core/utils/dates';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CreateLoansAccountComponent extends LoanProductBaseComponent implements AfterViewInit {
+  private readonly destroyRef = inject(DestroyRef);
   private route = inject(ActivatedRoute);
   private loansService = inject(LoansService);
   private settingsService = inject(SettingsService);
@@ -110,12 +113,12 @@ export class CreateLoansAccountComponent extends LoanProductBaseComponent implem
   constructor() {
     super();
     this.loanProductsBasicDetails = [];
-    this.route.data.subscribe(
-      (data: { loansAccountTemplate: any; loanProductsBasicDetails: LoanProductBasicDetails[] }) => {
+    this.route.data
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((data: { loansAccountTemplate: any; loanProductsBasicDetails: LoanProductBasicDetails[] }) => {
         this.loanProductsBasicDetails = data.loanProductsBasicDetails;
         this.loansAccountTemplate = data.loansAccountTemplate;
-      }
-    );
+      });
   }
 
   ngAfterViewInit() {

src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.ts

@@ -6,7 +6,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -15,7 +16,7 @@ import {
   MatDialogActions,
   MatDialogClose
 } from '@angular/material/dialog';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 
@@ -34,6 +35,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LoansAccountAddCollateralDialogComponent implements OnInit {
+  private readonly destroyRef = inject(DestroyRef);
   dialogRef = inject<MatDialogRef<LoansAccountAddCollateralDialogComponent>>(MatDialogRef);
   data = inject(MAT_DIALOG_DATA);
   private formBuilder = inject(UntypedFormBuilder);
@@ -81,16 +83,28 @@ export class LoansAccountAddCollateralDialogComponent implements OnInit {
    * Subscribe to Form controls value changes
    */
   buildDependencies() {
-    this.addCollateralForm.controls.collateral.valueChanges.subscribe((collateral: any) => {
-      this.collateralData = collateral;
-      this.maxQuantity = collateral.quantity;
-    });
+    this.addCollateralForm.controls.collateral.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((collateral: any) => {
+        this.collateralData = collateral;
+        this.maxQuantity = collateral.quantity;
+      });
 
-    this.addCollateralForm.controls.quantity.valueChanges.subscribe((quantity: any) => {
-      this.addCollateralForm.patchValue({
-        totalValue: this.collateralData.basePrice * quantity,
-        totalCollateralValue: (this.collateralData.basePrice * this.collateralData.pctToBase * quantity) / 100
+    this.addCollateralForm.controls.quantity.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((quantity: any) => {
+        if (!this.collateralData || quantity === null || quantity === '') {
+          this.addCollateralForm.patchValue({ totalValue: '', totalCollateralValue: '' }, { emitEvent: false });
+          return;
+        }
+
+        const basePrice = Number(this.collateralData.basePrice) || 0;
+        const pctToBase = Number(this.collateralData.pctToBase) || 0;
+        const qty = Number(quantity) || 0;
+        this.addCollateralForm.patchValue({
+          totalValue: basePrice * qty,
+          totalCollateralValue: (basePrice * pctToBase * qty) / 100
+        });
       });
-    });
   }
 }

src/app/loans/edit-loans-account/edit-loans-account.component.ts

@@ -6,7 +6,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { ChangeDetectionStrategy, Component, ViewChild, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, ViewChild, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
 import { LoansService } from '../loans.service';
 import { LoansAccountDetailsStepComponent } from '../loans-account-stepper/loans-account-details-step/loans-account-details-step.component';
@@ -47,6 +48,7 @@ import { LoanProductBaseComponent } from 'app/products/loan-products/common/loan
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class EditLoansAccountComponent extends LoanProductBaseComponent {
+  private readonly destroyRef = inject(DestroyRef);
   private route = inject(ActivatedRoute);
   private dateUtils = inject(Dates);
   private loansService = inject(LoansService);
@@ -79,8 +81,9 @@ export class EditLoansAccountComponent extends LoanProductBaseComponent {
     this.loanProductService.initialize(LoanProductBaseComponent.resolveProductTypeDefault(this.route, 'loan'));
 
     this.loanId = this.route.snapshot.params['loanId'];
-    this.route.data.subscribe(
-      (data: { loansAccountAndTemplate: any; loanProductsBasicDetails: LoanProductBasicDetails[] }) => {
+    this.route.data
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((data: { loansAccountAndTemplate: any; loanProductsBasicDetails: LoanProductBasicDetails[] }) => {
         this.loansAccountAndTemplate = data.loansAccountAndTemplate;
         if (this.loanProductService.isLoanProduct) {
           this.loansAccountProductTemplate = data.loansAccountAndTemplate;
@@ -92,8 +95,7 @@ export class EditLoansAccountComponent extends LoanProductBaseComponent {
           );
         }
         this.loanProductsBasicDetails = data.loanProductsBasicDetails;
-      }
-    );
+      });
   }
 
   /**

src/app/loans/glim-account/create-glim-account/create-glim-account.component.ts

@@ -7,7 +7,16 @@
  */
 
 /** Angular Imports */
-import { ChangeDetectionStrategy, Component, QueryList, ViewChild, ViewChildren, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+  inject
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { I18nService } from 'app/core/i18n/i18n.service';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -51,6 +60,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CreateGlimAccountComponent {
+  private readonly destroyRef = inject(DestroyRef);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private loansService = inject(LoansService);
@@ -97,10 +107,12 @@ export class CreateGlimAccountComponent {
    * @param {ClientsService} clientService Client Service
    */
   constructor() {
-    this.route.data.subscribe((data: { loansAccountTemplate: any; groupsData: any }) => {
-      this.loansAccountTemplate = data.loansAccountTemplate;
-      this.dataSource = data.groupsData.activeClientMembers;
-    });
+    this.route.data
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((data: { loansAccountTemplate: any; groupsData: any }) => {
+        this.loansAccountTemplate = data.loansAccountTemplate;
+        this.dataSource = data.groupsData.activeClientMembers;
+      });
   }
 
   /**

src/app/loans/glim-account/glim-account.component.ts

@@ -6,7 +6,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { ChangeDetectionStrategy, Component, OnInit, ViewChild, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, OnInit, ViewChild, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import {
@@ -53,6 +54,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GlimAccountComponent implements OnInit {
+  private readonly destroyRef = inject(DestroyRef);
   private route = inject(ActivatedRoute);
   dialog = inject(MatDialog);
 
@@ -81,7 +83,7 @@ export class GlimAccountComponent implements OnInit {
    * @param {MatDialog} dialog Dialog reference.
    */
   constructor() {
-    this.route.data.subscribe((data: { glimData: any }) => {
+    this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { glimData: any }) => {
       this.glimOverviewData = data.glimData;
     });
   }

src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts

@@ -11,13 +11,14 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   OnInit,
   Input,
   Output,
   EventEmitter,
-  OnDestroy,
   inject
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { SettingsService } from 'app/settings/settings.service';
@@ -26,8 +27,7 @@ import { TranslateService } from '@ngx-translate/core';
 /** Custom Services */
 import { LoansService } from '../../loans.service';
 import { Commons } from 'app/core/utils/commons';
-import { takeUntil } from 'rxjs/operators';
-import { ReplaySubject, Subject } from 'rxjs';
+import { ReplaySubject } from 'rxjs';
 import { MatTooltip } from '@angular/material/tooltip';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { AsyncPipe } from '@angular/common';
@@ -62,7 +62,8 @@ import { LoanProductBaseComponent } from 'app/products/loan-products/common/loan
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class LoansAccountDetailsStepComponent extends LoanProductBaseComponent implements OnInit, OnDestroy {
+export class LoansAccountDetailsStepComponent extends LoanProductBaseComponent implements OnInit {
+  private readonly destroyRef = inject(DestroyRef);
   private formBuilder = inject(UntypedFormBuilder);
   private loansService = inject(LoansService);
   private route = inject(ActivatedRoute);
@@ -106,8 +107,6 @@ export class LoansAccountDetailsStepComponent extends LoanProductBaseComponent i
   protected productData: ReplaySubject<string[]> = new ReplaySubject<string[]>(1);
   /** control for the filter select */
   protected filterFormCtrl: UntypedFormControl = new UntypedFormControl('');
-  /** Subject that emits when the component has been destroyed. */
-  protected _onDestroy = new Subject<void>();
 
   productSelected: LoanProductBasicDetails | null = null;
 
@@ -167,17 +166,12 @@ export class LoansAccountDetailsStepComponent extends LoanProductBaseComponent i
         this.getProductTemplate(false);
       }
     }
-    this.filterFormCtrl.valueChanges.pipe(takeUntil(this._onDestroy)).subscribe(() => {
+    this.filterFormCtrl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
       this.searchItem();
     });
     this.productData.next(this.productList.slice());
   }
 
-  ngOnDestroy(): void {
-    this._onDestroy.next();
-    this._onDestroy.complete();
-  }
-
   searchItem(): void {
     if (this.productList) {
       const search: string = this.filterFormCtrl.value.toLowerCase();