Для того, чтобы запустить проект, установите зависимости npm i и воспользуйтесь командой npm run start
- адаптивный дизайн
- Create React App
- React Router
- Axios
Когда пользователь открывает сайт необходимо загрузить актуальный список работников компании. При входе в приложение необходимо отобразить экран 2.0.0. Изначально он должен быть в состоянии загрузки, экран 1.0.0. Если при загрузке произошла ошибка, отсутствует интернет соединение или API вернул ошибку, необходимо отобразить экран "Критическая ошибка". В случае успеха, необходимо отобразить Top App Bar и список людей.
Компонент находится на верху экрана и представляет из себя поле для поиска с иконкой "Поиск", кнопкой "Сортировка" и панель вкладок. При переключении между вкладками, на главном экране список работников фильтруется и отображаются только люди работающие в выбранном выбранном департаменте, либо все, если выбрана вкладка "Все". Соответствия названия вкладок с полем "department" из запроса API: android - Android ios - iOS design - Дизайн management - Менеджмент qa - QA back_office - Бэк-офис frontend - Frontend hr - HR pr - PR backend - Backend support - Техподдержка analytics - Аналитика При нажатии на кнопку "Фильтр" открывается Bottom Sheet с вариантами сортировки списка работников. Есть два варианта сортировки "По алфавиту" (по умолчанию), "По дню рождения". При переключении варианта сортировки, панель должна закрываться, а список на главной странице должен перезагружаться. Когда пользователь вводит текст в поисковое поле, необходимо фильтровать список на главном экране и отображать только работников соответствующих параметрам поиска. Поиск может осуществляться по имени, фамилии или никнейму, состоящему из двух символов. В случае отсутствия результатов поиска необходимо отобразить информацию о том, что ничего не было найдено. Экран "2.0.0Г Люди (Ошибка поиска)".
Вверху главной страницы должна быть расположена верхняя панель приложения, на которой должны находиться: поле для поиска, панель вкладок для группировки загруженного списка пользователей, список работников. Список должен обновляться каждый раз, когда меняются параметры поиска, обновляется вариант сортировки или пользователь переключается вкладки департаментов. Пользователь имеет возможность скролить список работников. В режиме сортировки "По алфавиту" для каждого работника отображается его фотография, имя, никнейм и департамент. В режиме сортировки "По дню рождения", список отображается от ближайшей даты для рождения вниз. Если день рождения следующего работника будет только в следующем году, то необходимо отобразить блок с годом, экран 2.0.1А. Когда пользователь кликнет на человека, необходимо открыть экран информации о человеке (экран "детали").
Сверху экрана деталей должна отображаться кнопка назад для навигации на главный экран. Также вернуться на главный экран можно, если нажать системную кнопку назад. В шапке экрана должна отображаться аватарка пользователя, имя, никнейм и название департамента. Ниже находится дата рождения и номер телефон
-
- составить план, создать репо на GitHub, запушить README - 30мин / 20мин
-
- установить CRA, подготовить файловую инфраструктуру - 15мин / 7 мин
- сверстать компонент прелоадер + адаптив - 40мин / 30мин
- сверстать компонент Критическая ошибка + адаптив - 1ч / 30мин
- сверстать компонент Top App Bar + список людей (+адаптив) - 1ч 30мин / 1ч
- свертать компонент Ошибка поиска - 1ч / 15 мин
- свертать компонент UserCard - 1ч / 40 мин
-
- сделать GET запрос к API - 30мин / 15мин
- добавить Preloader - 30мин / 7мин
- добавить вывод ошибки загрузки - 1ч / 7мин
- добавить вывод всех пользователей - 1ч / 1.5ч
- добавить вывод отсутсвия результатов поиска - 1ч/ 7мин
- сделать фильтрацию данных через попап с чекбоксом - 2ч /3ч
- сортировка результата по ключевому слову - 2ч / 2ч
- добавить функционал сортровки списка при изменении парамеров поиска - 1ч /2ч
- добавить функционал переключения вкладок и обновления списка - 1ч / 1.5ч
- добавить вывод карточки пользователя - 1ч / 2ч
- сгруппировать пользователй по годам - / 1.5ч