fix: default sort (#1131)

src/app/core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.component.spec.ts

@@ -27,6 +27,7 @@ import { genders } from "../../../../child-dev-project/children/model/genders";
 import { LoggingService } from "../../../logging/logging.service";
 import { MockSessionModule } from "../../../session/mock-session.module";
 import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing";
+import moment from "moment";
 
 describe("EntitySubrecordComponent", () => {
   let component: EntitySubrecordComponent<Entity>;
@@ -95,49 +96,20 @@ describe("EntitySubrecordComponent", () => {
     expect(sortedData).toEqual([first, second, third]);
   });
 
-  it("should apply default sort on first column", async () => {
-    const children = [Child.create("C"), Child.create("A"), Child.create("B")];
-    component.columnsToDisplay = ["name", "projectNumber"];
-    component.records = children;
-    component.ngOnChanges({ records: undefined });
-
-    const sortedChildren = component.recordsDataSource
-      .sortData(component.recordsDataSource.data, component.sort)
-      .map((c) => c.record["name"]);
-
-    expect(sortedChildren).toEqual(["A", "B", "C"]);
-  });
-
-  it("should apply default sort on first column, ordering dates descending", async () => {
-    const children = [Child.create("0"), Child.create("1"), Child.create("2")];
-    children[0].admissionDate = new Date(2010, 1, 1);
-    children[1].admissionDate = new Date(2011, 1, 1);
-    children[2].admissionDate = new Date(2012, 1, 1);
-
-    component.columnsToDisplay = ["admissionDate", "name"];
-    component.records = children;
-    // define the columns to mark "admissionDate" as a Date value
-    component.columns = [
-      {
-        view: "DisplayDate",
-        label: "Admission",
-        id: "admissionDate",
-      },
-      {
-        view: "DisplayText",
-        label: "Name",
-        id: "name",
-      },
-    ];
+  it("should apply default sort on first column and order dates descending", () => {
+    component.columns = ["date", "subject"];
+    component.columnsToDisplay = ["date", "subject"];
+    component.records = [];
+    // Trigger a change with empty columns first as this is what some components do that init data asynchronously
+    component.ngOnChanges({ columns: undefined, records: undefined });
 
+    const oldNote = Note.create(moment().subtract(1, "day").toDate());
+    const newNote = Note.create(new Date());
+    component.records = [oldNote, newNote];
     component.ngOnChanges({ records: undefined });
-    fixture.detectChanges();
-
-    const sortedChildren = component.recordsDataSource
-      .sortData(component.recordsDataSource.data, component.sort)
-      .map((c) => c.record["name"]);
 
-    expect(sortedChildren).toEqual(["2", "1", "0"]);
+    expect(component.recordsDataSource.sort.direction).toBe("desc");
+    expect(component.recordsDataSource.sort.active).toBe("date");
   });
 
   it("should sort standard objects", () => {
@@ -287,18 +259,19 @@ describe("EntitySubrecordComponent", () => {
     component.rowClick({ record: child });
   });
 
-  it("appends a new entity to the end of the records when it's new", async () => {
+  it("should add a new entity to the the table when it's new", async () => {
     const entityFormService = TestBed.inject(EntityFormService);
     spyOn(entityFormService, "saveChanges").and.resolveTo();
+    component.records = [];
     const entity = new Entity();
     await component.save({ record: entity }, true);
-    expect(component.records).toHaveSize(1);
+    expect(component.recordsDataSource.data).toHaveSize(1);
   });
 
   it("does not change the size of it's records when not saving a new record", async () => {
     const entity = new Entity();
-    component.records.push(entity);
+    component.records = [entity];
     await component.save({ record: entity }, false);
-    expect(component.records).toHaveSize(1);
+    expect(component.recordsDataSource.data).toHaveSize(1);
   });
 });

src/app/core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.component.ts

@@ -66,8 +66,18 @@ export class EntitySubrecordComponent<T extends Entity>
     });
     this.filteredColumns = this._columns.filter((col) => !col.hideFromTable);
   }
+
   /** data to be displayed */
-  @Input() records: Array<T> = [];
+  @Input()
+  set records(value: Array<T>) {
+    this._records = value;
+    this.recordsDataSource.data = this._records.map((rec) => {
+      return {
+        record: rec,
+      };
+    });
+  }
+  private _records: Array<T> = [];
   _columns: FormFieldConfig[] = [];
   filteredColumns: FormFieldConfig[] = [];
 
@@ -132,22 +142,22 @@ export class EntitySubrecordComponent<T extends Entity>
     if (changes.hasOwnProperty("columns")) {
       this.initFormGroups();
     }
-    if (changes.hasOwnProperty("records")) {
+    if (changes.hasOwnProperty("records") && this._records.length > 0) {
       this.initFormGroups();
-      this.initDefaultSort();
       if (this.columnsToDisplay.length < 2) {
         this.setupTable();
       }
+      this.initDefaultSort();
     }
     if (changes.hasOwnProperty("columnsToDisplay")) {
       this.mediaSubscription.unsubscribe();
     }
   }
 
   private initFormGroups() {
-    if (this.records.length > 0 || this.newRecordFactory) {
+    if (this._records.length > 0 || this.newRecordFactory) {
       const entity =
-        this.records.length > 0 ? this.records[0] : this.newRecordFactory();
+        this._records.length > 0 ? this._records[0] : this.newRecordFactory();
       try {
         this.entityFormService.extendFormFieldConfig(
           this._columns,
@@ -161,11 +171,6 @@ export class EntitySubrecordComponent<T extends Entity>
         this.loggingService.warn(`Error creating form definitions: ${err}`);
       }
     }
-    this.recordsDataSource.data = this.records.map((rec) => {
-      return {
-        record: rec,
-      };
-    });
   }
 
   private initDefaultSort() {
@@ -226,7 +231,7 @@ export class EntitySubrecordComponent<T extends Entity>
         row.record
       );
       if (isNew) {
-        this.records.unshift(row.record);
+        this._records.unshift(row.record);
         this.recordsDataSource.data = [{ record: row.record }].concat(
           this.recordsDataSource.data
         );
@@ -261,18 +266,18 @@ export class EntitySubrecordComponent<T extends Entity>
             this.removeFromDataTable(row);
             break;
           case RemoveResult.UNDONE:
-            this.records.unshift(row.record);
+            this._records.unshift(row.record);
             this.initFormGroups();
         }
       });
   }
 
   private removeFromDataTable(row: TableRow<T>) {
-    const index = this.records.findIndex(
+    const index = this._records.findIndex(
       (a) => a.getId() === row.record.getId()
     );
     if (index > -1) {
-      this.records.splice(index, 1);
+      this._records.splice(index, 1);
       this.initFormGroups();
     }
   }