ngx-register-base 1.2.3 → 1.3.1

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

@@ -0,0 +1,282 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  input,
+  output,
+  TemplateRef,
+  untracked,
+} from '@angular/core';
+import { TuiCheckbox, TuiTree } from '@taiga-ui/kit';
+import { TuiLabel, TuiLoader } from '@taiga-ui/core';
+import { FormsModule } from '@angular/forms';
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { EMPTY, expand, filter, from, of, switchMap, take, takeUntil, tap } from 'rxjs';
+import { ChildrenHandlerType, ITreeNode } from './types/param-tree.types';
+import { ParamTreeService } from './services/param-tree.service';
+import {
+  TREE_LOADING_NODE,
+  treeNodesFlatten,
+  updatesCheckedNodesEqual,
+} from './consts/param-tree.consts';
+
+/** Компонент иерархического списка */
+@Component({
+  selector: 'sproc-param-tree',
+  standalone: true,
+  imports: [TuiTree, TuiLabel, TuiCheckbox, FormsModule, AsyncPipe, TuiLoader, NgTemplateOutlet],
+  templateUrl: './param-tree.component.html',
+  styleUrl: './param-tree.component.less',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParamTreeComponent<T> {
+  /**
+   * Режим выбора нескольких значений
+   *
+   * @default Выбор единственного узла */
+  public multi = input(false);
+  /** Задать выбранные узлы */
+  public checkedNodes = input<ITreeNode<T>[]>([]);
+  /** Кастомный шаблон узла */
+  public nodeTemplate = input<TemplateRef<any> | null>(null);
+
+  /** Выбранные узлы верхнего уровня */
+  public readonly selectedNodesChange = output<ITreeNode<T>[]>();
+
+  private readonly _treeService = inject(ParamTreeService<T>);
+  private readonly _dr = inject(DestroyRef);
+
+  protected readonly defaultNodeOpenedState = toSignal(this._treeService.defaultNodeOpenedState$);
+  protected readonly openedNodesState = this._treeService.openedNodesState;
+  protected readonly checkedNodesState = this._treeService.checkedNodesState;
+
+  private readonly _lastCheckedNode = toSignal(this._treeService.lastCheckedNode$, {
+    initialValue: null,
+  });
+  private readonly updatesCheckedNodes = computed(() => this.checkedNodes(), {
+    equal: (prev, curr) => updatesCheckedNodesEqual(prev, curr, this._treeService),
+  });
+
+  protected readonly treeNodes$ = this._treeService.nodes$;
+
+  protected readonly TREE_LOADER = TREE_LOADING_NODE;
+  protected readonly childrenHandler: ChildrenHandlerType<T> = (node) =>
+    this._treeService.getChildren(node);
+
+  constructor() {
+    effect(() => {
+      const nodes = this.updatesCheckedNodes();
+
+      untracked(() => {
+        if (nodes.length === 0) {
+          this.checkedNodesState.set(new Map<ITreeNode<T>, boolean | null>());
+        } else {
+          this._tryToSetNodesRecursive(nodes);
+        }
+      });
+    });
+  }
+
+  protected getValue(
+    currentNode: ITreeNode<T>,
+    state: Map<ITreeNode<T>, boolean | null>
+  ): boolean | null {
+    return this.multi()
+      ? this._isSelectedMulti(currentNode, state)
+      : this._isSelectedSingle(currentNode, state);
+  }
+
+  private _isSelectedMulti(
+    currentNode: ITreeNode<T>,
+    state: Map<ITreeNode<T>, boolean | null>
+  ): boolean | null {
+    let result: boolean | null = null;
+    const flattenNodes = treeNodesFlatten<T>(currentNode, this._treeService);
+    const firstNode = flattenNodes[0];
+
+    if (firstNode) {
+      result = !!state.get(firstNode);
+    }
+
+    for (const node of flattenNodes) {
+      if (result !== !!state.get(node)) {
+        const currentLevelNode = flattenNodes.filter((value) => value.parent === node.parent);
+
+        return currentLevelNode.every((value) => !!state.get(value)) ? true : null;
+      }
+    }
+
+    return result;
+  }
+
+  private _isSelectedSingle(
+    currentNode: ITreeNode<T>,
+    state: Map<ITreeNode<T>, boolean | null>
+  ): boolean | null {
+    const lastNode = this._lastCheckedNode();
+    const flattenNodes = treeNodesFlatten<T>(currentNode, this._treeService);
+    const isLinkedNode = flattenNodes.some((node) => !!state.get(node));
+
+    if (!isLinkedNode || !lastNode) {
+      return false;
+    }
+
+    return lastNode === currentNode ||
+      this._isDeepParent(currentNode, lastNode) ||
+      this._isDeepChild(currentNode, lastNode)
+      ? true
+      : null;
+  }
+
+  private _isDeepParent(parent: ITreeNode<T>, child: ITreeNode<T>): boolean {
+    if (!child.parent) {
+      return false;
+    }
+
+    if (parent === child.parent && parent.children!.length === 1) {
+      return true;
+    }
+
+    if (child.parent.children && child.parent.children.length !== 1) {
+      return false;
+    }
+
+    return this._isDeepParent(parent, child.parent);
+  }
+
+  private _isDeepChild(child: ITreeNode<T>, parent: ITreeNode<T>): boolean {
+    if (!parent.children || parent.children.length === 0) {
+      return false;
+    }
+
+    for (const node of parent.children) {
+      if (node === child) {
+        return true;
+      }
+
+      if (this._isDeepChild(child, node)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  protected onToggle(currentNode: ITreeNode<T>): void {
+    this._treeService
+      .loadChildren(currentNode)
+      .pipe(takeUntilDestroyed(this._dr))
+      .subscribe((children) => {
+        const parent = children?.[0]?.parent;
+
+        if (parent && this.checkedNodesState().get(parent)) {
+          for (const child of children) {
+            this.checkedNodesState().set(child, true);
+          }
+        }
+      });
+  }
+
+  protected onChecked = (currentNode: ITreeNode<T>, check: boolean) => {
+    this._treeService.setLastCheckedNode(check ? currentNode : null);
+    const flattenNodes = treeNodesFlatten<T>(currentNode, this._treeService);
+
+    if (this.multi()) {
+      for (const node of flattenNodes) {
+        this.checkedNodesState().set(node, check);
+      }
+    } else {
+      this.checkedNodesState().clear();
+
+      for (const node of flattenNodes) {
+        this.checkedNodesState().set(node, true);
+      }
+    }
+
+    this._updateCheckedNodes();
+  };
+
+  private _updateCheckedNodes(options?: { emitEvent: boolean }): void {
+    const topLevelNodes = this._treeService.getTopLevelNodes();
+    const state = new Map<ITreeNode<T>, boolean | null>();
+    this._calcCheckedStateNodes(topLevelNodes, state);
+    this.checkedNodesState.set(state);
+
+    if (options?.emitEvent !== false) {
+      this.selectedNodesChange.emit(this._findFullySelectedNodes(topLevelNodes));
+    }
+  }
+
+  private _findFullySelectedNodes(nodes: ITreeNode<T>[]): ITreeNode<T>[] {
+    const fullySelectedNodes: ITreeNode<T>[] = [];
+
+    for (const node of nodes) {
+      const checked = this.getValue(node, this.checkedNodesState());
+
+      if (checked) {
+        fullySelectedNodes.push(node);
+      } else if (checked === null) {
+        const children = this._treeService.getChildren(node);
+        const fullySelectedChildren = this._findFullySelectedNodes(children);
+        fullySelectedNodes.push(...fullySelectedChildren);
+      }
+    }
+
+    return fullySelectedNodes;
+  }
+
+  private _calcCheckedStateNodes(
+    nodes: ITreeNode<T>[],
+    state: Map<ITreeNode<T>, boolean | null>
+  ): void {
+    for (const node of nodes) {
+      const checked = this.getValue(node, this.checkedNodesState());
+
+      if (checked !== false) {
+        state.set(node, checked);
+        const children = this._treeService.getChildren(node);
+        this._calcCheckedStateNodes(children, state);
+      }
+    }
+  }
+
+  private _tryToSetNodesRecursive(newNodes: ITreeNode<T>[]): void {
+    const topLevelNodes = this._treeService.getTopLevelNodes();
+    const searchNodesCompleteState = new Map(newNodes.map((newNode) => [newNode, false]));
+    const allComplete = (state: Map<ITreeNode<T>, boolean>) => [...state.values()].every(Boolean);
+    const analogNodes: ITreeNode<T>[] = [];
+
+    from(topLevelNodes)
+      .pipe(
+        expand((node) =>
+          this._treeService.hasChildren(node)
+            ? this._treeService.loadChildren(node).pipe(switchMap((children) => from(children)))
+            : EMPTY
+        ),
+        tap((node) => {
+          const foundNode = newNodes.find((newNode) => this._treeService.equals(node, newNode));
+
+          if (foundNode) {
+            searchNodesCompleteState.set(foundNode, true);
+            analogNodes.push(node);
+          }
+        }),
+        filter(() => allComplete(searchNodesCompleteState)),
+        take(1),
+        // eslint-disable-next-line rxjs/no-unsafe-takeuntil
+        takeUntil(of(null).pipe(filter(() => allComplete(searchNodesCompleteState)))),
+        takeUntilDestroyed(this._dr)
+      )
+      .subscribe({
+        complete: () => {
+          for (const node of analogNodes) {
+            this.onChecked(node, true);
+          }
+        },
+      });
+  }
+}

package/src/lib/components/inputs/param-tree/services/param-tree.service.ts

@@ -0,0 +1,176 @@
+import { DestroyRef, inject, Injectable, signal } from '@angular/core';
+import {
+  BehaviorSubject,
+  catchError,
+  combineLatest,
+  debounceTime,
+  EMPTY,
+  expand,
+  filter,
+  from,
+  iif,
+  map,
+  mergeMap,
+  Observable,
+  of,
+  Subject,
+  switchMap,
+  take,
+  tap,
+} from 'rxjs';
+import { TUI_TREE_LOADING, TUI_TREE_START } from '@taiga-ui/kit';
+import { startWith } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ILoadConfig, ITreeNode, SmaTreeLoader } from '../types/param-tree.types';
+import { TREE_LOADER } from '../tokens/param-tree.tokens';
+import { just } from '../../../../utils';
+import { DEBOUNCE_TIME_FOR_SYNC_NEXT_VALUES } from '../consts/param-tree.consts';
+
+@Injectable()
+export class ParamTreeService<T> {
+  private readonly _loading = inject<ITreeNode<T>>(TUI_TREE_LOADING);
+  private readonly _start$ = inject<ITreeNode<T>>(TUI_TREE_START, { optional: true });
+  private readonly _loader = inject<SmaTreeLoader<ITreeNode<T>>>(TREE_LOADER);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  private readonly _loaderNode$ = new Subject<ITreeNode<T>>();
+  private readonly _defaultNodeOpenedState$ = new BehaviorSubject<boolean | undefined>(undefined);
+  private readonly _lastCheckedNode$ = new BehaviorSubject<ITreeNode<T> | null>(null);
+  private readonly _load$ = new Subject<ILoadConfig<T>>();
+  private readonly _parentChildrenMap = new Map<ITreeNode<T>, ITreeNode<T>[]>([
+    [this._loading, []],
+  ]);
+  private readonly _nodes$ = new BehaviorSubject<ITreeNode<T>[]>([]);
+  private readonly _loadedChildren$ = new Subject<ITreeNode<T>[]>();
+
+  public readonly defaultNodeOpenedState$ = this._defaultNodeOpenedState$.asObservable();
+  public readonly lastCheckedNode$ = this._lastCheckedNode$.asObservable();
+  public readonly loaderNode$ = this._loaderNode$.asObservable();
+
+  public readonly openedNodesState = signal(new Map<ITreeNode<T>, boolean>());
+  public readonly checkedNodesState = signal(new Map<ITreeNode<T>, boolean | null>());
+
+  private _firstLevelNodes: ITreeNode<T>[] = this._start$ ? [this._start$] : [];
+  private _firstLevelNodesLoaded = false;
+
+  public readonly nodes$ = this._nodes$.asObservable();
+
+  constructor() {
+    this._load$
+      .pipe(
+        mergeMap((load) =>
+          this._load(load.node, !load.config?.initial).pipe(
+            map((firstLevelNodes) => ({ load, firstLevelNodes }))
+          )
+        ),
+        tap(({ load: { config }, firstLevelNodes }) => {
+          if (config?.initial) {
+            this._firstLevelNodes = firstLevelNodes ?? [];
+          }
+        }),
+        mergeMap(({ load }) =>
+          iif(() => !!load.config?.opened, this._recursiveLoad(load.node), just())
+        ),
+        map(() => this._firstLevelNodes),
+        startWith([this._loading]),
+        takeUntilDestroyed(this._destroyRef)
+      )
+      .subscribe((nodes) => {
+        this._nodes$.next(nodes);
+      });
+
+    combineLatest([this.loaderNode$, this.defaultNodeOpenedState$])
+      .pipe(debounceTime(DEBOUNCE_TIME_FOR_SYNC_NEXT_VALUES), takeUntilDestroyed(this._destroyRef))
+      .subscribe(([loader, opened]) => {
+        this.loadFirstLevelNodes(loader, opened);
+      });
+  }
+
+  private _recursiveLoad(startedNode: ITreeNode<T>) {
+    return of(startedNode).pipe(
+      expand((node) => {
+        if (this.hasChildren(node)) {
+          return this._load(node).pipe(
+            switchMap((children) => from(children)),
+            catchError(() => EMPTY)
+          );
+        }
+
+        if (node.children) {
+          return from(node.children);
+        }
+
+        return EMPTY;
+      })
+    );
+  }
+
+  public loadFirstLevelNodes(node: ITreeNode<T>, opened: boolean = true): void {
+    if (!this._firstLevelNodesLoaded) {
+      this._load$.next({ node, config: { initial: true, opened } });
+      this._firstLevelNodesLoaded = true;
+    }
+  }
+
+  private _load(node: ITreeNode<T>, setChildren = true): Observable<ITreeNode<T>[]> {
+    return this._loader.loadChildren(node).pipe(
+      tap((children) => {
+        if (setChildren) {
+          for (const child of children) {
+            child.parent = node;
+          }
+          node.children = children;
+          this._parentChildrenMap.set(node, children);
+          this._loadedChildren$.next(children);
+        }
+
+        const childfree = [node, ...children].filter((item) => !this.hasChildren(item));
+        for (const item of childfree) {
+          this._parentChildrenMap.set(item, []);
+        }
+      })
+    );
+  }
+
+  public loadChildren(node: ITreeNode<T>): Observable<ITreeNode<T>[]> {
+    const result = this._loadedChildren$.asObservable().pipe(
+      filter(([firstChild]) => firstChild?.parent === node),
+      take(1)
+    );
+    const children = this.getChildren(node);
+
+    if (children && children[0] !== this._loading) {
+      return of(children);
+    }
+
+    this._parentChildrenMap.set(node, [this._loading]);
+    this._load$.next({ node });
+
+    return result;
+  }
+
+  public getChildren(node: ITreeNode<T>): ITreeNode<T>[] {
+    return this._parentChildrenMap.get(node) || [this._loading];
+  }
+
+  public hasChildren(node: ITreeNode<T>): boolean {
+    return this._loader.hasChildren(node);
+  }
+
+  public getTopLevelNodes(): ITreeNode<T>[] {
+    return this._firstLevelNodes;
+  }
+
+  public setLoaderNode(loaderNode: ITreeNode<T>, defaultNodeOpenedState?: boolean): void {
+    this._loaderNode$.next(loaderNode);
+    this._defaultNodeOpenedState$.next(defaultNodeOpenedState);
+  }
+
+  public setLastCheckedNode(node: ITreeNode<T> | null): void {
+    this._lastCheckedNode$.next(node);
+  }
+
+  public equals(node1: ITreeNode<T>, node2: ITreeNode<T>): boolean {
+    return this._loader.equals(node1, node2);
+  }
+}

package/src/lib/components/inputs/param-tree/services/sync-tree-loader.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { ITreeNode, SmaTreeLoader } from '../types/param-tree.types';
+
+@Injectable()
+export class SyncTreeLoaderService<T> implements SmaTreeLoader<ITreeNode<T>> {
+  public loadChildren({ children }: ITreeNode<T>): Observable<ITreeNode<T>[]> {
+    return of(children ?? []);
+  }
+
+  public hasChildren({ haveChildren }: ITreeNode<T>): boolean {
+    return !!haveChildren;
+  }
+
+  public equals(value1: ITreeNode<T>, value2: ITreeNode<T>): boolean {
+    return value1 === value2;
+  }
+}

package/{lib/components/inputs/param-tree/tokens/param-tree.tokens.d.ts → src/lib/components/inputs/param-tree/tokens/param-tree.tokens.ts}

@@ -1,3 +1,4 @@
 import { InjectionToken } from '@angular/core';
 import { SmaTreeLoader } from '../types/param-tree.types';
-export declare const TREE_LOADER: InjectionToken<SmaTreeLoader<unknown>>;
+
+export const TREE_LOADER = new InjectionToken<SmaTreeLoader<unknown>>('SMA_TREE_LOADER');

package/src/lib/components/inputs/param-tree/types/param-tree.types.ts

@@ -0,0 +1,39 @@
+import { TuiHandler } from '@taiga-ui/cdk';
+import { TuiTreeLoader } from '@taiga-ui/kit';
+
+export interface SmaTreeLoader<T> extends TuiTreeLoader<T> {
+  equals(value1: T, value2: T): boolean;
+}
+
+/** Конфиг для подгрузки дочерних узлов */
+export interface ILoadConfig<T> {
+  /** Узел для которого происходит загрузка */
+  node: ITreeNode<T>;
+  /** Дополнительная конфигурация загрузки */
+  config?: {
+    /** Является ли текущая загрузка начальной (для инициализации верхнего уровня узлов) */
+    initial?: boolean;
+    /**
+     * Режим загрузки дочерних узлов.
+     * Если true - дочерние узлы загружаются рекурсивно до последнего уровня
+     * */
+    opened?: boolean;
+  };
+}
+
+export interface ITreeNode<T = any> {
+  /** Название узла */
+  name: string;
+  parent?: ITreeNode<T>;
+  /** Есть дочерние узлы которые можно загрузить */
+  haveChildren?: boolean;
+  /** Дочерние загруженные узлы */
+  children?: ITreeNode<T>[];
+  /** Дополнительные свойства узла */
+  data?: T;
+}
+
+export type ChildrenHandlerType<NodeType> = TuiHandler<
+  ITreeNode<NodeType>,
+  readonly ITreeNode<NodeType>[]
+>;

package/src/lib/components/inputs/param-tree/utils/param-tree.utils.ts

@@ -0,0 +1,18 @@
+import { ITreeNode } from '../types/param-tree.types';
+
+interface IArgs<T> {
+  item: T;
+  children?: ITreeNode<T>[];
+}
+
+export function transformItemToNode<T extends Record<string, any>>({
+  item,
+  children,
+}: IArgs<T>): ITreeNode<T> {
+  return {
+    name: item['name'],
+    haveChildren: !!children,
+    children: children || [],
+    data: item,
+  };
+}

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

@@ -0,0 +1,78 @@
+<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>
+          }
+        }
+      }
+      <ng-container [ngTemplateOutlet]="value ? showedValueTemplate : emptyTemplate">
+        <ng-template #showedValueTemplate>
+          @switch (paramStyle) {
+            @case ('filter') {
+              <pre class="value">{{ showedValue }}</pre>
+            }
+            @default {
+              <div class="value">
+                <span>{{ showedValue }}</span>
+              </div>
+            }
+          }
+        </ng-template>
+        <ng-template #emptyTemplate>
+          <span class="value">-</span>
+        </ng-template>
+      </ng-container>
+    </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>
+          @if (hint) {
+            <tui-icon
+              icon="assets/ngx-register-base/icons/circle-info-empty.svg"
+              [tuiHint]="hint"
+              class="hintIcon"
+            ></tui-icon>
+          }
+        </div>
+      }
+      <tui-textfield
+        tuiChevron
+        tuiTextfieldSize="m"
+        tuiAppearance="sproc-input-appearance"
+        [stringify]="stringify()"
+        [tuiTextfieldCleaner]="forceClear"
+        [tuiTextfieldLabelOutside]="true"
+        [content]="valueContent"
+      >
+        <input tuiComboBox [placeholder]="placeholder()" [formControl]="control" />
+        <ng-container *tuiTextfieldDropdown [ngTemplateOutlet]="paramTreeTemplate"></ng-container>
+      </tui-textfield>
+      <ng-template #valueContent let-list>
+        {{ shortPickedLength() ? 'Выбрано: ' : null }} {{ list.length }}
+      </ng-template>
+    </div>
+  </ng-template>
+</ng-container>
+
+<ng-template #paramTreeTemplate>
+  <sproc-param-tree
+    [multi]="true"
+    [checkedNodes]="checkedNodes()"
+    (selectedNodesChange)="setSelectedNodes($event)"
+  ></sproc-param-tree>
+</ng-template>