File

projects/i-components/src/lib/utils/event-manager.ts

Description

XamDataGridEventManager is a class used to workaround about xamDataGrid event ordering

Index

Properties
Methods

Constructor

constructor(xamDataGrid: any)

xamDataGrid event manager constructor

Parameters :
Name Type Optional
xamDataGrid any No

Properties

Public mouseDownHandler
Default value : () => {...}

Captures click event when it happens inside a cell from a row in order to make sure xamDataGrid triggers row selection first

Parameters :
Name
event
Public pointerdownHandler
Default value : () => {...}

Captures the pointerdown event when it happens inside a cell from a row in order to make sure xamDataGrid triggers row selection first

Parameters :
Name
event
Public xamDataGrid
Type : any

Methods

Public destroy
destroy()

Removes event listener for xamDataGrid.

Returns : void
hasTheSelectedRowDataErrors
hasTheSelectedRowDataErrors(rowIndex: number)

Validates if the previously selected row has errors on any cell to keep the focus on the row with erros

Parameters :
Name Type Optional Description
rowIndex number No

Index of the row where the click was done

Returns : boolean
Public register
register()

Registers a click event listener

Returns : void
export class XamDataGridEventManager {
  /**
   * xamDataGrid event manager constructor
   * @param {any} xamDataGrid
   * @memberof XamDataGridEventManager
   */
  /* istanbul ignore next */
  constructor(public xamDataGrid: any) {}

  /**
   * Registers a click event listener
   *
   * @memberof XamDataGridEventManager
   */
  public register() {
    this.xamDataGrid.grid?.tbody?.nativeElement?.addEventListener(
      'mousedown',
      this.mouseDownHandler,
      { capture: true }
    );
    this.xamDataGrid.grid?.tbody?.nativeElement?.addEventListener(
      'pointerdown',
      this.pointerdownHandler,
      { capture: true }
    );
  }

  /**
   * Captures click event when it happens inside a cell from a row in order to make sure
   * xamDataGrid triggers row selection  first
   *
   * @param {MouseEvent} event
   * @memberof XamDataGridEventManager
   */
  public mouseDownHandler = (event: MouseEvent) => {
    const inRow = event
      .composedPath()
      .find(
        (target: HTMLElement) =>
          target?.tagName?.toLowerCase() === 'igx-grid-row'
      );
    const hasSelection = this.xamDataGrid.getSelectionMode
      ? this.xamDataGrid.getSelectionMode() !== 'none'
      : this.xamDataGrid.model.SelectionSettings.RowSelection !== 'None';
    const multipleSelection = this.xamDataGrid.getSelectionMode
      ? this.xamDataGrid.getSelectionMode() === 'multiple'
      : this.xamDataGrid.model.SelectionSettings.RowSelection === 'Multiple';
    /* istanbul ignore else */
    if (inRow && hasSelection) {
      const rowIndex = parseInt((inRow as HTMLElement).dataset.rowindex, 10);
      /* istanbul ignore else */
      if (this.hasTheSelectedRowDataErrors(rowIndex)) {
        return;
      }
      let row = null;
      if (
        this.xamDataGrid.grid.primaryKey &&
        this.xamDataGrid.grid.filteredSortedData.length > 0
      ) {
        const rowKey =
          this.xamDataGrid.grid.filteredSortedData[rowIndex][
            this.xamDataGrid.grid.primaryKey
          ];
        row = this.xamDataGrid.grid.getRowByKey(rowKey);
      } else {
        row = this.xamDataGrid.grid.getRowByIndex(rowIndex);
      }

      /* istanbul ignore else */
      if (event.shiftKey && multipleSelection) {
        this.xamDataGrid.grid.selectionService.selectMultipleRows(
          row.key,
          row.data,
          event
        );
        return;
      }
      this.xamDataGrid.grid.selectionService.selectRowById(
        row.key,
        !event.ctrlKey,
        event
      );
    }
  };

  /**
   * Validates if the previously selected row has errors on any cell to keep the focus on the row with erros
   * @param rowIndex Index of the row where the click was done
   * @returns
   */
  hasTheSelectedRowDataErrors(rowIndex: number): boolean {
    const columnWithErrors =
      this.xamDataGrid.evaluateColumnDataErrors?.(
        this.xamDataGrid.model.ActiveCell?.Row?.Data
      ) ?? false;
    const activeCellIndex = this.xamDataGrid.model.ActiveCell?.Row?.Index;
    /* istanbul ignore next */
    if (
      columnWithErrors &&
      activeCellIndex != rowIndex &&
      this.xamDataGrid.model.EditingSettings.AllowEditing !== 1
    ) {
      const nextCell = this.xamDataGrid.grid.getCellByColumn(
        activeCellIndex,
        'data.' + columnWithErrors
      );
      nextCell.selected = true;
      nextCell.row.selected = true;
      nextCell.editMode = true;
      setTimeout(() => {
        this.xamDataGrid.grid.navigateTo(
          nextCell.row.index,
          nextCell.column.index,
          (args) => {
            args.target.nativeElement.click();
          }
        );
      });
      this.xamDataGrid.nextColumnWithErrors = null;
      return true;
    }
    return false;
  }

  /**
   * Captures the pointerdown event when it happens inside a cell from a row in order to make sure
   * xamDataGrid triggers row selection  first
   *
   * @param {MouseEvent} event
   * @memberof XamDataGridEventManager
   */
  public pointerdownHandler = (event: PointerEvent) => {
    const columnWithErrors =
      this.xamDataGrid.evaluateColumnDataErrors?.(
        this.xamDataGrid.model.ActiveCell?.Row?.Data
      ) ?? false;
    /* istanbul ignore else */
    if (
      !columnWithErrors &&
      this.xamDataGrid.stopClickOutsideCell?.() === true
    ) {
      event.stopPropagation();
      return;
    }
    const inRow = event
      .composedPath()
      .find(
        (target: HTMLElement) =>
          target?.tagName?.toLowerCase() === 'igx-grid-row'
      );
    /* istanbul ignore else */
    if (inRow) {
      const rowIndex = parseInt((inRow as HTMLElement).dataset.rowindex, 10);
      if (
        columnWithErrors &&
        this.xamDataGrid.model.ActiveCell?.Row?.Index != rowIndex
      ) {
        event.stopPropagation();
        return;
      } else {
        return;
      }
    }
  };

  /**
   * Removes event listener for xamDataGrid.
   *
   * @memberof XamDataGridEventManager
   */
  public destroy() {
    this.xamDataGrid.grid?.tbody?.nativeElement?.removeEventListener(
      'mousedown',
      this.mouseDownHandler,
      { capture: true }
    );
    this.xamDataGrid.grid?.tbody?.nativeElement?.removeEventListener(
      'pointerdown',
      this.pointerdownHandler,
      { capture: true }
    );
  }
}

result-matching ""

    No results matching ""