@tetacom/ng-components 1.0.24 → 1.0.25

package/src/component/table/selection-head-cell/selection-head-cell.component.ts

@@ -0,0 +1,49 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { TableService } from '../service/table.service';
+import { takeWhile } from 'rxjs/operators';
+
+@Component({
+  selector: 'teta-selection-head-cell',
+  templateUrl: './selection-head-cell.component.html',
+  styleUrls: ['./selection-head-cell.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectionHeadCellComponent<T> implements OnInit, OnDestroy {
+  @HostBinding('class.table-head__group') private readonly tableCellClass =
+    true;
+
+  private _alive = true;
+
+  constructor(private _svc: TableService<T>, private _cdr: ChangeDetectorRef) {}
+
+  selectAll(value: boolean) {
+    if (value) {
+      this._svc.selectAll();
+    } else {
+      this._svc.deselectAll();
+    }
+  }
+
+  allSelected() {
+    return this._svc.allRowsSelected();
+  }
+
+  ngOnInit(): void {
+    this._svc.selectedRows
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((_) => {
+        this._cdr.markForCheck();
+      });
+  }
+
+  ngOnDestroy(): void {
+    this._alive = false;
+  }
+}

package/src/component/table/service/table.service.spec.ts

@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+
+import {TableService} from './table.service';
+
+describe('TableService', () => {
+  let service: TableService<any>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TableService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/component/table/service/table.service.ts

@@ -0,0 +1,570 @@
+import {Injectable} from '@angular/core';
+import {TableRow} from '../contract/table-row';
+import {ICellCoordinates} from '../contract/i-cell-coordinates';
+import {TableColumn} from '../contract/table-column';
+import {FilterState} from '../../filter/contarct/filter-state';
+import {BehaviorSubject, Observable, Subject} from 'rxjs';
+import {ColumnResizeEvent} from '../contract/column-resize-event';
+import {ColumnReorderEvent} from '../contract/column-reorder-event';
+import {SortEvent} from '../contract/sort-event';
+import {ArrayUtil} from '../../../common/util/array-util';
+import {StateUtil} from '../util/state-util';
+import {SelectType} from '../enum/select-type.enum';
+import {EditType} from '../enum/edit-type.enum';
+import {EditEvent} from '../enum/edit-event.enum';
+import {ListFilterType} from '../../filter/enum/list-filter-type.enum';
+import {ListFilter} from '../../filter/contarct/list-filter';
+import {FilterType} from '../../filter/enum/filter-type.enum';
+import {NumericFilterValue} from '../../filter/contarct/numeric-filter-value';
+import {NumericFilter} from '../../filter/contarct/numeric-filter';
+import {StringFilter} from '../../filter/contarct/string-filter';
+import {DateFilterValue} from '../../filter/contarct/date-filter-value';
+import {DateFilter} from '../../filter/contarct/date-filter';
+import {IDictionary} from '../../../common/contract/i-dictionary';
+import {IIdName} from '../../../common/contract/i-id-name';
+import {DateUtil} from '../../../util/date-util';
+import objectHash from 'object-hash';
+import {TableColumnStore} from '../contract/table-column-store';
+import {ICellValue} from '../contract/i-cell-value';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TableService<T> {
+  columns: Observable<TableColumn[]>;
+  displayData: Observable<TableRow<T>[]>;
+  dict: Observable<IDictionary<IIdName<any>[]>>;
+  state: Observable<FilterState>;
+  selectType: SelectType;
+  editRowStart: Observable<ICellCoordinates<T>>;
+  editRowStop: Observable<ICellCoordinates<T>>;
+
+  editCellStart: Observable<ICellCoordinates<T>>;
+  editCellStop: Observable<ICellCoordinates<T>>;
+  valueChanged: Observable<ICellCoordinates<T>>;
+  valueSet: Observable<ICellValue<T>>;
+  stateChanged: Observable<FilterState>;
+  filterClear: Observable<TableColumn>;
+  groupToggle: Observable<TableRow<T>>;
+  selectedRows: Observable<TableRow<T>[]>;
+  activeRow: Observable<TableRow<T>>;
+  hiddenColumns: Observable<string[]>;
+  scrollIndex: Observable<number>;
+
+  editType: EditType;
+  editEvent: EditEvent;
+  rowEditable: boolean | ((row: TableRow<T>) => boolean);
+  // cellEditable: boolean | ((row: ICellCoordinates<T>) => boolean);
+
+  get dragSource() {
+    return this._dragSource;
+  }
+
+  private initialColumnsHash: string;
+  private initialColumns: TableColumn[] = [];
+  private displayColumns: TableColumn[] = [];
+  private _columns: BehaviorSubject<TableColumn[]> = new BehaviorSubject<TableColumn[]>([]);
+  private initialData: TableRow<T>[] = [];
+  private _displayData: BehaviorSubject<TableRow<T>[]> = new BehaviorSubject<TableRow<T>[]>([]);
+  private _dict: BehaviorSubject<IDictionary<IIdName<any>[]>> =
+    new BehaviorSubject<IDictionary<IIdName<any>[]>>({});
+  private _state: BehaviorSubject<FilterState> =
+    new BehaviorSubject<FilterState>(new FilterState());
+  private _cookieName: string;
+  private _hiddenCookieName: string;
+  private _columnsCookieName: string;
+  private _editRowStart = new Subject<ICellCoordinates<T> | null>();
+  private _editRowStop = new Subject<ICellCoordinates<T> | null>();
+  private _editCellStart = new Subject<ICellCoordinates<T> | null>();
+  private _editCellStop = new Subject<ICellCoordinates<T> | null>();
+  private _valueChanged = new Subject<ICellCoordinates<T> | null>();
+  private _valueSet = new Subject<ICellValue<T>>();
+  private _stateChanged = new Subject<FilterState>();
+  private _filterClear = new Subject<TableColumn>();
+  private _dragSource: TableColumn;
+  private _groupToggle = new Subject<TableRow<T>>();
+  private _selectedRows = new BehaviorSubject<TableRow<T>[]>([]);
+  private _activeRow = new BehaviorSubject<TableRow<T>>(null);
+  private _hiddenColumns = new BehaviorSubject<string[]>([]);
+  private _scrollIndex = new Subject<number>();
+
+  private _currentEditRow: ICellCoordinates<T>;
+  private _currentEditCell: ICellCoordinates<T>;
+
+  constructor() {
+    this.columns = this._columns.asObservable();
+    this.displayData = this._displayData.asObservable();
+    this.dict = this._dict.asObservable();
+    this.state = this._state.asObservable();
+    this.editRowStart = this._editRowStart.asObservable();
+    this.editRowStop = this._editRowStop.asObservable();
+    this.editCellStart = this._editCellStart.asObservable();
+    this.editCellStop = this._editCellStop.asObservable();
+    this.valueChanged = this._valueChanged.asObservable();
+    this.valueSet = this._valueSet.asObservable();
+    this.stateChanged = this._stateChanged.asObservable();
+    this.filterClear = this._filterClear.asObservable();
+    this.groupToggle = this._groupToggle.asObservable();
+    this.selectedRows = this._selectedRows.asObservable();
+    this.activeRow = this._activeRow.asObservable();
+    this.hiddenColumns = this._hiddenColumns.asObservable();
+    this.scrollIndex = this._scrollIndex.asObservable();
+  }
+
+  setData(data: T[]): void {
+    this.initialData = data?.map((_) => new TableRow<T>(_));
+    this._displayData.next(this.initialData);
+  }
+
+  setDict(dict: IDictionary<IIdName<any>[]>): void {
+    this._dict.next(dict);
+  }
+
+  setColumns(columns: TableColumn[]): void {
+    this.initialColumns = columns ? columns.map((_) => new TableColumn(_)) : [];
+    this.initialColumnsHash = objectHash(this.initialColumns, {
+      algorithm: 'sha1',
+      ignoreUnknown: true,
+      excludeKeys: key => key === 'headDropdownTemplate',
+    });
+    const restored = this.restoreColumns();
+
+    if (restored) {
+      this.setDisplayColumns(restored);
+    } else {
+      this.setDisplayColumns(this.initialColumns);
+    }
+  }
+
+  restoreDefaultColumns() {
+    this.setDisplayColumns(this.initialColumns);
+    this.clearColumnsState();
+  }
+
+  updateColumns(columns: TableColumn[]): void {
+    this.setDisplayColumns(columns);
+    this.saveColumnsState();
+  }
+
+  saveColumnsState() {
+    if (this._cookieName) {
+      localStorage.setItem(
+        this._columnsCookieName,
+        JSON.stringify({
+          hash: this.initialColumnsHash,
+          columns: this.displayColumns.map((_) => new TableColumnStore(_)),
+        })
+      );
+    }
+  }
+
+  clearColumnsState() {
+    localStorage.removeItem(this._columnsCookieName);
+  }
+
+  setDisplayColumns(columns: TableColumn[]): void {
+    this.displayColumns = columns ? columns.map((_) => new TableColumn(_)) : [];
+    this._columns.next(this.displayColumns);
+  }
+
+  restoreColumns() {
+    const savedColumns = JSON.parse(
+      localStorage.getItem(this._columnsCookieName)
+    );
+    if (savedColumns && savedColumns.hash === this.initialColumnsHash) {
+      return this.restoreColumnsState(savedColumns.columns);
+    }
+    return null;
+  }
+
+  restoreColumnsState(columns: TableColumnStore[]) {
+    return columns.map((column: TableColumnStore) => {
+      const found = ArrayUtil.findRecursive(
+        this.initialColumns,
+        (item) => item.name === column.name,
+        'columns'
+      );
+      const resultColumn = new TableColumn(found);
+      resultColumn.width = column.width;
+      resultColumn.flex = column.flex;
+      resultColumn.locked = column.locked;
+      if (column.columns?.length > 0) {
+        resultColumn.columns = this.restoreColumnsState(column.columns);
+      }
+      return resultColumn;
+    });
+  }
+
+  setState(state: FilterState): void {
+    state.save(this._cookieName);
+    this._state.next(state);
+  }
+
+  setCookieName(name: string): void {
+    this._cookieName = name;
+    this._hiddenCookieName = `${this._cookieName}_hidden_columns`;
+    this._columnsCookieName = `${this._cookieName}_columns`;
+  }
+
+  restoreState(): void {
+    let state: FilterState;
+    if (this._cookieName?.length > 0 && FilterState.restore(this._cookieName)) {
+      let newState = Object.assign(
+        this._state.value,
+        FilterState.restore(this._cookieName)
+      );
+      newState = DateUtil.convertDateStringsToDates(newState);
+      state = new FilterState(newState);
+    } else {
+      state = new FilterState();
+    }
+    this.setState(state);
+  }
+
+  saveHiddenColumns(hiddenColumns: string[]): void {
+    localStorage.setItem(this._hiddenCookieName, JSON.stringify(hiddenColumns));
+  }
+
+  restoreHiddenColumns(): void {
+    const hiddenColumns = localStorage.getItem(this._hiddenCookieName) || '[]';
+    this._hiddenColumns.next(JSON.parse(hiddenColumns));
+  }
+
+  sort(sortEvent: SortEvent): void {
+    if (sortEvent.column.sortable) {
+      this.setState(StateUtil.sortColumn(sortEvent, this._state.value));
+    }
+  }
+
+  clearSort(column: TableColumn): void {
+    this.setState(StateUtil.clearSort(column, this._state.value));
+  }
+
+  clearAllSort(): void {
+    this.setState(StateUtil.clearAllSort(this._state.value));
+  }
+
+  clearFilter(column: TableColumn) {
+    const state = this._state.value;
+    if (column !== null && column !== undefined && column.filterable) {
+      switch (column.filterType) {
+        case FilterType.date:
+          state.addDateFilter(
+            new DateFilter({
+              name: column.name,
+              field: column.filterField,
+              value: new DateFilterValue(),
+            })
+          );
+          break;
+        case FilterType.string:
+          state.addStringFilter(
+            new StringFilter({
+              name: column.name,
+              field: column.filterField,
+              value: '',
+            })
+          );
+          break;
+        case FilterType.number:
+          state.addNumericFilter(
+            new NumericFilter({
+              name: column.name,
+              field: column.filterField,
+              value: new NumericFilterValue(),
+            })
+          );
+          break;
+        case FilterType.list:
+          state.addListFilter(
+            new ListFilter({
+              name: column.name,
+              field: column.filterField,
+              value: [],
+              type: ListFilterType.None,
+            })
+          );
+          break;
+      }
+      this.setState(new FilterState(state));
+    }
+  }
+
+  clearAllFilters() {
+    const state = this._state.value;
+    state.stringFilters = [];
+    state.listFilters = [];
+    state.numericFilters = [];
+    state.dateFilters = [];
+    this.setState(new FilterState(state));
+  }
+
+  pinColumn(column: TableColumn): void {
+    this.displayColumns.forEach((col: TableColumn) => {
+      if (col.name === column.name) {
+        col.locked = !col.locked;
+      }
+    });
+    this.updateColumns(this.displayColumns);
+  }
+
+  dragStart(column: TableColumn): void {
+    this._dragSource = column;
+  }
+
+  lockPreviousColumns(column: TableColumn, element: HTMLElement) {
+    const flat = ArrayUtil.flatten(this.displayColumns, 'columns', true).sort(
+      (a, b) => Number(b.locked) - Number(a.locked)
+    );
+    const index = flat.indexOf(column);
+    const previous = flat.slice(0, index).filter((_) => _.flex > 0);
+    if (previous?.length > 0) {
+      const tableElement = this.getTableElement(element);
+      previous.forEach((item: TableColumn) => {
+        const itemCol = tableElement.querySelector(
+          `teta-head-cell[data-column=${item.name}]`
+        ) as HTMLElement;
+        if (itemCol) {
+          item.flex = 0;
+          item.width = itemCol.clientWidth;
+        }
+      });
+    }
+  }
+
+  resizeColumn(event: ColumnResizeEvent) {
+    if (event.column !== null && event.column !== undefined) {
+      event.column.width = event.newWidth < 50 ? 50 : event.newWidth;
+      event.column.flex = 0;
+    }
+    this._columns.next(this.displayColumns);
+    this.saveColumnsState();
+  }
+
+  autosizeColumn(column: TableColumn, target: HTMLElement) {
+    const tableElement = this.getTableElement(target);
+    this.setColumnAutoWidth(column, tableElement as HTMLElement);
+    this._columns.next(this.displayColumns);
+    this.saveColumnsState();
+  }
+
+  autosizeAllColumns(target: HTMLElement) {
+    const tableElement = this.getTableElement(target);
+    const flat = ArrayUtil.flatten(this.displayColumns, 'columns', true);
+    flat.forEach((col) =>
+      this.setColumnAutoWidth(col, tableElement as HTMLElement)
+    );
+    this._columns.next(this.displayColumns);
+    this.saveColumnsState();
+  }
+
+  reorderColumn(column: TableColumn, insertBefore: boolean): void {
+    const event = new ColumnReorderEvent(this._dragSource, column);
+    if (event.source !== event.target) {
+      const sourceParent = this.findParent(event.source, this.displayColumns);
+      const targetParent = this.findParent(event.target, this.displayColumns);
+
+      if (sourceParent && targetParent) {
+        const sourceIndex = sourceParent.indexOf(event.source);
+        sourceParent.splice(sourceIndex, 1);
+        let targetIndex = targetParent.indexOf(event.target);
+        if (!insertBefore) {
+          targetIndex = targetIndex + 1;
+        }
+        targetParent.splice(targetIndex, 0, event.source);
+        event.source.locked = event.target.locked;
+
+        this.updateColumns(this.displayColumns);
+      }
+    }
+  }
+
+  startEditRow(cellCoordinates: ICellCoordinates<T>): void {
+    if (this._currentEditRow?.row !== cellCoordinates?.row) {
+      if (this._currentEditRow != null) {
+        this._editRowStop.next(this._currentEditRow);
+      }
+      if (cellCoordinates === null) {
+        this._editRowStart.next(cellCoordinates);
+        this._currentEditRow = cellCoordinates;
+      } else {
+        if (
+          this.boolOrFuncCallback<TableRow<T>>(this.rowEditable)(
+            cellCoordinates.row
+          )
+        ) {
+          this._editRowStart.next(cellCoordinates);
+          this._currentEditRow = cellCoordinates;
+        }
+      }
+    }
+  }
+
+  startEditCell(cellCoordinates: ICellCoordinates<T>): void {
+    if (
+      this._currentEditCell?.column.name !== cellCoordinates?.column.name ||
+      this._currentEditCell?.row !== cellCoordinates?.row
+    ) {
+      if (this._currentEditCell != null) {
+        this._editCellStop.next(this._currentEditCell);
+      }
+      if (
+        this.boolOrFuncCallback<ICellCoordinates<T>>(cellCoordinates.column.editable)(
+          cellCoordinates
+        )
+      ) {
+        this._editCellStart.next(cellCoordinates);
+        this._currentEditCell = cellCoordinates;
+      }
+    }
+  }
+
+  setActiveRow(row: TableRow<T>): void {
+    this._activeRow.next(row);
+  }
+
+  selectRows(rows: TableRow<T>[]): void {
+    this._selectedRows.next(rows);
+  }
+
+  selectRow(row: TableRow<T>): void {
+    if (this.selectType === SelectType.none) {
+      return;
+    }
+    if (this.selectType === SelectType.single) {
+      this._selectedRows.next([row]);
+    } else {
+      this._selectedRows.next([...this._selectedRows.value, row]);
+    }
+  }
+
+  deselectRow(row: TableRow<T>): void {
+    if (this.selectType === SelectType.none) {
+      return;
+    }
+    if (this.selectType === SelectType.single) {
+      this._selectedRows.next([]);
+    } else {
+      this._selectedRows.next(
+        this._selectedRows.value.filter((_) => _ !== row)
+      );
+    }
+  }
+
+  selectAll() {
+    this._selectedRows.next(this._displayData.value);
+  }
+
+  deselectAll() {
+    this._selectedRows.next([]);
+  }
+
+  allRowsSelected(): boolean | null {
+    if (
+      this._displayData.value?.length &&
+      this._selectedRows.value?.length &&
+      this._displayData.value.every(
+        (_) => this._selectedRows.value.indexOf(_) >= 0
+      )
+    ) {
+      return true;
+    } else if (
+      this._selectedRows.value == null ||
+      this._selectedRows.value.length === 0
+    ) {
+      return false;
+    }
+    return null;
+  }
+
+  setHiddenColumns(value: string[]) {
+    this.saveHiddenColumns(value);
+    this._hiddenColumns.next(value);
+  }
+
+  columnIsHidden(column: TableColumn) {
+    return this._hiddenColumns.value.indexOf(column.name) >= 0;
+  }
+
+  toggleGroup(row: TableRow<T>): void {
+    this._groupToggle.next(row);
+  }
+
+  changeValue(coordinates: ICellCoordinates<T>): void {
+    this._valueChanged.next(coordinates);
+  }
+
+  setValue(cellValue: ICellValue<T>): void {
+    this._valueSet.next(cellValue);
+  }
+
+  getRowByIndex(rowIndex: string) {
+    return this._displayData.value[parseInt(rowIndex, 10)];
+  }
+
+  getColumnByName(columnName: string) {
+    return ArrayUtil.findRecursive(
+      this.displayColumns,
+      (iterableNode) => columnName === iterableNode.name,
+      'columns'
+    );
+  }
+
+  scrollToIndex(index: number) {
+    this._scrollIndex.next(null);
+    this._scrollIndex.next(index);
+  }
+
+  boolOrFuncCallback<M>(variable: boolean | ((row: M) => boolean)) {
+    return (args: M) => {
+      if (typeof variable === 'boolean') {
+        return variable;
+      } else if (this.isFunction(variable)) {
+        return (variable as (row: M) => boolean)(args);
+      }
+      return true;
+    };
+  }
+
+  private findParent(
+    column: TableColumn,
+    columns: TableColumn[]
+  ): TableColumn[] | null {
+    const found = columns.find((x) => x.name === column.name);
+    if (found !== null && found !== undefined) {
+      return columns;
+    }
+    for (let i = 0, l = columns.length; i < l; i++) {
+      const col = columns[i];
+      if (col.columns && col.columns.length) {
+        const result = this.findParent(column, col.columns);
+        if (result !== null && result !== undefined) {
+          return result;
+        }
+      }
+    }
+    return null;
+  }
+
+  private getTableElement(element: HTMLElement) {
+    return element.closest('teta-table');
+  }
+
+  private isFunction(obj: any) {
+    return !!(obj && obj?.constructor && obj?.call && obj?.apply);
+  }
+
+  private setColumnAutoWidth(column: TableColumn, table: HTMLElement) {
+    const cells = table.querySelectorAll(
+      `teta-cell[data-column=${column.name}] .cell-text`
+    );
+    let maxWidth = 0;
+    cells.forEach((cell) => {
+      if (cell.scrollWidth > maxWidth) {
+        maxWidth = cell.scrollWidth;
+      }
+    });
+    column.flex = 0;
+    column.width = maxWidth + 20;
+  }
+}

package/src/component/table/table/table.component.html

@@ -0,0 +1,68 @@
+<div class="column column_auto">
+  <teta-table-head [selectType]="selectType" [showHeadCellMenu]="showHeadCellMenu"></teta-table-head>
+  <teta-table-body
+    [aggregate]="aggregate"
+    [virtual]="virtual"
+    [activeRow]="activeRow"
+    [additionalComponent]="detailComponent"
+    [grouping]="grouping"
+    [groupRowComponent]="groupRowComponent"
+    [openLevels]="openLevels"
+    [selectType]="selectType"
+    [rowHeight]="rowHeight"
+    [rowClass]="rowClass"
+    [tree]="tree"></teta-table-body>
+</div>
+
+<div #contextMenu
+     class="list shadow-1"
+     style="position: fixed; z-index: 2;"
+     [style.visibility]="showContextMenu ? 'visible ' : 'hidden'"
+     [tetaClickOutside]="showContextMenu"
+     (clickOutside)="showContextMenu = false">
+  <ng-container *ngIf="contextMenuConfig?.add">
+    <div class="list-item list-item_interactive"
+         (click)="rowAdd()">
+      <teta-icon [name]="'add'" [palette]="'text'"></teta-icon>
+      Добавить строку
+    </div>
+    <div class="list-divider"></div>
+  </ng-container>
+  <ng-container *ngIf="contextMenuConfig?.copy">
+    <div class="list-item list-item_interactive"
+         (click)="copy(selectedRowsList)"
+         *ngIf="selectedRowsList?.length > 0">
+      <teta-icon [name]="'copySelected'" [palette]="'text'"></teta-icon>
+      Копировать выделенные строки
+    </div>
+    <div class="list-item list-item_interactive"
+         (click)="copy([contextMenuTarget.row])"
+         *ngIf="contextMenuTarget">
+      <teta-icon [name]="'copy'" [palette]="'text'"></teta-icon>
+      Копировать строку
+    </div>
+    <div class="list-divider"></div>
+  </ng-container>
+  <ng-container *ngIf="contextMenuConfig?.paste">
+    <div class="list-item list-item_interactive"
+         (click)="pasteData()">
+      <teta-icon [name]="'paste'" [palette]="'text'"></teta-icon>
+      Вставить
+    </div>
+    <div class="list-divider"></div>
+  </ng-container>
+  <ng-container *ngIf="contextMenuConfig?.delete">
+    <div class="list-item list-item_interactive"
+         (click)="delete(selectedRowsList)"
+         *ngIf="selectedRowsList?.length > 0">
+      <teta-icon [name]="'deleteSelected'" [palette]="'text'"></teta-icon>
+      Удалить выделенные строки
+    </div>
+    <div class="list-item list-item_interactive"
+         (click)="delete([contextMenuTarget.row])"
+         *ngIf="contextMenuTarget">
+      <teta-icon [name]="'delete'" [palette]="'text'"></teta-icon>
+      Удалить строку
+    </div>
+  </ng-container>
+</div>