new feature: remote data table

package.json

@@ -35,8 +35,9 @@
     "leaflet": "^0.7.7",
     "leaflet-map": "^0.2.1",
     "lodash": "^4.12.0",
-    "ng2-bootstrap": "^1.0.16",
+    "ng2-bootstrap": "^1.0.17",
     "ng2-ckeditor": "^1.0.3",
+    "ng2-table": "^1.0.2",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.6",
     "tether": "^1.2.4",

src/app/pages/tables/components/basicTables/basicTables.component.ts

@@ -1,4 +1,6 @@
 import {Component, ViewEncapsulation} from '@angular/core';
+import {AsyncPipe} from "@angular/common";
+import {Observable} from "rxjs/Rx";
 
 import {BasicTablesService} from './basicTables.service';
 import {BaCard} from '../../../../theme/components';
@@ -8,17 +10,35 @@ import {CondensedTable} from './components/condensedTable';
 import {StripedTable} from './components/stripedTable';
 import {ContextualTable} from './components/contextualTable';
 import {ResponsiveTable} from './components/responsiveTable';
+import {RemoteDataTable} from "./components/remoteDataTable/remoteDataTable.component";
+import {RemoteDataService} from "./components/remoteDataTable/remoteDataTable.service";
+import {Data} from "./components/remoteDataTable/remoteData.class";
 
 @Component({
   selector: 'basic-tables',
+  pipes: [AsyncPipe],
+  encapsulation: ViewEncapsulation.None,
+  directives: [
+    BaCard,
+    HoverTable,
+    BorderedTable,
+    CondensedTable,
+    StripedTable,
+    ContextualTable,
+    ResponsiveTable,
+    RemoteDataTable
+  ],
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard, HoverTable, BorderedTable, CondensedTable, StripedTable, ContextualTable, ResponsiveTable],
   styles: [require('./basicTables.scss')],
   template: require('./basicTables.html'),
-  providers: [BasicTablesService]
+  providers: [BasicTablesService, RemoteDataService]
 })
 export class BasicTables {
+    public data:Observable<Data[]>;
+
+  constructor(private _DataService: RemoteDataService) { };
+
+  ngOnInit() { this.getData(); };
+  getData() { this.data= this._DataService.getData(); };
 
-  constructor() {
-  }
 }

src/app/pages/tables/components/basicTables/basicTables.html

@@ -36,5 +36,18 @@
       </ba-card>
     </div>
   </div>
-
+  <div class="row">
+    <div class="col-md-12">
+      <ba-card title="Total"
+               baCardClass="with-scroll table-panel">
+        <remote-data-table [data] = "data | async"></remote-data-table>
+      </ba-card>
+    </div>
+    <div class="col-md-12">
+      <ba-card title="Total"
+               baCardClass="with-scroll table-panel">
+        <remote-data-ng2-table [datang2] = "datang2 | async"></remote-data-ng2-table>
+      </ba-card>
+    </div>
+  </div>
 </div>

src/app/pages/tables/components/basicTables/components/remoteDataNg2Table/index.ts

@@ -0,0 +1 @@
+export * from './remoteDataNg2Table.component';

src/app/pages/tables/components/basicTables/components/remoteDataNg2Table/remoteDataNg2.class.ts

@@ -0,0 +1,7 @@
+export class DataNg2 {
+  constructor(
+    public id: number,
+    public name: string,
+    public description: string
+  ) { }
+}

src/app/pages/tables/components/basicTables/components/remoteDataNg2Table/remoteDataNg2Table.component.ts

