feat(fr-data-table): Add (dataTableAction) and deprecate some output …

…events
chloe463 · Jul 29, 2017 · b46569f · b46569f
1 parent 5e59464
commit b46569f
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 39 deletions.
diff --git a/src/app/data-table/data-table-footer/data-table-footer.component.ts b/src/app/data-table/data-table-footer/data-table-footer.component.ts
@@ -31,7 +31,12 @@ export class FrDataTableFooterComponent {
     return this._paginationInfo;
   }
 
+  /**
+   * @deprecated
+   * TODO: Remove in v0.7.0
+   */
   public invokePaginationAction(event: FrDataTableEvent): void {
+    console.warn('@Output() paginationAction of fr-data-table-footer is deprecated. Use @Output() dataTableAction of fr-data-table instead');
     this.paginationAction.emit(event);
   }
 

diff --git a/src/app/data-table/data-table-header/data-table-header.component.ts b/src/app/data-table/data-table-header/data-table-header.component.ts
@@ -40,11 +40,21 @@ export class FrDataTableHeaderComponent {
     return this._otherActionKeys;
   }
 
+  /**
+   * @deprecated
+   * TODO: Remove in v0.7.0
+   */
   public invokeUpdateAction(event: FrDataTableEvent): void {
+    console.warn('(updateAction) of fr-data-table-header is deprecated. Use (dataTableAction) of fr-data-table instead');
     this.updateAction.emit(event);
   }
 
+  /**
+   * @deprecated
+   * TODO: Remove in v0.7.0
+   */
   public invokeOtherAction(event: FrDataTableEvent): void {
+    console.warn('(otherAction) of fr-data-table-header is deprecated. Use (dataTableAction) of fr-data-table instead');
     this.otherAction.emit(event);
   }
 

