Разместите свой проект бесплатно и начните получать предложения от фрилансеров-исполнителей уже спустя минуты после публикации!

Создать интерфейс управления древовидной структурой (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





  1. ставка скрыта фрилансером
  2.  4 дня 1 500 ₴
    Юрий Никоненко
    2033     51  1   3

    Здравствуйте, Алексей!
    Готов выполнить ваш заказ.

    С уважением, Юрий

    Украина Вольнянск | 19 сентября 2019 |