@@ -0,0 +1,111 @@
+import {Component, OnInit, Input} from '@angular/core';
+import {DataNg2} from "./remoteDataNg2.class";
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgIf} from '@angular/common';
+import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
+import {NG_TABLE_DIRECTIVES} from "ng2-table/ng2-table";
+
+@Component({
+  selector: 'remote-data-ng2-table',
+  template: require('./dataTableSimple.html'),
+  directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES, NgClass, NgIf, CORE_DIRECTIVES, FORM_DIRECTIVES]
+})
+export class RemoteDataNg2Table implements OnInit {
+
+  @Input('datang2') datang2: DataNg2[] = [];
+
+  //
+  ngOnChanges(changes:any):void {
+    this.datang2 = changes.datang2.currentValue ? changes.datang2.currentValue : [];
+    this.onChangeTable(this.config);
+  };
+
+  public rows:Array<any> = [];
+  public columns:Array<any> = [
+    {title: 'id', name: 'id'},
+    {title: 'name', name: 'name'},
+    {title: 'description', name: 'description'}
+  ];
+  public page:number = 1;
+  public itemsPerPage:number = 10;
+  public maxSize:number = 5;
+  public numPages:number = 1;
+  public length:number = 0;
+
+  public config:any = {
+    paging: false,
+    sorting: {columns: this.columns},
+    filtering: {filterString: '', columnName: 'id'}
+  };
+
+  public constructor() {
+    this.length = this.datang2.length;
+  }
+
+  public ngOnInit():void {
+    this.onChangeTable(this.config);
+  }
+
+  public changePage(page:any, data:Array<any> = this.datang2):Array<any> {
+    let start = (page.page - 1) * page.itemsPerPage;
+    let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
+    return data.slice(start, end);
+  }
+
+  public changeSort(datang2:any, config:any):any {
+    if ((!config.sorting) || (!datang2.length)) {
+      return data;
+    }
+    let columns = this.config.sorting.columns || [];
+    let columnName:string = void 0;
+    let sort:string = void 0;
+
+    for (let i = 0; i < columns.length; i++) {
+      if (columns[i].sort !== '') {
+        columnName = columns[i].name;
+        sort = columns[i].sort;
+      }
+    }
+
+    if (!columnName) {
+      return datang2;
+    }
+
+      // simple sorting
+    return datang2.sort((previous:any, current:any) => {
+      if (previous[columnName] > current[columnName]) {
+        return sort === 'desc' ? -1 : 1;
+      } else if (previous[columnName] < current[columnName]) {
+        return sort === 'asc' ? -1 : 1;
+      }
+      return 0;
+    });
+  }
+
+  public changeFilter(data:any, config:any):any {
+    if ((!config.filtering) || (!data.length)) {
+      return data;
+    }
+
+    console.log(this.config.filtering.filterString);
+    console.log(config.filtering.columnName);
+    console.log(data[0][config.filtering.columnName]);
+    let filteredData:Array<any> = data.filter((item:any) =>
+      String(item[config.filtering.columnName]).match(this.config.filtering.filterString));
+
+    return filteredData;
+  }
+
+  public onChangeTable(config:any, page:any = {page: this.page, itemsPerPage: this.itemsPerPage}):any {
+    if (config.filtering) {
+      Object.assign(this.config.filtering, config.filtering);
+    }
+    if (config.sorting) {
+      Object.assign(this.config.sorting, config.sorting);
+    }
+
+    let filteredData = this.changeFilter(this.datang2, this.config);
+    let sortedData = this.changeSort(filteredData, this.config);
+    this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData;
+    this.length = sortedData.length;
+  }
+}

src/app/pages/tables/components/basicTables/components/remoteDataNg2Table/remoteDataNg2Table.html

@@ -0,0 +1,7 @@
+<div class="vertical-scroll-max">
+    <ng-table class="table-responsive"
+              [config]="config.sorting"
+              (tableChanged)="onChangeTable(config)"
+              [rows]="rows" [columns]="columns">
+    </ng-table>
+</div>

src/app/pages/tables/components/basicTables/components/remoteDataNg2Table/remoteDataNg2Table.service.ts

