ngx-register-base 1.3.0 → 1.3.1

package/src/lib/components/filters/components/filter-list/filter-list-header/filter-list-header.component.ts

@@ -0,0 +1,114 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  EventEmitter,
+  inject,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { map } from 'rxjs';
+import { FilterListService } from '../filter-list.service';
+import { Router } from '@angular/router';
+import { getLastSegmentOfPathName } from '../../../../../utils/get-url-segment';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { EInputsAction, EInputsState, GqlFields } from '../../../../../types';
+import { FiltersStateService } from '../../../../../services';
+
+@Component({
+  selector: 'sproc-filter-list-header',
+  templateUrl: './filter-list-header.component.html',
+  styleUrls: ['./filter-list-header.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [FilterListService],
+})
+export class FilterListHeaderComponent implements OnInit {
+  @Input() total: number | null = 0;
+  @Input() showTotal = true;
+  @Input() showPin = true;
+  @Input() showCloseButton = true;
+  @Input() acceptButtonDisabled = false;
+  @Input() applyButtonDisabled = false;
+  @Input() filterListHeaderTitle = 'Фильтр';
+
+  @Output() pinnedChange = new EventEmitter<boolean>();
+  @Output() applyFilter = new EventEmitter<GqlFields>();
+  @Output() resetFilter = new EventEmitter<void>();
+
+  private readonly _dr = inject(DestroyRef);
+
+  public readonly count$ = this._filterStateService.count$;
+  public readonly filterState$ = this._filterStateService.state$.pipe(
+    map((filterState) => filterState.state)
+  );
+
+  public readonly FilterState = EInputsState;
+
+  constructor(
+    private readonly _router: Router,
+    private readonly _filterStateService: FiltersStateService<any>,
+    private readonly _filterListService: FilterListService
+  ) {}
+
+  public ngOnInit(): void {
+    this._filterListService.modulePath = getLastSegmentOfPathName(this._router.url);
+
+    this._filterListService.apply$.pipe(takeUntilDestroyed(this._dr)).subscribe((gql) => {
+      this.applyFilter.emit(gql);
+      this._filterListService.savePinnedFilters();
+    });
+  }
+
+  public onTogglePin(): void {
+    this._filterStateService.togglePin();
+    this.pinnedChange.emit(this._filterStateService.isPin);
+    this._filterListService.savePinnedFilters();
+  }
+
+  public onSavedList(): void {
+    this._filterStateService.setState({
+      state: EInputsState.SAVED_LIST,
+      action: EInputsAction.OPEN,
+    });
+  }
+
+  public onSave(): void {
+    this._filterStateService.setState({
+      state: EInputsState.ON_SAVE_FILTER,
+      action: EInputsAction.AFTER_SAVE_FILTER,
+    });
+  }
+
+  public onApplyFilter(): void {
+    this._filterListService.applyFilter();
+  }
+
+  public onReset(): void {
+    this._filterListService.clear();
+  }
+
+  public onClose(): void {
+    this._filterStateService.setPin(false);
+    this._filterStateService.setState({ state: EInputsState.HIDDEN, action: EInputsAction.CANCEL });
+  }
+
+  public onApplySavedFilter(): void {
+    this._filterListService.applySavedFilter();
+  }
+
+  public onSaveFilter(): void {
+    this._filterListService.saveFilter();
+  }
+
+  public onBack(): void {
+    this._filterStateService.setState({
+      state: EInputsState.FILTER_LIST,
+      action: EInputsAction.OPEN,
+    });
+  }
+
+  protected get isPin(): boolean {
+    return this._filterStateService.isPin;
+  }
+}

package/src/lib/components/filters/components/filter-list/filter-list-saved/filter-list-saved.component.html

@@ -0,0 +1,44 @@
+<div class="sproc-filter-list-saved">
+  <prizm-loader [showLoader]="$any(loading$ | async)" [overlay]="true">
+    <span *ngIf="savedItems.length === 0" class="input-text-12px"
+      >Сохраненых фильтров не найдено
+    </span>
+    <div
+      *ngFor="let item of savedItems; let i = index"
+      [class.selected]="item.selected"
+      class="sproc-filter-list-saved-item"
+      (click)="onSelect(item.id)"
+    >
+      <div class="input-text-12px">{{ item.name }}</div>
+
+      <div class="sproc-filter-list-saved-item-action-buttons">
+        <button
+          [icon]="item.favorite ? 'social-star-fill' : 'social-star'"
+          prizmIconButton
+          appearanceType="ghost"
+          [appearance]="item.favorite ? 'primary' : 'secondary'"
+          size="xl"
+          (click)="onFavorite(item.id)"
+        ></button>
+
+        <button
+          [icon]="'editor-mode'"
+          prizmIconButton
+          appearanceType="ghost"
+          appearance="secondary"
+          size="xl"
+          (click)="onEdit(item.id)"
+        ></button>
+
+        <button
+          [icon]="'delete'"
+          prizmIconButton
+          appearanceType="ghost"
+          appearance="secondary"
+          size="xl"
+          (click)="onDelete(item.id)"
+        ></button>
+      </div>
+    </div>
+  </prizm-loader>
+</div>

package/src/lib/components/filters/components/filter-list/filter-list-saved/filter-list-saved.component.less

@@ -0,0 +1,49 @@
+:host {
+  .sproc-filter-list-saved {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 0;
+    gap: 1px;
+
+    .sproc-filter-list-saved-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      height: 32px;
+      padding: 0 8px 0 16px;
+
+      .sproc-filter-list-saved-item-action-buttons {
+        display: flex;
+        flex-direction: row;
+
+        button {
+          height: 32px;
+          min-height: 32px;
+          width: 32px;
+        }
+
+        ::ng-deep prizm-wrapper {
+          background-color: transparent;
+
+          :hover {
+            color: var(--brand-blue);
+          }
+
+          .prizm-icon-16.social-star-fill::before {
+            color: var(--brand-blue) !important;
+          }
+        }
+      }
+    }
+
+    .sproc-filter-list-saved-item:hover {
+      background-color: var(--brand-hovered);
+      cursor: pointer;
+    }
+  }
+
+  .selected {
+    background-color: #d0edff !important;
+  }
+}

