Интерфейс админки на React и Ant.Design

75 000 руб. за проект
21 февраля 2020, 15:34 • 24 отклика • 135 просмотров
Задача кратко: сделать часть интерфейсов для админки на React, используя UI библиотеку Ant.Design (https://ant.design/, возможно надо заходить через VPN).

Задача подробнее

Необходимо сделать часть интерфейсов админки для онлайн СМИ. С общей задачей можно ознакомиться в ТЗ, однако обратите внимание, в рамках текущего задания речь идёт только о части интерфейсов админки, описанных ниже. Макеты дизайна публичной части покажем для полного понимания задачи выбранному разработчику.

Для мокирования HTTP-запросов используем fetch-mock (веб-сервисов работы с данными ещё нет). Если решите использовать state management — используем Mobx.

Верхнее меню админки — Материалы, Главная, Редактор, Дела, Аналитика, Рассылки, Настройки.

Вкладки Материалы и Редактор не делаем (они уже в процессе производства), остальное делаем.

Вкладка Главная

Здесь выбирается материалы для публикации на главной странице сайта (макет главной покажем для более полного понимания):

  • главный материал (главная статья)
  • набор материалов для публикации на главной в списке (с drag-and-drop, чтобы можно было менять порядок) + вставка блока подписки в произвольное место между статьями. Текст блока подписки нигде не редактируется, это просто фиксированный блок.
  • набор дел из картотеки (с drag-and-drop, чтобы можно было менять порядок)
  • набор дел из мастерской (с drag-and-drop, чтобы можно было менять порядок)

Вкладка Дела

Здесь выводятся и создаются дела (некоторые статьи могут статьновиться частью дела).

Поля по каждому делу:

  • Название
  • Обновлено (дата обновления материала, задаётся вручную)
  • Краткое описание (текстовый редактор Quilljs, он уже используется в проекте — просто базовое форматирование текста bold, italic, underline, сссылки)
  • Фото дела (одно заглавное фото, которое будет отображено на сайте)
  • Хронология — список событий по делу. По каждому событию: дата, опциональный подзаголовок, описание, опциональная ссылка на статью)
  • Фигуранты — люди, причастные к делу, выбираются вручную из списка сохранённых в системе фигурантов или создаются здесь же. По каждому фигуранту — имя, фамилия, фото, текстовое описание
Вкладка Аналитика

Таблица с серверной сортировкой по каждому столбцу. Столбцы:

  • Заголовок (название статьи)
  • Просмотров (количество просмостров статьи)
  • Жертвователей (количество людей, задонативших с этой статьи)
  • Денег (сколько донатов принесла статья)
  • Переходов на оплату (количество переходов на оплату со статьи)
  • Оплат (количество оплат со статьи)
Вкладка Рассылки

В системе будет 6 автоматических типов рассылки (описано в ТЗ на 17 стр), для них надо иметь возможность редактировать шаблоны. Соответственно это таблица из 6 строк с названиями шаблонов и возможностью перейти на редактирование каждого шаблона (subject письма и содержимое письма). Поле содержимое письма — обычный textarea (не Quilljs).

И будут транзакционные рассылки (выполняемые вручную, аналогично 17 стр ТЗ:

  • общая рассылка по всем подписавшимся на сайте,
  • рассылка для подписавшихся на материалы конкретного дела,
  • рассылка для подписавшихся на материалы конкретного автора,
  • рассылка для подписавшихся на материалы мастерской),

По ним текст письма и Subject каждый раз задаётся новый. Работа с транзакционными рассылками тоже здесь — создание рассылки, ввод темы письма и содержимого письма (тоже просто textarea, не Quilljs), планируемое время доставки и кнопка Создать рассылку. Для рассылки на подписавшихся на дело или автора соответственно должно выбираться дело или автор, по которому делаем рассылку.

Настройки

Здесь создаются пользователи в системе. Это таблица, колонки:

  • Имя (выводится имя и фамилия)
  • Email
  • Роль (администратор, автор, менеджер рассылки — у 1 аккаунта может быть несколько ролей, то есть 1 аккаунт может быть и администратором, и автором, и менеджером рассылки)
Неактивные юзеры выводятся в таблице серым цветом.

И над таблицей кнопка Создать пользователя. При переходе на юзера по клику в таблице — редактирование его данных.

Поля по авторам:

  • Имя
  • Фамилия
  • Фото
  • Описание
  • Публичный автор (checkbox)
  • Gmail почта
  • Активный (checkbox)
Поля по администраторам и менеджерам рассылки:

  • Имя
  • Фамилия
  • Gmail почта
  • Роль (администратор или менеджер рассылки)
  • Активный (checkbox)
В тексте отклика обязательно напишите слово прочёл, чтобы подтвердить, что вы а) умеете это делать и б) сделали это, прежде чем откликаться. Пожалуйста, пишите сразу по делу — вопросы, предложения по срокам и стоимости, ваш опыт и работы, которые можете показать сразу или в ходе приватного Skype диалога, который будет перед началом работ. Бюджет можем обсудить.