124 lines
5.8 KiB
JavaScript
124 lines
5.8 KiB
JavaScript
import DialogTitle from "@mui/material/DialogTitle";
|
|
import DialogContent from "@mui/material/DialogContent";
|
|
import Stack from "@mui/material/Stack";
|
|
import Typography from "@mui/material/Typography";
|
|
import DialogActions from "@mui/material/DialogActions";
|
|
import Button from "@mui/material/Button";
|
|
import Dialog from "@mui/material/Dialog";
|
|
import * as React from "react";
|
|
import {useEffect, useState} from "react";
|
|
import {CardMedia} from "@mui/material";
|
|
import Paper from "@mui/material/Paper";
|
|
import Box from "@mui/material/Box";
|
|
import StarBorderIcon from '@mui/icons-material/StarBorder';
|
|
import IconButton from "@mui/material/IconButton";
|
|
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import {IngredientInfoModal} from "../Ingredients/IngredientInfoModal";
|
|
import {useAlert} from "../../hooks/useAlert";
|
|
import {paths} from "../../path";
|
|
import {Loading} from "../core/Loading";
|
|
import {useUser} from "../../hooks/useUser";
|
|
import {useSelect} from "../../hooks/useSelect";
|
|
import {cocktailClient} from "../../lib/clients/CocktailClient";
|
|
import {ingredientClient} from "../../lib/clients/IngredientClient";
|
|
|
|
export function CocktailInfoModal({row}) {
|
|
const {user} = useUser();
|
|
const {getError, createError, createSuccess} = useAlert();
|
|
const [cocktail, setCocktail] = useState(null)
|
|
const [loading, setLoading] = useState(false);
|
|
const {closeCocktail, selectIngredient, getIngredient, getOpenCocktail} = useSelect();
|
|
|
|
// eslint-disable-next-line
|
|
useEffect(() => cocktailClient.getCocktailForModal(row, setLoading, setCocktail, closeCocktail, getError), [row]);
|
|
|
|
if (!row || !cocktail) {
|
|
return null;
|
|
}
|
|
return (
|
|
<Dialog fullWidth={true}
|
|
open={getOpenCocktail()} onClose={closeCocktail}
|
|
sx={{
|
|
'& .MuiDialog-paper': {
|
|
margin: '8px',
|
|
},
|
|
'& .MuiPaper-root': {
|
|
width: 'calc(100% - 16px)',
|
|
}
|
|
}}>
|
|
<IngredientInfoModal ingredient={getIngredient()}/>
|
|
<Loading loading={loading}/>
|
|
<DialogTitle>
|
|
<Stack direction='row' justifyContent={'space-between'}>
|
|
<Box>{cocktail.name}</Box>
|
|
|
|
{cocktail.rating.rating > 0 &&
|
|
(
|
|
<Stack ml={3} direction='row'>
|
|
{`${cocktail.rating.rating}/5`}
|
|
<StarBorderIcon sx={{pb: "2px"}}/>
|
|
</Stack>
|
|
)
|
|
}
|
|
</Stack>
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<CardMedia
|
|
image={cocktail.image.includes("thecocktaildb") ? (cocktail.image + "/preview") : cocktail.image}
|
|
sx={{
|
|
loading: "eager",
|
|
borderRadius: 2
|
|
}}
|
|
component="img"
|
|
alt={cocktail.name}
|
|
height="300"
|
|
/>
|
|
<Box mt={1}>
|
|
<Typography>Ингредиенты:</Typography>
|
|
<Paper sx={{p: 1}} elevation={3}>
|
|
<Stack>
|
|
{cocktail.receipt.map((r) => {
|
|
const hasError = r.count === null || r.unit === null;
|
|
const measure = hasError ? r.measure : (r.count + " " + r.unit.name)
|
|
return (
|
|
<Stack key={r.ingredient.id} direction='row' justifyContent={'space-between'}
|
|
mt={1}>
|
|
<Stack direction='row'>
|
|
{(user.role && user.role !== "USER") && (
|
|
<IconButton size="small" sx={{pb: "2px"}}
|
|
onClick={() => ingredientClient.changeIngredientInBar(r.ingredient, cocktail, setCocktail, createSuccess, createError)}>
|
|
{r.ingredient.isHave
|
|
? (<DeleteIcon fontSize="small"/>)
|
|
: (<ShoppingCartIcon fontSize="small"/>)
|
|
}
|
|
</IconButton>
|
|
)}
|
|
<Typography
|
|
onClick={() => ingredientClient.findOne(r.ingredient.id, selectIngredient, createError)}>{r.ingredient.name}</Typography>
|
|
</Stack>
|
|
<Typography color={hasError && 'red'}>{measure}</Typography>
|
|
</Stack>
|
|
)
|
|
})}
|
|
</Stack>
|
|
</Paper>
|
|
</Box>
|
|
<Box>
|
|
<Typography mt={2}>Инструкция:</Typography>
|
|
<Paper sx={{p: 1}} elevation={3}>
|
|
<Box>
|
|
{cocktail.instructions}
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
{(user.role && user.role.includes("ADMIN")) && (
|
|
<Button href={`${paths.bar.cocktailEdit}?id=${cocktail.id}`}>Редактировать</Button>
|
|
)}
|
|
<Button onClick={closeCocktail}>Закрыть</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
)
|
|
} |