Тестовое задание на вакансию front-end developer junior/middle

Обязательно использовать фрэймворк angular последней версии, язык программирования TypeScript.

Тестовое задание делится на две части:

1. Задание для junior (с пункта 1 до пунтка 5) на понимание базовых частей фрэймворка angular: компоненты, роутинг, модули, запросы на сервер.
2. В задание для middle ( с пункта 6 до пункта 7) необходимо реализовать функционал для ленивой подгрузки, отобразить элементы на яндекс карте, реализовать кэширование запросов.

Нормальный срок выполнения всего тестового задания, с учётом занятости кандидата 7 дней, если срок превышен, то на собеседовании нужно рассказать почему.

# Endpoint

Endpoint для получения списка компаний https://random-data-api.com/api/company/random_company?size=100 , где size кол-во компаний в запросе

# Для junior

1. Реализовать роутинг приложения. В приложении должен быть layout - приложения (компонента layout-component). А также 3 роута:

   • /list или / , который ведёт на компоненту company-list, список компаний.
   • /detail/:id , который ведёт на компоненту company-detail, детальную страницу о компании.
   • /map , который ведёт на компоненту company-yandex-map, отображение компаний на карте.

2. Реализовать страницу со списком компаний.

   • Список должен состоять как минимум из 2-х компонент:
     • company-item, в которой отображаются данные: логотип (logo), название компании (в формате: suffix "business_name"), вид деятельности (industry) и тип (type).
     • company-list, в которой содержится массив company-item.
   • Сервис, для запросов на endpoint.
   • В html отображается массив company-item.

3. Реализовать страницу с подробной информации о конкретной компании (компонента company-detail).

   • Переход на данную страницу происходит при клике на компанию в списке (компонента company-item).
   • В company-detail должны быть следующие данные: логотип (logo), название компании (в формате: suffix "business_name"), вид деятельности (industry), слоган (catch_phrase), контактный номер телефона (phone_number), адрес (full_address).

4. На странице со списком компаний (компонента company-list) реализовать функционал сортировки.

   • Реализовать компоненту company-sort, которая генерирует эвент для сортировки списка компаний.
   • Сортировать по: названию, типу, виду деятельности.
   • При клике по сорт-полю, должен автоматически перестраиваться список.
   • Связать сортировку с компонентой company-list через Input/Output или через сервис.

5. На страницу со списком компаний (компонента company-list) добавить функционал фильтрации.

   • Реализовать компоненту company-filter, которая генерирует эвент для фильтрации списка компаний.
   • Контролы в фильтре: text-box поиск по названию, select-box с типами компаний, select-box с видами деятельности.
   • Это должна быть форма, реализованная с помощью модуля ReactiveForm.
   • При изменение поля, должна автоматически происходить фильтрация списка компаний, компоненты company-list.
   • Связать фильтрацию с компонентой company-list через Input/Output или через сервис.

# Для middle

6. На странице со списком реализовать ленивую подгрузку компаний (запрашивать новые данные тем же запросом).

   • Как должна работать ленивая подгрузка: Есть endpoint, который отдаёт рандомную коллекцию компаний (максимум 100 шт.). Должно быть две рабочих коллекции. Первая коллекция-HTML, вторая коллекция-TS. При инициализации списка, подгружается 100 шт. в коллекцию-TS, в коллекции-HTML отображается только первые 50 элементов из коллекции-TS. При скроле вниз в конец коллекции-HTML добавляются следующие 30шт. из коллекции-TS, по мере прокрутки первые элементы коллекции-HTML удаляются. Аналогично, когда движение вверх, в начало коллекции-HTML добавляется 30 шт. из коллекции-TS, по мере прокрутки последние элекменты коллекции-HTML удаляются. Когда доходим до конца списка (до 100-го элемента коллекции-TS), делать новый запрос (использовать тот же самый endpoint, догружать 100 шт.). Это примерный сценарий, в приложении должно всё работать плавно и не цеплять человеческий глаз.

7. Вверху страницы (в компоненте layout-component) добавить кнопку "Показать на карте", при нажатии будет происходить переход на страницу с картой.

   • Реализовать отображение компаний на Яндекс карте (используя параметры latitude и longitude).
   • При клике по компании отрывать Balloon с подробной информацией о компании.
   • Повторно подгружать коллекцию не нужно, реализовать кэш, который будет сохранять результат запроса. Должна быть возможность настроить куда сохранять кэш (список компаний). У пользователя должно быть два варианта: в память приложения и в LocalStorage браузера.
   • справа от карты реализовать список всех компаний с прокруткой, при клике по компании центровать яндекс карту с выбранным балуном.

# Примерные макеты

Список компаний

Детайльная информация о компании

Яндекс карта

# Требования к вёрстке (по желанию)

- Вёрстка должна быть семантичная
- Стиль написания классов должен быть по методологии бэм
- Стили должны быть изолированые для каждой компоненты
- Нельзя использовать фреймворки для вёрстки типа bootstrap
- Не допускается использование внешних отступов внутри компонент
- Стили должны быть в формате .scss
- Не допускается использование глобальны классов
- Запрещено использовать !important