В рамках тестового задания предлагается реализовать на языке JavaScript с использованием чистых Web-components без фреймворков компонент отображения и редактирования древовидных структур.
Данные представлены в следующем формате:
ключевым элементом формата данных является структура Item { label: “label”, icon:”icon_id”, type: “object”, children:[] // array of items }
Компонент должен принимать на вход массив элементов типа Item.
Интерфейс должен быть сверстан в соответствии с макетом. Ссылка на файл макета: https://disk.yandex.ru/d/E8BJ87FpLZa8og
Отображаемое дерево состоит из узлов трех типов: Object, File, Folder. Все операции редактирования должны приводить к результату, удовлетворяющему следующим требованиям: сущность типа File может находиться только на самом верхнем уровне, сущности типа Object и Folder могут находиться внутри сущностей любых типов но не на самом верхнем уровне. Глубина вложенности элементов друг в друга неограничена.
Необходимо реализовать следующий функционал:
-
Просмотр данных - отрисовка дерева произвольного уровня вложенности, возможность скрыть и развернуть отдельные ветки
-
Добавление новых записей через клик по кнопке
, и выбор сущности в выпадающем меню 
. -
Изменение - редактирование имени через двойной клик по элементу дерева, перемещение записи с использованием drag & drop
-
Автоматический фокус на элементе, имя которого удовлетворяет запросу в поле поиска
, при нажатии клавиши enter. Повторное нажатие на Enter должно переводить фокус к следующему найденному элементу. -
Удаление выбранной записи с помощью кнопки
. -
Сохранение данных в localstorage при помощи кнопки
. -
Автоматическая загрузка данных из localstorage при открытии страницы с компонентом.
-
Кроссбраузерность, адаптивность
