/frontend-test-tasks

Задача

Нужно написать приложение, которое рендерит следующие страницы:

  • / — Главная с любым приветствием пользователя
  • /login — Страница авторизации (ввод логина и пароля, переход на страницу регистрации)
  • /profile — Страница профиля (содержит только кнопку выход)
  • /register — Страница регистрации (ввод логина и пароля, переход на страницу авторизации)
  • /list — Страница с табличкой объектов

В шапке реализовать ссылки:

  • / — Главная
  • /login — Вход (неавторизованный пользователь)
  • /profile — Профиль (авторизованный пользователь)
  • /list — Страница с табличкой объектов (авторизованный пользователь)

Детали реализации

  • Если пользователь переходит на страницу /profile, /list и он не авторизован, перекидывать на страницу /login
  • Если пользователь переходит на страницу /login и он авторизован, перекидывать на страницу /profile
  • Информацию об авторизации, регистрации пользователей хранить в localStorage
  • Необходима валидация полей ввода (правила валидации на свое усмотрение)
  • Во время реализации необходимо использовать Bootstrap-vue

Детали реализации страницы объектов

  • Нужна пагинация
  • Нужен поиск объектов
  • Во время запроса на сервер выводить индикатор загрузки (спиннер)
  • Если API не возвращает объекты, рендерить в первой строке таблички текст: "Нет данных для отображения"
  • Поиск объектов производить по свойству объекта Name (поиск с помощью startsWith)
  • Необходима сортировка списка по колонкам (при нажании на колонку)
  • Для столбца Salary в таблице необходимо реализовать выравнивание по правому краю с форматированием чисел через точку с округлением до копеек.

API

Предположим, что API на бекенде пока нет, но вы договорились с разработчиками о следующем формате получаемых объектов:

[{
  "Name": "Brenden Wagner",
  "Position": "Software Engineer",
  "Office": "San Francisco",
  "Age": "28",
  "StartDate": "2011/06/07",
  "Salary": "206.850",
  "Currency": "$"
}]

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

Технические детали

  • Необходимо использовать JS/ES6+
  • Vue.js
  • Поддержка десктопных браузеров (Chrome, Firefox)
  • Все необходимое на ваш взгляд, прокинуть через Vuex
  • Детали, которых не хватает в задаче, можно выбрать на свое усмотрение, включая дизайн
  • Для страниц /Profile и /List необходимо организовать динамическую подгрузку кода для страниц, по мере их открытия (будет большим плюсом)

Дедлайн

На выполнение задания дается не более 5 рабочих дней

Решение можно прислать в виде ссылки на любой публичный git-репозиторий: GitHub, Bitbucket, GitLab и т.п.

Желаем успехов!