ngx-register-base 1.2.3 → 1.3.1

package/src/lib/core/param/param-base.ts

@@ -0,0 +1,262 @@
+import {
+  AfterContentInit,
+  AfterViewInit,
+  ChangeDetectorRef,
+  computed,
+  DestroyRef,
+  Directive,
+  forwardRef,
+  inject,
+  Injector,
+  input,
+  Input,
+  OnInit,
+  Optional,
+  Self,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, Validators } from '@angular/forms';
+import { filter, skip, tap } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IInputControl, InputControlGqlValue, InputControlSaveValue } from '../../types';
+import {
+  FormatterGqlValueType,
+  FormatterSavedValueType,
+  ParserSavedValueType,
+} from '../../types/params.types';
+import { distinctUntilChangedJSONs } from '../../utils';
+
+@Directive({
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ParamBase),
+      multi: true,
+    },
+  ],
+})
+export abstract class ParamBase<
+    ValueType extends any | null,
+    SavedValueType extends InputControlSaveValue,
+  >
+  implements ControlValueAccessor, OnInit, AfterViewInit, AfterContentInit
+{
+  /** Название */
+  @Input() label = '';
+  /** Текст при пустом значении control (null) */
+  placeholder = input<string>('');
+  /** Режим просмотра, по умолчанию выключен */
+  @Input() readmode = false;
+  /** Кнопка быстрой очистки поля, по умолчанию включена */
+  @Input() forceClear = true;
+  /** Текст при наведении на значение control */
+  @Input() hint: string | null = null;
+  /** Готовые стили для использования поля в панели фильтров/параметров или на карточке, по умолчанию стили для карточки */
+  @Input() paramStyle: 'filter' | 'card' = 'card';
+  /** Метод для конвертации значения control при сохранении (используется при сохранении фильтров в БД) */
+  @Input() set formatSavedValue(
+    formatter: FormatterSavedValueType<ValueType, SavedValueType> | undefined
+  ) {
+    if (formatter) {
+      this.formatterSavedValue = formatter;
+    }
+  }
+  /** Метод для конвертации сохраненного значения в control (используется при установке сохраненных фильтров из БД) */
+  @Input() set parseSavedValue(
+    parser: ParserSavedValueType<SavedValueType, ValueType> | undefined
+  ) {
+    if (parser) {
+      this.parserSavedValue = parser;
+    }
+  }
+  /** Метод для конвертации значения control в GQL-значение (используется при вычислении gql_value control) */
+  @Input() set formatGqlValue(formatter: FormatterGqlValueType<ValueType> | undefined) {
+    if (formatter) {
+      this.formatterGqlValue = formatter;
+    }
+  }
+  /** Метод для отображения значения в режиме просмотра */
+  buildShowedValue = input((_: ValueType): string => '');
+
+  @Input() set required(required: boolean) {
+    this._required = required;
+    this._setControlRequired(required);
+  }
+
+  public get required(): boolean {
+    return this.control?.hasValidator(Validators.required) ?? false;
+  }
+
+  @Input() set disabled(disabled: boolean) {
+    this._disabled = disabled;
+    this._setControlDisabled(disabled);
+  }
+
+  public get disabled(): boolean {
+    return this.control?.disabled ?? false;
+  }
+
+  @Optional()
+  @Self()
+  private readonly _ngControl = inject(NgControl);
+
+  protected readonly cdr = inject(ChangeDetectorRef);
+  protected readonly dr = inject(DestroyRef);
+
+  protected control!: IInputControl<ValueType, SavedValueType>;
+  protected formatterSavedValue: (value: ValueType, injector?: Injector) => SavedValueType = (
+    value
+  ) => value as unknown as SavedValueType;
+  protected parserSavedValue: (value: SavedValueType, injector?: Injector) => ValueType = (value) =>
+    value as unknown as ValueType;
+  protected formatterGqlValue: (value: ValueType, injector?: Injector) => InputControlGqlValue = (
+    _
+  ) => undefined as InputControlGqlValue;
+
+  private _required = false;
+  private _disabled = false;
+  private _isOuterUpdatingSavedValue = true;
+
+  protected showedValue = '';
+
+  protected readonly applied = computed(() => this.control.applied?.() ?? false);
+
+  constructor(private _injector: Injector) {
+    if (this._ngControl) {
+      this._ngControl.valueAccessor = this;
+    }
+  }
+
+  public get value(): ValueType | undefined {
+    return this.control?.getRawValue();
+  }
+
+  public writeValue(value: ValueType): void {
+    this._updateShowedValue(value);
+  }
+
+  public clear(): void {
+    this.control.reset();
+    this.control.markAsDirty();
+  }
+
+  public registerOnChange(onChange: (value: ValueType) => void): void {
+    this.onChange = onChange;
+  }
+
+  protected onChange: (value: ValueType) => void = () => {};
+
+  public registerOnTouched(onTouched: () => void): void {
+    this.onTouched = onTouched;
+  }
+
+  protected onTouched = (): void => {};
+
+  public ngOnInit(): void {
+    this.onInit();
+  }
+
+  protected onInit(): void {}
+
+  public ngAfterViewInit(): void {
+    this.afterViewInit();
+  }
+
+  protected afterViewInit(): void {}
+
+  protected get isInvalidAndNotPristine(): boolean {
+    return this.control.invalid && !this.control.pristine;
+  }
+
+  protected isNotEmpty(): boolean {
+    const v = this.value;
+
+    return !(
+      v === null ||
+      v === undefined ||
+      (typeof v === 'string' && v.trim() === '') ||
+      (Array.isArray(v) && v.length === 0) ||
+      (typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length === 0)
+    );
+  }
+
+  public ngAfterContentInit(): void {
+    this.control =
+      this._ngControl && (this._ngControl.control as IInputControl<ValueType, SavedValueType>);
+
+    if (this.control) {
+      if (this._required) {
+        this._setControlRequired(this._required);
+      }
+
+      if (this._disabled) {
+        this._setControlDisabled(this._disabled);
+      }
+
+      this._subscribeOnValue();
+      this._subscribeOnSavedValue();
+    }
+
+    this.afterContentInit();
+  }
+
+  private _subscribeOnValue(): void {
+    this.control.valueChanges
+      .pipe(
+        distinctUntilChangedJSONs(),
+        tap((value) => this._updateSavedValue(value)),
+        takeUntilDestroyed(this.dr)
+      )
+      .subscribe((value) => {
+        this.control.gql_value = this.formatterGqlValue(value, this._injector);
+        this._updateShowedValue(value);
+
+        if (this.isNotEmpty()) {
+          this.control.applied?.set(false);
+        }
+      });
+  }
+
+  private _updateShowedValue(value: ValueType): void {
+    this.showedValue = this.buildShowedValue()(value);
+    this.cdr.markForCheck();
+  }
+
+  private _updateSavedValue(value: ValueType): void {
+    this._isOuterUpdatingSavedValue = false;
+    const savedValue = this.formatterSavedValue(value, this._injector);
+    this.control.saved_value$?.next(savedValue);
+    this._isOuterUpdatingSavedValue = true;
+  }
+
+  private _subscribeOnSavedValue(): void {
+    this.control.saved_value$
+      ?.pipe(
+        skip(1), // при подписывании на saved_value$ первым приходит null - пропускаем
+        filter(() => this._isOuterUpdatingSavedValue),
+        takeUntilDestroyed(this.dr)
+      )
+      .subscribe((savedValue) => {
+        const value =
+          savedValue === null ? null : this.parserSavedValue(savedValue, this._injector);
+        this.control.setValue(value as ValueType);
+      });
+  }
+
+  protected afterContentInit(): void {}
+
+  private _setControlRequired(required: boolean): void {
+    if (required) {
+      this.control?.addValidators(Validators.required);
+    } else {
+      this.control?.removeValidators(Validators.required);
+    }
+  }
+
+  private _setControlDisabled(disabled: boolean): void {
+    if (disabled) {
+      this.control?.disable();
+    } else {
+      this.control?.enable();
+    }
+  }
+}

package/src/lib/core/param/param-date-base.ts

@@ -0,0 +1,30 @@
+import { Directive, Injector } from '@angular/core';
+import { DateTimeService } from '../../services/date-time.service';
+import { ParamBase } from './param-base';
+import { PrizmDateTypes } from '../../utils/prizm.shared.module';
+import { InputControlSaveValue } from '../../types';
+import { EDatePattern, ETimezone } from '../../directives/date/date-time.types';
+
+@Directive()
+export abstract class ParamDateBase<
+  ValueType extends PrizmDateTypes | null,
+  SavedValueType extends InputControlSaveValue,
+> extends ParamBase<ValueType, SavedValueType> {
+  protected readonly ETimezone = ETimezone;
+  protected readonly EDatePattern = EDatePattern;
+
+  protected readonly _dts = this._dateInjector.get(DateTimeService);
+
+  protected readonly timezoneChange = this._dts.isTimeZoneChanged$;
+
+  constructor(private _dateInjector: Injector) {
+    super(_dateInjector);
+  }
+
+  protected rebuildDateInNewTimezone(date: Date, prevDiff: string, currDiff: string): Date {
+    const iso = this._dts.convertDateToISOWithTZ(date, prevDiff);
+    const utc = new Date(iso).toISOString();
+
+    return this._dts.isoToLocalDate(utc, currDiff);
+  }
+}

