ngx-register-base 1.3.1 → 1.3.2

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

@@ -1,147 +0,0 @@
-<ng-container [ngSwitch]="filterState$ | async">
-  <h4 *ngSwitchCase="FilterState.FILTER_LIST">{{ filterListHeaderTitle }}</h4>
-  <h4 *ngSwitchCase="FilterState.SAVED_LIST">Сохраненные фильтры</h4>
-  <h4 *ngSwitchCase="FilterState.ON_EDIT_FILTER">Редактирование фильтра</h4>
-  <h4 *ngSwitchCase="FilterState.ON_SAVE_FILTER">Сохранить фильтр</h4>
-</ng-container>
-
-<div class="sproc-filter-list-header-actions-button">
-  <ng-container [ngSwitch]="filterState$ | async">
-    <ng-container
-      *ngSwitchCase="FilterState.FILTER_LIST"
-      [ngTemplateOutlet]="filterListTemplate"
-    ></ng-container>
-    <ng-container
-      *ngSwitchCase="FilterState.SAVED_LIST"
-      [ngTemplateOutlet]="savedListTemplate"
-    ></ng-container>
-    <ng-container
-      *ngSwitchCase="FilterState.ON_EDIT_FILTER"
-      [ngTemplateOutlet]="saveFilterTemplate"
-    ></ng-container>
-    <ng-container
-      *ngSwitchCase="FilterState.ON_SAVE_FILTER"
-      [ngTemplateOutlet]="saveFilterTemplate"
-    ></ng-container>
-    <ng-container *ngSwitchDefault [ngTemplateOutlet]="backButtonTemplate"></ng-container>
-  </ng-container>
-</div>
-
-<ng-template #filterListTemplate>
-  <ng-container *ngIf="showPin">
-    <button
-      size="s"
-      appearanceType="ghost"
-      appearance="secondary"
-      prizmButton
-      class="icon-button"
-      (click)="onTogglePin()"
-    >
-      <img
-        [src]="
-          'assets/ngx-register-base/icons/' + (isPin ? 'thumbtack-directly.svg' : 'thumbtack.svg')
-        "
-      />
-    </button>
-
-    <sproc-divider layout="vertical"></sproc-divider>
-  </ng-container>
-
-  <button
-    icon="social-star"
-    size="s"
-    appearanceType="ghost"
-    appearance="secondary"
-    prizmButton
-    class="icon-button"
-    (click)="onSavedList()"
-  ></button>
-
-  <button
-    icon="tools-content-save"
-    size="s"
-    appearanceType="ghost"
-    appearance="secondary"
-    prizmButton
-    class="icon-button"
-    (click)="onSave()"
-  ></button>
-
-  <sproc-divider layout="vertical"></sproc-divider>
-
-  <button
-    icon="selection-check-simple"
-    size="s"
-    appearanceType="ghost"
-    appearance="primary"
-    prizmButton
-    class="icon-button"
-    [disabled]="applyButtonDisabled"
-    (click)="onApplyFilter()"
-  ></button>
-
-  <button
-    icon="tools-eraser"
-    size="s"
-    appearanceType="ghost"
-    appearance="secondary"
-    prizmButton
-    class="icon-button"
-    (click)="onReset()"
-  ></button>
-
-  <button
-    *ngIf="showCloseButton"
-    icon="cancel-close"
-    size="s"
-    appearanceType="ghost"
-    appearance="danger"
-    prizmButton
-    class="icon-button"
-    (click)="onClose()"
-  ></button>
-</ng-template>
-
-<ng-template #savedListTemplate>
-  <button
-    icon="selection-check-simple"
-    size="s"
-    appearanceType="ghost"
-    appearance="primary"
-    prizmButton
-    class="icon-button"
-    [disabled]="acceptButtonDisabled"
-    (click)="onApplySavedFilter()"
-  ></button>
-
-  <ng-container *ngTemplateOutlet="backButtonTemplate"></ng-container>
-</ng-template>
-
-<ng-template #saveFilterTemplate>
-  <button
-    icon="tools-content-save"
-    size="s"
-    appearanceType="ghost"
-    appearance="secondary"
-    prizmButton
-    class="icon-button"
-    [disabled]="acceptButtonDisabled"
-    (click)="onSaveFilter()"
-  ></button>
-
-  <ng-container *ngTemplateOutlet="backButtonTemplate"></ng-container>
-</ng-template>
-
-<ng-template #backButtonTemplate>
-  <button
-    icon="arrows-corner-up-left"
-    size="s"
-    appearanceType="ghost"
-    appearance="secondary"
-    prizmButton
-    class="icon-button"
-    prizmHint="Главное меню фильтров"
-    prizmHintTheme="light"
-    (click)="onBack()"
-  ></button>
-</ng-template>

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

@@ -1,45 +0,0 @@
-@import 'fonts';
-
-:host {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 40px;
-  height: 40px;
-  padding: 0 8px 0 16px;
-  border-radius: 2px 2px 0 0;
-  background: var(--table-header, #eef0f5);
-  border-bottom: 1px solid rgba(119, 123, 146, 30%);
-
-  h4 {
-    .static-title-h4;
-  }
-
-  .sproc-filter-list-header-actions-button {
-    height: 32px;
-    display: flex;
-
-    .icon-button {
-      height: 32px;
-
-      ::ng-deep {
-        .prizm-font-btn-links-14 {
-          height: 16px;
-        }
-
-        .z-wrapper {
-          display: flex;
-          align-items: center;
-
-          &[data-appearance='secondary'][data-appearance-type='ghost'] {
-            color: #4f5669;
-
-            &:hover {
-              color: var(--main-black);
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,114 +0,0 @@
-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

@@ -1,44 +0,0 @@
-<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

@@ -1,49 +0,0 @@
-: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

@@ -1,167 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,18 +0,0 @@
-<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>