From be754dd10c94307e7523a2b0e9b102efb9526e3b Mon Sep 17 00:00:00 2001
From: Jeremy Smartt <jeremysmartt@users.noreply.github.com>
Date: Thu, 23 Aug 2018 09:40:17 -0700
Subject: [PATCH] chore(docs): Adding Documentation for sorting by date (#1225)

---
 .../data-table/data-table.component.html      | 87 +++++++++++++++++++
 .../data-table/data-table.component.ts        | 40 +++++++++
 2 files changed, 127 insertions(+)

diff --git a/src/app/components/components/data-table/data-table.component.html b/src/app/components/components/data-table/data-table.component.html
index ad7bcce375..3077758436 100644
--- 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
index 0c89e4ea95..7448e9a23a 100644
--- a/src/app/components/components/data-table/data-table.component.ts
+++ b/src/app/components/components/data-table/data-table.component.ts
@@ -97,8 +97,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;
@@ -114,6 +121,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,
@@ -134,6 +142,14 @@ export class DataTableDemoComponent implements OnInit {
     this.data = await toPromise.call(this._internalDocsService.queryData());
     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 {
@@ -142,6 +158,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.filter();
@@ -170,6 +191,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);