ngx-register-base 1.3.0 → 1.3.1

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

@@ -0,0 +1,318 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  forwardRef,
+  input,
+  OnDestroy,
+  Output,
+  signal,
+} from '@angular/core';
+import {
+  BehaviorSubject,
+  combineLatest,
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  map,
+  tap,
+} from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  TUI_ITEMS_HANDLERS,
+  TuiAppearance,
+  TuiDropdown,
+  TuiHint,
+  TuiLoader,
+  TuiTextfield,
+} from '@taiga-ui/core';
+import {
+  TuiChevron,
+  TuiComboBox,
+  TuiDataListWrapper,
+  TuiFilterByInputPipe,
+  TuiSelect,
+} from '@taiga-ui/kit';
+import { TuiTextfieldControllerModule } from '@taiga-ui/legacy';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
+import { TuiStringMatcher } from '@taiga-ui/cdk';
+import { ParamInvalidIconComponent } from '../sub-components/param-invalid-icon/param-invalid-icon.component';
+import { FastQueryStore } from '../../../store/fast-query-store.service';
+import { ParamSelectBase } from '../../../core/param/param-select-base';
+import { IFilterSelectValue } from '../../../types/params.types';
+import { PARAM_SEARCH_INPUT_DEBOUNCE_TIME_MLS } from '../../../consts/params.consts';
+
+@Component({
+  selector: 'sproc-param-select',
+  templateUrl: './param-select.component.html',
+  styleUrls: ['./param-select.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    FastQueryStore,
+    {
+      provide: TUI_ITEMS_HANDLERS,
+      deps: [forwardRef(() => ParamSelectComponent)],
+      useFactory: (component: ParamSelectComponent) => ({
+        stringify: component.stringify,
+        identityMatcher: component.identityMatcher,
+        disabledItemHandler: signal(() => false),
+      }),
+    },
+  ],
+  standalone: true,
+  imports: [
+    TuiTextfield,
+    TuiAppearance,
+    TuiTextfieldControllerModule,
+    ReactiveFormsModule,
+    TuiDataListWrapper,
+    TuiFilterByInputPipe,
+    NgTemplateOutlet,
+    NgSwitch,
+    NgSwitchCase,
+    NgSwitchDefault,
+    TuiComboBox,
+    ParamInvalidIconComponent,
+    NgIf,
+    TuiSelect,
+    TuiDropdown,
+    TuiLoader,
+    TuiChevron,
+    TuiHint,
+  ],
+})
+export class ParamSelectComponent
+  extends ParamSelectBase<IFilterSelectValue | null, IFilterSelectValue | null>
+  implements OnDestroy
+{
+  override placeholder = input('Выберите значение');
+  readonly stringify = input<(item: IFilterSelectValue) => string>((item) =>
+    String(item.name ?? '')
+  );
+  readonly identityMatcher = input<(a: IFilterSelectValue, b: IFilterSelectValue) => boolean>(
+    (a, b) => a.id === b.id
+  );
+  readonly matcher = input<TuiStringMatcher<IFilterSelectValue>>(
+    (item: IFilterSelectValue, query: string) => {
+      if (!query || String(query).trim() === '') {
+        return true;
+      }
+      return String(item?.name ?? '')
+        .toLowerCase()
+        .includes(String(query).toLowerCase());
+    }
+  );
+  override buildShowedValue = input(
+    (value: IFilterSelectValue | null): string => value?.name ?? '-'
+  );
+  public strict = input<boolean>(true);
+
+  @Output() onSelect = new EventEmitter<IFilterSelectValue>();
+
+  protected readonly search$ = new BehaviorSubject<string | undefined>(undefined);
+
+  public override afterViewInit(): void {
+    this._observeFetchItems();
+    if (this.meta) {
+      this._subscribeOnMetaChanges();
+      this._subscribeOnSearch();
+    }
+  }
+
+  public ngOnDestroy(): void {
+    this.search$.complete();
+  }
+
+  private _subscribeOnSearch(): void {
+    this.search$
+      .pipe(debounceTime(PARAM_SEARCH_INPUT_DEBOUNCE_TIME_MLS), takeUntilDestroyed(this.dr))
+      .subscribe((searchValue: string | undefined) => {
+        this.fetchItems(searchValue);
+      });
+  }
+
+  private _observeFetchItems(): void {
+    this._observeValueFill();
+    this._observeEmptyValue();
+    this._observeValueFetch();
+  }
+
+  private _observeValueFill(): void {
+    this.control.valueChanges
+      .pipe(
+        filter(Boolean),
+        filter((value) => !value.name),
+        takeUntilDestroyed(this.dr)
+      )
+      .subscribe((value) => {
+        const id = this._getIdFromValue(value);
+        const filledValue = this.items.find((item) => item.id === id);
+
+        if (filledValue) {
+          this.control.setValue(filledValue, { emitEvent: false });
+        }
+      });
+  }
+
+  private _observeEmptyValue(): void {
+    this.control.valueChanges
+      .pipe(
+        filter((value) => value === null),
+        takeUntilDestroyed(this.dr)
+      )
+      .subscribe(() => {
+        this.search$.next('');
+        this.fetchItems();
+      });
+  }
+
+  private _observeValueFetch(): void {
+    combineLatest([
+      this.control.valueChanges.pipe(
+        map((value) => value?.id ?? null),
+        distinctUntilChanged(),
+        filter((id) => !this.items.some((item) => item.id === id))
+      ),
+      this.meta$,
+    ])
+      .pipe(takeUntilDestroyed(this.dr))
+      .subscribe(() => this.fetchItems());
+  }
+
+  private _getIdFromValue(value: unknown): string | number | null {
+    return typeof value === 'object' && value !== null
+      ? ((value as { id?: string | number }).id ?? null)
+      : (value as string | number | null);
+  }
+
+  private _subscribeOnMetaChanges(): void {
+    this.meta$.pipe(takeUntilDestroyed(this.dr)).subscribe(() => {
+      this.fetchItems();
+    });
+  }
+
+  protected fetchItems(searchValue?: string): void {
+    const { idField, valueField } = this.metaFields;
+
+    if (!this.meta?.table?.name || idField === null || valueField === null) {
+      return;
+    }
+
+    const selectedItemIDs = this._getSelectedItemIDs(searchValue);
+
+    this.loading = true;
+    const where = this.buildWhere(searchValue);
+    const selectedItemIdsWhere = this._buildSelectedItemIdsWhere(where, selectedItemIDs, idField);
+
+    this.store
+      .getResults(
+        {
+          table: this.meta.table,
+          where,
+          order_by: this.meta.order_by,
+          offset: this.meta.offset,
+          distinct_on: this.meta.distinct_on,
+          subquery: this.meta.subquery,
+          limit: this.meta.limit ?? this.limit,
+        },
+        true,
+        selectedItemIdsWhere
+      )
+      .pipe(
+        tap((data) => {
+          this._handleResults(data, idField, valueField, selectedItemIDs);
+        }),
+        tap(() => {
+          this.loading = false;
+          this.cdr.markForCheck();
+        }),
+        takeUntilDestroyed(this.dr)
+      )
+      .subscribe();
+  }
+
+  private _getSelectedItemIDs(searchValue?: string): string[] | undefined {
+    if (this.value && (!searchValue || searchValue === '')) {
+      const idField = this.meta?.table.idField ?? 'id';
+      return [this.value[idField]];
+    }
+
+    return undefined;
+  }
+
+  private _buildSelectedItemIdsWhere(
+    where: any,
+    selectedItemIDs: string[] | undefined,
+    idField: string
+  ): object | undefined {
+    if (where && selectedItemIDs && selectedItemIDs.length > 0 && selectedItemIDs[0]) {
+      return { _and: [{ [idField]: { _in: selectedItemIDs } }, where] };
+    }
+
+    return undefined;
+  }
+
+  private _handleResults(
+    data: any,
+    idField: string,
+    valueField: string,
+    selectedItemIDs: string[] | undefined
+  ): void {
+    this.items = data.data.map((item: any) => ({
+      ...item,
+      id: item[idField] ?? '',
+      name: this._getNameFromField(item, valueField),
+    }));
+
+    this._updateControlValues(data, idField, valueField, selectedItemIDs);
+  }
+
+  private _getNameFromField(item: any, field: string): string {
+    if (field.includes('.')) {
+      return this._getNameFromDeepField(item, field);
+    }
+
+    return this.formatShowedValue(item, field);
+  }
+
+  private _getNameFromDeepField(item: any, field: string): string {
+    const deepFields = field.split('.');
+    let tempObject = { ...item };
+
+    for (const deepField of deepFields) {
+      tempObject = tempObject[deepField];
+    }
+
+    return tempObject;
+  }
+
+  private _updateControlValues(
+    data: any,
+    idField: string,
+    valueField: string,
+    selectedItemIDs: string[] | undefined
+  ): void {
+    const idSelectedValue = this.value?.[idField];
+    const availableItems =
+      data.selectedIdsQuery
+        ?.filter((item: any) => idSelectedValue === item[idField])
+        .map((item: any) => ({
+          ...item,
+          id: item[idField] ?? '',
+          name: this._getNameFromField(item, valueField),
+        })) ?? [];
+
+    if (selectedItemIDs && selectedItemIDs.length > 0 && availableItems.length > 0) {
+      const [item] = availableItems;
+      this.control?.setValue(item);
+    }
+
+    const itemsThatDontExist = availableItems.filter(
+      (new_item: any) => !this.items.some((value: any) => value.id === new_item.id)
+    );
+
+    this.items.push(...itemsThatDontExist);
+    this.itemsChange.emit(this.items);
+  }
+}

