OData datasource implementation and relative example

src/app/pages/examples/examples.module.ts

@@ -13,6 +13,7 @@ import { AdvancedExampleConfirmComponent } from './various/advanced-example-conf
 import { AdvancedExamplesCustomEditorComponent } from './custom-edit-view/advanced-example-custom-editor.component';
 import { AdvancedExamplesTypesComponent } from './custom-edit-view/advanced-example-types.component';
 import { AdvancedExampleServerComponent } from './server/advanced-example-server.component';
+import { ODataExampleServerComponent } from './server/odata-example-server.component';
 import { BasicExampleLoadComponent } from './server/basic-example-load.component';
 import { BasicExampleMultiSelectComponent } from './various/basic-example-multi-select.component';
 import { CustomEditorComponent } from './custom-edit-view/custom-editor.component';
@@ -35,6 +36,7 @@ const EXAMPLES_COMPONENTS = [
   AdvancedExamplesCustomEditorComponent,
   AdvancedExamplesTypesComponent,
   AdvancedExampleServerComponent,
+  ODataExampleServerComponent,
   BasicExampleLoadComponent,
   BasicExampleMultiSelectComponent,
   BasicExampleSourceComponent,

src/app/pages/examples/server/odata-example-server.component.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { ODataDataSource } from '../../../../../src/ng2-smart-table';
+
+@Component({
+  selector: 'odata-example-server',
+  template: `
+    <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
+  `,
+})
+export class ODataExampleServerComponent {
+
+  settings = {
+    columns: {
+      OrderID: {
+        title: 'ID',
+        filter: false,
+      },
+      CustomerID: {
+        title: 'CustomerID',
+      },
+      OrderDate: {
+        title: 'Date',
+        filter: false,
+      },
+      ShipAddress: {
+        title: 'Address',
+      },
+    },
+  };
+
+  source: ODataDataSource;
+
+  constructor(http: HttpClient) {
+    this.source = new ODataDataSource(http, 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders');
+  }
+}

src/app/pages/examples/server/server-examples.component.html

@@ -16,3 +16,11 @@ <h3><a id="server" class="anchor" href="#server" aria-hidden="true"><span aria-h
   <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/server/advanced-example-server.component.ts" target="_blank">Demo Source</a>
 <advanced-example-server></advanced-example-server>
 </div>
+<h3><a id="server" class="anchor" href="#server" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>OData Server Data Source Example</h3>
+<p>
+  An example on how to load data came from an OData Endpoint:
+</p>
+<div class="with-source">
+  <a class="source" href="https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/server/odata-example-server.component.ts" target="_blank">Demo Source</a>
+<odata-example-server></odata-example-server>
+</div>

src/ng2-smart-table/index.ts

@@ -4,3 +4,4 @@ export { DefaultEditor, Editor } from './components/cell/cell-editors/default-ed
 export { Cell } from './lib/data-set/cell';
 export { LocalDataSource } from './lib/data-source/local/local.data-source';
 export { ServerDataSource } from './lib/data-source/server/server.data-source';
+export { ODataDataSource } from './lib/data-source/server/odata.data-source';

src/ng2-smart-table/lib/data-source/server/odata.data-source.ts

@@ -0,0 +1,100 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+import { LocalDataSource } from '../local/local.data-source';
+
+import { map } from 'rxjs/operators';
+
+export class ODataDataSource extends LocalDataSource {
+
+  protected lastRequestCount: number = 0;
+
+  constructor(protected http: HttpClient, protected endpoint: string) {
+    super();
+  }
+
+  count(): number {
+    return this.lastRequestCount;
+  }
+
+  getElements(): Promise<any> {
+    return this.requestElements()
+      .pipe(map(res => {
+        this.lastRequestCount = this.extractTotalFromResponse(res);
+        this.data = this.extractDataFromResponse(res);
+        return this.data;
+      })).toPromise();
+  }
+
+  /**
+   * Extracts array of data from server response
+   * @param res
+   * @returns {any}
+   */
+  protected extractDataFromResponse(res: any): Array<any> {
+    return res.body.value;
+  }
+
+  /**
+   * Extracts total rows count from the server response
+   * Looks for the count in the heders first, then in the response body
+   * @param res
+   * @returns {any}
+   */
+  protected extractTotalFromResponse(res: any): number {
+    return res.body['@odata.count'];
+  }
+
+  protected requestElements(): Observable<any> {
+    let httpParams = this.createRequesParams();
+    return this.http.get(this.endpoint, { params: httpParams, observe: 'response' });
+  }
+
+  protected createRequesParams(): HttpParams {
+    let httpParams = new HttpParams().append('$count', 'true');
+    httpParams = this.addSortRequestParams(httpParams);
+    httpParams = this.addFilterRequestParams(httpParams);
+    return this.addPagerRequestParams(httpParams);
+  }
+
+  protected addSortRequestParams(httpParams: HttpParams): HttpParams {
+    if (this.sortConf) {
+      this.sortConf.forEach((fieldConf) => {
+        httpParams = httpParams.set('$orderby', fieldConf.field + ' ' + fieldConf.direction);
+      });
+    }
+
+    return httpParams;
+  }
+
+  protected addFilterRequestParams(httpParams: HttpParams): HttpParams {
+
+    if (this.filterConf.filters) {
+
+      var filter = '';
+
+      this.filterConf.filters.forEach((fieldConf: any) => {
+        if (fieldConf['search']) {
+          if (filter)
+            filter += ' and ';
+          filter += 'contains(' + fieldConf['field'] + ', \'' + fieldConf['search'] + '\')';
+        }
+      });
+
+      httpParams = httpParams.set('$filter', filter);
+
+    }
+
+    return httpParams;
+  }
+
+  protected addPagerRequestParams(httpParams: HttpParams): HttpParams {
+
+    if (this.pagingConf && this.pagingConf['page'] && this.pagingConf['perPage']) {
+      httpParams = httpParams.set('$skip', String((this.pagingConf['page'] - 1) * this.pagingConf['perPage']));
+      httpParams = httpParams.set('$top', this.pagingConf['perPage']);
+    }
+
+    return httpParams;
+  }
+}