package/src/lib/components/filters/components/filter-list/filter-list-saved/filter-list-saved.component.ts

@@ -0,0 +1,167 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { map, Subscription } from 'rxjs';
+import { SETTINGS_TYPE, USER_PROFILE_LOADER, USER_SETTINGS_LOADER } from '../../../../../consts';
+import { EInputsAction, EInputsState, ITpUserSettings } from '../../../../../types';
+import { FiltersStateService } from '../../../../../services';
+import { getLastSegmentOfPathName } from '../../../../../utils/get-url-segment';
+
+interface IFilterSavedItem {
+  id: string;
+  user_id: string;
+  name: string;
+  favorite: boolean;
+  selected: boolean;
+  filter: Record<string, any>;
+  settingType: SETTINGS_TYPE;
+  sourceSettings: ITpUserSettings;
+}
+
+@Component({
+  selector: 'sproc-filter-list-saved',
+  templateUrl: './filter-list-saved.component.html',
+  styleUrls: ['./filter-list-saved.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilterListSavedComponent implements OnInit, OnDestroy {
+  public savedItems: IFilterSavedItem[] = [];
+
+  private filterStateSubscription: Subscription | null = null;
+  private savedFiltersSubscription: Subscription | null = null;
+  private selectedFilter: ITpUserSettings | null = null;
+  private modulePath?: string;
+
+  private readonly _userSettingsStore = inject(USER_SETTINGS_LOADER);
+  private readonly _userProfileService = inject(USER_PROFILE_LOADER);
+
+  public readonly loading$ = this._userSettingsStore.loading$;
+
+  constructor(
+    private readonly _router: Router,
+    private readonly _filterStateService: FiltersStateService<any>,
+    private readonly _cdr: ChangeDetectorRef
+  ) {}
+
+  public ngOnInit(): void {
+    this.modulePath = getLastSegmentOfPathName(this._router.url);
+    this.subscribeOnSettings();
+    this.subscribeOnFilterState();
+  }
+
+  public ngOnDestroy(): void {
+    this.filterStateSubscription?.unsubscribe();
+    this.savedFiltersSubscription?.unsubscribe();
+  }
+
+  private subscribeOnFilterState(): void {
+    this.filterStateSubscription = this._filterStateService.state$.subscribe((state) => {
+      if (state.state === EInputsState.SAVED_LIST) {
+        this._userSettingsStore.fetchUserSettingsByUserId({
+          userId: this._userProfileService.getUserProfile().id,
+          settingsType: SETTINGS_TYPE.FILTER,
+          moduleName: this.modulePath!,
+        });
+      }
+    });
+  }
+
+  private subscribeOnSettings(): void {
+    this.savedFiltersSubscription = this._userSettingsStore.settings$
+      .pipe(
+        map((filters) =>
+          filters.map((filter) => ({
+            id: filter.id,
+            user_id: filter.id_user,
+            name: filter.name,
+            selected: false,
+            favorite: filter.settings.favorite!,
+            filter: filter.settings.filter!,
+            settingType: filter.settings_type,
+            sourceSettings: filter,
+          }))
+        )
+      )
+      .subscribe((values) => {
+        this.savedItems = values.filter(
+          (value) => value.settingType === undefined || value.settingType === SETTINGS_TYPE.FILTER
+        );
+        this._cdr.markForCheck();
+      });
+  }
+
+  public onSelect(id: string): void {
+    this.savedItems = this.savedItems.map((item) => {
+      if (id === item.id) {
+        this.selectedFilter = item.sourceSettings;
+        this._filterStateService.setSelectedSavedFilter(item.sourceSettings);
+        return { ...item, selected: true };
+      }
+      return { ...item, selected: false };
+    });
+    this._cdr.markForCheck();
+  }
+
+  public onFavorite(id: string): void {
+    const foundedItem = this.savedItems.find((item) => item.id === id);
+    const defaultFounded = this.savedItems.find((item) => item.favorite && item.id !== id);
+    if (!foundedItem) {
+      return;
+    }
+    foundedItem.favorite = !foundedItem.favorite;
+
+    if (defaultFounded) {
+      this.savedItems = this.savedItems.map((item) => {
+        const newItem = { ...item };
+
+        if (item.sourceSettings.id === defaultFounded.sourceSettings.id) {
+          newItem.favorite = false;
+        }
+
+        return newItem;
+      });
+      this._userSettingsStore.updateUserSettingsSettingsById({
+        id: defaultFounded.sourceSettings.id,
+        settings: {
+          ...defaultFounded.sourceSettings.settings,
+          favorite: false,
+        },
+      });
+    }
+    this._userSettingsStore.updateUserSettingsSettingsById({
+      id,
+      settings: {
+        ...foundedItem.sourceSettings.settings,
+        favorite: foundedItem.favorite,
+      },
+    });
+    this._cdr.markForCheck();
+  }
+
+  public onEdit(id: string): void {
+    const foundedFilter = this.savedItems.find((item) => id === item.id);
+    if (foundedFilter) {
+      this._filterStateService.setSelectedSavedFilter(foundedFilter.sourceSettings);
+      this._filterStateService.setState({
+        state: EInputsState.ON_EDIT_FILTER,
+        action: EInputsAction.EDIT_FILTER,
+      });
+    }
+  }
+
+  public onDelete(id: string): void {
+    const foundedIndex = this.savedItems.findIndex((item) => item.id === id);
+    if (foundedIndex === -1) {
+      return;
+    }
+    this.savedItems.splice(foundedIndex, 1);
+    this._userSettingsStore.deleteUserSettingsById({ id });
+    this._cdr.markForCheck();
+  }
+}

package/src/lib/components/filters/components/filter-list/filter-list.service.ts

@@ -0,0 +1,97 @@
+import { inject, Injectable } from '@angular/core';
+import { ReplaySubject, take } from 'rxjs';
+import { EInputsAction, EInputsState, GqlFields, ITpUserSettings } from '../../../../types';
+import { FiltersService, FiltersStateService } from '../../../../services';
+import { SETTINGS_TYPE, USER_SETTINGS_LOADER } from '../../../../consts';
+
+@Injectable()
+export class FilterListService {
+  public readonly apply$ = new ReplaySubject<GqlFields>();
+
+  public modulePath!: string;
+
+  private _pinnedFilterSetting: ITpUserSettings | undefined;
+
+  private readonly settingsStore = inject(USER_SETTINGS_LOADER);
+
+  constructor(
+    private readonly _filtersService: FiltersService<any>,
+    private readonly _filterStateService: FiltersStateService<any>
+  ) {}
+
+  public applyFilter(): void {
+    this.apply$.next(this._filtersService.gqlFilter);
+    this._filterStateService.setState({
+      state: EInputsState.FILTER_LIST,
+      action: EInputsAction.APPLY_FILTERS,
+    });
+  }
+
+  public applySavedFilter(): void {
+    const savedFilter = this._filterStateService.getSelectedSavedFilter();
+    if (savedFilter) {
+      this._filtersService.setUserSettingsFilterValues(savedFilter.settings?.filter ?? []);
+      this._filterStateService.setSelectedSavedFilter(null);
+      this._filterStateService.setState({
+        state: EInputsState.FILTER_LIST,
+        action: EInputsAction.APPLY_SAVED_FILTER,
+      });
+      this.apply$.next(this._filtersService.gqlFilter);
+    } else {
+      console.error('Выбранный фильтр не найден');
+    }
+  }
+
+  public saveFilter(): void {
+    if (!this.modulePath) {
+      console.error('modulePath не инициализирован');
+    }
+
+    const saved = this._filterStateService.getSelectedSavedFilter();
+    this.settingsStore.upsertEnded$.pipe(take(1)).subscribe(() => {
+      this._filterStateService.setSelectedSavedFilter(null);
+      this._filterStateService.setState({
+        state: EInputsState.SAVED_LIST,
+        action: EInputsAction.AFTER_SAVE_FILTER,
+      });
+    });
+
+    this.settingsStore.upsertUserSettingsByUserId({
+      settings: {
+        id: saved?.id ?? undefined,
+        name: this._filterStateService.name,
+        settings: {
+          favorite: saved?.settings?.favorite ?? false,
+          filter: this._filtersService.userSettingsFilter,
+        },
+        module_name: this.modulePath,
+        settings_type: SETTINGS_TYPE.FILTER,
+      },
+    });
+  }
+
+  public clear(): void {
+    this._filtersService.clear();
+  }
+
+  public savePinnedFilters(): void {
+    this.settingsStore
+      .upsertReturningOne$(SETTINGS_TYPE.REGISTER_PINNED_INPUTS)
+      .subscribe((setting) => {
+        this._pinnedFilterSetting = setting ?? undefined;
+      });
+
+    this.settingsStore.upsertUserSettingsByUserId({
+      settings: {
+        id: this._pinnedFilterSetting?.id,
+        settings: {
+          filter: this._filtersService.userSettingsFilter,
+          pinned: this._filterStateService.isPin,
+        },
+        module_name: this.modulePath,
+        settings_type: SETTINGS_TYPE.REGISTER_PINNED_INPUTS,
+      },
+      hidden: true,
+    });
+  }
+}

package/src/lib/components/filters/components/filter-list/filters-section/filters-section.component.html

@@ -0,0 +1,18 @@
+<div class="panel-head" (click)="toggleHeader()">
+  <div class="title">
+    <span class="title__font">{{ label() }}</span>
+    @if (haveAppliedFilters()) {
+      <div class="title__wrapper--relative">
+        <div class="title-wrapper--absolute indicator__wrapper">
+          <div class="indicator__icon indicator--danger"></div>
+        </div>
+      </div>
+    }
+  </div>
+
+  <prizm-icons [name]="isOpen() ? 'chevrons-up' : 'chevrons-down'" size="16"></prizm-icons>
+</div>
+
+<div class="filters-block" [attr.show]="isOpen()">
+  <ng-content></ng-content>
+</div>

package/src/lib/components/filters/components/filter-list/filters-section/filters-section.component.less

@@ -0,0 +1,55 @@
+@import 'fonts';
+@import 'indicator';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  padding-top: 8px;
+  gap: 8px;
+
+  .panel-head {
+    display: flex;
+    justify-content: space-between;
+    padding-right: 4px;
+    height: 24px;
+    align-items: center;
+    border-bottom: 1px solid var(--brand-blue);
+    cursor: pointer;
+
+    .title {
+      display: flex;
+      align-items: center;
+      height: 20px;
+
+      &__font {
+        .main-subtitle;
+      }
+
+      &--has-filters {
+        &::after {
+          .indicator(6px, var(--brand-danger));
+
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+
+  .filters-block {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 0 2px;
+    transform-origin: top;
+    transition: max-height 0.4s;
+    overflow: hidden;
+
+    &[show='true'] {
+      max-height: 1000px;
+    }
+
+    &[show='false'] {
+      max-height: 0;
+    }
+  }
+}

package/src/lib/components/filters/components/filter-list/filters-section/filters-section.component.ts

@@ -0,0 +1,69 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChildren,
+  inject,
+  Injector,
+  input,
+  runInInjectionContext,
+  signal,
+} from '@angular/core';
+import { NgControl } from '@angular/forms';
+import { combineLatest, of, switchMap } from 'rxjs';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { IInputControl } from '../../../../../types';
+
+@Component({
+  selector: 'sproc-filters-section',
+  templateUrl: './filters-section.component.html',
+  styleUrls: ['./filters-section.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FiltersSectionComponent {
+  public controls = contentChildren<NgControl>(NgControl, { descendants: true });
+
+  public label = input<string>('');
+
+  protected isOpen = signal(true);
+  protected haveAppliedFilters = computed(() => this._sameControlApplied());
+
+  private _sameControlApplied = computed(() => this._checkSomeControlApplied());
+
+  private _controlsChanges = toSignal(
+    toObservable(this.controls).pipe(
+      switchMap((controls) =>
+        combineLatest(
+          controls.map(({ control }) =>
+            runInInjectionContext(this._injector, () => {
+              const applied = (control as IInputControl)?.applied;
+
+              return applied ? toObservable(applied) : of(false);
+            })
+          )
+        )
+      )
+    ),
+    { initialValue: [] }
+  );
+
+  private readonly _injector = inject(Injector);
+
+  protected toggleHeader(): void {
+    this.isOpen.update((isOpen) => !isOpen);
+  }
+
+  private _checkSomeControlApplied(): boolean {
+    return this._controlsChanges().some((controlValue) => {
+      if (!controlValue) {
+        return false;
+      }
+
+      if (Array.isArray(controlValue)) {
+        return controlValue.some((value) => !!value);
+      }
+
+      return true;
+    });
+  }
+}

package/src/lib/components/filters/components/filter-list.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FilterListFooterComponent } from './filter-list/filter-list-footer/filter-list-footer.component';
+import { FilterListHeaderComponent } from './filter-list/filter-list-header/filter-list-header.component';
+import { FilterEditComponent } from './filter-list/filter-edit/filter-edit.component';
+import { FilterListSavedComponent } from './filter-list/filter-list-saved/filter-list-saved.component';
+import { FiltersSectionComponent } from './filter-list/filters-section/filters-section.component';
+import { DividerComponent } from '../../divider/divider.component';
+import { PrizmSharedModule } from '../../../utils/prizm.shared.module';
+
+@NgModule({
+  declarations: [
+    FilterListHeaderComponent,
+    FilterEditComponent,
+    FilterListSavedComponent,
+    FiltersSectionComponent,
+    FilterListFooterComponent,
+  ],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, PrizmSharedModule, DividerComponent],
+  exports: [
+    FilterEditComponent,
+    FilterListSavedComponent,
+    FiltersSectionComponent,
+    FilterListHeaderComponent,
+    FilterListFooterComponent,
+  ],
+})
+export class FilterListModule {}

package/src/lib/components/filters/register-table-filter.component.html

@@ -0,0 +1,53 @@
+<sproc-sliding-panel [isOpen]="isOpen$ | async" [subOffsetHeight]="subOffsetHeight">
+  <sproc-filter-list-header
+    header
+    [showTotal]="showTotal"
+    [showPin]="showPin"
+    [showCloseButton]="showCloseButton"
+    [total]="total$ | async"
+    [acceptButtonDisabled]="acceptButtonDisabled"
+    [applyButtonDisabled]="applyButtonDisabled"
+    [filterListHeaderTitle]="filterListHeaderTitle"
+    (pinnedChange)="closeMenu($event)"
+    (applyFilter)="onApplyFilter($event)"
+  ></sproc-filter-list-header>
+
+  <ng-container [ngSwitch]="filterState$ | async">
+    <ng-container *ngSwitchCase="FilterState.FILTER_LIST" [ngTemplateOutlet]="filtersTemplate">
+    </ng-container>
+
+    <div *ngSwitchCase="FilterState.SAVED_LIST">
+      <sproc-filter-list-saved></sproc-filter-list-saved>
+    </div>
+
+    <div *ngSwitchCase="FilterState.ON_EDIT_FILTER">
+      <sproc-filter-edit></sproc-filter-edit>
+
+      <sproc-divider></sproc-divider>
+
+      <ng-container [ngTemplateOutlet]="filtersTemplate"></ng-container>
+    </div>
+
+    <div *ngSwitchCase="FilterState.ON_SAVE_FILTER">
+      <sproc-filter-edit></sproc-filter-edit>
+    </div>
+
+    <ng-template #filtersTemplate>
+      @defer (on viewport) {
+        <ng-content />
+      } @loading (minimum 1s) {
+        <tui-loader size="m" class="loader"></tui-loader>
+      } @placeholder {
+        <span>...</span>
+      }
+    </ng-template>
+  </ng-container>
+
+  <sproc-filter-list-footer
+    footer
+    [acceptButtonDisabled]="acceptButtonDisabled"
+    [applyButtonDisabled]="applyButtonDisabled"
+    (apply)="onApplyFilter($event)"
+    [footerApplyButtonLabel]="footerApplyButtonLabel"
+  ></sproc-filter-list-footer>
+</sproc-sliding-panel>