Страница участия в тендере

В июле я разрабатывал страницу участия в тендере для проверки гипотезы в дизайне. В продакшн в текущем виде не пошла, ушла на переделку. Но мне есть, что о ней рассказать :–)

Тендеры помогают компании что‑то купить и получить скидки от поставщиков. Организатор (грузополучатель) создаёт торги, прописывает требования, а участник (поставщик) — предлагает товар и составляет карточку. Чтобы тендер проходил быстрее, я сверстал и запрограммировал страницу участия в торгах.

Поставщик изменяет позиции тендера на странице, рассказывая, насколько его предложение подходит организатору.

По умолчанию позиции отсортированы по грузополучателям:

Страница тендера — 1

Внутри каждой секции позиции отсортированы по срокам, а предложения в позиции — по номеру.

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

Оценить, насколько предложение соответствует требованиям получателя, помогают теги. Чем меньше красных и жёлтых тегов, тем больше подходит предложение.

Если параметр отсутствует, тег окрашивается в красный. Если заполнен не до конца (2 чекбокса из 3) — жёлтым, полностью — зелёным.

Теги динамические и создаются организатором. Я впервые попробовал генерировать формы по неизвестной заранее структуре. Придумал, как разделить теги по типам: чекбоксы, радио‑кнопки, поля, обязательные поля и т. д. Написал генератор и парсер для них.

Изначально параметры предложений заполнены так же, как указал организатор. При изменении названия или документов появляется тег «Альтернатива».

Страница тендера — 2

Если изменить валюту, то сумма пересчитается по приблизительному курсу в рубли. Если сумма большая, то она сокращается до значащего порядка: триллионы, миллиарды.

Условия оплаты повторяют условия организатора. Если изменить их, то поля оплаты будут появляться и исчезать так, чтобы сумма составила 100%.

Страница тендера — 3

Есть параметры, которые менять нельзя. Здесь — это шаг цены и цвет мешка.

Страница тендера — 4

При сортировке по позициям у каждого предложения появляется адрес получателя, кому оно предназначено. А под названием позиции — теги с обязательными параметрами.

Страница тендера — 5

Поиск мы хотели сделать «прилипающим» к верху страницы, но это оказалось слишком сложным, и пришлось пофлексить. Чтобы напоминать, что на экране не все позиции, а только поисковая выдача, в левом верхнем углу позиции выводим красную иконку лупы.

Страница тендера — 6

Описание позиции выводится в попапе. Меня предупредили, что внутри может оказаться что угодно: текст, картинки, ХТМЛ, таблицы. Я обнулил стили и приблизил их к стилю сайта.

Страница тендера — 7

В итоге, на разработку ушло 2 недели, за которые я научился:

  • работать с Редаксом;
  • оптимизировать Реакт‑компоненты;
  • работать с динамическими данными;
  • упрощать вложенные структуры данных;
  • настраивать Вебпак :–)
  • применять нормализацию БД.

Интерактивная рыба

← Сайт Серьёзных игр Промо‑сайт для Карпе Лоушен →