ngx-register-base 1.2.3 → 1.3.1

package/src/lib/components/reset-settings-form/reset-settings-form.component.html

@@ -0,0 +1,14 @@
+<section class="reset-warning">
+  <div class="main-warning">
+    Сбросить все параметры <br />
+    отображения реестра?
+  </div>
+  <div style="display: flex; flex-direction: row; padding: 16px 0 0 10px">
+    <img [src]="svgSrc.WARNING" alt="!" />
+
+    <span class="info"
+      >будут сброшены настройки отображения столбцов реестра <br />
+      (порядок, ширина, отображение и т.д.)</span
+    >
+  </div>
+</section>

package/src/lib/components/reset-settings-form/reset-settings-form.component.less

@@ -0,0 +1,26 @@
+.reset-warning {
+  .main-warning {
+    text-align: center;
+    font-variant-numeric: lining-nums tabular-nums;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    align-self: stretch;
+  }
+
+  .info {
+    padding-left: 4px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1 0 0;
+    align-self: stretch;
+    color: var(--main-black);
+    font-variant-numeric: lining-nums tabular-nums;
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 12px;
+  }
+}

package/src/lib/components/reset-settings-form/reset-settings-form.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+export enum SvgSrc {
+  WARNING = 'assets/ngx-register-base/icons/circle-exclamation-empty.svg',
+}
+
+@Component({
+  selector: 'sproc-reset-settings-form',
+  templateUrl: './reset-settings-form.component.html',
+  styleUrls: ['./reset-settings-form.component.less'],
+  standalone: true,
+})
+export class ResetSettingsFormComponent {
+  protected readonly svgSrc = SvgSrc;
+}

package/src/lib/components/search-input/search-input.component.html

@@ -0,0 +1,6 @@
+<sproc-param-custom [formControl]="searchControl()" [formatGqlValue]="formatGqlValueProxy">
+  <tui-textfield tuiTextfieldSize="m" [tuiTextfieldCleaner]="true">
+    <input placeholder="Поиск" tuiTextfield [formControl]="searchControl()" />
+    <tui-icon icon="@tui.search" [style.width.px]="16" />
+  </tui-textfield>
+</sproc-param-custom>

package/src/lib/components/search-input/search-input.component.less

@@ -0,0 +1,17 @@
+:host {
+  --tui-height-m: var(--top-bar-button-height);
+
+  width: 260px;
+  height: var(--tui-height-m);
+
+  input {
+    outline: none;
+    box-shadow: none;
+    border: 1px solid var(--input-stroke);
+  }
+
+  [tuiAppearance][data-appearance='textfield']:focus-visible:not([data-focus='false']) {
+    border-color: var(--brand-blue);
+    box-shadow: 0 0 0 2px #cae6f8;
+  }
+}

