@tetacom/ng-components 1.0.24 → 1.0.25

package/src/component/table/contract/table-column-store.ts

@@ -0,0 +1,24 @@
+export class TableColumnStore {
+  width: number;
+  flex: number;
+  locked: boolean;
+  name: string;
+  columns: TableColumnStore[];
+
+  constructor(options?: {
+    width?: number;
+    flex?: number;
+    sortOrder?: number;
+    locked?: boolean;
+    name?: string;
+    columns?: any[];
+  }) {
+    if (options) {
+      this.width = options?.width;
+      this.flex = options?.flex;
+      this.locked = options?.locked;
+      this.name = options?.name;
+      this.columns = options?.columns?.map((x) => new TableColumnStore(x));
+    }
+  }
+}

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

@@ -0,0 +1,172 @@
+import {FilterItem} from '../../filter/contarct/filter-item';
+import {FilterType} from '../../filter/enum/filter-type.enum';
+import {StringFilterType} from '../../filter/enum/string-filter-type.enum';
+import {ListFilterType} from '../../filter/enum/list-filter-type.enum';
+import {TableRow} from './table-row';
+import {AggregationType} from '../enum/aggregation-type.enum';
+import {TemplateRef} from '@angular/core';
+import {ICellCoordinates} from './i-cell-coordinates';
+
+export class TableColumn extends FilterItem {
+  /**
+   * Ширина
+   */
+  width = 150;
+  /**
+   * Коэффициент растяжения ячейки
+   */
+  flex = 0;
+  /**
+   * Стобец закреплен
+   */
+  locked: boolean;
+  /**
+   * Название столбца в строке результатов
+   */
+  override name: string;
+  /**
+   * Название столбца родителя
+   */
+  parentName: string;
+  /**
+   * Название столбца для заголовка таблицы
+   */
+  override caption: string;
+  /**
+   * Единицы измерения
+   */
+  unit: string;
+  /**
+   * список style классов для шапки таблицы
+   */
+  headCellClass: string[];
+  /**
+   * список style классов для ячейки таблицы
+   */
+  cellClass: string[];
+  /**
+   * Дополнительные данные, свободное описание, доступны внутри компонета ячейки, можно прокинуть callback например
+   */
+  data: any;
+  /**
+   * Колонка доступна для редактирования
+   */
+  editable: boolean | ((coordinates: ICellCoordinates<any>) => boolean);
+  /**
+   * Компонент для рендера ячейки
+   */
+  cellComponent: any;
+  /**
+   * Компонент для рендера заголовка столбца ячейки
+   */
+  headCellComponent: any;
+  /**
+   * Custom head dropdown for column
+   */
+  headDropdownTemplate: TemplateRef<any>;
+  /**
+   * Группировать по этому столбцу
+   */
+  groupBy: boolean;
+  /**
+   * Порядок группировки
+   */
+  groupingOrder = 0;
+  /**
+   *
+   */
+  groupByFn: ((row: TableRow<any>) => string) | undefined;
+  /**
+   * Дочерние колонки
+   */
+  override columns: TableColumn[];
+
+  /**
+   * Aggregate type
+   */
+  aggregate: AggregationType;
+
+  /**
+   * Значение по умолчанию при создании записи
+   */
+  defaultValue: any;
+
+  /**
+   * Значение по умолчанию при создании записи
+   */
+  maxValue: number;
+
+  /**
+   * Значение по умолчанию при создании записи
+   */
+  minValue: number;
+
+  /**
+   * Поле обязательно для заполнения
+   */
+  required: boolean;
+
+  /**
+   * Инициализация из анонимного объекта
+   */
+  constructor(options?: {
+    width?: number;
+    flex?: number;
+    sortOrder?: number;
+    locked?: boolean;
+    name?: string;
+    parentName?: string;
+    caption?: string;
+    hint?: string;
+    unit?: string;
+    sortable?: boolean;
+    sortField?: string;
+    filterable?: boolean;
+    filterField?: string;
+    filterType?: FilterType | null;
+    stringFilterType?: StringFilterType;
+    listFilterType?: ListFilterType;
+    strict?: boolean;
+    headCellClass?: string[];
+    cellClass?: string[];
+    data?: any;
+    editable?: boolean | ((coordinates: ICellCoordinates<any>) => boolean);
+    objectType?: boolean;
+    cellComponent?: any;
+    headCellComponent?: any;
+    headDropdownTemplate?: TemplateRef<any>;
+    filterComponent?: any;
+    groupBy?: boolean;
+    groupingOrder?: number;
+    groupByFn?: (row: TableRow<any>) => string;
+    columns?: any[];
+    aggregate?: AggregationType;
+    defaultValue?: any;
+    maxValue?: number;
+    minValue?: number;
+    required?: boolean;
+  }) {
+    super(options);
+    this.width = options?.width ?? 150;
+    this.flex = options?.flex ?? 0;
+    this.headCellClass = options?.headCellClass ?? [];
+    this.cellClass = options?.cellClass ?? [];
+    this.locked = options?.locked ?? false;
+    this.parentName = options?.parentName;
+    this.unit = options?.unit ?? '';
+    this.data = options?.data;
+    this.editable = options?.editable ?? true;
+    this.groupBy = options?.groupBy ?? false;
+    this.groupingOrder = options?.groupingOrder ?? 0;
+    this.groupByFn = options?.groupByFn;
+    this.headCellComponent = options?.headCellComponent;
+    this.headDropdownTemplate = options?.headDropdownTemplate;
+    this.cellComponent = options?.cellComponent;
+    this.aggregate = options?.aggregate;
+    this.defaultValue = options?.defaultValue;
+    this.maxValue = options?.maxValue;
+    this.minValue = options?.minValue;
+    this.required = options?.required;
+    this.columns = options?.columns?.map((x) => new TableColumn(x)) ?? [];
+  }
+}

