@tetacom/ng-components 1.0.21 → 1.0.25

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

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

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

@@ -0,0 +1,73 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  HostBinding,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { TableColumn } from '../contract/table-column';
+import { TableUtil } from '../util/table-util';
+import { TableService } from '../service/table.service';
+import { takeWhile } from 'rxjs/operators';
+
+@Component({
+  selector: 'teta-table-head-group',
+  templateUrl: './table-head-group.component.html',
+  styleUrls: ['./table-head-group.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TableHeadGroupComponent<T> implements OnInit, OnDestroy {
+  @Input() showHeadCellMenu: boolean;
+
+  @Input()
+  set column(column: TableColumn) {
+    this._column = column;
+  }
+
+  get column(): TableColumn {
+    return this._column;
+  }
+
+  private _alive = true;
+  private _column: TableColumn;
+  private _hiddenColumns: string[];
+
+  private get _leaves() {
+    return TableUtil.getColumnLeaves(this._column)?.filter(
+      (_) => this._hiddenColumns.indexOf(_.name) < 0
+    );
+  }
+
+  @HostBinding('style.grid-column-end')
+  get gridColumnEnd(): string {
+    if (this._leaves?.length > 0) {
+      return `span ${this._leaves.length}`;
+    }
+    return null;
+  }
+
+  get gridTemplateColumns(): string {
+    return TableUtil.getGridTemplateColumns(this._leaves);
+  }
+
+  constructor(private _svc: TableService<T>, private _cdr: ChangeDetectorRef) {
+    this._svc.hiddenColumns
+      .pipe(takeWhile((_) => this._alive))
+      .subscribe((_) => {
+        this._hiddenColumns = _;
+        this._cdr.markForCheck();
+      });
+  }
+
+  columnIsHidden(column: TableColumn) {
+    return this._svc.columnIsHidden(column);
+  }
+
+  ngOnInit(): void {}
+
+  ngOnDestroy(): void {
+    this._alive = false;
+  }
+}

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

@@ -0,0 +1,100 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TableComponent } from './table/table.component';
+import { FilterModule } from '../filter/filter.module';
+import { NumericCellComponent } from './default/numeric-cell/numeric-cell.component';
+import { ListCellComponent } from './default/list-cell/list-cell.component';
+import { DateCellComponent } from './default/date-cell/date-cell.component';
+import { StringCellComponent } from './default/string-cell/string-cell.component';
+import { HeadCellHostComponent } from './head-cell-host/head-cell-host.component';
+import { TableHeadComponent } from './table-head/table-head.component';
+import { TableBodyComponent } from './table-body/table-body.component';
+import { CellComponent } from './cell/cell.component';
+import { FormsModule } from '@angular/forms';
+import { CheckboxModule } from '../checkbox/checkbox.module';
+import { CellHostComponent } from './cell-host/cell-host.component';
+import { GroupRowComponent } from './default/group-row/group-row.component';
+import { TableHeadGroupComponent } from './table-head-group/table-head-group.component';
+import { HeadCellComponent } from './head-cell/head-cell.component';
+import { DefaultHeadCellComponent } from './default/default-head-cell/default-head-cell.component';
+import { IconModule } from '../icon/icon.module';
+import { DropdownModule } from '../dropdown/dropdown.module';
+import { TabsModule } from '../tabs/tabs.module';
+import { SelectModule } from '../select/select.module';
+import { NumberPipeModule } from '../../pipe/number-pipe/number-pipe.module';
+import { DatePickerModule } from '../date-picker/date-picker.module';
+import { ButtonModule } from '../button/button.module';
+import { SelectionCellComponent } from './selection-cell/selection-cell.component';
+import { SelectionHeadCellComponent } from './selection-head-cell/selection-head-cell.component';
+import { HintModule } from '../../directive/hint/hint.module';
+import { TreeModule } from '../tree/tree.module';
+import { HeadCellDropdownComponent } from './head-cell-dropdown/head-cell-dropdown.component';
+import { DateTimeCellComponent } from './default/date-time-cell/date-time-cell.component';
+import { OnlyNumberModule } from '../../directive/only-number/only-number.module';
+import { BooleanCellComponent } from './default/boolean-cell/boolean-cell.component';
+import { UiScrollModule } from 'ngx-ui-scroll';
+import { ToolbarModule } from '../toolbar/toolbar.module';
+import { ClickOutsideModule } from '../../directive/click-outside/click-outside.module';
+import {ResizeDragModule} from '../../directive/resize-drag/resize-drag.module';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+
+@NgModule({
+  declarations: [
+    TableComponent,
+    NumericCellComponent,
+    ListCellComponent,
+    DateCellComponent,
+    StringCellComponent,
+    HeadCellHostComponent,
+    TableHeadComponent,
+    TableBodyComponent,
+    CellComponent,
+    CellHostComponent,
+    GroupRowComponent,
+    TableHeadGroupComponent,
+    HeadCellComponent,
+    DefaultHeadCellComponent,
+    SelectionCellComponent,
+    SelectionHeadCellComponent,
+    HeadCellDropdownComponent,
+    DateTimeCellComponent,
+    BooleanCellComponent,
+  ],
+  exports: [
+    TableComponent,
+    NumericCellComponent,
+    ListCellComponent,
+    DateCellComponent,
+    StringCellComponent,
+    HeadCellHostComponent,
+    TableHeadComponent,
+    TableBodyComponent,
+    CellComponent,
+    CellHostComponent,
+    GroupRowComponent,
+    DateTimeCellComponent,
+    BooleanCellComponent,
+  ],
+  imports: [
+    CommonModule,
+    FilterModule,
+    FormsModule,
+    CheckboxModule,
+    IconModule,
+    DropdownModule,
+    TabsModule,
+    SelectModule,
+    NumberPipeModule,
+    DatePickerModule,
+    ButtonModule,
+    HintModule,
+    TreeModule,
+    OnlyNumberModule,
+    UiScrollModule,
+    ToolbarModule,
+    ClickOutsideModule,
+    ResizeDragModule,
+    ScrollingModule,
+  ],
+})
+export class TableModule {}

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

@@ -0,0 +1,2 @@
+export * from './state-util';
+export * from './table-util';

package/src/component/table/util/state-util.spec.ts

@@ -0,0 +1,7 @@
+import { StateUtil } from './state-util';
+
+describe('StateUtil', () => {
+  it('should create an instance', () => {
+    expect(new StateUtil()).toBeTruthy();
+  });
+});

package/src/component/table/util/state-util.ts

@@ -0,0 +1,182 @@
+import { FilterState } from '../../filter/contarct/filter-state';
+import { TableColumn } from '../contract/table-column';
+import { SortParam } from '../../filter/contarct/sort-param';
+import { FilterType } from '../../filter/enum/filter-type.enum';
+import { SortEvent } from '../contract/sort-event';
+
+export class StateUtil {
+  static hasSortedColumns(state: FilterState): boolean {
+    return state.sortParams && state.sortParams.length > 0;
+  }
+
+  static hasFilteredColumns(state: FilterState): boolean {
+    let hasFilters = false;
+    if (
+      state.stringFilters &&
+      state.stringFilters.some((filter) => filter.value && filter.value.length)
+    ) {
+      hasFilters = true;
+    }
+    if (
+      state.listFilters &&
+      state.listFilters.some((filter) => filter.value && filter.value.length)
+    ) {
+      hasFilters = true;
+    }
+    if (
+      state.numericFilters &&
+      state.numericFilters.some(
+        (filter) =>
+          filter &&
+          filter.value &&
+          ((filter.value.lessThan !== null &&
+            filter.value.lessThan !== undefined) ||
+            (filter.value.greaterThan !== null &&
+              filter.value.greaterThan !== undefined) ||
+            (filter.value.equalsTo !== null &&
+              filter.value.equalsTo !== undefined))
+      )
+    ) {
+      hasFilters = true;
+    }
+    if (
+      state.dateFilters &&
+      state.dateFilters.some(
+        (filter) =>
+          filter &&
+          filter.value &&
+          ((filter.value.lessThan !== null &&
+            filter.value.lessThan !== undefined) ||
+            (filter.value.greaterThan !== null &&
+              filter.value.greaterThan !== undefined))
+      )
+    ) {
+      hasFilters = true;
+    }
+
+    return hasFilters;
+  }
+
+  static getSortState(
+    state: FilterState,
+    column: TableColumn
+  ): SortParam | null {
+    if (state?.sortParams && state.sortParams.length) {
+      const param = state.sortParams.find((x) => x.field === column.sortField);
+      if (param) {
+        return param;
+      }
+    }
+    return null;
+  }
+
+  static isColumnFiltered(state: FilterState, column: TableColumn): boolean {
+    if (!column.filterable) {
+      return;
+    }
+    let filtered = false;
+    switch (column.filterType) {
+      case FilterType.string:
+        if (state?.stringFilters) {
+          const filter = state.stringFilters.find(
+            (x) => x.field === column.filterField
+          );
+          if (filter && filter.value && filter.value.length) {
+            filtered = true;
+          }
+        }
+        break;
+      case FilterType.list:
+        if (state?.listFilters) {
+          const filter = state.listFilters.find(
+            (x) => x.field === column.filterField
+          );
+          if (filter && filter.value && filter.value.length) {
+            filtered = true;
+          }
+        }
+        break;
+      case FilterType.number:
+        if (state?.numericFilters) {
+          const filter = state.numericFilters.find(
+            (x) => x.field === column.filterField
+          );
+          if (
+            filter &&
+            filter.value &&
+            ((filter.value.lessThan !== null &&
+              filter.value.lessThan !== undefined) ||
+              (filter.value.greaterThan !== null &&
+                filter.value.greaterThan !== undefined) ||
+              (filter.value.equalsTo !== null &&
+                filter.value.equalsTo !== undefined))
+          ) {
+            filtered = true;
+          }
+        }
+        break;
+      case FilterType.date:
+        if (state?.dateFilters) {
+          const filter = state.dateFilters.find(
+            (x) => x.field === column.filterField
+          );
+          if (
+            filter &&
+            filter.value &&
+            ((filter.value.lessThan !== null &&
+              filter.value.lessThan !== undefined) ||
+              (filter.value.greaterThan !== null &&
+                filter.value.greaterThan !== undefined))
+          ) {
+            filtered = true;
+          }
+        }
+        break;
+    }
+    return filtered;
+  }
+
+  static sortColumn(sortEvent: SortEvent, state: FilterState): FilterState {
+    const column = sortEvent.column;
+    const shiftKey = sortEvent.shiftKey;
+    const sort = state.sortParams.find(
+      (sortParam: SortParam) => sortParam.field === column.sortField
+    );
+    if (sort === null || sort === undefined) {
+      if (!shiftKey) {
+        state.sortParams.length = 0;
+      }
+      state.sortParams.push(
+        new SortParam({ field: column.sortField, asc: true, order: 0 })
+      );
+    } else {
+      if (!sort.asc) {
+        state.sortParams = StateUtil.clearSortParam(sort, state.sortParams);
+      } else {
+        sort.asc = !sort.asc;
+        if (!shiftKey) {
+          state.sortParams = [sort];
+        }
+      }
+    }
+    return new FilterState(state);
+  }
+
+  static clearSortParam(sort: SortParam, sortParams: SortParam[]) {
+    const index = sortParams.indexOf(sort);
+    sortParams.splice(index, 1);
+    return sortParams;
+  }
+
+  static clearSort(column: TableColumn, state: FilterState): FilterState {
+    state.sortParams = state.sortParams.filter(
+      (_) => _.field !== column.sortField
+    );
+    return new FilterState(state);
+  }
+
+  static clearAllSort(state: FilterState): FilterState {
+    state.sortParams = [];
+    return new FilterState(state);
+  }
+}

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

@@ -0,0 +1,7 @@
+import { TableUtil } from './table-util';
+
+describe('TableUtil', () => {
+  it('should create an instance', () => {
+    expect(new TableUtil()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,150 @@
+import {TableColumn} from '../contract/table-column';
+import {ArrayUtil} from '../../../common/util/array-util';
+import {SortParam} from '../../filter/contarct/sort-param';
+import {ListFilterType} from '../../filter/enum/list-filter-type.enum';
+import {ListFilter} from '../../filter/contarct/list-filter';
+import {NumericFilter} from '../../filter/contarct/numeric-filter';
+import {DateFilter} from '../../filter/contarct/date-filter';
+import {StringFilterType} from '../../filter/enum/string-filter-type.enum';
+import {StringFilter} from '../../filter/contarct/string-filter';
+import {FilterState} from '../../filter/contarct/filter-state';
+
+export class TableUtil {
+  public static getColumnLeaves(column: TableColumn): TableColumn[] | null {
+    if (column?.columns?.length > 0) {
+      return ArrayUtil.flatten(column.columns, 'columns', true);
+    }
+    return null;
+  }
+
+  public static getGridTemplateColumns(columns: TableColumn[]): string {
+    const res = columns?.map((column: TableColumn) =>
+      column.flex > 0 ? `minmax(${column.width}px, ${column.flex}fr)` : `${column.width}px`).join(' ');
+    return res;
+  }
+
+  static getData<T>(data: T[], state: FilterState): T[] {
+    let result: T[] = data;
+    result = TableUtil.filterData(result, state);
+    result = TableUtil.sortData(result, state);
+    return result;
+  }
+
+  static sortData<T>(data: T[], state: FilterState): T[] {
+    let result: T[] = data;
+    const func = (sortParam: SortParam) => {
+      result = TableUtil.sort(result, sortParam);
+    };
+    if (state?.sortParams?.length > 0) {
+      state.sortParams.forEach(func);
+    }
+    return result;
+  }
+
+  static filterData<T>(data: T[], state: FilterState): T[] {
+    let result: T[] = data;
+    if (state?.stringFilters?.length) {
+      const stringFilter = (filter: StringFilter) => {
+        result = TableUtil.filterString(result, filter);
+      };
+      state.stringFilters.forEach(stringFilter);
+    }
+    if (state?.dateFilters?.length) {
+      const dateFilter = (filter: DateFilter) => {
+        result = TableUtil.filterDate(result, filter);
+      };
+      state.dateFilters.forEach(dateFilter);
+    }
+    if (state?.numericFilters?.length) {
+      const numericFilter = (filter: NumericFilter) => {
+        result = TableUtil.filterNumber(result, filter);
+      };
+      state.numericFilters.forEach(numericFilter);
+    }
+    if (state?.listFilters?.length) {
+      const listFilter = (filter: ListFilter) => {
+        result = TableUtil.filterList(result, filter);
+      };
+      state.listFilters.forEach(listFilter);
+    }
+    return result;
+  }
+
+  static filterString<T>(data: T[], filter: StringFilter): T[] {
+    if (filter.value === null || filter.value === undefined) {
+      return data;
+    }
+    const filterString = (row: T) => {
+      const item = row as any;
+      if (filter.type === StringFilterType.EndsWith) {
+        return item[filter.field].endsWith(filter.value);
+      }
+      if (filter.type === StringFilterType.Equals) {
+        return item[filter.field] === filter.value;
+      }
+      if (filter.type === StringFilterType.StartsWith) {
+        return item[filter.field].startsWith(filter.value);
+      }
+      return item[filter.field].indexOf(filter.value) >= 0;
+    };
+    return data.filter(filterString);
+  }
+
+  static filterDate<T>(data: T[], filter: DateFilter): T[] {
+    const filterDate = (row: T) => {
+      const item = row as any;
+      return (filter.value.lessThan === null || filter.value.lessThan === undefined
+          ? true
+          : filter.value.lessThan.getTime() > item[filter.field].getTime()) &&
+        (filter.value.greaterThan === null || filter.value.greaterThan === undefined
+          ? true
+          : filter.value.greaterThan.getTime() < item[filter.field].getTime());
+    };
+    return data.filter(filterDate);
+  }
+
+  static filterNumber<T>(data: T[], filter: NumericFilter): T[] {
+    const filterNumber = (row: T) => {
+      const item = row as any;
+      return (filter.value.lessThan === null || filter.value.lessThan === undefined
+          ? true
+          : filter.value.lessThan > item[filter.field]) &&
+        (filter.value.greaterThan === null || filter.value.greaterThan === undefined
+          ? true
+          : filter.value.greaterThan < item[filter.field]) &&
+        (filter.value.equalsTo === null || filter.value.equalsTo === undefined
+          ? true
+          : filter.value.equalsTo === item[filter.field]);
+    };
+    return data.filter(filterNumber);
+  }
+
+  static filterList<T>(data: T[], filter: ListFilter): T[] {
+    if (filter.value === null || filter.value === undefined || filter.value.length < 1) {
+      return data;
+    }
+    const filterList = (row: T) => {
+      const item = row as any;
+      if (filter.type === ListFilterType.Excluded) {
+        return filter.value.indexOf(item[filter.field]) < 0;
+      }
+      return filter.value.indexOf(item[filter.field]) >= 0;
+    };
+    return data.filter(filterList);
+  }
+
+  static sort<T>(data: T[], sortParam: SortParam): T[] {
+    const res = data.sort(sortParam.asc ? TableUtil.asc(sortParam.field) : TableUtil.desc(sortParam.field));
+    return res;
+  }
+
+  static desc(field: string) {
+    const res = (a: any, b: any) => a[field] > b[field] ? -1 : 1;
+    return res;
+  }
+
+  static asc(field: string) {
+    const res = (a: any, b: any) => a[field] < b[field] ? -1 : 1;
+    return res;
+  }
+}

package/src/component/tabs/Tabs.stories.ts

@@ -0,0 +1,55 @@
+import {Meta} from '@storybook/angular/types-6-0';
+import {withKnobs} from '@storybook/addon-knobs';
+import {TabsModule} from './tabs.module';
+import {IconModule} from '../icon/icon.module';
+
+export default {
+  title: 'Component/Tabs',
+  decorators: [withKnobs],
+  moduleMetadata: {
+    imports: [TabsModule, IconModule]
+  },
+} as Meta;
+
+export const basicTab = () => ({
+  moduleMetadata: {
+    imports: [TabsModule, IconModule]
+  },
+  props: {},
+  template: `<div [tetaIconSprite]="'assets/icons.svg'" class="padding-3" style="width 100px; height 800px;">
+    <teta-tabs>
+      <teta-tab>
+        <ng-template tetaTabTitle>
+          <teta-icon [name]="'calendar'" class="margin-right-2"></teta-icon>Результат
+        </ng-template>
+        <ng-template tetaTabContent>
+          <div class="area area_accent">
+            <div class="container">
+             1111
+            </div>
+          </div>
+        </ng-template>
+      </teta-tab>
+      <teta-tab>
+        <ng-template tetaTabTitle>
+          Код
+        </ng-template>
+        <ng-template tetaTabContent>
+          <div class="area area_code">
+           CODE
+          </div>
+        </ng-template>
+      </teta-tab>
+      <teta-tab [disabled]="true">
+        <ng-template tetaTabTitle>
+          Disabled
+        </ng-template>
+        <ng-template tetaTabContent>
+          <div class="area area_code">
+           Disabled
+          </div>
+        </ng-template>
+      </teta-tab>
+    </teta-tabs>
+  </div>`,
+});

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

@@ -0,0 +1,13 @@
+export * from './tabs.module';
+
+/**
+ * Components
+ */
+export * from './tab/tab.component';
+export * from './tabs/tabs.component';
+
+/**
+ * Directives
+ */
+export * from './tab-title.directive';
+export * from './tab-content.directive';

package/src/component/tabs/tab/tab.component.html

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

package/src/component/tabs/tab/tab.component.spec.ts

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