@tetacom/ng-components 1.0.21 → 1.0.25

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableComponent } from './table.component';
+
+describe('TableComponent', () => {
+  let component: TableComponent;
+  let fixture: ComponentFixture<TableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,444 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+  Type,
+  ViewChild,
+} from '@angular/core';
+import {TableRow} from '../contract/table-row';
+import {TableService} from '../service/table.service';
+import {TableColumn} from '../contract/table-column';
+import {FilterState} from '../../filter/contarct/filter-state';
+import {DetailComponentBase} from '../base/detail-component-base';
+import {ICellEvent} from '../contract/i-cell-event';
+import {ICellCoordinates} from '../contract/i-cell-coordinates';
+import {GroupRowComponentBase} from '../base/group-row-component-base';
+import {GroupRowComponent} from '../default/group-row/group-row.component';
+import {filter, takeWhile, withLatestFrom} from 'rxjs/operators';
+import {EditType} from '../enum/edit-type.enum';
+import {EditEvent} from '../enum/edit-event.enum';
+import {SelectType} from '../enum/select-type.enum';
+import {IIdName} from '../../../common/contract/i-id-name';
+import {IDictionary} from '../../../common/contract/i-dictionary';
+import {of} from 'rxjs';
+import {ArrayUtil} from '../../../common/util/array-util';
+import {PositionUtil} from '../../../common/util/position-util';
+import {Align} from '../../../common/enum/align.enum';
+import {VerticalAlign} from '../../../common/enum/vertical-align.enum';
+import {FilterType} from '../../filter/enum/filter-type.enum';
+import {TableContextMenuConfig} from '../contract/table-context-menu-config';
+
+@Component({
+  selector: 'teta-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [TableService],
+})
+export class TableComponent<T>
+  implements OnInit, OnDestroy, AfterViewInit, OnChanges {
+  @Input() data: T[] = [];
+  @Input() columns: TableColumn[] = [];
+  @Input() dict: IDictionary<IIdName<any>[]>;
+
+  @Input()
+  set state(state: FilterState) {
+    this._state = state;
+  }
+
+  @Input() rowHeight = 24;
+  @Input() cookieName: string;
+  @Input() virtual: boolean;
+  @Input() detailComponent: Type<DetailComponentBase<T>>;
+  @Input() activeRow: TableRow<T>;
+  @Input() selectedRows: TableRow<T>[];
+  @Input() selectType: SelectType = SelectType.none;
+  @Input() aggregate: boolean;
+  @Input() grouping: boolean;
+  @Input() groupRowComponent: Type<GroupRowComponentBase<T>> =
+    GroupRowComponent;
+  @Input() openLevels: number;
+  @Input() tree: boolean;
+  @Input() trackBy: (row: TableRow<T>) => any;
+  @Input() editType: EditType;
+  @Input() editEvent: EditEvent;
+  @Input() rowEditable: boolean | ((row: TableRow<T>) => boolean);
+  @Input() rowClass: (row: TableRow<T>, index?: number) => string;
+
+  @Input() set scrollToIndex(index: number) {
+    this._svc.scrollToIndex(index);
+  }
+
+  @Input() contextMenuConfig: TableContextMenuConfig =
+    new TableContextMenuConfig();
+
+  @Input() showHeadCellMenu = true;
+
+  @Output()
+  stateChange: EventEmitter<FilterState> = new EventEmitter<FilterState>();
+  @Output() bodyLeft = new EventEmitter<TableRow<T>>();
+  @Output() activeRowChange: EventEmitter<TableRow<T>> = new EventEmitter();
+  @Output() selectedRowsChange: EventEmitter<TableRow<T>[]> =
+    new EventEmitter();
+  @Output() rowLeft = new EventEmitter<TableRow<T>>();
+  @Output() rowEditStart = new EventEmitter<TableRow<T>>();
+  @Output() rowEditEnd = new EventEmitter<TableRow<T>>();
+  @Output() cellClick = new EventEmitter<ICellEvent<T>>();
+  @Output() cellDoubleClick = new EventEmitter<ICellEvent<T>>();
+  @Output() cellFocus = new EventEmitter<ICellEvent<T>>();
+  @Output() cellEditStart = new EventEmitter<ICellCoordinates<T>>();
+  @Output() cellEditEnd = new EventEmitter<ICellCoordinates<T>>();
+  @Output() valueChange = new EventEmitter<ICellCoordinates<T>>();
+  @Output() cellKeyUp = new EventEmitter<ICellEvent<T>>();
+
+  @Output() pasteRows = new EventEmitter<any[]>();
+  @Output() addRow = new EventEmitter<void>();
+  @Output() deleteRows = new EventEmitter<TableRow<T>[]>();
+  @Output() tableService = new EventEmitter<TableService<T>>();
+
+  @ViewChild('contextMenu', {static: true}) menu: ElementRef;
+  @HostBinding('class.table') private readonly tableClass = true;
+
+  showContextMenu: boolean;
+  selectedRowsList: TableRow<T>[];
+  contextMenuTarget: ICellCoordinates<T>;
+
+  private _alive = true;
+  private _bodyElement: HTMLElement;
+  private _headElement: HTMLElement;
+
+  private _state: FilterState;
+
+  constructor(private _svc: TableService<T>, private _elementRef: ElementRef) {
+    this._svc.state
+      .pipe(
+        takeWhile((_) => this._alive),
+        filter((state) => state !== this._state)
+      )
+      .subscribe((state: FilterState) => this.stateChange.next(state));
+
+    this._svc.editCellStart
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((item: ICellCoordinates<T>) => this.cellEditStart.emit(item));
+
+    this._svc.editCellStop
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((item: ICellCoordinates<T>) => this.cellEditEnd.emit(item));
+
+    this._svc.editRowStart
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((item: ICellCoordinates<T>) =>
+        this.rowEditStart.emit(item?.row)
+      );
+
+    this._svc.editRowStop
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((item: ICellCoordinates<T>) =>
+        this.rowEditEnd.emit(item?.row)
+      );
+
+    this._svc.selectedRows
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((items: TableRow<T>[]) => {
+        this.selectedRowsList = items;
+        this.selectedRowsChange.emit(items);
+      });
+
+    this._svc.activeRow
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((item: TableRow<T>) => this.activeRowChange.emit(item));
+
+    this._svc.valueChanged
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((coordinates: ICellCoordinates<T>) => {
+        this.valueChange.emit(coordinates);
+      });
+  }
+
+  @HostListener('document:click', ['$event']) handleClickOutsideAnyRow(
+    event: MouseEvent
+  ) {
+    const coordinates = this.getCoordinates(event);
+    if (coordinates) {
+      this.cellClick.emit(coordinates);
+      if (this.editEvent === EditEvent.click) {
+        this.startEditRowOrCell(coordinates);
+      }
+    }
+    if (!this.eventIsOnRow(event) && !event.defaultPrevented) {
+      this._svc.startEditRow(null);
+    }
+  }
+
+  @HostListener('focusin', ['$event']) focusIn(event: any) {
+    const coordinates = this.getCoordinates(event);
+    if (coordinates) {
+      this.cellFocus.emit(coordinates);
+      if (this.editEvent === EditEvent.focus) {
+        this.startEditRowOrCell(coordinates);
+      }
+    }
+  }
+
+  @HostListener('dblclick', ['$event'])
+  dblclick(event: MouseEvent) {
+    const coordinates = this.getCoordinates(event);
+    if (coordinates) {
+      this.cellDoubleClick.emit(coordinates);
+      if (this.editEvent === EditEvent.doubleClick) {
+        this.startEditRowOrCell(coordinates);
+      }
+    }
+  }
+
+  @HostListener('window:keyup', ['$event'])
+  keyup(event: KeyboardEvent) {
+    const coordinates = this.getCoordinates(event);
+    if (coordinates) {
+      this.cellKeyUp.emit(coordinates);
+    }
+    switch (event.key) {
+      case 'Enter':
+        this._svc.startEditRow(null);
+        break;
+      case 'Escape':
+        this._svc.startEditRow(null);
+        break;
+      default:
+        break;
+    }
+  }
+
+  @HostListener('mousedown', ['$event']) mousedown(event: MouseEvent) {
+    if (event.button === 2) {
+      event.preventDefault();
+    }
+  }
+
+  @HostListener('contextmenu', ['$event']) contextMenu(event: MouseEvent) {
+    if (
+      this.getSelectedText() ||
+      this.contextMenuConfig?.contextMenu === false
+    ) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this.contextMenuTarget = this.getCoordinates(event);
+    this.showContextMenu = true;
+    this.setPosition(event);
+  }
+
+  rowAdd() {
+    this.addRow.emit();
+    this.contextMenuTarget = null;
+    this.showContextMenu = false;
+  }
+
+  copy(rows: TableRow<T>[]) {
+    of(1)
+      .pipe(withLatestFrom(this._svc.columns, this._svc.hiddenColumns))
+      .subscribe((data: [number, TableColumn[], string[]]) => {
+        const [, columns, hidden] = data;
+        navigator.clipboard.writeText(
+          this.toClipboardString(rows, this.getVisibleColumns(columns, hidden))
+        );
+        this.contextMenuTarget = null;
+        this.showContextMenu = false;
+      });
+  }
+
+  delete(rows: TableRow<T>[]) {
+    this.deleteRows.emit(rows);
+    this.contextMenuTarget = null;
+    this.showContextMenu = false;
+  }
+
+  async pasteData() {
+    const result = await navigator.clipboard.readText();
+    of(1)
+      .pipe(withLatestFrom(this._svc.columns, this._svc.hiddenColumns))
+      .subscribe((data: [number, TableColumn[], string[]]) => {
+        const [, columns, hidden] = data;
+        this.pasteRows.emit(
+          this.fromClipboard(result, this.getVisibleColumns(columns, hidden))
+        );
+      });
+    this.contextMenuTarget = null;
+    this.showContextMenu = false;
+  }
+
+  ngOnInit(): void {
+    this._svc.restoreState();
+    this._svc.restoreHiddenColumns();
+    this.tableService.emit(this._svc);
+  }
+
+  ngAfterViewInit(): void {
+    this._headElement =
+      this._elementRef.nativeElement.querySelector('.table-head');
+    this._bodyElement = this._elementRef.nativeElement.querySelector(
+      '.table-body-container'
+    );
+    this._bodyElement.addEventListener('scroll', this.onScroll);
+  }
+
+  ngOnDestroy(): void {
+    this._alive = false;
+    this._bodyElement.removeEventListener('scroll', this.onScroll);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.hasOwnProperty('editType')) {
+      this._svc.editType = this.editType;
+    }
+    if (changes.hasOwnProperty('selectType')) {
+      this._svc.selectType = this.selectType;
+    }
+    if (changes.hasOwnProperty('selectedRows')) {
+      this._svc.selectRows(this.selectedRows);
+    }
+    if (changes.hasOwnProperty('rowEditable')) {
+      this._svc.rowEditable = this.rowEditable;
+    }
+    if (changes.hasOwnProperty('cookieName')) {
+      this._svc.setCookieName(this.cookieName);
+    }
+    if (changes.hasOwnProperty('columns')) {
+      if (this.columns !== null && this.columns !== undefined) {
+        this._svc.setColumns(this.columns);
+      }
+    }
+    if (changes.hasOwnProperty('data')) {
+      this._svc.setData(this.data);
+      this._svc.selectRows([]);
+    }
+    if (changes.hasOwnProperty('dict')) {
+      this._svc.setDict(this.dict);
+    }
+  }
+
+  private startEditRowOrCell(coordinates: ICellCoordinates<T>): void {
+    if (this.editType === EditType.row) {
+      this._svc.startEditRow(coordinates);
+    }
+    if (this.editType === EditType.cell) {
+      this._svc.startEditCell(coordinates);
+    }
+  }
+
+  
+  private getEventCell(event: Event): HTMLElement | null {
+    return event.composedPath().find((target: HTMLElement) => {
+      return target.tagName?.toLowerCase() === 'teta-cell';
+    }) as HTMLElement;
+  }
+
+  private eventIsOnRow(event: Event): boolean {
+    const row = event.composedPath().find((target: HTMLElement) => {
+      return target?.getAttribute && target?.getAttribute('data-row');
+    });
+    return row && this._elementRef.nativeElement.contains(row);
+  }
+
+  private getCoordinates(event: Event): ICellEvent<T> | null {
+    const cell = this.getEventCell(event);
+    if (cell) {
+      const rowIndex = cell.getAttribute('data-row');
+      const columnName = cell.getAttribute('data-column');
+      if (rowIndex && columnName) {
+        const row = this._svc.getRowByIndex(rowIndex);
+        const column = this._svc.getColumnByName(columnName);
+        return {
+          row,
+          column: column ? column : new TableColumn(),
+          event,
+        };
+      }
+    }
+    return null;
+  }
+
+  private onScroll = () => {
+    this._headElement.scrollLeft = this._bodyElement.scrollLeft;
+  };
+
+  private getSelectedText() {
+    let text = '';
+    if (typeof window.getSelection != 'undefined') {
+      text = window.getSelection().toString();
+    }
+    return text;
+  }
+
+  private setPosition(event: MouseEvent) {
+    const position = PositionUtil.getPosition(
+      {
+        top: event.y,
+        bottom: event.y,
+        left: event.x,
+        right: event.x,
+      },
+      this.menu.nativeElement.getBoundingClientRect(),
+      Align.left,
+      VerticalAlign.auto
+    );
+    PositionUtil.setElementPosition(this.menu.nativeElement, position);
+  }
+
+  private toClipboardString(rows: TableRow<T>[], columns: TableColumn[]) {
+    return rows.reduce(
+      (res: string, currentRow: TableRow<T>, i: number) =>
+        `${res}${i === 0 ? '' : '\n'}${columns.reduce(
+          (columnResult: string, column: TableColumn, j: number) =>
+            `${columnResult}${j === 0 ? '' : '\t'}${
+              currentRow.data[column.name] ?? ''
+            }`,
+          ''
+        )}`,
+      ''
+    );
+  }
+
+  private fromClipboard(data: string, columns: TableColumn[]) {
+    const rows = data.split('\n').filter((_) => _?.length > 0);
+    const result = rows.map((_) =>
+      _.replace('\r', '').replace('\n', '').split('\t')
+    );
+    return result.map((row: string[]) =>
+      row.reduce((res, item, index) => {
+        let value: any = item;
+        if (
+          columns[index]?.filterType === FilterType.number ||
+          columns[index]?.filterType === FilterType.list
+        ) {
+          value = parseFloat(item);
+        }
+        if (columns[index]?.filterType === FilterType.boolean) {
+          value = Boolean(JSON.parse(item.toLowerCase()));
+        }
+        if (columns[index]) {
+          res[columns[index].name] = value;
+        }
+        return res;
+      }, {})
+    );
+  }
+
+  private getVisibleColumns(columns: TableColumn[], hidden: string[]) {
+    const visible = ArrayUtil.flatten(columns, 'columns', true).filter(
+      (_) => hidden.indexOf(_.name) < 0
+    );
+    return visible.sort((a, b) => Number(b.locked) - Number(a.locked));
+  }
+}

