Compare commits

..

3 Commits

Author SHA1 Message Date
RustamRu
20017cad3c feat: upload car img form (#88)
Some checks failed
it-academy/dry-wash-pl/pipeline/head There was a failure building this commit
it-academy/dry-wash-pl/pipeline/pr-main There was a failure building this commit
2025-02-22 19:46:27 +03:00
RustamRu
de54ac6669 feat: api upload car img (#88) 2025-02-22 18:56:37 +03:00
RustamRu
eda869622e fix: error body message -> error (#88) 2025-02-22 18:56:20 +03:00
33 changed files with 145 additions and 256 deletions

View File

@@ -1,5 +0,0 @@
{
"i18n-ally.localesPaths": [
"locales"
]
}

32
Jenkinsfile vendored
View File

@@ -1,7 +1,7 @@
pipeline {
agent {
docker {
image 'node:22'
image 'node:20'
}
}
@@ -30,21 +30,25 @@ pipeline {
}
}
stage('eslint') {
steps {
sh 'npm run eslint'
}
}
stage('checks') {
parallel {
stage('eslint') {
steps {
sh 'npm run eslint'
}
}
stage('test') {
steps {
sh 'npm run test'
}
}
stage('test') {
steps {
sh 'npm run test'
}
}
stage('build') {
steps {
sh 'npm run build'
stage('build') {
steps {
sh 'npm run build'
}
}
}
}

View File

@@ -21,16 +21,7 @@ module.exports = {
features: {
'dry-wash': {
// add your features here in the format [featureName]: { value: string }
"order-view-status-polling": {
"on": true,
"value": "3000",
"key": "order-view-status-polling"
},
"car-img-upload": {
"on": true,
"value": "true",
"key": "car-img-upload"
}
'order-view-status-polling': { value: '3000' }
},
},
config: {

View File

@@ -64,7 +64,7 @@
"dry-wash.arm.order.status.complete": "Completed",
"dry-wash.arm.order.status.pending": "Pending",
"dry-wash.arm.order.status.working": "Working",
"dry-wash.arm.order.status.cancelled": "Canceled",
"dry-wash.arm.order.status.canceled": "Canceled",
"dry-wash.arm.order.status.placeholder": "Select status",
"dry-wash.arm.order.master.placeholder": "Select master",
"dry-wash.arm.order.table.header.carNumber": "Car Number",

View File

@@ -5,7 +5,7 @@
"dry-wash.arm.order.status.complete": "Завершено",
"dry-wash.arm.order.status.pending": "В ожидании",
"dry-wash.arm.order.status.working": "В работе",
"dry-wash.arm.order.status.cancelled": "Отменено",
"dry-wash.arm.order.status.canceled": "Отменено",
"dry-wash.arm.order.status.placeholder": "Выберите статус",
"dry-wash.arm.order.master.placeholder": "Выберите мастера",
"dry-wash.arm.order.table.header.carNumber": "Номер машины",

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "dry-wash",
"version": "0.9.1",
"version": "0.8.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "dry-wash",
"version": "0.9.1",
"version": "0.8.0",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.26.7",

View File

@@ -1,6 +1,6 @@
{
"name": "dry-wash",
"version": "0.9.1",
"version": "0.8.0",
"description": "<a id=\"readme-top\"></a>",
"main": "./src/index.tsx",
"scripts": {
@@ -9,8 +9,8 @@
"build": "npm run clean && brojs build --dev",
"build:prod": "npm run clean && brojs build",
"clean": "rimraf dist",
"eslint": "npx eslint src",
"eslint:fix": "npx eslint src --fix",
"eslint": "npx eslint .",
"eslint:fix": "npx eslint . --fix",
"preversion": "npm run eslint"
},
"keywords": [],

View File

@@ -11,8 +11,5 @@ export const FEATURE = {
return interval;
}
}
},
carImageUpload: {
isOn: Boolean(features?.['car-img-upload'])
}
};

View File

@@ -13,7 +13,6 @@ export const extractErrorMessageFromResponse = ({
}: FetchBaseQueryError) => {
if (
typeof data === 'object' &&
data !== null &&
'error' in data &&
typeof data.error === 'string'
) {

View File

@@ -7,9 +7,7 @@ export const store = configureStore({
[api.reducerPath]: api.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false
}).concat(api.middleware),
getDefaultMiddleware().concat(api.middleware),
});
export type RootState = ReturnType<typeof store.getState>;

View File

@@ -28,6 +28,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
console.error('Error caught by ErrorBoundary:', error, errorInfo);
console.error('4545');
this.setState({ error, errorInfo });
}

View File

@@ -24,10 +24,6 @@ jest.mock('@brojs/cli', () => {
describe('ErrorBoundary', () => {
it('должен отобразить запасной UI при ошибке', async () => {
// Подавляем вывод ошибки в консоль во время теста
const consoleSpy = jest.spyOn(console, 'error');
consoleSpy.mockImplementation(() => {});
const { container } = render(
<Provider store={store}>
<ErrorBoundary>
@@ -43,9 +39,7 @@ describe('ErrorBoundary', () => {
);
expect(button).not.toBeNull();
expect(container).toMatchSnapshot();
// Восстанавливаем console.error после теста
consoleSpy.mockRestore();
expect(container).toMatchSnapshot();
});
});

View File

@@ -1,51 +0,0 @@
import { Box, Button, Heading, HStack, Divider, Flex } from '@chakra-ui/react';
import React from 'react';
import { useLocation, Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { URLs } from '../../__data__/urls';
const Header = () => {
const location = useLocation();
const isActive = (keyword: string) => location.pathname.includes(keyword);
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master.sideBar',
});
return (
<Box as='header' bg='gray.50' boxShadow='md' px={6} py={4} w='100%'>
<Flex gap={50} align='center'>
<Heading color='green' size='lg'>
{t('title')}
</Heading>
<HStack spacing={4}>
{URLs.armOrder.isOn && (
<Button
as={Link}
to={URLs.armOrder.url}
colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
variant={isActive(URLs.armOrder.url) ? 'outline' : 'ghost'}
>
{t('orders')}
</Button>
)}
<Divider orientation='vertical' height='30px' />
{URLs.armMaster.isOn && (
<Button
as={Link}
to={URLs.armMaster.url}
colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
variant={isActive(URLs.armMaster.url) ? 'outline' : 'ghost'}
data-testid='master-button'
>
{t('master')}
</Button>
)}
</HStack>
</Flex>
</Box>
);
};
export default Header;

View File

@@ -1 +0,0 @@
export { default } from './Header';

View File

@@ -2,10 +2,10 @@ import { Box, Flex } from '@chakra-ui/react';
import React from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
import Sidebar from '../Sidebar';
import Orders from '../Orders';
import Masters from '../Masters';
import { URLs } from '../../__data__/urls';
import Header from '../Header';
const LayoutArm = () => {
let defaultRedirect = null;
@@ -17,8 +17,8 @@ const LayoutArm = () => {
}
return (
<Flex flexDirection='column' h='100vh'>
<Header />
<Flex h='100vh'>
<Sidebar />
<Box flex='1' bg='gray.50'>
<Routes>
<Route index element={<Navigate to={defaultRedirect} replace />} />

View File

@@ -2,17 +2,16 @@ import React, { ChangeEvent, useState } from 'react';
import { Td, Tr, Link, Select } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
import { ViewIcon } from '@chakra-ui/icons';
import { getTimeSlot } from '../../lib';
import { useUpdateOrdersMutation } from '../../__data__/service/api';
import { OrderArm, Status, statuses } from '../../models/api';
import PopoverTemplate from '../PopoverTemplate';
const statusColors: Record<Status, string> = {
pending: 'yellow.100',
progress: 'blue.100',
cancelled: 'red.100',
working: 'orange.100',
canceled: 'red.100',
complete: 'green.100',
};
@@ -35,7 +34,7 @@ const OrderItem = ({
const [statusSelect, setStatus] = useState(status);
const bgColor = statusColors[statusSelect];
const [masterSelectId, setMasterSelectId] = useState(master);
const [masterSelect, setMaster] = useState(master?.name);
const handelChangeMasters = (e: ChangeEvent<HTMLSelectElement>) => {
const masterName = e.target.value;
@@ -44,7 +43,7 @@ const OrderItem = ({
);
if (selectedMaster) {
setMasterSelectId(selectedMaster.id);
setMaster(masterName);
updateOrders({ id, master: selectedMaster.id });
} else {
console.error('Master not found');
@@ -57,10 +56,6 @@ const OrderItem = ({
setStatus(status);
};
const masterSelectChange = allMasters.find(
(master) => master.id === masterSelectId,
);
return (
<Tr>
<Td>{carNumber}</Td>
@@ -84,7 +79,7 @@ const OrderItem = ({
</Td>
<Td>
<Select
value={masterSelectChange?.name}
value={masterSelect}
onChange={handelChangeMasters}
placeholder={t(`master.placeholder`)}
>
@@ -98,9 +93,7 @@ const OrderItem = ({
<Td>
<Link href='tel:'>{phone}</Link>
</Td>
<Td>
<PopoverTemplate trigger={<ViewIcon />} description={location} />
</Td>
<Td>{location}</Td>
</Tr>
);
};

View File

@@ -1,35 +0,0 @@
import React from 'react';
import {
Button,
Popover,
PopoverArrow,
PopoverBody,
PopoverCloseButton,
PopoverContent,
PopoverHeader,
PopoverTrigger,
} from '@chakra-ui/react';
interface Props {
title?: string;
description: string;
trigger?: React.ReactNode;
}
const PopoverTemplate = ({ title, description, trigger }: Props) => {
return (
<Popover>
<PopoverTrigger>
<Button>{trigger}</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
{title && <PopoverHeader>{title}!</PopoverHeader>}
<PopoverBody mr={5}>{description}</PopoverBody>
</PopoverContent>
</Popover>
);
};
export default PopoverTemplate;

View File

@@ -1 +0,0 @@
export { default } from './PopoverTemplate';

View File

@@ -0,0 +1,61 @@
import { Box, Button, Heading, VStack, Divider } from '@chakra-ui/react';
import React from 'react';
import { useLocation, Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { URLs } from '../../__data__/urls';
const Sidebar = () => {
const location = useLocation();
const isActive = (keyword: string) => location.pathname.includes(keyword);
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master.sideBar',
});
return (
<Box
borderRight='1px solid black'
bg='gray.50'
color='white'
w='250px'
p='5'
pt='8'
>
<Heading color='green' size='lg' mb='5'>
{t('title')}
</Heading>
<VStack align='start' spacing='4'>
<Divider />
{URLs.armOrder.isOn && (
<Button
as={Link}
to={URLs.armOrder.url}
w='100%'
colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
variant={isActive(URLs.armOrder.url) ? 'solid' : 'ghost'}
>
{t('orders')}
</Button>
)}
<Divider />
{URLs.armMaster.isOn && (
<Button
as={Link}
to={URLs.armMaster.url}
w='100%'
colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
variant={isActive(URLs.armMaster.url) ? 'solid' : 'ghost'}
data-testid='master-button'
>
{t('master')}
</Button>
)}
<Divider />
</VStack>
</Box>
);
};
export default Sidebar;

View File

@@ -0,0 +1 @@
export { default } from './Sidebar';

View File

@@ -64,7 +64,7 @@ export const CarImageForm: FC<CarImageFormProps> = memo(function CarImageForm({
<Input
{...field}
ref={fileInputRef}
accept='image/png,image/jpeg'
accept='.jpg,.png'
value={value?.fileName}
onChange={(event) => {
onChange(event.target.files[0]);

View File

@@ -11,7 +11,7 @@ export const useHandleUploadCarImageResponse = (query: {
}) => {
const toast = useToast();
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.order-view.upload-car-image-query',
keyPrefix: 'dry-wash.order-create.upload-car-image-query',
});
useEffect(() => {

View File

@@ -38,7 +38,8 @@ type GetArrItemType<ArrType> =
export const statuses = [
'pending' as const,
'progress' as const,
'cancelled' as const,
'working' as const,
'canceled' as const,
'complete' as const,
];
@@ -52,7 +53,7 @@ export type OrderArm = {
status?: GetArrItemType<typeof statuses>;
phone?: string;
location?: string;
master: string | [];
master: Master;
notes: '';
allMasters: Master[];
id: string;

View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Master Page should display master list and show details when master button is clicked 1`] = `
exports[`Master Page render 1`] = `
<div>
<div
class="css-1yeiifd"

View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Страница просмотра заказа отображает детали заказа после успешной загрузки 1`] = `
exports[`Order View page, initial load shows order details 1`] = `
<div>
<div
class="chakra-container css-3n6qh3"
@@ -16,6 +16,7 @@ exports[`Страница просмотра заказа отображает
</h2>
<div
class="chakra-stack css-1n38vgh"
created="2025-01-19T14:04:02.985Z"
data-testid="order-details"
>
<div
@@ -25,9 +26,6 @@ exports[`Страница просмотра заказа отображает
class="chakra-heading css-1jb3vzl"
>
Заказ №{{number}}
(
Sunday, January 19, 2025 5:04 PM
)
</h2>
<span
class="css-6jfsiv"
@@ -128,7 +126,7 @@ exports[`Страница просмотра заказа отображает
</div>
`;
exports[`Страница просмотра заказа отображает индикатор загрузки деталей заказа 1`] = `
exports[`Order View page, initial load shows order details loading 1`] = `
<div>
<div
class="chakra-container css-3n6qh3"
@@ -173,7 +171,7 @@ exports[`Страница просмотра заказа отображает
</div>
`;
exports[`Страница просмотра заказа отображает ошибку при некорректном ID заказа 1`] = `
exports[`Order View page, initial load shows order error 1`] = `
<div>
<div
class="chakra-container css-3n6qh3"

View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Страница заказов должна корректно отображать список заказов после загрузки данных 1`] = `
exports[`order page получение списка заказов 1`] = `
<div>
<div
class="css-1yeiifd"
@@ -75,7 +75,7 @@ exports[`Страница заказов должна корректно ото
<p
class="chakra-text css-52ukzg"
>
23.02.2025
16.02.2025
</p>
<button
class="chakra-button css-ez23ye"

View File

@@ -54,41 +54,6 @@ const server = setupServer(
],
});
}),
http.post('/api/arm/orders', () => {
return HttpResponse.json({
success: true,
body: [
{
id: 'order1',
carNumber: 'A123BC',
startWashTime: '2024-11-24T10:30:00.000Z',
endWashTime: '2024-11-24T16:30:00.000Z',
orderDate: '2024-11-24T08:41:46.366Z',
status: 'pending',
phone: '79001234563',
location: 'Казань, ул. Баумана, 1',
master: {
name: 'Олег Макаров',
phone: '79001234567',
id: '23423442',
},
notes: '',
},
{
id: 'order2',
carNumber: 'A245BC',
startWashTime: '2024-11-24T11:30:00.000Z',
endWashTime: '2024-11-24T17:30:00.000Z',
orderDate: '2024-11-24T07:40:46.366Z',
status: 'progress',
phone: '79001234567',
location: 'Казань, ул. Баумана, 43',
master: [],
notes: '',
},
],
});
}),
);
jest.mock('@brojs/cli', () => {
@@ -105,7 +70,11 @@ describe('Master Page', () => {
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
it('should display master list and show details when master button is clicked', async () => {
it('render ', async () => {
server.events.on('request:start', ({ request }) => {
console.log('Outgoing:', request.method, request.url);
});
const { container } = render(
<Provider store={store}>
<ChakraProvider theme={chakraTheme}>
@@ -119,14 +88,10 @@ describe('Master Page', () => {
);
const button = await waitFor(() => screen.getByTestId('master-button'));
fireEvent.click(button);
// Проверяем отображение всех мастеров
await waitFor(() => {
expect(screen.getByText('Иван Иванов')).toBeInTheDocument();
expect(screen.getByText('Олег Макаров')).toBeInTheDocument();
expect(screen.getByText('Иван Галкин')).toBeInTheDocument();
});
await waitFor(() => screen.getByText('Иван Иванов'));
expect(container).toMatchSnapshot();
});

View File

@@ -11,12 +11,12 @@ jest.mock('react-router-dom', () => ({
useParams: jest.fn(),
}));
describe('Страница просмотра заказа', () => {
describe('Order View page, initial load', () => {
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
test('отображает индикатор загрузки деталей заказа', () => {
test('shows order details loading', () => {
(useParams as jest.Mock).mockReturnValue({ orderId: 'id1' });
const { container } = render(
@@ -33,7 +33,7 @@ describe('Страница просмотра заказа', () => {
expect(container).toMatchSnapshot();
});
test('отображает детали заказа после успешной загрузки', async () => {
test('shows order details', async () => {
(useParams as jest.Mock).mockReturnValue({ orderId: 'id1' });
const { container } = render(
@@ -52,7 +52,7 @@ describe('Страница просмотра заказа', () => {
expect(container).toMatchSnapshot();
});
test('отображает ошибку при некорректном ID заказа', async () => {
test('shows order error', async () => {
(useParams as jest.Mock).mockReturnValue({ orderId: null });
const { container } = render(

View File

@@ -46,6 +46,10 @@ describe('order page', () => {
afterAll(() => server.close());
it('получение пустого списка', async () => {
server.events.on('request:start', ({ request }) => {
console.log('Outgoing:', request.method, request.url);
});
render(
<Provider store={store}>
<ChakraProvider theme={chakraTheme}>

View File

@@ -21,43 +21,9 @@ import Page from '../arm';
import { PageSpinner } from '../../components';
const server = setupServer(
http.post('/api/arm/orders', () => {
http.get('/api/arm/orders', () => {
return HttpResponse.json({}, { status: 500 });
}),
http.get('/api/arm/masters', () => {
return HttpResponse.json({
success: true,
body: [
{
id: '4545423234',
name: 'Иван Иванов',
phone: '+7 900 123 45 67',
},
{
name: 'Олег Макаров',
phone: '79001234567',
id: '23423442',
},
{
id: '345354234',
name: 'Иван Галкин',
schedule: [
{
id: 'order1',
startWashTime: '2024-11-24T10:30:00.000Z',
endWashTime: '2024-11-24T16:30:00.000Z',
},
{
id: 'order2',
startWashTime: '2024-11-24T11:30:00.000Z',
endWashTime: '2024-11-24T17:30:00.000Z',
},
],
phone: '+7 900 123 45 67',
},
],
});
}),
);
jest.mock('@brojs/cli', () => {

View File

@@ -98,12 +98,16 @@ jest.mock('@brojs/cli', () => {
};
});
describe('Страница заказов', () => {
describe('order page', () => {
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
it('должна корректно отображать список заказов после загрузки данных', async () => {
it('получение списка заказов ', async () => {
server.events.on('request:start', ({ request }) => {
console.log('Outgoing:', request.method, request.url);
});
const { container } = render(
<Provider store={store}>
<ChakraProvider theme={chakraTheme}>

View File

@@ -70,7 +70,7 @@ const Page: FC = () => {
<>
<>
{isSuccess && (
<VStack p={4} alignItems='flex-start' gap={4} data-testid='order-details'>
<VStack p={4} alignItems='flex-start' gap={4}>
<OrderDetails
orderNumber={order.orderNumber}
status={order.status}
@@ -81,9 +81,10 @@ const Page: FC = () => {
location={order.location}
startWashTime={order.startWashTime}
endWashTime={order.endWashTime}
created={order.created}
created={order.created}
data-testid='order-details'
/>
{FEATURE.carImageUpload.isOn && <CarImageForm orderId={orderId} />}
<CarImageForm orderId={orderId} />
</VStack>
)}
</>

View File

@@ -9,8 +9,12 @@
"orderDate": "2024-11-24T08:41:46.366Z",
"status": "pending",
"phone": "79001234563",
"location": "55.779905316526424,49.12446113769528 Республика Татарстан (Татарстан),н Казань, ул. Баумана, 1",
"master": "4545423234",
"location": "Казань, ул. Баумана, 1",
"master": {
"name": "Олег Макаров",
"phone": "79001234567",
"id": "23423442"
},
"notes": ""
},
{
@@ -21,7 +25,7 @@
"orderDate": "2024-11-24T07:40:46.366Z",
"status": "progress",
"phone": "79001234567",
"location": "55.779905316526424,49.12446113769528 Республика Татарстан (Татарстан), Казань, озеро Нижний Кабан",
"location": "Казань, ул. Баумана, 43",
"master": [],
"notes": ""
}