Страница участия в тендере
В июле я разрабатывал страницу участия в тендере для проверки гипотезы в дизайне. В продакшн в текущем виде не пошла, ушла на переделку. Но мне есть, что о ней рассказать
Тендеры помогают компании что‑то купить и получить скидки от поставщиков. Организатор (грузополучатель) создаёт торги, прописывает требования, а участник (поставщик) — предлагает товар и составляет карточку. Чтобы тендер проходил быстрее, я сверстал и запрограммировал страницу участия в торгах.
Поставщик изменяет позиции тендера на странице, рассказывая, насколько его предложение подходит организатору.
По умолчанию позиции отсортированы по грузополучателям:
Внутри каждой секции позиции отсортированы по срокам, а предложения в позиции — по номеру.
Позиция состоит из предложений. Чтобы не запутаться, какое из них редактируется, текущее предложение подсвечивается бежевым.
Оценить, насколько предложение соответствует требованиям получателя, помогают теги. Чем меньше красных и жёлтых тегов, тем больше подходит предложение.
Если параметр отсутствует, тег окрашивается в красный. Если заполнен не до конца (2 чекбокса из 3) — жёлтым, полностью — зелёным.
Теги динамические и создаются организатором. Я впервые попробовал генерировать формы по неизвестной заранее структуре. Придумал, как разделить теги по типам: чекбоксы, радио‑кнопки, поля, обязательные поля и т. д. Написал генератор и парсер для них.
Изначально параметры предложений заполнены так же, как указал организатор. При изменении названия или документов появляется тег «Альтернатива».
Если изменить валюту, то сумма пересчитается по приблизительному курсу в рубли. Если сумма большая, то она сокращается до значащего порядка: триллионы, миллиарды.
Условия оплаты повторяют условия организатора. Если изменить их, то поля оплаты будут появляться и исчезать так, чтобы сумма составила 100%.
Есть параметры, которые менять нельзя. Здесь — это шаг цены и цвет мешка.
При сортировке по позициям у каждого предложения появляется адрес получателя, кому оно предназначено. А под названием позиции — теги с обязательными параметрами.
Поиск мы хотели сделать «прилипающим» к верху страницы, но это оказалось слишком сложным, и пришлось пофлексить. Чтобы напоминать, что на экране не все позиции, а только поисковая выдача, в левом верхнем углу позиции выводим красную иконку лупы.
Описание позиции выводится в попапе. Меня предупредили, что внутри может оказаться что угодно: текст, картинки, ХТМЛ, таблицы. Я обнулил стили и приблизил их к стилю сайта.
В итоге, на разработку ушло 2 недели, за которые я научился:
- работать с Редаксом;
- оптимизировать Реакт‑компоненты;
- работать с динамическими данными;
- упрощать вложенные структуры данных;
- настраивать Вебпак
:–) - применять нормализацию БД.