Инлайн-редактирование таблиц
Эта функция, которая позволяет удобно и быстро редактировать содержимое ячеек таблицы непосредственно на странице, без необходимости открывать отдельное окно для редактирования.
Стоит отметить, что поднимать на редактирование всю строку недопустимо так как это приводит к неочевидному UX и как следствие большему количеству ошибок со стороны пользователя
Критерии использования
Инлайн редактирование может быть применено к ячейке таблицы, если:
- Между данными нет зависимости. То есть, данные в этой ячейке не зависят от данных в другой ячейке и наоборот.
- Информация не требует сложного форматирования. Например, применять инлайн-редактирование к ячейке, в которую данные вводятся через
textarea
, не рекомендуется. Поскольку все данные не уберутся корректно в ячейку таблицы. - Данные необходимо часто редактировать. Инлайн-редактирование стоит применять только в тех случаях, когда это значительно ускоряет работу. Особенно, если форма редактирования содержит много (более 10) атрибутов, а редактированию, в основном, подвергаются 1-2.
- Сценарии использования в подавляющем большинстве случаев не требуют поднятия отдельной формы - но не обязательно отменяют ее открытие
Не давать редактировать поле если оно не редактирвуется в форме ввода / редактирования
Инлайн-редактирование в интерфейсе
Механика взаимодействия с инлайн редактированием в интерфейсе следующая.
-
При наведении на строку таблицы, в ячейках которой есть инлайн, пользователь увидит карандаш в конце ячейки, которую можно редактировать:
-
При клике на него поднимется поле ввода. Это может быть
p-input
,p-dropdown
,p-lookup
и другие поля ввода, которые используются в сайдбаре. Важно, что в режиме редактирования кнопки в шапке таблицы переходят в состояниеdisabled
. -
После ввода данных необходимо кликнуть на зеленую иконку подтверждения, новые данные сохранятся. В случае, если вы хотите отменить ввод данных, необходимо нажать на красную иконку, она закроет режим инлайн-редактирования.
Валидация
Важно отметить, что в режиме инлайн редактирования поддерживается валидация. В случае неверно введенных данных вы увидите в правом углу экрана сообщение p-toast
с классом Error
(Ошибка), который скажет вам о том, что вы неверно ввели данные.
Само поле ввода подсветится красным цветом.
Наличие сайдбара
Стоит отметить, что наличие инлайн редактирование не отменяет присутствие в таблице формы/сайдбара добавления/редактирования, поскольку инлайн применяется только для некоторых ячеек.
Утверждается в рамках дизайн-спринта с обоснованием
Важно понимать, что просто так использовать инлайн-редактирование нельзя. Ваш проект должен четко отвечать критериям, описанным выше. Решение о применении подхода утверждается в рамках дизайн-спринта с обоснованием.