angular-slickgrid 8.14.1 → 9.0.0

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

@@ -0,0 +1,214 @@
+import { AfterViewInit, Component, OnInit, ViewChild } 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 '../../library';
+
+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',
+  standalone: false,
+})
+export class SwtCommonGridTestComponent implements OnInit, AfterViewInit {
+  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) {
+    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/demos/examples/swt-common-grid.component.ts

@@ -0,0 +1,436 @@
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
+/* eslint-disable @angular-eslint/no-output-on-prefix */
+import { Component, OnInit, AfterViewInit, Input, EventEmitter, Output, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import type {
+  AngularGridInstance,
+  AngularSlickgridComponent,
+  Column,
+  GridOption,
+  BackendService,
+  BackendServiceOption,
+  FilterChangedArgs,
+  PaginationChangedArgs,
+  Pagination,
+  SlickDataView,
+} from '../../library';
+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)"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    [dataset]="dataset"
+  >
+  </angular-slickgrid>`,
+  styles: [
+    `
+      :host ::ng-deep .gridPane {
+        width: 100% !important;
+      }
+      :host ::ng-deep .slickgrid-container {
+        width: 100% !important;
+      }
+    `,
+  ],
+  standalone: false,
+})
+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 (const colData of this.columnData) {
+        const type = 'string';
+        const editor = null;
+        const formatter = null;
+        const filter = null;
+        const outputType = null;
+        const params = null;
+
+        const col: any = {
+          id: colData.dataelement,
+          name: colData.heading,
+          field: colData.dataelement,
+          sortable: colData.sort,
+          filterable: colData.filterable,
+          type,
+          editor,
+          formatter,
+          filter,
+          outputType,
+          params,
+          width: colData.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 = true,
+    _colValidationMap = null,
+    _checkHeader = false,
+    _cboLinked = 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 = rawData.row[index] as object;
+      const idObj = {
+        id: index,
+      };
+
+      let key: string;
+      const rowData: any = [];
+      for (key in row) {
+        if (key in row) {
+          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 && 'size' in rawData ? 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 (const column of this.columnDefinitions) {
+        if (column.field in args.columnFilters) {
+          this.filteredGridColumns += args.columnFilters[column.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;
+  }
+}