Add sorting to server side data binding example.

yohangz · Jan 30, 2019 · d92adc1 · d92adc1
1 parent 07a7f89
commit d92adc1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/...nding/components/example/server-side-data-binding/server-side-data-binding.component.html b/...nding/components/example/server-side-data-binding/server-side-data-binding.component.html
@@ -9,51 +9,59 @@
     [field]="'id'"
     [title]="'ID'"
     [filterable]="true"
+    [sortable]="true"
     [filterPlaceholder]="'Search'"
     [width]="80">
   </ng-data-table-column>
   <ng-data-table-column
     [field]="'orderMethodType'"
     [title]="'Order Method Type'"
     [filterPlaceholder]="'Search'"
+    [sortable]="true"
     [filterable]="true">
   </ng-data-table-column>
   <ng-data-table-column
     [field]="'retailerType'"
     [title]="'Retailer Type'"
     [filterPlaceholder]="'Search'"
+    [sortable]="true"
     [filterable]="true">
   </ng-data-table-column>
   <ng-data-table-column
     [field]="'productLine'"
     [title]="'Product Line'"
     [filterPlaceholder]="'Search'"
+    [sortable]="true"
     [filterable]="true">
   </ng-data-table-column>
   <ng-data-table-column
     [field]="'productType'"
     [title]="'Product Type'"
     [filterPlaceholder]="'Search'"
+    [sortable]="true"
     [filterable]="true">
   </ng-data-table-column>
   <ng-data-table-column
     [field]="'revenue'"
     [title]="'Revenue'"
     [filterPlaceholder]="'Search'"
+    [sortable]="true"
     [filterable]="true"
     [width]="120">
   </ng-data-table-column>
   <ng-data-table-column
     [field]="'quantity'"
     [title]="'Quantity'"
     [filterPlaceholder]="'Search'"
+    [sortable]="true"
     [filterable]="true"
     [width]="80">
   </ng-data-table-column>
   <ng-data-table-column
     [field]="'grossMargin'"
     [title]="'Gross Margin'"
     [filterPlaceholder]="'Search'"
+    [sortable]="true"
     [filterable]="true"
     [width]="100">
   </ng-data-table-column>

diff --git a/src/app/shared/services/data-fetch.service.ts b/src/app/shared/services/data-fetch.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 
-import { DataTableFilterColumn, DataTableRequestParams, DropdownRequestParams } from 'ornamentum';
+import { DataTableFilterColumn, DataTableRequestParams, DataTableSortColumn, DropdownRequestParams } from 'ornamentum';
 
 import { Observable } from 'rxjs';
 
@@ -15,7 +15,8 @@ import fetchData from '../data/sample-data';
  */
 @Injectable()
 export class DataFetchService {
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient) {
+  }
 
   /**
    * Fetch data from client source for demo client side data binding with items property.
@@ -53,6 +54,17 @@ export class DataFetchService {
         }
       });
 
+      if (params.sortColumns && params.sortColumns.length) {
+        const sortExpressions = params.sortColumns.filter((column: DataTableSortColumn) => {
+          return column.sortOrder !== '';
+        });
+        if (sortExpressions.length) {
+          const firstExpression = sortExpressions[0];
+          queryParams = queryParams.append('sortBy', firstExpression.field);
+          queryParams = queryParams.append('sortOrder', firstExpression.sortOrder);
+        }
+      }
+
       return this.http.get<ResourceData<ExampleData[]>>('/api/data', { params: queryParams });
     }
   }