GN02. Экран и компоненты экрана, фильтрация и группировка, actions

Разбор домашнего задания со звёздочкой

Внимание! Не забудь проверить, что в таблице Расходы в столбце Связь с категорией галочка Match Multiple НЕ стоит.

Итак, в качестве домашнего задания со звёздочкой нужно было связать таблицу Категории с таблицей расходов так, чтобы в каждую категорию попало несколько расходов.

Связываем категории с расходами

Идём в таблицу Категории, нажимаем +, чтобы создать новую колонку.
Называем столбец Связь с расходами и настраиваем его:

✅ Match multiple — галочка в настройках поля типа Relation, активация которой сообщает Glide, что нужно искать множественные сообщения (ставится, если конкретная запись таблицы может быть связана сразу с несколькими записями в другой таблице).

1. Знакомимся с редактором интерфейса — Layout

Все это время мы работали с данными в разделе Data, а теперь можем перейти в среднюю вкладку — Layout.

В центре есть рамка телефона (превью приложения), справа — панель настроек. Эта панель изменяется в зависимости от того, что именно вы настраиваете. Это “что именно” находится на левой стороне экрана.

Слева в меню Navigation находятся разделы приложения: Things, Categories, Back office. Это то, что Glide сделал по умолчанию.

В Menu находится все то, что мы захотим поместить в меню-гамбургер.

Панель Components содержит все элементы интерфейса, которые мы можем добавить на наш экран. Новые компоненты добавляются через кнопку +.

2. Отображаем расходы на экране: базовая настройка

Приступаем к сборке экрана Расходы. Вот как он должен выглядеть:

Удаляем ненужные экраны

Удалим экраны, которые Glide создал для автоматически в меню Navigation: выделяем экран правой кнопкой мыши и выбираем Delete.

Создаём новый экран и привязываем его к базе данных

Нажимаем + в разделе Navigation на панели слева и выбираем Custom screen.
На панели справа на вкладке General в поле Source выбираем таблицу Расходы.

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

3. В поле настроек Label пишем название экрана — Расходы.

Настраиваем отображение расходов

На панели слева в разделе Components выбираем Collection Расходы — эту коллекцию Glide создал автоматически на основе таблицы, которую мы добавили как источник. Видим, что меню справа видоизменилось.
В поле настроек Title название автоматически определилось верно.
Раздел Style отвечает за то, как данные будут отображаться — Card (карточки), Grid (сетки), List (список), Table (таблицы), Checklist (чек-лист). Выбираем List.
Секция Items data — данные каждого индивидуального айтема (элемента коллекции):

Title — это выделенное жирным название, выведем сюда данные из столбца Сумма;
Description — подпись серым цветом, выведем сюда данные из столбца Дата и время;
Meta — подпись сверху (здесь не представлена), оставляем пустой;
Image — изображение, которое появится слева от списка. Сюда нам нужно вывести иконку категории, но при нажатии на три точки в строке Image мы видим, что в списке доступных опций такого столбца нет. Дело в том, что иконки у нас находятся в таблице Категории, а экран мы привязали к таблице расходов.

3. Выводим на экран картинки категорий

Отображаем иконки категорий в таблице Расходы

Нам нужно сделать иконки динамическими — то есть, в зависимости от того, к какой категории относится расход, ту иконку мы хотим показывать в строке с этим расходом. Связь (relation) у нас уже есть, мы увидим и иконку категории, если наведём курсор мыши на соответствующую ячейку. Осталось перенести её из дополнительной информации на уровень названия категории.

В таблице Расходы создаём новую колонку через +. Называем её Иконка, а в Type выбираем Lookup.

✅ Lookup — это специальная колонка, которая работает через relation и позволяет достать необходимые данные из связанной таблицы.

2. В форме настроек колонки выбираем Связь с категориями — Иконка.

3. И нажимаем Done.

В созданном поле появились иконки категорий.

Показываем иконки на экране

Возвращаемся во вкладку Layout — редактор интерфейсов.
Выделяем Collection на панели слева.
На панели справа в поле Image выбираем Иконка.

Донастраиваем внешний вид коллекции

С разделом Design ты можешь поиграться самостоятельно — он позволяет изменить небольшие детали. Необязательно делать в точности так же, как эксперт.
В разделе Options можно установить лимит на количество айтемов и количество отображаемых айтемов на одной странице — здесь можем поставить 9999, чтобы это был единый список, который можно скроллить.

4. Знакомимся с фильтрацией в Glide и настраиваем её для экрана расходов

Фильтрация в Glide бывает двух видов:

пользовательская (та, на которую может повлиять пользователь);
системная (та, которую мы выставляем заранее и пользователь не может на неё повлиять).

Обе эти настройки находятся в коллекциях во вкладке Options на панели справа.

Раздел Filter Data — это системная фильтрация.

