# Компонент BaseTable

Компонент таблицы, содержит в себе компонент BaseSearchBar.

### Использование компонента:

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

```html
<BaseTable
  :onlyMy.sync="model.onlyMy"
  :showToggleMy="true"
  :useSearch="true"
  :columns="columns"
  :data="solutionsRecords"
  :loading="solutionsLoading"
  :pagination.sync="model.pagination"
  :title="$t('solutions.title')"
  :visible-columns="model.visibleColumns"
  @requestTable="init"
  @update="init"
  @search="search"
  v-model="inputSearch"
  :attributes.sync="attrubutes"
  saveQuery
  @query="setQuery"
></BaseTable>
```

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

Помимо предложенных ниже props'ов передать можно также props для таблицы quasar'а.

1. `attributes` - Значение атрибутов для фильтра в компоненте BaseSearchBar, описание объектов атрибутов описано там же.
2. `onlyMy` - Значение самого переключателя мои/все, использовать модификатор `.sync` для двусторонней привязке.
3. `showToggleMy` - Показывать ли переключатель мои/все. Значение `true|false`.
4. `useSearch` - Показывать ли поисковую форму(компонент BaseSearchBar). Значение `true|false`.
5. `value` - Значение поискового поля ввода(компонент BaseSearchBar), чтобы сделать двустороннее связывание, можно
   использовать директиву v-model.
6. `saveQuery` - сохраняет состояние параметров фильтра

### События

Помимо предложенных ниже событий, использовать можно также события для таблицы quasar'а.

1. `@input -> function (value)` - Событие изменения данных в поисковой строке компонента BaseSearchBar.
2. `@changeToggleMy -> function (value)` - Событие изменения переключателя Мои/Все. Значение `true|false`.
3. `@requestTable -> function ()` - Событие компонента quasar'а request таблицы. Срабатывает, когда запускается запрос.
   Имя события поменяно специально, т.к. стандартное событие request возникает, в некоторых случаях, несколько раз
   (например, когда перешли на другую страницу в таблице и поменяли фильтр, когда уменьшается общее число элементов)
4. `@query -> function (value)` - Событие изменения данных в фильтре компонента BaseSearchBar. Переданное значение

```
(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'*)
```

5. `@update -> function ()` - Событие клика по кнопке обновить.
   к серверу.
6. `@update:attributes -> function (value)` - Событие обновления значений атрибутов у компонента поиска BaseSearchBar.
   готово для использования в запросе rsql. Пример полученного значения:

### Слоты

1. Слот для кастомных атрибутов, `sb-${atributeName}`. Для того, чтобы была возможность передать кастомный атрибут
   в фильтр компонента BaseSearchBar, предусмотрен слот, который должен быть следующего вида:

```html
<BaseTable
  :onlyMy.sync="model.onlyMy"
  :showToggleMy="true"
  :useSearch="true"
  :columns="columns"
  :data="solutionsRecords"
  :loading="solutionsLoading"
  :pagination.sync="model.pagination"
  :title="$t('solutions.title')"
  :visible-columns="model.visibleColumns"
  @requestTable="init"
  @update="init"
  @search="search"
  v-model="inputSearch"
  :attributes.sync="attrubutes"
  @query="setQuery"
>
  <template v-slot:bt-attribute-name>
    <div>Содержимое атрибута тут</div>
  </template>
</BaseTable>
```

В указанном примере, в фильтре, для атрибута с полем attribute равным `attribute-name` будет добавлен слот,
если свойство `conditionType` данного объекта атрибута является равным `custom`.

2. `search` - Слот с name - `search` предназначен для использования над таблицей блока с поиском,
   если в props - `useSearch` false.

3. Слот для кастомных ячеек, `body-item-${columnName}`. В отличие от квазаровского `body-cell-${columnName}` кладёт содержимое сразу внутрь td(либо div внутри grid).
