Compare commits
No commits in common. "d30202108c45fe031e4e41bbeced20a236900a68" and "d4965b7abacaffb36da0f047d70649b70bd2dd0c" have entirely different histories.
d30202108c
...
d4965b7aba
@ -1,9 +1,9 @@
|
|||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef */
|
||||||
/* eslint-disable @typescript-eslint/no-require-imports */
|
/* eslint-disable @typescript-eslint/no-require-imports */
|
||||||
const pkg = require('./package');
|
const pkg = require("./package");
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
apiPath: 'stubs/api',
|
apiPath: "stubs/api",
|
||||||
webpackConfig: {
|
webpackConfig: {
|
||||||
output: {
|
output: {
|
||||||
publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
|
publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
|
||||||
@ -11,19 +11,17 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
/* use https://admin.bro-js.ru/ to create config, navigations and features */
|
/* use https://admin.bro-js.ru/ to create config, navigations and features */
|
||||||
navigations: {
|
navigations: {
|
||||||
'dry-wash.main': '/dry-wash',
|
"dry-wash.main": "/dry-wash",
|
||||||
'dry-wash.create': '/order',
|
"dry-wash.create": "/order",
|
||||||
'dry-wash.view.order': '/order/:orderId',
|
"dry-wash.view.order": "/order/:orderId",
|
||||||
'dry-wash.arm.master': 'master',
|
"dry-wash.arm": "/arm",
|
||||||
'dry-wash.arm.order': 'order',
|
|
||||||
'dry-wash.arm': '/arm/*',
|
|
||||||
},
|
},
|
||||||
features: {
|
features: {
|
||||||
'dry-wash-pl': {
|
"dry-wash-pl": {
|
||||||
// add your features here in the format [featureName]: { value: string }
|
// add your features here in the format [featureName]: { value: string }
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
config: {
|
config: {
|
||||||
'dry-wash-pl.api': '/api',
|
"dry-wash-pl.api": "/api",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -13,41 +13,5 @@
|
|||||||
"dry-wash.landing.hero-section.headline": "Revitalize Your Ride with Eco-Friendly Care!",
|
"dry-wash.landing.hero-section.headline": "Revitalize Your Ride with Eco-Friendly Care!",
|
||||||
"dry-wash.landing.make-order-button": "Make order",
|
"dry-wash.landing.make-order-button": "Make order",
|
||||||
"dry-wash.landing.site-logo": "The logo of the \"Dry Master\" company",
|
"dry-wash.landing.site-logo": "The logo of the \"Dry Master\" company",
|
||||||
"dry-wash.landing.social-proof-section.heading": "We are being chosen",
|
"dry-wash.landing.social-proof-section.heading": "We are being chosen"
|
||||||
"dry-wash.arm.master.add": "Add",
|
|
||||||
"dry-wash.arm.order.title": "Orders",
|
|
||||||
"dry-wash.arm.order.status.progress": "In Progress",
|
|
||||||
"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.canceled": "Canceled",
|
|
||||||
"dry-wash.arm.order.status.placeholder": "Select Status",
|
|
||||||
"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",
|
|
||||||
"dry-wash.arm.order.table.header.status": "Status",
|
|
||||||
"dry-wash.arm.order.table.header.telephone": "Telephone",
|
|
||||||
"dry-wash.arm.order.table.header.location": "Location",
|
|
||||||
"dry-wash.arm.master.title": "Masters",
|
|
||||||
"dry-wash.arm.master.table.header.name": "Name",
|
|
||||||
"dry-wash.arm.master.table.header.currentJob": "Current Job",
|
|
||||||
"dry-wash.arm.master.table.header.phone": "Phone",
|
|
||||||
"dry-wash.arm.master.table.header.actions": "Actions",
|
|
||||||
"dry-wash.arm.master.table.actionsMenu.delete": "Delete Master",
|
|
||||||
"dry-wash.arm.master.drawer.title": "Add New Master",
|
|
||||||
"dry-wash.arm.master.drawer.inputName.label": "Full Name",
|
|
||||||
"dry-wash.arm.master.drawer.inputName.placeholder": "Enter Full Name",
|
|
||||||
"dry-wash.arm.master.drawer.inputPhone.label": "Phone Number",
|
|
||||||
"dry-wash.arm.master.drawer.inputPhone.placeholder": "Enter Phone Number",
|
|
||||||
"dry-wash.arm.master.drawer.button.save": "Save",
|
|
||||||
"dry-wash.arm.master.drawer.button.cancel": "Cancel",
|
|
||||||
"dry-wash.arm.master.sideBar.orders": "Orders",
|
|
||||||
"dry-wash.arm.master.sideBar.master": "Masters",
|
|
||||||
"dry-wash.arm.master.sideBar.title": "Dry Master",
|
|
||||||
"dry-wash.notFound.title": "Page Not Found",
|
|
||||||
"dry-wash.notFound.description": "Unfortunately, the page you are looking for does not exist.",
|
|
||||||
"dry-wash.notFound.button.back": "Back to Home",
|
|
||||||
"dry-wash.errorBoundary.title": "Something went wrong",
|
|
||||||
"dry-wash.errorBoundary.description": "We are already working on fixing the issue",
|
|
||||||
"dry-wash.errorBoundary.button.reload": "Reload Page"
|
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
"dry-wash.arm.order.title": "Заказы",
|
"dry-wash.arm.order.title": "Заказы",
|
||||||
"dry-wash.arm.order.status.progress": "Выполняется",
|
"dry-wash.arm.order.status.progress": "Выполняется",
|
||||||
"dry-wash.arm.order.status.complete": "Завершено",
|
"dry-wash.arm.order.status.complete": "Завершено",
|
||||||
"dry-wash.arm.order.status.pending": "В ожидании",
|
"dry-wash.arm.order.status.pending": "в ожидании",
|
||||||
"dry-wash.arm.order.status.working": "В работе",
|
"dry-wash.arm.order.status.working": "В работе",
|
||||||
"dry-wash.arm.order.status.canceled": "Отменено",
|
"dry-wash.arm.order.status.canceled": "Отменено",
|
||||||
"dry-wash.arm.order.status.placeholder": "Выберите статус",
|
"dry-wash.arm.order.status.placeholder": "Выберите статус",
|
||||||
@ -26,9 +26,9 @@
|
|||||||
"dry-wash.arm.master.drawer.inputPhone.placeholder": "Введите номер телефона",
|
"dry-wash.arm.master.drawer.inputPhone.placeholder": "Введите номер телефона",
|
||||||
"dry-wash.arm.master.drawer.button.save": "Сохранить",
|
"dry-wash.arm.master.drawer.button.save": "Сохранить",
|
||||||
"dry-wash.arm.master.drawer.button.cancel": "Отменить",
|
"dry-wash.arm.master.drawer.button.cancel": "Отменить",
|
||||||
"dry-wash.arm.master.sideBar.orders": "Заказы",
|
|
||||||
"dry-wash.arm.master.sideBar.master": "Мастера",
|
|
||||||
"dry-wash.arm.master.sideBar.title": " Сухой мастер",
|
"dry-wash.arm.master.sideBar.title": " Сухой мастер",
|
||||||
|
"dry-wash.arm.master.sideBar.title.master": "Мастера",
|
||||||
|
"dry-wash.arm.master.sideBar.title.orders": "Заказы",
|
||||||
"dry-wash.landing.benefits-section.description": "Откройте для себя преимущества наших услуг по химчистке автомобилей",
|
"dry-wash.landing.benefits-section.description": "Откройте для себя преимущества наших услуг по химчистке автомобилей",
|
||||||
"dry-wash.landing.benefits-section.heading": "Преимущества экологичной автомойки",
|
"dry-wash.landing.benefits-section.heading": "Преимущества экологичной автомойки",
|
||||||
"dry-wash.landing.benefits-section.list.0": "Экологически безопасные продукты",
|
"dry-wash.landing.benefits-section.list.0": "Экологически безопасные продукты",
|
||||||
@ -49,6 +49,5 @@
|
|||||||
"dry-wash.notFound.button.back": " Вернуться на главную",
|
"dry-wash.notFound.button.back": " Вернуться на главную",
|
||||||
"dry-wash.errorBoundary.title":"Что-то пошло не так",
|
"dry-wash.errorBoundary.title":"Что-то пошло не так",
|
||||||
"dry-wash.errorBoundary.description": " Мы уже работаем над исправлением проблемы",
|
"dry-wash.errorBoundary.description": " Мы уже работаем над исправлением проблемы",
|
||||||
"dry-wash.errorBoundary.button.reload": "Перезагрузить страницу",
|
"dry-wash.errorBoundary.button.reload": "Перезагрузить страницу"
|
||||||
"dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
|
|
||||||
}
|
}
|
||||||
|
6
package-lock.json
generated
6
package-lock.json
generated
@ -17,7 +17,6 @@
|
|||||||
"@fontsource/open-sans": "^5.1.0",
|
"@fontsource/open-sans": "^5.1.0",
|
||||||
"@lottiefiles/react-lottie-player": "^3.5.4",
|
"@lottiefiles/react-lottie-player": "^3.5.4",
|
||||||
"@types/react": "^18.3.12",
|
"@types/react": "^18.3.12",
|
||||||
"dayjs": "^1.11.13",
|
|
||||||
"express": "^4.21.1",
|
"express": "^4.21.1",
|
||||||
"framer-motion": "^6.2.8",
|
"framer-motion": "^6.2.8",
|
||||||
"i18next": "^23.16.4",
|
"i18next": "^23.16.4",
|
||||||
@ -5305,11 +5304,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/dayjs": {
|
|
||||||
"version": "1.11.13",
|
|
||||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
|
|
||||||
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
|
|
||||||
},
|
|
||||||
"node_modules/debug": {
|
"node_modules/debug": {
|
||||||
"version": "4.3.7",
|
"version": "4.3.7",
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
||||||
|
@ -25,7 +25,6 @@
|
|||||||
"@fontsource/open-sans": "^5.1.0",
|
"@fontsource/open-sans": "^5.1.0",
|
||||||
"@lottiefiles/react-lottie-player": "^3.5.4",
|
"@lottiefiles/react-lottie-player": "^3.5.4",
|
||||||
"@types/react": "^18.3.12",
|
"@types/react": "^18.3.12",
|
||||||
"dayjs": "^1.11.13",
|
|
||||||
"express": "^4.21.1",
|
"express": "^4.21.1",
|
||||||
"framer-motion": "^6.2.8",
|
"framer-motion": "^6.2.8",
|
||||||
"i18next": "^23.16.4",
|
"i18next": "^23.16.4",
|
||||||
|
@ -1,40 +1,25 @@
|
|||||||
import { generatePath } from 'react-router-dom';
|
import { generatePath } from "react-router-dom";
|
||||||
import { getNavigationValue } from '@brojs/cli';
|
import { getNavigationValue } from "@brojs/cli";
|
||||||
|
|
||||||
import { Order } from '../models';
|
import { Order } from "../models";
|
||||||
|
|
||||||
const getFullUrls = (url: string) =>
|
|
||||||
`${getNavigationValue('dry-wash.main')}${url}`;
|
|
||||||
|
|
||||||
export const URLs = {
|
export const URLs = {
|
||||||
landing: {
|
landing: {
|
||||||
url: getNavigationValue('dry-wash.main'),
|
url: getNavigationValue("dry-wash.main"),
|
||||||
getUrl() {
|
getUrl() {
|
||||||
return this.url;
|
return this.url;
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
orderForm: {
|
orderForm: {
|
||||||
url: getNavigationValue('dry-wash.create'),
|
url: getNavigationValue("dry-wash.create"),
|
||||||
getUrl() {
|
getUrl() {
|
||||||
return this.url;
|
return this.url;
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
orderView: {
|
orderView: {
|
||||||
url: getNavigationValue('dry-wash.view.order'),
|
url: getNavigationValue("dry-wash.view.order"),
|
||||||
getUrl(orderId: Order.Id) {
|
getUrl(orderId: Order.Id) {
|
||||||
return generatePath(this.url, { orderId });
|
return generatePath(this.url, { orderId });
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
armMaster: {
|
|
||||||
url: getNavigationValue('dry-wash.arm.master'),
|
|
||||||
isOn: Boolean(getNavigationValue('dry-wash.arm.master')),
|
|
||||||
},
|
|
||||||
armOrder: {
|
|
||||||
url: getNavigationValue('dry-wash.arm.order'),
|
|
||||||
isOn: Boolean(getNavigationValue('dry-wash.arm.order')),
|
|
||||||
},
|
|
||||||
armBase: {
|
|
||||||
url: getFullUrls(getNavigationValue('dry-wash.arm')),
|
|
||||||
isOn: Boolean(getNavigationValue('dry-wash.arm')),
|
|
||||||
},
|
|
||||||
};
|
};
|
@ -34,16 +34,15 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|||||||
render() {
|
render() {
|
||||||
const { hasError } = this.state;
|
const { hasError } = this.state;
|
||||||
//TODO: добавить анимацию после залива 404 страницы
|
//TODO: добавить анимацию после залива 404 страницы
|
||||||
//TODO: может сделать обертку для хука, чтоб язык менялся без перезагрузки
|
|
||||||
if (hasError) {
|
if (hasError) {
|
||||||
return (
|
return (
|
||||||
<Center minH='100vh'>
|
<Center minH='100vh'>
|
||||||
<VStack spacing={4} textAlign='center'>
|
<VStack spacing={4} textAlign='center'>
|
||||||
<Heading as='h1' size='2xl'>
|
<Heading as='h1' size='2xl'>
|
||||||
{i18next.t('~:dry-wash.errorBoundary.title')}
|
{i18next.t('dry-wash.errorBoundary.title')}
|
||||||
</Heading>
|
</Heading>
|
||||||
<Text fontSize='lg'>
|
<Text fontSize='lg'>
|
||||||
{i18next.t('~:dry-wash.errorBoundary.description')}
|
{i18next.t('dry-wash.errorBoundary.description')}
|
||||||
</Text>
|
</Text>
|
||||||
<Button
|
<Button
|
||||||
colorScheme='teal'
|
colorScheme='teal'
|
||||||
@ -51,7 +50,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|||||||
variant='outline'
|
variant='outline'
|
||||||
onClick={() => window.location.reload()}
|
onClick={() => window.location.reload()}
|
||||||
>
|
>
|
||||||
{i18next.t('~:dry-wash.errorBoundary.button.reload')}
|
{i18next.t('dry-wash.errorBoundary.button.reload')}
|
||||||
</Button>
|
</Button>
|
||||||
</VStack>
|
</VStack>
|
||||||
</Center>
|
</Center>
|
||||||
|
@ -5,33 +5,20 @@ import { Navigate, Route, Routes } from 'react-router-dom';
|
|||||||
import Sidebar from '../Sidebar';
|
import Sidebar from '../Sidebar';
|
||||||
import Orders from '../Orders';
|
import Orders from '../Orders';
|
||||||
import Masters from '../Masters';
|
import Masters from '../Masters';
|
||||||
import { URLs } from '../../__data__/urls';
|
|
||||||
|
|
||||||
const LayoutArm = () => {
|
const LayoutArm = () => (
|
||||||
let defaultRedirect = null;
|
|
||||||
|
|
||||||
if (URLs.armOrder.isOn) {
|
|
||||||
defaultRedirect = URLs.armOrder.url;
|
|
||||||
} else if (URLs.armMaster.isOn) {
|
|
||||||
defaultRedirect = URLs.armMaster.url;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex h='100vh'>
|
<Flex h='100vh'>
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
<Box flex='1' bg='gray.50'>
|
<Box flex='1' bg='gray.50'>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route index element={<Navigate to={defaultRedirect} replace />} />
|
<Route>
|
||||||
{URLs.armOrder.isOn && (
|
<Route index element={<Navigate to='orders' replace />} />
|
||||||
<Route path={URLs.armOrder.url} element={<Orders />} />
|
<Route path='orders' element={<Orders />} />
|
||||||
)}
|
<Route path='masters' element={<Masters />} />
|
||||||
{URLs.armMaster.isOn && (
|
</Route>
|
||||||
<Route path={URLs.armMaster.url} element={<Masters />} />
|
|
||||||
)}
|
|
||||||
</Routes>
|
</Routes>
|
||||||
</Box>
|
</Box>
|
||||||
</Flex>
|
</Flex>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default LayoutArm;
|
export default LayoutArm;
|
||||||
|
@ -7,18 +7,16 @@ import {
|
|||||||
IconButton,
|
IconButton,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { EditIcon } from '@chakra-ui/icons';
|
import { EditIcon } from '@chakra-ui/icons';
|
||||||
import { useTranslation } from 'react-i18next';
|
import i18next from 'i18next';
|
||||||
|
|
||||||
const MasterActionsMenu = () => {
|
const MasterActionsMenu = () => {
|
||||||
const { t } = useTranslation('~', {
|
|
||||||
keyPrefix: 'dry-wash.arm.master.table.actionsMenu',
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Menu>
|
<Menu>
|
||||||
<MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
|
<MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
|
||||||
<MenuList>
|
<MenuList>
|
||||||
<MenuItem>{t('delete')}</MenuItem>
|
<MenuItem>
|
||||||
|
{i18next.t('dry-wash.arm.master.table.actionsMenu.delete')}
|
||||||
|
</MenuItem>
|
||||||
</MenuList>
|
</MenuList>
|
||||||
</Menu>
|
</Menu>
|
||||||
);
|
);
|
||||||
|
@ -12,7 +12,7 @@ import {
|
|||||||
DrawerHeader,
|
DrawerHeader,
|
||||||
DrawerOverlay,
|
DrawerOverlay,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import i18next from 'i18next';
|
||||||
|
|
||||||
const MasterDrawer = ({ isOpen, onClose }) => {
|
const MasterDrawer = ({ isOpen, onClose }) => {
|
||||||
const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
|
const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
|
||||||
@ -22,44 +22,51 @@ const MasterDrawer = ({ isOpen, onClose }) => {
|
|||||||
onClose();
|
onClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
const { t } = useTranslation('~', {
|
|
||||||
keyPrefix: 'dry-wash.arm.master.drawer',
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Drawer isOpen={isOpen} onClose={onClose} size='md'>
|
<Drawer isOpen={isOpen} onClose={onClose} size='md'>
|
||||||
<DrawerOverlay />
|
<DrawerOverlay />
|
||||||
<DrawerContent>
|
<DrawerContent>
|
||||||
<DrawerCloseButton />
|
<DrawerCloseButton />
|
||||||
<DrawerHeader>{t('title')}</DrawerHeader>
|
<DrawerHeader>
|
||||||
|
{i18next.t('dry-wash.arm.master.drawer.title')}
|
||||||
|
</DrawerHeader>
|
||||||
<DrawerBody>
|
<DrawerBody>
|
||||||
<FormControl mb='4'>
|
<FormControl mb='4'>
|
||||||
<FormLabel>{t('inputName.label')}</FormLabel>
|
<FormLabel>
|
||||||
|
{i18next.t('dry-wash.arm.master.drawer.inputName.label')}
|
||||||
|
</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={newMaster.name}
|
value={newMaster.name}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setNewMaster({ ...newMaster, name: e.target.value })
|
setNewMaster({ ...newMaster, name: e.target.value })
|
||||||
}
|
}
|
||||||
placeholder={t('inputName.placeholder')}
|
placeholder={i18next.t(
|
||||||
|
'dry-wash.arm.master.drawer.inputName.placeholder',
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<FormLabel> {t('inputPhone.label')}</FormLabel>
|
<FormLabel>
|
||||||
|
{' '}
|
||||||
|
{i18next.t('dry-wash.arm.master.drawer.inputPhone.label')}
|
||||||
|
</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={newMaster.phone}
|
value={newMaster.phone}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setNewMaster({ ...newMaster, phone: e.target.value })
|
setNewMaster({ ...newMaster, phone: e.target.value })
|
||||||
}
|
}
|
||||||
placeholder={t('inputPhone.placeholder')}
|
placeholder={i18next.t(
|
||||||
|
'dry-wash.arm.master.drawer.inputPhone.placeholder',
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</DrawerBody>
|
</DrawerBody>
|
||||||
<DrawerFooter>
|
<DrawerFooter>
|
||||||
<Button colorScheme='teal' mr={3} onClick={handleSave}>
|
<Button colorScheme='teal' mr={3} onClick={handleSave}>
|
||||||
{t('button.save')}
|
{i18next.t('dry-wash.arm.master.drawer.button.save')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant='ghost' onClick={onClose}>
|
<Button variant='ghost' onClick={onClose}>
|
||||||
{t('button.cancel')}
|
{i18next.t('dry-wash.arm.master.drawer.button.cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
</DrawerFooter>
|
</DrawerFooter>
|
||||||
</DrawerContent>
|
</DrawerContent>
|
||||||
|
@ -2,7 +2,6 @@ import React from 'react';
|
|||||||
import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react';
|
import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react';
|
||||||
|
|
||||||
import MasterActionsMenu from '../MasterActionsMenu';
|
import MasterActionsMenu from '../MasterActionsMenu';
|
||||||
import { getTimeSlot } from '../../lib/date-helpers';
|
|
||||||
|
|
||||||
const MasterItem = ({ name, schedule, phone }) => {
|
const MasterItem = ({ name, schedule, phone }) => {
|
||||||
return (
|
return (
|
||||||
@ -10,9 +9,9 @@ const MasterItem = ({ name, schedule, phone }) => {
|
|||||||
<Td>{name}</Td>
|
<Td>{name}</Td>
|
||||||
<Td>
|
<Td>
|
||||||
<Stack direction='row'>
|
<Stack direction='row'>
|
||||||
{schedule.map(({ startWashTime, endWashTime }, index) => (
|
{schedule.map((time, index) => (
|
||||||
<Badge colorScheme={'green'} key={index}>
|
<Badge colorScheme={'green'} key={index}>
|
||||||
{getTimeSlot(startWashTime, endWashTime)}
|
{time}
|
||||||
</Badge>
|
</Badge>
|
||||||
))}
|
))}
|
||||||
</Stack>
|
</Stack>
|
||||||
|
@ -11,44 +11,37 @@ import {
|
|||||||
useDisclosure,
|
useDisclosure,
|
||||||
Flex,
|
Flex,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import i18next from 'i18next';
|
||||||
|
|
||||||
|
import { mastersData } from '../../mocks';
|
||||||
import MasterItem from '../MasterItem';
|
import MasterItem from '../MasterItem';
|
||||||
import MasterDrawer from '../MasterDrawer';
|
import MasterDrawer from '../MasterDrawer';
|
||||||
import data from '../../../stubs/json/arm-masters/success.json';
|
|
||||||
|
|
||||||
const TABLE_HEADERS = [
|
const TABLE_HEADERS = ['name', 'currentJob', 'phone', 'actions'];
|
||||||
'name' as const,
|
|
||||||
'currentJob' as const,
|
|
||||||
'phone' as const,
|
|
||||||
'actions' as const,
|
|
||||||
];
|
|
||||||
|
|
||||||
const Masters = () => {
|
const Masters = () => {
|
||||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||||
|
|
||||||
const { t } = useTranslation('~', {
|
|
||||||
keyPrefix: 'dry-wash.arm.master',
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box p='8'>
|
<Box p='8'>
|
||||||
<Flex justifyContent='space-between' alignItems='center' mb='5'>
|
<Flex justifyContent='space-between' alignItems='center' mb='5'>
|
||||||
<Heading size='lg'> {t('title')}</Heading>
|
<Heading size='lg'> {i18next.t('dry-wash.arm.master.title')}</Heading>
|
||||||
<Button colorScheme='green' onClick={onOpen}>
|
<Button colorScheme='green' onClick={onOpen}>
|
||||||
+ {t('add')}
|
+ {i18next.t('dry-wash.arm.master.add')}
|
||||||
</Button>
|
</Button>
|
||||||
</Flex>
|
</Flex>
|
||||||
<Table variant='simple' colorScheme='blackAlpha'>
|
<Table variant='simple' colorScheme='blackAlpha'>
|
||||||
<Thead>
|
<Thead>
|
||||||
<Tr>
|
<Tr>
|
||||||
{TABLE_HEADERS.map((name) => (
|
{TABLE_HEADERS.map((name) => (
|
||||||
<Th key={name}>{t(`table.header.${name}`)}</Th>
|
<Th key={name}>
|
||||||
|
{i18next.t(`dry-wash.arm.master.table.header.${name}`)}
|
||||||
|
</Th>
|
||||||
))}
|
))}
|
||||||
</Tr>
|
</Tr>
|
||||||
</Thead>
|
</Thead>
|
||||||
<Tbody>
|
<Tbody>
|
||||||
{data.body.map((master, index) => (
|
{mastersData.map((master, index) => (
|
||||||
<MasterItem key={index} {...master} />
|
<MasterItem key={index} {...master} />
|
||||||
))}
|
))}
|
||||||
</Tbody>
|
</Tbody>
|
||||||
|
@ -1,60 +1,33 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Td, Tr, Link, Select } from '@chakra-ui/react';
|
import { Td, Tr, Link, Select } from '@chakra-ui/react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import i18next from 'i18next';
|
||||||
import dayjs from 'dayjs';
|
|
||||||
|
|
||||||
import { getTimeSlot } from '../../lib/date-helpers';
|
const statuses = ['pending', 'progress', 'working', 'canceled', 'complete'];
|
||||||
|
|
||||||
const statuses = [
|
|
||||||
'pending' as const,
|
|
||||||
'progress' as const,
|
|
||||||
'working' as const,
|
|
||||||
'canceled' as const,
|
|
||||||
'complete' as const,
|
|
||||||
];
|
|
||||||
|
|
||||||
type GetArrItemType<ArrType> =
|
|
||||||
ArrType extends Array<infer ItemType> ? ItemType : never;
|
|
||||||
|
|
||||||
export type OrderProps = {
|
|
||||||
carNumber?: string;
|
|
||||||
startWashTime?: string;
|
|
||||||
endWashTime?: string;
|
|
||||||
orderDate?: string;
|
|
||||||
status?: GetArrItemType<typeof statuses>;
|
|
||||||
phone?: string;
|
|
||||||
location?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const OrderItem = ({
|
const OrderItem = ({
|
||||||
carNumber,
|
carNumber,
|
||||||
startWashTime,
|
washTime,
|
||||||
endWashTime,
|
|
||||||
orderDate,
|
orderDate,
|
||||||
status,
|
status,
|
||||||
phone,
|
phone,
|
||||||
location,
|
location,
|
||||||
}: OrderProps) => {
|
}) => {
|
||||||
const { t } = useTranslation('~', {
|
|
||||||
keyPrefix: 'dry-wash.arm.order',
|
|
||||||
});
|
|
||||||
|
|
||||||
const [statusSelect, setStatus] = useState(status);
|
const [statusSelect, setStatus] = useState(status);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tr>
|
<Tr>
|
||||||
<Td>{carNumber}</Td>
|
<Td>{carNumber}</Td>
|
||||||
<Td>{getTimeSlot(startWashTime, endWashTime)}</Td>
|
<Td>{washTime}</Td>
|
||||||
<Td>{dayjs(orderDate).format('DD.MM.YYYY')}</Td>
|
<Td>{orderDate}</Td>
|
||||||
<Td>
|
<Td>
|
||||||
<Select
|
<Select
|
||||||
value={statusSelect}
|
value={statusSelect}
|
||||||
onChange={(e) => setStatus(e.target.value as OrderProps['status'])}
|
onChange={(e) => setStatus(e.target.value)}
|
||||||
placeholder={t(`status.placeholder`)}
|
placeholder={i18next.t(`dry-wash.arm.order.status.placeholder`)}
|
||||||
>
|
>
|
||||||
{statuses.map((status) => (
|
{statuses.map((status) => (
|
||||||
<option key={status} value={status}>
|
<option key={status} value={status}>
|
||||||
{t(`status.${status}`)}
|
{i18next.t(`dry-wash.arm.order.status.${status}`)}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</Select>
|
</Select>
|
||||||
|
@ -1,45 +1,36 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
|
import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import React from 'react';
|
||||||
|
import i18next from 'i18next';
|
||||||
|
|
||||||
|
import { ordersData } from '../../mocks';
|
||||||
import OrderItem from '../OrderItem';
|
import OrderItem from '../OrderItem';
|
||||||
import { OrderProps } from '../OrderItem/OrderItem';
|
|
||||||
import data from '../../../stubs/json/arm-orders/success.json';
|
|
||||||
|
|
||||||
const Orders = () => {
|
const Orders = () => {
|
||||||
const { t } = useTranslation('~', {
|
|
||||||
keyPrefix: 'dry-wash.arm.order',
|
|
||||||
});
|
|
||||||
|
|
||||||
const TABLE_HEADERS = [
|
const TABLE_HEADERS = [
|
||||||
'carNumber' as const,
|
'carNumber',
|
||||||
'washingTime' as const,
|
'washingTime',
|
||||||
'orderDate' as const,
|
'orderDate',
|
||||||
'status' as const,
|
'status',
|
||||||
'telephone' as const,
|
'telephone',
|
||||||
'location' as const,
|
'location',
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box p='8'>
|
<Box p='8'>
|
||||||
<Heading size='lg' mb='5'>
|
<Heading size='lg' mb='5'>
|
||||||
{t('title')}
|
{i18next.t('dry-wash.arm.order.title')}
|
||||||
</Heading>
|
</Heading>
|
||||||
<Table variant='simple' colorScheme='blackAlpha'>
|
<Table variant='simple' colorScheme='blackAlpha'>
|
||||||
<Thead>
|
<Thead>
|
||||||
<Tr>
|
<Tr>
|
||||||
{TABLE_HEADERS.map((name, key) => (
|
{TABLE_HEADERS.map((name, key) => (
|
||||||
<Th key={key}>{t(`table.header.${name}`)}</Th>
|
<Th key={key}>
|
||||||
|
{i18next.t(`dry-wash.arm.order.table.header.${name}`)}
|
||||||
|
</Th>
|
||||||
))}
|
))}
|
||||||
</Tr>
|
</Tr>
|
||||||
</Thead>
|
</Thead>
|
||||||
<Tbody>
|
<Tbody>
|
||||||
{data.body.map((order, index) => (
|
{ordersData.map((order, index) => (
|
||||||
<OrderItem
|
<OrderItem key={index} {...order} />
|
||||||
key={index}
|
|
||||||
{...order}
|
|
||||||
status={order.status as OrderProps['status']}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</Tbody>
|
</Tbody>
|
||||||
</Table>
|
</Table>
|
||||||
|
@ -1,19 +1,10 @@
|
|||||||
import { Box, Button, Heading, VStack, Divider } from '@chakra-ui/react';
|
import { Box, Button, Heading, VStack } from '@chakra-ui/react';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useLocation, Link } from 'react-router-dom';
|
import { Divider } from '@chakra-ui/react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import i18next from 'i18next';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
import { URLs } from '../../__data__/urls';
|
const Sidebar = () => (
|
||||||
|
|
||||||
const Sidebar = () => {
|
|
||||||
const location = useLocation();
|
|
||||||
const isActive = (keyword: string) => location.pathname.includes(keyword);
|
|
||||||
|
|
||||||
const { t } = useTranslation('~', {
|
|
||||||
keyPrefix: 'dry-wash.arm.master.sideBar',
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box
|
<Box
|
||||||
borderRight='1px solid black'
|
borderRight='1px solid black'
|
||||||
bg='gray.50'
|
bg='gray.50'
|
||||||
@ -23,38 +14,33 @@ const Sidebar = () => {
|
|||||||
pt='8'
|
pt='8'
|
||||||
>
|
>
|
||||||
<Heading color='green' size='lg' mb='5'>
|
<Heading color='green' size='lg' mb='5'>
|
||||||
{t('title')}
|
{i18next.t(`dry-wash.arm.master.sideBar.title`)}
|
||||||
</Heading>
|
</Heading>
|
||||||
|
|
||||||
<VStack align='start' spacing='4'>
|
<VStack align='start' spacing='4'>
|
||||||
<Divider />
|
<Divider />
|
||||||
{URLs.armOrder.isOn && (
|
|
||||||
<Button
|
<Button
|
||||||
as={Link}
|
as={Link}
|
||||||
to={URLs.armOrder.url}
|
to='orders'
|
||||||
w='100%'
|
w='100%'
|
||||||
colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
|
colorScheme='green'
|
||||||
variant={isActive(URLs.armOrder.url) ? 'solid' : 'ghost'}
|
variant='ghost'
|
||||||
>
|
>
|
||||||
{t('orders')}
|
{i18next.t(`dry-wash.arm.master.sideBar.title.orders`)}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
|
||||||
<Divider />
|
<Divider />
|
||||||
{URLs.armMaster.isOn && (
|
|
||||||
<Button
|
<Button
|
||||||
as={Link}
|
as={Link}
|
||||||
to={URLs.armMaster.url}
|
to='masters'
|
||||||
w='100%'
|
w='100%'
|
||||||
colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
|
colorScheme='green'
|
||||||
variant={isActive(URLs.armMaster.url) ? 'solid' : 'ghost'}
|
variant='ghost'
|
||||||
>
|
>
|
||||||
{t('master')}
|
{i18next.t(`dry-wash.arm.master.sideBar.title.master`)}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
|
||||||
<Divider />
|
<Divider />
|
||||||
</VStack>
|
</VStack>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default Sidebar;
|
export default Sidebar;
|
||||||
|
@ -7,7 +7,7 @@ import { LogoSvg } from '../../../assets/icons';
|
|||||||
export const SiteLogo: FC = () => {
|
export const SiteLogo: FC = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return <Image src={LogoSvg} alt={t('~:dry-wash.landing.site-logo')} w={40} />;
|
return <Image src={LogoSvg} alt={t('dry-wash.landing.site-logo')} w={40} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
// todo: replace Image by SVG React component
|
// todo: replace Image by SVG React component
|
||||||
|
@ -1,12 +0,0 @@
|
|||||||
import dayjs from 'dayjs';
|
|
||||||
import i18next from 'i18next';
|
|
||||||
|
|
||||||
export const getTimeSlot = (start: string, end: string) => {
|
|
||||||
const startDay = dayjs(start).format('HH:mm');
|
|
||||||
const endDay = dayjs(end).format('HH:mm');
|
|
||||||
|
|
||||||
return i18next.t('~:dry-wash.washTime.timeSlot', {
|
|
||||||
start: startDay,
|
|
||||||
end: endDay,
|
|
||||||
});
|
|
||||||
};
|
|
35
src/mocks/index.ts
Normal file
35
src/mocks/index.ts
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
export const mastersData = [
|
||||||
|
{
|
||||||
|
id: 'masters1',
|
||||||
|
name: 'Иван Иванов',
|
||||||
|
schedule: ['15:00 - 16:30', '17:00 - 18:00'],
|
||||||
|
phone: '+7 900 123 45 67',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'masters2',
|
||||||
|
name: 'Сергей Петров',
|
||||||
|
schedule: ['10:00 - 12:30', '14:00 - 15:30', '16:00 - 17:00'],
|
||||||
|
phone: '+7 900 234 56 78',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const ordersData = [
|
||||||
|
{
|
||||||
|
id: 'order1',
|
||||||
|
carNumber: 'A123BC',
|
||||||
|
washTime: '10:30',
|
||||||
|
orderDate: '2024-10-31',
|
||||||
|
status: 'progress',
|
||||||
|
phone: '79001234567',
|
||||||
|
location: 'Казань, ул. Баумана, 1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'order2',
|
||||||
|
carNumber: 'B456CD',
|
||||||
|
washTime: '11:00',
|
||||||
|
orderDate: '2024-10-31',
|
||||||
|
status: 'complete',
|
||||||
|
phone: '79002345678',
|
||||||
|
location: 'Казань, ул. Кремлёвская, 3',
|
||||||
|
},
|
||||||
|
];
|
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
import LayoutArm from '../../components/LayoutArm';
|
import LayoutArm from '../../components/LayoutArm';
|
||||||
|
|
||||||
|
@ -17,9 +17,7 @@ const Routers = () => {
|
|||||||
<Route path={URLs.landing.url} element={<Landing />} />
|
<Route path={URLs.landing.url} element={<Landing />} />
|
||||||
<Route path={URLs.orderForm.url} element={<OrderForm />} />
|
<Route path={URLs.orderForm.url} element={<OrderForm />} />
|
||||||
<Route path={URLs.orderView.url} element={<OrderView />} />
|
<Route path={URLs.orderView.url} element={<OrderView />} />
|
||||||
{URLs.armBase.isOn && (
|
<Route path='/dry-wash/arm/*' element={<Arm />}></Route>
|
||||||
<Route path={URLs.armBase.url} element={<Arm />}></Route>
|
|
||||||
)}
|
|
||||||
<Route path='*' element={<NotFound />} />
|
<Route path='*' element={<NotFound />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
@ -1,35 +0,0 @@
|
|||||||
{
|
|
||||||
"success": true,
|
|
||||||
"body": [
|
|
||||||
{
|
|
||||||
"id": "masters1",
|
|
||||||
"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"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "masters12",
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
@ -1,25 +0,0 @@
|
|||||||
{
|
|
||||||
"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": "progress",
|
|
||||||
"phone": "79001234563",
|
|
||||||
"location": "Казань, ул. Баумана, 1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user