ngx-register-base 1.2.3 → 1.3.1

package/src/lib/components/inputs/param-tree-multi-select/param-tree-multi-select.component.less

@@ -0,0 +1,109 @@
+@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'] {
+        padding: 0 2px;
+
+        .label-wrapper {
+          .default-label-wrapper;
+
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+        }
+
+        ::ng-deep {
+          input {
+            .input-text-14px;
+
+            color: var(--text-contrast);
+          }
+        }
+      }
+
+      &[sproc-param-style='filter'] {
+        ::ng-deep {
+          input {
+            .input-text-12px;
+
+            color: var(--text-contrast);
+          }
+        }
+      }
+
+      .selected-item-wrapper {
+        display: flex;
+        flex-direction: row;
+        padding: 4px;
+        margin: 0 2px;
+        min-width: 4px;
+        max-width: 100%;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 2px;
+        background: var(--chip-background);
+        font-size: 14px;
+        line-height: 16px;
+        color: var(--main-black);
+        cursor: pointer;
+      }
+    }
+
+    .default-label {
+      .input-label;
+
+      color: var(--main-black);
+
+      &.required::after {
+        content: '*';
+        color: var(--brand-danger);
+        margin-left: 2px;
+      }
+    }
+  }
+
+  .hintIcon {
+    width: 16px;
+    height: 16px;
+  }
+
+  ::ng-deep {
+    .choosed {
+      display: none;
+    }
+
+    .empty {
+      position: relative;
+
+      .choosed {
+        display: flex;
+        cursor: pointer;
+        align-items: center;
+        position: absolute;
+        justify-content: space-between;
+        top: 7px;
+        left: 8px;
+        z-index: 2;
+        font-size: 12px;
+        font-family: Inter, sans-serif;
+        color: #000000;
+        padding: 6px;
+        border-radius: 2px;
+        width: 95px;
+        height: 18px;
+        background: var(--prizm-v3-status-none-secondary-default);
+      }
+    }
+  }
+}

package/src/lib/components/inputs/param-tree-multi-select/param-tree-multi-select.component.ts

@@ -0,0 +1,89 @@
+import { Component, effect, inject, Injector, input, signal } from '@angular/core';
+import { TuiAppearance, TuiHint, TuiIcon, TuiTextfield } from '@taiga-ui/core';
+import { TUI_TREE_LOADING, TuiChevron, TuiComboBox } from '@taiga-ui/kit';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NgTemplateOutlet } from '@angular/common';
+import { TuiTextfieldControllerModule } from '@taiga-ui/legacy';
+import { ITreeNode } from '../param-tree/types/param-tree.types';
+import { ParamTreeComponent } from '../param-tree/param-tree.component';
+import { ParamTreeService } from '../param-tree/services/param-tree.service';
+import { TREE_LOADING_NODE } from '../param-tree/consts/param-tree.consts';
+import { FastQueryStore } from '../../../store/fast-query-store.service';
+import { ParamSelectBase } from '../../../core/param/param-select-base';
+import { distinctUntilChangedJSONs } from '../../../utils';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+export type InputTreeSelectSavedValue<T> = ITreeNode<T> & { [key: string]: any };
+
+/** Компонент выбора единственного значения из иерархического списка */
+@Component({
+  selector: 'sproc-param-tree-multi-select',
+  standalone: true,
+  imports: [
+    NgTemplateOutlet,
+    TuiIcon,
+    TuiHint,
+    ReactiveFormsModule,
+    TuiTextfieldControllerModule,
+    ParamTreeComponent,
+    TuiAppearance,
+    TuiTextfield,
+    TuiChevron,
+    TuiComboBox,
+  ],
+  templateUrl: './param-tree-multi-select.component.html',
+  styleUrl: './param-tree-multi-select.component.less',
+  providers: [
+    ParamTreeService,
+    { provide: TUI_TREE_LOADING, useValue: TREE_LOADING_NODE },
+    FastQueryStore,
+  ],
+})
+export class ParamTreeMultiSelectComponent<T> extends ParamSelectBase<
+  ITreeNode<T>[],
+  InputTreeSelectSavedValue<T>[]
+> {
+  /** Передача загрузочного узла для загрузки начального уровня иерархического списка */
+  public loaderNode = input.required<ITreeNode<T>>();
+  /**
+   * Возможность раскрывать/скрывать узлы иерархического списка.
+   * Логическое значение - это значение узла по умолчанию (раскрыты/скрыты).
+   *
+   * @default Без указания параметра (или значении null) - все узлы раскрыты без возможности изменять состояние.
+   * */
+  public defaultNodeOpenedState = input<boolean>();
+  public stringify = input<(item: ITreeNode<T>) => string>((item) => String(item.name));
+  public shortPickedLength = input(true);
+
+  public override readonly buildShowedValue = input(
+    (values: ITreeNode[]): string => values?.map((v) => v.name).join(',\n') ?? '-'
+  );
+  public override placeholder = input('Выберите значения');
+
+  private readonly _treeService = inject(ParamTreeService);
+
+  protected readonly checkedNodes = signal<ITreeNode<T>[]>([]);
+
+  constructor(injector: Injector) {
+    super(injector);
+    effect(() => {
+      this._treeService.setLoaderNode(this.loaderNode(), this.defaultNodeOpenedState());
+    });
+  }
+
+  protected override afterViewInit(): void {
+    this._subscribeForUpdateCheckedNodes();
+  }
+
+  private _subscribeForUpdateCheckedNodes(): void {
+    this.control.valueChanges
+      .pipe(distinctUntilChangedJSONs(), takeUntilDestroyed(this.dr))
+      .subscribe((value) => {
+        this.checkedNodes.set(value ?? []);
+      });
+  }
+
+  protected setSelectedNodes(node: ITreeNode<T>[]): void {
+    this.control.setValue(node);
+  }
+}

