kayashov73/my-bar
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

удалены основные сущности фронт

Browse Source
This commit is contained in:
Kayashov.SM
2025-04-28 12:39:53 +04:00
parent 91f94ddea9
commit 1af2bc6f05
24 changed files with 23 additions and 853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
front/src/app/NavigationRoutes.js
View File

@@ -5,18 +5,12 @@ import NotFoundPage from "./pages/notFound/NotFoundPage";
import {UserLayout} from "./layout/UserLayout";
import {HomeRedirect} from "./HomeRedirect";
import {PublicLayout} from "./layout/PublicLayout";
import QueuePage from "./pages/queue/QueuePage";
import LoginPage from "./pages/auth/sign-in/loginPage";
import {TelegramCode} from "./pages/auth/sign-in/telegram-code";
import {IngredientsPage} from "./pages/ingredients/IngredientsPage";
import {MenuPage} from "./pages/cocktails/MenuPage";
import {AllCocktailsPage} from "./pages/cocktails/AllCocktailsPage";
import {EditIngredientPage} from "./pages/ingredients/EditIngredientPage";
import {EditCocktailPage} from "./pages/cocktails/EditCocktailPage";
import {MyQueuePage} from "./pages/queue/MyQueuePage";
import {VisitorPage} from "./pages/VisitorPage";
import {CocktailMenuBarPage} from "./pages/cocktails/CocktailMenuBarPage";
import {MyBarPage} from "./pages/MyBarPage";
import {useEffect, useState} from "react";
export function NavigationRoutes() {
@@ -70,47 +64,17 @@ const authPages = [
children: (<MenuPage/>),
exact: true,
},
{
path: paths.bar.cocktails,
isPrivate: true,
children: (<AllCocktailsPage/>)
},
{
path: paths.bar.list,
isPrivate: true,
children: (<MyBarPage/>)
},
{
path: paths.orders.my,
isPrivate: true,
children: (<MyQueuePage/>)
},
{
path: paths.bar.ingredients,
isPrivate: true,
children: (<IngredientsPage/>)
},
{
path: paths.bar.ordersQueue,
isPrivate: true,
children: (<QueuePage/>),
},
{
path: paths.visitor.inBar,
isPrivate: true,
children: (<VisitorPage/>)
},
{
path: paths.bar.ingredientEdit,
isPrivate: true,
forAdmin: true,
children: (<EditIngredientPage/>)
},
{
path: paths.bar.menu,
isPrivate: true,
children: (<CocktailMenuBarPage/>)
},
{
path: paths.bar.cocktailEdit,
isPrivate: true,

62
front/src/app/pages/MyBarPage.js
View File

@@ -1,62 +0,0 @@
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import {FormControl, InputAdornment, InputLabel, OutlinedInput, Tabs} from "@mui/material";
import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
import * as React from "react";
import {useState} from "react";
import Tab from "@mui/material/Tab";
import {a11yProps} from "../../components/core/tabProps";
import {CustomTabPanel} from "../../components/core/TabPanel";
import {BarList} from "../../components/bar/BarList";
export function MyBarPage() {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => setValue(newValue);
const [findString, setFindString] = useState("");
return (
<Box>
{/*Заголовок*/}
<Toolbar>
<Typography variant="h6" component="div" sx={{flexGrow: 1}}>Мои бары</Typography>
</Toolbar>
{/*Поиск*/}
<Paper elevation={6} sx={{my: 2}}>
<FormControl sx={{m: 1, width: 'calc(100% - 20px'}}>
<InputLabel htmlFor="outlined-adornment-amount">Поиск</InputLabel>
<OutlinedInput
onChange={(e) => setFindString(e.target.value)}
label="With normal TextField"
startAdornment={
<InputAdornment position="start">
<IconButton edge="end">
<SearchIcon/>
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</Paper>
{/*Рабочее поле ингредиентов*/}
<Box>
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
<Tab label="Мои бары" {...a11yProps(0)} />
<Tab label="Список" {...a11yProps(1)} />
</Tabs>
</Box>
<Box>
<CustomTabPanel value={value} index={0}>
<BarList all={false} find={findString}/>
</CustomTabPanel>
<CustomTabPanel value={value} index={1}>
<BarList all={true} find={findString}/>
</CustomTabPanel>
</Box>
{/*Модальное окно информации об ингредиенте*/}
{/*<IngredientInfoModal ingredient={selectedInfo} open={openModal} closeHandler={handleCloseModal}/>*/}
</Box>
)
}

77
front/src/app/pages/VisitorPage.js
View File

@@ -1,77 +0,0 @@
import Box from "@mui/material/Box";
import {useEffect, useState} from "react";
import {api} from "../../lib/clients/api";
import {requests} from "../../requests";
import {useAlert} from "../../hooks/useAlert";
import Typography from "@mui/material/Typography";
import {VisitorItem} from "../../components/visitor/VisitorItem";
import Toolbar from "@mui/material/Toolbar";
import * as React from "react";
import Button from "@mui/material/Button";
import {useUser} from "../../hooks/useUser";
export function VisitorPage() {
const {session, checkSession} = useUser();
const [visitors, setVisitors] = useState([])
const [open, setOpen] = useState(false);
const {createError} = useAlert();
useEffect(() => {
api().get(requests.visitors.all)
.then((r) => {
setVisitors(r.data)
})
.catch(() => createError("Ошибка получения данных"))
// eslint-disable-next-line
}, []);
useEffect(() => {
setOpen(session.isActive);
}, [session, checkSession])
const changeHandler = (visitor) => {
const arr = visitors.map((v) => {
if(v.id === visitor.id) {
return {
...visitor,
invited: !visitor.invited
}
}
return v;
})
api().post(`${requests.visitors.invite}id=${visitor.id}&value=${!visitor.invited}`)
.then(() => setVisitors(arr))
.catch(() => createError("Ошибка запроса"))
}
const changeShift = () => {
api().post(`${requests.bar.session.change}?value=${!open}`)
.then(() => {
checkSession?.();
setOpen(!open)
})
.catch(() => createError("Ошибка закрытия сессии"))
}
return (
<Box>
{/*Заголовок*/}
<Toolbar>
<Typography variant="h6" component="div" sx={{flexGrow: 1}}>Посетители</Typography>
</Toolbar>
<Box ml={0} mb={2}>
{visitors.map((v) => {
return (
<VisitorItem key={v.id} visitor={v} changeHandler={changeHandler} open={open}/>
)
})}
</Box>
<Button
variant='contained'
color={open ? 'error' : 'success'}
onClick={() => changeShift()}
>{`${open ? "Закрыть " : "Открыть "}смену`}</Button>
</Box>
)
}

7
front/src/app/pages/cocktails/AllCocktailsPage.js
View File

@@ -1,7 +0,0 @@
import CocktailsPageContent from "./CocktailsPageContent";
export function AllCocktailsPage() {
return (
<CocktailsPageContent all={true}/>
)
}

122
front/src/app/pages/cocktails/CocktailMenuBarPage.js
View File

@@ -1,122 +0,0 @@
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import {Fab, FormControl, FormControlLabel, InputAdornment, InputLabel, OutlinedInput} from "@mui/material";
import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
import Switch from "@mui/material/Switch";
import {blue} from "@mui/material/colors";
import UpIcon from "@mui/icons-material/KeyboardArrowUp";
import {Loading} from "../../../components/core/Loading";
import * as React from "react";
import {useEffect, useMemo, useState} from "react";
import {CocktailsList} from "../../../components/cocktails/CocktailsList";
import {requests} from "../../../requests";
import {api} from "../../../lib/clients/api";
import {useAlert} from "../../../hooks/useAlert";
import {CocktailInfoModal} from "../../../components/cocktails/CocktailInfoModal";
import {useSelect} from "../../../hooks/useSelect";
export function CocktailMenuBarPage() {
const {createError} = useAlert();
const [grouping, setGrouping] = useState(true);
const [findString, setFindString] = useState("");
const [loading, setLoading] = useState(true);
const [cocktails, setCocktails] = useState([]);
const {setCocktail, state} = useSelect();
useEffect(() => {
api().get(`${requests.cocktails.menu}?all=true`)
.then((r) => {
setCocktails(r.data);
setLoading(false);
})
.catch(() => createError("Ошибка получения данных"))
// eslint-disable-next-line
}, []);
const handleOpenModal = (row) => {
setCocktail(row);
}
const changeHandler = (row, value) => {
const newState = cocktails.map((r) => {
if (r.id !== row.id) {
return r;
}
return {
...r,
inMenu: value
}
});
api().post(`${requests.cocktails.menu}?id=${row.id}&value=${value}`)
.then(() => {
setCocktails(newState);
}).catch(() => createError("Ошибка сохранения данных"))
}
const visibleRows = useMemo(() => {
if (findString === "") {
return cocktails;
}
let regExp = new RegExp("(.*?)" + findString + "(.*?)", "i");
return cocktails
.filter((row) => row.name.split(" ").map((n) => n.match(regExp) !== null).includes(true))
// eslint-disable-next-line
}, [cocktails, findString])
return (
<Box>
{/*Заголовок*/}
<Toolbar>
<Typography variant="h6" component="div" sx={{flexGrow: 1}}>Меню бара</Typography>
</Toolbar>
{/*Поиск*/}
<Paper elevation={6} sx={{my: 2}}>
<FormControl sx={{m: 1, width: 'calc(100% - 20px'}}>
<InputLabel htmlFor="outlined-adornment-amount">Поиск</InputLabel>
<OutlinedInput
onChange={(e) => setFindString(e.target.value)}
label="With normal TextField"
startAdornment={
<InputAdornment position="start">
<IconButton edge="end">
<SearchIcon/>
</IconButton>
</InputAdornment>
}
/>
</FormControl>
<FormControlLabel sx={{ml: '2px'}}
control={<Switch defaultChecked/>}
onClick={() => setGrouping(!grouping)}
label="Группировать"
labelPlacement="end"/>
</Paper>
{/*Рабочее поле коктейлей*/}
<CocktailsList rows={visibleRows} changeHandler={changeHandler}
infoHandler={handleOpenModal} grouping={grouping}/>
{/*Иконка возврата наверх*/}
<Fab sx={{
alpha: '30%',
position: 'sticky',
bottom: '16px',
color: 'common.white',
bgcolor: blue[600],
'&:hover': {
bgcolor: blue[600],
},
}}
onClick={() => window.window.scrollTo(0, 0)}
aria-label='Expand'
color='inherit'>
<UpIcon/>
</Fab>
{/*Загрузчик*/}
<Loading loading={loading}/>
{/*Модальное окно информации об ингредиенте*/}
<CocktailInfoModal row={state.cocktail}/>
</Box>
)
}

12
front/src/app/pages/cocktails/CocktailsPageContent.js
View File

@@ -22,6 +22,7 @@ import {getComparator} from "../../../components/core/getComparator";
const emptyFilter = {
search: "",
all: false,
hidden: true,
onlyFavourite: false,
glass: [],
@@ -34,7 +35,7 @@ const emptyFilter = {
sorting: "Название по возрастанию"
}
const CocktailsPageContent = ({all}) => {
const CocktailsPageContent = () => {
const {user} = useUser();
const {createError, createSuccess} = useAlert();
const [allowIngredients, setAllowIngredients] = useState([])
@@ -56,7 +57,6 @@ const CocktailsPageContent = ({all}) => {
setLoad(true);
const request = {
...filter,
all: all,
sort: sortList.find((s) => s.name === filter.sorting).id,
page: page + 1,
size: size,
@@ -110,7 +110,7 @@ const CocktailsPageContent = ({all}) => {
// eslint-disable-next-line
}, [filter])
useEffect(() => {
if (!all) {
if (!filter.all) {
return;
}
const ingredients = new Set();
@@ -197,7 +197,7 @@ const CocktailsPageContent = ({all}) => {
if (r.id !== row.id) {
return r;
}
if (all) {
if (filter.all) {
return {
...r,
inMenu: value
@@ -233,12 +233,10 @@ const CocktailsPageContent = ({all}) => {
handleFilterChange={handleFilterChange}
handleClearFilter={handleFilterClear}
barmen={user.role !== 'USER'}
all={all}
/>
{/*todo: доделать фильтр по количеству недостающих ингредиентов*/}
{
(all && filter.iCount === 1) && (
(filter.all && filter.iCount === 1) && (
<Paper sx={{mt: 1}}>
<CheckMarks rows={chips} name={"Выбор ингредиента"} filterName={"ingredient"}
filterValue={filter.ingredient}

2
front/src/app/pages/cocktails/MenuPage.js
View File

@@ -2,6 +2,6 @@ import CocktailsPageContent from "./CocktailsPageContent";
export function MenuPage() {
return (
<CocktailsPageContent all={false}/>
<CocktailsPageContent/>
)
}

10
front/src/app/pages/ingredients/IngredientsPage.js
View File

@@ -23,7 +23,6 @@ import {useSelect} from "../../../hooks/useSelect";
export function IngredientsPage() {
const [value, setValue] = React.useState(0);
const [grouping, setGrouping] = useState(true);
const handleChange = (event, newValue) => setValue(newValue);
const [loading, setLoading] = useState(true);
const [findString, setFindString] = useState("");
@@ -101,11 +100,6 @@ export function IngredientsPage() {
}
/>
</FormControl>
<FormControlLabel sx={{ml: '2px'}}
control={<Switch defaultChecked/>}
onClick={() => setGrouping(!grouping)}
label="Группировать"
labelPlacement="end"/>
</Paper>
{/*Рабочее поле ингредиентов*/}
<Box>
@@ -117,11 +111,11 @@ export function IngredientsPage() {
<Box>
<CustomTabPanel value={value} index={0}>
<IngredientList rows={ingredientsInBar} value={false} changeHandler={changeHandler}
infoHandler={handleOpenModal} grouping={grouping}/>
infoHandler={handleOpenModal}/>
</CustomTabPanel>
<CustomTabPanel value={value} index={1}>
<IngredientList rows={ingredientsToAdd} value={true} changeHandler={changeHandler}
infoHandler={handleOpenModal} grouping={grouping}/>
infoHandler={handleOpenModal}/>
</CustomTabPanel>
</Box>
<Fab sx={{

7
front/src/app/pages/queue/MyQueuePage.js
View File

@@ -1,7 +0,0 @@
import {QueueContent} from "./QueueContent";
export function MyQueuePage() {
return (
<QueueContent my={true}/>
)
}

82
front/src/app/pages/queue/QueueContent.js
View File

@@ -1,82 +0,0 @@
import {useEffect, useMemo, useState} from "react";
import {useAlert} from "../../../hooks/useAlert";
import * as React from "react";
import {api} from "../../../lib/clients/api";
import {requests} from "../../../requests";
import {createHeadCell} from "../../../components/orders/createHeadCelll";
import {Loading} from "../../../components/core/Loading";
import OrderModal from "../../../components/orders/OrderModal";
import EnhancedTable from "../../../components/orders/EnhancedTable";
export function QueueContent({my}) {
const [load, setLoad] = useState(false);
const [orders, setOrders] = useState([]);
const {createSuccess, createError} = useAlert();
const [openModal, setOpenModal] = React.useState(false);
const [selected, setSelected] = useState(null);
useEffect(() => {
setLoad(false);
const url = my ? requests.bar.myOrders : requests.bar.order;
api().get(url)
.then(r => {
setOrders(r.data);
setLoad(true);
})
.catch(() => {
createError("Ошибка при получении заказов");
setLoad(true)
})
// eslint-disable-next-line
}, []);
const sliced = useMemo(() => orders.sort((a, b) => b.id - a.id), [orders])
const cells = [
createHeadCell('id', true, true, 'Номер заказа', "20px"),
createHeadCell('cocktail.name', true, false, 'Коктейль', "40px"),
createHeadCell('visitor.name', true, false, 'Клиент', "40px"),
createHeadCell('status', true, true, 'Статус', "30px"),
];
const changeOrderHandle = (row, status) => {
let url = requests.bar.order + "?id=" + row.id;
let isCancel = status === "CANCEL";
let request = isCancel ? api().delete(url) : api().put(url);
request
.then(() => {
createSuccess(isCancel ? "Заказ отменен" : "Заказ готов");
let newArr = orders.filter((order) => {
if (order.id !== row.id) {
row.status = isCancel ? "CANCEL" : "DONE";
return row;
}
return order;
})
setOrders(newArr);
setSelected(null);
setOpenModal(false);
})
.catch(() => createError("Ошибка изменения заказа"))
}
const handleSelect = (row) => {
setSelected(row);
setOpenModal(true);
}
const handleCloseModal = () => {
setOpenModal(false);
setSelected(null);
};
const filterValues = !my ? ["DONE", "CANCEL"] : [];
return (
<>
<Loading loading={!load}/>
<OrderModal row={selected} handleClose={handleCloseModal} open={openModal}
handleChange={changeOrderHandle} my={my}/>
<EnhancedTable name={"Заказы"} rows={sliced} cells={cells} handleSelect={handleSelect} filterEqual={false}
filterField={["status"]} filterValue={filterValues}/>
</>
)
}

10
front/src/app/pages/queue/QueuePage.js
View File

@@ -1,10 +0,0 @@
import * as React from "react";
import {QueueContent} from "./QueueContent";
const QueuePage = () => {
return (
<QueueContent my={false}/>
)
}
export default QueuePage;

24
front/src/components/Ingredients/IngredientList.js
View File

@@ -7,32 +7,12 @@ import Typography from "@mui/material/Typography";
import {getComparator} from "../core/getComparator";
import {groupByForLoop} from "../core/groupByForLoop";
export function IngredientList({rows, value, infoHandler, changeHandler, grouping}) {
const [size, setSize] = useState(10);
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= (document.documentElement.scrollHeight - 100)) {
if (!grouping) {
setSize(size + 10)
}
}
});
export function IngredientList({rows, value, infoHandler, changeHandler}) {
const visibleRows = useMemo(() => {
let res = [];
if (rows.length === 0) {
return null;
}
if (!grouping) {
return rows
.sort(getComparator("asc", "name"))
.slice(0, size)
.map((row) => {
return (
<IngredientCard row={row} key={row.id} value={value}
changeHandler={changeHandler} infoHandler={infoHandler}/>
)
})
}
const group = groupByForLoop(rows, "type")
if (!group || group.size === 0) {
@@ -65,7 +45,7 @@ export function IngredientList({rows, value, infoHandler, changeHandler, groupin
})
return res;
// eslint-disable-next-line
}, [size, rows])
}, [rows])
return (
<Box mt={2}>

6
front/src/components/cocktails/Cocktail.js
View File

@@ -71,12 +71,6 @@ export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect
<Typography variant="h5" minHeight={'50px'} mt={2}>{row.name} </Typography>
<CocktailDescription row={row}/>
</CardContent>
<CardActions>
{(row.isAllowed && session.isActive && user.invited) &&
<Button variant="contained" onClick={() => pay(row.id)}>Заказать</Button>
}
{editMenuBlock(row)}
</CardActions>
</Box>
</CocktailItemStyled>
</Grid>

4
front/src/components/cocktails/CocktailDescription.js
View File

@@ -27,10 +27,6 @@ export function CocktailDescription({row}) {
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Состав: " + row.components}</ListItemText>
</ListItem>
{(row.tags && row.tags.length > 0) && (
<ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
<ListItemText>{"Теги: " + row.tags.replaceAll(',', ', ')}</ListItemText>
</ListItem>)}
</List>
)
}

23
front/src/components/cocktails/FilterBlock.js
View File

@@ -26,7 +26,7 @@ const inMenuFilter = [
}
]
export function FilterBlock({filter, handleFilterChange, handleClearFilter, barmen, all}) {
export function FilterBlock({filter, handleFilterChange, handleClearFilter, barmen}) {
const {createError} = useAlert();
const [glass, setGlass] = useState([]);
const [category, setCategory] = useState([]);
@@ -111,14 +111,6 @@ export function FilterBlock({filter, handleFilterChange, handleClearFilter, barm
{/*Блок фильтров*/}
<Box hidden={filter.hidden}>
<Grid container>
{/*Фильтр по меню*/}
{(barmen && all) && (
<CheckMarks rows={inMenuFilter} name={"Есть в меню"} filterName={"inMenu"}
filterValue={filter.inMenu}
handleChange={handleFilterChange}
nonMulti nullValue
/>
)}
{/*Фильтр по избранным*/}
<FormControlLabel
control={
@@ -129,6 +121,16 @@ export function FilterBlock({filter, handleFilterChange, handleClearFilter, barm
label="Только избранные"
sx={{ml: 1}}
/>
{/*Фильтр по избранным*/}
<FormControlLabel
control={
<Switch inputProps={{'aria-label': 'controlled'}}
onChange={() => handleFilterChange("all", !filter.all)}
/>
}
label={!filter.all ? "Полный список" : "Только доступные"}
sx={{ml: 1}}
/>
{/*Фильтр по алкогольности*/}
<CheckMarks rows={alcohol} name={"Алкогольность"} handleChange={handleFilterChange}
filterValue={filter.alcohol} filterName={"alcohol"}/>
@@ -143,8 +145,7 @@ export function FilterBlock({filter, handleFilterChange, handleClearFilter, barm
{tags.length > 0 && (<CheckMarks rows={tags} name={"Теги"} handleChange={handleFilterChange}
filterValue={filter.tags} filterName={"tags"}/>)}
{/*Фильтр по нехватке ингредиентов*/}
{/*todo: доделать эти фильтры в беке*/}
{(barmen && all) && (<CheckMarks rows={ingredientCount} name={"Не хватает ингредиентов"}
{(barmen && filter.all) && (<CheckMarks rows={ingredientCount} name={"Не хватает ингредиентов"}
handleChange={handleFilterChange}
nonMulti nullValue
filterValue={filter.iCount} filterName={"iCount"}/>)}

10
front/src/components/navigation/MainNav.js
View File

@@ -5,7 +5,6 @@ import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import {List as ListIcon} from '@phosphor-icons/react/dist/ssr/List';
// import NotificationsIcon from '@mui/icons-material/Notifications';
import {usePopover} from "../../hooks/usePopover";
import {MobileNav} from "./MobileNav";
import {UserPopover} from "../core/UserPopover";
@@ -15,8 +14,6 @@ import {UserPopover} from "../core/UserPopover";
export function MainNav() {
const [openNav, setOpenNav] = React.useState(false);
// const {notImplement} = useAlert();
const userPopover = usePopover();
return (
@@ -40,13 +37,6 @@ export function MainNav() {
</IconButton>
</Stack>
<Stack sx={{alignItems: 'center'}} direction="row" spacing={2}>
{/*<Tooltip title="Уведомления" onClick={() => notImplement()}>*/}
{/* <Badge badgeContent={10} color="success" variant="standart">*/}
{/* <IconButton>*/}
{/* <NotificationsIcon/>*/}
{/* </IconButton>*/}
{/* </Badge>*/}
{/*</Tooltip>*/}
<Avatar onClick={userPopover.handleOpen} ref={userPopover.anchorRef} src="/assets/avatar.png"
sx={{cursor: 'pointer'}}/>
</Stack>

2
front/src/components/navigation/NavigationMenu.js
View File

@@ -12,8 +12,6 @@ import Typography from "@mui/material/Typography";
function renderSpecialItems(items, label, pathname) {
return (
<Box>
<hr/>
<Typography pl={"20px"} pb={1} variant="subtitle2" color="textSecondary">{label}</Typography>
{renderNavItems({items: items, pathname: pathname})}
</Box>
)

113
front/src/components/orders/EnhancedTable.js
View File

@@ -1,113 +0,0 @@
import * as React from "react";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import TableContainer from "@mui/material/TableContainer";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableRow from "@mui/material/TableRow";
import TableCell from "@mui/material/TableCell";
import TablePagination from "@mui/material/TablePagination";
import {getComparator} from "../core/getComparator";
import {EnhancedTableToolbar} from "./EnhancedTableToolbar";
import {EnhancedTableHead} from "./EnhancedTableHead";
export default function EnhancedTable({name, rows, cells, handleSelect, filterField, filterEqual, filterValue}) {
//сортировка убывание/возрастание
const [order, setOrder] = React.useState('desc');
//По какому полю сортируем
const [orderBy, setOrderBy] = React.useState('id');
//выбранная страница
const [page, setPage] = React.useState(0);
//количество элементов на странице
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
};
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const getTableValue = (obj, index) => {
let indexArr = index.split(".");
let object = obj;
for (let i of indexArr) {
object = object[i];
}
return object;
}
const visibleRows = React.useMemo(() =>
[...rows]
.filter((row) => {
if (!filterField) {
return true;
}
for (let field of filterField) {
for (let value of filterValue) {
let eq = (row[field] === value) === filterEqual;
if (!eq) {
return false;
}
}
}
return true;
})
.sort(getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage),
[order, orderBy, page, rowsPerPage, rows, filterEqual, filterField, filterValue],
);
const renderTable = (row) => {
// const isItemSelected = selected.includes(row.id);
const isItemSelected = false;
return (
<TableRow hover onClick={() => handleSelect(row)} role="checkbox"
aria-checked={isItemSelected} tabIndex={-1} key={row.id} selected={isItemSelected}
sx={{cursor: 'pointer'}}>
{cells.map((cell) => {
return (
<TableCell key={cell.id} sx={{maxWidth: cell.width}}>{getTableValue(row, cell.id)}</TableCell>
)
})}
</TableRow>
);
}
const emptyRow = () => {
return (
<TableRow>
<TableCell colSpan={cells.length}>
Нет заказов
</TableCell>
</TableRow>
)
}
return (
<Box sx={{width: '100%'}}>
<Paper sx={{width: '100%', mb: 2}}>
<EnhancedTableToolbar numSelected={0} name={name}/>
<TableContainer>
<Table sx={{width: 'calc(100% - 30px)'}} aria-labelledby="tableTitle" size="medium">
<EnhancedTableHead numSelected={0} order={order} orderBy={orderBy}
onRequestSort={handleRequestSort}
rowCount={rows.length} cells={cells}/>
<TableBody>
{visibleRows.map((row) => renderTable(row))}
{visibleRows.length === 0 && emptyRow()}
</TableBody>
</Table>
</TableContainer>
<TablePagination rowsPerPageOptions={[5, 10, 25]} component="div" count={visibleRows.length}
rowsPerPage={rowsPerPage}
page={page} onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}/>
</Paper>
</Box>
);
}

32
front/src/components/orders/EnhancedTableHead.js
View File

@@ -1,32 +0,0 @@
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TableCell from "@mui/material/TableCell";
import TableSortLabel from "@mui/material/TableSortLabel";
import Box from "@mui/material/Box";
import {visuallyHidden} from "@mui/utils";
import * as React from "react";
export function EnhancedTableHead(props) {
const {order, orderBy, onRequestSort, cells} = props;
const createSortHandler = (property) => (event) => {onRequestSort(event, property);};
return (
<TableHead>
<TableRow>
{cells.map((headCell) => (
<TableCell key={headCell.id} align={"left"} padding={headCell.disablePadding ? 'none' : 'normal'}
sortDirection={orderBy === headCell.id ? order : false} sx={{pl: 1, maxWidth: headCell.width}}>
<TableSortLabel active={orderBy === headCell.id} direction={orderBy === headCell.id ? order : 'asc'} onClick={createSortHandler(headCell.id)}>
{headCell.label}
{orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}>
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
</Box>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}

64
front/src/components/orders/EnhancedTableToolbar.js
View File

@@ -1,64 +0,0 @@
import Toolbar from "@mui/material/Toolbar";
import {alpha} from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip";
import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";
import FilterListIcon from "@mui/icons-material/FilterList";
import PropTypes from "prop-types";
import * as React from "react";
export function EnhancedTableToolbar(props) {
const { numSelected, name } = props;
return (
<Toolbar
sx={[
{
pl: { sm: 2 },
pr: { xs: 1, sm: 1 },
},
numSelected > 0 && {
bgcolor: (theme) =>
alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
},
]}
>
{numSelected > 0 ? (
<Typography
sx={{ flex: '1 1 100%' }}
color="inherit"
variant="subtitle1"
component="div"
>
{numSelected} selected
</Typography>
) : (
<Typography
sx={{ flex: '1 1 100%' }}
variant="h6"
id="tableTitle"
component="div"
>
{name}
</Typography>
)}
{numSelected > 0 ? (
<Tooltip title="Delete">
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
) : (
<Tooltip title="Filter list">
<IconButton>
<FilterListIcon />
</IconButton>
</Tooltip>
)}
</Toolbar>
);
}
EnhancedTableToolbar.propTypes = {
numSelected: PropTypes.number.isRequired,
};

105
front/src/components/orders/OrderModal.js
View File

@@ -1,105 +0,0 @@
import * as React from 'react';
import {useEffect, useState} from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import {ButtonGroup} from "@mui/material";
import {requests} from "../../requests";
import {useAlert} from "../../hooks/useAlert";
import {api} from "../../lib/clients/api";
function renderButtons(row, my, handleChange) {
if (my) {
if (row.status === "NEW") {
return (
<ButtonGroup variant="contained">
<Button color="error" onClick={() => handleChange(row, "CANCEL")}>Отмена</Button>
</ButtonGroup>
);
} else {
return null;
}
} else {
return (
<ButtonGroup variant="contained">
<Button color="success" onClick={() => handleChange(row, "DONE")}>Выполнен</Button>
<Button color="error" onClick={() => handleChange(row, "CANCEL")}>Отмена</Button>
</ButtonGroup>
)
}
}
export default function OrderModal({row, handleClose, open, handleChange, my}) {
const [receipt, setReceipt] = useState([]);
const [instructions, setInstructions] = useState();
const {createError} = useAlert();
useEffect(() => {
if (!row) {
return;
}
api().get(requests.bar.receipts + row.cocktail.id)
.then((r) => setReceipt(r.data))
.catch(() => createError("Ошибка получения рецепта"))
api().get(requests.cocktails.instructions + row.cocktail.id)
.then((r) => setInstructions(r.data))
.catch(() => createError("Ошибка получения инструкции"))
// eslint-disable-next-line
}, [row]);
if (!row) {
return null;
}
return (
<Dialog
fullWidth={true}
maxWidth="350px"
open={open}
onClose={handleClose}
>
<DialogTitle>{"Заказ №" + row.id}</DialogTitle>
<DialogContent>
<DialogContentText>{row.cocktail.name}</DialogContentText>
<DialogContentText>{"для: " + row.visitor.name + " " + row.visitor.lastName}</DialogContentText>
<Box noValidate component="form"
sx={{display: 'flex', flexDirection: 'column', m: 'auto', width: 'fit-content',}}>
<Stack>
<img src={row.cocktail.image} alt={row.cocktail.name} loading={"eager"} width={"300"}/>
<Typography>Ингредиенты:</Typography>
<Stack pl={1}>
{receipt.map((r) => {
return (<Typography key={r.id}>{`${r.ingredient.name} - ${r.measure}`}</Typography>)
})}
</Stack>
{instructions &&
(
<>
<Typography>Инструкция:</Typography>
<Typography pl={1}>{instructions}</Typography>
</>
)
}
{row.cocktail.video && (<iframe width="350" /*height="315"*/
src={row.cocktail.video}
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen></iframe>)}
</Stack>
</Box>
</DialogContent>
<DialogActions sx={{justifyContent: "space-between"}}>
{renderButtons(row, my, handleChange)}
<Button onClick={handleClose}>Close</Button>
</DialogActions>
</Dialog>
);
}

9
front/src/components/orders/createHeadCelll.js
View File

@@ -1,9 +0,0 @@
export function createHeadCell(id, numeric, padding, label, width) {
return {
id: id,
numeric: numeric,
disablePadding: padding,
label: label,
width: width
}
}

49
front/src/components/visitor/VisitorItem.js
View File

@@ -1,49 +0,0 @@
import Typography from "@mui/material/Typography";
import {Card, FormControlLabel} from "@mui/material";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Switch from "@mui/material/Switch";
import * as React from "react";
export function VisitorItem({visitor, changeHandler, open}) {
const getRole = (role) => {
switch (role) {
case "USER":
return 'Посетитель';
case "BARMEN":
return 'Бармен';
case "ADMIN":
return 'Админ';
default:
return "Посетитель";
}
}
return (
<Card sx={{mb: 1, p: 1, borderRadius: '10px', maxWidth: '600px'}}>
<Stack>
<Typography variant='h6'>{`${visitor.name} ${!visitor.lastName ? "" : visitor.lastName}`}</Typography>
<Box display='flex' justifyContent='flex-end'>
<Typography>{getRole(visitor.role)}</Typography>
</Box>
<Box display='flex' justifyContent='flex-start'>
<FormControlLabel
control={
<Switch
checked={visitor.invited}
disabled={open}
onChange={() => changeHandler(visitor)}
/>}
label="Приглашен" labelPlacement='start'/>
</Box>
<Box display='flex' justifyContent='flex-end'>
<Typography
variant='body2'
color={visitor.isActive ? 'green' : 'red'}
>{visitor.isActive ? "В баре" : "Не вошел в бар"}</Typography>
</Box>
</Stack>
</Card>
)
}

8
front/src/navItems.js
View File

@@ -2,13 +2,7 @@ import {paths} from "./path";
export const navItems = [
{key: 'menu', title: 'Меню', href: paths.dashboard.overview, icon: 'menu'},
{key: 'cocktailList', title: 'Коктейльная база', href: paths.bar.cocktails, icon: 'list'},
{key: 'myOrders', title: "Мои заказы", href: paths.orders.my, icon: 'wallet'},
{key: 'myBar', title: "Мои бары", href: paths.bar.list, icon: 'storefront'},
{key: 'queue', title: 'Очередь заказов', href: paths.bar.ordersQueue, icon: 'orders', forBarmen: true},
{key: 'ingredients', title: 'Ингредиенты в баре', href: paths.bar.ingredients, icon: 'basket', forBarmen: true},
{key: 'visitors', title: "Посетители", href: paths.visitor.inBar, icon: 'visitors', forBarmen: true},
// {key: 'editMenu', title: "Редактировать меню", href: paths.bar.menu, icon: 'menu', forBarmen: true},
{key: 'ingredients', title: 'Список ингредиентов', href: paths.bar.ingredients, icon: 'basket', forBarmen: true},
{key: 'ingredientEdit', title: 'Ингредиенты', href: paths.bar.ingredientEdit, icon: 'ingredients', forAdmin: true},
{key: 'cocktailEdit', title: 'Коктейли', href: paths.bar.cocktailEdit, icon: 'cocktail', forAdmin: true}
];