ngx-register-base 1.2.3 → 1.3.1

package/src/lib/components/page-menu/sproc-page-menu.component.ts

@@ -0,0 +1,337 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  HostBinding,
+  inject,
+  input,
+  OnInit,
+  signal,
+} from '@angular/core';
+import {
+  EPageMenuIconsSrc,
+  SIDE_MENU_CLOSED_WIDTH,
+  SIDE_MENU_OPENED_WIDTH,
+} from './schema/sproc-page-menu.consts';
+import { Router, RouterLink } from '@angular/router';
+import { AbstractMenuStateService, IClsMenuItem } from './schema/sproc-page-menu.types';
+import { PAGE_MENU_STATE } from './schema/sproc-page-menu.tokens';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { INavigation } from './schema/sproc-page-menu.schema';
+import { AsyncPipe, NgClass, NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
+import { animate, style, transition, trigger } from '@angular/animations';
+
+@Component({
+  selector: 'sproc-page-menu',
+  templateUrl: './sproc-page-menu.component.html',
+  styleUrls: ['./sproc-page-menu.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [RouterLink, NgTemplateOutlet, NgClass, AsyncPipe, NgOptimizedImage],
+  animations: [
+    trigger('fadeInOut', [
+      transition(':enter', [
+        style({
+          opacity: 0,
+          transform: 'translateY(-10px)',
+          transformOrigin: 'top',
+        }),
+        animate(
+          '0.15s ease-in',
+          style({
+            opacity: 1,
+            transform: 'translateY(0)',
+          })
+        ),
+      ]),
+    ]),
+  ],
+})
+export class SprocPageMenuComponent implements OnInit {
+  public menuItems = input.required<IClsMenuItem[]>();
+  public menuIconsSrc = input<string>('');
+  public openLogoSrc = input<string>('');
+  public closedLogoSrc = input<string>('');
+  public findActiveSection =
+    input.required<(reset: () => void, findRoute: (routeToFind: string) => void) => void>();
+
+  // TODO Добавить кастомную ширину меню
+  @HostBinding('style.--page-menu-opened-width')
+  public readonly menuOpenedWidth = `${SIDE_MENU_OPENED_WIDTH}px`;
+  @HostBinding('style.--page-menu-closed-width')
+  public readonly menuClosedWidth = `${SIDE_MENU_CLOSED_WIDTH}px`;
+
+  private readonly _router = inject(Router);
+  private readonly _state = inject<AbstractMenuStateService>(PAGE_MENU_STATE);
+  private readonly _dr = inject(DestroyRef);
+
+  protected readonly toggleDisabled$ = this._state.toggleDisabled$;
+  protected menuState = toSignal(this._state.isOpen$);
+  protected selectedSection = signal<string>('register');
+  protected expandedIds = signal<Set<string>>(new Set());
+
+  protected selectedItem = computed(() =>
+    this.selectedSection() ? this.codeToItem[this.selectedSection()] : null
+  );
+
+  // Хранит parent элементы выбранного пункта меню
+  protected parentItems = computed(() => {
+    const item = this.selectedItem();
+    if (!item) {
+      return [];
+    }
+
+    const parents: INavigation[] = [];
+    let current = item.parent;
+    while (current) {
+      parents.push(current);
+      current = current.parent;
+    }
+    return parents;
+  });
+  protected parentItemCodes = computed<Set<string>>(() => {
+    const parentItems = this.parentItems();
+
+    return new Set(parentItems.map((val) => val.code ?? ''));
+  });
+
+  public navigationHierarchy = signal<INavigation[]>([]);
+
+  protected codeToItem: Record<string, INavigation> = {};
+
+  protected isOpenServiceVersionInfo = false;
+
+  protected readonly ICONS_SRC = EPageMenuIconsSrc;
+
+  constructor() {
+    // Построить меню и найти активную секцию
+    effect(
+      () => {
+        const menuItems = this.menuItems();
+        this.buildMenu(menuItems);
+        this._findActiveSection();
+      },
+      { allowSignalWrites: true }
+    );
+  }
+
+  public addMenuScrollbar(id: string): void {
+    setTimeout(() => {
+      // TODO Меню второго уровня есть скролл,третьего нет
+      const collapsedMenu = document.querySelector<HTMLElement>(`[id="${id}"]`);
+      const sideMenu = collapsedMenu?.querySelector<HTMLElement>('#side-menu__subitems');
+      const sideMenuLevelTwo = sideMenu?.querySelector<HTMLElement>('#side-menu__subitems');
+
+      const subitem = sideMenuLevelTwo
+        ? sideMenuLevelTwo.querySelectorAll('.side-menu__subitem')
+        : sideMenu?.querySelectorAll('.side-menu__subitem');
+      if (subitem) {
+        const lastSubitem = subitem[subitem.length - 1];
+        const rect = lastSubitem?.getBoundingClientRect();
+
+        if (sideMenu && window.innerHeight - rect.bottom < 0) {
+          // 40 тк высота плашки меню
+          sideMenu.style.height = `${
+            subitem.length * 40 + (window.innerHeight - rect.bottom - 1)
+          }px`;
+          sideMenu.style.overflowY = 'scroll';
+          sideMenu.style.overflowX = 'hidden';
+        }
+        if (window.innerHeight - rect.bottom < 0 && sideMenuLevelTwo) {
+          // 40 тк высота плашки меню
+          sideMenuLevelTwo.style.height = `${
+            subitem.length * 40 + (window.innerHeight - rect.bottom - 1)
+          }px`;
+          sideMenuLevelTwo.style.overflowY = 'scroll';
+          sideMenuLevelTwo.style.overflowX = 'hidden';
+        }
+      }
+    }, 0);
+  }
+
+  public ngOnInit(): void {
+    this._state.isOpen$.subscribe((menuState) => {
+      if (menuState) {
+        this.findRoute(this.selectedSection());
+      } else {
+        this.collapseMenu();
+      }
+    });
+  }
+
+  protected toggleNavigation(): void {
+    this._state.toggle();
+  }
+
+  protected toggleItem(item: INavigation): void {
+    this.addMenuScrollbar(item.id || '');
+
+    this.expandedIds.update((currentExpand) => {
+      const code = item.code;
+      const copy = new Set<string>(currentExpand);
+
+      if (copy.has(code)) {
+        copy.delete(code);
+      } else {
+        copy.clear();
+        copy.add(code);
+
+        const parents = this.getParents(item);
+        for (const parent of parents) {
+          copy.add(parent.code);
+        }
+      }
+
+      return copy;
+    });
+  }
+
+  protected collapseMenu(exception?: INavigation): void {
+    let codes: string[] = [];
+    if (exception) {
+      const parents = this.getParents(exception);
+      codes = [exception.code, ...parents.map((parent) => parent.code)];
+    }
+
+    this.expandedIds.set(new Set<string>(codes));
+  }
+
+  protected get isMenuOpened(): boolean {
+    return this._state.isOpen;
+  }
+
+  protected get isMenuClosed(): boolean {
+    return !this._state.isOpen;
+  }
+
+  protected isExternalLink(route: string | undefined): boolean {
+    if (!route) {
+      return false;
+    }
+    return /^(https?:\/\/|www\.)/i.test(route);
+  }
+
+  protected handleNavigation(item: INavigation): void {
+    if (!item.route) {
+      return;
+    }
+
+    if (this.isExternalLink(item.route)) {
+      window.open(item.route, '_blank');
+    } else {
+      this._router.navigate([item.route]);
+      this.selectedSection.set(item.code ?? '');
+
+      if (this.isMenuClosed) {
+        this.collapseMenu();
+      }
+    }
+  }
+
+  protected serviceInfoOnActiveZone(active: boolean): void {
+    this.isOpenServiceVersionInfo = active && this.isOpenServiceVersionInfo;
+  }
+
+  protected serviceInfoOnObscured(obscured: boolean): void {
+    if (obscured) {
+      this.isOpenServiceVersionInfo = false;
+    }
+  }
+
+  private buildMenu(menu: IClsMenuItem[]): void {
+    const sortedMenuItems = [...menu].sort((a, b) => (a.order_num ?? 0) - (b.order_num ?? 0));
+
+    const menuHash: Record<string, INavigation> = {};
+    for (const item of sortedMenuItems) {
+      menuHash[item.id] = {
+        title: item.title ?? '',
+        route: item.route ?? '',
+        id: item.id,
+        children: [],
+        code: item.code,
+        icon: item.icon,
+        accessedRoles: undefined,
+        parent: undefined,
+      };
+    }
+
+    const rootMenuItems: INavigation[] = [];
+
+    for (const item of sortedMenuItems) {
+      if (item.id_parent && menuHash[item.id_parent]) {
+        const parent = menuHash[item.id_parent];
+        const child = menuHash[item.id];
+        child.parent = parent;
+        parent.children?.push(child);
+      } else {
+        rootMenuItems.push(menuHash[item.id]);
+      }
+    }
+
+    this.navigationHierarchy.set(rootMenuItems);
+
+    this.codeToItem = {};
+    for (const id of Object.keys(menuHash)) {
+      const item = menuHash[id];
+      if (item.code) {
+        this.codeToItem[item.code] = item;
+      }
+    }
+  }
+
+  private findRoute(routeToFind: string): void {
+    const routeItem = this.codeToItem[routeToFind];
+
+    if (!routeItem) {
+      return;
+    }
+
+    if (this.isMenuOpened) {
+      this.toggleItem(routeItem);
+    }
+
+    this.selectedSection.set(routeItem.code ?? '');
+  }
+
+  private _findActiveSection(): void {
+    this.findActiveSection()(this.resetSelection, this.findRoute);
+  }
+
+  private getParents(item: INavigation): INavigation[] {
+    const parents: INavigation[] = [];
+    let current = item.parent;
+
+    while (current) {
+      parents.push(current);
+      current = current.parent;
+    }
+
+    return parents;
+  }
+
+  private resetSelection(): void {
+    this.expandedIds.set(new Set<string>());
+    this.selectedSection.set('');
+  }
+
+  private collectChildren(item: INavigation): INavigation[] {
+    const result: INavigation[] = [];
+    const queue: INavigation[] = item.children?.slice() ?? [];
+
+    let index = 0;
+    while (index < queue.length) {
+      const node = queue[index];
+      result.push(node);
+
+      if (node.children) {
+        queue.push(...node.children);
+      }
+
+      index += 1;
+    }
+
+    return result;
+  }
+}

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

@@ -0,0 +1,97 @@
+<tui-loader class="loader" [showLoader]="isLoading()" [overlay]="true">
+  <div class="container">
+    <div class="content">
+      @if (!paginatorOptions().noRowsSelector && !paginatorOptions().noRowsSelectorLabel) {
+        <span class="rows rows__count">
+          <ng-container *polymorphOutlet="textOnPage() as title">
+            {{ title }}
+          </ng-container>
+        </span>
+      }
+      @if (!paginatorOptions().noRowsSelector) {
+        <div class="rows-selector">
+          <tui-combo-box
+            numberOnly
+            [ngModel]="currentRows"
+            [ngModelOptions]="{ standalone: true }"
+            [strict]="false"
+            [tuiTextfieldLabelOutside]="true"
+            [tuiTextfieldCleaner]="false"
+            tuiTextfieldSize="s"
+            [disabled]="disabled()"
+            [tuiHint]="rowsCountErrorMessage()"
+            [tuiHintManual]="isIncorrectRowsCount()"
+            (ngModelChange)="currentRowsInputChange.next($event)"
+          >
+            <tui-data-list-wrapper
+              *tuiDataList
+              [items]="rowsCountOptions().length ? rowsCountOptions() : [currentRows]"
+            />
+          </tui-combo-box>
+        </div>
+      }
+
+      <div class="selected-panel">
+        <div class="selected-container">
+          <span>Выбрано</span>
+          <span class="selected-counter">{{ selectedCounter() }}</span>
+        </div>
+        <sproc-divider layout="vertical"></sproc-divider>
+        @if (!paginatorOptions().noFilterInfo) {
+          <div class="selected-container">
+            <span>Отфильтровано</span>
+            <span class="selected-counter">{{ totalRecords() }}</span>
+            <span>из</span>
+            <span class="selected-counter">{{ totalNotFiltered() }}</span>
+          </div>
+        }
+      </div>
+    </div>
+
+    <div class="content">
+      @if (!paginatorOptions().noInfo) {
+        <span class="rows rows__show" [hidden]="disabled()">
+          Показано строк: {{ (currentPage - 1) * currentRows + 1 }}-{{
+            currentPage * currentRows > totalRecords() ? totalRecords() : currentPage * currentRows
+          }}
+          <ng-container> из {{ totalRecords() }} </ng-container>
+        </span>
+      }
+
+      <div class="paginator">
+        <button
+          tuiIconButton
+          class="paginator__control"
+          appearance="flat"
+          type="button"
+          size="xs"
+          tabIndex="-1"
+          [disabled]="disabled() || currentPage === 1"
+          (click)="toFirstPage()"
+        >
+          <img [src]="SvgSrc.CHEVRONS_DOUBLE_LEFT" />
+        </button>
+        <tui-pagination
+          [index]="currentPage - 1"
+          [length]="pagesCount()"
+          [activePadding]="pageLinkSize()"
+          (indexChange)="changePage($event + 1)"
+        />
+        @if (paginatorOptions().noToLastPageBtn ?? true) {
+          <button
+            tuiIconButton
+            class="paginator__control"
+            appearance="flat"
+            type="button"
+            size="xs"
+            tabIndex="-1"
+            [disabled]="disabled() || currentPage === pagesCount() || currentPage === 0"
+            (click)="toLastPage()"
+          >
+            <img [src]="SvgSrc.CHEVRONS_DOUBLE_RIGHT" />
+          </button>
+        }
+      </div>
+    </div>
+  </div>
+</tui-loader>

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

@@ -0,0 +1,101 @@
+@import 'fonts';
+
+:host {
+  height: 40px;
+  display: flex;
+
+  .container {
+    height: 100%;
+    width: 100%;
+    padding: 8px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    overflow: hidden;
+    background: var(--main-white);
+    box-shadow: 0 -2px 4px 0 rgba(191, 198, 215, 50%);
+    z-index: 1;
+
+    .content {
+      display: flex;
+      align-items: center;
+    }
+
+    span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .rows {
+      .input-label;
+
+      color: var(--text-main);
+
+      &__count {
+        margin-right: 12px;
+      }
+
+      &__show {
+        margin-right: 32px;
+      }
+    }
+
+    .selected-panel {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+
+      sproc-divider {
+        height: 24px;
+      }
+
+      .selected-container {
+        width: 100%;
+        display: flex;
+        gap: 12px;
+
+        .input-label;
+
+        color: var(--text-main);
+
+        .selected-counter {
+          padding: 0 8px;
+          border-bottom: 1px solid var(--table-stroke);
+        }
+      }
+    }
+
+    .rows-selector {
+      margin-right: 12px;
+      width: 80px;
+      min-width: 80px;
+    }
+
+    .paginator {
+      display: flex;
+      gap: 8px;
+
+      &__control {
+        --tui-text-action: var(--gray-icon);
+
+        tui-icon {
+          font-size: var(--icon-font-size-m);
+        }
+      }
+    }
+
+    ::ng-deep [tuiAppearance][data-appearance='textfield'] {
+      box-shadow: none;
+      padding-right: 10px !important;
+
+      ::ng-deep tui-icon {
+        --t-icon: url('../../../../icons/chevrons-dropdown.svg') !important;
+      }
+    }
+  }
+}
+
+.loader {
+  width: 100%;
+}