Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bentonfraizer/test-task-gna
Тестовое задание.
https://github.com/bentonfraizer/test-task-gna
ant-design mockoon mockoon-cli react react-router redux typescript
Last synced: 9 days ago
JSON representation
Тестовое задание.
- Host: GitHub
- URL: https://github.com/bentonfraizer/test-task-gna
- Owner: BentonFraizer
- Created: 2023-06-15T16:29:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-22T14:06:07.000Z (8 months ago)
- Last Synced: 2024-04-22T14:26:46.963Z (8 months ago)
- Topics: ant-design, mockoon, mockoon-cli, react, react-router, redux, typescript
- Language: TypeScript
- Homepage:
- Size: 7.16 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# test-task-gna
# Задание.
Ограничения:
- Обязательно использование React, Typescript;
- Желательно использовать UI-библиотеку готовых компонентов (прекрасно если Ant Design, но допустимо также Material UI и любые другие);
- Желательно использовать сервис для подготовки mock API (см. примечания), например Mockoon;
- В остальном разрешено использовать любые библиотеки которые посчитаешь уместными (Redux, Mobx, Axios и др.)
Задача:
1. Подготовить эндпоинты /documents1 и /documents2
С обоих возвращаются данные в формате :
```
{
id: string,
name: string,
quantity: number,
deliveryDate: string,
price: number,
currency: ‘USD’ | ‘RUB’,
} []
```
2. Создать таблицу в которой будут данные из обоих запросов, по умолчанию отсортированные по deliveryDate.
Все поля кроме id, являются столбцами этой таблицы.
3. Добавить возможность сортировки по всем столбцам этой таблицы.
4. Для каждой строки таблицы нужно добавить галочку выбора товара, а также в заголовке таблицы галочку выбора всех товаров.
5. В последней строке таблицы вывести результирующий показатель «Общее количество» (сумма всех quantity).
6. Добавить кнопку «Аннулировать», при нажатии на которую должно появляться модальное окно с текстом
«Вы уверены что хотите аннулировать товар(ы): [названия выбранных товаров через запятую]»,
и кнопки «Применить», «Отклонить».
Если пользователь нажимает кнопку «Применить» отправить запрос на эндпоинт /cancel с перечислением id товаров которые мы хотим аннулировать.
Если пользователь нажимает кнопку «Отклонить» закрыть модальное окно.
Примечания:
1. Допустимо захардкодить данные, получаемые с сервера по эндпоинтам /documents1 и /documents2 и отправляемые на сервер по эндпоинту /cancel, но будет плюсом имитировать клиент-серверное взаимодействие через сервис mock API или backend-сервис.
2. Требований к дизайну нет, все на усмотрение разработчика.
---
# Инструкция для запуска проекта.
> На данный момент приложение выложено на GitHub Pages. Соответственно, есть два варианта его просмотреть:
>
>1.Перейти по ссылке: [ссылка на приложение](https://bentonfraizer.github.io/test-task-gna/);
>
>2.Либо установить приложение локально, но стоит учитывать, что сервер запускать больше нет необходимости (п.п 3-4)
> поскольку данные запрашиваются с сервиса моковых данных mockapi.io.
1. Скопировать репозиторий:
```
git clone [email protected]:BentonFraizer/test-task-gna.git
```
2. Установить зависимости:
```
npm install
```
3. Установить mockoon-cli:
```
npm install -g @mockoon/cli
```
> **Предупреждение**
>
> Для выполнения шага №4 не рекомендуется использовать Windows Powershell. Желательно воспользоваться Git Bash.
4. Запустить сервер с моковыми данными:
```
mockoon-cli start --data ./src/mock/data.json --port 3001
```
При необходимости, остановить сервер можно с помощью команды:
```
mockoon-cli stop 0
```
5. Запустить проект в работу:
```
npm start
```
6. В том случае если браузер не открылся, адресной строке необходимо ввести следующий путь:
http://localhost:3000/
---
# Страница приложения.
