chore(docs): Adding Documentation for sorting by date (#1225)

Teradata · Aug 23, 2018 · 9f47043 · 9f47043
1 parent 95425ef
commit 9f47043
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 0 deletions.
diff --git a/src/app/components/components/data-table/data-table.component.html b/src/app/components/components/data-table/data-table.component.html
@@ -169,6 +169,93 @@ <h4 class="mat-subheading-2">with formatting, configurable width columns and tem
     </mat-tab-group>
   </mat-card-content>
 </mat-card>
+<mat-card>
+  <mat-card-content>
+    <h3 class="mat-title">Data Table with custom sort</h3>
+    <h4 class="mat-subheading-2">sorting on a date column</h4>
+    <mat-divider></mat-divider>
+    <mat-tab-group mat-stretch-tabs>
+      <mat-tab>
+        <ng-template matTabLabel>Demo</ng-template>
+        <td-data-table
+          [data]="dateSortData"
+          [sortable]="true"
+          [sortBy]="'date'"
+          [sortOrder]="sortOrder"
+          (sortChange)="sortDates($event)"
+          [columns]="dateColumns">
+          <ng-template tdDataTableTemplate="img" let-value="value">
+            <img [src]="value"/>
+          </ng-template>
+        </td-data-table>
+      </mat-tab>
+      <mat-tab>
+        <ng-template matTabLabel>Code</ng-template>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-data-table
+              [data]="dateSortData"
+              [sortable]="true"
+              [sortBy]="'date'"
+              [sortOrder]="sortOrder"
+              (sortChange)="sortDates($event)"
+              [columns]="dateColumns">
+              <ng-template tdDataTableTemplate="img" let-value="value">
+                <img [src]="value"/>
+              </ng-template>
+            </td-data-table>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            import { ITdDataTableColumn } from '@covalent/core/data-table';
+            ...
+            export class Demo implements OnInit {
+              dateColumns: ITdDataTableColumn[] = [
+                { name: 'date', label: 'Date', sortable: true, width: 275 },
+                { name: 'first_name', label: 'First Name', sortable: false, width: 150 },
+                { name: 'last_name', label: 'Last Name', filter: true, sortable: false },
+              ];
+
+              ...
+
+              sortDates(sortEvent: ITdDataTableSortChangeEvent): void {
+                this.dateSortOrder = sortEvent.order;
+                this.filterDateData();
+              }
+
+              ...
+
+              filterDateData(): void {
+                this.dateSortData = Array.from(this.dateSortData); // Change the array reference to trigger OnPush
+                this.dateSortData = this.dateSortData.sort((a: any, b: any) => {
+                  let direction: number = 0;
+                  if (this.dateSortOrder === TdDataTableSortingOrder.Descending) {
+                    direction = 1;
+                  } else if (this.dateSortOrder === TdDataTableSortingOrder.Ascending) {
+                    direction = -1;
+                  }
+                  if (a.date < b.date) {
+                    return direction;
+                  } else if (a.date > b.date) {
+                    return -direction;
+                  } else {
+                    return direction;
+                  }
+                });
+              }
+            }
+          ]]>
+        </td-highlight>
+        <p>Data:</p>
+        <td-highlight lang="json" [content]="dateSortData | json">
+        </td-highlight>
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card-content>
+</mat-card>
 <mat-card>
   <mat-card-content>
     <h3 class="mat-title">Data Table with components</h3>

diff --git a/src/app/components/components/data-table/data-table.component.ts b/src/app/components/components/data-table/data-table.component.ts
@@ -98,8 +98,15 @@ export class DataTableDemoComponent implements OnInit {
     { name: 'balance', label: 'Balance', numeric: true, format: DECIMAL_FORMAT },
   ];
 
+  dateColumns: ITdDataTableColumn[] = [
+    { name: 'date', label: 'Date', sortable: true, width: 275 },
+    { name: 'first_name', label: 'First Name', sortable: false, width: 150 },
+    { name: 'last_name', label: 'Last Name', filter: true, sortable: false },
+  ];
+
   data: any[];
   basicData: any[];
+  dateSortData: any[];
   selectable: boolean = true;
   clickable: boolean = false;
   multiple: boolean = true;
@@ -116,6 +123,7 @@ export class DataTableDemoComponent implements OnInit {
   pageSize: number = 50;
   sortBy: string = 'first_name';
   sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
+  dateSortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending;
 
   constructor(private _dataTableService: TdDataTableService,
               private _internalDocsService: InternalDocsService,
@@ -136,6 +144,14 @@ export class DataTableDemoComponent implements OnInit {
     this.data = await this._internalDocsService.queryData().toPromise();
     this.basicData = this.data.slice(0, 10);
     this.filter();
+
+    this.dateSortData = this.data.slice(0, 5);
+    this.dateSortData = this.dateSortData.map((row: any) => {
+      let randomDate: Date = new Date(new Date(2012, 0, 1).getTime() + Math.random() * (new Date().getTime() - new Date(2012, 0, 1).getTime()));
+      row.date = randomDate;
+      return row;
+    });
+    this.filterDateData();
   }
 
   sort(sortEvent: ITdDataTableSortChangeEvent): void {
@@ -144,6 +160,11 @@ export class DataTableDemoComponent implements OnInit {
     this.filter();
   }
 
+  sortDates(sortEvent: ITdDataTableSortChangeEvent): void {
+    this.dateSortOrder = sortEvent.order;
+    this.filterDateData();
+  }
+
   search(searchTerm: string): void {
     this.searchTerm = searchTerm;
     this.pagingBar.navigateToPage(1);
@@ -173,6 +194,25 @@ export class DataTableDemoComponent implements OnInit {
     this.filteredData = newData;
   }
 
+  filterDateData(): void {
+    this.dateSortData = Array.from(this.dateSortData); // Change the array reference to trigger OnPush
+    this.dateSortData = this.dateSortData.sort((a: any, b: any) => {
+      let direction: number = 0;
+      if (this.dateSortOrder === TdDataTableSortingOrder.Descending) {
+        direction = 1;
+      } else if (this.dateSortOrder === TdDataTableSortingOrder.Ascending) {
+        direction = -1;
+      }
+      if (a.date < b.date) {
+        return direction;
+      } else if (a.date > b.date) {
+        return -direction;
+      } else {
+        return direction;
+      }
+    });
+  }
+
   toggleTooltips(): void {
     if (this.columns[0].tooltip) {
       this.columns.forEach((c: any) => delete c.tooltip);