@tetacom/ng-components 1.0.25 → 1.0.26

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

@@ -1,280 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostBinding,
-  Input,
-  OnDestroy,
-  OnInit,
-  Type,
-  ViewChild,
-} from '@angular/core';
-import {TableRow} from '../contract/table-row';
-import {TableColumn} from '../contract/table-column';
-import {GroupRowComponentBase} from '../base/group-row-component-base';
-import {TableService} from '../service/table.service';
-import {DetailComponentBase} from '../base/detail-component-base';
-import {takeWhile} from 'rxjs/operators';
-import {TableUtil} from '../util/table-util';
-import {SelectType} from '../enum/select-type.enum';
-import {combineLatest} from 'rxjs';
-import {ArrayUtil} from '../../../common/util/array-util';
-import {IDictionary} from '../../../common/contract/i-dictionary';
-import {IIdName} from '../../../common/contract/i-id-name';
-import {AggregationType} from '../enum/aggregation-type.enum';
-import {Datasource, IDatasource, SizeStrategy} from 'ngx-ui-scroll';
-import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
-
-@Component({
-  selector: 'teta-table-body',
-  templateUrl: './table-body.component.html',
-  styleUrls: ['./table-body.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TableBodyComponent<T> implements OnInit, OnDestroy {
-  @Input() virtual: boolean;
-  @Input() activeRow: TableRow<T>;
-  @Input() rowHeight: number;
-  @Input() additionalComponent: Type<DetailComponentBase<T>>;
-  @Input() tree: boolean;
-  @Input() aggregate: boolean;
-  @Input() grouping: boolean;
-  @Input() groupRowComponent: Type<GroupRowComponentBase<T>>;
-  @Input() openLevels: number;
-  @Input() selectType: SelectType;
-  @Input() rowClass: (row: TableRow<T>, index?: number) => string;
-
-  @ViewChild(CdkVirtualScrollViewport, {static: false}) viewport: CdkVirtualScrollViewport;
-
-  @HostBinding('class.table-body') private readonly tableBodyClass = true;
-
-  set data(data: TableRow<T>[]) {
-    this._data = data;
-    if (!this.dataSource) {
-      this.createAdapter();
-    }
-    this.resetAdapter();
-  }
-
-  get data() {
-    return this._data;
-  }
-
-  dict: IDictionary<IIdName<any>[]>;
-
-  gridTemplateColumns: string;
-  selectedRows: TableRow<T>[] = [];
-  locked: TableColumn[] = [];
-  unlocked: TableColumn[] = [];
-
-  selectTypeEnum = SelectType;
-  dataSource: IDatasource<TableRow<T>>;
-
-  private _columns: TableColumn[] = [];
-  private _alive = true;
-  private _data: TableRow<T>[];
-  private _hiddenColumns: string[] = [];
-  private _index: number;
-
-  set columns(columns: TableColumn[]) {
-    this._columns = columns;
-    this.locked = this._columns?.filter((_) => _.locked === true);
-    this.unlocked = this._columns?.filter((_) => _.locked === false);
-  }
-
-  get columns(): TableColumn[] {
-    return this._columns;
-  }
-
-  constructor(private _svc: TableService<T>, private _cdr: ChangeDetectorRef) {
-    combineLatest([this._svc.columns, this._svc.hiddenColumns])
-      .pipe(takeWhile((_) => this._alive))
-      .subscribe((values: [TableColumn[], string[]]) => {
-        const [columns, hiddenColumns] = values;
-        this._hiddenColumns = hiddenColumns;
-        this.columns = ArrayUtil.flatten(columns, 'columns', true).filter(
-          (_) => this._hiddenColumns.indexOf(_.name) < 0
-        );
-        this.gridTemplateColumns = TableUtil.getGridTemplateColumns(
-          this.columns.sort((a, b) => Number(b.locked) - Number(a.locked))
-        );
-        this._cdr.markForCheck();
-      });
-
-    this._svc.displayData.pipe(takeWhile((_) => this._alive)).subscribe((_) => {
-      this.data = _;
-      this._cdr.markForCheck();
-    });
-
-    this._svc.dict.pipe(takeWhile((_) => this._alive)).subscribe((_) => {
-      this.dict = _;
-      this._cdr.markForCheck();
-    });
-
-    this._svc.scrollIndex
-      .pipe(takeWhile((_) => this._alive))
-      .subscribe(async (_) => {
-        // if (this.viewport && this.dataSource && _ !== null) {
-        //   await this.dataSource.adapter.relax();
-        //   await this.dataSource.adapter.fix({
-        //     scrollPosition: (_ + 1) * 24,
-        //   });
-        // }
-        if (this.viewport) {
-          this.viewport.scrollToIndex(_, 'smooth');
-        }
-        this._cdr.markForCheck();
-      });
-
-    this._svc.activeRow
-      .pipe(takeWhile((_) => this._alive))
-      .subscribe(async (_) => {
-        this.activeRow = _;
-        this._cdr.markForCheck();
-      });
-  }
-
-  setActiveRow(row: TableRow<T>) {
-    this._svc.setActiveRow(row);
-  }
-
-  getData = (index, count, success) => {
-    const data = [];
-    if (this.data?.length > 0) {
-      const start = Math.max(0, index);
-      const end = Math.min(index + count - 1, this.data.length - 1);
-      for (let i = start; i <= end; i++) {
-        data.push(this.data[i]);
-      }
-    }
-    return success(data);
-  };
-
-  ngOnInit(): void {
-  }
-
-  ngOnDestroy(): void {
-    this._alive = false;
-  }
-
-  getAggregateValue(column: TableColumn): number {
-    if (column.aggregate === AggregationType.sum) {
-      return this.getSum(column.name);
-    }
-    if (column.aggregate === AggregationType.avg) {
-      return this.getSum(column.name) / this.data.length;
-    }
-    if (column.aggregate === AggregationType.min) {
-      return this.getMin(column.name);
-    }
-    if (column.aggregate === AggregationType.max) {
-      return this.getMax(column.name);
-    }
-  }
-
-  getAggregateText(column: TableColumn): string {
-    if (column.aggregate === AggregationType.sum) {
-      return 'Сумма=';
-    }
-    if (column.aggregate === AggregationType.avg) {
-      return 'Среднее=';
-    }
-    if (column.aggregate === AggregationType.min) {
-      return 'Мин=';
-    }
-    if (column.aggregate === AggregationType.max) {
-      return 'Макс=';
-    }
-    return '';
-  }
-
-  getSpan(): string {
-    if (this.locked?.length > 0) {
-      let span = this.locked.length;
-      if (this.selectType !== SelectType.none) {
-        span += 1;
-      }
-      return `span ${span}`;
-    }
-    return null;
-  }
-
-  getTemplateColumns() {
-    let template = this.gridTemplateColumns;
-    if (this.selectType !== SelectType.none) {
-      template = `48px ${template}`;
-    }
-    return template;
-  }
-
-  getLockedGridTemplateColumns(columns: TableColumn[]) {
-    let template = TableUtil.getGridTemplateColumns(columns);
-    if (this.selectType !== SelectType.none) {
-      template = `48px ${template}`;
-    }
-    return template;
-  }
-
-  trackRow(index: number, row: TableRow<T>): any {
-    return index;
-  }
-
-  trackColumns(index: number, column: TableColumn): any {
-    return column.name;
-  }
-
-  private getSum(columnName) {
-    return this.data?.reduce((accum, current) => {
-      const val = parseFloat(current.data[columnName]);
-      return accum + (isNaN(val) ? 0 : val);
-    }, 0);
-  }
-
-  private getMin(columnName) {
-    return this.data?.reduce(
-      (accum, current) =>
-        accum != null && accum <= current.data[columnName]
-          ? accum
-          : current.data[columnName],
-      null
-    );
-  }
-
-  private getMax(columnName) {
-    return this.data?.reduce(
-      (accum, current) =>
-        accum != null && accum >= current.data[columnName]
-          ? accum
-          : current.data[columnName],
-      null
-    );
-  }
-
-  private async resetAdapter() {
-    await this.dataSource.adapter.relax();
-    await this.dataSource.adapter.reset({
-      get: this.getData,
-      settings: {
-        minIndex: 0,
-        maxIndex: this._data?.length ? this._data.length - 1 : 0,
-        startIndex: 0,
-        itemSize: 24,
-        sizeStrategy: SizeStrategy.Constant,
-      },
-    });
-    await this.dataSource.adapter.check();
-  }
-
-  private createAdapter() {
-    this.dataSource = new Datasource<TableRow<T>>({
-      get: this.getData,
-      settings: {
-        startIndex: 0,
-        bufferSize: 2,
-        sizeStrategy: SizeStrategy.Constant,
-        itemSize: 24,
-      },
-    });
-  }
-}

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

@@ -1,28 +0,0 @@
-<teta-table [data]="data"
-            [cookieName]="'table-stories'"
-            [columns]="columns"
-            [virtual]="virtual"
-            [dict]="dict"
-            [editType]="editType"
-            [editEvent]="editEvent"
-            [selectType]="selectType"
-            (tableService)="tableService = $event"
-            (bodyLeft)="log('bodyLeft', $event)"
-            (cellClick)="log('cellClick', $event)"
-            (cellDoubleClick)="log('cellDoubleClick', $event)"
-            (cellEditEnd)="log('cellEditEnd', $event)"
-            (cellEditStart)="log('cellEditStart', $event)"
-            (cellFocus)="log('cellFocus', $event)"
-            (cellKeyUp)="log('cellKeyUp', $event)"
-            (rowEditEnd)="log('rowEditEnd', $event)"
-            (rowEditStart)="log('rowEditStart', $event)"
-            (rowLeft)="log('rowLeft', $event)"
-            (selectedRowsChange)="log('selectedRowsChange', $event)"
-            (stateChange)="log('stateChange', $event)"
-            (valueChange)="log('valueChange', $event)"
-            (activeRowChange)="log('activeRowChange', $event)"></teta-table>
-<ng-template let-data>
-  <div class="padding-2">
-    Some additional stuff here
-  </div>
-</ng-template>

package/src/component/table/table-demo/table-demo/table-demo.component.scss

@@ -1,6 +0,0 @@
-:host {
-  display: flex;
-  flex-grow: 1;
-  min-width: 0;
-  min-height: 0;
-}

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

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

package/src/component/table/table-demo/table-demo/table-demo.component.ts

@@ -1,136 +0,0 @@
-import {Component, Input, OnInit, TemplateRef, ViewChild, ViewChildren} from '@angular/core';
-import * as faker from 'faker';
-import {TableColumn} from '../../contract/table-column';
-import {FilterType} from '../../../filter/enum/filter-type.enum';
-import {IDictionary} from '../../../../common/contract/i-dictionary';
-import {IIdName} from '../../../../common/contract/i-id-name';
-import {EditType} from '../../enum/edit-type.enum';
-import {SelectType} from '../../enum/select-type.enum';
-import {EditEvent} from '../../enum/edit-event.enum';
-import {TableService} from '../../service/table.service';
-
-@Component({
-  selector: 'teta-table-demo',
-  templateUrl: './table-demo.component.html',
-  styleUrls: ['./table-demo.component.scss']
-})
-export class TableDemoComponent implements OnInit {
-  @Input() size: number;
-  @Input() virtual: boolean;
-  @Input() editType: EditType;
-  @Input() selectType: SelectType;
-  @Input() editEvent: EditEvent;
-  @ViewChild(TemplateRef, {read: TemplateRef, static: true}) dropdownTpl: TemplateRef<any>;
-  tableService: TableService<any>;
-
-  dict: IDictionary<IIdName<any>[]> = {
-    ram: [
-      {id: 8, name: '8'},
-      {id: 16, name: '16'},
-      {id: 32, name: '32'},
-      {id: 64, name: '64'},
-      {id: 128, name: '128'},
-    ],
-    long: []
-  };
-  data: any[] = [];
-  columns = []
-
-
-  constructor() {
-    this.dict['long'] = this.getLong();
-  }
-
-  log = (name, value) => {
-    console.log(name, value);
-  };
-
-  ngOnInit(): void {
-    this.data = this.getData(this.size);
-    this.columns = [
-      new TableColumn({
-        name: 'name',
-        flex: 1,
-        locked: true,
-        filterType: FilterType.string,
-        headDropdownTemplate: this.dropdownTpl
-      }),
-      new TableColumn({
-        name: 'date',
-        locked: true,
-        filterType: FilterType.date,
-      }),
-      new TableColumn({
-        name: 'long',
-        locked: true,
-        filterType: FilterType.list,
-      }),
-      new TableColumn({
-        name: 'value',
-        locked: true,
-        filterType: FilterType.number,
-      }),
-      new TableColumn({
-        name: 'summary',
-        filterType: FilterType.number,
-      }),
-      new TableColumn({
-        name: 'ram',
-        caption: 'RAM',
-        filterType: FilterType.list,
-      }),
-      new TableColumn({
-        name: 'location',
-        columns: [
-          new TableColumn({
-            name: 'city',
-            filterType: FilterType.string,
-          }),
-          new TableColumn({
-            name: 'state',
-            filterType: FilterType.string,
-          }),
-          new TableColumn({
-            name: 'address',
-            flex: 2,
-            filterType: FilterType.string,
-          }),
-          new TableColumn({
-            name: 'zip',
-            filterType: FilterType.string,
-          }),
-        ],
-      }),
-    ];
-  }
-
-  getData = (size) => {
-    const res = [];
-    for (let i = 0; i < size; i++) {
-      res.push({
-        name: `${faker.name.firstName()} ${faker.name.lastName()}`,
-        date: faker.date.between(new Date(2010, 0, 1), new Date(2021, 0, 1)),
-        long: faker.helpers.randomize([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]),
-        value: faker.datatype.number({min: 0, max: 100}),
-        summary: faker.datatype.number({min: 0, max: 100000}),
-        ram: faker.helpers.randomize([8, 16, 32, 64, 128]),
-        address: faker.address.streetAddress(),
-        state: faker.address.state(),
-        city: faker.address.city(),
-        zip: faker.address.zipCode(),
-      });
-    }
-    return res;
-  };
-
-  getLong = () => {
-    const res = [];
-    for (let i = 0; i <= 10; i++) {
-      res.push({
-        id: i,
-        name: `${faker.address.city()} ${faker.address.country()} ${faker.address.state()} ${faker.address.zipCode()}`,
-      });
-    }
-    return res;
-  };
-}

package/src/component/table/table-demo/table-demo.module.ts

@@ -1,23 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {TableDemoComponent} from './table-demo/table-demo.component';
-import {TableModule} from '../table.module';
-import {TabsModule} from '../../tabs/tabs.module';
-import {IconModule} from '../../icon/icon.module';
-
-@NgModule({
-  declarations: [
-    TableDemoComponent
-  ],
-  exports: [
-    TableDemoComponent
-  ],
-  imports: [
-    CommonModule,
-    TableModule,
-    TabsModule,
-    IconModule
-  ]
-})
-export class TableDemoModule {
-}

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

@@ -1,21 +0,0 @@
-<div class="table-head_locked"
-     *ngIf="locked?.length"
-     [style.grid-template-columns]="getLockedGridTemplateColumns(locked)"
-     [style.grid-column-end]="getSpan()">
-  <teta-selection-head-cell *ngIf="selectType !== selectTypeEnum.none"></teta-selection-head-cell>
-  <ng-container *ngFor="let column of locked; trackBy: track">
-    <teta-table-head-group
-      class="table-head__group"
-      [showHeadCellMenu]="showHeadCellMenu"
-      [column]="column"></teta-table-head-group>
-  </ng-container>
-</div>
-<ng-container *ngIf="unlocked?.length">
-  <teta-selection-head-cell *ngIf="selectType !== selectTypeEnum.none && locked?.length < 1"></teta-selection-head-cell>
-  <ng-container *ngFor="let column of unlocked; trackBy: track">
-    <teta-table-head-group
-      class="table-head__group"
-      [showHeadCellMenu]="showHeadCellMenu"
-      [column]="column"></teta-table-head-group>
-  </ng-container>
-</ng-container>

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

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

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

@@ -1,118 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  HostBinding,
-  Input,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { TableColumn } from '../contract/table-column';
-import { FilterState } from '../../filter/contarct/filter-state';
-import { TableService } from '../service/table.service';
-import { takeWhile } from 'rxjs/operators';
-import { TableUtil } from '../util/table-util';
-import { SelectType } from '../enum/select-type.enum';
-import { combineLatest } from 'rxjs';
-import { ArrayUtil } from '../../../common/util/array-util';
-
-@Component({
-  selector: 'teta-table-head',
-  templateUrl: './table-head.component.html',
-  styleUrls: ['./table-head.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TableHeadComponent<T> implements OnInit, OnDestroy {
-  @Input() selectType: SelectType;
-  @Input() showHeadCellMenu: boolean;
-  @HostBinding('class.table-head') private readonly tableHeadClass = true;
-  gridTemplateColumns: string;
-
-  @HostBinding('style.grid-template-columns')
-  get getTemplateColumns() {
-    let template = this.gridTemplateColumns;
-    if (this.selectType !== SelectType.none) {
-      template = `48px ${template}`;
-    }
-    return template;
-  }
-
-  state: FilterState;
-  selectTypeEnum = SelectType;
-
-  private _alive = true;
-  private _columns: TableColumn[] = [];
-  private _hiddenColumns: string[] = [];
-
-  set columns(columns: TableColumn[]) {
-    this._columns = columns;
-    this._cdr.markForCheck();
-  }
-
-  get columns(): TableColumn[] {
-    return this._columns;
-  }
-
-  get locked(): TableColumn[] {
-    return this._columns.filter(
-      (_) => _.locked === true && this._hiddenColumns.indexOf(_.name) < 0
-    );
-  }
-
-  get unlocked(): TableColumn[] {
-    return this._columns.filter(
-      (_) => _.locked === false && this._hiddenColumns.indexOf(_.name) < 0
-    );
-  }
-
-  constructor(private _svc: TableService<T>, private _cdr: ChangeDetectorRef) {
-    combineLatest([this._svc.columns, this._svc.hiddenColumns])
-      .pipe(takeWhile((_) => this._alive))
-      .subscribe((values: [TableColumn[], string[]]) => {
-        const [columns, hiddenColumns] = values;
-        this._hiddenColumns = hiddenColumns;
-        this.columns = columns;
-
-        this.gridTemplateColumns = TableUtil.getGridTemplateColumns(
-          ArrayUtil.flatten(columns, 'columns', true)
-            .filter((_) => this._hiddenColumns.indexOf(_.name) < 0)
-            .sort((a, b) => Number(b.locked) - Number(a.locked))
-        );
-        this._cdr.markForCheck();
-      });
-
-    this._svc.state.pipe(takeWhile((_) => this._alive)).subscribe((_) => {
-      this.state = _;
-      this._cdr.markForCheck();
-    });
-  }
-
-  getSpan(): string {
-    if (this.locked?.length > 0) {
-      let span = this.locked.length;
-      if (this.selectType !== SelectType.none) {
-        span += 1;
-      }
-      return `span ${span}`;
-    }
-    return null;
-  }
-
-  getLockedGridTemplateColumns(columns: TableColumn[]) {
-    let template = TableUtil.getGridTemplateColumns(columns);
-    if (this.selectType !== SelectType.none) {
-      template = `48px ${template}`;
-    }
-    return template;
-  }
-
-  track(index: number, item: TableColumn): any {
-    return item.name;
-  }
-
-  ngOnInit(): void {}
-
-  ngOnDestroy(): void {
-    this._alive = false;
-  }
-}

package/src/component/table/table-head-group/table-head-group.component.html

@@ -1,24 +0,0 @@
-<ng-container *ngIf="column.columns && column.columns.length > 0">
-  <div class="table-head__group__container">
-    <div class="table-head__group__caption">
-      {{column.caption}}
-    </div>
-    <div class="table-head__group__children" [style.grid-template-columns]="gridTemplateColumns">
-      <ng-container *ngFor="let col of column.columns">
-        <teta-table-head-group
-          class="table-head__group"
-          *ngIf="!columnIsHidden(col)"
-          [showHeadCellMenu]="showHeadCellMenu"
-          [column]="col"></teta-table-head-group>
-      </ng-container>
-    </div>
-  </div>
-</ng-container>
-<ng-container *ngIf="!column.columns || column.columns.length === 0">
-  <teta-head-cell
-    *ngIf="!columnIsHidden(column)"
-    class="table-head__cell"
-    [showHeadCellMenu]="showHeadCellMenu"
-    [attr.data-column]="column.name"
-    [column]="column"></teta-head-cell>
-</ng-container>