@inspark/inspark-components 19.0.49 → 19.0.51

package/src/components/table/table.component.ts

@@ -0,0 +1,538 @@
+import {
+  AfterContentInit,
+  AfterViewInit,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  NgModule, OnChanges, OnInit,
+  Output,
+  QueryList, SimpleChanges,
+  TemplateRef,
+  ViewChild
+} from '@angular/core';
+import {Table, TableModule, TableService} from 'primeng/table';
+import {CommonModule} from '@angular/common';
+import {InsparkTemplate} from '../inspark.shared';
+import {TranslateModule} from '@ngx-translate/core';
+import {FormsModule} from '@angular/forms';
+import {TableColumnsMultiselectComponent} from './table-columns-multiselect/table-columns-multiselect.component';
+import {TableMenuOverlayComponent} from './table-menu-overlay/table-menu-overlay.component';
+import {TableClickOutsideDirective} from './table-click-outside.directive';
+import {DropdownModule} from 'primeng/dropdown';
+import {MultiSelectModule} from 'primeng/multiselect';
+import {NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';
+import {CheckboxModule} from 'primeng/checkbox';
+import {TableRowData} from '../../utils/hybrid/prime-table/table-row-data.model';
+import {PipesModule} from '../../pipes/pipes.module';
+import {TableColumns, ToolBar, ToolBarFilterColumn} from '../../interface';
+
+
+// NEW Factory Function
+export function tableFactory(wrapper: TableComponent) {
+  return wrapper.dt;
+}
+
+@Component({
+  standalone: false,
+  selector: 'in-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss'],
+  providers: [TableService],
+})
+
+export class TableComponent implements OnInit, AfterContentInit {
+
+  @Input() columns: TableColumns[] = [];
+  filteredColumns: TableColumns[] = [];
+  globalFilteredColumns: string[] = [];
+  primaryColumns: TableColumns[] = [];
+  @Input() values = [];
+  @Input() scrollHeight: string;
+  @Input() scrollable: boolean;
+  @Input() selectionMode: 'single' | 'multiple' | null = null;
+  @Input() label: string;
+  @Input() error: string;
+  @Input() class: string;
+  @Input() required: boolean;
+  @Input() style: any;
+  @Input() toolbar: ToolBar;
+  @Input() checkboxSelection = true;
+  @Input() active;
+  @Input() sortField;
+  @Input() isAscending;
+  @Input() dataKey;
+  @Input() stateKey;
+  @Input() isGrouped: boolean;
+  @Input() customSort: boolean;
+  @Input() isGroupedExpanded?: boolean;
+  @Input() showHeader = true;
+  @Input() isMobileView = false;
+  @Input() resizableColumns = true;
+  @Input() isTextSearch = true;
+  @Input() isSortIcon = true;
+  @Input() columnResizeMode: 'expand' | 'fit' = 'expand';
+
+  @Output() activeChange = new EventEmitter<any>();
+  @ContentChildren(InsparkTemplate) templates: QueryList<InsparkTemplate>;
+  @Output() selectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() addAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() treeAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() csvAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() saveAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() removeAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() unlinkAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() linkAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() groupEditAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() paramsEditAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() sortFunction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() filterFunction: EventEmitter<any> = new EventEmitter<any>();
+
+  @ViewChild(Table) dt!: Table;
+
+  groupMode = 0;
+  groupInfo = {};
+  groupIndex = {};
+  headerTemplate: TemplateRef<any>;
+  bodyTemplate: TemplateRef<any>;
+  loadingBodyTemplate: TemplateRef<any>;
+  captionTemplate: TemplateRef<any>;
+  frozenRowsTemplate: TemplateRef<any>;
+  footerTemplate: TemplateRef<any>;
+  summaryTemplate: TemplateRef<any>;
+  colGroupTemplate: TemplateRef<any>;
+  expandedRowTemplate: TemplateRef<any>;
+  frozenHeaderTemplate: TemplateRef<any>;
+  frozenBodyTemplate: TemplateRef<any>;
+  frozenFooterTemplate: TemplateRef<any>;
+  frozenColGroupTemplate: TemplateRef<any>;
+  emptyMessageTemplate: TemplateRef<any>;
+  paginatorLeftTemplate: TemplateRef<any>;
+  paginatorRightTemplate: TemplateRef<any>;
+  valueTemplate: TemplateRef<any>;
+  searchText: string;
+  _selection = null;
+
+  constructor() {
+    TableComponent.patchPrimeTableSaveColumnWidths();
+  }
+
+  /**
+   * В PrimeNG 19 при восстановленном глобальном фильтре p-table может вызвать saveState()/saveColumnWidths()
+   * до того, как DOM-колонки полностью готовы. В таком случае внутри PrimeNG падает чтение offsetWidth.
+   * Патчим метод один раз на уровне прототипа Table: обычное поведение сохраняется, а в раннем ошибочном
+   * вызове в state возвращаются ранее сохраненные columnWidths/tableWidth.
+   */
+  private static patchPrimeTableSaveColumnWidths(): void {
+    const tablePrototype = (Table as any).prototype;
+
+    if (!tablePrototype || tablePrototype.__insparkSaveColumnWidthsPatched || typeof tablePrototype.saveColumnWidths !== 'function') {
+      return;
+    }
+
+    const originalSaveColumnWidths = tablePrototype.saveColumnWidths;
+
+    tablePrototype.saveColumnWidths = function(state: any) {
+      try {
+        return originalSaveColumnWidths.apply(this, arguments);
+      } catch (error) {
+        if (!TableComponent.isOffsetWidthError(error)) {
+          throw error;
+        }
+
+        TableComponent.copyColumnWidthsFromSavedState(this, state);
+      }
+    };
+
+    tablePrototype.__insparkSaveColumnWidthsPatched = true;
+  }
+
+  private static isOffsetWidthError(error: any): boolean {
+    return !!error && typeof error.message === 'string' && error.message.indexOf('offsetWidth') !== -1;
+  }
+
+  private static copyColumnWidthsFromSavedState(table: any, state: any): void {
+    if (!state || !table || !table.stateKey) {
+      return;
+    }
+
+    const storage = table.stateStorage === 'session' ? window.sessionStorage : window.localStorage;
+    const savedState = storage.getItem(table.stateKey);
+
+    if (!savedState) {
+      return;
+    }
+
+    try {
+      const parsedState = JSON.parse(savedState);
+
+      if (parsedState.columnWidths) {
+        state.columnWidths = parsedState.columnWidths;
+      }
+
+      if (parsedState.tableWidth) {
+        state.tableWidth = parsedState.tableWidth;
+      }
+    } catch (parseError) {
+      // сохраненный state поврежден; игнорируем его и даем PrimeNG сохранить новый state без ширин колонок
+    }
+  }
+
+  /** O(1) selected-row lookup. Rebuilt whenever selection changes.
+   *  Replaces p-tableCheckbox which calls dt.isSelected() (O(M)) for EVERY
+   *  row on EVERY CD cycle via TableService.selectionSource$ subscription. */
+  private _selectionSet = new Set<any>();
+
+  private _rebuildSelectionSet(val: any[]): void {
+    this._selectionSet = new Set<any>();
+    if (Array.isArray(val)) {
+      const key = this.dataKey || 'id';
+      for (const item of val) {
+        if (item != null) { this._selectionSet.add(item[key] ?? item); }
+      }
+    }
+  }
+
+  ngAfterContentInit() {
+    this.templates.forEach((item: InsparkTemplate) => {
+      switch (item.getType()) {
+        case 'value':
+          this.valueTemplate = item.template;
+          break;
+        case 'header':
+          this.headerTemplate = item.template;
+          break;
+        case 'body':
+          this.bodyTemplate = item.template;
+          break;
+        // добавьте другие типы по необходимости
+      }
+    });
+  }
+
+  /** O(1) check used in template instead of dt.isSelected() */
+  public _isRowSelected(row: any): boolean {
+    const key = this.dataKey || 'id';
+    return this._selectionSet.has(row?.[key] ?? row);
+  }
+
+  /** Check — uses filteredValue when filter is active, full values otherwise */
+  public _isAllSelected(): boolean {
+    const data = this.dt?.filteredValue ?? this.values;
+    if (!data || data.length === 0) { return false; }
+    const key = this.dataKey || 'id';
+    return data.every(row => this._selectionSet.has(row?.[key] ?? row));
+  }
+
+  /** Select/deselect all rows respecting active filter */
+  public _onHeaderCheckboxChange(event: Event): void {
+    const checked = (event.target as HTMLInputElement).checked;
+    const key = this.dataKey || 'id';
+    const data = this.dt?.filteredValue ?? this.values;
+    if (checked) {
+      this._selectionSet = new Set<any>(
+        (data || []).map(row => row?.[key] ?? row)
+      );
+      this._selection = [...(data || [])];
+    } else {
+      this._selectionSet = new Set<any>();
+      this._selection = [];
+    }
+    this.selectionValue = this._selection;
+  }
+
+  /** Called when native checkbox changes */
+  public _onCheckboxChange(event: Event, row: any): void {
+    const checked = (event.target as HTMLInputElement).checked;
+    const key = this.dataKey || 'id';
+
+    const rowKey = row?.[key] ?? row;
+    if (checked) {
+      this._selectionSet.add(rowKey);
+      this._selection = [...(this._selection || []), row];
+    } else {
+      this._selectionSet.delete(rowKey);
+      this._selection = (this._selection || []).filter(
+        (item: any) => (item?.[key] ?? item) !== rowKey
+      );
+    }
+    this.selectionValue = this._selection;
+  }
+
+  @Input() set selection(val) {
+    this._selection = val;
+    this._rebuildSelectionSet(val);
+  }
+
+  get selectionValue() {
+    return this._selection;
+  }
+
+  set selectionValue(val) {
+    this._selection = val;
+    this._rebuildSelectionSet(val);
+    this.selectionChange.emit(val);
+  }
+
+  public isRowActive(row: TableRowData) {
+    return this.active && this.active.id === row.id;
+  }
+
+  ngOnInit() {
+    this.updateData();
+  }
+
+
+  updateData() {
+    this.primaryColumns = this.columns.filter(column => !column.isSecondary);
+    this.globalFilteredColumns = this.columns.filter(column => column.isFiltering !== false).map(val => val.field);
+    this.visibleColumns();
+  }
+
+  public visibleColumns(): TableColumns[] {
+    this.restoreHiddenColumns();
+    this.filteredColumns = this.columns.filter(column => !column.isHidden);
+    return this.filteredColumns;
+  }
+
+  public columnsChange(data) {
+    data.column.isHidden = !data.event;
+    this.resetColumnWidth();
+    this.saveHiddenColumns();
+    this.visibleColumns();
+  }
+
+  public showTooltip(event) {
+    const target = event.target;
+    if (target.title === undefined || !target.textContent) {
+      return;
+    }
+    target.title = target.scrollWidth > target.clientWidth ? target.textContent : '';
+  }
+
+  public colFilter(field): ToolBarFilterColumn {
+    const found = this.toolbar.filter.cols.filter(item => item.field === field);
+    return found.length === 1 ? found[0] : undefined;
+  }
+
+  public onFilterToolbar(event) {
+    if (this.toolbar && this.toolbar.filter) {
+      this.toolbar.filter.active = !this.toolbar.filter.active;
+    }
+  }
+  public onFilter(event) {
+    this.onSort();
+    this.filterFunction.emit(event.filteredValue);
+  }
+
+  public stateSave(state) {
+  }
+
+  public saveToLocalStorage(state, key) {
+    if (key) {
+      window.localStorage.setItem(key, JSON.stringify(state));
+    }
+  }
+
+  public isHiddenFieldsChanged(): boolean {
+    const hiddenFieldsSaved = this.getHiddenHiddenFieldsFromStorage();
+    const hiddenFieldsColumns = (this.columns || []).filter(_col => _col.isHidden).map(_col => _col.field);
+    if (hiddenFieldsSaved.length === hiddenFieldsColumns.length) {
+      const diff = hiddenFieldsSaved.filter(field => !hiddenFieldsColumns.includes(field));
+      // tslint:disable-next-line:no-unused-expression
+      diff.length !== 0;
+    }
+    return true;
+  }
+  public saveHiddenColumns() {
+    if (this.stateKey) {
+      if (!this.isHiddenFieldsChanged()) {
+        return;
+      }
+      const hiddenFields = (this.columns || []).filter(_col => _col.isHidden).map(_col => _col.field).join(',');
+      this.saveToLocalStorage(hiddenFields, this.stateKey + 'HiddenFields');
+      window.localStorage.removeItem(this.stateKey);
+
+      if (this.searchText) {
+        window.localStorage.setItem(this.stateKey, JSON.stringify({
+          filters: {global: {value: this.searchText, matchMode: 'contains'}}
+        }));
+      }
+
+      if (this.dt) {
+        this.dt.restoreState();
+      }
+    }
+  }
+
+  public countVisibleColumns() {
+    return (this.columns || []).filter(_col => !_col.isHidden).length;
+  }
+
+
+  public restoreSearchText() {
+    const state = window.localStorage.getItem(this.stateKey);
+    if (state) {
+      const parsedState = JSON.parse(state);
+      // tslint:disable-next-line:max-line-length
+      this.searchText = (parsedState.filters || {global: {value: ''}}).global ? (parsedState.filters || {global: {value: ''}}).global.value : '';
+      this.sortField = parsedState.sortField || this.sortField;
+    } else {
+      this.resetColumnWidth();
+    }
+  }
+
+  public resetColumnWidthIfToWide() {
+    const visibleColumns = this.columns.filter(_column => !_column.isHidden);
+    const totalWidthInPercent = visibleColumns.reduce((s, column) => {
+      const percent = column.width.indexOf('%') > 0 ? parseInt(column.width, 10) : 0;
+      return s + percent;
+    }, 0);
+
+    if (totalWidthInPercent > 100) {
+      console.error(`Масимальная суммарная ширина столбцов таблицы  100%, текущая суммарная ширина ${totalWidthInPercent}%.`
+        + `Выполняется принудительный перерасчет ширины для таблицы ${this.stateKey}`);
+      this.resetColumnWidth();
+    }
+    if (totalWidthInPercent < 100 && this.columns.length > 0) {
+      // расширяем первый столбец, чтобы не тянулся столбец с чекбоксом
+      const percent = this.columns[0].width.indexOf('%') > 0 ? parseInt(this.columns[0].width, 10) : 0;
+      this.columns[0].width = 100 - totalWidthInPercent + percent + '%';
+    }
+
+  }
+
+  public resetColumnWidth() {
+    const cvc = this.countVisibleColumns();
+    let percent = Math.floor(100 / cvc);
+    let firstColumnPercent = percent;
+    if (cvc > 10) {
+      percent = Math.floor(90 / (cvc - 1));
+      firstColumnPercent = Math.floor(100 - (percent * (cvc - 1)));
+    }
+    this.columns.forEach((column, index) => column.width = index === 0 ? firstColumnPercent + '%' : `${percent}%`);
+  }
+
+  private getHiddenHiddenFieldsFromStorage(): string[] {
+    if (this.stateKey) {
+      const hiddenFields = window.localStorage.getItem(this.stateKey + 'HiddenFields');
+      if (hiddenFields) {
+        return JSON.parse(hiddenFields).split(',');
+      }
+    }
+    return [];
+  }
+  public restoreHiddenColumns() {
+    if (this.stateKey && window.localStorage.getItem(this.stateKey + 'HiddenFields')) {
+      const hiddenFieldsArray = this.getHiddenHiddenFieldsFromStorage();
+      this.columns.forEach(_col => _col.isHidden = hiddenFieldsArray.includes(_col.field) || _col.col_invisible);
+    }
+  }
+
+  public calcWidth(idx, label, width) {
+    return width && idx >= 0 ? width : 'auto';
+  }
+
+
+  public onSort() {
+    if (this.isGrouped) {
+
+      Object.entries(this.groupInfo).forEach(([key, value]) => {
+        const cacheFlag = (this.groupInfo[key] || {}).isExpanded;
+        this.groupInfo[key] = {isExpanded: cacheFlag === undefined ? true : cacheFlag};
+      });
+
+      this.sortByGroup();
+      if (this.dt && this.dt.filteredValue) {
+        this.sortByGroup(this.dt.filteredValue, this.dt._sortOrder);
+      } else if (this.dt && this.dt._value && this.dt._sortOrder) {
+        this.sortByGroup(this.dt._value, this.dt._sortOrder);
+      }
+    }
+  }
+
+  public isShowGroup(key, rowIndex) {
+    if (rowIndex === 0) {
+      this.groupIndex = {};
+    }
+
+    if (!this.groupInfo[key]) {
+      this.groupInfo[key] = {isExpanded: this.isGroupedExpanded !== undefined ? this.isGroupedExpanded : true};
+    }
+
+    if (!this.groupIndex[key]) {
+      this.groupIndex[key] = {rowIndex};
+    }
+    return this.groupIndex[key].rowIndex === rowIndex;
+  }
+
+  public toggleGroup(rowIndex: number, key: string) {
+    this.groupInfo[key].isExpanded = !this.groupInfo[key].isExpanded;
+    this.onSort();
+  }
+
+  clear() {
+    this.dt.filterGlobal('', 'contains');
+    this.searchText = '';
+    this.dt.saveState();
+  }
+
+  localSearch(dt, searchText) {
+    dt.filterGlobal(searchText, 'contains');
+  }
+
+  private sortByGroup(values?: any, sortOrder?: number) {
+    const g = this.groupMode;
+    if (values) {
+      return values.sort((row1: TableRowData, row2: TableRowData) => {
+      if (typeof (row1['groupOrder'][g]) === 'number') {
+          return sortOrder * (row1['groupOrder'][g] - row2['groupOrder'][g]);
+        } else {
+          return sortOrder * row1['groupOrder'][g].localeCompare(row2['groupOrder'][g], undefined, {numeric: true, sensitivity: 'base'});
+        }
+      });
+    }
+    this.values.sort((row1: TableRowData, row2: TableRowData) => {
+      if (typeof (row1['groupOrder'][g]) === 'number') {
+        return row1['groupOrder'][g] - row2['groupOrder'][g];
+      } else {
+        return row1['groupOrder'][g].localeCompare(row2['groupOrder'][g], undefined, {numeric: true, sensitivity: 'base'});
+      }
+    });
+  }
+
+  countGroup(groupKey, g: number): number {
+    return this.values.filter(_value => _value.groupKey[g] === groupKey).length;
+  }
+
+  toggleNodes(isExpanded: boolean) {
+    const g = this.groupMode;
+    this.values.forEach(v => {
+      if (this.groupInfo[v.groupKey[g]]) {
+        this.groupInfo[v.groupKey[g]].isExpanded = isExpanded;
+      }
+    });
+  }
+
+  toggleMode(item) {
+    this.groupMode = item;
+    this.groupInfo = {};
+    for (let i = 0; i < this.values.length; i++) {
+      this.isShowGroup(this.values[i].groupKey[this.groupMode], i);
+    }
+    if (this.searchText) {
+      this.dt.filterGlobal(this.searchText, 'contains');
+    }
+    this.sortByGroup();
+  }
+}
+
+
+@NgModule({
+  // tslint:disable-next-line:max-line-length
+  imports: [CommonModule, TableModule, PipesModule, TranslateModule.forChild(), FormsModule, DropdownModule, MultiSelectModule, NgbDropdownModule, CheckboxModule],
+  exports: [TableComponent, TableColumnsMultiselectComponent],
+  declarations: [TableComponent, TableColumnsMultiselectComponent, TableMenuOverlayComponent, TableClickOutsideDirective]
+})
+export class TableComponentModule {
+}

package/src/components/textarea/textarea.component.html

@@ -0,0 +1,19 @@
+<label class="c-label">
+    <span *ngIf="label" class="c-label__content">
+        {{label}}
+      <span *ngIf="required" class="c-label__req">*</span>
+<span *ngIf="error" class="c-label__sub_is-error">{{error}}</span>
+    </span>
+  <textarea (change)="onChange($event)"
+            (input)="onChange($event)"
+            [(ngModel)]="value"
+            [disabled]="disabled"
+            [id]="id"
+            [name]="name"
+            [ngStyle]="{ 'min-height': minHeight+'px' }"
+            [placeholder]="placeholder"
+            [required]="required"
+            class="c-textarea field_{{id}}"
+            type="text"
+  ></textarea>
+</label>

package/src/components/textarea/textarea.component.ts

@@ -0,0 +1,71 @@
+import {Component, forwardRef, Input} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+
+@Component({
+  standalone: false,
+  selector: 'in-textarea',
+  templateUrl: './textarea.component.html',
+  styleUrls: ['./textarea.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TextareaComponent),
+      multi: true,
+    }
+  ],
+})
+export class TextareaComponent implements ControlValueAccessor {
+
+  @Input() name = null;
+  @Input() label = null;
+  @Input() required = false;
+  @Input() error = null;
+  @Input() placeholder = '';
+  @Input() id = null;
+  @Input() disabled: boolean;
+  @Input() minHeight = 30;
+  @Input() maxlength = 100000;
+
+  value: string;
+
+  /**
+   * Write form value to the DOM element (model => view)
+   */
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  /**
+   * Write form disabled state to the DOM element (model => view)
+   */
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  /**
+   * Update form when DOM element value changes (view => model)
+   */
+  registerOnChange(fn: any): void {
+    // Store the provided function as an internal method.
+    this.propagateChange = fn;
+  }
+
+  /**
+   * Update form when DOM element is blurred (view => model)
+   */
+  registerOnTouched(fn: any): void {
+    // Store the provided function as an internal method.
+    this.onTouched = fn;
+  }
+
+  private propagateChange = (_: any) => {
+  };
+
+  onChange(_: any) {
+    this.propagateChange(this.value);
+  }
+
+  private onTouched() {
+  }
+
+}

package/src/components/textarea/textarea.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { TextareaComponent } from './textarea.component';
+import {SharedUiModule } from '../shared/shared-ui.module';
+
+@NgModule({
+  declarations: [
+    TextareaComponent
+  ],
+  imports: [
+    SharedUiModule,
+    FormsModule
+  ],
+  exports: [
+    TextareaComponent
+  ]
+})
+export class TextareaComponentModule {}

package/src/components/toolbar/toolbar.component.html

@@ -0,0 +1,19 @@
+<div class="toolbar-wrapper">
+  <in-sticky [top]="60">
+
+    <div class="c-panel toolbar-container">
+      <div class="c-toolbar">
+        <div class="c-toolbar__side-left">
+          <div class="c-toolbar__title">{{title}}</div>
+        </div>
+        <div class="c-toolbar__side-center">
+
+        </div>
+        <div class="c-toolbar__side-right">
+          <ng-content></ng-content>
+        </div>
+
+      </div>
+    </div>
+  </in-sticky>
+</div>