fix: added and deleted todos are correctly updated in the table

Aam-Digital · Feb 28, 2023 · 05b3860 · 05b3860
1 parent 0c49249
commit 05b3860
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 33 deletions.
diff --git a/...re/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.component.spec.ts b/...re/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.component.spec.ts
@@ -274,7 +274,6 @@ describe("EntitySubrecordComponent", () => {
   it("should create a new entity and open a dialog on default when clicking create", () => {
     const child = new Child();
     component.newRecordFactory = () => child;
-    component.ngOnInit();
     const dialog = TestBed.inject(FormDialogService);
 
     component.create();
@@ -298,7 +297,7 @@ describe("EntitySubrecordComponent", () => {
     spyOn(entityMapper, "receiveUpdates").and.returnValue(entityUpdates);
     component.newRecordFactory = () => new Entity();
     component.records = [];
-    component.ngOnInit();
+    component.ngOnChanges({});
 
     const entity = new Entity();
     entityUpdates.next({ entity: entity, type: "new" });
@@ -312,7 +311,7 @@ describe("EntitySubrecordComponent", () => {
     spyOn(entityMapper, "receiveUpdates").and.returnValue(entityUpdates);
     const entity = new Entity();
     component.records = [entity];
-    component.ngOnInit();
+    component.ngOnChanges({});
 
     expect(component.recordsDataSource.data).toEqual([{ record: entity }]);
 
@@ -388,7 +387,7 @@ describe("EntitySubrecordComponent", () => {
     tick();
     component.records = [child];
     component.filter = { "gender.id": genders[1].id } as any;
-    component.ngOnInit();
+    component.ngOnChanges({});
 
     expect(component.recordsDataSource.data).toEqual([{ record: child }]);
 

diff --git a/...pp/core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.component.ts b/...pp/core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.component.ts
@@ -3,7 +3,6 @@ import {
   EventEmitter,
   Input,
   OnChanges,
-  OnInit,
   Output,
   SimpleChanges,
   ViewChild,
@@ -94,9 +93,7 @@ export interface TableRow<T extends Entity> {
   ],
   standalone: true,
 })
-export class EntitySubrecordComponent<T extends Entity>
-  implements OnChanges, OnInit
-{
+export class EntitySubrecordComponent<T extends Entity> implements OnChanges {
   @Input() isLoading: boolean;
 
   @Input() clickMode: "popup" | "navigate" | "none" = "popup";
@@ -145,6 +142,7 @@ export class EntitySubrecordComponent<T extends Entity>
   /** data displayed in the template's table */
   recordsDataSource = new MatTableDataSource<TableRow<T>>();
 
+  private updateSubscription: Subscription;
   private mediaSubscription: Subscription = Subscription.EMPTY;
   private screenWidth: ScreenSize | undefined = undefined;
 
@@ -218,31 +216,6 @@ export class EntitySubrecordComponent<T extends Entity>
       .map((record) => ({ record }));
   }
 
-  ngOnInit() {
-    if (this.entityConstructorIsAvailable()) {
-      this.entityMapper
-        .receiveUpdates(this.getEntityConstructor())
-        .pipe(untilDestroyed(this))
-        .subscribe(({ entity, type }) => {
-          if (type === "new") {
-            this.addToTable(entity);
-          } else if (type === "remove") {
-            this.removeFromDataTable(entity);
-          } else if (
-            type === "update" &&
-            !this._records.find((rec) => rec.getId() === entity.getId())
-          ) {
-            this.addToTable(entity);
-          }
-
-          if (!this.predicate(entity)) {
-            // hide after a short delay to give a signal in the UI why records disappear by showing the changed values first
-            setTimeout(() => this.initDataSource(), 5000);
-          }
-        });
-    }
-  }
-
   private entityConstructorIsAvailable(): boolean {
     return this._records.length > 0 || !!this.newRecordFactory;
   }
@@ -281,6 +254,7 @@ export class EntitySubrecordComponent<T extends Entity>
     if (changes.hasOwnProperty("columnsToDisplay")) {
       this.mediaSubscription.unsubscribe();
     }
+    this.listenToEntityUpdates();
   }
 
   private initFormGroups() {
@@ -334,6 +308,31 @@ export class EntitySubrecordComponent<T extends Entity>
     return { active: sortBy, direction: sortDirection };
   }
 
+  private listenToEntityUpdates() {
+    if (!this.updateSubscription && this.entityConstructorIsAvailable()) {
+      this.updateSubscription = this.entityMapper
+        .receiveUpdates(this.getEntityConstructor())
+        .pipe(untilDestroyed(this))
+        .subscribe(({ entity, type }) => {
+          if (type === "new") {
+            this.addToTable(entity);
+          } else if (type === "remove") {
+            this.removeFromDataTable(entity);
+          } else if (
+            type === "update" &&
+            !this._records.find((rec) => rec.getId() === entity.getId())
+          ) {
+            this.addToTable(entity);
+          }
+
+          if (!this.predicate(entity)) {
+            // hide after a short delay to give a signal in the UI why records disappear by showing the changed values first
+            setTimeout(() => this.initDataSource(), 5000);
+          }
+        });
+    }
+  }
+
   edit(row: TableRow<T>) {
     if (this.screenWidthObserver.isDesktop()) {
       if (!row.formGroup) {