ngx-register-base 1.2.3 → 1.3.1

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

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

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

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

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

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

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

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

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

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