ngx-register-base 1.2.3 → 1.3.1

package/src/lib/services/filter/filters.service.ts

@@ -0,0 +1,21 @@
+import { Injectable, Injector, Optional } from '@angular/core';
+import { InputsService } from '../inputs.service';
+import { FiltersTransmitService } from './filters-transmit.service';
+import { FormGroupWrapper } from '../../core/form-group-wrapper/form-group-wrapper';
+
+@Injectable()
+export class FiltersService<FormType> extends InputsService<FormType> {
+  constructor(
+    injector: Injector,
+    @Optional() private readonly _transmitter: FiltersTransmitService
+  ) {
+    super(injector);
+  }
+
+  public override init(group: FormGroupWrapper<FormType>): void {
+    super.init(group);
+
+    this._transmitter?.setForm(this.inputs);
+    this._transmitter?.setSearchInput(this.searchInput);
+  }
+}

package/src/lib/services/inputs-state.service.ts

@@ -0,0 +1,157 @@
+import { DestroyRef, inject, Injectable, OnDestroy } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { EInputsAction, EInputsState, GqlFields, IInputsState } from '../types';
+import { Router } from '@angular/router';
+import { getLastSegmentOfPathName } from '../utils';
+import { RegisterTableCellSorter } from '../components/register-table/model/schema';
+
+export const DEFAULT_LIMIT = 30;
+
+@Injectable()
+export class InputsStateService<T = any> implements OnDestroy {
+  protected readonly unsubscribe$ = new Subject<void>();
+
+  protected readonly _page$ = new BehaviorSubject<number>(1);
+  protected readonly _limit$ = new BehaviorSubject<number | null>(null);
+  protected readonly _offset$ = new BehaviorSubject<number>(0);
+  protected readonly _count$ = new BehaviorSubject<number>(0);
+  protected readonly _sorter$ = new BehaviorSubject<RegisterTableCellSorter<T>[]>([]);
+  protected readonly _name$ = new BehaviorSubject<string>('');
+  protected readonly _state$ = new BehaviorSubject<IInputsState>({
+    state: EInputsState.HIDDEN,
+    action: EInputsAction.OPEN,
+  });
+  // TODO: заменить на нормальный тип
+  protected readonly _gqlValues$ = new BehaviorSubject<GqlFields>([]);
+  protected readonly _pinned$ = new BehaviorSubject<boolean>(false);
+
+  public readonly page$ = this._page$.asObservable();
+  public readonly limit$ = this._limit$.asObservable();
+  public readonly offset$ = this._offset$.asObservable();
+  public readonly count$ = this._count$.asObservable();
+  public readonly sorter$ = this._sorter$.asObservable();
+  public readonly name$ = this._name$.asObservable();
+  public readonly state$ = this._state$.asObservable();
+  public readonly gqlValues$ = this._gqlValues$.asObservable();
+  public readonly pinned$ = this._pinned$.asObservable();
+
+  protected readonly destroyRef = inject(DestroyRef);
+
+  protected readonly router = inject(Router);
+
+  protected readonly modulePath = getLastSegmentOfPathName(this.router.url);
+
+  public readonly pinStorageKey = `@pin/${this.modulePath}`;
+  public readonly pinnedInputsStorageKey = `@pinned-inputs/${this.modulePath}`;
+
+  public toggle(): void {
+    const isOpen = this.state.state !== EInputsState.HIDDEN;
+
+    // если фильтр был открыт, значит его закрывают - открепляем
+    if (isOpen) {
+      this.setPin(false);
+    }
+
+    this.setState({
+      state: isOpen ? EInputsState.HIDDEN : EInputsState.FILTER_LIST,
+      action: EInputsAction.OPEN,
+    });
+  }
+
+  public togglePin(): void {
+    this.setPin(!this.isPin);
+  }
+
+  public ngOnDestroy(): void {
+    this._page$.complete();
+    this._limit$.complete();
+    this._name$.complete();
+    this._offset$.complete();
+    this._count$.complete();
+    this._state$.complete();
+    this._sorter$.complete();
+    this._gqlValues$.complete();
+    this._pinned$.complete();
+
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+
+    this.onDestroy();
+  }
+
+  protected onDestroy(): void {}
+
+  public setPage(page: number): void {
+    this._page$.next(page);
+  }
+
+  public setLimit(limit: number): void {
+    this._limit$.next(limit);
+  }
+
+  public setOffset(offset: number): void {
+    this._offset$.next(offset);
+  }
+
+  public setSorter(sort: RegisterTableCellSorter<T>[]): void {
+    this._sorter$.next(sort);
+  }
+
+  public setName(name: string): void {
+    this._name$.next(name);
+  }
+
+  public setCount(count: number): void {
+    this._count$.next(count);
+  }
+
+  public setState(state: IInputsState): void {
+    if (!(this.isPin && state.state === EInputsState.HIDDEN)) {
+      this._state$.next(state);
+    }
+  }
+
+  public setGqlValues(values: GqlFields): void {
+    this._gqlValues$.next(values);
+  }
+
+  public setPin(isPin: boolean): void {
+    this._pinned$.next(isPin);
+  }
+
+  public get page(): number {
+    return this._page$.getValue();
+  }
+
+  public get limit(): number {
+    return this._limit$.getValue() ?? DEFAULT_LIMIT;
+  }
+
+  public get offset(): number {
+    return this._offset$.getValue();
+  }
+
+  public get state(): IInputsState {
+    return this._state$.getValue();
+  }
+
+  public get count(): number {
+    return this._count$.getValue();
+  }
+
+  public get sorter(): RegisterTableCellSorter<T>[] {
+    return this._sorter$.getValue();
+  }
+
+  public get name(): string {
+    return this._name$.getValue();
+  }
+
+  public get gqlValues(): GqlFields {
+    return this._gqlValues$.getValue();
+  }
+
+  public get isPin(): boolean {
+    return this._pinned$.getValue();
+  }
+}

