fix(sort): Fix default table sorting when the sort direction is set. …

…Closes APM-305714.
dynatrace-oss · Jun 2, 2021 · 37e5cab · 37e5cab
1 parent 521ff67
commit 37e5cab
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 15 deletions.
diff --git a/libs/barista-components/table/README.md b/libs/barista-components/table/README.md
@@ -206,12 +206,12 @@ You can set the following inputs and outputs on the `dtSort` directive.
 
 #### Inputs
 
-| Name              | Type              | Default | Description                                                                                              |
-| ----------------- | ----------------- | ------- | -------------------------------------------------------------------------------------------------------- |
-| `dtSortActive`    | `string`          |         | The ID of the most recent active column.                                                                 |
-| `dtSortDirection` | `DtSortDirection` | `asc`   | The sort direction of the currently active column.                                                       |
-| `dtSortDisabled`  | `boolean`         | `false` | Whether sorting is disabled for the entire table.                                                        |
-| `dtSortStart`     | `DtSortDirection` |         | Sort direction in which a column is initially sorted. May be overriden by the DtSortHeader's sort start. |
+| Name              | Type              | Default | Description                                                                                                                              |
+| ----------------- | ----------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `dtSortActive`    | `string`          |         | The ID of the most recent active column.                                                                                                 |
+| `dtSortDirection` | `DtSortDirection` | `asc`   | The sort direction of the currently active colum, which can be used for initially sorting it.                                            |
+| `dtSortDisabled`  | `boolean`         | `false` | Whether sorting is disabled for the entire table.                                                                                        |
+| `dtSortStart`     | `DtSortDirection` |         | Sort direction in which a column is initially sorted when the user interacts with it. May be overriden by the DtSortHeader's sort start. |
 
 #### Outputs
 

diff --git a/libs/barista-components/table/src/sort/sort.spec.ts b/libs/barista-components/table/src/sort/sort.spec.ts
@@ -141,6 +141,26 @@ describe('DtSort', () => {
       expect(checkCellsSorted(component.cells, false, 'column_c')).toBeTruthy();
     });
 
+    it('should initially sort using the given sort direction', () => {
+      component.dataSource = DATA_SOURCE;
+      component.start = 'asc';
+      component.active = 'column_a';
+      component.direction = 'desc';
+      fixture.detectChanges();
+
+      let sortHeaderElement = fixture.nativeElement.querySelector('#column_a');
+      expect(checkCellsSorted(component.cells, true, 'column_a')).toBeTruthy();
+      expect(sortHeaderElement.getAttribute('aria-sort')).toBe('descending');
+
+      component.active = 'column_b';
+      component.direction = 'asc';
+      fixture.detectChanges();
+
+      sortHeaderElement = fixture.nativeElement.querySelector('#column_b');
+      expect(checkCellsSorted(component.cells, true, 'column_b')).toBeTruthy();
+      expect(sortHeaderElement.getAttribute('aria-sort')).toBe('ascending');
+    });
+
     it('should apply the isSorted to appended rows as well', () => {
       component.dataSource = DATA_SOURCE;
       fixture.detectChanges();
@@ -431,6 +451,7 @@ function checkCellsSorted(
 
   return filteredCells.every((cell) => cell._isSorted === sorted);
 }
+
 /**
  * Performs a sequence of sorting on a single column to see if the sort directions are
  * consistent with expectations. Detects any changes in the fixture to reflect any changes in

diff --git a/libs/barista-components/table/src/sort/sort.ts b/libs/barista-components/table/src/sort/sort.ts
@@ -158,10 +158,12 @@ export class DtSort
     }
 
     // If active is bound and being changed after initialization
-    // we need to update the sorter.
-    if (isDefined(changes.active) && !changes.active.firstChange) {
+    // we need to update the sorter. We also need to initially sort
+    // the active column if a direction has been provided.
+    if (isDefined(changes.active) && this.active && this.direction) {
       this.sort(this.active, this.direction);
     }
+
     this._stateChanges.next();
   }
 

diff --git a/libs/examples/src/table/table-sorting-example/table-sorting-example.ts b/libs/examples/src/table/table-sorting-example/table-sorting-example.ts
@@ -27,20 +27,20 @@ export class DtExampleTableSorting {
   disableSorting = false;
 
   dataSource = [
-    {
-      host: 'et-demo-2-win4',
-      cpu: 30,
-      memoryPerc: 38,
-      memoryTotal: 5830000000,
-      traffic: 98700000,
-    },
     {
       host: 'et-demo-2-win3',
       cpu: 26,
       memoryPerc: 46,
       memoryTotal: 6000000000,
       traffic: 62500000,
     },
+    {
+      host: 'et-demo-2-win4',
+      cpu: 30,
+      memoryPerc: 38,
+      memoryTotal: 5830000000,
+      traffic: 98700000,
+    },
     {
       host: 'docker-host2',
       cpu: 25.4,