Редактор уставок

О проекте

Сервис, который позволяет:

Создавать уставки (границы норм по свойствам);
Контролировать превышение уставок: отклонение от нормы — цветовая индикация, сигнализация;
Квитировать события по отклонениям.

Моя роль

Проработка и отрисовка страниц сервиса;
Разработка интуитивно понятной навигации, чтобы пользователи могли легко просматривать и редактировать данные;
Обеспечение корректного отображения интерфейса на десктопных экранах различной ширины: от 1280px до 1920px по ширине;
Передача макетов разработчикам;
Ревью верстки.

Проблемы и решения

Проблема

Необходима возможность быстро вносить изменения значений границ.

Решение

Возможность редактирования значений границ прямо в ячейках таблицы(инлайн редактирование) с возможностью сохранения и отмены.

Проблема

Все свойства хранятся в системе в виде многоуровневой иерархии объектов и связанных с ними свойств. Многие объекты и свойства имеют одинаковые названия, соответственно пользователю необходимо видеть не только название свойства, но и путь до него, при этом путь может быть длинным, а в таблице не так много свободного места.
Нужно компактно разместить путь до свойства избегая горизонтальной прокрутки таблицы или высоких строк.

Решение

Вся строка таблицы – это путь до свойства, который обрезается слева, если он не помещается целиком в строку. По ховеру на обрезанный путь отображается тултип с полным путем. Так же добавлена возможность сворачивания строк со значениями границ и чекбоксами активации контроля.

Проблема

Кроме контролируемого свойства к уставке привязываются 2 технических свойства (они вторичны для пользователя). Так же в будущем возможно добавление еще данных. Но для этих свойств и данных совсем нет места в таблице.

Решение

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

Проблема

Все свойства хранятся в системе в виде многоуровневой иерархии объектов и связанных с ними свойств. Необходимо создать удобный интерфейс поиска и выбора необходимых свойств.

Решение

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