WEB-624 refactor: remove hard-coded back-routing for component reload (#3045)

improve

improve

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.ts

@@ -7,7 +7,7 @@
  */
 
 /** Angular Imports */
-import { Component, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort, MatSortHeader } from '@angular/material/sort';
@@ -26,9 +26,12 @@ import {
 } from '@angular/material/table';
 import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil, switchMap } from 'rxjs/operators';
 
 /** Services Import */
 import { CollectionsService } from '../collections.service';
+import { DataReloadService } from 'app/core/services/data-reload.service';
 
 /** Custom Dialogs */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -70,34 +73,30 @@ import { OrganizationService } from 'app/organization/organization.service';
     MatPaginator
   ]
 })
-export class IndividualCollectionSheetComponent implements OnInit {
+export class IndividualCollectionSheetComponent implements OnInit, OnDestroy {
   private formBuilder = inject(UntypedFormBuilder);
   private collectionsService = inject(CollectionsService);
   private organizationService = inject(OrganizationService);
   private route = inject(ActivatedRoute);
   private dateUtils = inject(Dates);
-  dialog = inject(MatDialog);
+  private dialog = inject(MatDialog);
   private router = inject(Router);
   private settingsService = inject(SettingsService);
+  private dataReloadService = inject(DataReloadService);
 
-  /** Offices Data */
   officesData: any;
-  /** Loan Officer Data */
   loanOfficerData: any = [];
-  /** Loans Data */
   loansData: any = [];
-  /** Savings Data */
   savingsData: any = [];
-  /** Minimum Date allowed. */
   minDate = new Date(2000, 0, 1);
-  /** Maximum Date allowed. */
   maxDate = new Date();
-  /** Collection Sheet form. */
   collectionSheetForm: UntypedFormGroup;
-  /** Toggles b/w form and table */
   isCollapsed = false;
-  /** Collections Sheet Data */
   collectionSheetData: any;
+
+  private reloadContext = 'individual-collection-sheet';
+  private destroy$ = new Subject<void>();
+  private buildDependencies$ = new Subject<void>();
   /** checks and stores the local storage values */
   Success: boolean;
   /** Bulk Disbursement Transactions Data */
@@ -151,13 +150,19 @@ export class IndividualCollectionSheetComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @param {SettingsService} settingsService Settings Service
    */
-  constructor() {
-    this.route.data.subscribe((data: { officesData: any }) => {
+  ngOnInit(): void {
+    this.route.data.pipe(takeUntil(this.destroy$)).subscribe((data: { officesData: any }) => {
       this.officesData = data.officesData;
     });
-  }
 
-  ngOnInit() {
+    // Subscribe to reload events
+    this.dataReloadService
+      .getReloadObservable(this.reloadContext)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.refreshData();
+      });
+
     this.maxDate = this.settingsService.businessDate;
     if (localStorage.getItem('Success')) {
       localStorage.removeItem('Success');
@@ -170,6 +175,16 @@ export class IndividualCollectionSheetComponent implements OnInit {
     this.buildDependencies();
   }
 
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+    this.buildDependencies$.next();
+    this.buildDependencies$.complete();
+    if (this.reloadContext) {
+      this.dataReloadService.cleanup(this.reloadContext);
+    }
+  }
+
   /**
    * Creates the Individual Collection Sheet Form
    */
@@ -191,11 +206,19 @@ export class IndividualCollectionSheetComponent implements OnInit {
    * Checks for the office id value change
    */
   buildDependencies() {
-    this.collectionSheetForm.get('officeId').valueChanges.subscribe((value: any) => {
-      this.organizationService.getStaffs(value).subscribe((response: any) => {
+    // Complete previous subscription before creating new one
+    this.buildDependencies$.next();
+
+    this.collectionSheetForm
+      .get('officeId')
+      .valueChanges.pipe(
+        takeUntil(this.buildDependencies$),
+        takeUntil(this.destroy$),
+        switchMap((value: any) => this.organizationService.getStaffs(value))
+      )
+      .subscribe((response: any) => {
         this.loanOfficerData = response;
       });
-    });
   }
 
   /**
@@ -418,11 +441,30 @@ export class IndividualCollectionSheetComponent implements OnInit {
   }
 
   /**
-   * Refetches data for the component
-   * TODO: Replace by a custom reload component instead of hard-coded back-routing.
+   * Triggers a reload event for the collection sheet.
    */
-  reload() {
-    const url: string = this.router.url;
-    this.router.navigateByUrl(`/collections`, { skipLocationChange: true }).then(() => this.router.navigate([url]));
+  reload(): void {
+    this.dataReloadService.triggerReload(this.reloadContext);
+  }
+
+  /**
+   * Refreshes the collection sheet data when reload is triggered.
+   */
+  private refreshData(): void {
+    // Re-create the form and rebuild dependencies
+    this.isCollapsed = false;
+    this.collectionSheetData = null;
+
+    // Clear bulk transaction arrays to prevent stale data
+    this.bulkRepaymentTransactions = [];
+    this.bulkSavingsDueTransactions = [];
+    this.bulkDisbursementTransactionsData = {};
+
+    // Clear table data arrays
+    this.loansData = [];
+    this.savingsData = [];
+
+    this.createCollectionSheetForm();
+    this.buildDependencies();
   }
 }