fix(favorite-column): Favorite column is not modifying the datasource…

… anymore. Fixes #540
dynatrace-oss · Feb 13, 2020 · f286db9 · f286db9
1 parent 1cf6639
commit f286db9
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 19 deletions.
diff --git a/components/table/src/simple-columns/favorite-column.ts b/components/table/src/simple-columns/favorite-column.ts
@@ -61,7 +61,6 @@ export class DtFavoriteColumn<T> extends DtSimpleColumnBase<T> {
    * datasource using the predefined name.
    */
   _toggleFavorite(data: T): void {
-    data[this.name] = !data[this.name];
     this.favoriteToggled.emit(data);
   }
 }
diff --git a/components/table/src/simple-columns/simple-column.spec.ts b/components/table/src/simple-columns/simple-column.spec.ts
@@ -740,6 +740,7 @@ describe('DtTable SimpleColumns', () => {
       <dt-favorite-column
         name="favorite"
         [sortable]="isSortable"
+        (favoriteToggled)="toggleFavorite($event)"
       ></dt-favorite-column>
       <dt-simple-text-column name="host"></dt-simple-text-column>
       <dt-simple-number-column name="cpu" label="Cpu"></dt-simple-number-column>
@@ -877,6 +878,18 @@ class TestSimpleColumnsApp implements AfterViewInit {
       return 'warning';
     }
   }
+
+  toggleFavorite(toggledRow: any): void {
+    // Modify a data clone and assign the changed state at the end
+    // to notify change detection about the dataChange in an array.
+    const modifiedData = [...this.data];
+    for (const row of modifiedData) {
+      if (row === toggledRow) {
+        row.favorite = !row.favorite;
+      }
+    }
+    this.data = modifiedData;
+  }
 }
 
 @Component({

diff --git a/libs/examples/src/table/table-favorite-column-example/table-favorite-column-example.html b/libs/examples/src/table/table-favorite-column-example/table-favorite-column-example.html
@@ -2,7 +2,7 @@
   <dt-favorite-column
     name="favorite"
     label="Favorite"
-    (change)="doSomething()"
+    (favoriteToggled)="toggleFavorite($event)"
   ></dt-favorite-column>
   <dt-simple-text-column name="host" label="Host"></dt-simple-text-column>
   <ng-container dtColumnDef="memory" dtColumnAlign="number">

diff --git a/libs/examples/src/table/table-favorite-column-example/table-favorite-column-example.ts b/libs/examples/src/table/table-favorite-column-example/table-favorite-column-example.ts
@@ -18,17 +18,19 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 
 import { DtSort, DtTableDataSource } from '@dynatrace/barista-components/table';
 
+interface HostRow {
+  favorite: boolean;
+  host: string;
+  memoryPerc: number;
+  memoryTotal: number;
+}
+
 @Component({
   selector: 'dt-example-table-favorite-column',
   templateUrl: './table-favorite-column-example.html',
 })
 export class DtExampleTableFavoriteColumn implements OnInit {
-  data: Array<{
-    favorite: boolean;
-    host: string;
-    memoryPerc: number;
-    memoryTotal: number;
-  }> = [
+  data: Array<HostRow> = [
     {
       favorite: true,
       host: 'et-demo-2-win4',
@@ -81,7 +83,15 @@ export class DtExampleTableFavoriteColumn implements OnInit {
     this.dataSource.sort = this.sortable;
   }
 
-  doSomething(): void {
-    // noop
+  toggleFavorite(toggledRow: HostRow): void {
+    // Modify a data clone and assign the changed state at the end
+    // to notify change detection about the dataChange in an array.
+    const modifiedData = [...this.data];
+    for (const row of modifiedData) {
+      if (row === toggledRow) {
+        row.favorite = !row.favorite;
+      }
+    }
+    this.data = modifiedData;
   }
 }
diff --git a/...able/table-favorite-column-no-header-example/table-favorite-column-no-header-example.html b/...able/table-favorite-column-no-header-example/table-favorite-column-no-header-example.html
@@ -2,7 +2,7 @@
   <dt-favorite-column
     name="favorite"
     sortable="false"
-    (change)="doSomething($event)"
+    (favoriteToggled)="toggleFavorite($event)"
   ></dt-favorite-column>
   <dt-simple-text-column
     name="host"

diff --git a/.../table/table-favorite-column-no-header-example/table-favorite-column-no-header-example.ts b/.../table/table-favorite-column-no-header-example/table-favorite-column-no-header-example.ts
@@ -18,17 +18,19 @@ import { Component } from '@angular/core';
 
 import { DtTableDataSource } from '@dynatrace/barista-components/table';
 
+interface HostRow {
+  favorite: boolean;
+  host: string;
+  memoryPerc: number;
+  memoryTotal: number;
+}
+
 @Component({
   selector: 'dt-example-table-favorite-column-no-header',
   templateUrl: './table-favorite-column-no-header-example.html',
 })
 export class DtExampleTableFavoriteColumnNoHeader {
-  data: Array<{
-    favorite: boolean;
-    host: string;
-    memoryPerc: number;
-    memoryTotal: number;
-  }> = [
+  data: Array<HostRow> = [
     {
       favorite: true,
       host: 'et-demo-2-win4',
@@ -73,7 +75,15 @@ export class DtExampleTableFavoriteColumnNoHeader {
     );
   }
 
-  doSomething(_event: Event): void {
-    // noop
+  toggleFavorite(toggledRow: HostRow): void {
+    // Modify a data clone and assign the changed state at the end
+    // to notify change detection about the dataChange in an array.
+    const modifiedData = [...this.data];
+    for (const row of modifiedData) {
+      if (row === toggledRow) {
+        row.favorite = !row.favorite;
+      }
+    }
+    this.data = modifiedData;
   }
 }