Федор Лаврентьев

Нужно сверстать интерфейс внутреннего сервиса для работы с большим реестром, а потом оживить его с помощью JS.

Вся работа с данными происходит на бекенде, на фронтенде нужно лишь отображать фильтры и превью, а также предоставить контролы для экспорта полных данных в другие системы.

Сроки выполнения работы – до недели. Стоимость обсуждается

Ниже фрагмент из ТЗ, полное ТЗ по запросу.



### Этапы работ

Задача разбита на четыре майлстоуна.

* Верстка с примерами всех кейсов
* Работоспособный JS с имитацией ответа бекенда, без декоративных элементов и косметической логики (см. ниже)
* Отладка клиент-серверной логики на настоящем бекенде
* Отладка косметической логики и декоративных элементов

### Общий вид интерфейса

Вверху – строка хедера. Логотип и название. Место под ссылки на другие страницы.

Дальше блок фильтров, фильтры описаны ниже. Фильтров много, их можно отображать один за другим.
Код HTML и JS для фильтров надо организовать так, чтобы было удобно добавлять новые фильтры по мере их разработки.

После фильтров две кнопки – "Предпросмотр" и "Экспорт".
По нажатию на кнопку "Предпросмотр" отправлять AJAX-запрос с фильтрами к бекенду. Пока бекенд не ответил, блокировать фильтры и кнопки так, чтобы параметры запроса не изменялись, и отправить запрос повторно было нельзя. После ответа бекенда заполнить данными ответа таблицу для предпросмотра.
По нажатию на кнопку "Экспорт" отправлять аналогичный AJAX-запрос к бекенду. Пока бекенд не ответил, аналогично блокировать контролы. После ответа отобразить всплювающее окно с форматированным результатом от бекенда.

Дальше таблица для предпросмотра, описана ниже. Не изменяется пользователем. Изначально пустая.

### Технические требования

* Должно получиться одностраничное не перегружаемое SPA.
* Мобильная версия не требуется, только широкоформатный десктоп.
* Кнопочки должны инициировать AJAX-запросы.
* На время ожидания ответа контролы должны блокироваться и не позволять повторную отправку запроса.
* В случае ошибки или таймаута на сервере надо выводить технический алерт, который пользователь сможет скопировать.
* Верстку нужно собрать на Bootstrap, голый HTML, без изысков. В кастомных стилях нет необходимости.
* В качестве JS-движка может использоваться любой популярный фреймворк, однако, код должен быть понятен для программистов без специализации на JS.
* При изменении полей для фильтрации урл должен изменяться так, чтобы при открытии его урла в другом браузере условия фильтра были в точности восстановлены.
* Около всех кнопок и фильтров предусмотреть иконки со всплывающей справкой. Текст справок будет подставлен позже, пока просто заполнить плейсхолдерами.
* Для некоторых полей фильтров предусмотреть client-side саджест, подробнее в описании.
* Для некоторых результатов в таблице предусмотреть спойлеры, подробнее в описании.

### Опциональные элементы

Декоративные элементы и косметическая логика, которые не требуются на втором и третьем этапе:

* Справочные ховеры
* Спойлеры в таблице предпросмотра
* Затемнение неиспользуемых фильтров
* Саджесты (ожидается работа за время, не заметное для человека)
* Динамическое формирование урла и наполнение фильтров из урла