@tetacom/ng-components 1.0.24 → 1.0.25

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

@@ -0,0 +1,145 @@
+<teta-tabs class="column_auto">
+  <teta-tab *ngIf="column.filterable">
+    <ng-template tetaTabTitle>
+      <teta-icon [name]="'filter'"></teta-icon>
+    </ng-template>
+    <ng-template tetaTabContent>
+      <teta-filter-host [column]="column" [state]="state"
+                        *ngIf="dict | async as d"
+                        [filterOptions]="d[column.name]"></teta-filter-host>
+      <teta-toolbar class="justify-content-between">
+        <button teta-button [palette]="'text'" [view]="'ghost'" (click)="clearFilter()">
+          Очистить
+        </button>
+        <button teta-button [palette]="'primary'" (click)="applyFilter()">
+          <teta-icon [name]="'tick'"></teta-icon>
+          Применить
+        </button>
+      </teta-toolbar>
+    </ng-template>
+  </teta-tab>
+  <teta-tab *ngIf="column.headDropdownTemplate">
+    <ng-template tetaTabTitle>
+      <teta-icon [name]="'measurement'"></teta-icon>
+    </ng-template>
+    <ng-template tetaTabContent>
+      <ng-container
+        *ngTemplateOutlet="column.headDropdownTemplate; context: {$implicit: column, column: column}"></ng-container>
+    </ng-template>
+  </teta-tab>
+  <teta-tab>
+    <ng-template tetaTabTitle>
+      <teta-icon [name]="'menu'"></teta-icon>
+    </ng-template>
+    <ng-template tetaTabContent>
+      <div class="list column_auto">
+        <div class="list-item list-item_interactive" (click)="pinColumn()">
+          <teta-icon [palette]="'text'"
+                     [name]="column.locked ? 'unpin' : 'pin'"
+                     class="margin-right-2"></teta-icon>
+          {{column.locked ? 'Открепить' : 'Закрепить'}}
+        </div>
+        <div class="list-divider"></div>
+        <ng-container *ngIf="hasSortedColumns()">
+          <div class="list-item list-item_interactive"
+               *ngIf="sortParam"
+               (click)="clearSort()">
+            <teta-icon [palette]="'text'"
+                       [name]="'pin'" class="margin-right-2"></teta-icon>
+            Сбросить сортировку
+          </div>
+          <div class="list-item list-item_interactive"
+               (click)="clearAllSort()">
+            <teta-icon [palette]="'text'"
+                       [name]="'pin'"
+                       class="margin-right-2"></teta-icon>
+            Сбросить все сортировки
+          </div>
+          <div class="list-divider"></div>
+        </ng-container>
+        <ng-container *ngIf="hasFilteredColumns()">
+          <div class="list-item list-item_interactive"
+               *ngIf="filtered"
+               (click)="clearFilter()">
+            <teta-icon [palette]="'text'"
+                       [name]="'pin'"
+                       class="margin-right-2"></teta-icon>
+            Очистить фильтр
+          </div>
+          <div class="list-item list-item_interactive"
+               (click)="clearAllFilters()">
+            <teta-icon [palette]="'text'"
+                       [name]="'pin'"
+                       class="margin-right-2"></teta-icon>
+            Очистить все фильтры
+          </div>
+          <div class="list-divider"></div>
+        </ng-container>
+        <div class="list-item list-item_interactive" (click)="autosize.emit()">
+          <teta-icon [palette]="'text'"
+                     [name]="'autoSize'"
+                     class="margin-right-2"></teta-icon>
+          Авторазмер колонки
+        </div>
+        <div class="list-item list-item_interactive" (click)="autosizeAll.emit()">
+          <teta-icon [palette]="'text'"
+                     [name]="'autoSizeAll'"
+                     class="margin-right-2"></teta-icon>
+          Авторазмер всех колонок
+        </div>
+        <div class="list-divider"></div>
+        <div class="list-item list-item_interactive" (click)="restoreDefaultColumns()">
+          <teta-icon [palette]="'text'"
+                     [name]="'undo'"
+                     class="margin-right-2"></teta-icon>
+          Отменить все изменения
+        </div>
+      </div>
+    </ng-template>
+  </teta-tab>
+  <teta-tab>
+    <ng-template tetaTabTitle>
+      <teta-icon [name]="'eye'"></teta-icon>
+    </ng-template>
+    <ng-template tetaTabContent>
+      <div class="list-item padding-left-6 padding-top-2" [class.padding-left-9]="childMode">
+        <teta-checkbox [binary]="true"
+                       [allowNull]="true"
+                       [ngModel]="allColumnsVisible()"
+                       (ngModelChange)="setAllColumns($event)">
+          Все
+        </teta-checkbox>
+      </div>
+      <div class="list-divider"></div>
+      <div class="padding-v-2 column column_auto scrollable">
+        <teta-tree [data]="columns"
+                   [openItems]="openItems"
+                   (openItemsChange)="openItems = $event"
+                   [childNodeName]="'columns'"
+                   [compareItems]="compareItems">
+          <ng-template tetaTemplate let-item>
+            <div class="tree__item">
+              <teta-tree-item-toggle [item]="item" *ngIf="item.columns?.length > 0"></teta-tree-item-toggle>
+              <teta-checkbox
+                [ngModel]="!columnIsHidden(item)"
+                (ngModelChange)="setColumnVisibility(item, $event)"
+                (click)="$event.stopPropagation()"
+                [binary]="true"
+              >
+                {{item.caption}}
+              </teta-checkbox>
+            </div>
+          </ng-template>
+        </teta-tree>
+      </div>
+      <teta-toolbar class="justify-content-end">
+        <button teta-button
+                [disabled]="allColumnsVisible() === false"
+                [palette]="'primary'"
+                (click)="setColumnsVisibility()">
+          Применить
+        </button>
+      </teta-toolbar>
+    </ng-template>
+  </teta-tab>
+</teta-tabs>

