- Обязательно использование React, Typescript;
- Желательно использовать UI-библиотеку готовых компонентов (прекрасно если Ant Design, но допустимо также Material UI и любые другие);
- Желательно использовать сервис для подготовки mock API (см. примечания), например Mockoon;
- В остальном разрешено использовать любые библиотеки которые посчитаешь уместными (Redux, Mobx, Axios и др.)
Задача:
- Подготовить эндпоинты /documents1 и /documents2 С обоих возвращаются данные в формате :
{
id: string,
name: string,
quantity: number,
deliveryDate: string,
price: number,
currency: ‘USD’ | ‘RUB’, } []
-
Создать таблицу в которой будут данные из обоих запросов, по умолчанию отсортированные по deliveryDate. Все поля кроме id, являются столбцами этой таблицы.
-
Добавить возможность сортировки по всем столбцам этой таблицы.
-
Для каждой строки таблицы нужно добавить галочку выбора товара, а также в заголовке таблицы галочку выбора всех товаров.
-
В последней строке таблицы вывести результирующий показатель «Общее количество» (сумма всех quantity).
-
Добавить кнопку «Аннулировать», при нажатии на которую должно появляться модальное окно с текстом «Вы уверены что хотите аннулировать товар(ы): [названия выбранных товаров через запятую]», и кнопки «Применить», «Отклонить».
Если пользователь нажимает кнопку «Применить» отправить запрос на эндпоинт /cancel с перечислением id товаров которые мы хотим аннулировать. Если пользователь нажимает кнопку «Отклонить» закрыть модальное окно.
Примечания:
- Допустимо захардкодить данные, получаемые с сервера по эндпоинтам /documents1 и /documents2 и отправляемые на сервер по эндпоинту /cancel, но будет плюсом имитировать клиент-серверное взаимодействие через сервис mock API.
- Требований к дизайну нет, все на усмотрение разработчика.
Для запуска проекта:
- Клонировать репозиторий
- Установить зависимости
npm install - Запустить проект
npm run dev - Открыть окружение из файла apiConfig.json в корне проекта.
- Запустить сервер