angular-slickgrid 4.2.0 → 4.2.3

package/src/app/modules/angular-slickgrid/constants.ts

@@ -1,97 +0,0 @@
-import { Locale } from '@slickgrid-universal/common';
-
-export class Constants {
-  // English Locale texts when using only 1 Locale instead of I18N
-  static readonly locales: Locale = {
-    TEXT_ALL_SELECTED: 'All Selected',
-    TEXT_ALL_X_RECORDS_SELECTED: 'All {{x}} records selected',
-    TEXT_APPLY_MASS_UPDATE: 'Apply Mass Update',
-    TEXT_APPLY_TO_SELECTION: 'Update Selection',
-    TEXT_CANCEL: 'Cancel',
-    TEXT_CLEAR_ALL_FILTERS: 'Clear all Filters',
-    TEXT_CLEAR_ALL_GROUPING: 'Clear all Grouping',
-    TEXT_CLEAR_ALL_SORTING: 'Clear all Sorting',
-    TEXT_CLEAR_PINNING: 'Unfreeze Columns/Rows',
-    TEXT_CLONE: 'Clone',
-    TEXT_COLLAPSE_ALL_GROUPS: 'Collapse all Groups',
-    TEXT_CONTAINS: 'Contains',
-    TEXT_COLUMNS: 'Columns',
-    TEXT_COLUMN_RESIZE_BY_CONTENT: 'Resize by Content',
-    TEXT_COMMANDS: 'Commands',
-    TEXT_COPY: 'Copy',
-    TEXT_EQUALS: 'Equals',
-    TEXT_EQUAL_TO: 'Equal to',
-    TEXT_ENDS_WITH: 'Ends With',
-    TEXT_ERROR_EDITABLE_GRID_REQUIRED: 'Your grid must be editable in order to use the Composite Editor Modal.',
-    TEXT_ERROR_ENABLE_CELL_NAVIGATION_REQUIRED: 'Composite Editor requires the flag "enableCellNavigation" to be set to True in your Grid Options.',
-    TEXT_ERROR_NO_CHANGES_DETECTED: 'Sorry we could not detect any changes.',
-    TEXT_ERROR_NO_EDITOR_FOUND: 'We could not find any Editor in your Column Definition.',
-    TEXT_ERROR_NO_RECORD_FOUND: 'No records selected for edit or clone operation.',
-    TEXT_ERROR_ROW_NOT_EDITABLE: 'Current row is not editable.',
-    TEXT_ERROR_ROW_SELECTION_REQUIRED: 'You must select some rows before trying to apply new value(s).',
-    TEXT_EXPAND_ALL_GROUPS: 'Expand all Groups',
-    TEXT_EXPORT_TO_CSV: 'Export in CSV format',
-    TEXT_EXPORT_TO_TEXT_FORMAT: 'Export in Text format (Tab delimited)',
-    TEXT_EXPORT_TO_EXCEL: 'Export to Excel',
-    TEXT_EXPORT_TO_TAB_DELIMITED: 'Export in Text format (Tab delimited)',
-    TEXT_FORCE_FIT_COLUMNS: 'Force fit columns',
-    TEXT_FREEZE_COLUMNS: 'Freeze Columns',
-    TEXT_GREATER_THAN: 'Greater than',
-    TEXT_GREATER_THAN_OR_EQUAL_TO: 'Greater than or equal to',
-    TEXT_GROUP_BY: 'Group By',
-    TEXT_HIDE_COLUMN: 'Hide Column',
-    TEXT_ITEMS: 'items',
-    TEXT_ITEMS_PER_PAGE: 'items per page',
-    TEXT_ITEMS_SELECTED: 'items selected',
-    TEXT_OF: 'of',
-    TEXT_OK: 'OK',
-    TEXT_LAST_UPDATE: 'Last Update',
-    TEXT_LESS_THAN: 'Less than',
-    TEXT_LESS_THAN_OR_EQUAL_TO: 'Less than or equal to',
-    TEXT_NOT_CONTAINS: 'Not contains',
-    TEXT_NOT_EQUAL_TO: 'Not equal to',
-    TEXT_PAGE: 'Page',
-    TEXT_REFRESH_DATASET: 'Refresh Dataset',
-    TEXT_REMOVE_FILTER: 'Remove Filter',
-    TEXT_REMOVE_SORT: 'Remove Sort',
-    TEXT_SAVE: 'Save',
-    TEXT_SELECT_ALL: 'Select All',
-    TEXT_SYNCHRONOUS_RESIZE: 'Synchronous resize',
-    TEXT_SORT_ASCENDING: 'Sort Ascending',
-    TEXT_SORT_DESCENDING: 'Sort Descending',
-    TEXT_STARTS_WITH: 'Starts With',
-    TEXT_TOGGLE_FILTER_ROW: 'Toggle Filter Row',
-    TEXT_TOGGLE_PRE_HEADER_ROW: 'Toggle Pre-Header Row',
-    TEXT_X_OF_Y_SELECTED: '# of % selected',
-    TEXT_X_OF_Y_MASS_SELECTED: '{{x}} of {{y}} selected',
-  };
-
-  static readonly treeDataProperties = {
-    CHILDREN_PROP: 'children',
-    COLLAPSED_PROP: '__collapsed',
-    HAS_CHILDREN_PROP: '__hasChildren',
-    TREE_LEVEL_PROP: '__treeLevel',
-    PARENT_PROP: '__parentId',
-  };
-
-  // some Validation default texts
-  static readonly VALIDATION_REQUIRED_FIELD = 'Field is required';
-  static readonly VALIDATION_EDITOR_VALID_NUMBER = 'Please enter a valid number';
-  static readonly VALIDATION_EDITOR_VALID_INTEGER = 'Please enter a valid integer number';
-  static readonly VALIDATION_EDITOR_INTEGER_BETWEEN = 'Please enter a valid integer number between {{minValue}} and {{maxValue}}';
-  static readonly VALIDATION_EDITOR_INTEGER_MAX = 'Please enter a valid integer number that is lower than {{maxValue}}';
-  static readonly VALIDATION_EDITOR_INTEGER_MAX_INCLUSIVE = 'Please enter a valid integer number that is lower than or equal to {{maxValue}}';
-  static readonly VALIDATION_EDITOR_INTEGER_MIN = 'Please enter a valid integer number that is greater than {{minValue}}';
-  static readonly VALIDATION_EDITOR_INTEGER_MIN_INCLUSIVE = 'Please enter a valid integer number that is greater than or equal to {{minValue}}';
-  static readonly VALIDATION_EDITOR_NUMBER_BETWEEN = 'Please enter a valid number between {{minValue}} and {{maxValue}}';
-  static readonly VALIDATION_EDITOR_NUMBER_MAX = 'Please enter a valid number that is lower than {{maxValue}}';
-  static readonly VALIDATION_EDITOR_NUMBER_MAX_INCLUSIVE = 'Please enter a valid number that is lower than or equal to {{maxValue}}';
-  static readonly VALIDATION_EDITOR_NUMBER_MIN = 'Please enter a valid number that is greater than {{minValue}}';
-  static readonly VALIDATION_EDITOR_NUMBER_MIN_INCLUSIVE = 'Please enter a valid number that is greater than or equal to {{minValue}}';
-  static readonly VALIDATION_EDITOR_DECIMAL_BETWEEN = 'Please enter a valid number with a maximum of {{maxDecimal}} decimals';
-  static readonly VALIDATION_EDITOR_TEXT_LENGTH_BETWEEN = 'Please make sure your text length is between {{minLength}} and {{maxLength}} characters';
-  static readonly VALIDATION_EDITOR_TEXT_MAX_LENGTH = 'Please make sure your text is less than {{maxLength}} characters';
-  static readonly VALIDATION_EDITOR_TEXT_MAX_LENGTH_INCLUSIVE = 'Please make sure your text is less than or equal to {{maxLength}} characters';
-  static readonly VALIDATION_EDITOR_TEXT_MIN_LENGTH = 'Please make sure your text is more than {{minLength}} character(s)';
-  static readonly VALIDATION_EDITOR_TEXT_MIN_LENGTH_INCLUSIVE = 'Please make sure your text is at least {{minLength}} character(s)';
-}

package/src/app/modules/angular-slickgrid/extensions/index.ts

@@ -1 +0,0 @@
-export * from './slickRowDetailView';

package/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts

@@ -1,375 +0,0 @@
-import 'slickgrid/plugins/slick.rowdetailview';
-import 'slickgrid/plugins/slick.rowselectionmodel';
-
-import { ApplicationRef, ComponentRef, Type, ViewContainerRef } from '@angular/core';
-import {
-  addToArrayWhenNotExists,
-  castObservableToPromise,
-  EventSubscription,
-  RxJsFacade,
-  SlickEventHandler,
-  SlickGrid,
-  SlickRowSelectionModel,
-  unsubscribeAll,
-} from '@slickgrid-universal/common';
-import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
-import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
-import { Observable, Subject } from 'rxjs';
-import * as DOMPurify from 'dompurify';
-
-import { GridOption, RowDetailView } from '../models/index';
-import { AngularUtilService } from '../services/angularUtil.service';
-
-const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
-const PRELOAD_CONTAINER_PREFIX = 'container_loading';
-
-export interface CreatedView {
-  id: string | number;
-  dataContext: any;
-  componentRef?: ComponentRef<any>;
-}
-
-export class SlickRowDetailView extends UniversalSlickRowDetailView {
-  rowDetailContainer!: ViewContainerRef;
-  protected _eventHandler!: SlickEventHandler;
-  protected _preloadComponent: Type<object> | undefined;
-  protected _views: CreatedView[] = [];
-  protected _viewComponent!: Type<object>;
-  protected _subscriptions: EventSubscription[] = [];
-  protected _userProcessFn!: (item: any) => Promise<any> | Observable<any> | Subject<any>;
-
-  constructor(
-    protected readonly angularUtilService: AngularUtilService,
-    protected readonly appRef: ApplicationRef,
-    protected readonly eventPubSubService: EventPubSubService,
-    protected readonly gridContainerElement: HTMLDivElement,
-    protected rxjs?: RxJsFacade,
-  ) {
-    super();
-  }
-
-  get addonOptions() {
-    return this.getOptions();
-  }
-
-  protected get datasetIdPropName(): string {
-    return this.gridOptions.datasetIdPropertyName || 'id';
-  }
-
-  get eventHandler(): SlickEventHandler {
-    return this._eventHandler;
-  }
-  set eventHandler(eventHandler: SlickEventHandler) {
-    this._eventHandler = eventHandler;
-  }
-
-  /** Getter for the Grid Options pulled through the Grid Object */
-  get gridOptions(): GridOption {
-    return (this._grid?.getOptions() || {}) as GridOption;
-  }
-
-  get rowDetailViewOptions(): RowDetailView | undefined {
-    return this.gridOptions.rowDetailView;
-  }
-
-  addRxJsResource(rxjs: RxJsFacade) {
-    this.rxjs = rxjs;
-  }
-
-  /** Dispose of the RowDetailView Extension */
-  dispose() {
-    this.disposeAllViewComponents();
-    this._subscriptions = unsubscribeAll(this._subscriptions); // also unsubscribe all RxJS subscriptions
-    super.dispose();
-  }
-
-  /** Dispose of all the opened Row Detail Panels Angular View Components */
-  disposeAllViewComponents() {
-    this._views.forEach((compRef) => this.disposeViewComponent(compRef));
-    this._views = [];
-  }
-
-  /** Get the instance of the SlickGrid addon (control or plugin). */
-  getAddonInstance(): SlickRowDetailView | null {
-    return this;
-  }
-
-  init(grid: SlickGrid) {
-    this._grid = grid;
-    super.init(this._grid);
-    this.register(grid?.getSelectionModel());
-  }
-
-  /**
-   * Create the plugin before the Grid creation, else it will behave oddly.
-   * Mostly because the column definitions might change after the grid creation
-   */
-  register(rowSelectionPlugin?: SlickRowSelectionModel) {
-    if (typeof this.gridOptions.rowDetailView?.process === 'function') {
-      // we need to keep the user "process" method and replace it with our own execution method
-      // we do this because when we get the item detail, we need to call "onAsyncResponse.notify" for the plugin to work
-      this._userProcessFn = this.gridOptions.rowDetailView.process as (item: any) => Promise<any>;                // keep user's process method
-      this.gridOptions.rowDetailView.process = (item) => this.onProcessing(item);  // replace process method & run our internal one
-    } else {
-      throw new Error('[Angular-Slickgrid] You need to provide a "process" function for the Row Detail Extension to work properly');
-    }
-
-    if (this._grid && this.gridOptions?.rowDetailView) {
-      // load the Preload & RowDetail Templates (could be straight HTML or Angular View/ViewModel)
-      // when those are Angular View/ViewModel, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods)
-      if (!this.gridOptions.rowDetailView.preTemplate) {
-        this._preloadComponent = this.gridOptions?.rowDetailView?.preloadComponent;
-        this.gridOptions.rowDetailView.preTemplate = () => DOMPurify.sanitize(`<div class="${PRELOAD_CONTAINER_PREFIX}"></div>`);
-      }
-      if (!this.gridOptions.rowDetailView.postTemplate) {
-        this._viewComponent = this.gridOptions?.rowDetailView?.viewComponent;
-        this.gridOptions.rowDetailView.postTemplate = (itemDetail: any) => DOMPurify.sanitize(`<div class="${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}"></div>`);
-      }
-
-      // this also requires the Row Selection Model to be registered as well
-      if (!rowSelectionPlugin || !this._grid.getSelectionModel()) {
-        rowSelectionPlugin = new SlickRowSelectionModel(this.gridOptions.rowSelectionOptions || { selectActiveRow: true });
-        this._grid.setSelectionModel(rowSelectionPlugin);
-      }
-
-      // hook all events
-      if (this._grid && this.rowDetailViewOptions) {
-        if (this.rowDetailViewOptions.onExtensionRegistered) {
-          this.rowDetailViewOptions.onExtensionRegistered(this);
-        }
-
-        if (this.onAsyncResponse) {
-          this._eventHandler.subscribe(this.onAsyncResponse, (event, args) => {
-            if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncResponse === 'function') {
-              this.rowDetailViewOptions.onAsyncResponse(event, args);
-            }
-          });
-        }
-
-        if (this.onAsyncEndUpdate) {
-          this._eventHandler.subscribe(this.onAsyncEndUpdate, (e: any, args: { grid: SlickGrid; item: any; }) => {
-            // triggers after backend called "onAsyncResponse.notify()"
-            this.renderViewModel(args?.item);
-
-            if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncEndUpdate === 'function') {
-              this.rowDetailViewOptions.onAsyncEndUpdate(e, args);
-            }
-          });
-        }
-
-        if (this.onAfterRowDetailToggle) {
-          this._eventHandler.subscribe(this.onAfterRowDetailToggle, (e: any, args: { grid: SlickGrid; item: any; expandedRows: number[]; }) => {
-            // display preload template & re-render all the other Detail Views after toggling
-            // the preload View will eventually go away once the data gets loaded after the "onAsyncEndUpdate" event
-            this.renderPreloadView();
-            this.renderAllViewComponents();
-
-            if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAfterRowDetailToggle === 'function') {
-              this.rowDetailViewOptions.onAfterRowDetailToggle(e, args);
-            }
-          });
-        }
-
-        if (this.onBeforeRowDetailToggle) {
-          this._eventHandler.subscribe(this.onBeforeRowDetailToggle, (e, args) => {
-            // before toggling row detail, we need to create View Component if it doesn't exist
-            this.handleOnBeforeRowDetailToggle(e, args);
-
-            if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onBeforeRowDetailToggle === 'function') {
-              this.rowDetailViewOptions.onBeforeRowDetailToggle(e, args);
-            }
-          });
-        }
-
-        if (this.onRowBackToViewportRange) {
-          this._eventHandler.subscribe(this.onRowBackToViewportRange, (e: any, args: { grid: SlickGrid; item: any; rowId: number; rowIndex: number; expandedRows: any[]; rowIdsOutOfViewport: number[]; }) => {
-            // when row is back to viewport range, we will re-render the View Component(s)
-            this.handleOnRowBackToViewportRange(e, args);
-
-            if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onRowBackToViewportRange === 'function') {
-              this.rowDetailViewOptions.onRowBackToViewportRange(e, args);
-            }
-          });
-        }
-
-        if (this.onRowOutOfViewportRange) {
-          this._eventHandler.subscribe(this.onRowOutOfViewportRange, (e: any, args: { grid: SlickGrid; item: any; rowId: number; rowIndex: number; expandedRows: any[]; rowIdsOutOfViewport: number[]; }) => {
-            if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onRowOutOfViewportRange === 'function') {
-              this.rowDetailViewOptions.onRowOutOfViewportRange(e, args);
-            }
-          });
-        }
-
-        // --
-        // hook some events needed by the Plugin itself
-
-        // we need to redraw the open detail views if we change column position (column reorder)
-        this._eventHandler.subscribe(this._grid.onColumnsReordered, this.redrawAllViewComponents.bind(this));
-
-        // on row selection changed, we also need to redraw
-        if (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector) {
-          this._eventHandler.subscribe(this._grid.onSelectedRowsChanged, this.redrawAllViewComponents.bind(this));
-        }
-
-        // on sort, all row detail are collapsed so we can dispose of all the Views as well
-        this._eventHandler.subscribe(this._grid.onSort, this.disposeAllViewComponents.bind(this));
-
-        // on filter changed, we need to re-render all Views
-        this._subscriptions.push(
-          this.eventPubSubService?.subscribe('onFilterChanged', this.redrawAllViewComponents.bind(this)),
-          this.eventPubSubService?.subscribe('onGridMenuClearAllFilters', () => setTimeout(() => this.redrawAllViewComponents())),
-          this.eventPubSubService?.subscribe('onGridMenuClearAllSorting', () => setTimeout(() => this.redrawAllViewComponents())),
-        );
-      }
-    }
-    return this;
-  }
-
-  /** Redraw (re-render) all the expanded row detail View Components */
-  redrawAllViewComponents() {
-    this._views.forEach((compRef) => {
-      this.redrawViewComponent(compRef);
-    });
-  }
-
-  /** Render all the expanded row detail View Components */
-  renderAllViewComponents() {
-    this._views.forEach((view) => {
-      if (view && view.dataContext) {
-        this.renderViewModel(view.dataContext);
-      }
-    });
-  }
-
-  /** Redraw the necessary View Component */
-  redrawViewComponent(createdView: CreatedView) {
-    const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${createdView.id}`);
-    if (containerElements && containerElements.length >= 0) {
-      this.renderViewModel(createdView.dataContext);
-    }
-  }
-
-  /** Render (or re-render) the View Component (Row Detail) */
-  renderPreloadView() {
-    const containerElements = this.gridContainerElement.getElementsByClassName(`${PRELOAD_CONTAINER_PREFIX}`);
-    if (containerElements && containerElements.length >= 0) {
-      this.angularUtilService.createAngularComponentAppendToDom(this._preloadComponent, containerElements[containerElements.length - 1], true);
-    }
-  }
-
-  /** Render (or re-render) the View Component (Row Detail) */
-  renderViewModel(item: any): CreatedView | undefined {
-    const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`);
-    if (containerElements && containerElements.length > 0) {
-      const componentOutput = this.angularUtilService.createAngularComponentAppendToDom(this._viewComponent, containerElements[containerElements.length - 1], true);
-      if (componentOutput && componentOutput.componentRef && componentOutput.componentRef.instance) {
-        // pass a few properties to the Row Detail template component
-        Object.assign(componentOutput.componentRef.instance, {
-          model: item,
-          addon: this,
-          grid: this._grid,
-          dataView: this.dataView,
-          parent: this.rowDetailViewOptions && this.rowDetailViewOptions.parent,
-        });
-
-        const viewObj = this._views.find(obj => obj.id === item[this.datasetIdPropName]);
-        if (viewObj) {
-          viewObj.componentRef = componentOutput.componentRef;
-        }
-        return viewObj;
-      }
-    }
-    return undefined;
-  }
-
-  // --
-  // protected functions
-  // ------------------
-
-  protected disposeViewComponent(expandedView: CreatedView): CreatedView | void {
-    const compRef = expandedView?.componentRef;
-    if (compRef) {
-      this.appRef.detachView(compRef.hostView);
-      if (compRef?.destroy) {
-        compRef.destroy();
-      }
-      return expandedView;
-    }
-  }
-
-  /**
-   * notify the onAsyncResponse with the "args.item" (required property)
-   * the plugin will then use item to populate the row detail panel with the "postTemplate"
-   * @param item
-   */
-  protected notifyTemplate(item: any) {
-    if (this.onAsyncResponse) {
-      this.onAsyncResponse.notify({ item }, undefined, this);
-    }
-  }
-
-  /**
-   * On Processing, we will notify the plugin with the new item detail once backend server call completes
-   * @param item
-   */
-  protected async onProcessing(item: any) {
-    if (item && typeof this._userProcessFn === 'function') {
-      let awaitedItemDetail: any;
-      const userProcessFn = this._userProcessFn(item);
-
-      // wait for the "userProcessFn", once resolved we will save it into the "collection"
-      const response: any | any[] = await userProcessFn;
-
-      if (response.hasOwnProperty(this.datasetIdPropName)) {
-        awaitedItemDetail = response; // from Promise
-      } else if (response && response instanceof Observable || response instanceof Promise) {
-        awaitedItemDetail = await castObservableToPromise(this.rxjs as RxJsFacade, response); // from Angular-http-client
-      }
-
-      if (!awaitedItemDetail || !awaitedItemDetail.hasOwnProperty(this.datasetIdPropName)) {
-        throw new Error(`[Angular-Slickgrid] could not process the Row Detail, you must make sure that your "process" callback
-          (a Promise or an HttpClient call returning an Observable) returns an item object that has an "${this.datasetIdPropName}" property`);
-      }
-
-      // notify the plugin with the new item details
-      this.notifyTemplate(awaitedItemDetail || {});
-    }
-  }
-
-  /**
-   * Just before the row get expanded or collapsed we will do the following
-   * First determine if the row is expanding or collapsing,
-   * if it's expanding we will add it to our View Components reference array if we don't already have it
-   * or if it's collapsing we will remove it from our View Components reference array
-   */
-  protected handleOnBeforeRowDetailToggle(e: Event, args: { grid: SlickGrid; item: any; }) {
-    // expanding
-    if (args && args.item && args.item.__collapsed) {
-      // expanding row detail
-      const viewInfo: CreatedView = {
-        id: args.item[this.datasetIdPropName],
-        dataContext: args.item
-      };
-      const idPropName = this.gridOptions.datasetIdPropertyName || 'id';
-      addToArrayWhenNotExists(this._views, viewInfo, idPropName);
-    } else {
-      // collapsing, so dispose of the View/Component
-      const foundViewIndex = this._views.findIndex((view: CreatedView) => view.id === args.item[this.datasetIdPropName]);
-      if (foundViewIndex >= 0 && this._views.hasOwnProperty(foundViewIndex)) {
-        const compRef = this._views[foundViewIndex].componentRef;
-        if (compRef) {
-          this.appRef.detachView(compRef.hostView);
-          compRef.destroy();
-        }
-        this._views.splice(foundViewIndex, 1);
-      }
-    }
-  }
-
-  /** When Row comes back to Viewport Range, we need to redraw the View */
-  protected handleOnRowBackToViewportRange(e: Event, args: { grid: SlickGrid; item: any; rowId: number; rowIndex: number; expandedRows: any[]; rowIdsOutOfViewport: number[]; }) {
-    if (args?.item) {
-      this.redrawAllViewComponents();
-    }
-  }
-}