Техническое задание:

Средствами Vue.js реализуйте функционал для отображения превью списка фотографий.

Макет

Приложение состоит из одной страницы с попапом в центре, в котором отображается список фотографий. Размер попапа имеет фиксированную высоту. Ячейки с названиями фото выводятся внутри попапа в 4 равные колонки. Если высота колонки больше высоты попапа - следует реализовать внутренний скролл.

ПРИМЕР реализации со скроллом

Реализация в 2 этапа

1 этап

Необходимо вывести список фотографий на странице в соответствии с макетом. По-умолчанию список фото выводится в алфавитном порядке. Все названия начинающиеся с одинаковой буквы формируются в блоки, где первым элементом является первая буква. Не допускается разрыв блока по разным колонкам.

Каждый элемент списка должен содержать миниатюру изображения, название файла, символ добавления в избранное или символ удаления из избранного в зависимости от текущего состояния.

####2 этап В header попапа отображаются 2 названия фильтров

• “В алфавитном порядке”
• “Избранное"

При выбранном фильтре “В алфавитном порядке” - в попапе отображается список фотографий объединенных в блоки по альбомам. Первый элемент блока - название альбома. Блоки с альбомами выводятся по алфавиту.

При выбранном фильтре “Избранное” - в попапе отображается список фотографий, добавленных в избранное без группировки.

Списки фото, а также их миниатюры доступны тут. Для удобства использования список следует обрезать до 100 штук.

Требования к функционалу:

• Все действия на сайте должны происходить без перезагрузки страницы.
• После перезагрузки страницы состояние списка должно сохраняться.

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

• В качестве языка разработки используется JavaScript библиотека Vue.js;
• В качестве препроцессора SCSS;
• Верстка должна быть выполнена в соответствии с данным шаблоном. Без использования UI библиотек;
• Адаптивность не обязательна, но приветствуется;
• Логика приложения должна быть разбита на разумное количество самодостаточных Vue-компонентов;
• Код должен соответствовать code style декларированному в соответствующих файлах (.eslintrc.js и stylelint.config.js)

Тестовое задание должно быть представлено в следующем виде:

• Ссылка на публичный репозиторий (GitHub, BitBucket, GitLab) с исходным кодом.
• Ссылка на сайт для тестирования функционала будет плюсом.

Особое внимание стоит обратить на следующие моменты:

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