angular-slickgrid 9.0.0 → 9.0.2

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

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

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