Стандарты проектирования
Инлайн-редактирование таблиц


Инлайн-редактирование таблиц

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

Стоит отметить, что поднимать на редактирование всю строку недопустимо так как это приводит к неочевидному UX и как следствие большему количеству ошибок со стороны пользователя

Критерии использования

Инлайн редактирование может быть применено к ячейке таблицы, если:

  1. Между данными нет зависимости. То есть, данные в этой ячейке не зависят от данных в другой ячейке и наоборот.
  2. Информация не требует сложного форматирования. Например, применять инлайн-редактирование к ячейке, в которую данные вводятся через textarea, не рекомендуется. Поскольку все данные не уберутся корректно в ячейку таблицы.
  3. Данные необходимо часто редактировать. Инлайн-редактирование стоит применять только в тех случаях, когда это значительно ускоряет работу. Особенно, если форма редактирования содержит много (более 10) атрибутов, а редактированию, в основном, подвергаются 1-2.
  4. Сценарии использования в подавляющем большинстве случаев не требуют поднятия отдельной формы - но не обязательно отменяют ее открытие

Не давать редактировать поле если оно не редактирвуется в форме ввода / редактирования

Инлайн-редактирование в интерфейсе

Механика взаимодействия с инлайн редактированием в интерфейсе следующая.

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

  2. При клике на него поднимется поле ввода. Это может быть p-input, p-dropdown, p-lookup и другие поля ввода, которые используются в сайдбаре. Важно, что в режиме редактирования кнопки в шапке таблицы переходят в состояние disabled.

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

Валидация

Важно отметить, что в режиме инлайн редактирования поддерживается валидация. В случае неверно введенных данных вы увидите в правом углу экрана сообщение p-toast с классом Error (Ошибка), который скажет вам о том, что вы неверно ввели данные. Само поле ввода подсветится красным цветом.

Наличие сайдбара

Стоит отметить, что наличие инлайн редактирование не отменяет присутствие в таблице формы/сайдбара добавления/редактирования, поскольку инлайн применяется только для некоторых ячеек.

Утверждается в рамках дизайн-спринта с обоснованием

Важно понимать, что просто так использовать инлайн-редактирование нельзя. Ваш проект должен четко отвечать критериям, описанным выше. Решение о применении подхода утверждается в рамках дизайн-спринта с обоснованием.