ngx-register-base 1.3.0 → 1.3.1

package/ng-package.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-register-base",
+  "assets": [
+    "icons",
+    "styles",
+    "assets"
+  ],
+  "inlineStyleLanguage": "less",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": ["./styles"],
+    "cssUrl": "inline"
+  }
+}

package/package.json

@@ -1,22 +1,17 @@
 {
   "name": "ngx-register-base",
-  "version": "1.3.0",
+  "version": "1.3.1",
+  "scripts": {
+    "build": "tsc -p tsconfig.schematics.json",
+    "postbuild": "copyfiles schematics/*/schema.json schematics/*/files/** schematics/collection.json schematics/migration-collection.json ../../dist/ngx-register-base/"
+  },
   "schematics": "./schematics/collection.json",
   "ng-update": {
     "migrations": "./schematics/migration-collection.json"
   },
   "exports": {
     "./icons/*": "./icons/*",
-    "./styles/*": "./styles/*",
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/ngx-register-base.mjs",
-      "esm": "./esm2022/ngx-register-base.mjs",
-      "default": "./fesm2022/ngx-register-base.mjs"
-    }
+    "./styles/*": "./styles/*"
   },
   "peerDependencies": {
     "@angular/cdk": "^18.2.0",
@@ -45,7 +40,9 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/ngx-register-base.mjs",
-  "typings": "index.d.ts"
-}
+  "devDependencies": {
+    "copyfiles": "file:../../node_modules/copyfiles",
+    "typescript": "file:../../node_modules/typescript"
+  },
+  "sideEffects": false
+}

package/schematics/ng-update/replace-menu-state-token/index.ts

@@ -0,0 +1,33 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { hasFileExtension, shouldSkipFile } from '../../utils/utils';
+
+export function replaceMenuStateToken(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    const tokenRegex = /\bMENU_STATE_SERVICE\b/g;
+    const newToken = 'PAGE_MENU_STATE';
+
+    tree.visit((filePath) => {
+      if (shouldSkipFile(filePath) || !hasFileExtension(filePath, ['.ts'])) {
+        return;
+      }
+
+      const buffer = tree.read(filePath);
+      if (!buffer) {
+        return;
+      }
+
+      const content = buffer.toString('utf-8');
+
+      if (tokenRegex.test(content)) {
+        const updatedContent = content.replace(tokenRegex, newToken);
+
+        if (content !== updatedContent) {
+          tree.overwrite(filePath, updatedContent);
+          context.logger.info(`Updated token in: ${filePath}`);
+        }
+      }
+    });
+
+    return tree;
+  };
+}

package/schematics/ng-update/update-prefix/index.ts

@@ -0,0 +1,38 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { hasFileExtension, shouldSkipFile } from '../../utils/utils';
+
+export function updatePrefix(): Rule {
+  return (tree: Tree, _context: SchematicContext) => {
+    tree.visit((filePath) => {
+      if (shouldSkipFile(filePath)) {
+        return;
+      }
+
+      const contentBuffer = tree.read(filePath);
+      if (!contentBuffer) {
+        return;
+      }
+
+      const content = contentBuffer.toString('utf-8');
+
+      if (hasFileExtension(filePath, ['.html', '.ts'])) {
+        const newContent = content.replace(/<sma-/g, '<sproc-').replace(/<\/sma-/g, '</sproc-');
+
+        if (content !== newContent) {
+          tree.overwrite(filePath, newContent);
+        }
+        return;
+      }
+
+      if (hasFileExtension(filePath, ['.css', '.less', '.scss'])) {
+        const newContent = content.replace(/\bsma-/g, 'sproc-');
+
+        if (content !== newContent) {
+          tree.overwrite(filePath, newContent);
+        }
+      }
+    });
+
+    return tree;
+  };
+}

package/schematics/utils/{utils.d.ts → utils.ts}

@@ -1,10 +1,15 @@
+const IGNORED_DIRECTORIES = ['/node_modules/', '/dist/', '/.angular/', '/.git/'];
+
 /**
  * Проверяет, следует ли пропустить файл при обработке.
  *
  * @param filePath Путь к файлу для проверки.
  * @returns Возвращает `true`, если файл нужно пропустить, иначе `false`.
  */
