https://github.com/hedmor/lcgrouptesttask
Тестовое задание от LCGroup на TS / SCSS / Angular
https://github.com/hedmor/lcgrouptesttask
Last synced: 12 months ago
JSON representation
Тестовое задание от LCGroup на TS / SCSS / Angular
- Host: GitHub
- URL: https://github.com/hedmor/lcgrouptesttask
- Owner: Hedmor
- Created: 2021-08-03T06:22:28.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-10T10:05:47.000Z (almost 5 years ago)
- Last Synced: 2025-03-24T22:56:10.447Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 261 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Тестовое задание в компанию LCGroup
## Задача:
1. Написать web-приложение, используя Angular 10+.
2. После загрузки приложение должно отрисовать представление (view) с двумя компонентами:
- Таблица с пользователями. Данные получить Get-запросом. JSON можно скачать по ссылке.
- Панель с фильтрами.
Таблица должна показывать следующие столбцы:
- Имя
- Возраст
- Пол
- Департамент
- Адрес в формате “Город, Улица”
Должна быть возможность отсортировать таблицу по любому столбцу (убывание/возрастание).
Панель фильтров должна показывать опции, разделённые по группам:
- Пол
- Департамент
- Город
Опции должны динамически генерироваться на основании данных. Т.е. в фильтре “пол”, например, две опции: “female” и “male”. В поле город -- все возможные города и т. д.
Опции представляют собой чекбокс “<значение фильтра> (4)”. Цифра в скобках показывает сколько раз этот фильтр встречается в отфильтрованной коллекции. Например фильтр по городу: Moscow (2)
При нажатии на checkbox таблица должна фильтроваться по соответствующему значению. При этом, все остальные фильтры должны пересчитаться. Нулевые фильтры (те, которые не применимы к коллекции) не показываются на экране.
Например: при нажатии на фильтр “Пол” - “female” в таблице отфильтровываются все женщины. При этом фильтр “male” показываться не должен.
Требования к вёрстке:
Страница должна быть сверстана вручную (без использования Bootstrap, Foundation и тп).
Вёрстка должна быть кроссбраузерной (не должна “ехать” в последних версиях IE Edge, Google Chrome, Firefox)
При разрешении экрана:
>= 900px фильтры должны располагаться горизонтально (один за другим). Таблица с фильтрами имеет максимальную ширину 1200px
< 900px фильтры должны располагаться вертикально (в один столбец). А также должен скрываться столбец “Адрес”. Таблица растягивается на всю возможную ширину.
Задание должно быть выполнено в github репозитории. Присылайте ссылку на ваш репозиторий с выполненной работой.
Для тех кто никогда ранее не работал с Angular полезными будут данные ссылки:
https://angular.io/guide/architecture
https://angular.io/start