package/src/component/table/contract/table-context-menu-config.ts

@@ -0,0 +1,23 @@
+export class TableContextMenuConfig {
+  contextMenu = true;
+  copy = true;
+  delete = true;
+  add = true;
+  paste = true;
+
+  constructor(options?: {
+    contextMenu?: boolean;
+    copy?: boolean;
+    delete?: boolean;
+    add?: boolean;
+    paste?: boolean;
+  }) {
+    if (options) {
+      this.contextMenu = options?.contextMenu;
+      this.copy = options?.copy;
+      this.delete = options?.delete;
+      this.add = options?.add;
+      this.paste = options?.paste;
+    }
+  }
+}

package/src/component/table/contract/table-row.ts

@@ -0,0 +1,51 @@
+import * as hash from 'object-hash';
+
+export class TableRow<T> {
+  set edit(value: boolean) {
+    if (value !== this._edit) {
+      this._edit = value;
+      this._hash = null;
+    }
+  }
+
+  get edit(): boolean {
+    return this._edit;
+  }
+
+  expanded = false;
+  showDetails = false;
+  data: T;
+  isGroup: boolean;
+  level: number;
+  path: any[] = [];
+  groupColumn: string;
+  groupValue: any[] = [];
+
+  // children: GridRow<T>[] = [];
+  // parents: GridRow<T>[];
+  // private backup: any = {};
+  private _edit = false;
+  private _hash: string | null;
+
+  constructor(data?: any) {
+    if (data) {
+      this.data = data;
+    }
+  }
+
+  public get hash(): string {
+    if (!this._hash) {
+      const hashObj: any = { ...this.data };
+      if (hashObj.children) {
+        delete hashObj.children;
+      }
+      this._hash = hash.sha1(hashObj);
+    }
+    return this._hash;
+  }
+
+  public editData(items?: any): void {
+    this.data = items;
+    this._hash = null;
+  }
+}

package/src/component/table/default/boolean-cell/boolean-cell.component.html