-export declare function shouldSkipFile(filePath: string): boolean;
+export function shouldSkipFile(filePath: string): boolean {
+  return IGNORED_DIRECTORIES.some((dir) => filePath.includes(dir));
+}
+
 /**
  * Проверяет, соответствует ли файл хотя бы одному из переданных расширений.
  *
@@ -12,4 +17,6 @@ export declare function shouldSkipFile(filePath: string): boolean;
  * @param extensions Массив расширений, например ['.html', '.ts']
  * @returns Возвращает `true`, если файл соответствует одному из переданных ресширений, иначе `false`.
  */
-export declare function hasFileExtension(filePath: string, extensions: string[]): boolean;
+export function hasFileExtension(filePath: string, extensions: string[]): boolean {
+  return extensions.some((ext) => filePath.endsWith(ext));
+}

package/src/lib/components/checkbox-selector/checkbox-selector.component.html

@@ -0,0 +1,91 @@
+<div class="checkbox__container" (click)="toggle(); $event.stopImmediatePropagation()">
+  @let indeterminate = calcIndeterminate();
+  @let checked = calcChecked();
+
+  <input
+    tuiCheckbox
+    size="s"
+    type="checkbox"
+    [indeterminate]="indeterminate"
+    [tuiDropdown]="dropdown"
+    [tuiDropdownManual]="isOpen()"
+    [checked]="checked"
+  />
+</div>
+
+<ng-template #dropdown>
+  <section class="dropdown__content" id="checkbox__dropdown__content">
+    @let selected = selectedElement();
+
+    <span
+      class="dropdown__element"
+      [class.dropdown__element_selected]="selected === ESelectionTypes.ALL"
+      (click)="selectElement(ESelectionTypes.ALL)"
+    >
+      Выбрать все
+    </span>
+    <span
+      class="dropdown__element"
+      [class.dropdown__element_selected]="selected === ESelectionTypes.VISIBLE"
+      (click)="selectElement(ESelectionTypes.VISIBLE)"
+    >
+      Выбрать видимое
+    </span>
+    <span
+      class="dropdown__element"
+      [class.dropdown__element_selected]="selected === ESelectionTypes.INVERSE"
+      (click)="selectElement(ESelectionTypes.INVERSE)"
+    >
+      Кроме выделенного
+    </span>
+    <div
+      class="dropdown__select-value"
+      [class.dropdown__element_selected]="selected === ESelectionTypes.COUNT"
+    >
+      <span>Выбрать</span>
+      <tui-textfield
+        tuiTextfieldSize="s"
+        tuiTextfieldAppearance="textfield"
+        [tuiTextfieldCleaner]="true"
+        class="flex-1"
+      >
+        <input
+          tuiInputNumber
+          placeholder="Введите число"
+          [max]="inputMaxValue()"
+          [ngModel]="inputValue()"
+          (ngModelChange)="inputValueChanges($event)"
+          (focusin)="onInputFocus()"
+        />
+
+        @if (inputDescription()) {
+          <tui-icon
+            icon="assets/ngx-register-base/icons/circle-question-empty.svg"
+            [tuiTooltip]="inputDescription()"
+          />
+        }
+      </tui-textfield>
+    </div>
+    <div class="dropdown__footer">
+      <button
+        tuiButton
+        class="dropdown__button dropdown__button__apply"
+        size="m"
+        appearance="outline"
+        [loading]="loading()"
+        (click)="applySelection()"
+      >
+        Применить
+      </button>
+      <button
+        tuiButton
+        class="dropdown__button dropdown__button__cancel"
+        size="m"
+        appearance="outline-grayscale"
+        (click)="dropSelection()"
+      >
+        Отмена
+      </button>
+    </div>
+  </section>
+</ng-template>

package/src/lib/components/checkbox-selector/checkbox-selector.component.less

