@tetacom/ng-components 1.0.25 → 1.0.26

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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