package/src/lib/components/search-input/search-input.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, Injector, input } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TuiIcon, TuiTextfield } from '@taiga-ui/core';
+import { CommonModule } from '@angular/common';
+import { InputsModule } from '../inputs';
+import { FormatterGqlValueType, IInputControl } from '../../types';
+
+@Component({
+  selector: 'sproc-search-input',
+  standalone: true,
+  templateUrl: './search-input.component.html',
+  styleUrls: ['./search-input.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, ReactiveFormsModule, InputsModule, TuiIcon, TuiTextfield],
+})
+export class SearchInputComponent {
+  public searchControl = input.required<
+    FormControl<string | null> | IInputControl<string | null>
+  >();
+  public searchGqlFormatter = input<FormatterGqlValueType<string>>();
+  public disabled = input<boolean>(false);
+
+  public readonly formatGqlValueProxy: FormatterGqlValueType<string> = (
+    value: string,
+    injector?: Injector
+  ) => {
+    const formatter = this.searchGqlFormatter();
+    const trimmedValue = value.trim();
+    return formatter ? formatter(trimmedValue, injector) : undefined;
+  };
+}

package/src/lib/components/sliding-panel/sliding-panel.component.html

@@ -0,0 +1,13 @@
+<div class="sproc-sliding-panel" [attr.show]="!!isOpen">
+  <div #headerContainer>
+    <ng-content select="[header]"></ng-content>
+  </div>
+
+  <prizm-scrollbar class="scrolled-content">
+    <ng-content />
+  </prizm-scrollbar>
+
+  <div #footerContainer>
+    <ng-content select="[footer]"></ng-content>
+  </div>
+</div>

package/src/lib/components/sliding-panel/sliding-panel.component.less

@@ -0,0 +1,112 @@
+@import 'fonts';
+
+:host {
+  position: fixed;
+  z-index: 3;
+  border-right: 1px;
+  box-shadow: 1px 0 12px 0 rgba(59, 71, 83, 15%);
+  //change
+  clip-path: inset(0 -12px 0 0);
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  scrollbar-width: none; /* for Firefox */
+  overflow-y: scroll;
+
+  .sproc-sliding-panel {
+    transition: width var(--page-menu-transition-time);
+    overflow-x: hidden;
+
+    &[show='true'] {
+      width: 302px;
+    }
+
+    &[show='false'] {
+      width: 0;
+    }
+
+    .scrolled-content {
+      height: calc(
+        100vh - var(--header-height) - var(--header-offset-height) - var(--footer-offset-height) -
+          var(--sub-offset-height)
+      );
+      margin-bottom: var(--footer-offset-height);
+    }
+  }
+
+  .divider {
+    ::ng-deep .horizontal-solid {
+      margin-bottom: 8px !important;
+    }
+  }
+
+  ::ng-deep {
+    sproc-param-date-time-range .prizm-icon-16.date-calendar-range::before {
+      mask-image: url('../../../../icons/calendar-icon.svg') !important;
+      background-color: #777b92;
+      color: #777b92;
+    }
+
+    sproc-param-date-time-range .prizm-icon-16:hover {
+      &.date-calendar-range::before {
+        background-color: #000000 !important;
+        color: #000000 !important;
+      }
+    }
+
+    .label {
+      color: #000000;
+    }
+
+    input {
+      color: #000000;
+      font-weight: 400 !important;
+    }
+
+    prizm-input-layout .prizm-input-form {
+      padding: 0 0 0 8px !important;
+
+      input {
+        padding-left: 4px !important;
+        padding-right: 4px !important;
+      }
+
+      .multiple-input-box {
+        padding-left: 4px !important;
+        padding-right: 4px !important;
+
+        input {
+          padding-left: unset !important;
+          padding-right: unset !important;
+        }
+      }
+    }
+
+    ::placeholder {
+      font-family: Inter, sans-serif;
+      font-size: 12px;
+      font-weight: 300;
+      line-height: 16px;
+    }
+
+    prizm-chips {
+      margin: 0 !important;
+    }
+
+    .chips-name,
+    .chips-list__item {
+      color: #000000;
+
+      .table-text-12px-400;
+    }
+
+    button[data-appearance='secondary'][data-appearance-type='ghost']:hover {
+      background: inherit !important;
+    }
+  }
+}
+
+::ng-deep {
+  .z-overlay-wrapper prizm-hint-container[data-prizm-theme='dark'] {
+    background: #ffffff !important;
+    color: #000000 !important;
+  }
+}

package/src/lib/components/sliding-panel/sliding-panel.component.ts

@@ -0,0 +1,36 @@
+import { Component, ElementRef, HostBinding, Input, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'sproc-sliding-panel',
+  templateUrl: './sliding-panel.component.html',
+  styleUrls: ['./sliding-panel.component.less'],
+})
+export class SlidingPanelComponent {
+  @HostBinding('style.--header-offset-height')
+  get headerOffsetHeightPx(): string {
+    const height: number = this._headerContainer?.nativeElement.children[0]?.offsetHeight ?? 0;
+
+    return `${height}px`;
+  }
+
+  @HostBinding('style.--footer-offset-height')
+  get footerOffsetHeightPx(): string {
+    const height: number = this._footerContainer?.nativeElement.children[0]?.offsetHeight ?? 0;
+
+    return `${height}px`;
+  }
+
+  @HostBinding('style.--sub-offset-height')
+  get subOffsetHeightPx(): string {
+    return `${this.subOffsetHeight}px`;
+  }
+
+  /** Доп. отступ для вычисления высоты панели (в пикселях) */
+  @Input() subOffsetHeight = 0;
+
+  /** Состояние видимости панели */
+  @Input() isOpen: boolean | null | undefined = false;
+
+  @ViewChild('headerContainer') private readonly _headerContainer: ElementRef | undefined;
+  @ViewChild('footerContainer') private readonly _footerContainer: ElementRef | undefined;
+}

