table-vue

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Тестовое задание

Тестовое задание нужно выполнять используя Vue.js

Необходимо:

1. Создать страницу, на которой пользователь может по клику на кнопку «Показать пользователей» загрузить данные.

2. Реализовать переиспользуемый компонент таблицу. В ней должны быть реализованы (на клиентской стороне):

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

   – пагинация. Пагинация должна включать в себя возможность переходить по страницам вперёд/назад, указание текущего местоположения, переход на первую и последнюю страницы.

   – фильтр. Над таблицей должно быть поле ввода с кнопкой «найти», фильтрация должна происходить по всем данным, отображаемым в таблице, при нажатии на кнопку.

3. По клику на строку таблицы в модальном окне выводить информацию об имени и адресе выбранного пользователя. Модальное окно можно закрыть тремя способами: по клику на крестик, область вне модального окна, по нажатию на клавижу ESC.

4. В таблице вывести имя пользователя (фамилию и имя), компанию, адрес электронной почты, штат.

Список пользователей получить из запроса: https://app.dev-wazzup24.com/api/v1/wazzup_test/

Требования:

– компоненты реализовывать самостоятельно, не использовать готовые библиотеки;

– визуальное оформление на ваше усмотрение, можно использовать CSS-фреймворк;

– ничего не должно зависать, падать с ошибками, все состояния (загрузка, ошибка и т.п.) должны быть соответствующе обработаны в интерфейсе;

– таблица должна быть переиспользуемым компонентом (т.е. должна функционировать с разным набором данных, а не только с данными из указанного в задаче запроса. Не обязательно это будут тоже пользователи);

– решение задачи прислать ссылкой на репозиторий.