@@ -0,0 +1,67 @@
+@import 'fonts';
+
+.dropdown {
+  &__content {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 0;
+    width: 260px;
+  }
+
+  &__element,
+  &__select-value,
+  &__button {
+    padding: 8px 16px;
+  }
+
+  &__button {
+    padding: 2px 0;
+    flex: 1;
+    width: 109px;
+  }
+
+  &__element {
+    cursor: pointer;
+    overflow: hidden;
+    .input-text-14px;
+
+    &:hover {
+      background: #f7f9fa;
+      color: var(--text-main);
+    }
+
+    &_selected {
+      background: #d0edff;
+    }
+  }
+
+  &__select-value {
+    display: flex;
+    align-items: center;
+    padding: 4px 16px;
+    gap: 8px;
+
+    span {
+      cursor: default;
+
+      .input-text-14px;
+    }
+
+    tui-textfield input {
+      font: var(--input-text-14px) !important;
+    }
+  }
+
+  &__footer {
+    padding: 0 16px;
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-top: 4px;
+  }
+}
+
+.flex-1 {
+  display: flex;
+  flex: 1;
+}

package/src/lib/components/checkbox-selector/checkbox-selector.component.ts

@@ -0,0 +1,176 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  input,
+  output,
+  signal,
+  untracked,
+} from '@angular/core';
+import { SelectionTypes, ApplySelectionTypes } from './checkbox-selector.types';
+import { TuiButtonLoading, TuiCheckbox, TuiInputNumber, TuiTooltip } from '@taiga-ui/kit';
+import { TuiButton, TuiDropdown, TuiIcon, TuiTextfield } from '@taiga-ui/core';
+import { FormsModule } from '@angular/forms';
+import { TuiTextfieldControllerModule } from '@taiga-ui/legacy';
+import { ScalarUUID } from 'hasura';
+import { ERegisterObjectState } from '../../types';
+import { SelectedObjectsStateService } from '../../services';
+
+@Component({
+  selector: 'sproc-checkbox-selector',
+  templateUrl: './checkbox-selector.component.html',
+  styleUrls: ['./checkbox-selector.component.less'],
+  standalone: true,
+  imports: [
+    TuiCheckbox,
+    TuiDropdown,
+    TuiTextfield,
+    FormsModule,
+    TuiTextfieldControllerModule,
+    TuiButton,
+    TuiButtonLoading,
+    TuiInputNumber,
+    TuiTooltip,
+    TuiIcon,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CheckboxSelectorComponent {
+  public totalRecords = input<number>();
+  /** @deprecated используйте stateObjects */
+  public selected = input(new Set<ScalarUUID>());
+  public disabled = input(false);
+  public loading = input<boolean | null>(false);
+  public inputMaxValue = input<number | null>(null);
+
+  public onApply = output<ApplySelectionTypes>();
+
+  private readonly _selectedService = inject(SelectedObjectsStateService, { optional: true });
+
+  protected readonly ESelectionTypes = SelectionTypes;
+
+  protected isOpen = signal(false);
+  protected selectedElement = signal<SelectionTypes | null>(null);
+  protected inputValue = signal<number | null>(null);
+
+  protected readonly inputDescription = computed(() => {
+    const max = this.inputMaxValue();
+
+    if (max === null) {
+      return '';
+    }
+
+    return `Максимум для ввода - ${max}`;
+  });
+
+  protected stateObjects = this._selectedService?.state;
+  protected stateUnfetchedObjects = this._selectedService?.stateUnfetchedObjects;
+
+  constructor() {
+    effect(() => {
+      const loading = this.loading();
+      const isOpen = this.loading();
+
+      if (loading === false && isOpen) {
+        untracked(() => {
+          this.close();
+        });
+      }
+    });
+  }
+
+  protected selectElement(newElement: SelectionTypes): void {
+    this.selectedElement.update((currentElement) =>
+      currentElement === newElement ? null : newElement
+    );
+  }
+
+  protected onInputFocus(): void {
+    this.selectedElement.set(SelectionTypes.COUNT);
+  }
+
+  protected applySelection(): void {
+    let result: SelectionTypes | number | null = this.selectedElement();
+
+    if (!result) {
+      return;
+    }
+
+    if (result === SelectionTypes.COUNT) {
+      result = this.inputValue();
+    }
+
+    this.onApply.emit(result);
+    this.close();
+  }
+
+  protected toggle(): void {
+    if (!this.disabled()) {
+      this.isOpen.update((isOpen) => !isOpen);
+    }
+  }
+
+  protected calcIndeterminate(): boolean {
+    const state = this.stateObjects?.();
+
+    if (state) {
+      const fetchedObjects = [...state.values()];
+      const selectedObjects = fetchedObjects.filter(
+        (obj) => obj.state === ERegisterObjectState.SELECTED
+      );
+
+      const someFetchedIsNotSelected = fetchedObjects.length !== selectedObjects.length;
+      const fetchedIsAll = fetchedObjects.length === this.totalRecords();
+      const unfetchedAreSelected = this.stateUnfetchedObjects!() === ERegisterObjectState.SELECTED;
+
+      if (selectedObjects.length > 0) {
+        return someFetchedIsNotSelected || !(fetchedIsAll || unfetchedAreSelected);
+      }
+
+      return !fetchedIsAll && unfetchedAreSelected;
+    }
+
+    return this.selected().size > 0 && this.selected().size !== this.totalRecords();
+  }
+
+  protected calcChecked(): boolean {
+    const state = this.stateObjects?.();
+
+    if (state) {
+      const fetchedObjects = [...state.values()];
+      const selectedObjects = fetchedObjects.filter(
+        (obj) => obj.state === ERegisterObjectState.SELECTED
+      );
+
+      const fetchedAreSelected = fetchedObjects.length === selectedObjects.length;
+      const selectedIsAll = selectedObjects.length === this.totalRecords();
+      const unfetchedAreSelected = this.stateUnfetchedObjects!() === ERegisterObjectState.SELECTED;
+
+      return (
+        selectedObjects.length > 0 && fetchedAreSelected && (selectedIsAll || unfetchedAreSelected)
+      );
+    }
+
+    return this.selected().size > 0 && this.selected().size === this.totalRecords();
+  }
+
+  protected close(): void {
+    if (!this.disabled()) {
+      this.isOpen.set(false);
+    }
+  }
+
+  protected inputValueChanges(value: number): void {
+    this.selectedElement.set(SelectionTypes.COUNT);
+    this.inputValue.set(value);
+  }
+
+  protected dropSelection(): void {
+    this.inputValue.set(null);
+    this.selectedElement.set(null);
+    this.onApply.emit(null);
+    this.close();
+  }
+}

package/src/lib/components/checkbox-selector/checkbox-selector.types.ts

@@ -0,0 +1,8 @@
+export type ApplySelectionTypes = Omit<SelectionTypes, SelectionTypes.COUNT> | number | null;
+
+export enum SelectionTypes {
+  ALL = 'ALL',
+  VISIBLE = 'VISIBLE',
+  INVERSE = 'INVERSE',
+  COUNT = 'COUNT',
+}

package/src/lib/components/column-settings/column-settings.component.html

@@ -0,0 +1,160 @@
+<button
+  tuiButton
+  class="column-settings__main-button"
+  appearance="outline-grayscale"
+  size="m"
+  [disabled]="disabled()"
+  (click)="toggle()"
+>
+  <tui-icon class="column-settings__icon gray" [icon]="iconSettings"></tui-icon>
+</button>
+
+<tui-drawer
+  *tuiPopup="openSettings()"
+  class="column-settings__popup"
+  direction="right"
+  [overlay]="true"
+  (click.self)="close()"
+>
+  <header class="header" [style.height.px]="columnSettingsHeaderHeightPx">
+    <span class="header__title">Настройка таблицы</span>
+    <div class="header__buttons">
+      <button
+        tuiIconButton
+        class="reset-button"
+        appearance="flat"
+        size="m"
+        (click)="openResetDialog()"
+      >
+        <tui-icon class="column-settings__icon" [icon]="iconEraser"></tui-icon>
+      </button>
+      <sproc-divider layout="vertical"></sproc-divider>
+      <button tuiIconButton class="close-button" appearance="flat" size="m" (click)="close()">
+        <tui-icon class="column-settings__icon" [icon]="iconCancelClose"></tui-icon>
+      </button>
+    </div>
+  </header>
+  <div
+    cdkDropListGroup
+    class="column-container tui__t-content--no-default-padding"
+    [style.height.px]="columnListHeightPx()"
+  >
+    <div
+      cdkDropList
+      class="column-list"
+      [cdkDropListData]="fixedLeftColumns()"
+      (cdkDropListDropped)="dropIntoFixedLeft($event)"
+      [cdkDropListEnterPredicate]="fixedLeftListEnterPredicate()"
+    >
+      @if (showLeftListHeader()) {
+        <div class="column-list__label-container">
+          <span class="subtitle" [style.height.px]="columnSettingsSubtitleHeightPx">
+            Фиксированные колонки слева
+          </span>
+        </div>
+      }
+
+      <tui-scrollbar
+        [style.max-height.px]="scrollBoxFixedColumnsMaxHeightPx"
+        (waResizeObserver)="onFixedScrollbarResize($event)"
+      >
+        @for (fixedLeftColumn of fixedLeftColumns(); track fixedLeftColumn.id) {
+          <sproc-column-settings-template
+            [column]="fixedLeftColumn"
+          ></sproc-column-settings-template>
+        }
+      </tui-scrollbar>
+    </div>
+    <sproc-divider></sproc-divider>
+    <div
+      cdkDropList
+      class="column-list"
+      [style.padding-bottom.px]="columnListBottomPaddingPx"
+      [cdkDropListData]="columns()"
+      (cdkDropListDropped)="dropIntoColumns($event)"
+      [cdkDropListEnterPredicate]="columnsListEnterPredicate()"
+    >
+      <div class="column-list__label-container">
+        <span
+          class="subtitle subtitle--flex-grow-1"
+          [style.height.px]="columnSettingsSubtitleHeightPx"
+          >{{ columnsListHeader() }}</span
+        >
+        <span class="show-all" (click)="showAllColumns()">Показать все</span>
+      </div>
+      <tui-scrollbar [style.max-height.px]="scrollBoxColumnsMaxHeightPx()">
+        @for (column of columns(); track column.id) {
+          <sproc-column-settings-template [column]="column"></sproc-column-settings-template>
+        }
+      </tui-scrollbar>
+    </div>
+    @if (showFixedRightList()) {
+      <sproc-divider></sproc-divider>
+      <div
+        cdkDropList
+        class="column-list"
+        [style.padding-bottom.px]="columnListBottomPaddingPx"
+        [cdkDropListData]="fixedRightColumns()"
+        (cdkDropListDropped)="dropIntoColumns($event)"
+        [cdkDropListEnterPredicate]="fixedRightListEnterPredicate()"
+      >
+        @if (showRightListHeader()) {
+          <div class="column-list__label-container">
+            <span
+              class="subtitle subtitle--flex-grow-1"
+              [style.height.px]="columnSettingsSubtitleHeightPx"
+              >Фиксированные колонки справа</span
+            >
+          </div>
+        }
+
+        <tui-scrollbar
+          [style.max-height.px]="scrollBoxFixedColumnsMaxHeightPx"
+          (waResizeObserver)="onRightFixedScrollbarResize($event)"
+        >
+          @for (column of fixedRightColumns(); track column.id) {
+            <sproc-column-settings-template [column]="column"></sproc-column-settings-template>
+          }
+        </tui-scrollbar>
+      </div>
+    }
+  </div>
+  <footer class="footer" [style.height.px]="columnSettingsFooterHeightPx">
+    <button
+      tuiButton
+      class="save-button"
+      size="m"
+      appearance="primary"
+      (click)="saveTableSettings()"
+    >
+      Сохранить
+    </button>
+  </footer>
+</tui-drawer>
+
+<ng-template #resetSettings>
+  <sproc-reset-settings-form></sproc-reset-settings-form>
+</ng-template>
+
+<ng-template #resetSettingsFooter let-completeWith="completeWith">
+  <div style="width: 100%; display: flex; justify-content: center; gap: 8px">
+    <button
+      tuiButton
+      style="width: 196px"
+      appearance="primary-destructive"
+      size="l"
+      (click)="deleteSettings(); completeWith(true)"
+    >
+      Сбросить
+    </button>
+    <button
+      tuiButton
+      style="width: 196px"
+      appearance="outline-grayscale"
+      size="l"
+      (click)="completeWith(false)"
+    >
+      Отмена
+    </button>
+  </div>
+</ng-template>