122 lines
4.9 KiB
JavaScript
122 lines
4.9 KiB
JavaScript
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>
|
||
)
|
||
} |