src/models/statement.base.ts

import { AfterViewInit, OnInit } from '@angular/core';
import { TdLoadingService } from '@covalent/core';
import { GridOptions, IGetRowsParams, IRowModel, RowNode } from 'ag-grid/main';
import { StatementBaseService } from '../services/statement.base.service';
import { Subject }           from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
export abstract class StatementBase implements AfterViewInit, OnInit {
    protected columnDefs: any[];
    protected gridOptions: GridOptions;
    protected service: StatementBaseService;
    protected loadingService: TdLoadingService;
    protected paramsSubject: Subject<IGetRowsParams> = new Subject<IGetRowsParams>();
    protected params: IGetRowsParams;
    protected data: Observable<any[]>;
    public showGrid: boolean;
    public rowCount: string;
    public isLoading: boolean = false;
    public isBootstrapping: boolean = true;
    public isSelected: boolean = false;
    public isNew: boolean = false;
    ngOnInit(): void {
        this.initGrid();
        this.initFunction();
    }
    ngAfterViewInit(): void {
        this.gridOptions.api.setDatasource(this.setRowData());
        this.data = this.paramsSubject
            .switchMap((params: IGetRowsParams) => {
                return this.service.getData(params);
            }).catch((error: any) => {
                console.log(error);
                return Observable.of<any[]>([]);
            });
        this.data.subscribe((data: any[]) => {
                  if (!data.length) {
                      data = [this.createModel()];
                  }
                  let lastRow: number = -1;
                  if (data.length < (this.params.endRow - this.params.startRow) && !this.isNew) {
                      lastRow = data.length;
                  }
                  this.params.successCallback(data, lastRow);
        });
    }
    enableLoader(): void {
      if (!this.isLoading) {
        this.isLoading = true;
        this.loadingService.register('loading');
      }
  }
  disableLoader(): void {
      if (this.isLoading) {
        this.isLoading = false;
        this.loadingService.resolve('loading');
      }
  }
  public addNewRow(): void {
      if (this.getFirstRowID()) {
          this.gridOptions.api.insertItemsAtIndex(0, [this.createModel()]);
          this.isNew = true;
      }
  }
    protected initGrid(): void {
        this.gridOptions = <GridOptions>{};
        this.gridOptions.enableSorting = true;
        this.gridOptions.enableFilter = true;
        this.gridOptions.suppressMultiSort = true;
        this.gridOptions.enableServerSideSorting = true;
        this.gridOptions.enableServerSideFilter = true;
        this.showGrid = true;
        this.gridOptions.rowModelType = 'virtual';
        this.gridOptions.paginationPageSize = 10;
        this.gridOptions.paginationOverflowSize = 2;
        this.gridOptions.maxPagesInCache = 2;
        this.gridOptions.getRowNodeId = function(item) {
            return item.id;
        };
    }
    protected bootstrapGrid(): void {
        this.columnDefs = this.createColumnDefs();
        this.isBootstrapping = false;
    }
//     protected setRowData2(): {} {
//       let dataSource: {} = {
//           rowCount: null,
//           getRows: (params: IGetRowsParams) => {
//               let sort: string = null;
//               if (params.sortModel.length) {
//                   sort = this.parseSort(params.sortModel[0]);
//               }
//               this.service.getData(params.startRow, params.endRow, sort).then((data: any) => {
//                   if (!data.length) {
//                       data = [this.createModel()];
//                   }
//                   let lastRow: number = -1;
//                   if (data.length <= params.endRow) {
//                       lastRow = data.length;
//                   }
//                   params.successCallback(data, lastRow);
//               });
//           },
//       };
//       return dataSource;
//   }
  protected setRowData(): {} {
      let dataSource: {} = {
          rowCount: null,
          getRows: (params: IGetRowsParams) => {
              this.params = params;
              this.paramsSubject.next(params);
            //   this.service.getData(params).subscribe((data: any[]) => {
            //       if (!data.length) {
            //           data = [this.createModel()];
            //       }
            //       let lastRow: number = -1;
            //       if (data.length <= params.endRow) {
            //           lastRow = data.length;
            //       }
            //       params.successCallback(data, lastRow);
            //   });
          },
      };
      return dataSource;
  }
  protected parseSort(sort: any): string {
      if (sort.colId && sort.sort) {
          let result = sort.colId;
          if (sort.sort === 'desc') {
              result = '-' + result;
          }
          return result;
      }
      return null;
  }
  protected getFirstRowID(): number {
      let model: RowNode = this.gridOptions.api.getModel().getRow(0);
      let id: number = model.data.id;
      if (id) {
          return id;
      } else {
          return null;
      }
  }
    protected onCellValueChanged($event: any): void {
        if ($event.oldValue !== $event.newValue) {
            let data: string = JSON.stringify($event.data);
            let id: number = $event.data.id;
            let result: any = null;
            if (id) {
                this.enableLoader();
                result = this.service.update(id, data).then(() => this.disableLoader());
            } else {
                // Protection of posting new row being already sent.
                if (this.isLoading) {
                    return ;
                }
                this.enableLoader();
                result = this.service.create(data).then((model: any) => {
                    this.gridOptions.api.refreshVirtualPageCache();
                    // this.gridOptions.api.setDatasource(this.setRowData());
                    this.disableLoader();
                    this.isNew = false;
                });
            }
        }
    }
    protected deleteRows(): void {
        let rows: RowNode[] = this.gridOptions.api.getSelectedNodes();
        if (!rows.length) {
            this.isSelected = false;
            return ;
        }
        rows.forEach((element: RowNode, index: number, array: RowNode[]) => {
            let id: number = element.data.id;
            if (id) {
                this.enableLoader();
                this.service.delete(id).then(() => {
                    if (index === (array.length - 1)) {
                        this.disableLoader();
                        this.gridOptions.api.refreshVirtualPageCache();
                        // this.gridOptions.api.setDatasource(this.setRowData());
                        this.gridOptions.api.deselectAll();
                        this.isNew = false;
                    }
                });
            }
        });
    }
    protected onSelectionChanged(): void {
        let selection: RowNode[] = this.gridOptions.api.getSelectedNodes();
        if (selection.length) {
            if (selection.length === 1) {
                this.gridOptions.api.refreshVirtualPageCache();
                this.isNew = false;
            }
            this.isSelected = true;
        } else {
            this.isSelected = false;
        }
    }
    protected onCellClicked($event: any): void {
        console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
    }
    protected onCellDoubleClicked($event: any): void {
        console.log('onCellDoubleClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
    }
    protected onCellContextMenu($event: any): void  {
        console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field);
    }
    protected onCellFocused($event: any): void  {
        console.log('onCellFocused: (' + $event.rowIndex + ',' + $event.colIndex + ')');
    }
    protected onRowSelected($event: any): void  {
        // taking out, as when we 'select all', it prints to much to the console!!
        // console.log('onRowSelected: ' + $event.node.data.name);
    }
    protected onBeforeFilterChanged(): void {
        console.log('beforeFilterChanged');
    }
    protected onAfterFilterChanged(): void {
        console.log('afterFilterChanged');
    }
    protected onFilterModified(): void {
        console.log('onFilterModified');
    }
    protected onBeforeSortChanged(event: any): void {
        console.log('onBeforeSortChanged');
    }
    protected onAfterSortChanged($event: any): void {
        console.log('onAfterSortChanged');
    }
    protected onVirtualRowRemoved($event: any): void {
        // because this event gets fired LOTS of times, we don't print it to the
        // console. if you want to see it, just uncomment out this line
        // console.log('onVirtualRowRemoved: ' + $event.rowIndex);
    }
    protected onRowClicked($event: any): void {
        console.log('onRowClicked: ' + $event.node.data.name);
    }
    // here we use one generic event to handle all the column type events.
    // the method just prints the event name
    protected onColumnEvent($event: any): void {
        console.log('onColumnEvent: ' + $event);
    }
  protected createModel(): Object {
      return this.service.createModel();
  };
  protected abstract createColumnDefs(): any[];
  protected abstract initFunction(): void;
}