Однако, как мы помним, в нашем примере пользователь сам может выбирать, по какому признаку фильтровать расходы. За это отвечает строка Show filter. Если мы нажмем на неё, то заметим, что среди возможных вариантов фильтра нет возможности выбрать название категорий, а это нам необходимо для удобства пользователей.

Выводим в таблицу расходов название категорий

Как ты понимаешь, нам снова нужна функция Lookup.

Идём в таблицу Расходов, выделяем столбец Иконка и нажимаем Duplicate, чтобы скопировать его.
Переименовываем дубликат в Название категории, далее выбираем Связь с категориями — Название.

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

Настраиваем фильтр расходов по категориям на экране

Возвращаемся в редактор интерфейсов, выделяем коллекцию и на панели справа во вкладке Options в поле Show filter и выбираем Название категории.

5. Группируем расходы по дате

Таблица с токенами для форматирования даты

Во вкладке Options есть ещё одна настройка — Group by.

✅ Group by — настройка, позволяющая сгруппировать данные на экране.

Выбираем в этом поле Название категории.

В результате расходы на экране группируются по категориям:

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

Разделяем дату и время в таблице Расходы

В редакторе данных открываем таблицу Расходы. Колонка Дата и время не выделена зеленым цветом, что означает, что она статическая. Но мы можем разделить ее на две колонки — отдельно Дата и отдельно Время.
Создаём новую колонку, называем её Дата. В поле Type выбираем Other, спускаемся ниже — Date & Time — Format Date.

✅ Format Date — плагин, который позволяет отформатировать отображение даты и времени. Это плагин работает на на библиотеке работы с данными luxon. В документации к этой библиотеке можно находить обозначения нужных тебе форматов.

3. В открывшейся форме настроек столбца, в поле Date установим столбец Дата и время, в поле Format напишем DD (это обозначение формата даты, который нам необходим).

Теперь у нас появилась динамическая колонка с информацией о дате. Мы можем перетащить колонку ближе к Дата и время для удобства.

4. Дублируем колонку, называем ее Время и меняем формат на T.

Группируем расходы по дате на экране расходов

Возвращаемся в редактор интерфейсов, на вкладке Options на панели справа в поле Group by выбираем Дата.

Теперь расходы сгруппированы по дате:

Убираем дату из карточки расхода

Переходим на вкладку General и в разделе Items data в поле Description выбираем Время.

6. Настраиваем первый action — кнопку Добавить расход

Сортируем расходы — от новых к старым

Идём на вкладку Options, в поле Sort Data выбираем Дата и время — Z-A.

Создаём и настраиваем кнопку Добавить расход

На панели справа переходим во вкладку Actions. Нажимаем Enable Advanced actions(переход к расширенным настройкам).
В секции TITLE BAR ACTION (это action, который находится рядом с заголовком коллекции). Если у тебя его нет, в этом разделе нужно нажать кнопку Add primary action. Нажав на появившееся поле, мы можем настроить эту кнопку:

Title (название кнопки, то, что будет на ней написано) — Добавить.
Icon (иконка, которая будет отображаться рядом с названием) — выбираем +.

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

поле выбора действия, которое будет происходить при нажатии на кнопку — выбираем Show form screen (показывать форму), так как при нажатии на кнопку нам нужно показать экран добавления нового расхода.

✅ Формы — особый вид экранов в Glide. Они также привязаны к источнику данных, но не просто отображают данные из таблицы, но также позволяют редактировать их или добавлять новые.

Target — формат появления формы при нажатии на кнопку, выбираем Slide in — форма будет появляться виде шторки снизу (при выборе Current будет появляться справа налево и будет выглядеть, как полный экран).

Actions мы можем настраивать не только на кнопки, но и практически к любым компонентам экрана.

Настраиваем другие действия для коллекции

В разделе ITEM CLICK настраивается действие, которое происходит при клике на конкретный элемент коллекции. По умолчанию здесь выставлено Show detail screen for this item (показать детальный экран конкретной записи). То есть при клике на элемент коллекции будет открываться экран, на котором отображаются данные не всей таблицы, а данные, принадлежащие конкретной записи. Оставляем эти настройки.
В секции COLLECTION ITEM ACTIONS настраиваются действия, которые находятся под тремя точками рядом с элементом коллекции. Здесь мы пока удаляем все автоматически созданные actions.

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

Словарь

Match multiple — галочка в настройках поля типа Relation, активация которой сообщает Glide, что нужно искать множественные сообщения (ставится, если конкретная запись таблицы может быть связана сразу с несколькими записями в другой таблице).

Lookup — это специальная колонка, которая работает через relation и позволяет достать необходимые данные из связанной таблицы.

Format Date — плагин, который позволяет отформатировать отображение даты и времени. Это плагин работает на на библиотеке работы с данными luxon. В документации к этой библиотеке можно находить обозначения нужных тебе форматов.

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

Дополнительные материалы

Таблица с токенами для форматирования даты

Связанные ссылки: