ngx-register-base 1.3.1 → 1.3.2

package/src/lib/components/paginator/paginator.component.ts

@@ -1,192 +0,0 @@
-import { coerceNumberProperty, NumberInput } from '@angular/cdk/coercion';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  DestroyRef,
-  inject,
-  input,
-  model,
-  OnDestroy,
-  output,
-  signal,
-} from '@angular/core';
-import { PolymorphContent, PolymorphModule } from '@prizm-ui/components';
-import { debounceTime, Subject } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TuiButton, TuiDataListDirective, TuiHint, TuiLoader } from '@taiga-ui/core';
-import { TuiDataListWrapperComponent, TuiPagination } from '@taiga-ui/kit';
-import { TuiComboBoxModule, TuiTextfieldControllerModule } from '@taiga-ui/legacy';
-import { IPaginatorOptions, IPaginatorOutput } from './types/paginator.types';
-import { DividerComponent } from '../divider/divider.component';
-import { NumberOnlyDirective } from '../../directives/number/number-only.directive';
-
-export enum SvgSrc {
-  CHEVRONS_DOUBLE_LEFT = 'assets/ngx-register-base/icons/chevrons-double-left.svg',
-  CHEVRONS_DOUBLE_RIGHT = 'assets/ngx-register-base/icons/chevrons-double-right.svg',
-}
-
-@Component({
-  selector: 'sproc-paginator',
-  imports: [
-    DividerComponent,
-    CommonModule,
-    PolymorphModule,
-    ReactiveFormsModule,
-    FormsModule,
-    TuiPagination,
-    TuiButton,
-    TuiComboBoxModule,
-    TuiDataListWrapperComponent,
-    TuiTextfieldControllerModule,
-    TuiDataListDirective,
-    TuiLoader,
-    TuiHint,
-    NumberOnlyDirective,
-  ],
-  templateUrl: './paginator.component.html',
-  styleUrls: ['./paginator.component.less'],
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PaginatorComponent implements OnDestroy {
-  public textOnPage = input<PolymorphContent>('Строк на странице');
-  public totalRecords = input(0, {
-    transform: (value: NumberInput) => Math.max(coerceNumberProperty(value), 0),
-  });
-  /** Количество видимых страниц вокруг активной страницы  */
-  public pageLinkSize = input(3);
-  public showMoreDisabled = input(false);
-  public disabled = input(false);
-  /** Количество отображаемых строк на странице */
-  public rows = model<NumberInput>(0);
-  /** Текущая страница */
-  public page = model<NumberInput>(1);
-  public paginatorOptions = input<IPaginatorOptions>({
-    noRowsSelector: false,
-    noRowsSelectorLabel: false,
-    noFilterInfo: false,
-    noInfo: false,
-    noPages: false,
-  });
-  public rowsCountOptions = input(new Array<number>());
-  public selectedCounter = input(0);
-  public totalNotFiltered = input(0);
-  public isLoading = input(false);
-  /** Ограничения на количество отображаемых строк на странице */
-  public minRowsCount = input<number>(1);
-  public maxRowsCount = input<number>(99);
-  protected isIncorrectRowsCount = signal(false);
-  protected rowsCountErrorMessage = signal('');
-
-  public paginatorChange = output<IPaginatorOutput>();
-  public pageChange = output<number>();
-  public rowsChange = output<number | null>();
-
-  protected readonly SvgSrc = SvgSrc;
-  protected pagesCount = computed(() => {
-    const total = this.totalRecords();
-    this.rows();
-
-    return Math.ceil(total / this.currentRows);
-  });
-
-  private readonly _dr = inject(DestroyRef);
-
-  protected readonly currentRowsInputChange = new Subject<NumberInput>();
-
-  constructor() {
-    this.currentRowsInputChange
-      .pipe(debounceTime(500), takeUntilDestroyed(this._dr))
-      .subscribe((value) => {
-        this.changeRows(value);
-      });
-  }
-
-  public ngOnDestroy(): void {
-    this.currentRowsInputChange.complete();
-  }
-
-  protected changePage(page: number): void {
-    const prev = this.currentPage;
-    this.page.set(page);
-
-    if (this.currentPage !== prev) {
-      this.emitPageChange();
-    }
-  }
-
-  protected toFirstPage(): void {
-    this.changePage(0);
-  }
-
-  protected toLastPage(): void {
-    this.changePage(this.pagesCount());
-  }
-
-  private emitPageChange(): void {
-    this.pageChange.emit(this.currentPage);
-    this._emitPaginatorChanges();
-  }
-
-  protected changeRows(rows: NumberInput): void {
-    const rowsCount = Number(rows);
-
-    if (!rowsCount) {
-      this.rowsCountErrorMessage.set('');
-      this.isIncorrectRowsCount.set(false);
-      return;
-    }
-
-    const min = this.minRowsCount();
-    const max = this.maxRowsCount();
-
-    if (rowsCount < min || rowsCount > max) {
-      this.rowsCountErrorMessage.set(`Поле принимает значение от ${min} до ${max}`);
-      this.isIncorrectRowsCount.set(true);
-      return;
-    }
-
-    this.rowsCountErrorMessage.set('');
-    this.isIncorrectRowsCount.set(false);
-
-    if (this.currentRows === rows) {
-      return;
-    }
-
-    this.rows.set(rows);
-    this.rowsChange.emit(this.currentRows);
-
-    if (this.currentPage > this.pagesCount()) {
-      this.changePage(0);
-    } else {
-      this._emitPaginatorChanges();
-    }
-  }
-
-  private _emitPaginatorChanges(): void {
-    this.paginatorChange.emit({
-      page: this.currentPage,
-      first: (this.currentPage - 1) * this.currentRows + 1,
-      rows: this.currentRows,
-      pagesCount: this.pagesCount(),
-    });
-  }
-
-  /** get-методы */
-  protected get currentPage(): number {
-    return Math.max(coerceNumberProperty(this.page()), 1);
-  }
-
-  protected get currentRows(): number {
-    let inputRows = Math.max(coerceNumberProperty(this.rows()), 0);
-
-    if (!inputRows) {
-      [inputRows] = this.rowsCountOptions();
-    }
-
-    return inputRows;
-  }
-}

package/src/lib/components/paginator/types/paginator.types.ts

@@ -1,16 +0,0 @@
-export interface IPaginatorOutput {
-  page: number;
-  first: number;
-  rows: number;
-  pagesCount: number | null;
-}
-
-export interface IPaginatorOptions {
-  noRowsSelector?: boolean;
-  noRowsSelectorLabel?: boolean;
-  noFilterInfo?: boolean;
-  noInfo?: boolean;
-  noPages?: boolean;
-  noToFirstPageBtn?: boolean;
-  noToLastPageBtn?: boolean;
-}

package/src/lib/components/register-table/consts/register-table.consts.ts

@@ -1,3 +0,0 @@
-export const CHECKBOX_SELECTOR_KEY = 'checkbox-selector';
-export const CHECKBOX_SELECTOR_WIDTH_PX = 32;
-export const MIN_COL_WIDTH_PX = 8;

package/src/lib/components/register-table/directives/cell-template.directive.ts

@@ -1,11 +0,0 @@
-import { Directive, Input, TemplateRef } from '@angular/core';
-
-@Directive({
-  selector: '[cellTemplateName]',
-  standalone: true,
-})
-export class CellTemplateDirective {
-  @Input() cellTemplateName!: string;
-
-  constructor(public tpl: TemplateRef<any>) {}
-}

package/src/lib/components/register-table/directives/header-template.directive.ts

@@ -1,11 +0,0 @@
-import { Directive, input, TemplateRef } from '@angular/core';
-
-@Directive({
-  selector: '[headerTemplateName]',
-  standalone: true,
-})
-export class HeaderTemplateDirective {
-  public headerTemplateName = input.required<string>();
-
-  constructor(public tpl: TemplateRef<any>) {}
-}

package/src/lib/components/register-table/model/schema.ts

@@ -1,62 +0,0 @@
-import { OrderBy, WhereBoolExp } from 'hasura';
-
-export type ColumnDataTypes = 'text' | 'num' | 'checkbox' | 'icon' | 'iconSvg' | 'empty' | 'date';
-
-export enum EColumnDataType {
-  TEXT = 'text',
-  NUM = 'num',
-  CHECKBOX = 'checkbox',
-  ICON = 'icon',
-  ICON_SVG = 'iconSvg',
-  DATE = 'date',
-}
-
-export interface IColumnData {
-  name: string;
-  type: EColumnDataType | ColumnDataTypes;
-  value?: string;
-  width?: string;
-  isHeadTemplate?: boolean;
-  isTemplate?: boolean;
-  sortable?: boolean;
-  tooltipText?: string;
-  textStyle?: Record<string, string>;
-  rowspan?: number;
-  colspan?: number;
-  children?: IColumnData[];
-  datePattern?: string;
-  numberPipe?: string;
-  svgSrc?: string;
-  isCell?: boolean;
-  class?: string;
-  classTd?: string;
-  isLoading?: boolean;
-  postfix?: string;
-  fixed?: boolean;
-  headerStyle?: string;
-}
-
-export type ThWidthEntry = Pick<IColumnData, 'name' | 'width'>;
-
-export interface IHasuraQueryFilter<T extends Record<string, any>> {
-  where?: WhereBoolExp<T>;
-  distinct_on?: (keyof T)[];
-  limit?: number;
-  offset?: number;
-  order_by?: OrderBy<T>;
-}
-
-export type RegisterTableSortOptions = {
-  order: RegisterTableCellSortOrder;
-  id: string;
-};
-export type RegisterTableCellSorterHandler<T> = (
-  a: T,
-  b: T,
-  options: RegisterTableSortOptions
-) => number;
-export type RegisterTableCellSorter<T> = {
-  options: RegisterTableSortOptions;
-  sorter?: RegisterTableCellSorterHandler<T>;
-};
-export type RegisterTableCellSortOrder = 'asc' | 'desc';

package/src/lib/components/register-table/pipes/class-by-type.pipe.ts

@@ -1,28 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { ColumnDataTypes, EColumnDataType } from '../model/schema';
-
-@Pipe({
-  name: 'classByType',
-  standalone: true,
-})
-export class ClassByTypePipe implements PipeTransform {
-  transform(type: ColumnDataTypes | EColumnDataType, element: 'th' | 'td' = 'th'): string {
-    let classNamePostfix = 'text';
-
-    if (element === 'td') {
-      if (type === EColumnDataType.CHECKBOX) {
-        classNamePostfix = 'checkbox';
-      } else if (type === EColumnDataType.NUM) {
-        classNamePostfix = 'num';
-      } else if (type === EColumnDataType.DATE) {
-        classNamePostfix = 'date';
-      }
-    }
-
-    if (type === EColumnDataType.ICON || type === EColumnDataType.ICON_SVG) {
-      classNamePostfix = 'icon';
-    }
-
-    return `register-table__cell-${classNamePostfix}`;
-  }
-}

package/src/lib/components/register-table/pipes/sticky-column.pipe.ts

@@ -1,11 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'stickyColumn',
-  standalone: true,
-})
-export class StickyColumnPipe implements PipeTransform {
-  transform(value: string, array: string[] | undefined): boolean {
-    return array?.includes(value) ?? false;
-  }
-}

package/src/lib/components/register-table/register-table.component.html

@@ -1,257 +0,0 @@
-<section class="register-table__section">
-  <tui-scrollbar class="register-table__scrollable" (scrollend)="saveScrollEndPosition()">
-    <tui-loader class="register-table__loader" [showLoader]="isLoading() || false" [overlay]="true">
-      <table
-        tuiTable
-        class="table"
-        stickyRelative
-        [columns]="columnsWithCheckboxes()"
-        [style.width.px]="tableWidth()"
-        tuiSortBy=""
-        (sortChange)="sortChange($event)"
-      >
-        <thead>
-          @for (hrow of headerRows(); track $index) {
-            <tr tuiThGroup>
-              @if ($first && checkboxColumn()) {
-                <th
-                  tuiTh
-                  *tuiHead="CHECKBOX_SELECTOR_KEY"
-                  class="register-table__th-background--table-cell-blue register-table__cell-icon register-table__cell-checkbox-selector"
-                  [style.width.px]="CHECKBOX_SELECTOR_WIDTH_PX"
-                  [sorter]="null"
-                  [rowSpan]="maxDepth()"
-                >
-                  <sproc-checkbox-selector
-                    [selected]="selectedIds()"
-                    [totalRecords]="totalRecords()"
-                    [loading]="isSelectloading()"
-                    [disabled]="checkboxDisabled()"
-                    (onApply)="selectChanged.emit($event)"
-                  ></sproc-checkbox-selector>
-                </th>
-              }
-              @for (cell of hrow; track cell.col.name) {
-                @let thClass = cell.col.class ?? '';
-                @let thType = cell.col.type;
-                @let thName = cell.col.name;
-                @let sortable = checkAvailableColumnSorting(cell.col);
-                @let resizeBlocked = checkResizeBlocked(cell.col);
-                <th
-                  tuiTh
-                  tuiResizable
-                  *tuiHead="thName"
-                  [ngClass]="['register-table__th', thType | classByType, thClass]"
-                  [stickyLeft]="cell.col.fixed ?? (thName | stickyColumn: stickyLeftIds())"
-                  [stickyRight]="cell.col.fixed ?? (thName | stickyColumn: stickyRightIds())"
-                  [stylesOnSticky]="stickyThStyle"
-                  [style]="cell.col.headerStyle ?? ''"
-                  [style.min-width.px]="getThWidth(thName)"
-                  [style.width.px]="getThWidth(thName)"
-                  [style.max-width.px]="getThWidth(thName)"
-                  [tuiSortable]="sortable"
-                  [sorter]="sortable ? setThName(thName) : null"
-                  [tuiHint]="cell.col.tooltipText ?? null"
-                  [rowSpan]="cell.rowspan"
-                  [colSpan]="cell.colspan"
-                  [attr.order]="columnOrders.get(thName)?.options?.order"
-                >
-                  @if (cell.col.isHeadTemplate) {
-                    @let thProjection = getProjectionHeaderByName(thName);
-
-                    @if (thProjection) {
-                      <ng-container
-                        [ngTemplateOutlet]="thProjection"
-                        [ngTemplateOutletContext]="{
-                          $implicit: cell.col,
-                        }"
-                      ></ng-container>
-                    }
-                  } @else {
-                    @switch (thType) {
-                      @case (EColumnDataType.ICON) {
-                        <tui-icon
-                          class="register-table--icon-color"
-                          [icon]="cell.col.value!"
-                        ></tui-icon>
-                      }
-                      @case (EColumnDataType.ICON_SVG) {
-                        <img [src]="cell.col.value" [alt]="thName" />
-                      }
-                      @case (EColumnDataType.TEXT) {
-                        @if (cell.col.svgSrc) {
-                          <img [src]="cell.col.svgSrc" [alt]="thName" />
-                        }
-                        <span class="text-overflow--ellipsis" [ngStyle]="cell.col.textStyle">
-                          {{ cell.col.value }}
-                        </span>
-                      }
-                      @case (EColumnDataType.NUM) {
-                        <span [ngStyle]="cell.col.textStyle">
-                          {{ cell.col.value }}
-                        </span>
-                      }
-                      @case (EColumnDataType.DATE) {
-                        <span [ngStyle]="cell.col.textStyle">
-                          {{ cell.col.value }}
-                        </span>
-                      }
-                      @case (EColumnDataType.CHECKBOX) {
-                        {{ cell.col.value }}
-                      }
-                    }
-                  }
-                  @if (!resizeBlocked) {
-                    <div
-                      class="register-table__cell-resizer"
-                      [tuiResizer]="[1, 0]"
-                      (tuiSizeChange)="thResizeChanges(cell.col.name, $event[0])"
-                      (click)="$event.stopPropagation()"
-                    ></div>
-                  }
-                </th>
-              }
-            </tr>
-          }
-        </thead>
-        @let rows = rowData();
-        <tbody tuiTbody>
-          @for (row of rows; track row.id) {
-            @let state = stateObjects?.();
-            @let trSelected =
-              state
-                ? state.get(row.id)?.state === ERegisterObjectState.SELECTED
-                : selectedIds().has(row.id);
-
-            <tr
-              #bodyRow
-              tuiTr
-              class="register-table__row"
-              [class.selected]="trSelected"
-              [class.shift-pressed]="markRowBeforeSelect(row)"
-              (mouseenter)="onRowHover(row)"
-              (mouseleave)="onRowHover(null)"
-              (click)="onRowClick($event, row)"
-              (dblclick)="rowDblClick.emit(row)"
-            >
-              @if (checkboxColumn()) {
-                <td
-                  tuiTd
-                  *tuiCell="CHECKBOX_SELECTOR_KEY"
-                  class="register-table__cell-checkbox-selector"
-                >
-                  <input
-                    tuiCheckbox
-                    size="s"
-                    type="checkbox"
-                    class="checkbox"
-                    [checked]="trSelected"
-                    [disabled]="checkboxDisabled()"
-                  />
-                </td>
-              }
-              @for (columnData of leaves(); track columnData.name) {
-                @let tdType = columnData.type;
-                @let tdKey = columnData.name;
-                @let tdValue = row[tdKey];
-                @let tdClass = columnData.classTd ?? '';
-
-                <td
-                  tuiTd
-                  *tuiCell="tdKey"
-                  [ngClass]="[tdType | classByType: 'td', tdClass]"
-                  [stickyLeft]="tdKey | stickyColumn: stickyLeftIds()"
-                  [stickyRight]="tdKey | stickyColumn: stickyRightIds()"
-                  [stylesOnSticky]="stickyTdStyle"
-                >
-                  @if (columnData.isTemplate) {
-                    @let tdProjection = getProjectionCellByName(tdKey);
-
-                    @if (tdProjection) {
-                      <ng-container
-                        [ngTemplateOutlet]="tdProjection"
-                        [ngTemplateOutletContext]="{
-                          $implicit: tdValue,
-                          row,
-                        }"
-                      ></ng-container>
-                    }
-                  } @else {
-                    @switch (tdType) {
-                      @case (EColumnDataType.ICON) {
-                        @if (tdValue) {
-                          <tui-icon
-                            class="register-table--icon-color"
-                            [icon]="columnData.value!"
-                          ></tui-icon>
-                        }
-                      }
-                      @case (EColumnDataType.ICON_SVG) {
-                        @if (tdValue) {
-                          <img [src]="columnData.value" [alt]="tdKey" />
-                        }
-                      }
-                      @case (EColumnDataType.CHECKBOX) {
-                        <input
-                          tuiCheckbox
-                          size="s"
-                          type="checkbox"
-                          class="checkbox"
-                          [checked]="!!tdValue"
-                          [disabled]="true"
-                        />
-                      }
-                      @case (EColumnDataType.TEXT) {
-                        <span [tuiHint]="tdValue">
-                          {{ tdValue ?? '' }}
-                        </span>
-                        <span>
-                          {{ tdValue ? columnData.postfix : '' }}
-                        </span>
-                      }
-                      @case (EColumnDataType.NUM) {
-                        {{ tdValue ?? '' | number: columnData.numberPipe }}
-                        {{ tdValue ? columnData.postfix : '' }}
-                      }
-                      @case (EColumnDataType.DATE) {
-                        {{
-                          (tdValue
-                            | formatDate
-                              : ETimezone.UTC
-                              : columnData.datePattern ?? EDatePattern.DATE_TIME_WITHOUT_SECONDS
-                              : (timeZoneChanges$ | async)) ?? ''
-                        }}
-                        {{ tdValue ? columnData.postfix : '' }}
-                      }
-                    }
-                  }
-                </td>
-              }
-            </tr>
-          } @empty {
-            <tr class="empty-layer">
-              <td colspan="100%">
-                <div class="centered-text">{{ emptyText() }}</div>
-              </td>
-            </tr>
-          }
-        </tbody>
-      </table>
-    </tui-loader>
-  </tui-scrollbar>
-
-  <sproc-paginator
-    class="register-table__paginator"
-    [page]="page()"
-    [rows]="limit()"
-    [pageLinkSize]="1"
-    [totalRecords]="totalRecords()"
-    [totalNotFiltered]="totalNotFiltered()"
-    [rowsCountOptions]="[30, 40, 50]"
-    [selectedCounter]="selectedCounter()"
-    (paginatorChange)="paginatorChange.emit($event)"
-    [disabled]="paginatorDisabled()"
-    [isLoading]="isPaginatorLoading()"
-  >
-  </sproc-paginator>
-</section>