#Глава 3. Сборка страниц — от пустой страницы к работающей

В прошлой главе мы собрали скелет таблиц, но данные существуют только «на бэкенде» — пользователь их не видит. В этой главе вытащим данные на сцену: создадим блок таблицы для отображения заявок, настроим колонки, сортировку, фильтрацию и пагинацию, превратив страницу в полноценный список заявок.

#3.1 Что такое блок (Block)

В NocoBase блок — это «кубик» страницы. Хотите показать таблицу? Поставьте блок таблицы. Хотите форму — поставьте блок формы. На странице можно совмещать сразу несколько блоков и менять их раскладку перетаскиванием.

Распространённые типы блоков:

Метафора: блок = кубик. Из них и соберём страницу управления заявками.

#3.2 Добавляем меню и страницу

Сначала создадим вход в раздел «Управление заявками».

1. Включите переключатель UI Editor в правом верхнем углу — войдёте в режим конфигурации (вокруг страницы появятся оранжевые рамки).
2. Подведите курсор к кнопке «Add menu item» в верхней панели и выберите «Add group», назовите её «Управление заявками».

3. В верхней панели сразу появится «Управление заявками». Нажмите, и слева раскроется меню группы.
4. В левом меню нажмите оранжевую кнопку «Add menu item» → «Modern page (v2)» и добавьте две дочерние страницы:
   • Список заявок — все заявки
   • Категории заявок — управление категориями

Внимание: при добавлении страницы будут опции «Old page (v1)» и «Modern page (v2)»; в этом учебнике используем только v2.

#3.3 Добавляем блок таблицы

Зайдём на страницу «Список заявок» и добавим блок таблицы:

1. На пустой странице нажмите «Add block».
2. Выберите Data block → Table.
3. В появившемся списке таблиц выберите «Заявки» (это таблица tickets из прошлой главы).

Блок таблицы добавлен — на странице появится пустая таблица.

С пустой таблицей сложно отлаживать — добавим быстро кнопку «Создать», чтобы внести тестовые данные:

1. В правом верхнем углу таблицы нажмите «Configure actions» и отметьте «Add new».

2. Нажмите кнопку «Add new», во всплывающем окне выберите Add block → Form (Add New) → Current collection.

3. Во всплывающем окне нажмите «Configure fields», отметьте «Заголовок», «Статус», «Приоритет» и т. д.; нажмите «Configure actions» и включите кнопку «Submit».

4. Заполните несколько произвольных заявок — содержимое появится в таблице.

Подробную настройку формы (связные правила, формы редактирования, всплывающие окна с деталями) разберём в Главе 4. Здесь достаточно ввода данных.

#3.4 Настраиваем колонки

По умолчанию таблица не показывает все поля — нужно вручную выбрать колонки:

1. В правой части шапки таблицы нажмите «Fields».
2. Отметьте нужные поля:
   • Заголовок — суть заявки сразу на виду
   • Статус — текущий ход работы
   • Приоритет — срочность
   • Категория — связное поле, показывает имя категории
   • Заявитель — кто подал заявку
   • Обработчик — кто отвечает
3. Ненужные поля (ID, дата создания) не отмечайте — таблица останется чистой.

Лайфхак: порядок полей меняется перетаскиванием. Поставьте «Заголовок» и «Статус» в начало — ключевая информация будет читаться с одного взгляда.

#Связное поле показывает ID

После выбора «Категория» в таблице будет видно ID (число), а не имя. Это потому, что у связного поля в качестве заголовка по умолчанию используется ID. Два варианта решения:

Способ 1: изменить в настройках колонки таблицы (только для текущей таблицы)

В настройках колонки «Категория» найдите «Title field» и поменяйте ID на Название. Это повлияет только на текущий блок.

Способ 2: изменить в источнике данных (глобально, рекомендуется)

Перейдите в Settings → Data sources → Collection → таблица категорий и поменяйте «Title field» на Название. Тогда везде, где есть ссылка на категории, по умолчанию будет имя — раз настроили и забыли. После изменения на странице нужно заново добавить поле, чтобы изменение применилось.

#3.5 Добавляем фильтр и сортировку

Когда заявок много, нужно быстро находить нужные. NocoBase предлагает несколько способов; начнём с самого распространённого — блока формы фильтра.

#Добавляем форму фильтра

1. На странице списка заявок нажмите «Add block» → Filter block → Filter Form.
2. На странице v2 не надо выбирать таблицу — форма фильтра добавится сразу.
3. В форме фильтра нажмите «Fields» — отобразится список всех фильтруемых блоков на странице, например Table: Заявки #c48b (после имени идёт UID блока для отличия нескольких блоков одной таблицы).

4. При наведении на имя блока раскроется список фильтруемых полей. Кликните по полю, чтобы добавить его как условие фильтра: Статус, Приоритет, Категория.