package/src/lib/components/inputs/param-tree-select/param-tree-select.component.html

@@ -0,0 +1,54 @@
+<ng-container [ngTemplateOutlet]="readmode ? readTemplate : editTemplate">
+  <ng-template #readTemplate>
+    <div class="container container--read" [attr.sproc-param-style]="paramStyle">
+      @if (label) {
+        @switch (paramStyle) {
+          @case ('filter') {
+            <div class="label-wrapper">
+              <span class="label">{{ label }}</span>
+              <div class="dashed-row"></div>
+            </div>
+          }
+          @default {
+            <span class="label">{{ label }}</span>
+            <div class="dashed-row"></div>
+          }
+        }
+      }
+      <div class="value">
+        <span>{{ showedValue }}</span>
+      </div>
+    </div>
+  </ng-template>
+  <ng-template #editTemplate>
+    <div class="container container--edit" [attr.sproc-param-style]="paramStyle">
+      @if (label) {
+        <div class="label-wrapper" [class.applied]="applied()">
+          <span class="label" [class.required]="required">
+            {{ label }}
+          </span>
+        </div>
+      }
+      <tui-textfield
+        tuiChevron
+        tuiTextfieldSize="m"
+        tuiAppearance="sproc-input-appearance"
+        [stringify]="stringify()"
+        [tuiTextfieldLabelOutside]="forceClear"
+        [tuiTextfieldCleaner]="true"
+        [tuiDropdownMaxHeight]="maxDropdownHeight"
+      >
+        <input tuiSelect [placeholder]="placeholder()" [formControl]="control" />
+        <ng-container *tuiTextfieldDropdown [ngTemplateOutlet]="paramTreeTemplate"></ng-container>
+      </tui-textfield>
+    </div>
+  </ng-template>
+</ng-container>
+
+<ng-template #paramTreeTemplate>
+  <sproc-param-tree
+    [multi]="false"
+    [checkedNodes]="checkedNodes()"
+    (selectedNodesChange)="setSelectedNodes($event)"
+  ></sproc-param-tree>
+</ng-template>

package/src/lib/components/inputs/param-tree-select/param-tree-select.component.less

