Стандарты проектирования
Фильтры


Фильтры

Функционал в разработке

Функционал фильтрации в интерфейсе представляет из себя набор фильтров и кнопку, при клике на которую выпадает панель фильтров. По умолчанию в таблице может быть выведен набор фильтров, далее пользователь может настраивать его под себя с помощью панели.

Панель фильтров

Панель содержит:

  1. Раздел с фильтрами. Здесь можно кликать на чекбоксы, таким образом, добавлять или убирать фильтр в обертку над таблицей. Фильтры, которые стоят по умолчанию, тоже можно убрать, кроме тех случаев, когда эта возможность выключена специально;
  2. Раздел с наборами фильтров. Здесь можно переключаться между наборами с помощью радиокнопок;
  3. Кнопку "Сохранить как набор". Она позволяет сохранить выбранные фильтры и их значения как набор;
  4. Кнопку сброса значений. Она очищает значения всех фильтров, добавленных в обертку над таблицей;
  5. Кнопку сброса набора фильтров к набору по умолчанию. Она приводит набор фильтров, добавленных в таблицу, к тому, который был добавлен по умолчанию.

Создание набора фильтров

Набор фильтров - это пользовательский набор фильтров со значениями, который на данный момент сохраняется локально. Чтобы создать набор, нужно:

  1. Чекнуть желаемые фильтры на вкладке Фильтры;

  2. Задать в фильтрах значения, которые вам нужны. Если этого не сделать, то набор запомнит фильтры без значений, и их каждый раз нужно будет вводить вручную;

  3. Нажать в панели на кнопку Сохранить как набор;

  4. Набор сохранен. Чтобы просмотреть весь список наборов, нужно переключиться на соответствующую вкладку;

  5. По умолчанию набору присваивается наименование. Чтобы его изменить (или удалить набор), нужно навести на пункт мышкой и кликнуть по иконке карандаша (или корзины для удаления);

  6. С помощью инлайн-редактирования можно изменить наименование набора;

  7. При нажатии на иконку bookmark набор фильтров выведется в баннер как избранный, то есть можно будет включать-выключать набор и видеть статистику. При наведении на иконку появляется подсказка “Показывать набор в баннере”.

Зафиксировать можно не более 3х наборов.

Набор не в баннереНабор в баннере

Очистка значений фильтров

Чтобы очистить значения всех фильтров, нужно нажать на иконку с перечеркнутой воронкой (левая). Также под очистку значений будет выделена горячая клавиша cmd+shift+clear.

Сброс набора фильтров

При первом открытии грида на нем присутствует набор фильтров по умолчанию. Посе этого пользователь может добавить и другие фильтры. Чтобы вернуться к набору по умолчанию, нужно нажать на иконку сброса фильтров со стрелками (правая).

Фильтры с отрицанием

В случае, когда в фильтре нужно выбрать все значения за исключением одного, нужно использовать фильтр с кнопкой toggle button. При зажатой кнопке в грид выведутся записи, которые соответствуют всем значениям за исключением одного, выбранного в фильтре.

Хотим видеть задачи всех спринтов, кроме спринта 16.04.2024-30.04.2024:

Хотим видеть задачи спринта 16.04.2024-30.04.2024:

Поле поиска

При необходимости можно добавить в панель с фильтрами поле быстрого сквозного поиска, который ищет совпадения с введенным значением среди значений всех атрибутов. Это позволяет ускорить работу за счет быстрого поиска, а расширенный поиск по каждому атрибуту остается также доступен для более точного поиска.

Значение нашлось среди исполнителей:

Значение нашлось в атрибуте Тема:

DebounceTime для компонентов ввода

DebounceTime — это оператор RxJS, который используется для ограничения частоты событий в приложениях. Он задерживает обработку событий до тех пор, пока не пройдет заданный период времени без новых событий.

️⚠️️

Свойство следует использовать при фильтрации, например таблиц или больших списков, как одноуровневых, так и с вложенностью.

Принцип работы

Оператор работает следующим образом:

  • При возникновении события запускается таймер
  • Если в течение заданного времени появляется новое событие, таймер сбрасывается
  • Только после истечения таймера без новых событий происходит обработка последнего значения

Рекомендации по применению

  • Оптимальная задержка — выбирайте время задержки в зависимости от задачи (обычно 200-500 мс для ввода текста, 300-1000 мс для других действий).
  • Типы полей — в целом debounceTime можно использовать для любых типов полей. Однако не всегда есть необходимость это делать. Например, поле dropdown будет отправлять только одно поле в единый момент времени, и так как компонент после выбора значения закрывается, нет жесткой необходимости использовать свойство.

Пример использования в формате директивы:

import { Directive, EventEmitter, Output, OnDestroy } from '@angular/core';
import { NgModel } from '@angular/forms';
import { Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
@Directive({
  selector: '[QDebounceInput]',
  providers: [NgModel]
})
export class DebounceInputDirective implements OnDestroy {
  @Output() QDebounceInput = new EventEmitter<string>();
 
  private subscription: Subscription;
 
  constructor(private ngModel: NgModel) {
    this.subscription = this.ngModel.valueChanges
      ?.pipe(
        debounceTime(500),
        distinctUntilChanged()
      )
      .subscribe(value => {
        this.QDebounceInput.emit(value);
      });
  }
 
  ngOnDestroy() {
    this.subscription?.unsubscribe();
  }
}
<input
      type="text"
      [(ngModel)]="searchQuery"
      pInputText
      QDebounceInput
      (QDebounceInput)="onSearch($event)"
      placeholder="Введите поисковый запрос..."
    >

Рекомендуемые типы полей:

Расширенный сайдбар [Drawer]Формы