package/src/lib/components/inputs/param-switcher/param-switcher.component.html

@@ -0,0 +1,8 @@
+<div class="param-switcher">
+  <div *ngIf="label" class="label">
+    <span *ngIf="label" class="label__text">{{ label }}</span>
+    <span *ngIf="required" class="label--required">*</span>
+  </div>
+
+  <prizm-switcher [formControl]="control" [switchers]="switchers"></prizm-switcher>
+</div>

package/src/lib/components/inputs/param-switcher/param-switcher.component.less

@@ -0,0 +1,53 @@
+@import 'fonts';
+
+:host {
+  .param-switcher {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .label {
+      display: flex;
+      gap: 4px;
+
+      .input-label;
+
+      &__text {
+        color: var(--main-black);
+      }
+
+      &--required {
+        color: var(--brand-danger);
+      }
+    }
+
+    ::ng-deep {
+      prizm-switcher {
+        .container {
+          display: flex;
+          flex: 1;
+
+          prizm-switcher-item {
+            display: flex;
+            flex: 1;
+
+            button {
+              height: 24px !important;
+              min-height: 24px !important;
+              display: flex;
+              flex: 1;
+
+              prizm-wrapper {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: unset !important;
+                border: 1px solid var(--chip-background);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { PrizmSwitcherItem } from '@prizm-ui/components';
+import { ParamBase } from '../../../core';
+
+@Component({
+  selector: 'sproc-param-switcher',
+  templateUrl: './param-switcher.component.html',
+  styleUrls: ['./param-switcher.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ParamSwitcherComponent extends ParamBase<number, number> {
+  @Input() switchers: PrizmSwitcherItem[] = [];
+}

package/src/lib/components/inputs/param-switcher-date-time-range/consts/param-switcher-date-time-range.consts.ts

@@ -0,0 +1,29 @@
+import { PrizmSwitcherItem } from '@prizm-ui/components';
+import { ESwitcherValue } from '../types/param-switcher-date-time-range.types';
+
+export const SwitcherItems: PrizmSwitcherItem[] = [
+  {
+    id: ESwitcherValue.MONTH,
+    title: 'мес',
+  },
+  {
+    id: ESwitcherValue.FIRST,
+    title: '1 кв',
+  },
+  {
+    id: ESwitcherValue.SECOND,
+    title: '2 кв',
+  },
+  {
+    id: ESwitcherValue.THIRD,
+    title: '3 кв',
+  },
+  {
+    id: ESwitcherValue.FOURTH,
+    title: '4 кв',
+  },
+  {
+    id: ESwitcherValue.YEAR,
+    title: 'год',
+  },
+];

package/src/lib/components/inputs/param-switcher-date-time-range/param-switcher-date-time-range.component.html

@@ -0,0 +1,19 @@
+<div class="param-custom-template">
+  <div *ngIf="label" class="label">
+    <span *ngIf="label" class="label__text">{{ label }}</span>
+    <span *ngIf="required" class="label--required">*</span>
+  </div>
+
+  <prizm-switcher [switchers]="switchers" [formControl]="switcherControl"></prizm-switcher>
+
+  <prizm-input-layout class="flex-shrink--zero" size="s" [forceClear]="forceClear">
+    <prizm-input-layout-date-time-range
+      [placeholder]="placeholder()"
+      [timeMode]="timeMode"
+      [maxLength]="maxLength"
+      [min]="$any(min)"
+      [max]="$any(max)"
+      [formControl]="control"
+    ></prizm-input-layout-date-time-range>
+  </prizm-input-layout>
+</div>

package/src/lib/components/inputs/param-switcher-date-time-range/param-switcher-date-time-range.component.less

@@ -0,0 +1,76 @@
+@import 'fonts';
+
+:host {
+  .param-custom-template {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 0 2px;
+    gap: 8px;
+
+    .label {
+      display: flex;
+      gap: 4px;
+
+      .input-label;
+
+      &__text {
+        color: var(--main-black);
+      }
+
+      &--required {
+        color: var(--brand-danger);
+      }
+    }
+
+    ::ng-deep {
+      prizm-switcher {
+        .container {
+          display: flex;
+          flex: 1;
+
+          prizm-switcher-item {
+            display: flex;
+            flex: 1;
+
+            button {
+              height: 24px !important;
+              min-height: 24px !important;
+              display: flex;
+              flex: 1;
+
+              prizm-wrapper {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: unset !important;
+              }
+            }
+          }
+        }
+      }
+
+      .prizm-input-form:not(.prizm-input-form-focused) {
+        background: inherit;
+        border: none;
+        border-bottom: 1px solid #d7d8df;
+        padding: 0 3.5px 0 8px;
+      }
+
+      .prizm-input-form .prizm-input-form-focused {
+        background: inherit;
+        border: 1px !important;
+        border-bottom: 1px solid #d7d8df;
+      }
+
+      .prizm-input-form-inner {
+        min-height: 32px;
+        height: 32px;
+      }
+
+      input {
+        .input-text-12px;
+      }
+    }
+  }
+}

package/src/lib/components/inputs/param-switcher-date-time-range/param-switcher-date-time-range.component.ts

@@ -0,0 +1,134 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import {
+  PrizmDateTimeRange,
+  PrizmDay,
+  PrizmDayRange,
+  PrizmTime,
+  PrizmTimeRange,
+} from '@prizm-ui/components';
+import { SwitcherItems } from './consts/param-switcher-date-time-range.consts';
+import { ESwitcherValue } from './types/param-switcher-date-time-range.types';
+import { ParamDateTimeRangeComponent } from '../param-date-time-range/param-date-time-range.component';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { EMonth } from '../../../consts/month.consts';
+
+@Component({
+  selector: 'sproc-param-switcher-date-time-range',
+  templateUrl: './param-switcher-date-time-range.component.html',
+  styleUrls: ['./param-switcher-date-time-range.component.less'],
+})
+export class ParamSwitcherDateTimeRangeComponent extends ParamDateTimeRangeComponent {
+  protected switcherControl = new FormControl<ESwitcherValue | null>(null);
+  protected switchers = SwitcherItems;
+
+  public override onInit(): void {
+    super.onInit();
+    this._subscribeOnSwitcher();
+  }
+
+  public override afterViewInit(): void {
+    super.afterViewInit();
+    this.switcherControl.setValue(ESwitcherValue.MONTH);
+  }
+
+  private _subscribeOnSwitcher(): void {
+    this.switcherControl.valueChanges
+      .pipe(takeUntilDestroyed(this.dr))
+      .subscribe((switcherValue) => {
+        const now = new Date();
+        const year = now.getFullYear();
+        const month: EMonth = now.getMonth();
+
+        let controlValue: PrizmDateTimeRange | null = null;
+
+        if (switcherValue === ESwitcherValue.MONTH) {
+          controlValue = this._calcMonthRange(year, month);
+        } else if (switcherValue === ESwitcherValue.FIRST) {
+          controlValue = this._calcFirstQuarterRange(year);
+        } else if (switcherValue === ESwitcherValue.SECOND) {
+          controlValue = this._calcSecondQuarterRange(year);
+        } else if (switcherValue === ESwitcherValue.THIRD) {
+          controlValue = this._calcThirdQuarterRange(year);
+        } else if (switcherValue === ESwitcherValue.FOURTH) {
+          controlValue = this._calcFourthQuarterRange(year);
+        } else if (switcherValue === ESwitcherValue.YEAR) {
+          controlValue = this._calcYearRange(year);
+        }
+
+        this.control.setValue(controlValue);
+      });
+  }
+
+  private _calcMonthRange(year: number, month: EMonth): PrizmDateTimeRange {
+    const from = new Date(year, month, 1);
+    const to = new Date(year, month);
+    to.setMonth(to.getMonth() + 1);
+    to.setMilliseconds(to.getMilliseconds() - 1);
+
+    return new PrizmDateTimeRange(
+      new PrizmDayRange(PrizmDay.fromLocalNativeDate(from), PrizmDay.fromLocalNativeDate(to)),
+      new PrizmTimeRange(PrizmTime.fromLocalNativeDate(from), PrizmTime.fromLocalNativeDate(to))
+    );
+  }
+
+  private _calcFirstQuarterRange(year: number): PrizmDateTimeRange {
+    const from = new Date(year, EMonth.JAN, 1);
+    const to = new Date(year, EMonth.MAR);
+    to.setMonth(to.getMonth() + 1);
+    to.setMilliseconds(to.getMilliseconds() - 1);
+
+    return new PrizmDateTimeRange(
+      new PrizmDayRange(PrizmDay.fromLocalNativeDate(from), PrizmDay.fromLocalNativeDate(to)),
+      new PrizmTimeRange(PrizmTime.fromLocalNativeDate(from), PrizmTime.fromLocalNativeDate(to))
+    );
+  }
+
+  private _calcSecondQuarterRange(year: number): PrizmDateTimeRange {
+    const from = new Date(year, EMonth.APR, 1);
+    const to = new Date(year, EMonth.JUN);
+    to.setMonth(to.getMonth() + 1);
+    to.setMilliseconds(to.getMilliseconds() - 1);
+
+    return new PrizmDateTimeRange(
+      new PrizmDayRange(PrizmDay.fromLocalNativeDate(from), PrizmDay.fromLocalNativeDate(to)),
+      new PrizmTimeRange(PrizmTime.fromLocalNativeDate(from), PrizmTime.fromLocalNativeDate(to))
+    );
+  }
+
+  private _calcThirdQuarterRange(year: number): PrizmDateTimeRange {
+    const from = new Date(year, EMonth.JUL, 1);
+    const to = new Date(year, EMonth.SEP);
+    to.setMonth(to.getMonth() + 1);
+    to.setMilliseconds(to.getMilliseconds() - 1);
+
+    return new PrizmDateTimeRange(
+      new PrizmDayRange(PrizmDay.fromLocalNativeDate(from), PrizmDay.fromLocalNativeDate(to)),
+      new PrizmTimeRange(PrizmTime.fromLocalNativeDate(from), PrizmTime.fromLocalNativeDate(to))
+    );
+  }
+
+  private _calcFourthQuarterRange(year: number): PrizmDateTimeRange {
+    const from = new Date(year, EMonth.OCT, 1);
+    const to = new Date(year, EMonth.DEC);
+    to.setMonth(to.getMonth() + 1);
+    to.setMilliseconds(to.getMilliseconds() - 1);
+
+    return new PrizmDateTimeRange(
+      new PrizmDayRange(PrizmDay.fromLocalNativeDate(from), PrizmDay.fromLocalNativeDate(to)),
+      new PrizmTimeRange(PrizmTime.fromLocalNativeDate(from), PrizmTime.fromLocalNativeDate(to))
+    );
+  }
+
+  private _calcYearRange(year: number): PrizmDateTimeRange {
+    const from = new Date(year, EMonth.JAN, 1);
+    const to = new Date(year, EMonth.DEC);
+    to.setMonth(to.getMonth() + 1);
+    to.setMilliseconds(to.getMilliseconds() - 1);
+
+    return new PrizmDateTimeRange(
+      new PrizmDayRange(PrizmDay.fromLocalNativeDate(from), PrizmDay.fromLocalNativeDate(to)),
+      new PrizmTimeRange(PrizmTime.fromLocalNativeDate(from), PrizmTime.fromLocalNativeDate(to))
+    );
+  }
+}

package/src/lib/components/inputs/param-switcher-date-time-range/types/param-switcher-date-time-range.types.ts

@@ -0,0 +1,8 @@
+export enum ESwitcherValue {
+  MONTH,
+  FIRST,
+  SECOND,
+  THIRD,
+  FOURTH,
+  YEAR,
+}