angular-slickgrid 4.1.2 → 4.2.0

package/src/app/examples/swt-common-grid-test.component.html

@@ -0,0 +1,30 @@
+<div class="container-fluid" style="margin-top: 10px">
+  <h2>
+    <span [innerHTML]="title"></span>
+    <span class="float-end">
+      <a style="font-size: 18px"
+         target="_blank"
+         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/swt-common-grid-test.component.ts">
+        <span class="fa fa-link"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
+
+  <div class="row">
+    <div class="col-sm-8">
+      <div class="alert alert-info">
+        <strong>Custom Pagination URL:</strong>
+        <div [innerHTML]="currentUrl" data-test="query-string"></div>
+      </div>
+    </div>
+    <div class="col-sm-4">
+      <swt-common-grid-pagination #commonGridPag1></swt-common-grid-pagination>
+    </div>
+  </div>
+  <swt-common-grid #commonGrid1
+                   (onFilterChanged)="filterChanged($event.detail)"
+                   (onPaginationChanged)="paginationChanged($event.detail)"
+                   (onSortChanged)="sortChanged($event.detail)">
+  </swt-common-grid>
+</div>

package/src/app/examples/swt-common-grid-test.component.ts

@@ -0,0 +1,219 @@
+import {
+  AfterViewInit,
+  Component,
+  ComponentFactoryResolver,
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { SwtCommonGridComponent } from './swt-common-grid.component';
+import { SwtCommonGridPaginationComponent } from './swt-common-grid-pagination.component';
+import { FilterChangedArgs, PaginationChangedArgs } from '../modules/angular-slickgrid';
+
+import { Logger } from './swt-logger.service';
+/**
+ * Main test Component
+ *
+ * @author Saber Chebka, saber.chebka@gmail.com
+ */
+@Component({
+  selector: 'swt-common-grid-test',
+  templateUrl: './swt-common-grid-test.component.html'
+})
+export class SwtCommonGridTestComponent implements OnInit, AfterViewInit {
+  title = 'Example 13: Custom Backend Server Pagination';
+  subTitle = `A simple component to show that it is possible to create a custom Backend Service for any other backend querying, the example below is for Oracle.`;
+  componentFactory: any;
+  testurl = 'http://127.0.0.1:8080/grid!display.do?';
+  currentUrl = this.testurl;
+
+  @ViewChild('commonGrid1', { static: true }) commonGrid!: SwtCommonGridComponent;
+  @ViewChild('commonGridPag1', { static: true }) commonGridPag!: SwtCommonGridPaginationComponent;
+
+  private logger: Logger;
+
+  constructor(private httpClient: HttpClient,
+    private viewContainerRef: ViewContainerRef,
+    private componentFactoryResolver: ComponentFactoryResolver) {
+    this.logger = new Logger('test', undefined);
+
+  }
+
+  ngOnInit() {
+    // Link pagination component into the current Grid
+    if (this.commonGridPag) {
+      this.commonGrid.paginationComponent = this.commonGridPag;
+    }
+
+  }
+
+  ngAfterViewInit() {
+    this.logger.info('method [ngAfterViewInit] - START');
+
+    setTimeout(() => {
+      // Init datagrid example:
+      this.commonGridPag.processing = true;
+
+      // Real HTTP call
+      this.currentUrl = this.testurl + '&currentPage=1';
+      /*
+      this.httpClient.get(this.currentUrl).subscribe(
+          (data: any) => {
+              this.commonGrid.CustomGrid(data.suspectManagement.grid.metadata);
+              this.commonGrid.gridData = data.suspectManagement.grid.rows;
+              this.commonGridPag.pageCount = data.suspectManagement.singletons.maxpage;
+              this.commonGridPag.processing = false;
+          }
+      );
+      */
+      this.commonGrid.CustomGrid(data_sample.pagination_samples.grid.metadata);
+      this.commonGrid.gridData = data_sample.pagination_samples.grid.rows;
+      this.commonGridPag.pageCount = data_sample.pagination_samples.grid.rows.maxpage;
+
+      this.commonGridPag.processing = false;
+    }, 0);
+    this.logger.info('method [ngAfterViewInit] - END');
+  }
+
+  filterChanged(event: FilterChangedArgs) {
+    this.commonGridPag.processing = true;
+    this.updateGridData();
+  }
+
+  paginationChanged(event: PaginationChangedArgs) {
+    this.commonGridPag.processing = true;
+    this.updateGridData();
+  }
+
+  sortChanged(event: any) {
+    this.commonGridPag.processing = true;
+    this.updateGridData();
+  }
+
+
+  updateGridData() {
+    this.currentUrl = this.testurl + '&currentPage=' + this.commonGrid.currentPage + '&selectedSort=' + this.commonGrid.sortedGridColumn + '&selectedFilter=' + this.commonGrid.filteredGridColumns;
+    // Real HTTP call
+    /*this.httpClient.get(this.currentUrl).subscribe(
+        (data: any) => {
+            this.commonGrid.gridData = data.suspectManagement?data.suspectManagement.grid.rows:[];
+            this.commonGridPag.pageCount = data.suspectManagement?data.suspectManagement.singletons.maxpage:1;
+            this.commonGridPag.processing = false;
+        }
+    );*/
+    setTimeout(() => {
+      this.commonGrid.gridData = data_sample.pagination_samples.grid.rows;
+      this.commonGridPag.pageCount = data_sample.pagination_samples.grid.rows.maxpage;
+    }, 750);
+  }
+}
+
+
+export const data_sample = {
+  'pagination_samples': {
+    'grid': {
+      'metadata': {
+        'columns': {
+          'column': [{
+            'sort': true,
+            'filterable': false,
+            'width': 60,
+            'dataelement': 'hasNote',
+            'heading': 'Note'
+          },
+          {
+            'sort': true,
+            'filterable': true,
+            'width': 125,
+            'dataelement': 'status',
+            'heading': 'Status'
+          },
+          {
+            'sort': true,
+            'visible': true,
+            'filterable': true,
+            'width': 125,
+            'dataelement': 'currency',
+            'heading': 'Currency'
+          },
+          {
+            'sort': true,
+            'visible': true,
+            'filterable': true,
+            'width': 125,
+            'dataelement': 'amount',
+            'heading': 'Amount'
+          },
+          {
+            'sort': true,
+            'visible': true,
+            'filterable': true,
+            'width': 125,
+            'dataelement': 'inputDate',
+            'heading': 'Input Date'
+          },
+          {
+            'sort': true,
+            'visible': true,
+            'filterable': true,
+            'width': 125,
+            'dataelement': 'inputTime',
+            'heading': 'Input Time'
+          }]
+        }
+      },
+      'rows': {
+        'row': [{
+          'currency': {
+            'content': 'EUR'
+          },
+          'amount': {
+            'content': '2 203 677,000'
+          },
+          'startTime': {
+            'content': '06/19/2017 11:52:51'
+          },
+          'inputDate': {
+            'content': '06/19/2017'
+          },
+          'status': {
+            'content': 'New'
+          },
+          'inputTime': {
+            'content': '11:52:51'
+          },
+          'hasNote': {
+            'content': 'False'
+          }
+        },
+        {
+          'currency': {
+            'content': 'USD'
+          },
+          'amount': {
+            'content': '6 203 677,000'
+          },
+          'startTime': {
+            'content': '06/28/2017 10:42:00'
+          },
+          'inputDate': {
+            'content': '06/28/2017'
+          },
+          'status': {
+            'content': 'New'
+          },
+          'inputTime': {
+            'content': '10:40:12'
+          },
+          'hasNote': {
+            'content': 'True'
+          }
+        }
+        ],
+        'maxpage': 5
+      }
+    }
+  }
+};

package/src/app/examples/swt-common-grid.component.ts

@@ -0,0 +1,436 @@
+import { Component, OnInit, AfterViewInit, Input, EventEmitter, Output, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import {
+  AngularGridInstance,
+  AngularSlickgridComponent, Column, FieldType,
+  GridOption, BackendService,
+  BackendServiceOption, FilterChangedArgs, PaginationChangedArgs, Pagination, SlickGrid, SlickDataView
+} from '../modules/angular-slickgrid';
+import { TranslateService } from '@ngx-translate/core';
+import { Logger } from './swt-logger.service';
+import { SwtCommonGridPaginationComponent } from './swt-common-grid-pagination.component';
+
+/**
+ * Custom wrapper of angular-slickgrid components, allows easily interacting with SwtCommonGridPaginationComponent
+ *
+ * @author Saber Chebka, saber.chebka@gmail.com
+ */
+
+let timer: any;
+const DEFAULT_FILTER_TYPING_DEBOUNCE = 750;
+
+@Component({
+  selector: 'swt-common-grid',
+  template: `<angular-slickgrid gridId='common-grid'
+                      #angularSlickGrid
+                      (onAngularGridCreated)="gridReady($event.detail)"
+                      [columnDefinitions]="columnDefinitions"
+                      [gridOptions]="gridOptions"
+                      [dataset]="dataset">
+              </angular-slickgrid>`,
+  styles: [`
+       :host ::ng-deep .gridPane{
+            width: 100%!important;
+        }
+        :host ::ng-deep .slickgrid-container{
+            width: 100%!important;
+         }
+    `]
+})
+export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendService {
+
+  private logger: Logger;
+  private defaultPageSize = 20;
+
+  @Input() gridHeight = 100;
+  @Input() gridWidth = 600;
+
+  gridHeightString!: string;
+  gridWidthString!: string;
+
+  @ViewChild('angularSlickGrid', { static: true }) angularSlickGrid!: AngularSlickgridComponent;
+
+  columnDefinitions: Column[] = [];
+  dataset!: any[];
+  gridObj: any;
+  dataviewObj: any;
+  isAutoEdit = false;
+  updatedObject: any;
+  isMultiSelect = true;
+  selectedObjects!: any[];
+  selectedObject: any;
+
+  // Slick grid
+  metaData: any;
+  columnData: any;
+  rowsData: any;
+  selects: any;
+  id: any;
+
+  options!: BackendServiceOption;
+  pagination?: Pagination;
+
+  @Output() onFilterChanged: EventEmitter<FilterChangedArgs> = new EventEmitter<FilterChangedArgs>();
+  @Output() onPaginationChanged: EventEmitter<PaginationChangedArgs> = new EventEmitter<PaginationChangedArgs>();
+  @Output() onSortChanged: EventEmitter<any> = new EventEmitter<any>();
+
+  sortedGridColumn = '';
+  currentPage = 1;
+  filteredGridColumns = '';
+
+  // Data
+
+
+  // Injected functions
+  private _onRowDoubleClick: Function = new Function();
+  private _onRowClick: Function = new Function();
+
+
+  private _selectedRow: any;
+
+
+  gridOptions: GridOption = {
+    asyncEditorLoading: false,
+    autoEdit: this.isAutoEdit,
+    autoResize: {
+      container: '#common-grid-container',
+      rightPadding: 10
+    },
+    gridHeight: 200,
+    enableColumnPicker: true,
+    enableCellNavigation: true,
+    enableRowSelection: true,
+    enableCheckboxSelector: false,
+    enableFiltering: true,
+    rowHeight: 23,
+    forceFitColumns: true,
+    enableAutoTooltip: true,
+    enableGridMenu: true,
+    enablePagination: false
+  };
+
+  // Initialized to a fake pagination object
+  private _paginationComponent: any = {
+    processing: false,
+    realPagination: false
+  };
+
+  @Input()
+  set paginationComponent(value: SwtCommonGridPaginationComponent) {
+    this.logger!.info('method [pagination] - START, assigned datagrid pagination object: ', value.realPagination);
+    if (value.realPagination) {
+      this._paginationComponent = value;
+      this.gridOptions.backendServiceApi = {
+        service: this,
+        preProcess: () => { },
+        process: () => {
+          return null;
+        },
+        postProcess: () => { }
+      } as any;
+      this._paginationComponent.gridPaginationOptions = this.gridOptions;
+      this.angularSlickGrid.createBackendApiInternalPostProcessCallback(this.gridOptions);
+    }
+    this.logger!.info('method [pagination] - START');
+  }
+
+  get paginationComponent(): SwtCommonGridPaginationComponent {
+    return this._paginationComponent;
+  }
+
+  /**
+   *
+   * @param gridService
+   * @param resizer
+   * @param httpClient
+   */
+  constructor(private httpClient: HttpClient, private translate: TranslateService,
+    private el: ElementRef, private renderer: Renderer2) {
+    this.logger = new Logger('grid', httpClient);
+
+    this.logger.info('method [constructor] - START/END');
+  }
+
+
+
+  /**
+   *
+   */
+  ngOnInit() {
+    this.logger.info('method [ngOnInit] - START/END');
+    // this.gridHeightString = `${this.gridHeight}px`;
+    // this.gridWidthString = `${this.gridWidth}px`;
+  }
+
+
+  /**
+   *
+   */
+  ngAfterViewInit() {
+    this.logger.info('method [ngAfterViewInit] - START/END');
+  }
+
+  /**
+  * CustomGrid constructor
+  * @param columnData
+  */
+  CustomGrid(columnData: any) {
+    this.logger.info('method [CustomGrid] - START');
+
+    this.id = 'grid' + Math.floor(Math.random() * Math.floor(100));
+
+    // get metadata from input JSON
+    this.metaData = columnData;
+
+    // COLUMNS DATA
+    const rowData: any = [];
+
+    // check if allcolumns tag contains any children
+    if (this.metaData.columns.column) {
+
+      // set columnsData and columnDefinitions
+      this.columnData = this.metaData.columns.column;
+
+      for (let index = 0; index < this.columnData.length; index++) {
+
+        const type = FieldType.string;
+        const editor = null;
+        const formatter = null;
+        const filter = null;
+        const outputType = null;
+        const params = null;
+
+        const col: any = {
+          id: this.columnData[index].dataelement,
+          name: this.columnData[index].heading,
+          field: this.columnData[index].dataelement,
+          sortable: this.columnData[index].sort,
+          filterable: this.columnData[index].filterable,
+          type,
+          editor,
+          formatter,
+          filter,
+          outputType,
+          params,
+          width: this.columnData[index].width
+        };
+
+        this.columnDefinitions.push(col);
+        rowData[col.id] = '';
+      }
+
+      // Columns are not visible, seems to be a bug ? next line fixed it..
+      this.gridObj.setColumns(this.columnDefinitions);
+      this.angularSlickGrid.showPagination = false;
+
+      // Show filters when grid starts; this could be parametrized
+      // this.gridObj.setHeaderRowVisibility(false);
+      // this.gridObj.setTopPanelVisibility(false);
+    }
+
+    // Dummy dataset
+    this.dataset = rowData;
+
+    this.logger.info('method [CustomGrid] - END, this.columnDefinitions=', this.columnDefinitions);
+  }
+
+  /**
+   * CommonGrid constructor
+   * @param columnsData
+   * @param lockedColumnCount
+   * @param uniqueColumn
+   * @param baseURL
+   * @param programId
+   * @param componentId
+   * @param enableRenders
+   * @param colValidationMap
+   * @param checkHeader
+   * @param cboLinked
+   */
+  CommonGrid(columnsData: any, lockedColumnCount: number, uniqueColumn: string, baseURL: string, programId: string, componentId: string, enableRenders: boolean = true, colValidationMap: any = null, checkHeader: boolean = false, cboLinked: boolean = false) {
+  }
+
+
+  set gridData(rawData: any) {
+    this.logger.info('method [gridData] - START');
+    const dataProvider: any = [];
+
+    for (let index = 0; rawData.row && index < rawData.row.length; index++) {
+      const row = <Object>rawData.row[index];
+      const idObj = {
+        id: index
+      };
+
+      let key: string;
+      const rowData: any = [];
+      for (key in row) {
+        if (row.hasOwnProperty(key)) {
+          rowData[key] = (row as any)[key].content;
+        }
+      }
+      dataProvider[index] = Object.assign(rowData, idObj);
+    }
+
+    this.dataset = dataProvider;
+    this.paginationComponent.processing = false;
+    this.logger.info('method [gridData] - END, all data size=' + (rawData && rawData.hasOwnProperty('size') ? rawData.size : 0));
+
+    // this.gridObj.setSortColumn('excludeType', true);
+    // this.dataviewObj.reSort();
+    // this.gridObj.setSortColumns([{'columnId':'excludeType','sortAsc':true}]);
+
+    // this.gridObj.invalidate();
+    // this.gridObj.render();
+  }
+
+  get gridData(): any {
+    return this.dataset;
+  }
+
+  gridReady(instance: AngularGridInstance) {
+    this.logger.info('method [gridReady] - START');
+    this.gridObj = instance.slickGrid;
+    this.dataviewObj = instance.dataView;
+    this.logger.info('method [gridReady] - END');
+  }
+
+  dataviewReady(dataview: SlickDataView) {
+    this.logger.info('method [dataviewReady] - START/END', dataview);
+    this.dataviewObj = dataview;
+  }
+
+
+
+
+  /********************************************************/
+  /******** Pagination+Sot+Filter service : START *********/
+  /********************************************************/
+  buildQuery(): string {
+    return 'buildQuery...';
+  }
+
+  init(serviceOptions: BackendServiceOption, pagination?: Pagination): void {
+    this.options = serviceOptions;
+    this.pagination = pagination;
+  }
+
+
+  resetPaginationOptions() {
+
+  }
+
+  updateOptions(serviceOptions?: Partial<BackendServiceOption>) {
+    this.options = { ...this.options, ...serviceOptions };
+  }
+
+
+  /**
+   * FILTERING EMIT EVENT
+   * @param event
+   * @param args
+   */
+  processOnFilterChanged(event: Event | undefined, args: FilterChangedArgs): string {
+    this.logger.info('method [onFilterChanged] - START', args);
+    this.filteredGridColumns = '';
+    let timing = 0;
+    if (event && (event.type === 'keyup' || event.type === 'keydown')) {
+      timing = DEFAULT_FILTER_TYPING_DEBOUNCE;
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      this.filteredGridColumns = '';
+      for (let idx = 0; idx < this.columnDefinitions.length; idx++) {
+        if (args.columnFilters.hasOwnProperty(this.columnDefinitions[idx].field)) {
+          this.filteredGridColumns += args.columnFilters[this.columnDefinitions[idx].field].searchTerms[0] + '|';
+        } else {
+          this.filteredGridColumns += 'All|';
+        }
+      }
+
+      // Reset to the first page
+      this.paginationComponent.pageNumber = 1;
+      this.currentPage = 1;
+
+      // dispatch event
+      this.onFilterChanged.emit(args);
+      this.logger.info('method [onFilterChanged] - onFilterChanged.emit(args) performed, filteredGridColumns=' + this.filteredGridColumns);
+    }, timing);
+
+    this.logger.info('method [onFilterChanged] - END');
+    return '';
+  }
+
+
+  /**
+   * PAGINATION EMIT EVENT
+   * @param event
+   * @param args
+   */
+  processOnPaginationChanged(event: Event | undefined, args: PaginationChangedArgs) {
+    this.logger.info('method [onPaginationChanged] - START');
+    this.currentPage = args.newPage;
+    this.onPaginationChanged.emit(args);
+    this.logger.info('method [onPaginationChanged] - END, currentPage=' + this.currentPage);
+    return 'onPaginationChanged';
+  }
+
+  /**
+   * SORT EMIT EVENT
+   * @param event
+   * @param args
+   */
+  processOnSortChanged(event: Event | undefined, args: any) {
+    this.logger.info('method [onSortChanged] - START');
+    this.sortedGridColumn = '';
+    const sortDirection = '|' + args!.sortCols![0].sortAsc + '|';
+    for (let idx = 0; idx < this.columnDefinitions.length; idx++) {
+      if (this.columnDefinitions[idx].field === args!.sortCols![0].sortCol.field) {
+        this.sortedGridColumn = '' + idx + sortDirection;
+      }
+    }
+    this.onSortChanged.emit(args);
+    this.logger.info('method [onSortChanged] - END, sortedGridColumn=' + this.sortedGridColumn);
+    return 'onSortChanged';
+  }
+
+
+
+  getFilteredGridColumns() {
+    return this.filteredGridColumns;
+  }
+
+  getSortedGridColumn() {
+    return this.sortedGridColumn;
+  }
+
+  /******** Pagination+Sot+Filter service: END *****************/
+
+
+
+
+
+
+
+  // Getters and Setters
+  get selectedRow() {
+    return this._selectedRow;
+  }
+  set selectedRow(row: any) {
+    this._selectedRow = row;
+  }
+
+  get onRowDoubleClick() {
+    return this._onRowDoubleClick;
+  }
+  set onRowDoubleClick(event: Function) {
+    this._onRowDoubleClick = event;
+  }
+
+  get onRowClick() {
+    return this._onRowClick;
+  }
+  set onRowClick(event: Function) {
+    this._onRowClick = event;
+  }
+
+}