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

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>
)
}