ngx-register-base 1.2.3 → 1.3.1

package/src/lib/components/column-settings/components/column-settings-template/column-settings-template.component.ts

@@ -0,0 +1,114 @@
+import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
+import { EColumnStatus, IColumnSettings } from '../../types/column-settings.types';
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDragPlaceholder,
+  CdkDropList,
+  moveItemInArray,
+  transferArrayItem,
+} from '@angular/cdk/drag-drop';
+import { NgOptimizedImage } from '@angular/common';
+import { TuiHintDirective } from '@taiga-ui/core';
+import {
+  ICON_CHEVRONS_RIGHT,
+  ICON_EDITOR_DOTS,
+  ICON_EYE,
+  ICON_EYE_CLOSED,
+  ICON_LOCK,
+} from '../../consts/column-settings.consts';
+import { TuiExpand } from '@taiga-ui/experimental';
+
+@Component({
+  selector: 'sproc-column-settings-template',
+  standalone: true,
+  imports: [
+    NgOptimizedImage,
+    CdkDrag,
+    CdkDragPlaceholder,
+    CdkDropList,
+    TuiExpand,
+    TuiHintDirective,
+  ],
+  templateUrl: './column-settings-template.component.html',
+  styleUrl: './column-settings-template.component.less',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ColumnSettingsTemplateComponent {
+  public column = input.required<IColumnSettings>();
+  public parent = input<IColumnSettings>();
+  public expand = input(true);
+
+  protected readonly iconEditorDots = ICON_EDITOR_DOTS;
+  protected readonly iconChevron = ICON_CHEVRONS_RIGHT;
+  protected readonly iconEye = ICON_EYE;
+  protected readonly iconEyeClosed = ICON_EYE_CLOSED;
+  protected readonly iconLock = ICON_LOCK;
+
+  protected readonly EColumnStatus = EColumnStatus;
+
+  protected readonly status = computed(() => this.column().status);
+  protected readonly canExpand = computed(() => {
+    const wantExpand = this.expand();
+    const children = this.column().children ?? [];
+    const haveChildren = children.length > 0;
+
+    return wantExpand && haveChildren;
+  });
+  protected readonly expanded = signal(false);
+
+  protected collapseNested(): void {
+    this.expanded.set(false);
+  }
+
+  protected toggleNested(): void {
+    this.expanded.update((value) => !value);
+  }
+
+  protected isHiddenColumn(column: IColumnSettings): boolean {
+    return column.status === EColumnStatus.HIDDEN;
+  }
+
+  protected toggleVisibility(column: IColumnSettings): void {
+    const isHidden = column.status === EColumnStatus.HIDDEN;
+    column.status = isHidden ? EColumnStatus.DEFAULT : EColumnStatus.HIDDEN;
+
+    const { children } = column;
+
+    // Если есть дочерние узлы то устанавливать статус текущего узла
+    if (children) {
+      column.children = children.map((childColumn) => ({ ...childColumn, status: column.status }));
+    }
+
+    const parentColumn = this.parent();
+    const parentChildren = parentColumn?.children;
+
+    if (parentColumn && parentChildren && parentChildren.length > 0) {
+      const allChildrenHidden = parentChildren.every(
+        (childColumn) => childColumn.status === EColumnStatus.HIDDEN
+      );
+
+      parentColumn.status = allChildrenHidden ? EColumnStatus.HIDDEN : EColumnStatus.DEFAULT;
+    }
+  }
+
+  protected dropIntoChildren(event: CdkDragDrop<IColumnSettings[]>): void {
+    const currentChildren = this.column().children;
+
+    if (!currentChildren) {
+      console.warn('Попытка переместить в столбец без дочернего массива:', this.column());
+      return;
+    }
+
+    if (event.previousContainer === event.container) {
+      moveItemInArray(currentChildren, event.previousIndex, event.currentIndex);
+    } else {
+      transferArrayItem(
+        event.previousContainer.data,
+        currentChildren,
+        event.previousIndex,
+        event.currentIndex
+      );
+    }
+  }
+}

package/src/lib/components/column-settings/consts/column-settings.consts.ts

@@ -0,0 +1,9 @@
+// Icons
+export const ICON_SETTINGS = '/assets/ngx-register-base/icons/settings.svg';
+export const ICON_ERASER = '/assets/ngx-register-base/icons/eraser.svg';
+export const ICON_CANCEL_CLOSE = '/assets/ngx-register-base/icons/cancel-close.svg';
+export const ICON_EDITOR_DOTS = '/assets/ngx-register-base/icons/16-editor-dots.svg';
+export const ICON_CHEVRONS_RIGHT = '/assets/ngx-register-base/icons/chevrons/chevrons-right.svg';
+export const ICON_EYE = '/assets/ngx-register-base/icons/eye.svg';
+export const ICON_EYE_CLOSED = '/assets/ngx-register-base/icons/eye-closed.svg';
+export const ICON_LOCK = '/assets/ngx-register-base/icons/lock.svg';

package/src/lib/components/column-settings/types/column-settings.types.ts

@@ -0,0 +1,26 @@
+export interface ITableColumnSettings {
+  columns: IColumnSettings[];
+  stickyLeft: IColumnSettings[];
+  stickyRight: IColumnSettings[];
+}
+
+export interface IColumnSettings {
+  id: string;
+  name: string;
+  status: EColumnStatus | IColumnStatus;
+  children?: IColumnSettings[];
+}
+
+/** @deprecated используйте EColumnStatus */
+export type IColumnStatus = 'sticky' | 'hidden' | 'default';
+
+export enum EColumnStatus {
+  STICKY = 'sticky',
+  HIDDEN = 'hidden',
+  DEFAULT = 'default',
+}
+
+export interface IColumnSettingsChanges {
+  settings: ITableColumnSettings | null;
+  id?: string;
+}

package/src/lib/components/divider/divider.component.html

@@ -0,0 +1,4 @@
+<div
+  [class.horizontal-solid]="layout === 'horizontal'"
+  [class.vertical-solid]="layout === 'vertical'"
+></div>

package/src/lib/components/divider/divider.component.less

@@ -0,0 +1,10 @@
+:host {
+  .horizontal-solid {
+    border-top: 1px solid #d5d7dd;
+  }
+
+  .vertical-solid {
+    border-left: 1px solid #d5d7dd;
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'sproc-divider',
+  templateUrl: './divider.component.html',
+  styleUrls: ['./divider.component.less'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DividerComponent {
+  @Input() layout: 'horizontal' | 'vertical' = 'horizontal';
+}

package/src/lib/components/filter-button/filter-button.component.html

@@ -0,0 +1,20 @@
+<button
+  tuiButton
+  size="m"
+  appearance="outline-grayscale"
+  tuiHint
+  tuiHintDirection="bottom"
+  [class.--indicator]="filterApplied()"
+  [disabled]="disabled()"
+  (click)="filterToggle.emit()"
+>
+  <img ngSrc="assets/ngx-register-base/icons/filter.svg" alt="" height="16" width="16" />
+
+  <tui-hint
+    *tuiHint
+    class="filter-button__tooltip"
+    [class.filter-button__tooltip--showed]="filterApplied()"
+  >
+    <span>К реестру применены фильтры</span>
+  </tui-hint>
+</button>

package/src/lib/components/filter-button/filter-button.component.less

@@ -0,0 +1,41 @@
+@import 'buttons';
+@import 'indicator';
+
+:host {
+  button {
+    .top-icon-button();
+
+    position: relative;
+
+    &:disabled {
+      .top-icon-button--disabled();
+    }
+
+    &.--indicator {
+      &::after {
+        .indicator(8px, var(--brand-danger));
+
+        position: absolute;
+        top: 10px;
+        right: 6px;
+      }
+    }
+  }
+}
+
+.filter-button__tooltip {
+  background-color: var(--brand-danger-light) !important;
+  padding: 16px;
+  border: 1px solid var(--brand-danger);
+  border-left-width: 4px;
+  display: none;
+
+  span {
+    font: var(--input-text-12px);
+    color: var(--main-black);
+  }
+
+  &--showed {
+    display: unset;
+  }
+}

package/src/lib/components/filter-button/filter-button.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { TuiButton, TuiHint } from '@taiga-ui/core';
+import { NgOptimizedImage } from '@angular/common';
+
+@Component({
+  selector: 'sproc-filter-button',
+  templateUrl: './filter-button.component.html',
+  styleUrl: './filter-button.component.less',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TuiButton, TuiHint, NgOptimizedImage],
+})
+export class FilterButtonComponent {
+  public filterApplied = input.required<boolean>();
+  public disabled = input(false);
+
+  public filterToggle = output<void>();
+}

package/src/lib/components/filters/components/filter-list/filter-edit/filter-edit.component.html

@@ -0,0 +1,22 @@
+<div class="input-wrapper">
+  <prizm-input-layout [clearButton]="clearButtonTemplate" size="s">
+    <input [formControl]="valueControl" placeholder="Введите название фильтра" prizmInput />
+  </prizm-input-layout>
+</div>
+
+<ng-template
+  #clearButtonTemplate
+  let-showStatusButton="showStatusButton"
+  let-disabled="disabled"
+  let-clear="clear"
+>
+  <button
+    class="{{ showStatusButton ? '' : 'alone' }}"
+    [interactive]="true"
+    [disabled]="disabled"
+    [prizmHint]="'Нажмите для очистки'"
+    [prizmHintTheme]="'light'"
+    [prizmInputIconButton]="'cancel-delete-content'"
+    (click)="clear($event)"
+  ></button>
+</ng-template>

package/src/lib/components/filters/components/filter-list/filter-edit/filter-edit.component.less

@@ -0,0 +1,23 @@
+@import 'fonts';
+
+:host {
+  .input-wrapper {
+    padding: 16px;
+  }
+
+  ::ng-deep {
+    .prizm-input-form {
+      background: inherit;
+      border: 1px solid #d7d8df;
+    }
+
+    .prizm-input-form-inner {
+      min-height: 32px;
+      height: 32px;
+    }
+
+    input {
+      .input-text-12px;
+    }
+  }
+}

package/src/lib/components/filters/components/filter-list/filter-edit/filter-edit.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { FiltersStateService } from '../../../../../services';
+
+@Component({
+  selector: 'sproc-filter-edit',
+  templateUrl: './filter-edit.component.html',
+  styleUrls: ['./filter-edit.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilterEditComponent implements OnInit, OnDestroy {
+  public readonly valueControl: FormControl<string | null> = new FormControl<string | null>('');
+  private subscription: Subscription | null = null;
+
+  constructor(private readonly _filterStateService: FiltersStateService<any>) {}
+
+  public ngOnInit(): void {
+    const name = this._filterStateService.getSelectedSavedFilter()?.name ?? '';
+
+    this.valueControl.setValue(name);
+    this._filterStateService.setName(name);
+    this.subscription = this.valueControl.valueChanges.subscribe((value) => {
+      this._filterStateService.setName(value ?? '');
+    });
+  }
+
+  public ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
+  }
+}

package/src/lib/components/filters/components/filter-list/filter-list-footer/filter-list-footer.component.html

@@ -0,0 +1,49 @@
+<div class="sproc-filter-list-footer-container">
+  <ng-container [ngSwitch]="filterState$ | async">
+    <ng-container *ngSwitchCase="FilterState.FILTER_LIST">
+      <button
+        class="filter-list__button"
+        prizmButton
+        size="s"
+        [disabled]="applyButtonDisabled"
+        (click)="onApplyFilter()"
+      >
+        {{ footerApplyButtonLabel }}
+      </button>
+    </ng-container>
+
+    <ng-container *ngSwitchCase="FilterState.SAVED_LIST">
+      <button
+        class="filter-list__button"
+        prizmButton
+        size="s"
+        [disabled]="acceptButtonDisabled"
+        (click)="onApplySavedFilter()"
+      >
+        Применить
+      </button>
+    </ng-container>
+
+    <ng-container
+      *ngSwitchCase="FilterState.ON_EDIT_FILTER"
+      [ngTemplateOutlet]="onEditFilter"
+    ></ng-container>
+
+    <ng-container
+      *ngSwitchCase="FilterState.ON_SAVE_FILTER"
+      [ngTemplateOutlet]="onEditFilter"
+    ></ng-container>
+
+    <ng-template #onEditFilter>
+      <button
+        class="filter-list__button"
+        prizmButton
+        size="s"
+        [disabled]="acceptButtonDisabled"
+        (click)="onSaveFilter()"
+      >
+        Сохранить
+      </button>
+    </ng-template>
+  </ng-container>
+</div>

package/src/lib/components/filters/components/filter-list/filter-list-footer/filter-list-footer.component.less

@@ -0,0 +1,37 @@
+:host {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  .sproc-filter-list-footer-container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    height: 48px;
+    width: 100%;
+    border-top: 1px;
+    gap: 8px;
+    padding: 8px 16px 8px 16px;
+    background: var(--main-white);
+
+    .filter-list__button {
+      width: 100%;
+      height: 32px;
+    }
+
+    button {
+      ::ng-deep .z-wrapper {
+        display: flex !important;
+
+        ::ng-deep .z-content .prizm-font-btn-links-14 {
+          font-weight: 400 !important;
+        }
+
+        ::ng-deep .z-content {
+          margin: auto !important;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}

package/src/lib/components/filters/components/filter-list/filter-list-footer/filter-list-footer.component.ts

@@ -0,0 +1,66 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  EventEmitter,
+  inject,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { map } from 'rxjs';
+import { FilterListService } from '../filter-list.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { EInputsState, GqlFields } from '../../../../../types';
+import { FiltersStateService } from '../../../../../services';
+import { getLastSegmentOfPathName } from '../../../../../utils/get-url-segment';
+
+@Component({
+  selector: 'sproc-filter-list-footer',
+  templateUrl: './filter-list-footer.component.html',
+  styleUrls: ['./filter-list-footer.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [FilterListService],
+})
+export class FilterListFooterComponent implements OnInit {
+  @Input() acceptButtonDisabled = false;
+  @Input() applyButtonDisabled = false;
+  @Input() footerApplyButtonLabel = 'Применить';
+  @Output() apply: EventEmitter<GqlFields> = new EventEmitter<GqlFields>();
+
+  private readonly _dr = inject(DestroyRef);
+
+  public readonly filterState$ = this._filterStateService.state$.pipe(
+    map((filterState) => filterState.state)
+  );
+
+  public readonly FilterState = EInputsState;
+
+  constructor(
+    private readonly _router: Router,
+    private readonly _filterStateService: FiltersStateService<any>,
+    private readonly _filterListService: FilterListService
+  ) {}
+
+  public ngOnInit(): void {
+    this._filterListService.modulePath = getLastSegmentOfPathName(this._router.url);
+
+    this._filterListService.apply$.pipe(takeUntilDestroyed(this._dr)).subscribe((gql) => {
+      this.apply.emit(gql);
+      this._filterListService.savePinnedFilters();
+    });
+  }
+
+  public onApplyFilter(): void {
+    this._filterListService.applyFilter();
+  }
+
+  public onApplySavedFilter(): void {
+    this._filterListService.applySavedFilter();
+  }
+
+  public onSaveFilter(): void {
+    this._filterListService.saveFilter();
+  }
+}

package/src/lib/components/filters/components/filter-list/filter-list-header/filter-list-header.component.html

@@ -0,0 +1,147 @@
+<ng-container [ngSwitch]="filterState$ | async">
+  <h4 *ngSwitchCase="FilterState.FILTER_LIST">{{ filterListHeaderTitle }}</h4>
+  <h4 *ngSwitchCase="FilterState.SAVED_LIST">Сохраненные фильтры</h4>
+  <h4 *ngSwitchCase="FilterState.ON_EDIT_FILTER">Редактирование фильтра</h4>
+  <h4 *ngSwitchCase="FilterState.ON_SAVE_FILTER">Сохранить фильтр</h4>
+</ng-container>
+
+<div class="sproc-filter-list-header-actions-button">
+  <ng-container [ngSwitch]="filterState$ | async">
+    <ng-container
+      *ngSwitchCase="FilterState.FILTER_LIST"
+      [ngTemplateOutlet]="filterListTemplate"
+    ></ng-container>
+    <ng-container
+      *ngSwitchCase="FilterState.SAVED_LIST"
+      [ngTemplateOutlet]="savedListTemplate"
+    ></ng-container>
+    <ng-container
+      *ngSwitchCase="FilterState.ON_EDIT_FILTER"
+      [ngTemplateOutlet]="saveFilterTemplate"
+    ></ng-container>
+    <ng-container
+      *ngSwitchCase="FilterState.ON_SAVE_FILTER"
+      [ngTemplateOutlet]="saveFilterTemplate"
+    ></ng-container>
+    <ng-container *ngSwitchDefault [ngTemplateOutlet]="backButtonTemplate"></ng-container>
+  </ng-container>
+</div>
+
+<ng-template #filterListTemplate>
+  <ng-container *ngIf="showPin">
+    <button
+      size="s"
+      appearanceType="ghost"
+      appearance="secondary"
+      prizmButton
+      class="icon-button"
+      (click)="onTogglePin()"
+    >
+      <img
+        [src]="
+          'assets/ngx-register-base/icons/' + (isPin ? 'thumbtack-directly.svg' : 'thumbtack.svg')
+        "
+      />
+    </button>
+
+    <sproc-divider layout="vertical"></sproc-divider>
+  </ng-container>
+
+  <button
+    icon="social-star"
+    size="s"
+    appearanceType="ghost"
+    appearance="secondary"
+    prizmButton
+    class="icon-button"
+    (click)="onSavedList()"
+  ></button>
+
+  <button
+    icon="tools-content-save"
+    size="s"
+    appearanceType="ghost"
+    appearance="secondary"
+    prizmButton
+    class="icon-button"
+    (click)="onSave()"
+  ></button>
+
+  <sproc-divider layout="vertical"></sproc-divider>
+
+  <button
+    icon="selection-check-simple"
+    size="s"
+    appearanceType="ghost"
+    appearance="primary"
+    prizmButton
+    class="icon-button"
+    [disabled]="applyButtonDisabled"
+    (click)="onApplyFilter()"
+  ></button>
+
+  <button
+    icon="tools-eraser"
+    size="s"
+    appearanceType="ghost"
+    appearance="secondary"
+    prizmButton
+    class="icon-button"
+    (click)="onReset()"
+  ></button>
+
+  <button
+    *ngIf="showCloseButton"
+    icon="cancel-close"
+    size="s"
+    appearanceType="ghost"
+    appearance="danger"
+    prizmButton
+    class="icon-button"
+    (click)="onClose()"
+  ></button>
+</ng-template>
+
+<ng-template #savedListTemplate>
+  <button
+    icon="selection-check-simple"
+    size="s"
+    appearanceType="ghost"
+    appearance="primary"
+    prizmButton
+    class="icon-button"
+    [disabled]="acceptButtonDisabled"
+    (click)="onApplySavedFilter()"
+  ></button>
+
+  <ng-container *ngTemplateOutlet="backButtonTemplate"></ng-container>
+</ng-template>
+
+<ng-template #saveFilterTemplate>
+  <button
+    icon="tools-content-save"
+    size="s"
+    appearanceType="ghost"
+    appearance="secondary"
+    prizmButton
+    class="icon-button"
+    [disabled]="acceptButtonDisabled"
+    (click)="onSaveFilter()"
+  ></button>
+
+  <ng-container *ngTemplateOutlet="backButtonTemplate"></ng-container>
+</ng-template>
+
+<ng-template #backButtonTemplate>
+  <button
+    icon="arrows-corner-up-left"
+    size="s"
+    appearanceType="ghost"
+    appearance="secondary"
+    prizmButton
+    class="icon-button"
+    prizmHint="Главное меню фильтров"
+    prizmHintTheme="light"
+    (click)="onBack()"
+  ></button>
+</ng-template>

package/src/lib/components/filters/components/filter-list/filter-list-header/filter-list-header.component.less

@@ -0,0 +1,45 @@
+@import 'fonts';
+
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+  height: 40px;
+  padding: 0 8px 0 16px;
+  border-radius: 2px 2px 0 0;
+  background: var(--table-header, #eef0f5);
+  border-bottom: 1px solid rgba(119, 123, 146, 30%);
+
+  h4 {
+    .static-title-h4;
+  }
+
+  .sproc-filter-list-header-actions-button {
+    height: 32px;
+    display: flex;
+
+    .icon-button {
+      height: 32px;
+
+      ::ng-deep {
+        .prizm-font-btn-links-14 {
+          height: 16px;
+        }
+
+        .z-wrapper {
+          display: flex;
+          align-items: center;
+
+          &[data-appearance='secondary'][data-appearance-type='ghost'] {
+            color: #4f5669;
+
+            &:hover {
+              color: var(--main-black);
+            }
+          }
+        }
+      }
+    }
+  }
+}