ngx-register-base 1.2.3 → 1.3.1

package/src/lib/components/filters/register-table-filter.component.less

@@ -0,0 +1,17 @@
+@import 'indicator';
+
+:host {
+  .loader {
+    height: 100%;
+  }
+
+  ::ng-deep {
+    .label-wrapper.applied {
+      &::after {
+        .indicator(5px, var(--brand-danger));
+
+        margin-left: 5px;
+      }
+    }
+  }
+}

package/src/lib/components/filters/register-table-filter.component.ts

@@ -0,0 +1,167 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { combineLatest, debounceTime, map, Subject, takeUntil, of } from 'rxjs';
+import {
+  EInputsAction,
+  EInputsState,
+  GqlFields,
+  IInputsState,
+  ITpUserSettings,
+  ITpUserSettingsSettingsFilter,
+} from '../../types';
+import { FiltersService, FiltersStateService } from '../../services';
+import { RegisterBaseStore } from '../../core';
+import { PAGE_MENU_STATE } from '../page-menu';
+
+@Component({
+  selector: 'sproc-register-table-filter',
+  templateUrl: './register-table-filter.component.html',
+  styleUrls: ['./register-table-filter.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegisterTableFilterComponent<Type extends Record<string, any>>
+  implements OnInit, AfterViewInit, OnDestroy
+{
+  /** Высота всего компонента фильтров */
+  @Input() height: string | undefined;
+  @Input() showTotal = true;
+  @Input() showPin = true;
+  @Input() showCloseButton = true;
+  @Input() acceptButtonDisabled = false;
+  @Input() applyButtonDisabled = false;
+  /** Доп. отступ для вычисления высоты панели (в пикселях) */
+  @Input() subOffsetHeight = 0;
+  @Input() filterListHeaderTitle = 'Фильтр';
+  @Input() footerApplyButtonLabel = 'Применить';
+
+  @Output() clickApplyButton = new EventEmitter<void>();
+
+  private readonly _menuState = inject(PAGE_MENU_STATE);
+
+  private readonly _unsubscribe$: Subject<void> = new Subject<void>();
+
+  public readonly FilterState = EInputsState;
+  public readonly filterState$ = this._filterStateService.state$.pipe(
+    map((filterState) => filterState.state)
+  );
+  public readonly isOpen$ = this.filterState$.pipe(map((state) => state !== EInputsState.HIDDEN));
+  public readonly total$ = this._store.total$ ?? of(0);
+
+  private _currentFilters: ITpUserSettingsSettingsFilter[] = [];
+  private _previousState: IInputsState = {
+    state: EInputsState.HIDDEN,
+    action: EInputsAction.CANCEL,
+  };
+
+  constructor(
+    private readonly _store: RegisterBaseStore<Type>,
+    private readonly _filterStateService: FiltersStateService<Type>,
+    private readonly _filterListService: FiltersService<Type>
+  ) {}
+
+  public ngOnInit(): void {
+    combineLatest([this._filterStateService.state$, this._filterStateService.selectedSavedFilter])
+      .pipe(takeUntil(this._unsubscribe$))
+      .subscribe({
+        next: ([state, selected]) => {
+          if (state.state === EInputsState.SAVED_LIST) {
+            this.acceptButtonDisabled = !selected;
+            return;
+          }
+
+          if (state.state === EInputsState.ON_EDIT_FILTER) {
+            this.acceptButtonDisabled = false;
+            return;
+          }
+
+          if (state.state === EInputsState.ON_SAVE_FILTER) {
+            this.acceptButtonDisabled = false;
+            return;
+          }
+          this.acceptButtonDisabled = true;
+        },
+      });
+
+    if (this._filterStateService.isPin) {
+      this._filterStateService.setState({
+        state: EInputsState.FILTER_LIST,
+        action: EInputsAction.OPEN,
+      });
+    }
+  }
+
+  protected closeMenu(isPin: boolean): void {
+    if (isPin) {
+      this._menuState.setOpen(false);
+    }
+  }
+
+  public onApplyFilter(gqlFilter: GqlFields, savePage?: boolean): void {
+    if (!savePage) {
+      this._filterStateService.setOffset(0);
+      this._filterStateService.setPage(1);
+    }
+    this._filterStateService.setGqlValues(gqlFilter);
+    this.clickApplyButton.next();
+  }
+
+  public ngAfterViewInit(): void {
+    this._subscribeOnState();
+  }
+
+  private _subscribeOnState(): void {
+    combineLatest([this._filterStateService.state$, this._filterStateService.selectedSavedFilter])
+      .pipe(debounceTime(500), takeUntil(this._unsubscribe$))
+      .subscribe(([state, settings]) => {
+        this._setFilters(state, settings);
+      });
+  }
+
+  private _setFilters(state: IInputsState, settings: ITpUserSettings | null): void {
+    const { state: currentState, action: currentAction } = state;
+    const { state: previousState } = this._previousState;
+
+    switch (currentState) {
+      case EInputsState.ON_EDIT_FILTER:
+        if (previousState !== EInputsState.ON_EDIT_FILTER) {
+          this._filterListService.setUserSettingsFilterValues(settings?.settings?.filter ?? []);
+        }
+        break;
+      case EInputsState.SAVED_LIST:
+        if (
+          previousState !== EInputsState.SAVED_LIST &&
+          previousState !== EInputsState.ON_EDIT_FILTER &&
+          previousState !== EInputsState.ON_SAVE_FILTER
+        ) {
+          this._currentFilters = this._filterListService.userSettingsFilter;
+        }
+        break;
+      case EInputsState.FILTER_LIST:
+        if (previousState !== EInputsState.FILTER_LIST) {
+          if (currentAction === EInputsAction.CANCEL) {
+            this._filterListService.setUserSettingsFilterValues(this._currentFilters);
+          } else if (currentAction === EInputsAction.APPLY_SAVED_FILTER) {
+            this._currentFilters = settings?.settings?.filter ?? [];
+          }
+        }
+        break;
+      default:
+        console.warn('Состояние фильтра', currentState);
+        break;
+    }
+  }
+
+  public ngOnDestroy(): void {
+    this._unsubscribe$.next();
+    this._unsubscribe$.complete();
+  }
+}

package/src/lib/components/filters/register-table-filter.module.ts

@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RegisterTableFilterComponent } from './register-table-filter.component';
+import { FilterListModule } from './components/filter-list.module';
+import { SlidingPanelModule } from '../sliding-panel/sliding-panel.module';
+import { DividerComponent } from '../divider/divider.component';
+import { TuiLoader } from '@taiga-ui/core';
+
+@NgModule({
+  declarations: [RegisterTableFilterComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FilterListModule,
+    DividerComponent,
+    SlidingPanelModule,
+    TuiLoader,
+  ],
+  exports: [RegisterTableFilterComponent],
+})
+export class RegisterTableFilterModule {}

package/src/lib/components/inputs/inputs.module.ts

@@ -0,0 +1,104 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ParamSelectComponent } from './param-select/param-select.component';
+import { ParamMultiSelectComponent } from './param-multi-select/param-multi-select.component';
+import { ParamDateRangeComponent } from './param-date-range/param-date-range.component';
+import { ParamMonthComponent } from './param-month/param-month.component';
+import { ParamMonthRangeComponent } from './param-month-range/param-month-range.component';
+import { ParamToggleComponent } from './param-toggle/param-toggle.component';
+import { ParamTextComponent } from './param-text/param-text.component';
+import { ParamDateTimeRangeComponent } from './param-date-time-range/param-date-time-range.component';
+import { ParamCustomComponent } from './param-custom/param-custom.component';
+import { ParamSwitcherComponent } from './param-switcher/param-switcher.component';
+import { ParamDateComponent } from './param-date/param-date.component';
+import { ParamSwitcherDateTimeRangeComponent } from './param-switcher-date-time-range/param-switcher-date-time-range.component';
+import { ParamDateTimeComponent } from './param-date-time/param-date-time.component';
+import {
+  TuiAppearance,
+  TuiButton,
+  TuiIcon,
+  TuiTextfieldComponent,
+  TuiTextfieldDirective,
+  TuiTextfieldDropdownDirective,
+  TuiTextfieldOptionsDirective,
+} from '@taiga-ui/core';
+import { TuiInputModule, TuiInputYearModule, TuiTextfieldControllerModule } from '@taiga-ui/legacy';
+import {
+  TuiChevron,
+  TuiDataListWrapperComponent,
+  TuiFilterByInputPipe,
+  TuiSelectDirective,
+  TuiSwitch,
+} from '@taiga-ui/kit';
+import { TuiInputSearch } from '@taiga-ui/layout';
+import { ParamTextareaComponent } from './param-textarea/param-textarea.component';
+import { ParamCalendarYearComponent } from './param-calendar-year/param-calendar-year.component';
+import { FormatDatePipe } from '../../directives/date/format-date.pipe';
+import { PrizmSharedModule } from '../../utils/prizm.shared.module';
+import { PrizmInputMultiSelectModule } from '@prizm-ui/components';
+import { ParamDeleteContentBtnComponent } from './sub-components/param-delete-content-icon/param-delete-content-btn.component';
+import { ParamInvalidIconComponent } from './sub-components/param-invalid-icon/param-invalid-icon.component';
+
+@NgModule({
+  declarations: [
+    ParamDateRangeComponent,
+    ParamDateTimeComponent,
+    ParamMonthComponent,
+    ParamMonthRangeComponent,
+    ParamToggleComponent,
+    ParamDateTimeRangeComponent,
+    ParamCustomComponent,
+    ParamSwitcherComponent,
+    ParamSwitcherDateTimeRangeComponent,
+    ParamSwitcherDateTimeRangeComponent,
+    ParamCalendarYearComponent,
+  ],
+  imports: [
+    CommonModule,
+    ParamTextComponent,
+    PrizmSharedModule,
+    PrizmInputMultiSelectModule,
+    TuiTextfieldComponent,
+    TuiTextfieldDirective,
+    TuiTextfieldOptionsDirective,
+    TuiAppearance,
+    TuiInputModule,
+    TuiTextfieldControllerModule,
+    TuiIcon,
+    TuiButton,
+    TuiChevron,
+    TuiSelectDirective,
+    TuiDataListWrapperComponent,
+    TuiTextfieldDropdownDirective,
+    TuiFilterByInputPipe,
+    TuiInputSearch,
+    ParamMultiSelectComponent,
+    ParamSelectComponent,
+    ParamDateComponent,
+    TuiSwitch,
+    ParamTextareaComponent,
+    TuiInputYearModule,
+    FormatDatePipe,
+    ParamDeleteContentBtnComponent,
+    ParamInvalidIconComponent,
+  ],
+  exports: [
+    ParamSelectComponent,
+    ParamMultiSelectComponent,
+    ParamDateRangeComponent,
+    ParamDateTimeComponent,
+    ParamMonthComponent,
+    ParamMonthRangeComponent,
+    ParamToggleComponent,
+    ParamTextComponent,
+    ParamDateTimeRangeComponent,
+    ParamCustomComponent,
+    ParamSwitcherComponent,
+    ParamDateComponent,
+    ParamSwitcherDateTimeRangeComponent,
+    ParamSwitcherDateTimeRangeComponent,
+    ParamTextareaComponent,
+    ParamCalendarYearComponent,
+  ],
+})
+export class InputsModule {}

package/src/lib/components/inputs/param-calendar-year/param-calendar-year.component.html

@@ -0,0 +1,49 @@
+<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
+  <ng-template #readTemplate>
+    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
+      <ng-container *ngIf="label">
+        <ng-container [ngSwitch]="paramStyle">
+          <ng-template ngSwitchCase="filter">
+            <div class="label-wrapper">
+              <span class="label">{{ label }}</span>
+              <div class="dashed-row"></div>
+            </div>
+          </ng-template>
+          <ng-template ngSwitchDefault>
+            <span class="label">{{ label }}</span>
+            <div class="dashed-row"></div>
+          </ng-template>
+        </ng-container>
+      </ng-container>
+      <div class="value">
+        <span>{{ showedValue }}</span>
+      </div>
+    </div>
+  </ng-template>
+  <ng-template #editTemplate>
+    <div class="container container--edit" [attr.sproc-param-style]="paramStyle">
+      <div *ngIf="label" class="label-wrapper" [class.applied]="applied()">
+        <span class="label" [class.required]="required">
+          {{ label }}
+        </span>
+      </div>
+
+      <tui-textfield
+        [tuiTextfieldSize]="size()"
+        [tuiTextfieldLabelOutside]="true"
+        [tuiTextfieldCleaner]="true"
+        (click)="click()"
+      >
+        <tui-input-year
+          #yearInput
+          [formControl]="control"
+          [max]="max()"
+          [min]="min()"
+          [disabledItemHandler]="disabledHandler"
+        >
+          Выберите год
+        </tui-input-year>
+      </tui-textfield>
+    </div>
+  </ng-template>
+</ng-container>

package/src/lib/components/inputs/param-calendar-year/param-calendar-year.component.less

@@ -0,0 +1,70 @@
+@import 'fonts';
+@import 'common-param';
+
+:host {
+  ::ng-deep {
+    tui-textfield {
+      padding: 0;
+    }
+
+    [tuiWrapper][data-appearance='textfield'] {
+      box-shadow: none !important;
+    }
+
+    tui-textfield > .t-content {
+      width: 100% !important;
+      height: 100% !important;
+      margin-inline-end: 0 !important;
+    }
+
+    tui-input-year {
+      height: 100% !important;
+      width: 100% !important;
+
+      tui-primitive-textfield {
+        height: 100% !important;
+        max-block-size: none !important;
+      }
+    }
+
+    .t-wrapper label {
+      .input-label;
+      .input-text-14px;
+    }
+
+    [automation-id='tui-primitive-textfield__wrapper'] {
+      padding-inline-start: calc(var(--t-start, 0rem) + var(--t-padding));
+    }
+
+    [tuiAppearance][data-appearance='textfield'] {
+      min-height: 32px;
+    }
+
+    .t-icons {
+      margin-inline-end: 0.5rem !important;
+      min-height: 32px;
+    }
+  }
+
+  .container {
+    &--read {
+      .read-style-card;
+      .read-style-filter;
+    }
+
+    &--edit {
+      .edit-style-card;
+      .edit-style-filter;
+
+      &[sproc-param-style='card'] {
+        ::ng-deep {
+          input {
+            .input-text-14px;
+
+            color: var(--text-contrast);
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/components/inputs/param-calendar-year/param-calendar-year.component.ts

@@ -0,0 +1,52 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  input,
+  viewChild,
+} from '@angular/core';
+import { type TuiBooleanHandler } from '@taiga-ui/cdk';
+import { TuiSizeL, TuiSizeM } from '@taiga-ui/core';
+import { ParamBase } from '../../../core/param/param-base';
+import { TuiInputYearComponent } from '@taiga-ui/legacy';
+
+@Component({
+  selector: 'sproc-param-calendar-year',
+  templateUrl: './param-calendar-year.component.html',
+  styleUrls: ['./param-calendar-year.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParamCalendarYearComponent extends ParamBase<number, string> {
+  private readonly _cdr = inject(ChangeDetectorRef);
+  public yearInputComponent = viewChild<TuiInputYearComponent>('yearInput');
+
+  override buildShowedValue = input((value: number): string => value?.toString() ?? '-');
+  protected readonly disabledHandler: TuiBooleanHandler<number> = (value) =>
+    this.disabledYears().includes(value);
+
+  public disabledYears = input<number[]>([]);
+  public min = input<number | null>(null);
+  public max = input<number | null>(null);
+  public size = input<TuiSizeL | TuiSizeM>('m');
+  protected isYearPickerOpen = false;
+
+  protected click(): void {
+    this.isYearPickerOpen = !this.isYearPickerOpen;
+
+    const yearComponent = this.yearInputComponent();
+    if (yearComponent) {
+      const inputEl = yearComponent.nativeFocusableElement!;
+      const onDocumentClick = (event: MouseEvent) => {
+        if (!inputEl.contains(event.target as Node) && this.isYearPickerOpen) {
+          (yearComponent as any).onOpenChange(false);
+          yearComponent.checkControlUpdate();
+          document.removeEventListener('click', onDocumentClick);
+          this.isYearPickerOpen = false;
+          this._cdr.markForCheck();
+        }
+      };
+      document.addEventListener('click', onDocumentClick);
+    }
+  }
+}

package/src/lib/components/inputs/param-custom/param-custom.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/lib/components/inputs/param-custom/param-custom.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ParamBase } from '../../../core/param/param-base';
+
+@Component({
+  selector: 'sproc-param-custom',
+  templateUrl: './param-custom.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParamCustomComponent extends ParamBase<any, any> {}

package/src/lib/components/inputs/param-date/param-date.component.html

@@ -0,0 +1,55 @@
+<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
+  <ng-template #readTemplate>
+    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
+      <ng-container *ngIf="label">
+        <ng-container [ngSwitch]="paramStyle">
+          <ng-template ngSwitchCase="filter">
+            <div class="label-wrapper">
+              <span class="label">{{ label }}</span>
+              <div class="dashed-row"></div>
+            </div>
+          </ng-template>
+          <ng-template ngSwitchDefault>
+            <span class="label">{{ label }}</span>
+            <div class="dashed-row"></div>
+          </ng-template>
+        </ng-container>
+      </ng-container>
+      <div class="value">
+        <span>{{ showedValue }}</span>
+      </div>
+    </div>
+  </ng-template>
+  <ng-template #editTemplate>
+    <div class="container container--edit" [attr.sproc-param-style]="paramStyle">
+      <div *ngIf="label" class="label-wrapper" [class.applied]="applied()">
+        <span class="label" [class.required]="required">
+          {{ label }}
+        </span>
+      </div>
+
+      <tui-textfield
+        tuiAppearance="sproc-input-appearance"
+        tuiTextfieldSize="m"
+        [tuiTextfieldLabelOutside]="true"
+        [style.--t-icon-end]="'url(/assets/ngx-register-base/icons/calendar-blank.svg)'"
+        [style.--t-icon-size]="'16px'"
+      >
+        <input
+          tuiInputDate
+          [min]="min"
+          [max]="max"
+          [placeholder]="placeholder()"
+          [formControl]="control"
+        />
+        <tui-calendar *tuiTextfieldDropdown />
+
+        <div class="textfield-icons-container">
+          @if (isInvalidAndNotPristine) {
+            <sproc-param-invalid-icon></sproc-param-invalid-icon>
+          }
+        </div>
+      </tui-textfield>
+    </div>
+  </ng-template>
+</ng-container>

package/src/lib/components/inputs/param-date/param-date.component.less

@@ -0,0 +1,67 @@
+@import 'fonts';
+@import 'common-param';
+
+:host {
+  .container {
+    &--read {
+      .read-style-card;
+      .read-style-filter;
+    }
+
+    &--edit {
+      .edit-style-card;
+      .edit-style-filter;
+
+      &[sproc-param-style='card'] {
+        ::ng-deep {
+          input {
+            .input-text-14px;
+
+            color: var(--text-contrast);
+          }
+        }
+      }
+
+      &[sproc-param-style='filter'] {
+        ::ng-deep {
+          input {
+            .input-text-12px;
+
+            color: var(--text-contrast);
+          }
+        }
+      }
+
+      ::ng-deep {
+        tui-textfield {
+          --t-icon-end: url('/assets/ngx-register-base/icons/calendar-custom.svg') !important;
+
+          &::after {
+            padding-top: 14px;
+            width: 16px !important;
+            height: 16px !important;
+          }
+        }
+      }
+    }
+  }
+
+  ::ng-deep {
+    tui-textfield[tuiIcons] .t-content {
+      display: flex !important;
+      align-items: center !important;
+      justify-content: flex-end !important;
+    }
+
+    tui-textfield[tuiIcons]::after {
+      content: '';
+      width: 16px !important;
+      height: 16px !important;
+      background-size: 16px 16px !important;
+      background-repeat: no-repeat !important;
+      background-position: center !important;
+      order: 2;
+      align-self: center;
+    }
+  }
+}