diff --git a/src/app/data-table/data-table/data-table.component.ts b/src/app/data-table/data-table/data-table.component.ts
@@ -149,20 +149,35 @@ export class FrDataTableComponent implements AfterContentInit {
   public updateRowAction(updateAction: string, changeListState = false): void {
     const checkedRows = this._extraceCheckedRows();
     const event = new FrDataTableEvent(updateAction, checkedRows, this.rowsPerPage, this.paginationInfo.page);
-    this.headerComponent.invokeUpdateAction(event);
+    // TODO: Delete headerComponent.invokeUpdateAction in v0.7.0
+    if (this.dataTableAction) {
+      this.dataTableAction.emit(event);
+    } else {
+      this.headerComponent.invokeUpdateAction(event);
+    }
   }
 
   public otherAction(key: string): void {
     const checkedRows = this._extraceCheckedRows();
     const event = new FrDataTableEvent(key, checkedRows, this.rowsPerPage, this.paginationInfo.page);
-    this.headerComponent.invokeOtherAction(event);
     this.actionListState = 'hidden';
+    if (this.dataTableAction) {
+      this.dataTableAction.emit(event);
+    } else {
+      // TODO: Delete headerComponent.invokeUpdateAction in v0.7.0
+      this.headerComponent.invokeUpdateAction(event);
+    }
   }
 
   public paginationAction(action: string): void {
     const checkedRows = this._extraceCheckedRows();
     const event = new FrDataTableEvent(action, checkedRows, this.rowsPerPage, this.paginationInfo.page);
-    this.footerComponent.invokePaginationAction(event);
+    if (this.dataTableAction) {
+      this.dataTableAction.emit(event);
+    } else {
+      // TODO: Delete footerComponent.invokePaginationAction in v0.7.0
+      this.footerComponent.invokePaginationAction(event);
+    }
   }
 
   public toggleOtherActionList(): void {

diff --git a/src/demo/data-table-demo.component.ts b/src/demo/data-table-demo.component.ts
@@ -1,50 +1,63 @@
 import { Component } from '@angular/core';
 
+import { FrDataTableEvent } from '../app/data-table/data-table/data-table.component';
+
 @Component({
   selector: 'data-table-demo',
   template: `
-    <fr-data-table [selectable]="true">
-      <fr-data-table-header title="Header"
-        (updateAction)="updateAction($event)"
-        [otherActionKeys]="dataTableOtherActionKeys"
-        (otherAction)="otherAction($event)"></fr-data-table-header>
-      <fr-data-table-columns [columns]="columns"></fr-data-table-columns>
-      <fr-data-table-rows [rows]="rows"></fr-data-table-rows>
-      <fr-data-table-footer
-        [paginationInfo]="{ totalRows: 100, rowsPerPageValues: [10, 30, 50], page: 1, rowsPerPage: 30 }"
-        (paginationAction)="paginationAction($event)"></fr-data-table-footer>
+    <!-- Table Container -->
+    <fr-data-table
+      [selectable]="dataTableInfo.selectable"
+      [sortable]="dataTableInfo.sortable"
+      (dataTableAction)="dataTableAction($event)">
+
+      <!-- Header component which contains title and action buttons -->
+      <fr-data-table-header [title]="dataTableInfo.title" [otherActionKeys]="dataTableInfo.actionKeys"></fr-data-table-header>
+
+      <!-- Define columns -->
+      <fr-data-table-columns [columns]="dataTableInfo.columns"></fr-data-table-columns>
+
+      <!-- Set Data rows -->
+      <fr-data-table-rows [rows]="dataTableInfo.rows"></fr-data-table-rows>
+
+      <!-- Footer component which contains pagination info and actions -->
+      <fr-data-table-footer [paginationInfo]="dataTableInfo.paginationInfo" ></fr-data-table-footer>
     </fr-data-table>
   `
 })
 export class DataTableDemoComponent {
 
-  dataTableOtherActionKeys = [
-    { key: 'action1', label: 'Action1' },
-    { key: 'action2', label: 'Action2' }
-  ];
-  columns = [
-    { key: 'column1', name: 'Column1 (number)', type: 'number' },
-    { key: 'column2', name: 'Column2 (string)', type: 'string' },
-    { key: 'column3', name: 'Column3 (number)', type: 'number' },
-    { key: 'column4', name: 'Column4 (string)', type: 'string' },
-    { key: 'column5', name: 'Column5 (number)', type: 'number' }
-  ];
-  rows = [
-    { column1: 1, column2: 'value1', column3: 100, column4: '2017-03-01 00:00:00', column5: 999 },
-    { column1: 2, column2: 'value2', column3: 100, column4: '2017-03-01 00:00:00', column5: 987 },
-    { column1: 3, column2: 'value3', column3: 100, column4: '2017-03-01 00:00:00', column5: 989 }
-  ];
-
-  public updateAction(event) {
-    console.log(event);
-  }
-
-  public otherAction(event) {
-    console.log(event);
-  }
+  public dataTableInfo = {
+    selectable: true,
+    sortable: true,
+    title: 'DataTableTitle',
+    actionKeys: [
+      { key: 'action1', label: 'Action1' },
+      { key: 'action2', label: 'Action2' },
+      { key: 'action3', label: 'Action3-has-long-keys' }
+    ],
+    columns: [
+      { key: 'column1', name: 'Column1 (number)', type: 'number' },
+      { key: 'column2', name: 'Column2 (string)', type: 'string' },
+      { key: 'column3', name: 'Column3 (number)', type: 'number' },
+      { key: 'column4', name: 'Column4 (string)', type: 'string' },
+      { key: 'column5', name: 'Column5 (number)', type: 'number' }
+    ],
+    rows: [
+      { column1: 1, column2: 'value1', column3: 100, column4: '2017-03-01 00:00:00', column5: 999 },
+      { column1: 2, column2: 'value2', column3: 100, column4: '2017-03-01 00:00:00', column5: 987 },
+      { column1: 3, column2: 'value3', column3: 100, column4: '2017-03-01 00:00:00', column5: 989 }
+    ],
+    paginationInfo: {
+      totalRows: 100,
+      rowsPerPageValues: [10, 30, 50],
+      page: 1,
+      rowsPerPage: 30
+    }
+  };
 
-  public paginationAction(event) {
-    console.log(event);
+  public dataTableAction($event: FrDataTableEvent) {
+    console.log($event);
   }
 
 }