angular-slickgrid 4.2.0 → 4.2.1

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

@@ -1,30 +0,0 @@
-<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

@@ -1,219 +0,0 @@
-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

@@ -1,436 +0,0 @@
-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;
-  }
-
-}