Compare commits

...

5 Commits

Author SHA1 Message Date
d15bd6f7d2 feat: add RTK for master
All checks were successful
it-academy/dry-wash-pl/pipeline/pr-main This commit looks good
it-academy/dry-wash-pl/pipeline/head This commit looks good
2025-01-26 12:21:34 +03:00
adce5392a1 Merge pull request 'feat: add update status and masters (#67)' (#68) from feature/updateOrders into main
All checks were successful
it-academy/dry-wash-pl/pipeline/head This commit looks good
Reviewed-on: #68
2025-01-26 12:15:45 +03:00
1b01c0ba4f fix: add :id
All checks were successful
it-academy/dry-wash-pl/pipeline/pr-main This commit looks good
it-academy/dry-wash-pl/pipeline/head This commit looks good
2025-01-26 11:08:43 +03:00
54ced18ea2 fix: eslint checks (#67)
All checks were successful
it-academy/dry-wash-pl/pipeline/pr-main This commit looks good
2025-01-25 17:15:41 +03:00
0ddcaa5d52 feat: add update status and masters (#67)
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-01-25 17:12:02 +03:00
20 changed files with 319 additions and 84 deletions

View File

@@ -58,7 +58,8 @@
"dry-wash.arm.order.status.pending": "Pending",
"dry-wash.arm.order.status.working": "Working",
"dry-wash.arm.order.status.canceled": "Canceled",
"dry-wash.arm.order.status.placeholder": "Select Status",
"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",
"dry-wash.arm.order.table.header.washingTime": "Washing Time",
"dry-wash.arm.order.table.header.orderDate": "Order Date",

View File

@@ -7,6 +7,7 @@
"dry-wash.arm.order.status.working": "В работе",
"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": "Номер машины",
"dry-wash.arm.order.table.header.washingTime": "Время мойки",
"dry-wash.arm.order.table.header.orderDate": "Дата заказа",

87
package-lock.json generated
View File

@@ -17,6 +17,7 @@
"@fontsource/open-sans": "^5.1.0",
"@lottiefiles/react-lottie-player": "^3.5.4",
"@pbe/react-yandex-maps": "^1.2.5",
"@reduxjs/toolkit": "^2.5.0",
"@types/react": "^18.3.12",
"dayjs": "^1.11.13",
"express": "^4.21.1",
@@ -29,6 +30,7 @@
"react-i18next": "^15.1.1",
"react-icons": "^5.3.0",
"react-phone-number-input": "^3.4.9",
"react-redux": "^9.2.0",
"react-router-dom": "^6.27.0"
},
"devDependencies": {
@@ -2639,6 +2641,38 @@
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@reduxjs/toolkit": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.5.0.tgz",
"integrity": "sha512-awNe2oTodsZ6LmRqmkFhtb/KH03hUhxOamEQy411m3Njj3BbFvoBovxo4Q1cBWnV1ErprVj9MlF0UPXkng0eyg==",
"dependencies": {
"immer": "^10.0.3",
"redux": "^5.0.1",
"redux-thunk": "^3.1.0",
"reselect": "^5.1.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"react-redux": {
"optional": true
}
}
},
"node_modules/@reduxjs/toolkit/node_modules/immer": {
"version": "10.1.1",
"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
}
},
"node_modules/@remix-run/router": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
@@ -2802,6 +2836,11 @@
"@types/react": "*"
}
},
"node_modules/@types/use-sync-external-store": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
"integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="
},
"node_modules/@types/yandex-maps": {
"version": "2.1.29",
"resolved": "https://registry.npmjs.org/@types/yandex-maps/-/yandex-maps-2.1.29.tgz",
@@ -8735,6 +8774,28 @@
"react-dom": ">=16.8"
}
},
"node_modules/react-redux": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
"dependencies": {
"@types/use-sync-external-store": "^0.0.6",
"use-sync-external-store": "^1.4.0"
},
"peerDependencies": {
"@types/react": "^18.2.25 || ^19",
"react": "^18.0 || ^19",
"redux": "^5.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"redux": {
"optional": true
}
}
},
"node_modules/react-remove-scroll": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz",
@@ -8892,6 +8953,19 @@
"recursive-watch": "bin.js"
}
},
"node_modules/redux": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
},
"node_modules/redux-thunk": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
"peerDependencies": {
"redux": "^5.0.0"
}
},
"node_modules/reflect.getprototypeof": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -9009,6 +9083,11 @@
"node": ">=0.10.0"
}
},
"node_modules/reselect": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
},
"node_modules/resolve": {
"version": "1.22.8",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -10249,6 +10328,14 @@
}
}
},
"node_modules/use-sync-external-store": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
"integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

