@tetacom/ng-components 1.0.25 → 1.0.26

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

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

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

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

@@ -1,25 +0,0 @@
-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();
-  });
-});