@tetacom/ng-components 1.0.24 → 1.0.25

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

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

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

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

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

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

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

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

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

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

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