Создать интерфейс управления древовидной структурой (HTML + JS)

Задача: создать интерфейс управления древовидной структурой для сервиса выдачи ссылок на QR коды (FrontEnd + описание для разработчика Backend-a)

https://docs.google.com/document/d/1OrHSKxthmW-2rr9nCCK4HHgeJ-W5wErZ0JNcJcDndis/edit 

Ниже по порядку приведены и описаны элементы:

Кнопка [Add QR] - открывает Popup1

Кнопка [Generate QRs] - открывает Popup2

Кнопка [Add Category] - открывает Popup3

Поле [Search] - Поиск (скрывает элементы дерева, которые не соответствуют поиску. С auto-complete на базе существующих имен элементов).

Tags input c auto-complete на базе статусов (free, used) и имен категорий и подкатегорий. По-умолчанию стоит free. [Filter]

Кнопка Удалить [X] - активна если есть элементы в дереве с отмеченными чекбоксами для массового удаления

Кнопка Вернуть назад изменения дерева в текущей сессии (символ назад по часовой стрелке)

Кнопка Повторить изменения изменения дерева в текущей сессии (символ назад по часовой стрелке)

Кнопка сохранить изменения [SAVE ALL] (активна только если были изменения)

• Категория 1 [X] (общее кол-во элементов) (кол-во элементов с статусом used) (с статусом free)

  • Подкатегория 1.1

[чекбокс] QR 1 (символ копирования (уникальной ссылки) в буфер обмена) (X - удаление элемента)

[ ] QR 2 [c] [X]

• Категория 2 [X]

[ ] QR 3 [c] [X]

• Подкатегория 2.1

[ ] QR 4 [c] [X]

При даблклике на категории - открывается режим редактирования. Завершение по ентер или смене фокуса.

При клике на элемент отображаем Popup4

Popup1

Заголовок: Add QR Code

Name (*)

Category (селект с созданными категориями)

Description (textarea)

[Add] [Close]

Popup1

Заголовок: Generate QR Codes

Count (Количество) (*)

Category (селект с созданными категориями)

Name: QR {{count}} - добавляет рядом с именем номер при создании (QR1, QR2)

Description (textarea): Text {{count}}

[Generate] [Close]

Popup3

Заголовок: Add Category

Category name (*)

Parent Category (в таких селектах категории должны быть выстроены в существующей иерархии дерева):.

Категория 1

   Категория 2

   Категория 3

Тут также с auto-complete желательно

[Add] [Close]

Popup4

Заголовок: Edit QR Code

Status: select (free, used)

Name (*)

Category (select)

Description

Uniq qr code: Уникальный код (нельзя редактировать)

url: Уникальная ссылка (по клику копируется в буфер с соответствующей подсказкой Copied. В дереве тоже нужно чтобы показывалась подсказка после копирования в буфер)

Date created

---Далее элементы которые доступны только если не пусты при статусе used---

Date used

First name

Last name

user id

phone

email

[Save] [Close]

После сохранения в попапе обновляем дерево. Глобальное сохранение только но нажатии кнопки SAVE ALL (над деревом)

Требования:

• Bootstrap 4

• Подробные комментарии к коду на русском

• Валидный код без ошибок

• Данные дерева отправляем скрипту save.php в виде {“user_id”:”12312312312”, ”tree”:”дерево в json”}

user_id - уникальный ид пользователя в админке

После сохранения принимаем от скрипта ответ в виде {status:ok} или {error: error description} выводя его в попап. В случае успешного сохранения показываем анимированную галочку посреди экрана.

Вот что-то похожее: https://www.syncfusion.com/javascript-ui-controls/js-treeview