@@ -0,0 +1,56 @@
+@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'] {
+        padding: 0 2px;
+
+        ::ng-deep {
+          input {
+            .input-text-14px;
+
+            color: var(--text-contrast);
+          }
+
+          .placeholder {
+            .input-text-12px;
+          }
+        }
+      }
+
+      &[sproc-param-style='filter'] {
+        ::ng-deep {
+          input {
+            .input-text-12px;
+
+            color: var(--text-contrast);
+          }
+
+          .placeholder {
+            .input-text-12px;
+          }
+        }
+      }
+
+      ._chevron-rotated {
+        .textfield-icons-container {
+          transition: all 0.4ms;
+
+          .chevron {
+            transform: rotate(-180deg);
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/components/inputs/param-tree-select/param-tree-select.component.ts

@@ -0,0 +1,91 @@
+import { Component, effect, inject, Injector, input, signal } from '@angular/core';
+import { ParamTreeComponent } from '../param-tree/param-tree.component';
+import { ITreeNode } from '../param-tree/types/param-tree.types';
+import { TuiAppearance, TuiDropdown, TuiTextfield } from '@taiga-ui/core';
+import { TUI_TREE_LOADING, TuiChevron, TuiSelect, } from '@taiga-ui/kit';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TREE_LOADING_NODE } from '../param-tree/consts/param-tree.consts';
+import { NgTemplateOutlet } from '@angular/common';
+import { TuiTextfieldControllerModule } from '@taiga-ui/legacy';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ParamTreeService } from '../param-tree/services/param-tree.service';
+import { FastQueryStore } from '../../../store/fast-query-store.service';
+import { ParamSelectBase } from '../../../core/param/param-select-base';
+import { distinctUntilChangedJSONs } from '../../../utils';
+
+export type InputTreeSelectSavedValue<T> = ITreeNode<T> & { [key: string]: any };
+
+/** Компонент выбора единственного значения из иерархического списка */
+@Component({
+  selector: 'sproc-param-tree-select',
+  standalone: true,
+  imports: [
+    ParamTreeComponent,
+    TuiTextfield,
+    TuiSelect,
+    TuiChevron,
+    FormsModule,
+    TuiDropdown,
+    ReactiveFormsModule,
+    NgTemplateOutlet,
+    TuiAppearance,
+    TuiTextfieldControllerModule,
+  ],
+  templateUrl: './param-tree-select.component.html',
+  styleUrl: './param-tree-select.component.less',
+  providers: [
+    ParamTreeService,
+    { provide: TUI_TREE_LOADING, useValue: TREE_LOADING_NODE },
+    FastQueryStore,
+  ],
+})
+export class ParamTreeSelectComponent<T> extends ParamSelectBase<
+  ITreeNode<T>,
+  InputTreeSelectSavedValue<T>
+> {
+  /** Передача загрузочного узла для загрузки начального уровня иерархического списка */
+  public loaderNode = input.required<ITreeNode<T>>();
+  /**
+   * Возможность раскрывать/скрывать узлы иерархического списка.
+   * Логическое значение - это значение узла по умолчанию (раскрыты/скрыты).
+   *
+   * @default Без указания параметра (или значении null) - все узлы раскрыты без возможности изменять состояние.
+   * */
+  public defaultNodeOpenedState = input<boolean>();
+
+  public stringify = input<(item: ITreeNode<T>) => string>((item) => String(item.name));
+
+  public override buildShowedValue = input((value: ITreeNode<T>): string => value?.name ?? '-');
+  public override placeholder = input('Выберите значение');
+
+  private readonly _treeService = inject(ParamTreeService);
+
+  protected readonly checkedNodes = signal<ITreeNode<T>[]>([]);
+
+  constructor(injector: Injector) {
+    super(injector);
+    effect(() => {
+      this._treeService.setLoaderNode(this.loaderNode(), this.defaultNodeOpenedState());
+    });
+  }
+
+  protected override afterViewInit(): void {
+    this._subscribeForUpdateCheckedNodes();
+  }
+
+  private _subscribeForUpdateCheckedNodes(): void {
+    this.control.valueChanges
+      .pipe(distinctUntilChangedJSONs(), takeUntilDestroyed(this.dr))
+      .subscribe((value) => {
+        if (value) {
+          this.checkedNodes.set([value]);
+        } else {
+          this.checkedNodes.set([]);
+        }
+      });
+  }
+
+  protected setSelectedNodes([node]: ITreeNode<T>[]): void {
+    this.control.setValue(node ?? null);
+  }
+}

package/src/lib/components/inputs/sub-components/param-delete-content-icon/param-delete-content-btn.component.html

@@ -0,0 +1,5 @@
+<tui-icon
+  class="cleaner-icon"
+  (click)="iconClicked.emit()"
+  icon="assets/ngx-register-base/icons/delete-content.svg"
+></tui-icon>

package/src/lib/components/inputs/sub-components/param-delete-content-icon/param-delete-content-btn.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, output } from '@angular/core';
+import { TuiIcon } from '@taiga-ui/core';
+
+@Component({
+  selector: 'sproc-param-delete-content-button',
+  standalone: true,
+  imports: [TuiIcon],
+  templateUrl: './param-delete-content-btn.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParamDeleteContentBtnComponent {
+  readonly iconClicked = output<void>();
+}

package/src/lib/components/inputs/sub-components/param-invalid-icon/param-invalid-icon.component.html

@@ -0,0 +1,4 @@
+<tui-icon
+  class="invalid-icon"
+  icon="assets/ngx-register-base/icons/circle-exclamation-fill.svg"
+></tui-icon>

package/src/lib/components/inputs/sub-components/param-invalid-icon/param-invalid-icon.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TuiIcon } from '@taiga-ui/core';
+
+@Component({
+  selector: 'sproc-param-invalid-icon',
+  standalone: true,
+  imports: [TuiIcon],
+  templateUrl: './param-invalid-icon.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParamInvalidIconComponent {}

package/src/lib/components/menu-constructor/sproc-menu-constructor.component.html

@@ -0,0 +1,95 @@
+<div class="menu-constructor">
+  <div class="pane editor">
+    <div class="pane-header">
+      <h2>Редактор меню</h2>
+      <div class="buttons">
+        <button [disabled]="$any(loading$ | async)" class="btn secondary" (click)="addNewItem()">
+          +
+        </button>
+        <button [disabled]="$any(loading$ | async)" class="btn secondary" (click)="reset()">
+          Сбросить
+        </button>
+        <button [disabled]="$any(loading$ | async)" class="btn primary" (click)="save()">
+          Сохранить
+        </button>
+        <button [disabled]="$any(loading$ | async)" class="btn primary" (click)="handleFold(false)">
+          Раскрыть все элементы
+        </button>
+        <button [disabled]="$any(loading$ | async)" class="btn primary" (click)="handleFold(true)">
+          Скрыть все элементы
+        </button>
+      </div>
+    </div>
+
+    <div
+      class="list-wrapper"
+      cdkDropList
+      [cdkDropListData]="visibleFlatTree()"
+      (cdkDropListDropped)="drop($event)"
+      [cdkDropListLockAxis]="'y'"
+    >
+      @for (node of visibleFlatTree(); track node.id + '-' + node.order_num) {
+        <div
+          class="node"
+          [style.marginLeft.px]="node.depth * 24"
+          [class.dragged]="isDragged(node)"
+          cdkDrag
+          (cdkDragStarted)="dragStarted(node)"
+          (cdkDragEnded)="dragEnded()"
+        >
+          <div class="node-bar" cdkDragHandle>
+            @if (hasChildren(node)) {
+              <button
+                class="collapse-btn"
+                (click)="toggleCollapse(node); $event.stopPropagation()"
+                [title]="node.collapsed ? 'Развернуть' : 'Свернуть'"
+              >
+                {{ node.collapsed ? '▶' : '▼' }}
+              </button>
+            }
+
+            @if (node.title === ROOT_TITLE) {
+              <span class="root-title">Корневой элемент</span>
+            } @else {
+              <div class="left-control">
+                <span class="grip">⋮⋮</span>
+                <input class="inp title" [(ngModel)]="node.title" placeholder="Название" />
+                <input
+                  class="inp code"
+                  [required]="true"
+                  [(ngModel)]="node.code"
+                  placeholder="code"
+                />
+                <input class="inp route" [(ngModel)]="node.route" placeholder="route" />
+                <input class="inp icon" [(ngModel)]="node.icon" placeholder="icon" />
+                <input class="inp roles" [(ngModel)]="node.allowed_roles" placeholder="Роли" />
+              </div>
+
+              <div class="depth-controls">
+                <button class="btn small" (click)="outdent(node)">←</button>
+                <button class="btn small" (click)="indent(node)">→</button>
+                @if (hasChildren(node)) {
+                  <button class="btn small" (click)="outdentBranch(node)">⇐</button>
+                  <button class="btn small" (click)="indentBranch(node)">⇒</button>
+                }
+                <button class="btn small" (click)="deleteItem(node)">Удалить</button>
+              </div>
+            }
+          </div>
+
+          <ng-template cdkDragPreview>
+            <div class="drag-branch-preview">
+              <div
+                class="preview-bar"
+                *ngFor="let n of draggedBranch()"
+                [style.marginLeft.px]="(n.depth - node.depth) * 20"
+              >
+                {{ n.title }}
+              </div>
+            </div>
+          </ng-template>
+        </div>
+      }
+    </div>
+  </div>
+</div>