package/src/lib/core/param/param-select-base.ts

@@ -0,0 +1,118 @@
+import { Directive, Injector, Input, output } from '@angular/core';
+import { ParamBase } from './param-base';
+import { BehaviorSubject } from 'rxjs';
+import { PolymorphContent } from '@prizm-ui/components';
+import { InputControlSaveValue } from '../../types';
+import { InferArrayType } from '../../types/sub-types';
+import { MetaQuery } from '../../types/params.types';
+import { FastQueryStore } from '../../store/fast-query-store.service';
+
+@Directive()
+export abstract class ParamSelectBase<
+  ValueType,
+  SavedValueType extends InputControlSaveValue,
+> extends ParamBase<ValueType, SavedValueType> {
+  @Input() items: NonNullable<InferArrayType<ValueType>>[] = [];
+  @Input() searchable: boolean = false;
+  @Input() maxDropdownHeight = 342;
+  @Input() valueTemplate?: PolymorphContent;
+  @Input() listItemTemplate?: PolymorphContent;
+  @Input() nullContent: PolymorphContent | string | null = 'Не выбрано';
+  /** Массив полей по которым будет производиться фильтрация _or */
+  @Input() searchSubfields: string[] = [];
+  /** Флаг строгого поиска: строгий - _eq, не строгий - _ilike */
+  @Input() strictSearch = false;
+  @Input() selectClasses?: string;
+  @Input() limit = 50;
+  /** форматтер для задания кастомного отображения значения в поле */
+  @Input() formatShowedValue: (value: any, field: string) => string = (value, field) =>
+    value[field];
+  /** мета для автоматической подргузки значений из таблицы */
+  @Input() set meta(meta: MetaQuery | null) {
+    if (JSON.stringify(meta) !== JSON.stringify(this.meta)) {
+      this._meta$.next(meta);
+    }
+  }
+  public get meta(): MetaQuery | null {
+    return this._meta$.getValue();
+  }
+
+  public itemsChange = output<NonNullable<InferArrayType<ValueType>>[]>();
+
+  private readonly _meta$ = new BehaviorSubject<MetaQuery | null>(null);
+
+  protected readonly meta$ = this._meta$.asObservable();
+
+  protected readonly store = this._selectInjector.get(FastQueryStore);
+
+  public loading = false;
+
+  constructor(private _selectInjector: Injector) {
+    super(_selectInjector);
+  }
+
+  protected buildWhere(searchValue?: string): object | undefined {
+    const paramWhere = this.meta?.where;
+    const { valueField } = this.metaFields;
+
+    // Создаем массив условий _ilike для дополнительных полей
+    const ilikeConditions = [];
+
+    if (searchValue) {
+      if (this.searchSubfields) {
+        ilikeConditions.push(
+          ...this.searchSubfields.map((field) =>
+            this.buildNestedCondition(field, searchValue, false)
+          )
+        );
+      }
+
+      if (valueField) {
+        ilikeConditions.push(this.buildNestedCondition(valueField, searchValue, this.strictSearch));
+      }
+    }
+
+    // Если параметр where не задан, но есть значение для поиска и поле valueField, возвращаем только условия _ilike
+    if (!paramWhere && ilikeConditions.length > 0) {
+      return { _or: ilikeConditions };
+    }
+
+    // Если параметр where задан, добавляем условия _ilike к существующим условиям
+    if (paramWhere) {
+      return {
+        ...(paramWhere as object),
+        _or: ilikeConditions.length === 0 ? undefined : ilikeConditions,
+      };
+    }
+
+    // Если ничего не задано, возвращаем undefined
+    return;
+  }
+
+  protected buildNestedCondition(field: string, value: string, strict: boolean): object {
+    const parts = field.split('.');
+    const current = {};
+    let temp: any = current;
+
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i];
+      temp[part] = {};
+      temp = temp[part];
+    }
+
+    const lastPart = parts[parts.length - 1];
+    temp[lastPart] = strict ? { _eq: value } : { _ilike: `%${value}%` };
+
+    return current;
+  }
+
+  protected get metaFields(): { idField: string | null; valueField: string | null } {
+    const idField = this.meta?.table.idField ?? null;
+    const valueField = this.meta?.table.valueField.split(' ')[0] ?? null;
+
+    return {
+      idField,
+      valueField,
+    };
+  }
+}