package/src/component/table/table-body/table-body.component.html

@@ -0,0 +1,121 @@
+<!--<div #viewport class="table-body-container table-body-container-virtual"-->
+<!--     *ngIf="virtual"-->
+<!--     [style.grid-template-columns]="getTemplateColumns()"-->
+<!--     style="height: 100%;">-->
+<!--  <ng-container-->
+<!--    *uiScroll="let row of dataSource; let rowIndex = index; let last = last;" style="display: flex;flex-grow: 1">-->
+<!--    <ng-container *ngTemplateOutlet="bodyTemplate; context: {row: row, rowIndex: rowIndex}"></ng-container>-->
+<!--  </ng-container>-->
+<!--  <ng-container *ngIf="aggregate">-->
+<!--    <ng-container *ngTemplateOutlet="aggTemplate;"></ng-container>-->
+<!--  </ng-container>-->
+<!--</div>-->
+
+<cdk-virtual-scroll-viewport *ngIf="virtual"
+                             class="table-body-container"
+                             [itemSize]="24">
+  <ng-container *cdkVirtualFor="let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;">
+    <ng-container *ngTemplateOutlet="bodyTemplate; context: {row: row, rowIndex: rowIndex}"></ng-container>
+  </ng-container>
+</cdk-virtual-scroll-viewport>
+
+
+<div *ngIf="!virtual"
+     class="table-body-container"
+     [style.grid-template-rows]="rowHeight + 'px'"
+     [style.grid-auto-rows]="rowHeight + 'px'"
+     [style.grid-template-columns]="getTemplateColumns()">
+  <ng-container *ngFor="let row of data; let rowIndex = index; trackBy: trackRow;">
+    <ng-container *ngTemplateOutlet="bodyTemplate; context: {row: row, rowIndex: rowIndex}"></ng-container>
+  </ng-container>
+  <ng-container *ngIf="aggregate">
+    <ng-container *ngTemplateOutlet="aggTemplate;"></ng-container>
+  </ng-container>
+</div>
+
+<ng-template #bodyTemplate let-row="row" let-rowIndex="rowIndex">
+  <div class="table-row"
+       (click)="setActiveRow(row)"
+       [attr.data-row]="rowIndex"
+       [ngClass]="rowClass ? rowClass(row, rowIndex) : ''"
+       [class.table-row_virtual]="virtual"
+       [style.grid-template-columns]="virtual ? getTemplateColumns() : ''"
+       [class.table-row_active]="row === activeRow || selectedRows.indexOf(row) >= 0">
+    <ng-container *ngIf="!grouping">
+      <div class="table-row_locked"
+           *ngIf="locked.length > 0"
+           [style.grid-template-columns]="getLockedGridTemplateColumns(locked)"
+           [style.zIndex]="row === activeRow ? 1 : 'unset'"
+           [style.grid-column-end]="getSpan()">
+        <teta-selection-cell *ngIf="selectType !== selectTypeEnum.none && locked.length"
+                             [row]="row"></teta-selection-cell>
+        <teta-cell
+          *ngFor="let column of locked; let colIndex = index; trackBy: trackColumns;"
+          [attr.data-row]="rowIndex"
+          [attr.data-column]="column.name"
+          [column]="column"
+          [filterOptions]="dict[column.name]"
+          [dict]="dict"
+          [row]="row"
+          [ngClass]="column.cellClass"
+          [attr.tabindex]="0"
+        ></teta-cell>
+      </div>
+      <teta-selection-cell *ngIf="selectType !== selectTypeEnum.none && locked.length < 1"
+                           [row]="row"></teta-selection-cell>
+      <teta-cell
+        *ngFor="let column of unlocked; let colIndex = index; trackBy: trackColumns;"
+        [attr.data-row]="rowIndex"
+        [attr.data-column]="column.name"
+        [column]="column"
+        [filterOptions]="dict[column.name]"
+        [dict]="dict"
+        [row]="row"
+        [ngClass]="column.cellClass"
+        [attr.tabindex]="0"
+      ></teta-cell>
+    </ng-container>
+    <ng-container *ngIf="grouping">
+    </ng-container>
+  </div>
+</ng-template>
+
+<ng-template #aggTemplate>
+  <div class="table-row"
+       *ngIf="aggregate"
+       [class.table-row_virtual]="virtual"
+       [style.grid-template-columns]="virtual ? getTemplateColumns() : ''">
+    <div class="table-row_locked"
+         *ngIf="locked.length > 0"
+         [style.grid-template-columns]="getLockedGridTemplateColumns(locked)"
+         [style.grid-column-end]="getSpan()">
+      <div class="cell align-center justify-content-center">
+        <teta-icon [name]="'sumColor'"></teta-icon>
+      </div>
+      <div class="cell cell-component justify-content-end"
+           *ngFor="let column of locked; let colIndex = index; trackBy: trackColumns;"
+           [attr.data-column]="column.name"
+           [ngClass]="column.cellClass"
+           [attr.tabindex]="0">
+        <span class="cell-text cell-text_numeric font-title-3">
+          {{getAggregateText(column)}}:
+          {{getAggregateValue(column) | tetaNumber : 2}}
+        </span>
+      </div>
+    </div>
+    <div class="cell align-center justify-content-center"
+         *ngIf="selectType !== selectTypeEnum.none && locked.length < 1">
+      <teta-icon [name]="'sumColor'"></teta-icon>
+    </div>
+    <div class="cell cell-component justify-content-end"
+         *ngFor="let column of unlocked; let colIndex = index; trackBy: trackColumns;"
+         [attr.data-column]="column.name"
+         [ngClass]="column.cellClass"
+         [attr.tabindex]="0">
+      <span class="cell-text cell-text_numeric font-title-3">
+        {{getAggregateText(column)}}
+        {{getAggregateValue(column) | tetaNumber : 2}}
+      </span>
+    </div>
+  </div>
+</ng-template>

package/src/component/table/table-body/table-body.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableBodyComponent } from './table-body.component';
+
+describe('TableBodyComponent', () => {
+  let component: TableBodyComponent<any>;
+  let fixture: ComponentFixture<TableBodyComponent<any>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableBodyComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableBodyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});