View File

@@ -25,6 +25,7 @@
"@fontsource/open-sans": "^5.1.0",
"@lottiefiles/react-lottie-player": "^3.5.4",
"@pbe/react-yandex-maps": "^1.2.5",
"@reduxjs/toolkit": "^2.5.0",
"@types/react": "^18.3.12",
"dayjs": "^1.11.13",
"express": "^4.21.1",
@@ -37,6 +38,7 @@
"react-i18next": "^15.1.1",
"react-icons": "^5.3.0",
"react-phone-number-input": "^3.4.9",
"react-redux": "^9.2.0",
"react-router-dom": "^6.27.0"
},
"devDependencies": {

View File

@@ -0,0 +1,41 @@
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { getConfigValue } from '@brojs/cli';
import { Master } from '../../models/api/master';
type SuccessResponse<Body> = {
success: true;
body: Body;
};
type ErrorResponse = {
success: false;
message: string;
};
type BaseResponse<Body> = SuccessResponse<Body> | ErrorResponse;
export const api = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: getConfigValue('dry-wash.api') }),
tagTypes: ['Masters'],
endpoints: (builder) => ({
getMasters: builder.query<Master[], void>({
query: () => ({ url: '/arm/masters' }),
transformResponse: (response: BaseResponse<Master[]>) => {
if (response.success) {
return response.body;
}
},
providesTags: ['Masters'],
}),
addMaster: builder.mutation<void, Pick<Master, 'name' | 'phone'>>({
query: (master) => ({
url: '/arm/masters',
method: 'POST',
body: master,
}),
invalidatesTags: ['Masters'],
}),
}),
});

14
src/__data__/store.ts Normal file
View File

@@ -0,0 +1,14 @@
import { configureStore } from '@reduxjs/toolkit';
import { api } from './service/api';
export const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware),
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

View File