@@ -0,0 +1,37 @@
+import { Injectable }     from '@angular/core';
+import { Http, Response } from '@angular/http';
+import {Observable} from 'rxjs/Rx';
+import 'rxjs/add/operator/catch'
+import {DataNg2} from "./remoteDataNg2.class";
+
+
+@Injectable()
+export class RemoteDataNg2Service {
+
+  private urlData = '/assets/json/data.json';
+
+  constructor(private http:Http) {
+  }
+
+  getData():Observable<DataNg2[]> {
+    return this.http.get(this.urlData)
+    .map(this.extractData)
+    .catch(this.handleError);
+  }
+
+  private extractData(res: Response) {
+    let body = res.json();
+    return body.result || { };
+  }
+  private handleError (error: any) {
+    // In a real world app, we might use a remote logging infrastructure
+    // We'd also dig deeper into the error to get a better message
+    let errMsg = (error.message) ? error.message :
+      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
+    console.error(errMsg); // log to console instead
+    return Observable.throw(errMsg);
+  }
+
+
+
+}

src/app/pages/tables/components/basicTables/components/remoteDataTable/index.ts

@@ -0,0 +1 @@
+export * from './remoteDataTable.component';

src/app/pages/tables/components/basicTables/components/remoteDataTable/remoteData.class.ts

@@ -0,0 +1,7 @@
+export class Data {
+  constructor(
+    public id: number,
+    public name: string,
+    public description: string
+  ) { }
+}

src/app/pages/tables/components/basicTables/components/remoteDataTable/remoteDataTable.component.ts

@@ -0,0 +1,14 @@
+import {Component, Input} from '@angular/core';
+import {Data} from "./remoteData.class";
+
+@Component({
+  selector: 'remote-data-table',
+  template: require('./remoteDataTable.html'),
+})
+export class RemoteDataTable {
+
+  @Input('data') data: Data[] = [];
+
+  constructor() {
+  }
+}

src/app/pages/tables/components/basicTables/components/remoteDataTable/remoteDataTable.html

@@ -0,0 +1,18 @@
+<div class="vertical-scroll-max">
+  <table class="table table-striped">
+    <thead>
+    <tr>
+      <th class="table-id">Id</th>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let item of data">
+      <td class="table-id">{{ item.id }}</td>
+      <td>{{ item.name }}</td>
+      <td>{{ item.description }}</td>
+    </tr>
+    </tbody>
+  </table>
+</div>

src/app/pages/tables/components/basicTables/components/remoteDataTable/remoteDataTable.service.ts

@@ -0,0 +1,37 @@
+import { Injectable }     from '@angular/core';
+import { Http, Response } from '@angular/http';
+import {Observable} from 'rxjs/Rx';
+import 'rxjs/add/operator/catch'
+import {Data} from "./remoteData.class";
+
+
+@Injectable()
+export class RemoteDataService {
+
+  private urlData = '/assets/json/data.json';
+
+  constructor(private http:Http) {
+  }
+
+  getData():Observable<Data[]> {
+    return this.http.get(this.urlData)
+    .map(this.extractData)
+    .catch(this.handleError);
+  }
+
+  private extractData(res: Response) {
+    let body = res.json();
+    return body.result || { };
+  }
+  private handleError (error: any) {
+    // In a real world app, we might use a remote logging infrastructure
+    // We'd also dig deeper into the error to get a better message
+    let errMsg = (error.message) ? error.message :
+      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
+    console.error(errMsg); // log to console instead
+    return Observable.throw(errMsg);
+  }
+
+
+
+}

src/assets/json/data.json

@@ -0,0 +1,29 @@
+{
+  "result": [
+    {
+      "id": 13,
+      "name": "test data 13",
+      "description": "test description 13"
+    },
+    {
+      "id": 14,
+      "name": "test data 14",
+      "description": "test description 14"
+    },
+    {
+      "id": 15,
+      "name": "test data 15",
+      "description": "test description 15"
+    },
+    {
+      "id": 16,
+      "name": "test data 16",
+      "description": "test description 16"
+    },
+    {
+      "id": 17,
+      "name": "test data 17",
+      "description": "test description 17"
+    }
+  ]
+}