package/src/component/table/head-cell-dropdown/head-cell-dropdown.component.scss

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

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

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

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

@@ -0,0 +1,240 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { TableService } from '../service/table.service';
+import { TableColumn } from '../contract/table-column';
+import { FilterState } from '../../filter/contarct/filter-state';
+import { StateUtil } from '../util/state-util';
+import { ITreeData } from '../../../common/contract/i-tree-data';
+import { IDictionary } from '../../../common/contract/i-dictionary';
+import { IIdName } from '../../../common/contract/i-id-name';
+import { Observable } from 'rxjs';
+import { map, takeWhile } from 'rxjs/operators';
+import { ArrayUtil } from '../../../common/util/array-util';
+import {SortParam} from '../../filter/contarct/sort-param';
+
+@Component({
+  selector: 'teta-head-cell-dropdown',
+  templateUrl: './head-cell-dropdown.component.html',
+  styleUrls: ['./head-cell-dropdown.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeadCellDropdownComponent<T> implements OnInit, OnDestroy {
+  @Input() columns: ITreeData[];
+  @Input() column: TableColumn;
+  @Input() state: FilterState;
+  @Input() dropDownOpen: boolean;
+  @Output() dropDownOpenChange: EventEmitter<boolean> =
+    new EventEmitter<boolean>();
+
+  @Output() autosize: EventEmitter<void> = new EventEmitter<void>();
+  @Output() autosizeAll: EventEmitter<void> = new EventEmitter<void>();
+
+  @HostBinding('class.shadow-2') private readonly shadow = true;
+  @HostBinding('class.bg-background-50') private readonly bg = true;
+
+  dict: Observable<IDictionary<IIdName<any>[]>>;
+  hiddenColumns: string[];
+
+  get sortParam(): SortParam {
+    return StateUtil.getSortState(this.state, this.column);
+  }
+
+  get filtered() {
+    return StateUtil.isColumnFiltered(this.state, this.column);
+  }
+
+  get openItems() {
+    if (this._openItems == null) {
+      this._openItems = this.columns.map((_) => _);
+    }
+    return this._openItems;
+  }
+
+  set openItems(openItems: ITreeData[]) {
+    this._openItems = openItems;
+  }
+
+  get childMode() {
+    return this.columns.find((_: any) => _.columns?.length > 0);
+  }
+
+  private _openItems: ITreeData[];
+  private _alive = true;
+
+  constructor(private _svc: TableService<T>, private _cdr: ChangeDetectorRef) {
+    this.dict = this._svc.dict;
+    this._svc.hiddenColumns
+      .pipe(
+        takeWhile((_) => this._alive),
+        map((_) => [..._])
+      )
+      .subscribe((_) => {
+        this.hiddenColumns = _;
+      });
+  }
+
+  clearFilter() {
+    this._svc.clearFilter(this.column);
+    this.dropDownOpenChange.emit(false);
+    this._cdr.markForCheck();
+  }
+
+  applyFilter() {
+    this._svc.setState(new FilterState(this.state));
+    this.dropDownOpenChange.emit(false);
+    this._cdr.markForCheck();
+  }
+
+  pinColumn() {
+    this._svc.pinColumn(this.column);
+  }
+
+  clearSort(): void {
+    this._svc.clearSort(this.column);
+  }
+
+  clearAllSort(): void {
+    this._svc.clearAllSort();
+  }
+
+  hasFilteredColumns() {
+    return StateUtil.hasFilteredColumns(this.state);
+  }
+
+  hasSortedColumns() {
+    return StateUtil.hasSortedColumns(this.state);
+  }
+
+  restoreDefaultColumns() {
+    this._svc.restoreDefaultColumns();
+  }
+
+  clearAllFilters() {
+    this._svc.clearAllFilters();
+    this.dropDownOpen = false;
+    this._cdr.markForCheck();
+  }
+
+  columnIsHidden(column: TableColumn) {
+    return this.hiddenColumns.indexOf(column.name) >= 0;
+  }
+
+  allColumnsVisible() {
+    if (this.hiddenColumns?.length <= 0) {
+      return true;
+    }
+    const columns = ArrayUtil.flatten(this.columns, 'columns');
+    const notHidden = columns.find(
+      (_) => this.hiddenColumns.indexOf(_.name) < 0
+    );
+    if (!notHidden) {
+      return false;
+    }
+    return null;
+  }
+
+  setAllColumns(value: boolean) {
+    if (value) {
+      this.hiddenColumns = [];
+    } else {
+      this.hiddenColumns = ArrayUtil.flatten(this.columns, 'columns').map(
+        (_) => _.name
+      );
+    }
+  }
+
+  setColumnsVisibility() {
+    this._svc.setHiddenColumns(this.hiddenColumns);
+  }
+
+  compareItems = (item: TableColumn) => item.name;
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {
+    this._alive = false;
+  }
+
+  setColumnVisibility(item: TableColumn, visible: boolean) {
+    this.setChildrenVisibility(item, visible, this.hiddenColumns);
+    this.setParentsVisibility(item, visible, this.hiddenColumns);
+  }
+
+  setChildrenVisibility = (
+    column: TableColumn,
+    visible: boolean,
+    hiddenColumns: string[]
+  ) => {
+    if (visible) {
+      this.showColumn(column, hiddenColumns);
+    } else {
+      this.hideColumn(column, hiddenColumns);
+    }
+    if (column.columns) {
+      column.columns.forEach((x) => {
+        this.setChildrenVisibility(x, visible, hiddenColumns);
+      });
+    }
+  };
+
+  setParentsVisibility = (
+    column: TableColumn,
+    visible: boolean,
+    hiddenColumns: string[]
+  ) => {
+    if (!visible) {
+      this.hideParents(column, hiddenColumns);
+    } else {
+      this.showParents(column, hiddenColumns);
+    }
+  };
+
+  showParents(column: TableColumn, hiddenColumns: string[]) {
+    const parent = this.findParentColumn(column, this.columns as TableColumn[]);
+    if (parent && this.columnIsHidden(parent)) {
+      this.showColumn(parent, hiddenColumns);
+      this.showParents(parent, hiddenColumns);
+    }
+  }
+
+  hideParents(column: TableColumn, hiddenColumns: string[]) {
+    const parent = this.findParentColumn(column, this.columns as TableColumn[]);
+    if (
+      parent &&
+      !this.columnIsHidden(parent) &&
+      parent.columns &&
+      parent.columns.every((_) => this.columnIsHidden(_))
+    ) {
+      this.hideColumn(parent, hiddenColumns);
+      this.hideParents(parent, hiddenColumns);
+    }
+  }
+
+  hideColumn(column: TableColumn, hiddenColumns: string[]) {
+    hiddenColumns.push(column.name);
+  }
+
+  showColumn(column: TableColumn, hiddenColumns: string[]) {
+    hiddenColumns.splice(hiddenColumns.indexOf(column.name), 1);
+  }
+
+  private findParentColumn(
+    column: TableColumn,
+    columns: TableColumn[]
+  ): TableColumn | null {
+    return ArrayUtil.findRecursive(
+      columns,
+      (iterableNode) => iterableNode.columns?.indexOf(column) >= 0,
+      'columns'
+    );
+  }
+}

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

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

package/src/component/table/head-cell-host/head-cell-host.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}

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

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

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

@@ -0,0 +1,50 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ComponentRef,
+  Input,
+  OnInit,
+  ViewContainerRef,
+} from '@angular/core';
+import {HeadCellComponentBase} from '../base/head-cell-component-base';
+import {TableColumn} from '../contract/table-column';
+import {DefaultHeadCellComponent} from '../default/default-head-cell/default-head-cell.component';
+
+@Component({
+  selector: 'teta-head-cell-host',
+  template: '',
+  styleUrls: ['./head-cell-host.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeadCellHostComponent implements OnInit {
+  private _column: TableColumn;
+  private componentRef: ComponentRef<HeadCellComponentBase>;
+  private init: boolean;
+
+  @Input()
+  set column(column: TableColumn) {
+    this._column = column;
+    if (this.init) {
+      this.componentRef.instance.column = this._column;
+    }
+  }
+
+  get column(): TableColumn {
+    return this._column;
+  }
+
+  constructor(
+    private viewContainerRef: ViewContainerRef
+  ) {
+  }
+
+  ngOnInit(): void {
+    if (!HeadCellComponentBase.isPrototypeOf(this.column.headCellComponent)) {
+      this.column.headCellComponent = DefaultHeadCellComponent;
+    }
+    this.componentRef =
+      this.viewContainerRef.createComponent<HeadCellComponentBase>(this.column.headCellComponent);
+    this.componentRef.instance.column = this.column;
+    this.init = true;
+  }
+}

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

@@ -0,0 +1,48 @@
+export * from './table.module';
+
+/**
+ * Components
+ */
+export * from './table/table.component';
+export * from './table-head/table-head.component';
+export * from './table-body/table-body.component';
+export * from './head-cell-host/head-cell-host.component';
+export * from './cell/cell.component';
+export * from './cell-host/cell-host.component';
+
+/**
+ * default
+ */
+export * from './default/date-cell/date-cell.component';
+export * from './default/boolean-cell/boolean-cell.component';
+export * from './default/date-time-cell/date-time-cell.component';
+export * from './default/group-row/group-row.component';
+export * from './default/list-cell/list-cell.component';
+export * from './default/numeric-cell/numeric-cell.component';
+export * from './default/string-cell/string-cell.component';
+
+/**
+ * base
+ */
+export * from './base/detail-component-base';
+export * from './base/cell-component-base';
+export * from './base/head-cell-component-base';
+
+/**
+ * Service
+ */
+export * from './service/table.service';
+
+/**
+ * contract
+ */
+export * from './contract/public-api';
+
+/**
+ * enum
+ */
+export * from './enum/public-api';
+/**
+ * enum
+ */
+export * from './util/public-api';

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

@@ -0,0 +1,4 @@
+<teta-checkbox [binary]="true"
+               [noLabel]="true"
+               [ngModel]="selectedRows?.indexOf(row) >= 0"
+               (ngModelChange)="selectRow($event)"></teta-checkbox>

package/src/component/table/selection-cell/selection-cell.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

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

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

@@ -0,0 +1,50 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { TableService } from '../service/table.service';
+import { TableRow } from '../contract/table-row';
+import { takeWhile } from 'rxjs/operators';
+
+@Component({
+  selector: 'teta-selection-cell',
+  templateUrl: './selection-cell.component.html',
+  styleUrls: ['./selection-cell.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectionCellComponent<T> implements OnInit, OnDestroy {
+  @Input() row: TableRow<T>;
+
+  @HostBinding('class.cell') private readonly tableCellClass = true;
+  selectedRows: TableRow<T>[] = [];
+
+  private _alive = true;
+
+  constructor(private _svc: TableService<T>, private _cdr: ChangeDetectorRef) {}
+
+  selectRow(value: boolean) {
+    if (value) {
+      this._svc.selectRow(this.row);
+    } else {
+      this._svc.deselectRow(this.row);
+    }
+  }
+
+  ngOnInit(): void {
+    this._svc.selectedRows
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((_) => {
+        this.selectedRows = _;
+        this._cdr.markForCheck();
+      });
+  }
+
+  ngOnDestroy(): void {
+    this._alive = false;
+  }
+}

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

@@ -0,0 +1,5 @@
+<teta-checkbox [binary]="true"
+               [allowNull]="true"
+               [noLabel]="true"
+               [ngModel]="allSelected()"
+               (ngModelChange)="selectAll($event)"></teta-checkbox>

package/src/component/table/selection-head-cell/selection-head-cell.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

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