Доработка фронта

front/src/app/App.js

@@ -7,6 +7,7 @@ import {BrowserRouter as Router} from "react-router-dom";
 import {NavigationRoutes} from "./NavigationRoutes";
 import {SnackbarProvider} from 'notistack';
 import {UserProvider} from "../context/UserContext";
+import {SelectProvider} from "../context/SelectContext";
 
 function App() {
     const theme = createTTheme();
@@ -36,10 +37,13 @@ function App() {
                                     },
                                 }}
                             />
-                            {/*Маршрутизация*/}
+                            {/*Провайдер выбора*/}
-                            <Router>
+                            <SelectProvider>
-                                <NavigationRoutes/>
+                                {/*Маршрутизация*/}
-                            </Router>
+                                <Router>
+                                    <NavigationRoutes/>
+                                </Router>
+                            </SelectProvider>
                         </CssVarsProvider>
                     </UserProvider>
                 </AuthProvider>

front/src/app/pages/cocktails/CocktailMenuBarPage.js

@@ -16,6 +16,7 @@ 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();
@@ -25,6 +26,7 @@ export function CocktailMenuBarPage() {
     const [cocktails, setCocktails] = useState([]);
     const [openModal, setOpenModal] = useState(false);
     const [selected, setSelected] = useState(null);
+    const {setCocktail, openCocktail, state, getOpenCocktail} = useSelect();
 
     useEffect(() => {
         api().get(`${requests.cocktails.menu}?all=true`)
@@ -38,8 +40,10 @@ export function CocktailMenuBarPage() {
 
 
     const handleOpenModal = (row) => {
-        setSelected(row)
+        setCocktail(row);
-        setOpenModal(true);
+        openCocktail();
+        // setSelected(row)
+        // setOpenModal(true);
     }
     const changeHandler = (row, value) => {
         const newState = cocktails.map((r) => {
@@ -117,7 +121,7 @@ export function CocktailMenuBarPage() {
             {/*Загрузчик*/}
             <Loading loading={loading}/>
             {/*Модальное окно информации об ингредиенте*/}
-            <CocktailInfoModal open={openModal} row={selected}
+            <CocktailInfoModal open={state.openCocktail} row={state.cocktail}
                                closeHandler={() => {
                                    setSelected(null);
                                    setOpenModal(false);

front/src/app/pages/cocktails/CocktailsPageContent.js

@@ -18,6 +18,7 @@ import {getComparator} from "../../../components/core/getComparator";
 import Button from "@mui/material/Button";
 import Paper from "@mui/material/Paper";
 import CheckMarks from "../../../components/cocktails/CheckMarks";
+import {useSelect} from "../../../hooks/useSelect";
 
 const filterList = (rows, filter, allowIngredients) => {
     let regExp = new RegExp("(.*?)" + filter.search + "(.*?)", "i");
@@ -86,14 +87,14 @@ const CocktailsPageContent = ({all}) => {
     const [allowIngredients, setAllowIngredients] = useState([])
     const [rows, setRows] = useState([]);
     const [filter, setFilter] = useState(emptyFilter)
-    const [open, setOpen] = useState(false);
-    const [selectedCocktail, setSelectedCocktail] = useState(null)
     const [chips, setChips] = useState([])
     const [page, setPage] = useState(-1);
     const [load, setLoad] = useState(false);
     const [isEnd, setIsEnd] = useState(false);
     const [isNew, setIsNew] = useState(true);
 
+    const {selectCocktail, getCocktail, getOpenCocktail} = useSelect();
+
     const loading = useCallback(() => {
         const size = Math.floor((window.innerWidth) / 350) * 5;
         if (load || (!isNew && isEnd)) {
@@ -230,12 +231,9 @@ const CocktailsPageContent = ({all}) => {
         setFilter(emptyFilter);
     }
     const handleSelectCocktail = (row) => {
-        setSelectedCocktail(row.id)
+        selectCocktail(row.id)
-        setOpen(true)
+        // setSelectedCocktail(row.id)
-    }
+        // setOpen(true)
-    const handleCloseCocktailModal = () => {
-        setOpen(false);
-        setSelectedCocktail(null);
     }
     const handleEditMenu = (row, value) => {
         const newState = rows.map((r) => {
@@ -271,8 +269,7 @@ const CocktailsPageContent = ({all}) => {
         <Box>
             {/*<Loading loading={load}/>*/}
             {/*Модальное окно информации о коктейле*/}
-            <CocktailInfoModal row={selectedCocktail} open={open}
+            <CocktailInfoModal row={getCocktail()} open={getOpenCocktail()}/>
-                               closeHandler={handleCloseCocktailModal}/>
             {/*Блок фильтров*/}
             <FilterBlock
                 filter={filter}

front/src/app/pages/ingredients/IngredientsPage.js

@@ -19,6 +19,7 @@ import {IngredientList} from "../../../components/Ingredients/IngredientList";
 import {blue} from "@mui/material/colors";
 import UpIcon from "@mui/icons-material/KeyboardArrowUp";
 import Switch from "@mui/material/Switch";
+import {useSelect} from "../../../hooks/useSelect";
 
 export function IngredientsPage() {
     const [value, setValue] = React.useState(0);
@@ -27,8 +28,7 @@ export function IngredientsPage() {
     const [loading, setLoading] = useState(true);
     const [findString, setFindString] = useState("");
     const [ingredients, setIngredients] = useState([]);
-    const [openModal, setOpenModal] = useState(false);
+    const {getIngredient, selectIngredient} = useSelect();
-    const [selectedInfo, setSelectedInfo] = useState(null);
     const {createError} = useAlert();
 
     useEffect(() => {
@@ -76,12 +76,7 @@ export function IngredientsPage() {
             });
     }
     const handleOpenModal = (i) => {
-        setOpenModal(true);
+        selectIngredient(i)
-        setSelectedInfo(i);
-    }
-    const handleCloseModal = () => {
-        setSelectedInfo(null);
-        setOpenModal(false);
     }
 
     return (
@@ -147,7 +142,7 @@ export function IngredientsPage() {
             {/*Загрузчик*/}
             <Loading loading={loading}/>
             {/*Модальное окно информации об ингредиенте*/}
-            <IngredientInfoModal ingredient={selectedInfo} open={openModal} closeHandler={handleCloseModal}/>
+            <IngredientInfoModal ingredient={getIngredient()}/>
         </Box>
     )
 }

front/src/components/Ingredients/IngredientInfoModal.js

@@ -6,13 +6,33 @@ import Button from "@mui/material/Button";
 import * as React from "react";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
+import List from "@mui/material/List";
+import {useEffect, useState} from "react";
+import {api} from "../../lib/clients/api";
+import {requests} from "../../requests";
+import {useAlert} from "../../hooks/useAlert";
+import ListItem from "@mui/material/ListItem";
+import {useSelect} from "../../hooks/useSelect";
+
+export function IngredientInfoModal({ingredient}) {
+    const [cocktails, setCocktails] = useState([]);
+    const {closeIngredient, getOpenIngredient, selectCocktail} = useSelect();
+    const {createError} = useAlert();
+
+    useEffect(() => {
+        if(!ingredient) {
+            return
+        }
+        api().get(requests.cocktails.byIngredient + ingredient.id)
+            .then((r) => setCocktails(r.data))
+            .catch(() => createError())
+    }, [ingredient]);
 
-export function IngredientInfoModal({ingredient, open, closeHandler}) {
     if (!ingredient) {
         return null;
     }
     return (
-        <Dialog fullWidth={true} maxWidth="350px" open={open} onClose={closeHandler}
+        <Dialog fullWidth={true} maxWidth="350px" open={getOpenIngredient()} onClose={closeIngredient}
                 sx={{
                     '& .MuiDialog-paper': {
                         margin: '8px',
@@ -28,9 +48,30 @@ export function IngredientInfoModal({ingredient, open, closeHandler}) {
                     {ingredient.alcohol && (<Typography>{`Крепость ${ingredient.abv}`}</Typography>)}
                     <Typography>{ingredient.description}</Typography>
                 </Stack>
+                {cocktails.length > 0 && (
+                    <>
+                        <Typography sx={{ mt:2}}>Коктейли:</Typography>
+                        <List>
+                            {cocktails.map((c) => {
+                                return (
+                                    <ListItem key={c.id} onClick={() => {
+                                        selectCocktail(c.id)
+                                        closeIngredient();
+                                    }}>
+                                        <Stack direction={'row'}>
+                                            <img src={c.image} alt={c.name} loading={"eager"} width={"50"}/>
+                                            <Typography sx={{mx:1}}>{c.name}</Typography>
+                                            {c.rating.rating > 0 && <Typography> {`${c.rating.rating}/5`}</Typography>}
+                                        </Stack>
+                                    </ListItem>
+                                )
+                            })}
+                        </List>
+                    </>
+                )}
             </DialogContent>
             <DialogActions>
-                <Button onClick={closeHandler}>Close</Button>
+                <Button onClick={closeIngredient}>Close</Button>
             </DialogActions>
         </Dialog>
     );

front/src/components/cocktails/Cocktail.js

@@ -1,9 +1,6 @@
 import {CardActions, CardContent, CardMedia, Rating} from "@mui/material";
 import {useAlert} from "../../hooks/useAlert";
 import Typography from "@mui/material/Typography";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemText from "@mui/material/ListItemText";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
 import {requests} from "../../requests";
@@ -14,6 +11,7 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
 import {api} from "../../lib/clients/api";
 import Box from "@mui/material/Box";
 import {useUser} from "../../hooks/useUser";
+import {CocktailDescription} from "./CocktailDescription";
 
 function renderFavouriteBadge(handleFavourite, row) {
     const childIcon = row.rating.favourite ? <FavoriteIcon color='error'/> : <FavoriteBorderIcon color={'warning'}/>;
@@ -71,34 +69,7 @@ export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect
                     {renderRating(handleChangeRating, row)}
                     <CardContent sx={{pb: '4px', pl: 2}}>
                         <Typography variant="h5" minHeight={'50px'} mt={2}>{row.name} </Typography>
-                        <List sx={{py: '0px'}}>
+                        <CocktailDescription row={row}/>
-                            {row.hasError && (
-                                <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
-                                    <ListItemText color={'red'}>Имеет ошибку в рецепте или ингредиентах</ListItemText>
-                                </ListItem>
-                            )}
-                            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
-                                <ListItemText>{"Категория: " + row.category}</ListItemText>
-                            </ListItem>
-                            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
-                                <ListItemText>{"Алкоголь: " + row.alcoholic}</ListItemText>
-                            </ListItem>
-                            {row.volume !== null && (
-                                <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
-                                    <ListItemText>{"Крепость: ≈" + row.volume}</ListItemText>
-                                </ListItem>
-                            )}
-                            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
-                                <ListItemText>{"Подача: " + row.glass}</ListItemText>
-                            </ListItem>
-                            <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>
                     </CardContent>
                     <CardActions>
                         {(row.isAllowed && session.isActive && user.invited) &&

front/src/components/cocktails/CocktailDescription.js

@@ -0,0 +1,36 @@
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import List from "@mui/material/List";
+
+export function CocktailDescription({row}) {
+    return (
+        <List sx={{py: '0px'}}>
+            {row.hasError && (
+                <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
+                    <ListItemText color={'red'}>Имеет ошибку в рецепте или ингредиентах</ListItemText>
+                </ListItem>
+            )}
+            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
+                <ListItemText>{"Категория: " + row.category}</ListItemText>
+            </ListItem>
+            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
+                <ListItemText>{"Алкоголь: " + row.alcoholic}</ListItemText>
+            </ListItem>
+            {row.volume !== null && (
+                <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
+                    <ListItemText>{"Крепость: ≈" + row.volume}</ListItemText>
+                </ListItem>
+            )}
+            <ListItem sx={{p: '2px 12px 0px 0px', m: '0px'}}>
+                <ListItemText>{"Подача: " + row.glass}</ListItemText>
+            </ListItem>
+            <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>
+    )
+}

front/src/components/cocktails/CocktailInfoModal.js

@@ -21,24 +21,20 @@ import {useAlert} from "../../hooks/useAlert";
 import {paths} from "../../path";
 import {Loading} from "../core/Loading";
 import {useUser} from "../../hooks/useUser";
+import {useSelect} from "../../hooks/useSelect";
 
-export function CocktailInfoModal({open, row, closeHandler}) {
+export function CocktailInfoModal({row}) {
     const {user} = useUser();
     const {getError, createError, createSuccess} = useAlert();
     const [cocktail, setCocktail] = useState(null)
     const [loading, setLoading] = useState(false);
-    const [selectedIngredient, setSelectedIngredient] = useState(null);
+    const {closeCocktail, selectIngredient, getIngredient, getOpenCocktail} = useSelect();
-    const [openIngredientModal, setOpenIngredientModal] = useState(false)
-    const closeIngredientHandler = () => {
-        setOpenIngredientModal(false);
-        setSelectedIngredient(null);
-    }
     const openIngredientModalHandler = (id) => {
         api().get(`${requests.bar.ingredient}?id=${id}`)
             .then((r) => {
-                setSelectedIngredient(r.data)
+                selectIngredient(r.data)
-                setOpenIngredientModal(true);
+            })
-            }).catch(() => createError("Ошибка получения информации об ингредиенте"))
+            .catch(() => createError("Ошибка получения информации об ингредиенте"))
     }
     const selectIngredientHandler = (ingredient) => {
         const url = `${requests.bar.ingredient}?id=${ingredient.id}`;
@@ -79,18 +75,17 @@ export function CocktailInfoModal({open, row, closeHandler}) {
             .catch(() => {
                 getError();
                 setLoading(false)
-                closeHandler();
+                closeCocktail();
             })
+        // eslint-disable-next-line
     }, [row]);
 
     if (!row || !cocktail) {
         return null;
     }
-    let alko = 0;
-    let volume = 0;
     return (
         <Dialog fullWidth={true}
-                open={open} onClose={closeHandler}
+                open={getOpenCocktail()} onClose={closeCocktail}
                 sx={{
                     '& .MuiDialog-paper': {
                         margin: '8px',
@@ -99,8 +94,7 @@ export function CocktailInfoModal({open, row, closeHandler}) {
                         width: 'calc(100% - 16px)',
                     }
                 }}>
-            <IngredientInfoModal ingredient={selectedIngredient} open={openIngredientModal}
+            <IngredientInfoModal ingredient={getIngredient()}/>
-                                 closeHandler={closeIngredientHandler}/>
             <Loading loading={loading}/>
             <DialogTitle>
                 <Stack direction='row' justifyContent={'space-between'}>
@@ -134,9 +128,6 @@ export function CocktailInfoModal({open, row, closeHandler}) {
                             {cocktail.receipt.map((r) => {
                                 const hasError = r.count === null || r.unit === null;
                                 const measure = hasError ? r.measure : (r.count + " " + r.unit.name)
-                                if(alko !== null && volume !== null) {
-                                    console.log(r)
-                                }
                                 return (
                                     <Stack key={r.ingredient.id} direction='row' justifyContent={'space-between'}
                                            mt={1}>
@@ -173,7 +164,7 @@ export function CocktailInfoModal({open, row, closeHandler}) {
                 {user.role.includes("ADMIN") && (
                     <Button href={`${paths.bar.cocktailEdit}?id=${cocktail.id}`}>Редактировать</Button>
                 )}
-                <Button onClick={closeHandler}>Закрыть</Button>
+                <Button onClick={closeCocktail}>Закрыть</Button>
             </DialogActions>
         </Dialog>
     )

front/src/components/orders/OrderModal.js

@@ -37,6 +37,7 @@ function renderButtons(row, my, handleChange) {
 
 export default function OrderModal({row, handleClose, open, handleChange, my}) {
     const [receipt, setReceipt] = useState([]);
+    const [instructions, setInstructions] = useState();
     const {createError} = useAlert();
 
     useEffect(() => {
@@ -46,6 +47,10 @@ export default function OrderModal({row, handleClose, open, handleChange, my}) {
         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]);
 
@@ -62,7 +67,6 @@ export default function OrderModal({row, handleClose, open, handleChange, my}) {
             <DialogTitle>{"Заказ №" + row.id}</DialogTitle>
             <DialogContent>
                 <DialogContentText>{row.cocktail.name}</DialogContentText>
-                <DialogContentText>{row.cocktail.alcoholic + " " + row.cocktail.category}</DialogContentText>
                 <DialogContentText>{"для: " + row.visitor.name + " " + row.visitor.lastName}</DialogContentText>
                 <Box noValidate component="form"
                      sx={{display: 'flex', flexDirection: 'column', m: 'auto', width: 'fit-content',}}>
@@ -74,8 +78,14 @@ export default function OrderModal({row, handleClose, open, handleChange, my}) {
                                 return (<Typography key={r.id}>{`${r.ingredient.name} - ${r.measure}`}</Typography>)
                             })}
                         </Stack>
-                        <Typography>Инструкция:</Typography>
+                        {instructions &&
-                        <Typography pl={1}>{row.cocktail.instructions}</Typography>
+                            (
+                                <>
+                                    <Typography>Инструкция:</Typography>
+                                    <Typography pl={1}>{instructions}</Typography>
+                                </>
+                            )
+                        }
 
                         {row.cocktail.video && (<iframe width="350" /*height="315"*/
                                                         src={row.cocktail.video}

front/src/context/SelectContext.js

@@ -0,0 +1,61 @@
+import * as React from "react";
+
+export const SelectContext = React.createContext(undefined);
+
+export function SelectProvider({children}) {
+    const [selected, setSelected] = React.useState({
+        cocktail: null,
+        ingredient: null
+    });
+
+    const selectCocktail = (row) => {
+        setSelected((prev) => ({
+            ...prev,
+            cocktail: row
+        }))
+    }
+    const getCocktail = () => {
+        return selected.cocktail
+    }
+    const getOpenCocktail = () => {
+        return selected.cocktail !== null;
+    }
+    const closeCocktail = () => {
+        setSelected((prevState) => ({
+            ...prevState,
+            cocktail: null,
+        }))
+    }
+
+    const selectIngredient = (row) => {
+        setSelected((prev) => ({
+            ...prev,
+            ingredient: row
+        }))
+    }
+    const closeIngredient = () => {
+        setSelected((prevState) => ({
+            ...prevState,
+            ingredient: null
+        }))
+    }
+    const getIngredient = () => {
+        return selected.ingredient
+    }
+    const getOpenIngredient = () => {
+        return selected.ingredient !== null
+    }
+
+    return <SelectContext.Provider value={{...selected,
+        selectCocktail,
+        getCocktail,
+        getOpenCocktail,
+        closeCocktail,
+        selectIngredient,
+        closeIngredient,
+        getIngredient,
+        getOpenIngredient
+    }}>{children}</SelectContext.Provider>;
+}
+
+export const SelectConsumer = SelectContext.Consumer;

front/src/hooks/useSelect.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import {SelectContext} from "../context/SelectContext";
+
+export function useSelect() {
+    const context = React.useContext(SelectContext);
+
+    if (!context) {
+        throw new Error('useSelect must be used within a SelectProvider');
+    }
+
+    window.select = context;
+
+    return context;
+}

front/src/navItems.js

@@ -8,7 +8,7 @@ export const navItems = [
     {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: 'editMenu', title: "Редактировать меню", href: paths.bar.menu, icon: 'menu', forBarmen: true},
     {key: 'ingredientEdit', title: 'Ингредиенты', href: paths.bar.ingredientEdit, icon: 'ingredients', forAdmin: true},
     {key: 'cocktailEdit', title: 'Коктейли', href: paths.bar.cocktailEdit, icon: 'cocktail', forAdmin: true}
 ];

front/src/requests.js

@@ -27,7 +27,9 @@ export const requests = {
         savePhoto: routes.cocktails + "/photo",
         favourite: routes.cocktails + "/favourite?id=",
         rating: routes.cocktails + "/rating?id=",
-        receipts: routes.cocktails + "/receipts?id="
+        receipts: routes.cocktails + "/receipts?id=",
+        byIngredient: routes.cocktails + "/byIngredient?id=",
+        instructions: routes.cocktails + "/instructions?id="
     },
     visitors: {
         all: routes.visitor,