package/src/lib/components/sliding-panel/sliding-panel.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SlidingPanelComponent } from './sliding-panel.component';
+import { PrizmScrollbarComponent } from '@prizm-ui/components';
+
+@NgModule({
+  declarations: [SlidingPanelComponent],
+  imports: [CommonModule, PrizmScrollbarComponent],
+  exports: [SlidingPanelComponent],
+})
+export class SlidingPanelModule {}

package/src/lib/consts/date-time.consts.ts

@@ -0,0 +1 @@
+export const STORED_TIMEZONE = 'storedTimezone';

package/src/lib/consts/index.ts

@@ -0,0 +1,8 @@
+export { INPUTS_STATE_CONFIG_KEY } from './inputs.consts';
+export * from './month.consts';
+export {
+  EOrder,
+  SETTINGS_TYPE,
+  USER_SETTINGS_LOADER,
+  USER_PROFILE_LOADER,
+} from './register-base.consts';

package/src/lib/consts/inputs.consts.ts

@@ -0,0 +1,9 @@
+import { InjectionToken } from '@angular/core';
+import { IInputsStateConfig } from '../types';
+
+export const INPUTS_STATE_CONFIG_KEY = new InjectionToken<IInputsStateConfig>(
+  'INPUTS_STATE_CONFIG_KEY'
+);
+
+export const WARN_SEARCH_INPUT_UNDEFINED =
+  'Поле поиска не инициализировано. Пожалуйста задайте конфигурацию searchInput: true при провайде INPUTS_STATE_CONFIG_KEY';

package/src/lib/consts/month.consts.ts

@@ -0,0 +1,82 @@
+export enum EMonth {
+  JAN,
+  FEB,
+  MAR,
+  APR,
+  MAY,
+  JUN,
+  JUL,
+  AUG,
+  SEP,
+  OCT,
+  NOV,
+  DEC,
+}
+
+export enum MonthsNumber {
+  January = 1,
+  February = 2,
+  March = 3,
+  April = 4,
+  May = 5,
+  June = 6,
+  July = 7,
+  August = 8,
+  September = 9,
+  October = 10,
+  November = 11,
+  December = 12,
+}
+
+export enum MonthsName {
+  January = 'Январь',
+  February = 'Февраль',
+  March = 'Март',
+  April = 'Апрель',
+  May = 'Май',
+  June = 'Июнь',
+  July = 'Июль',
+  August = 'Август',
+  September = 'Сентябрь',
+  October = 'Октябрь',
+  November = 'Ноябрь',
+  December = 'Декабрь',
+}
+
+export class MonthMapper {
+  public static readonly MONTH_NUMBER_NAMES: Map<string, MonthsNumber> = new Map([
+    [MonthsName.January, MonthsNumber.January],
+    [MonthsName.February, MonthsNumber.February],
+    [MonthsName.March, MonthsNumber.March],
+    [MonthsName.April, MonthsNumber.April],
+    [MonthsName.May, MonthsNumber.May],
+    [MonthsName.June, MonthsNumber.June],
+    [MonthsName.July, MonthsNumber.July],
+    [MonthsName.August, MonthsNumber.August],
+    [MonthsName.September, MonthsNumber.September],
+    [MonthsName.October, MonthsNumber.October],
+    [MonthsName.November, MonthsNumber.November],
+    [MonthsName.December, MonthsNumber.December],
+  ]);
+
+  public static getMonthNumber(monthName: string): number | undefined {
+    return this.MONTH_NUMBER_NAMES.get(monthName);
+  }
+
+  public static getRusNamesArr(): string[] {
+    const rusNamesArr: string[] = [...this.MONTH_NUMBER_NAMES.keys()];
+    return rusNamesArr;
+  }
+
+  public static getNumbersArr(): number[] {
+    const numberArr: number[] = [...this.MONTH_NUMBER_NAMES.values()];
+    return numberArr;
+  }
+
+  public static getMonthRusNameByNumber(monthNumber: number): string | undefined {
+    const monthName = Object.keys(MonthsNumber).find(
+      (key) => MonthsNumber[key as keyof typeof MonthsNumber] === monthNumber
+    );
+    return monthName ? MonthsName[monthName as keyof typeof MonthsName] : undefined;
+  }
+}

