Initial commit

2025-03-12 17:54:16 +04:00
commit b6d8a3cebd
254 changed files with 29963 additions and 0 deletions
--- a/front/src/app/pages/ingredients/IngredientsPage.js
+++ b/front/src/app/pages/ingredients/IngredientsPage.js
@@ -0,0 +1,153 @@
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Toolbar from "@mui/material/Toolbar";
+import Paper from "@mui/material/Paper";
+import {Fab, FormControl, FormControlLabel, 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 {useEffect, useMemo, useState} from "react";
+import {Loading} from "../../../components/core/Loading";
+import {requests} from "../../../requests";
+import {useAlert} from "../../../hooks/useAlert";
+import {IngredientInfoModal} from "../../../components/Ingredients/IngredientInfoModal";
+import {api} from "../../../lib/clients/api";
+import Tab from "@mui/material/Tab";
+import {a11yProps} from "../../../components/core/tabProps";
+import {CustomTabPanel} from "../../../components/core/TabPanel";
+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";
+
+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("");
+    const [ingredients, setIngredients] = useState([]);
+    const [openModal, setOpenModal] = useState(false);
+    const [selectedInfo, setSelectedInfo] = useState(null);
+    const {createError} = useAlert();
+
+    useEffect(() => {
+        api().get(requests.bar.ingredientList)
+            .then((r) => {
+                setIngredients(r.data)
+                setLoading(false);
+            })
+            .catch(() => {
+                createError("Ошибка получения списка ингредиентов");
+                setLoading(false);
+            })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const visibleIngredients = useMemo(() => {
+        if (findString.length === 0) {
+            return ingredients;
+        }
+        const reg = new RegExp("(.*?)" + findString + "(.*?)", "i");
+        return ingredients.filter((ingredient) => ingredient.name.match(reg) !== null);
+    }, [findString, ingredients]);
+    const ingredientsToAdd = visibleIngredients.filter((ingredient) => !ingredient.have);
+    const ingredientsInBar = visibleIngredients.filter((ingredient) => ingredient.have);
+
+    const changeHandler = (row, value) => {
+        const newState = ingredients.map((ingredient) => {
+            if (ingredient.id === row.id) {
+                return {
+                    ...ingredient,
+                    have: value
+                }
+            } else {
+                return ingredient;
+            }
+        })
+        const url = `${requests.bar.ingredient}?id=${row.id}`;
+        const request = value ? api().put(url) : api().delete(url);
+        request
+            .then(() => {
+                setIngredients(newState);
+            })
+            .catch(() => {
+                createError("Ошибка изменения ингредиента");
+            });
+    }
+    const handleOpenModal = (i) => {
+        setOpenModal(true);
+        setSelectedInfo(i);
+    }
+    const handleCloseModal = () => {
+        setSelectedInfo(null);
+        setOpenModal(false);
+    }
+
+    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>
+            {/*Рабочее поле ингредиентов*/}
+            <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}>
+                    <IngredientList rows={ingredientsInBar} value={false} changeHandler={changeHandler}
+                                    infoHandler={handleOpenModal} grouping={grouping}/>
+                </CustomTabPanel>
+                <CustomTabPanel value={value} index={1}>
+                    <IngredientList rows={ingredientsToAdd} value={true} changeHandler={changeHandler}
+                                    infoHandler={handleOpenModal} grouping={grouping}/>
+                </CustomTabPanel>
+            </Box>
+            <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}/>
+            {/*Модальное окно информации об ингредиенте*/}
+            <IngredientInfoModal ingredient={selectedInfo} open={openModal} closeHandler={handleCloseModal}/>
+        </Box>
+    )
+}