package/src/lib/services/inputs.service.ts

@@ -0,0 +1,114 @@
+import { Injectable, Injector, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { FormGroupWrapper } from '../core/form-group-wrapper/form-group-wrapper';
+import { ITpUserSettingsSettingsFilter } from '../types/register-base.types';
+import { ExtractForm } from '../types/sub-types';
+import { IInputControl, IInputsStateConfig } from '../types/inputs.types';
+import { InputControl } from '../core/input-control/input-control';
+import { INPUTS_STATE_CONFIG_KEY, WARN_SEARCH_INPUT_UNDEFINED } from '../consts/inputs.consts';
+
+@Injectable()
+export class InputsService<FormType> implements OnDestroy {
+  protected readonly config: IInputsStateConfig;
+  protected readonly unsubscribe$ = new Subject<void>();
+
+  private readonly _searchInput: IInputControl<string | null> | undefined;
+  public inputs!: FormGroupWrapper<FormType>;
+
+  constructor(private readonly injector: Injector) {
+    this.config = this.injector.get(INPUTS_STATE_CONFIG_KEY, {});
+
+    const { searchInput } = this.config;
+
+    if (searchInput) {
+      this._searchInput = new InputControl<string | null>(null);
+    }
+  }
+
+  public get searchInput(): IInputControl<string | null> | undefined {
+    if (!this._searchInput) {
+      console.warn(WARN_SEARCH_INPUT_UNDEFINED);
+    }
+
+    return this._searchInput;
+  }
+
+  public get searchValue(): string | null | undefined {
+    return this.searchInput?.getRawValue();
+  }
+
+  public init(group: FormGroupWrapper<FormType>): void {
+    this.inputs = group;
+  }
+
+  public get values(): ExtractForm<FormType> {
+    return this.inputs.getRawValue() as ExtractForm<FormType>;
+  }
+
+  public get dirtyValues(): Partial<ExtractForm<FormType>> {
+    return this.inputs.getDirtyValues();
+  }
+
+  public clear(): void {
+    this.inputs.reset();
+  }
+
+  public setUserSettingsFilterValues(values: ITpUserSettingsSettingsFilter[]): void {
+    this.clear();
+
+    for (const { id, value } of values) {
+      const key = id as keyof FormType;
+      const control = this._control<any, any>(key);
+
+      if (control?.saved_value$) {
+        control.saved_value$.next(value);
+      } else {
+        console.warn(`Не найдено поле: ${id} для установки значения:`, value);
+      }
+    }
+  }
+
+  private _control<ValueType extends FormType[keyof FormType], SavedValueType>(
+    key: keyof FormType
+  ): IInputControl<ValueType, SavedValueType> {
+    return this.inputs.controls[key] as IInputControl<ValueType, SavedValueType>;
+  }
+
+  public get userSettingsFilter(): ITpUserSettingsSettingsFilter[] {
+    return Object.entries(this.inputs.controls).map(([id, abstractControl]) => {
+      const control = abstractControl as IInputControl;
+      const value = control.saved_value$.getValue();
+      const savedValue = value === null ? null : value;
+
+      return {
+        id,
+        value: savedValue,
+      };
+    });
+  }
+
+  public get gqlFilter(): Record<string, any>[] {
+    const filter: Record<string, any>[] = [];
+
+    for (const abstractControl of Object.values(this.inputs.controls)) {
+      const control = abstractControl as IInputControl;
+
+      if (control.gql_value) {
+        filter.push(control.gql_value);
+      }
+
+      control.applied?.set(!!control.gql_value);
+    }
+
+    if (this.searchValue && this.searchInput?.gql_value) {
+      filter.push(this.searchInput.gql_value);
+    }
+
+    return filter;
+  }
+
+  public ngOnDestroy(): void {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+}

package/src/lib/services/key-pressed.service.ts

@@ -0,0 +1,40 @@
+import { inject, Injectable, InjectionToken, OnDestroy } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+export const KEY_PRESSED = new InjectionToken<string>('KEY_PRESSED_TOKEN');
+
+@Injectable()
+export class KeyPressedService implements OnDestroy {
+  private _keyName = inject(KEY_PRESSED);
+
+  private readonly _isPressed$ = new BehaviorSubject(false);
+
+  public readonly isPressed$ = this._isPressed$.asObservable();
+
+  constructor() {
+    window.addEventListener('keydown', this._keydownListener);
+    window.addEventListener('keyup', this._keyupListener);
+  }
+
+  public isPressed(): boolean {
+    return this._isPressed$.getValue();
+  }
+
+  public ngOnDestroy(): void {
+    this._isPressed$.complete();
+    window.removeEventListener('keydown', this._keydownListener);
+    window.removeEventListener('keyup', this._keyupListener);
+  }
+
+  private readonly _keydownListener = (event: KeyboardEvent) => {
+    if (event.key === this._keyName) {
+      this._isPressed$.next(true);
+    }
+  };
+
+  private readonly _keyupListener = (event: KeyboardEvent) => {
+    if (event.key === this._keyName) {
+      this._isPressed$.next(false);
+    }
+  };
+}

package/src/lib/services/resize-window-observer.service.ts

@@ -0,0 +1,37 @@
+import { afterNextRender, DestroyRef, inject, Injectable, NgZone, signal } from '@angular/core';
+import { debounceTime, distinctUntilChanged, fromEvent, map } from 'rxjs';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+
+const RESIZE_WINDOW_DEBOUNCE_MLS = 100;
+
+@Injectable()
+export class ResizeWindowObserverService {
+  private readonly _zone = inject(NgZone);
+  private readonly _destroyRef = inject(DestroyRef);
+
+  public readonly innerHeight = signal(window.innerHeight);
+  public readonly innerWidth = signal(window.innerWidth);
+
+  public readonly innerHeight$ = toObservable(this.innerHeight);
+
+  constructor() {
+    afterNextRender(() => {
+      this._zone.runOutsideAngular(() => {
+        fromEvent(window, 'resize')
+          .pipe(
+            debounceTime(RESIZE_WINDOW_DEBOUNCE_MLS),
+            map(() => ({
+              height: window.innerHeight,
+              width: window.innerWidth,
+            })),
+            distinctUntilChanged(),
+            takeUntilDestroyed(this._destroyRef)
+          )
+          .subscribe(({ height, width }) => {
+            this.innerHeight.set(height);
+            this.innerWidth.set(width);
+          });
+      });
+    });
+  }
+}

package/src/lib/services/selected-objects-state.service.ts

@@ -0,0 +1,159 @@
+import { computed, DestroyRef, inject, Injectable, signal } from '@angular/core';
+import { ScalarUUID } from 'hasura';
+import { BehaviorSubject, skip, take } from 'rxjs';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { ERegisterObjectState, IRegisterObject } from '../types/register-base.types';
+import { invertState } from '../consts/register-base.consts';
+import { isDefined } from '../utils';
+import {
+  ApplySelectionTypes,
+  SelectionTypes,
+} from '../components/checkbox-selector/checkbox-selector.types';
+
+/** Сервис хранения состояния выбранных в реестре объектов */
+@Injectable()
+export class SelectedObjectsStateService<T extends { id: ScalarUUID } = any> {
+  /** Состояние всех загруженных объектов реестра */
+  public readonly state = signal(new Map<ScalarUUID, IRegisterObject<T>>());
+  /** Ключи всех выбранных объектов реестра */
+  public readonly selectedKeys = computed(() => {
+    const selected = this._filterStateObjectsByState(this.state(), ERegisterObjectState.SELECTED);
+
+    return new Set(selected.keys());
+  });
+  /** Ключи всех выбранных или не выбранных объектов реестра (зависит от stateUnfetchedObjects) */
+  public readonly keys = computed(() => {
+    const unfetchedState = this.stateUnfetchedObjects();
+
+    return new Set(
+      this._filterStateObjectsByState(this.state(), invertState(unfetchedState)).keys()
+    );
+  });
+  /** Значения всех выбранных объектов реестра */
+  public readonly selectedValues = computed(() => {
+    const selected = this._filterStateObjectsByState(this.state(), ERegisterObjectState.SELECTED);
+
+    return new Set(
+      [...selected.values()].map(({ object }) => object).filter((object) => isDefined(object))
+    );
+  });
+  /** Значения всех не выбранных объектов реестра */
+  public readonly unselectedValues = computed(() => {
+    const selected = this._filterStateObjectsByState(this.state(), ERegisterObjectState.UNSELECTED);
+
+    return new Set(
+      [...selected.values()].map(({ object }) => object).filter((object) => isDefined(object))
+    );
+  });
+  /** Значения всех выбранных или не выбранных объектов реестра (зависит от stateUnfetchedObjects) */
+  public readonly values = computed(() => {
+    const unfetchedState = this.stateUnfetchedObjects();
+
+    return new Set(
+      [...this._filterStateObjectsByState(this.state(), invertState(unfetchedState)).values()]
+        .map(({ object }) => object)
+        .filter((object) => isDefined(object))
+    );
+  });
+
+  public readonly selectionType$ = new BehaviorSubject<ApplySelectionTypes>(null);
+  public readonly stateUnfetchedObjects$ = new BehaviorSubject<ERegisterObjectState>(
+    ERegisterObjectState.UNSELECTED
+  );
+
+  public readonly stateUnfetchedObjects = toSignal(this.stateUnfetchedObjects$.asObservable(), {
+    initialValue: ERegisterObjectState.UNSELECTED,
+  });
+
+  private readonly _dr = inject(DestroyRef);
+
+  constructor() {
+    this._subscribeOnSelectionType();
+  }
+
+  /**
+   * Установить состояние всем загруженным объектам
+   *
+   * @param nextState - устанавливаемое состояние
+   * */
+  public setAllStateObjectsByState(nextState: ERegisterObjectState): void {
+    if (nextState === ERegisterObjectState.UNSELECTED) {
+      this.stateUnfetchedObjects$.next(ERegisterObjectState.UNSELECTED);
+    }
+
+    for (const key of this.state().keys()) {
+      this.setStateObjectByKey(key, { state: nextState });
+    }
+
+    this._refresh();
+  }
+
+  /**
+   * Обновить свойства загруженного объекта по ключу
+   *
+   * @param key - ключ загруженного объекта
+   * @param updates - обновление, содержащее свойства которые нужно обновить
+   * */
+  public setStateObjectByKey(key: ScalarUUID, updates: Partial<IRegisterObject<T>>): void {
+    const objects = new Map(this.state());
+
+    const stateObject = objects.get(key) ?? { state: ERegisterObjectState.UNSELECTED };
+    objects.set(key, { ...stateObject, ...updates });
+
+    this.state.set(objects);
+  }
+
+  public loadStateObjects(data: T[]): void {
+    const state = this.stateUnfetchedObjects$?.getValue();
+
+    for (const object of data) {
+      if (!this.state().has(object.id)) {
+        this.setStateObjectByKey(object.id, { object, state });
+      }
+    }
+
+    this._refresh();
+  }
+
+  private _refresh(): void {
+    this.state.update((state) => new Map(state));
+  }
+
+  public resetState(data?: T[]): void {
+    this.stateUnfetchedObjects$
+      .asObservable()
+      .pipe(skip(1), take(1))
+      .subscribe(() => {
+        this.state.set(new Map());
+
+        if (data) {
+          this.loadStateObjects(data);
+        }
+      });
+    this.selectionType$.next(null);
+  }
+
+  private _filterStateObjectsByState(
+    stateObjects: Map<ScalarUUID, IRegisterObject<T>>,
+    filterState: ERegisterObjectState
+  ) {
+    return new Map([...stateObjects].filter(([_, { state }]) => state === filterState));
+  }
+
+  private _subscribeOnSelectionType(): void {
+    this.selectionType$
+      .asObservable()
+      .pipe(takeUntilDestroyed(this._dr))
+      .subscribe((type) => {
+        let newState = ERegisterObjectState.UNSELECTED;
+
+        if (type === SelectionTypes.ALL) {
+          newState = ERegisterObjectState.SELECTED;
+        } else if (type === SelectionTypes.INVERSE) {
+          newState = invertState(this.stateUnfetchedObjects$.getValue());
+        }
+
+        this.stateUnfetchedObjects$.next(newState);
+      });
+  }
+}

package/src/lib/store/fast-query-store.service.ts

@@ -0,0 +1,132 @@
+import { inject, Injectable } from '@angular/core';
+import { Apollo } from 'apollo-angular';
+import { DocumentNode } from 'graphql/language';
+import gql from 'graphql-tag';
+import { QueryOptions } from '@apollo/client/core';
+import { map, Observable, of, take } from 'rxjs';
+import { MetaQuery } from '../types/params.types';
+
+@Injectable()
+export class FastQueryStore {
+  private cachedTime = -12_345;
+  private cachedVariables = '';
+  private cachedData: { data: Record<string, any>[]; totalElements: number } = {
+    data: [],
+    totalElements: 0,
+  };
+
+  private readonly _apollo = inject(Apollo);
+
+  public getResults(
+    meta: MetaQuery,
+    withoutAggregate?: boolean,
+    selectedIdsWhere?: object
+  ): Observable<{ data: Record<string, any>[]; totalElements: number; selectedIdsQuery?: any[] }> {
+    const offset = meta.offset ?? 0;
+    const { limit } = meta;
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { order_by } = meta;
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { distinct_on, where } = meta;
+    let variables: Record<string, any> = { offset, limit, order_by, distinct_on };
+
+    if (where) {
+      variables = {
+        ...variables,
+        where,
+        ...(selectedIdsWhere && { selectedIdsWhere }),
+      };
+    }
+
+    const currentTime = Date.now();
+    const diff = (currentTime - this.cachedTime) / 20_000;
+    if (JSON.stringify(variables) === this.cachedVariables && diff <= 1) {
+      return of(this.cachedData);
+    }
+    const query = this.generateGqlQuery(meta, withoutAggregate, !!where && !!selectedIdsWhere);
+    const queryOptions: QueryOptions = {
+      query,
+      fetchPolicy: 'no-cache',
+      variables,
+    };
+
+    return this._apollo.watchQuery<any>(queryOptions).valueChanges.pipe(
+      take(1),
+      map(({ data }) => {
+        const { table } = meta;
+
+        const totalElements = withoutAggregate
+          ? data[table.name].length
+          : data[`${table.name}_aggregate`].aggregate.count;
+        const selectedIdsQuery = data?.selectedIdsQuery;
+        const result = { data: data[table.name], totalElements, selectedIdsQuery };
+        this.cachedVariables = JSON.stringify(variables);
+        this.cachedData = result;
+        this.cachedTime = Date.now();
+        return result;
+      })
+    );
+  }
+
+  public generateGqlQuery(
+    meta: MetaQuery,
+    withoutAggregate?: boolean,
+    withPickedSearch?: boolean
+  ): DocumentNode {
+    const data = this._buildDeepDataFromValue(meta.table.valueField);
+
+    return gql`
+      query queryFilter${meta.table.name}(
+        $where: ${meta.table.name}_bool_exp
+        $selectedIdsWhere: ${meta.table.name}_bool_exp
+        $limit: Int
+        $offset: Int
+        $order_by: [${meta.table.name}_order_by!]
+        $distinct_on: [${meta.table.name}_select_column!]
+      ) {
+        ${
+          meta.table.name
+        } (where: $where, limit: $limit, offset: $offset, order_by: $order_by, distinct_on: $distinct_on) {
+          ${meta.table.idField}
+          ${data}
+        }
+
+        ${
+          withoutAggregate
+            ? ''
+            : `${meta.table.name}_aggregate (where: $where) {
+          aggregate {
+            count
+          }
+        }`
+        }
+
+      ${
+        withPickedSearch
+          ? `
+        selectedIdsQuery: ${meta.table.name}(where: $selectedIdsWhere) {
+        ${meta.table.idField}
+        ${data}
+        }
+      `
+          : ''
+      }
+
+      }
+    `;
+  }
+
+  private _buildDeepDataFromValue(value: string): string {
+    const resultArray = value.split(' ');
+    const arr = [];
+    for (const el of resultArray) {
+      let result = '';
+      const deepValues = el.split('.');
+      for (let i = deepValues.length - 1; i > 0; i--) {
+        result = `{${deepValues[i]} ${result}}`;
+      }
+      arr.push(deepValues[0] + result);
+    }
+    return arr.join(' ');
+  }
+}

package/{lib/types/event.types.d.ts → src/lib/types/event.types.ts}

@@ -1,3 +1,3 @@
 export interface InputElementEvent extends InputEvent {
-    target: HTMLInputElement;
+  target: HTMLInputElement;
 }