package/src/lib/consts/params.consts.ts

@@ -0,0 +1 @@
+export const PARAM_SEARCH_INPUT_DEBOUNCE_TIME_MLS = 1000;

package/src/lib/consts/register-base.consts.ts

@@ -0,0 +1,40 @@
+import {
+  ERegisterObjectState,
+  ITpUserSettings,
+  IUserProfileLoader,
+  IUserSettingsLoader,
+} from '../types/register-base.types';
+import { InjectionToken } from '@angular/core';
+import { IUserProfile } from '../types/user-profile.types';
+
+export const SEARCH_INPUT_DEBOUNCE_TIME_MLS = 1000;
+export const THS_WIDTH_CHANGES_DEBOUNCE_TIME_MLS = 2000;
+
+export const invertState = (state: ERegisterObjectState): ERegisterObjectState => {
+  if (state === ERegisterObjectState.SELECTED) {
+    return ERegisterObjectState.UNSELECTED;
+  }
+
+  return ERegisterObjectState.SELECTED;
+};
+
+export enum EOrder {
+  ASC = 'asc',
+  DESC = 'desc',
+}
+
+export enum SETTINGS_TYPE {
+  FILTER = 0,
+  COLUMNS = 1,
+  PAGE_MENU_STATE = 2,
+  REGISTER_PAGE_ROWS_LIMIT = 4,
+  REGISTER_PINNED_INPUTS = 5,
+}
+
+export const USER_SETTINGS_LOADER = new InjectionToken<IUserSettingsLoader<ITpUserSettings>>(
+  'USER_SETTINGS_LOADER'
+);
+
+export const USER_PROFILE_LOADER = new InjectionToken<IUserProfileLoader<IUserProfile>>(
+  'USER_PROFILE_LOADER'
+);

package/src/lib/core/form-group-wrapper/errors-consts.ts

@@ -0,0 +1,6 @@
+export enum ERuntimeErrorCode {
+  // Structure validation errors
+  NO_CONTROLS = 1000,
+  MISSING_CONTROL = 1001,
+  MISSING_CONTROL_VALUE = 1002,
+}

package/src/lib/core/form-group-wrapper/form-group-wrapper.ts