@@ -72,6 +72,34 @@ const armService = () => {
return await response.json();
};
const updateOrders = async ({
id,
status,
notes,
masterId,
}: {
id: string;
status?: string;
notes?: string;
masterId?: string;
}) => {
const body = JSON.stringify({ status, notes, masterId });
const response = await fetch(`${endpoint}${ArmEndpoints.MASTERS}/${id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body,
});
if (!response.ok) {
throw new Error(`Failed to fetch update masters: ${response.status}`);
}
return await response.json();
};
const updateMaster = async ({
id,
name,
@@ -98,7 +126,14 @@ const armService = () => {
return await response.json();
};
return { fetchOrders, fetchMasters, addMaster, deleteMaster, updateMaster };
return {
fetchOrders,
fetchMasters,
addMaster,
deleteMaster,
updateMaster,
updateOrders,
};
};
export { armService, ArmEndpoints };

View File

@@ -1,19 +1,23 @@
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
import { Provider } from 'react-redux';
import Routers from './routes';
import ErrorBoundary from './components/ErrorBoundary';
import { store } from './__data__/store';
const App = () => {
return (
<ChakraProvider theme={chakraTheme}>
<ErrorBoundary>
<BrowserRouter>
<Routers />
</BrowserRouter>
</ErrorBoundary>
</ChakraProvider>
<Provider store={store}>
<ChakraProvider theme={chakraTheme}>
<ErrorBoundary>
<BrowserRouter>
<Routers />
</BrowserRouter>
</ErrorBoundary>
</ChakraProvider>
</Provider>
);
};

View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import {
Button,
FormControl,
@@ -18,21 +18,29 @@ import {
import { useTranslation } from 'react-i18next';
import { PhoneIcon } from '@chakra-ui/icons';
import { armService } from '../../api/arm';
import { api } from '../../__data__/service/api';
const MasterDrawer = ({ isOpen, onClose }) => {
const { addMaster } = armService();
const [addMaster, { error, isSuccess }] = api.useAddMasterMutation();
const toast = useToast();
const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
const handleSave = async () => {
if (newMaster.name.trim() === '' || newMaster.phone.trim() === '') {
const trimMaster = {
phone: newMaster.phone.trim(),
name: newMaster.name.trim(),
};
if (trimMaster.name === '' || trimMaster.phone === '') {
return;
}
try {
await addMaster(newMaster);
addMaster(trimMaster);
};
useEffect(() => {
if (isSuccess) {
toast({
title: 'Мастер создан.',
description: `Мастер "${newMaster.name}" успешно добавлен.`,
@@ -42,7 +50,11 @@ const MasterDrawer = ({ isOpen, onClose }) => {
position: 'top-right',
});
onClose();
} catch (error) {
}
}, [isSuccess]);
useEffect(() => {
if (error) {
toast({
title: 'Ошибка при создании мастера.',
description: 'Не удалось добавить мастера. Попробуйте еще раз.',
@@ -53,7 +65,7 @@ const MasterDrawer = ({ isOpen, onClose }) => {
});
console.error(error);
}
};
}, [error]);
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master.drawer',

View File

@@ -7,19 +7,6 @@ import { getTimeSlot } from '../../lib';
import EditableWrapper from '../Editable/Editable';
import { armService } from '../../api/arm';
export interface Schedule {
id: string;
startWashTime: string;
endWashTime: string;
}
export type MasterProps = {
id: string;
name: string;
phone: string;
schedule: Schedule[];
};
const MasterItem = ({ name, phone, id, schedule }) => {
const { updateMaster } = armService();
const { t } = useTranslation('~', {

View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect } from 'react';
import {
Box,
Heading,
@@ -19,8 +19,7 @@ import { useTranslation } from 'react-i18next';
import MasterItem from '../MasterItem';
import MasterDrawer from '../MasterDrawer';
import { armService } from '../../api/arm';
import { MasterProps } from '../MasterItem/MasterItem';
import { api } from '../../__data__/service/api';
const TABLE_HEADERS = [
'name' as const,
@@ -36,35 +35,23 @@ const Masters = () => {
keyPrefix: 'dry-wash.arm.master',
});
const [masters, setMasters] = useState<MasterProps[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const { fetchMasters } = armService();
const {
data: masters,
error,
isLoading,
isSuccess,
} = api.useGetMastersQuery();
useEffect(() => {
const loadMasters = async () => {
setLoading(true);
try {
const data = await fetchMasters();
setMasters(data.body);
} catch (err) {
setError(err.message);
toast({
title: t('error.title'),
status: 'error',
duration: 5000,
isClosable: true,
position: 'bottom-right',
});
} finally {
setLoading(false);
}
};
loadMasters();
}, [toast, t]);
if (error) {
toast({
title: t('error.title'),
status: 'error',
isClosable: true,
position: 'bottom-right',
});
}
}, [error]);
return (
<Box p='8'>
@@ -83,22 +70,21 @@ const Masters = () => {
</Tr>
</Thead>
<Tbody>
{loading && (
{isLoading && (
<Tr>
<Td colSpan={TABLE_HEADERS.length} textAlign='center' py='8'>
<Spinner size='lg' />
</Td>
</Tr>
)}
{!loading && masters.length === 0 && !error && (
{isSuccess && masters.length === 0 && (
<Tr>
<Td colSpan={TABLE_HEADERS.length}>
<Text>{t('table.empty')}</Text>
</Td>
</Tr>
)}
{!loading &&
!error &&
{isSuccess &&
masters.map((master, index) => (
<MasterItem key={index} {...master} />
))}

View File

@@ -1,10 +1,11 @@
import React, { useState } from 'react';
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 { MasterProps } from '../MasterItem/MasterItem';
import { getTimeSlot } from '../../lib';
import { Master } from '../../models/api/master';
import { armService } from '../../api/arm';
const statuses = [
'pending' as const,
@@ -25,9 +26,10 @@ export type OrderProps = {
status?: GetArrItemType<typeof statuses>;
phone?: string;
location?: string;
master: MasterProps;
master: Master;
notes: '';
allMasters: MasterProps[];
allMasters: Master[];
id: string;
};
type Status = (typeof statuses)[number];
@@ -50,7 +52,10 @@ const OrderItem = ({
location,
master,
allMasters,
id,
}: OrderProps) => {
const { updateOrders } = armService();
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.order',
});
@@ -59,15 +64,37 @@ const OrderItem = ({
const bgColor = statusColors[statusSelect];
const [masterSelect, setMaster] = useState(master?.name);
const handelChangeMasters = (e: ChangeEvent<HTMLSelectElement>) => {
const masterName = e.target.value;
const selectedMaster = allMasters.find(
(master) => master.name === masterName,
);
if (selectedMaster) {
setMaster(masterName);
updateOrders({ id, masterId: selectedMaster.id });
} else {
console.error('Master not found');
}
};
const handeChangeStatus = (e: ChangeEvent<HTMLSelectElement>) => {
const status = e.target.value;
updateOrders({ id, status });
setStatus(e.target.value as OrderProps['status']);
};
return (
<Tr>
<Td>{carNumber}</Td>
<Td>{getTimeSlot(startWashTime, endWashTime)}</Td>
<Td>{dayjs(orderDate).format('DD.MM.YYYY')}</Td>
<Td>
{dayjs(orderDate).format('DD.MM.YYYY')} <br />
{getTimeSlot(startWashTime, endWashTime)}
</Td>
<Td>
<Select
value={statusSelect}
onChange={(e) => setStatus(e.target.value as OrderProps['status'])}
onChange={handeChangeStatus}
placeholder={t(`status.placeholder`)}
bg={bgColor}
>
@@ -81,8 +108,8 @@ const OrderItem = ({
<Td>
<Select
value={masterSelect}
onChange={(e) => setMaster(e.target.value as OrderProps['status'])}
placeholder={t(`status.placeholder`)}
onChange={handelChangeMasters}
placeholder={t(`master.placeholder`)}
>
{allMasters.map((item) => (
<option key={item.id} value={item.name}>

View File

@@ -19,11 +19,10 @@ import OrderItem from '../OrderItem';
import { OrderProps } from '../OrderItem/OrderItem';
import { armService } from '../../api/arm';
import DateNavigator from '../DateNavigator';
import { MasterProps } from '../MasterItem/MasterItem';
import { Master } from '../../models/api/master';
const TABLE_HEADERS = [
'carNumber' as const,
'washingTime' as const,
'orderDate' as const,
'status' as const,
'masters' as const,
@@ -42,7 +41,7 @@ const Orders = () => {
const toast = useToast();
const [orders, setOrders] = useState<OrderProps[]>([]);
const [allMasters, setAllMasters] = useState<MasterProps[]>([]);
const [allMasters, setAllMasters] = useState<Master[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [currentDate, setCurrentDate] = useState(new Date());

12
src/models/api/master.ts Normal file
View File

@@ -0,0 +1,12 @@
export interface Schedule {
id: string;
startWashTime: string;
endWashTime: string;
}
export type Master = {
id: string;
name: string;
phone: string;
schedule: Schedule[];
};

View File

@@ -18,11 +18,13 @@ router.get('/', (req, res) => {
<legend>Мастера</legend>
${generateRadioInput('masters', 'success')}
${generateRadioInput('masters', 'error')}
${generateRadioInput('masters', 'empty')}
</fieldset>
<fieldset>
<legend>Заказы</legend>
${generateRadioInput('orders', 'success')}
${generateRadioInput('orders', 'error')}
${generateRadioInput('orders', 'empty')}
</fieldset>
<fieldset>
<legend>Лендинг - Детали заказа</legend>

View File

@@ -53,6 +53,16 @@ router.delete('/arm/masters/:id', (req, res) => {
);
});
router.patch('/orders/:id', (req, res) => {
res
.status(/error/.test(STUBS.orders) ? 500 : 200)
.send(
/^error$/.test(STUBS.orders)
? commonError
: require(`../json/arm-orders/${STUBS.orders}.json`),
);
});
router.post('/arm/orders', (req, res) => {
res
.status(/error/.test(STUBS.orders) ? 500 : 200)
@@ -77,9 +87,7 @@ router.get('/order/:orderId', ({ params }, res) => {
});
router.post('/order/create', (req, res) => {
res
.status(200)
.send({ success: true, body: { ok: true } });
res.status(200).send({ success: true, body: { ok: true } });
});
router.use('/admin', require('./admin'));

View File

@@ -0,0 +1,4 @@
{
"success": true,
"body": []
}

View File

@@ -6,9 +6,14 @@
"name": "Иван Иванов",
"phone": "+7 900 123 45 67"
},
{
"name": "Олег Макаров",
"phone": "79001234567",
"id": "23423442"
},
{
"id": "345354234",
"name": "Иван Иванов",
"name": "Иван Галкин",
"schedule": [ {
"id": "order1",
"startWashTime": "2024-11-24T10:30:00.000Z",

View File

@@ -0,0 +1,4 @@
{
"success": true,
"body": []
}

View File

@@ -7,10 +7,14 @@
"startWashTime": "2024-11-24T10:30:00.000Z",
"endWashTime": "2024-11-24T16:30:00.000Z",
"orderDate": "2024-11-24T08:41:46.366Z",
"status": "progress",
"status": "pending",
"phone": "79001234563",
"location": "Казань, ул. Баумана, 1",
"master": [],
"master": {
"name": "Олег Макаров",
"phone": "79001234567",
"id": "23423442"
},
"notes": ""
},
{