@tetacom/ng-components 1.0.24 → 1.0.25

package/src/component/switch/switch-button/switch-button.component.ts

@@ -0,0 +1,55 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { SwitchService } from '../switch.service';
+import { takeWhile } from 'rxjs/operators';
+
+@Component({
+  selector: 'teta-switch-button',
+  templateUrl: './switch-button.component.html',
+  styleUrls: ['./switch-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SwitchButtonComponent implements OnInit, OnDestroy {
+  @Input() value: any;
+  @Input() class: string;
+
+  @HostBinding('class')
+  private get getClass(): string {
+    const result = [this.class, 'switch-button'];
+    if (
+      this.svcValue === this.value ||
+      (this.svcValue instanceof Array && this.svcValue.indexOf(this.value) >= 0)
+    ) {
+      result.push('switch-button_active');
+    }
+    return result.join(' ');
+  }
+
+  private svcValue: any;
+  private _alive = true;
+
+  constructor(private svc: SwitchService, private cdr: ChangeDetectorRef) {
+    this.svc.value.pipe(takeWhile((_) => this._alive)).subscribe((_) => {
+      this.svcValue = _;
+      this.cdr.markForCheck();
+    });
+  }
+
+  @HostListener('click', ['$event']) click(event: MouseEvent): void {
+    this.svc.setValue(this.value);
+  }
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {
+    this._alive = false;
+  }
+}

package/src/component/switch/switch.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {SwitchComponent} from './switch/switch.component';
+import {SwitchButtonComponent} from './switch-button/switch-button.component';
+
+
+@NgModule({
+  declarations: [SwitchComponent, SwitchButtonComponent],
+  exports: [SwitchComponent, SwitchButtonComponent],
+  imports: [
+    CommonModule
+  ]
+})
+export class SwitchModule {
+}

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

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

package/src/component/switch/switch.service.ts

@@ -0,0 +1,18 @@
+import {Injectable} from '@angular/core';
+import {Observable, ReplaySubject} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SwitchService {
+  readonly value: Observable<any>;
+  private readonly value$: ReplaySubject<any> = new ReplaySubject<any>(1);
+
+  constructor() {
+    this.value = this.value$.asObservable();
+  }
+
+  setValue(value: any) {
+    this.value$.next(value);
+  }
+}

package/src/component/table/Table.stories.ts

@@ -0,0 +1,102 @@
+import {Meta} from '@storybook/angular/types-6-0';
+import {select, withKnobs} from '@storybook/addon-knobs';
+import {TableModule} from './table.module';
+import {EditType} from './enum/edit-type.enum';
+import {EditEvent} from './enum/edit-event.enum';
+import {SelectType} from './enum/select-type.enum';
+import {IconModule} from '../icon/icon.module';
+import {TableDemoModule} from './table-demo/table-demo.module';
+
+export default {
+  title: 'Component/Table',
+  decorators: [withKnobs],
+  moduleMetadata: {
+    imports: [TableModule],
+  },
+} as Meta;
+
+export const basicTable = () => ({
+  moduleMetadata: {
+    imports: [TableDemoModule, IconModule],
+  },
+  props: {
+    editType: select(
+      'editType',
+      {
+        row: EditType.row,
+        cell: EditType.cell,
+      },
+      EditType.cell
+    ),
+    selectType: select(
+      'selectType',
+      {
+        none: SelectType.none,
+        multiple: SelectType.multiple,
+        single: SelectType.single,
+      },
+      SelectType.multiple
+    ),
+    editEvent: select(
+      'editEvent',
+      {
+        focus: EditEvent.focus,
+        click: EditEvent.click,
+        doubleClick: EditEvent.doubleClick,
+      },
+      EditEvent.doubleClick
+    ),
+  },
+  template: `<div [tetaIconSprite]="['assets/icons.svg', 'assets/color-icons.svg']"
+                  class="bg-panel-50 padding-3"
+                  style="display: flex; width: 1200px; height: 600px;">
+                <teta-table-demo [size]="50"
+                                  [editEvent]="editEvent"
+                                  [editType]="editType"
+                                  [selectType]="selectType"
+                                  [virtual]="false"></teta-table-demo>
+            </div>`,
+});
+
+export const virtualTable = () => ({
+  moduleMetadata: {
+    imports: [TableDemoModule, IconModule],
+  },
+  props: {
+    editType: select(
+      'editType',
+      {
+        row: EditType.row,
+        cell: EditType.cell,
+      },
+      EditType.cell
+    ),
+    selectType: select(
+      'selectType',
+      {
+        none: SelectType.none,
+        multiple: SelectType.multiple,
+        single: SelectType.single,
+      },
+      SelectType.multiple
+    ),
+    editEvent: select(
+      'editEvent',
+      {
+        focus: EditEvent.focus,
+        click: EditEvent.click,
+        doubleClick: EditEvent.doubleClick,
+      },
+      EditEvent.doubleClick
+    ),
+  },
+  template: `<div [tetaIconSprite]="['assets/icons.svg', 'assets/color-icons.svg']"
+                  class="bg-panel-50 padding-3"
+                  style="display: flex; width: 1200px; height: 600px;">
+                <teta-table-demo [size]="1000"
+                                  [editEvent]="editEvent"
+                                  [editType]="editType"
+                                  [selectType]="selectType"
+                                  [virtual]="true"></teta-table-demo>
+            </div>`,
+});

package/src/component/table/base/cell-component-base.ts

@@ -0,0 +1,146 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import {TableService} from '../service/table.service';
+import {TableRow} from '../contract/table-row';
+import {takeWhile} from 'rxjs/operators';
+import {ICellCoordinates} from '../contract/i-cell-coordinates';
+import {TableColumn} from '../contract/table-column';
+import {IIdName} from '../../../common/contract/i-id-name';
+import {ICellValue} from '../contract/i-cell-value';
+import {IDictionary} from '../../../common/contract/i-dictionary';
+
+@Component({
+  template: '',
+})
+export abstract class CellComponentBase<T> implements OnInit, OnDestroy {
+  @HostBinding('class.cell-component')
+  private readonly tableCellComponent = true;
+
+  get edit() {
+    return (
+      this._edit &&
+      this.svc.boolOrFuncCallback(this.column.editable)({
+        column: this.column,
+        row: this.row,
+      })
+    );
+  }
+
+  _edit: boolean;
+  column: TableColumn;
+  filterOptions: IIdName<any>[] = [];
+  dict: IDictionary<IIdName<any>[]> = {};
+  row: TableRow<T>;
+
+  protected _alive = true;
+
+  protected constructor(
+    protected svc: TableService<T>,
+    protected cdr: ChangeDetectorRef
+  ) {
+  }
+
+  valueChanged(): void {
+    this.svc.changeValue({
+      column: this.column,
+      row: this.row,
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._alive = false;
+  }
+
+  ngOnInit(): void {
+    this.init();
+  }
+
+  private init(): void {
+    this.svc.editRowStart
+      .pipe(
+        takeWhile((_) => this._alive)
+      )
+      .subscribe((cell: ICellCoordinates<T>) => {
+        if (
+          this.row === cell?.row &&
+          !this._edit
+          // &&
+          // this.svc.boolOrFuncCallback(this.svc.cellEditable)({
+          //   column: this.column,
+          //   row: this.row,
+          // })
+        ) {
+          this.start(cell, 'row');
+        }
+        if (this.row !== cell?.row && this._edit) {
+          this.stop();
+        }
+      });
+
+    this.svc.editCellStart
+      .pipe(
+        takeWhile((_) => this._alive)
+      )
+      .subscribe((cell: ICellCoordinates<T>) => {
+        if (
+          this.row === cell.row &&
+          this.column.name === cell.column.name &&
+          !this._edit
+        ) {
+          this.start(cell, 'cell');
+        }
+        if (
+          (this.row !== cell.row || this.column.name !== cell.column.name) &&
+          this._edit
+        ) {
+          this.stop();
+        }
+      });
+
+    this.svc.valueSet
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((cellValue: ICellValue<T>) => {
+        if (
+          this.row === cellValue.cell.row
+          && this.column.name === cellValue.cell.column.name
+        ) {
+          this.row.data[this.column.name] = cellValue.value;
+          this.cdr.detectChanges();
+        }
+      });
+
+    this.svc.valueChanged
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((cellValue: ICellCoordinates<T>) => {
+        if (
+          this.row === cellValue.row
+        ) {
+          this.cdr.detectChanges();
+        }
+      });
+  }
+
+  private start(initiator: ICellCoordinates<T>, type: 'cell' | 'row') {
+    this._edit = true;
+    this.startEdit(initiator, type);
+    this.cdr.markForCheck();
+  }
+
+  private stop() {
+    this._edit = false;
+    this.stopEdit();
+    this.cdr.markForCheck();
+  }
+
+  abstract startEdit(
+    initiator: ICellCoordinates<T>,
+    type: 'cell' | 'row'
+  ): void;
+
+  abstract stopEdit(): void;
+}

package/src/component/table/base/detail-component-base.ts

@@ -0,0 +1,13 @@
+import {TableRow} from '../contract/table-row';
+import {TableColumn} from '../contract/table-column';
+
+export abstract class DetailComponentBase<T> {
+  /**
+   * The row details are displayed for
+   */
+  abstract row: TableRow<T>;
+  /**
+   * displayed columns
+   */
+  abstract columns: TableColumn[];
+}

package/src/component/table/base/group-row-component-base.ts

@@ -0,0 +1,13 @@
+import {TableRow} from '../contract/table-row';
+import {TableColumn} from '../contract/table-column';
+
+export abstract class GroupRowComponentBase<T> {
+  /**
+   * The row details are displayed for
+   */
+  abstract row: TableRow<T>;
+  /**
+   * displayed columns
+   */
+  abstract columns: TableColumn[];
+}

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

@@ -0,0 +1,12 @@
+import {Component, HostBinding} from '@angular/core';
+import {TableColumn} from '../contract/table-column';
+
+@Component({
+  template: ''
+})
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export abstract class HeadCellComponentBase {
+  @HostBinding('class.table-head__cell__component')
+
+  abstract column: TableColumn;
+}

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

@@ -0,0 +1,4 @@
+<teta-cell-host [row]="row"
+                [column]="column"
+                [filterOptions]="filterOptions"
+                [dict]="dict"></teta-cell-host>

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

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

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

@@ -0,0 +1,37 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { TableColumn } from '../contract/table-column';
+import { TableRow } from '../contract/table-row';
+import { TableService } from '../service/table.service';
+import { IIdName } from '../../../common/contract/i-id-name';
+import { IDictionary } from '../../../common/contract/i-dictionary';
+
+@Component({
+  selector: 'teta-cell',
+  templateUrl: './cell.component.html',
+  styleUrls: ['./cell.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CellComponent<T> implements OnInit, OnDestroy {
+  @Input() column: TableColumn;
+  @Input() filterOptions: IIdName<any>[];
+  @Input() dict: IDictionary<IIdName<any>[]>;
+  @Input() row: TableRow<T>;
+  @HostBinding('class.cell') private readonly tableCellClass = true;
+
+  private alive = true;
+
+  constructor(protected _svc: TableService<T>) {}
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {
+    this.alive = false;
+  }
+}

package/src/component/table/cell-host/cell-host.component.html

@@ -0,0 +1 @@
+<p>table-cell-wrapper works!</p>

package/src/component/table/cell-host/cell-host.component.spec.ts

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

package/src/component/table/cell-host/cell-host.component.ts

@@ -0,0 +1,67 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ComponentRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+  ViewContainerRef,
+} from '@angular/core';
+import { CellComponentBase } from '../base/cell-component-base';
+import { TableColumn } from '../contract/table-column';
+import { TableRow } from '../contract/table-row';
+import { getCellComponent } from '../contract/cell-components-map';
+import { IIdName } from '../../../common/contract/i-id-name';
+import { IDictionary } from '../../../common/contract/i-dictionary';
+
+@Component({
+  selector: 'teta-cell-host',
+  template: '',
+  styleUrls: ['./cell-host.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CellHostComponent<T> implements OnInit, OnDestroy, OnChanges {
+  @Input() column: TableColumn;
+  @Input() row: TableRow<T>;
+  @Input() filterOptions: IIdName<any>[];
+  @Input() dict: IDictionary<IIdName<any>[]>;
+  private _init = false;
+  private _componentRef: ComponentRef<any>;
+
+  constructor(private viewContainerRef: ViewContainerRef) {}
+
+  ngOnInit(): void {
+    if (!CellComponentBase.isPrototypeOf(this.column.cellComponent)) {
+      this.column.cellComponent = getCellComponent(this.column);
+    }
+    this._componentRef = this.viewContainerRef.createComponent(
+      this.column.cellComponent
+    );
+    this._componentRef.instance.column = this.column;
+    this._componentRef.instance.row = this.row;
+    this._componentRef.instance.filterOptions = this.filterOptions;
+    this._componentRef.instance.dict = this.dict;
+    this._init = true;
+  }
+
+  ngOnDestroy(): void {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      this._init &&
+      (changes.hasOwnProperty('row') ||
+        changes.hasOwnProperty('column') ||
+        changes.hasOwnProperty('filterOptions') ||
+        changes.hasOwnProperty('dict'))
+    ) {
+      this._componentRef.instance.row = this.row;
+      this._componentRef.instance.column = this.column;
+      this._componentRef.instance.filterOptions = this.filterOptions;
+      this._componentRef.instance.dict = this.dict;
+      this._componentRef.injector.get(ChangeDetectorRef).markForCheck();
+    }
+  }
+}

package/src/component/table/contract/cell-components-map.ts

@@ -0,0 +1,24 @@
+import { FilterType } from '../../filter/enum/filter-type.enum';
+import { Type } from '@angular/core';
+import { NumericCellComponent } from '../default/numeric-cell/numeric-cell.component';
+import { DateCellComponent } from '../default/date-cell/date-cell.component';
+import { ListCellComponent } from '../default/list-cell/list-cell.component';
+import { StringCellComponent } from '../default/string-cell/string-cell.component';
+import { TableColumn } from './table-column';
+import { BooleanCellComponent } from '../default/boolean-cell/boolean-cell.component';
+
+const cellComponentsMap: Map<FilterType, Type<any>> = new Map<
+  FilterType,
+  Type<any>
+>()
+  .set(FilterType.number, NumericCellComponent)
+  .set(FilterType.date, DateCellComponent)
+  .set(FilterType.list, ListCellComponent)
+  .set(FilterType.string, StringCellComponent)
+  .set(FilterType.boolean, BooleanCellComponent)
+  .set(FilterType.custom, StringCellComponent);
+
+export const getCellComponent = (column: TableColumn): Type<any> =>
+  cellComponentsMap.has(column.filterType)
+    ? cellComponentsMap.get(column.filterType)
+    : StringCellComponent;

package/src/component/table/contract/column-reorder-event.ts

@@ -0,0 +1,11 @@
+import {TableColumn} from './table-column';
+
+export class ColumnReorderEvent {
+  source: TableColumn;
+  target: TableColumn;
+
+  constructor(source: TableColumn, target: TableColumn) {
+    this.source = source;
+    this.target = target;
+  }
+}

package/src/component/table/contract/column-resize-event.ts

@@ -0,0 +1,11 @@
+import { TableColumn } from './table-column';
+
+export class ColumnResizeEvent {
+  column: TableColumn;
+  newWidth: number;
+
+  constructor(column: TableColumn, newWidth: number) {
+    this.column = column;
+    this.newWidth = newWidth;
+  }
+}

package/src/component/table/contract/i-cell-coordinates.ts

@@ -0,0 +1,8 @@
+import {TableRow} from './table-row';
+import {TableColumn} from './table-column';
+
+export interface ICellCoordinates<T> {
+  row: TableRow<T>;
+  column: TableColumn;
+}
+

package/src/component/table/contract/i-cell-event.ts

@@ -0,0 +1,5 @@
+import { ICellCoordinates } from './i-cell-coordinates';
+
+export interface ICellEvent<T> extends ICellCoordinates<T> {
+  event: Event;
+}

package/src/component/table/contract/i-cell-value.ts

@@ -0,0 +1,6 @@
+import { ICellCoordinates } from './i-cell-coordinates';
+
+export interface ICellValue<T> {
+  cell: ICellCoordinates<T>;
+  value: any;
+}

package/src/component/table/contract/public-api.ts

@@ -0,0 +1,11 @@
+export * from './cell-components-map';
+export * from './column-reorder-event';
+export * from './column-resize-event';
+export * from './i-cell-coordinates';
+export * from './i-cell-event';
+export * from './i-cell-value';
+export * from './sort-event';
+export * from './table-column';
+export * from './table-column-store';
+export * from './table-context-menu-config';
+export * from './table-row';

package/src/component/table/contract/sort-event.ts

@@ -0,0 +1,11 @@
+import {TableColumn} from './table-column';
+
+export class SortEvent {
+  column: TableColumn;
+  shiftKey: boolean;
+
+  constructor(column: TableColumn, shiftKey: boolean) {
+    this.column = column;
+    this.shiftKey = shiftKey;
+  }
+}