@@ -0,0 +1,109 @@
+import {
+  AbstractControl,
+  FormArray,
+  FormGroup,
+  ɵFormGroupRawValue,
+  ɵFormGroupValue,
+} from '@angular/forms';
+import { ɵRuntimeError as RuntimeError } from '@angular/core';
+import { ERuntimeErrorCode } from './errors-consts';
+import { ControlsWrapper, ExtractForm } from '../../types/sub-types';
+
+function assertAllValuesPresent(control: any, isGroup: boolean, value: any): void {
+  control._forEachChild((_: unknown, key: string | number) => {
+    if (value[key] === undefined) {
+      throw new RuntimeError(ERuntimeErrorCode.MISSING_CONTROL_VALUE, '');
+    }
+  });
+}
+
+export function assertControlPresent(parent: any, isGroup: boolean, key: string | number): void {
+  const controls = parent.controls as { [key: string | number]: unknown };
+  const collection = isGroup ? Object.keys(controls) : controls;
+
+  if (collection.length === 0) {
+    throw new RuntimeError(ERuntimeErrorCode.NO_CONTROLS, '');
+  }
+
+  if (!controls[key]) {
+    throw new RuntimeError(ERuntimeErrorCode.MISSING_CONTROL, '');
+  }
+}
+
+/** @deprecated заменить на FormGroup */
+export class FormGroupWrapper<TItem> extends FormGroup<ControlsWrapper<TItem>> {
+  public override setValue(
+    value: TItem & ɵFormGroupRawValue<any>,
+    options?: { onlySelf?: boolean; emitEvent?: boolean }
+  ): void {
+    assertAllValuesPresent(this, true, value);
+
+    for (const name of Object.keys(value) as (keyof TItem)[]) {
+      assertControlPresent(this, true, name as any);
+      const control = (this.controls as any)[name];
+      const currentValue = (value as any)[name];
+
+      if (control instanceof FormArray && Array.isArray(currentValue)) {
+        control.clear();
+
+        for (const item of currentValue as AbstractControl<any, any>[]) {
+          item.setParent(control);
+          control.push(item, { emitEvent: options?.emitEvent });
+        }
+      } else {
+        control.setValue(currentValue, {
+          onlySelf: true,
+          emitEvent: options?.emitEvent,
+        });
+      }
+    }
+
+    this.updateValueAndValidity(options);
+  }
+
+  public override patchValue(
+    value: Partial<TItem> | ɵFormGroupValue<any>,
+    options?: { onlySelf?: boolean; emitEvent?: boolean }
+  ): void {
+    if (value === null) {
+      return;
+    }
+
+    for (const name of Object.keys(value) as (keyof TItem)[]) {
+      const control = (this.controls as any)[name];
+      const currentValue = value[name as keyof ({ [key: string]: any } | Partial<TItem>)]!;
+
+      if (control) {
+        if (control instanceof FormArray && Array.isArray(currentValue)) {
+          control.clear();
+
+          for (const item of currentValue as AbstractControl<any, any>[]) {
+            item.setParent(control);
+            control.push(item, { emitEvent: options?.emitEvent });
+          }
+        } else {
+          control.patchValue(currentValue, {
+            onlySelf: true,
+            emitEvent: options?.emitEvent,
+          });
+        }
+      }
+    }
+
+    this.updateValueAndValidity(options);
+  }
+
+  public getDirtyValues(): Partial<ExtractForm<TItem>> {
+    const values: Partial<ExtractForm<TItem>> = {};
+
+    for (const key of Object.keys(this.controls)) {
+      const control = this.get(key);
+
+      if (control?.dirty) {
+        values[key as keyof TItem] = control.getRawValue();
+      }
+    }
+
+    return values;
+  }
+}

package/src/lib/core/input-control/input-control.ts

@@ -0,0 +1,30 @@
+import {
+  AsyncValidatorFn,
+  FormControl,
+  FormControlOptions,
+  FormControlState,
+  ValidatorFn,
+} from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+import { IInputControl, InputControlGqlValue } from '../../types/inputs.types';
+import { signal, WritableSignal } from '@angular/core';
+
+export class InputControl<ValueType = any, SavedValueType = any>
+  extends FormControl
+  implements IInputControl<ValueType, SavedValueType>
+{
+  public saved_value$!: BehaviorSubject<SavedValueType | null>;
+  public gql_value: InputControlGqlValue;
+  /** По полю применена фильтрация */
+  applied?: WritableSignal<boolean>;
+
+  constructor(
+    value: FormControlState<ValueType> | ValueType,
+    validatorOrOpts?: ValidatorFn | ValidatorFn[] | FormControlOptions | null,
+    asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null
+  ) {
+    super(value, validatorOrOpts, asyncValidator);
+    this.saved_value$ = new BehaviorSubject<SavedValueType | null>(null);
+    this.applied = signal(false);
+  }
+}