# Компонент BaseSearchBar

Компонент содержит в себе поисковую строку и блок фильтра для выбора атрибутов поиска.

### Импорт компонента:

Компонент базовый, поэтому его использование возможно без импорта.

```javascript
import BaseSearchBar from '@components/common/base-search-bar/index.vue';
```

### Описание props

1. `attributes` - Массив объектов атрибутов для блока с фильтром, использовать требуется с модификатором `.sync`,
   для поддержания двустороннего связывания.
   Описание объектов атрибута:

```typescript
enum ConditionType {
  boolean = 'boolean',
  date = 'date',
  dictionary = 'dictionary',
  string = 'string',
  custom = 'custom',
}

interface Option {
  label?: string;
  value?: string;
}

interface Attribute {
  //Интерфейс объекта атрибута
  attribute: string; // Уникальное значение атрибута, обязательное поле, используется в наименовании слота,
  // если передано свойство conditionType: 'custom'
  attributeName: string; // Выводится в интерфейс, является названием атрибута
  conditionType: ConditionType; // Тип условия фильтра, если добавлен слот, необходимо передать 'custom'
  dictionary?: Option[]; // Выбор для задания значений фильтрации с conditionType = 'dictionary'
  value?: any; // Значение фильтра, если не было передано, то добавляется на этапе инициализации
  select?: boolean; // Выбран ли атрибут
  settingValue?: {
    // Значение условия фильтрации, устанавливается на этапе инициализации
    label: string;
    value: string;
    prefix?: string; // Префикс, используется при составлении query
    postfix?: string; // Постфикс, используется при составлении query
  };
}
```

2. `value` - Значение, которое может быть передано в поисковую строку. Чтобы поддержать двухстороннее связывание, требуется
   использовать диррективу `v-model`.

### Шаблон

Для того, чтобы использовать компонент на странице приложения во vue, необходимо добавить его следующим образом:

```html
<base-search-bar
  v-model="inputSearch"
  :attributes.sync="attributesCast"
  @query="queryHandler"
>
  <template
    v-for="attributeItem in attributesCastFilter"
    v-slot:[`sb-${attributeItem.attribute}`]
  >
    <slot :name="`bt-${attributeItem.attribute}`"></slot>
  </template>
</base-search-bar>
```

В примере выше данные, хранимые в `inputSearch` попадут в поисковую строку или будут взяты оттуда соответственно,
атрибуты `attributesCast` - будут переданы в компонент и использованы в качестве настроек для фильтра. Событие
`query` (обновление настроек фильтрации) будет всплывать всякий раз, когда произойдёт изменение выбранного фильтра,
на такие изменения выполнится метод queryHandler, на вход которого попадёт сформированный запрос `query`. Если данного
запроса недостаточно, его можно сформировать самостоятельно на основе объекта attributesCast.

### События

1. `@input -> function (value)` - Событие изменения данных в поисковой строке компонента.

2. `@query -> function (value)` - Событие изменения данных в фильтре. Переданное значение готово для использования
   в запросе rsql. Пример полученного значения:

```
(date>=2020-08-13T00:00:00.000+03) and (date<2020-08-14T00:00:00.000+03) and (dictionary=like=*'значение2'* or dictionary=like=*'значение1'*)
```

### Слоты

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

```html
<base-search-bar
  v-model="inputSearch"
  :attributes.sync="attributesCast"
  @query="queryHandler"
>
  <template v-slot:[`sb-${attributesCast[0].attribute}`]>
    <div><input type="text" v-model="exampInput" /></div>
  </template>
</base-search-bar>
```

В указанном примере, в фильтре, для 1-го переданного атрибута будет добавлен слот. Для того, чтобы слот действительно
был задействован, в массив атрибутов, для соответствующего объекта, необходимо атрибута указать
`conditionType: 'custom'`.