package/src/lib/core/param/param-text-base.ts

@@ -0,0 +1,23 @@
+import { Directive, inject, input } from '@angular/core';
+import { ParamBase } from './param-base';
+import { MAX_LENGTH_TEXT_PARAMS } from './param.tokens';
+
+const DEFAULT_MAX_LENGTH = 1000;
+
+@Directive()
+export abstract class ParamTextBase extends ParamBase<string | null, string | null> {
+  private readonly _initMaxLength =
+    inject(MAX_LENGTH_TEXT_PARAMS, { optional: true }) ?? DEFAULT_MAX_LENGTH;
+
+  public override placeholder = input('Введите значение');
+  public override buildShowedValue = input(
+    (value: string | null): string => value?.toString() ?? '-'
+  );
+
+  /**
+   * Максимальное кол-во символов
+   *
+   * @default 1000
+   * */
+  public maxLength = input(this._initMaxLength);
+}

package/{lib/core/param/param.tokens.d.ts → src/lib/core/param/param.tokens.ts}

@@ -1,3 +1,4 @@
 import { InjectionToken } from '@angular/core';
+
 /** Максимальное кол-во символов в текстовых полях */
-export declare const MAX_LENGTH_TEXT_PARAMS: InjectionToken<number>;
+export const MAX_LENGTH_TEXT_PARAMS = new InjectionToken<number>('MAX_LENGTH_TEXT_PARAMS');

package/src/lib/core/register-base/register-base.store.ts

@@ -0,0 +1,84 @@
+import { inject, Injectable } from '@angular/core';
+import { ComponentStore } from '@ngrx/component-store';
+import { PrizmTableCellSorter } from '@prizm-ui/components';
+import { Apollo, MutationResult } from 'apollo-angular';
+import { Observable, ReplaySubject, Subscription } from 'rxjs';
+import { IHasuraQueryFilter } from '../../components/register-table/model/schema';
+import { GqlFields } from '../../types/inputs.types';
+import { IBaseRegisterStore, IBaseRegisterStoreState } from '../../types/register-base.types';
+import { HasuraError } from '../../types/hasura.types';
+
+@Injectable()
+export abstract class RegisterBaseStore<
+    Type extends Record<string, any>,
+    State extends IBaseRegisterStoreState<Type> = IBaseRegisterStoreState<Type>,
+  >
+  extends ComponentStore<State>
+  implements IBaseRegisterStore<Type>
+{
+  protected apollo = inject(Apollo);
+
+  readonly error = (e: HasuraError): void => {
+    console.error(e);
+    this.setLoading(false);
+  };
+
+  public getBaseFilter(params?: any): Record<string, any> {
+    return {} as Record<string, any>;
+  }
+
+  readonly mutationCompleted$ = new ReplaySubject<boolean>();
+  readonly loading$ = this.select((state) => state.loading);
+  readonly count$ = this.select((state) => state.count);
+  readonly total$ = this.select((state) => state.total);
+
+  readonly objects$ = this.select((state) => state.objects);
+  readonly setObjects = this.updater(
+    (store, objects: Type[]): State => ({
+      ...store,
+      loading: false,
+      objects,
+    })
+  );
+
+  readonly setLoading = this.updater((store, loading: boolean): State => ({ ...store, loading }));
+  readonly setCount = this.updater(
+    (store, count: number): State => ({
+      ...store,
+      count,
+    })
+  );
+
+  readonly setTotal = this.updater(
+    (state, total: number): State => ({
+      ...state,
+      total,
+    })
+  );
+
+  abstract readonly deleteByIds: (
+    ids: string[],
+    ...args: unknown[]
+  ) => Observable<MutationResult<Type[]> | null>;
+  abstract readonly fetchTotal: (
+    observableOrValue: Record<string, any> | Observable<Record<string, any>>
+  ) => Subscription;
+  abstract readonly fetchObjects: (
+    observableOrValue:
+      | {
+          filter: IHasuraQueryFilter<Type>;
+          callback?: (data: Type[]) => void;
+        }
+      | Observable<{
+          filter: IHasuraQueryFilter<Type>;
+          callback?: (data: Type[]) => void;
+        }>
+  ) => Subscription;
+
+  abstract buildFilter(
+    limit: number | undefined,
+    offset: number | undefined,
+    gqlFilter: GqlFields | undefined,
+    sorter?: PrizmTableCellSorter<Type>[]
+  ): IHasuraQueryFilter<Type>;
+}