5. После добавления, как только пользователь введёт условие в форме фильтра, таблица обновится автоматически.

#Поиск по нескольким полям

Что, если хочется одним поисковым полем искать по нескольким полям сразу?

В правом верхнем углу поля поиска есть параметр «Connect fields». Раскрывая его, Вы увидите список доступных для связного поиска полей в каждом блоке — по умолчанию подключён только «Заголовок».

Можно добавить ещё, например Описание, тогда при поиске будут проверяться оба поля.

И даже фильтровать по полю связного объекта — выберите «Категория» и в подменю отметьте «Название категории», чтобы поиск шёл и по имени категории.

Connect fields — мощная штука: работает между блоками и полями. Если на странице несколько блоков данных, поэкспериментируйте!

#Не хочу автоматический фильтр

Если нужно, чтобы фильтр срабатывал по кнопке, в правом нижнем углу формы фильтра нажмите «Actions» и отметьте кнопки «Filter» и «Reset». Тогда пользователь введёт условия и нажмёт «Filter», чтобы запустить фильтрацию.

#Альтернатива: операция фильтра в самой таблице

Кроме отдельного блока формы фильтра, у блока таблицы тоже есть кнопка «Filter». Над таблицей нажмите «Actions» и отметьте «Filter» — на панели таблицы появится кнопка фильтра. Клик откроет панель условий, где пользователь сможет фильтровать данные по полям.

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

Внимание: фильтр в самой таблице не поддерживает поиск по нескольким полям. Для этого используйте блок формы фильтра вместе с «Connect fields».

#Сортировка по умолчанию

Хочется, чтобы свежие заявки были сверху:

1. Нажмите настройки блока таблицы (иконка трёх линий) в правом верхнем углу.
2. Найдите «Set sort rules».
3. Добавьте поле сортировки: Дата создания, направление — Descending.

Так новые заявки всегда наверху — обрабатывать удобнее.

#3.6 Настраиваем строковые операции

Просто список — мало; хочется видеть детали и редактировать заявки.

1. Над колонкой операций нажмите вторую «+».
2. Включите операции: View, Edit, Delete.
3. В каждой строке появятся кнопки «View», «Edit» и «Delete».

При клике «View» откроется выезжающая панель (Drawer) — в ней разместим блок деталей с полной информацией. Подробно настроим его в следующей главе. Клик «Delete» удалит строку.

#3.7 Раскладка страницы

Сейчас на странице форма фильтра и таблица идут друг под другом — это не всегда удобно. NocoBase позволяет менять расположение и раскладку перетаскиванием.

В режиме конфигурации наведите курсор на ручку перетаскивания в левом верхнем углу блока (курсор станет крестообразной стрелкой), удерживайте и тащите.

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

Поместим поля фильтра в одну строку: внутри формы фильтра поля по умолчанию идут вертикально. Перетащите «Приоритет» правее «Статуса», появится вертикальная подсказка-линия — отпустите. Два поля встанут в одну строку и сэкономят место.

Почти все элементы в NocoBase можно перетаскивать — кнопки операций, колонки таблицы, пункты меню и т. д. Экспериментируйте!

#3.8 Настраиваем страницу категорий заявок

Не забываем: в 3.2 мы создали страницу «Категории заявок». Наполним её содержимым. Логика похожа на список заявок — добавление таблицы, выбор полей, настройка операций — повторяться не будем, а покажем одно ключевое отличие.

Помните, что в Главе 2 мы сделали таблицу «Категории заявок» древовидной (с поддержкой иерархии). Чтобы таблица корректно показывала дерево, нужно включить специальный параметр:

1. На странице «Категории заявок» добавьте блок таблицы и выберите таблицу «Категории заявок».
2. Откройте настройки блока таблицы (иконка трёх линий) и включите «Tree table».

После этого таблица будет показывать иерархию с отступами, а не плоский список.

3. Отметьте поля для отображения (название, описание и пр.) и настройте строковые операции (добавление, редактирование, удаление).
4. Совет по раскладке: поместите «Название» в первую колонку, «Действия» — во вторую. Полей у таблицы немного, такая раскладка компактнее.

#Итоги главы

Поздравляем! У нашей системы заявок теперь есть полноценный интерфейс управления:

• понятная структура меню (Управление заявками → Список заявок / Категории заявок);
• блок таблицы для отображения данных заявок;
• форма фильтра для быстрой выборки по статусу, приоритету, категории;
• сортировка по дате создания (сначала новые);
• кнопки операций для просмотра и редактирования;
• древовидная таблица для иерархии категорий.

Проще, чем казалось? Никакого кода — всё через перетаскивание и настройки.

#Анонс следующей главы

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

#Связанные ресурсы

• Обзор блоков — описание всех типов блоков
• Блок таблицы — подробная настройка табличного блока
• Блок фильтра — настройка формы фильтра