@@ -0,0 +1,10 @@
+<span [style.display]="edit ? 'none' : 'block'" class="cell-text">
+  {{ row.data[column.name] }}
+</span>
+<teta-checkbox
+  #input
+  *ngIf="edit"
+  [binary]="true"
+  [(ngModel)]="row.data[column.name]"
+  (blur)="setValue()"
+></teta-checkbox>

package/src/component/table/default/boolean-cell/boolean-cell.component.spec.ts

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

package/src/component/table/default/boolean-cell/boolean-cell.component.ts

@@ -0,0 +1,54 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import { CellComponentBase } from '../../base/cell-component-base';
+import { TableColumn } from '../../contract/table-column';
+import { TableRow } from '../../contract/table-row';
+import { TableService } from '../../service/table.service';
+import { ICellCoordinates } from '../../contract/i-cell-coordinates';
+
+@Component({
+  selector: 'teta-boolean-cell',
+  templateUrl: './boolean-cell.component.html',
+  styleUrls: ['./boolean-cell.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BooleanCellComponent<T>
+  extends CellComponentBase<T>
+  implements OnInit
+{
+  @Input() override column: TableColumn;
+  @Input() override row: TableRow<T>;
+  @ViewChild('input', { static: false }) input: ElementRef;
+
+  constructor(public override svc: TableService<T>, public override cdr: ChangeDetectorRef) {
+    super(svc, cdr);
+  }
+
+  setValue(): void {
+    this.valueChanged();
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+  }
+
+  startEdit(initiator: ICellCoordinates<T>, type: 'cell' | 'row'): void {
+    if (initiator?.column.name === this.column.name) {
+      this.cdr.markForCheck();
+      setTimeout(() => {
+        this.input?.nativeElement.focus();
+      }, 0);
+    }
+  }
+
+  stopEdit(): void {
+    this.cdr.markForCheck();
+  }
+}

package/src/component/table/default/date-cell/date-cell.component.html

@@ -0,0 +1,11 @@
+<span [style.display]="edit ? 'none' : 'block'" class="cell-text">
+  {{row.data[column.name] | date : 'dd.MM.yyyy'}}
+</span>
+<teta-date-picker class="datepicker-table"
+                  #input
+                  *ngIf="edit"
+                  [appendToBody]="true"
+                  [showTime]="false"
+                  [ngModel]="row.data[column.name]"
+                  (ngModelChange)="setValue($event)"
+></teta-date-picker>

package/src/component/table/default/date-cell/date-cell.component.spec.ts

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

package/src/component/table/default/date-cell/date-cell.component.ts

@@ -0,0 +1,59 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {CellComponentBase} from '../../base/cell-component-base';
+import {TableColumn} from '../../contract/table-column';
+import {TableRow} from '../../contract/table-row';
+import {TableService} from '../../service/table.service';
+import {ICellCoordinates} from '../../contract/i-cell-coordinates';
+import {DatePickerComponent} from '../../../date-picker/date-picker/date-picker.component';
+
+@Component({
+  selector: 'teta-date-cell',
+  templateUrl: './date-cell.component.html',
+  styleUrls: ['./date-cell.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DateCellComponent<T>
+  extends CellComponentBase<T>
+  implements OnInit {
+  @Input() override column: TableColumn;
+  @Input() override row: TableRow<T>;
+
+  @ViewChild('input', {static: false}) input: DatePickerComponent;
+
+  constructor(
+    protected override svc: TableService<T>,
+    protected override cdr: ChangeDetectorRef
+  ) {
+    super(svc, cdr);
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+  }
+
+  setValue(value: Date): void {
+    this.row.data[this.column.name] = value ? new Date(value) : value;
+    this.valueChanged();
+    this.cdr.detectChanges();
+  }
+
+  startEdit(initiator: ICellCoordinates<T>, type: 'cell' | 'row'): void {
+    if (initiator?.column.name === this.column.name) {
+      setTimeout(() => {
+        this.input?.focus();
+        this.cdr.markForCheck();
+      }, 0);
+    }
+  }
+
+  stopEdit(): void {
+    this.cdr.markForCheck();
+  }
+}

package/src/component/table/default/date-time-cell/date-time-cell.component.html

@@ -0,0 +1,10 @@
+<span [style.display]="edit ? 'none' : 'block'" class="cell-text">
+  {{row.data[column.name] | date : 'dd.MM.yyyy HH:mm:ss'}}
+</span>
+<teta-date-picker class="datepicker-table" #input
+                  *ngIf="edit"
+                  [appendToBody]="true"
+                  [showTime]="true"
+                  [ngModel]="row.data[column.name]"
+                  (ngModelChange)="setValue($event)"
+></teta-date-picker>

package/src/component/table/default/date-time-cell/date-time-cell.component.spec.ts

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

package/src/component/table/default/date-time-cell/date-time-cell.component.ts

@@ -0,0 +1,56 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {CellComponentBase} from '../../base/cell-component-base';
+import {TableColumn} from '../../contract/table-column';
+import {TableRow} from '../../contract/table-row';
+import {TableService} from '../../service/table.service';
+import {ICellCoordinates} from '../../contract/i-cell-coordinates';
+import {DatePickerComponent} from '../../../date-picker/date-picker/date-picker.component';
+
+@Component({
+  selector: 'teta-date-time-cell',
+  templateUrl: './date-time-cell.component.html',
+  styleUrls: ['./date-time-cell.component.scss'],
+})
+export class DateTimeCellComponent<T>
+  extends CellComponentBase<T>
+  implements OnInit {
+  @Input() override column: TableColumn;
+  @Input() override row: TableRow<T>;
+
+  @ViewChild('input', {static: false}) input: DatePickerComponent;
+
+  constructor(
+    protected override svc: TableService<T>,
+    protected override cdr: ChangeDetectorRef
+  ) {
+    super(svc, cdr);
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+  }
+
+  setValue(value: Date): void {
+    this.row.data[this.column.name] = value;
+    this.valueChanged();
+  }
+
+  startEdit(initiator: ICellCoordinates<T>, type: 'cell' | 'row'): void {
+    if (initiator?.column.name === this.column.name) {
+      setTimeout(() => {
+        this.input.openPicker(true);
+        this.cdr.markForCheck();
+      }, 0);
+    }
+  }
+
+  stopEdit(): void {
+    this.cdr.markForCheck();
+  }
+}

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

@@ -0,0 +1,8 @@
+<div class="column column_auto align-center" [tetaHint]="column.hint || column.caption">
+  <div class="table-head__cell__text align-center">
+    {{column.caption}}
+  </div>
+  <div *ngIf="column.unit" class="table-head__cell__text align-center color-text-70" style="overflow: visible;">
+    [{{column.unit}}]
+  </div>
+</div>

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

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

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

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

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

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { HeadCellComponentBase } from '../../base/head-cell-component-base';
+import { TableColumn } from '../../contract/table-column';
+
+@Component({
+  selector: 'teta-default-head-cell',
+  templateUrl: './default-head-cell.component.html',
+  styleUrls: ['./default-head-cell.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DefaultHeadCellComponent
+  extends HeadCellComponentBase
+  implements OnInit
+{
+  private _column: TableColumn;
+
+  @Input()
+  set column(val: TableColumn) {
+    this._column = val;
+    this._cdr.detectChanges();
+  }
+
+  get column(): TableColumn {
+    return this._column;
+  }
+
+  constructor(private _cdr: ChangeDetectorRef) {
+    super();
+  }
+
+  ngOnInit(): void {}
+}

package/src/component/table/default/group-row/group-row.component.html

@@ -0,0 +1,2 @@
+<span>{{row.groupValue[row.level]}} ()</span>
+<!--<span>{{row.groupValue[row.level]}} ({{row.children.length}})</span>-->

package/src/component/table/default/group-row/group-row.component.spec.ts

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