fix(components/ag-grid): row delete confirmation event handling (#3078)

[AB#3239317](https://dev.azure.com/blackbaud/f565481a-7bc9-4083-95d5-4f953da6d499/_workitems/edit/3239317)
blackbaud · Jan 31, 2025 · 9761f52 · 9761f52
1 parent b9b6c7d
commit 9761f52
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 47 deletions.
diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-row-delete.directive.spec.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-row-delete.directive.spec.ts
@@ -1,4 +1,9 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing';
 import { SKY_STACKING_CONTEXT, SkyScrollableHostService } from '@skyux/core';
 
 import { BehaviorSubject, Observable, of } from 'rxjs';
@@ -158,26 +163,26 @@ describe('SkyAgGridRowDeleteDirective', () => {
       ).toBe(2);
     });
 
-    it('should respond dataset changes', async () => {
+    it('should respond dataset changes', fakeAsync(() => {
       setupTest();
-      await fixture.whenStable();
+      tick(16);
 
       fixture.componentInstance.rowDeleteIds = ['0', '2'];
       fixture.detectChanges();
-      await fixture.whenStable();
+      tick(16);
 
       fixture.componentInstance.removeFirstItem();
 
       fixture.detectChanges();
-      await fixture.whenStable();
+      tick(16);
 
       expect(fixture.componentInstance.rowDeleteIds).toEqual(['2']);
       expect(document.querySelector('#row-delete-ref-0')).toBeNull();
       expect(document.querySelector('#row-delete-ref-2')).not.toBeNull();
       expect(
         document.querySelectorAll('.sky-inline-delete-standard').length,
       ).toBe(1);
-    });
+    }));
   });
 
   it('should cancel row delete elements correctly via them being removed from the id array', async () => {

diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-row-delete.directive.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/ag-grid-row-delete.directive.ts
@@ -2,7 +2,6 @@ import {
   AfterContentInit,
   AfterViewInit,
   ChangeDetectorRef,
-  ContentChild,
   Directive,
   ElementRef,
   EnvironmentInjector,
@@ -11,6 +10,8 @@ import {
   OnDestroy,
   Output,
   ViewContainerRef,
+  contentChild,
+  effect,
   inject,
 } from '@angular/core';
 import {
@@ -25,7 +26,13 @@ import {
 
 import { AgGridAngular } from 'ag-grid-angular';
 import { IRowNode } from 'ag-grid-community';
-import { BehaviorSubject, Subject } from 'rxjs';
+import {
+  BehaviorSubject,
+  Subject,
+  animationFrames,
+  debounce,
+  merge,
+} from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { SkyAgGridRowDeleteComponent } from './ag-grid-row-delete.component';
@@ -82,7 +89,7 @@ export class SkyAgGridRowDeleteDirective
           overlay.attachTemplate(
             this.#rowDeleteComponent.inlineDeleteTemplateRef,
             {
-              $implicit: this.agGrid.api.getRowNode(id),
+              $implicit: this.agGrid()?.api.getRowNode(id),
               tableWidth: () =>
                 this.#elementRef.nativeElement.querySelector('.sky-ag-grid')
                   .offsetWidth,
@@ -161,8 +168,7 @@ export class SkyAgGridRowDeleteDirective
 
   #rowDeleteConfigs: SkyAgGridRowDeleteConfig[] = [];
 
-  @ContentChild(AgGridAngular)
-  public agGrid: AgGridAngular | undefined;
+  public agGrid = contentChild(AgGridAngular);
 
   #ngUnsubscribe = new Subject<void>();
   #rowDeleteComponent: SkyAgGridRowDeleteComponent | undefined;
@@ -182,6 +188,7 @@ export class SkyAgGridRowDeleteDirective
   readonly #scrollableHostService = inject(SkyScrollableHostService);
   readonly #stackingContext = inject(SKY_STACKING_CONTEXT, { optional: true });
   readonly #viewContainerRef = inject(ViewContainerRef);
+  readonly #viewInit = new Subject<void>();
 
   constructor() {
     this.#hasStackingContext = !!this.#stackingContext;
@@ -193,6 +200,26 @@ export class SkyAgGridRowDeleteDirective
           this.#zIndex.next(zIndex);
         });
     }
+    effect(() => {
+      const agGrid = this.agGrid();
+      if (agGrid) {
+        merge(
+          agGrid.filterChanged,
+          agGrid.firstDataRendered,
+          agGrid.gridReady,
+          agGrid.rowDataUpdated,
+          agGrid.sortChanged,
+          this.#viewInit,
+        )
+          .pipe(
+            takeUntil(this.#ngUnsubscribe),
+            debounce(() => animationFrames()),
+          )
+          .subscribe(() => {
+            this.#updateRowDeleteStates();
+          });
+      }
+    });
   }
 
   public ngAfterContentInit(): void {
@@ -203,26 +230,6 @@ export class SkyAgGridRowDeleteDirective
         viewContainerRef: this.#viewContainerRef,
       },
     ).instance;
-
-    if (this.agGrid) {
-      this.agGrid.rowDataUpdated
-        .pipe(takeUntil(this.#ngUnsubscribe))
-        .subscribe(() => {
-          this.#updateRowDeleteStates();
-        });
-
-      this.agGrid.sortChanged
-        .pipe(takeUntil(this.#ngUnsubscribe))
-        .subscribe(() => {
-          this.#updateRowDeleteStates();
-        });
-
-      this.agGrid.filterChanged
-        .pipe(takeUntil(this.#ngUnsubscribe))
-        .subscribe(() => {
-          this.#updateRowDeleteStates();
-        });
-    }
   }
 
   public ngAfterViewInit(): void {
@@ -234,6 +241,7 @@ export class SkyAgGridRowDeleteDirective
           this.#clipPath.next(clipPath);
         });
     }
+    this.#viewInit.next();
   }
 
   public ngOnDestroy(): void {
@@ -291,26 +299,21 @@ export class SkyAgGridRowDeleteDirective
 
   #destroyRowDelete(id: string): void {
     const rowDeleteContents = this.#rowDeleteContents[id];
-
-    /* sanity check */
-    /* istanbul ignore else */
-    if (rowDeleteContents) {
-      rowDeleteContents.affixer.destroy();
-      this.#overlayService.close(rowDeleteContents.overlay);
-      delete this.#rowDeleteContents[id];
-      this.#rowDeleteConfigs = this.#rowDeleteConfigs.filter(
-        (config) => config.id !== id,
-      );
-      this.#rowDeleteIdsInternal = this.rowDeleteIds?.filter(
-        (arrayId) => arrayId !== id,
-      );
-      this.rowDeleteIdsChange.emit(this.#rowDeleteIdsInternal);
-    }
+    rowDeleteContents?.affixer.destroy();
+    this.#overlayService.close(rowDeleteContents?.overlay);
+    delete this.#rowDeleteContents[id];
+    this.#rowDeleteConfigs = this.#rowDeleteConfigs.filter(
+      (config) => config.id !== id,
+    );
+    this.#rowDeleteIdsInternal = this.rowDeleteIds?.filter(
+      (arrayId) => arrayId !== id,
+    );
+    this.rowDeleteIdsChange.emit(this.#rowDeleteIdsInternal);
   }
 
   #updateRowDeleteStates(): void {
     this.#rowDeleteConfigs.forEach((config: SkyAgGridRowDeleteConfig) => {
-      if (!this.agGrid?.api.getRowNode(config.id)) {
+      if (!this.agGrid()?.api.getRowNode(config.id)) {
         this.#destroyRowDelete(config.id);
       } else {
         // We must reaffix things when the data changes because the rows rerender and the previous element that the delete was affixed

diff --git a/...mponents/ag-grid/src/lib/modules/ag-grid/fixtures/ag-grid-row-delete.component.fixture.ts b/...mponents/ag-grid/src/lib/modules/ag-grid/fixtures/ag-grid-row-delete.component.fixture.ts
@@ -110,6 +110,7 @@ export class SkyAgGridRowDeleteFixtureComponent implements OnInit {
 
   public changeToLongData(): void {
     this.gridData = SKY_AG_GRID_LONG_DATA;
+    this.gridApi?.setGridOption('rowData', this.gridData);
   }
 
   public filterName(): Promise<void> {
@@ -159,6 +160,7 @@ export class SkyAgGridRowDeleteFixtureComponent implements OnInit {
 
   public removeFirstItem(): void {
     this.gridData = this.gridData.slice(1);
+    this.gridApi?.setGridOption('rowData', this.gridData);
   }
 
   public sortName(): Promise<void> {