jonaszbigda/menui_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

price -> prices (unfinished)

Browse Source
This commit is contained in:
Jonasz Bigda
2020-11-08 19:07:52 +01:00
parent dfa1a88163
commit dd9501e3cc
11 changed files with 364 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Dialogs/Dish.js
View File

@@ -7,6 +7,7 @@ import { backend } from "../../config.js";
import IconButton from "@material-ui/core/IconButton";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import { makeStyles } from "@material-ui/core/styles";
import DishPrices from "../Output/DishPrices";
const loginStyles = makeStyles((theme) => ({
closeButton: {
@@ -72,28 +73,28 @@ export default function Dish(props) {
</div>
</div>
<hr />
<div className="dish-row">
<div className="dish-row-column">
<h5>Cena</h5>
<p>{dish.price}zł</p>
<DishPrices prices={dish.prices}/>
</div>
<hr />
<div className="dish-row">
<div className="dish-row-column">
<h5>Porcja</h5>
<p>{dish.weight}</p>
</div>
<hr />
<div className="dish-row">
<div className="dish-row-column">
<h5>Wartość energrtyczna</h5>
<p>{dish.kCal}kcal</p>
</div>
<hr />
<div className="dish-row">
<div className="dish-row-column">
<h5>Indeks glikemiczny</h5>
<p>{dish.glicemicIndex}</p>
</div>
{dish.notes !== "" && <hr />}
{dish.notes !== "" && (
<div className="dish-row">
<div className="dish-row-column">
<h5>Uwagi</h5>
<p>{dish.notes}</p>
</div>

178
src/components/Dialogs/EditDish.js
View File

@@ -7,7 +7,6 @@ import ButtonPrimary from "../Input/ButtonPrimary";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
import TextFieldsIcon from "@material-ui/icons/TextFields";
import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
import FitnessCenterIcon from "@material-ui/icons/FitnessCenter";
import LocalHospitalIcon from "@material-ui/icons/LocalHospital";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
@@ -27,6 +26,7 @@ import validator from "validator";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import Dialog from "@material-ui/core/Dialog";
import InputPrices from "../Input/InputPrices";
const useStyles = makeStyles((theme) => ({
root: {
@@ -88,6 +88,7 @@ const useStyles = makeStyles((theme) => ({
}));
export default function EditDish() {
useEffect(() => {
document.title = "Menui - Edytuj danie";
});
@@ -98,12 +99,17 @@ export default function EditDish() {
const history = useHistory();
const dispatch = useDispatch();
const dish = dishes.find((element) => element._id === id);
const isMultiplePrices = () => {
return dish.prices.price1.priceName !== ""
}
if (dish === undefined) history.push("/");
const initialState = {
restaurantId: dish.restaurantId,
name: dish.name,
category: dish.category,
price: dish.price,
prices: dish.prices,
notes: dish.notes,
imgUrl: dish.imgUrl,
hidden: false,
@@ -125,7 +131,21 @@ export default function EditDish() {
charLeft: 200 - dish.notes.length,
nameError: false,
categoryError: false,
priceError: false,
priceErrors: {
price1: {
name: false,
price: false
},
price2: {
name: false,
price: false
},
price3: {
name: false,
price: false
},
},
multiplePrices: isMultiplePrices()
};
const [state, setState] = useState(initialState);
@@ -146,6 +166,70 @@ export default function EditDish() {
// HANDLERS
const handlePricesChange = (value) => {
setState({ ...state, prices: value });
}
const setMulti = (value) => {
const cleanPrices = {
price1: {
priceName: "",
price: state.prices.price1.price
},
price2: {
priceName: "",
price: ""
},
price3: {
priceName: "",
price: ""
},
}
setState({ ...state, multiplePrices: value, prices: cleanPrices });
}
const validatePrice = (value, secondValue) => {
if (!validator.isEmpty(secondValue)) {
return !validator.isEmpty(value);
} else {
return true;
}
}
const validatePrices = () => {
if (state.multiplePrices) {
return {
price1: {
name: validatePrice(state.prices.price1.priceName, state.prices.price1.price),
price: validatePrice(state.prices.price1.price, state.prices.price1.priceName),
},
price2: {
name: validatePrice(state.prices.price2.priceName, state.prices.price2.price),
price: validatePrice(state.prices.price2.price, state.prices.price2.priceName),
},
price3: {
name: validatePrice(state.prices.price3.priceName, state.prices.price3.price),
price: validatePrice(state.prices.price3.price, state.prices.price3.priceName),
},
}
} else {
return {
price1: {
name: true,
price: !validator.isEmpty(state.prices.price1.price)
},
price2: {
name: true,
price: true
},
price3: {
name: true,
price: true
},
}
}
}
const handleCategoryChange = (event) => {
setState({ ...state, category: event.target.value });
};
@@ -172,17 +256,34 @@ export default function EditDish() {
const validation = {
name: validator.isLength(state.name, { max: 50, min: 1 }),
category: restaurant.categories.includes(state.category),
price: validator.isLength(state.price, { max: 10, min: 1 }),
prices: validatePrices()
};
const priceErrors = {
price1: {
name: !validation.prices.price1.name,
price: !validation.prices.price1.price
},
price2: {
name: !validation.prices.price2.name,
price: !validation.prices.price2.price
},
price3: {
name: !validation.prices.price3.name,
price: !validation.prices.price3.price
},
};
setState({
...state,
nameError: !validation.name,
categoryError: !validation.category,
priceError: !validation.price,
priceErrors: priceErrors,
});
return validation.name && validation.category && validation.price;
const allPricesValid = validation.prices.price1.name && validation.prices.price1.price && validation.prices.price2.name && validation.prices.price2.price && validation.prices.price3.name && validation.prices.price3.price;
return validation.name && validation.category && allPricesValid;
};
const sendForm = () => {
@@ -191,7 +292,7 @@ export default function EditDish() {
restaurantId: state.restaurantId,
name: state.name,
category: state.category,
price: state.price,
prices: state.prices,
notes: state.notes,
imgUrl: state.imgUrl,
hidden: false,
@@ -238,26 +339,32 @@ export default function EditDish() {
<DialogContent>
<div className="editDish-content">
<Paper variant="outlined">
<div className="newRestaurant-content">
<div className="newRestaurant-content-fullwidth">
<TextField
className={styles.textInput}
required
value={state.name}
error={state.nameError}
label="Nazwa"
variant="outlined"
placeholder="np. Schabowy"
onChange={(event) =>
setState({ ...state, name: event.target.value })
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<TextFieldsIcon color="primary" />
</InputAdornment>
),
}}
/>
className={styles.textInputFullWidth}
fullWidth
required
value={state.name}
error={state.nameError}
label="Nazwa"
variant="outlined"
placeholder="np. Schabowy"
onChange={(event) =>
setState({ ...state, name: event.target.value })
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<TextFieldsIcon color="primary" />
</InputAdornment>
),
}}
/>
</div>
<div className="newRestaurant-content-fullwidth">
<InputPrices multi={state.multiplePrices} setMulti={setMulti} errors={state.priceErrors} prices={state.prices} setPrices={handlePricesChange}/>
</div>
<div className="newRestaurant-content">
<FormControl
variant="outlined"
required
@@ -275,25 +382,6 @@ export default function EditDish() {
{Categories}
</Select>
</FormControl>
<TextField
className={styles.textInput}
required
label="Cena (zł)"
placeholder="np. 18,50"
error={state.priceError}
value={state.price}
variant="outlined"
onChange={(event) =>
setState({ ...state, price: event.target.value })
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AttachMoneyIcon color="primary" />
</InputAdornment>
),
}}
/>
<TextField
className={styles.textInput}
label="Porcja"

102
src/components/Dialogs/NewDish.js
View File

@@ -143,7 +143,21 @@ export default function NewRestaurant() {
charLeft: 200,
nameError: false,
categoryError: false,
priceError: false,
priceErrors: {
price1: {
name: false,
price: false
},
price2: {
name: false,
price: false
},
price3: {
name: false,
price: false
},
},
multiplePrices: false
};
const [state, setState] = useState(initialState);
const styles = useStyles();
@@ -174,6 +188,24 @@ export default function NewRestaurant() {
setState({ ...state, prices: value });
}
const setMulti = (value) => {
const cleanPrices = {
price1: {
priceName: "",
price: state.prices.price1.price
},
price2: {
priceName: "",
price: ""
},
price3: {
priceName: "",
price: ""
},
}
setState({ ...state, multiplePrices: value, prices: cleanPrices });
}
const handleAdd = () => {
if (validateForm()) {
sendForm();
@@ -182,21 +214,79 @@ export default function NewRestaurant() {
}
};
const validatePrice = (value, secondValue) => {
if (!validator.isEmpty(secondValue)) {
return !validator.isEmpty(value);
} else {
return true;
}
}
const validatePrices = () => {
if (state.multiplePrices) {
return {
price1: {
name: validatePrice(state.prices.price1.priceName, state.prices.price1.price),
price: validatePrice(state.prices.price1.price, state.prices.price1.priceName),
},
price2: {
name: validatePrice(state.prices.price2.priceName, state.prices.price2.price),
price: validatePrice(state.prices.price2.price, state.prices.price2.priceName),
},
price3: {
name: validatePrice(state.prices.price3.priceName, state.prices.price3.price),
price: validatePrice(state.prices.price3.price, state.prices.price3.priceName),
},
}
} else {
return {
price1: {
name: true,
price: !validator.isEmpty(state.prices.price1.price)
},
price2: {
name: true,
price: true
},
price3: {
name: true,
price: true
},
}
}
}
const validateForm = () => {
const validation = {
name: validator.isLength(state.name, { max: 50, min: 1 }),
category: restaurant.categories.includes(state.category),
prices: validator.isLength(state.prices.price1.priceName, { max: 18, min: 1 }) && validator.isLength(state.prices.price1.price, { max: 18, min: 1 }),
prices: validatePrices()
};
const priceErrors = {
price1: {
name: !validation.prices.price1.name,
price: !validation.prices.price1.price
},
price2: {
name: !validation.prices.price2.name,
price: !validation.prices.price2.price
},
price3: {
name: !validation.prices.price3.name,
price: !validation.prices.price3.price
},
};
setState({
...state,
nameError: !validation.name,
categoryError: !validation.category,
priceError: !validation.prices,
priceErrors: priceErrors,
});
return validation.name && validation.category && validation.price;
const allPricesValid = validation.prices.price1.name && validation.prices.price1.price && validation.prices.price2.name && validation.prices.price2.price && validation.prices.price3.name && validation.prices.price3.price;
return validation.name && validation.category && allPricesValid;
};
const sendForm = () => {
@@ -296,7 +386,7 @@ export default function NewRestaurant() {
/>
</div>
<div className="newRestaurant-content-fullwidth">
<InputPrices error={state.priceError} prices={state.prices} setPrices={handlePricesChange}/>
<InputPrices multi={state.multiplePrices} setMulti={setMulti} errors={state.priceErrors} prices={state.prices} setPrices={handlePricesChange}/>
</div>
<div className="newRestaurant-content">
<FormControl
@@ -420,7 +510,7 @@ export default function NewRestaurant() {
/>
</Paper>
<div className="newRestaurant-bottom">
<ButtonSecondary onClick={handleAdd} text="Dodaj" />
<ButtonSecondary onClick={handleAdd} text="Dodaj danie" />
</div>
</DialogContent>
</Dialog>

112
src/components/Input/InputPrices.js
View File

@@ -1,7 +1,11 @@
import React, { useState } from 'react'
import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import TextField from '@material-ui/core/TextField';
import InputAdornment from "@material-ui/core/InputAdornment";
import LocalOfferIcon from '@material-ui/icons/LocalOffer';
import TextFieldsIcon from "@material-ui/icons/TextFields";
import ButtonSecondary from "../Input/ButtonSecondary";
const useStyles = makeStyles((theme) => ({
root: {
@@ -21,7 +25,8 @@ const useStyles = makeStyles((theme) => ({
},
header: {
color: "#d68000",
fontSize: "16px"
fontSize: "16px",
fontWeight: "500"
},
paragraph: {
color: "#bbbbbb",
@@ -55,77 +60,152 @@ const useStyles = makeStyles((theme) => ({
optionContainer: {
display: "flex",
alignItems: "center",
justifyContent: "center",
margin: theme.spacing(1)
}
}));
export default function InputPrices(props) {
const classes = useStyles();
const [multi, setMulti] = useState("initial");
const getDisplay = (index) => {
switch (index) {
case 0:
if (props.multi === false) {
return "initial";
} else {
return "none";
}
case 1:
if (props.multi === false) {
return "none";
} else {
return "initial";
}
default:
return "none";
}
}
return <div className={classes.root}>
<Paper variant="outlined">
<h3 className={classes.header}>Podaj ceny</h3>
<p className={classes.paragraph}>Jeżeli ta pozycja w menu ma kilka opcji cenowych (np. Mała/Średnia/Duża porcja) - możesz dodać do trzech cen wraz z nazwami poszczególnych opcji.</p>
<div className={classes.paper} style={{ display: multi }}>
<div className={classes.paper} style={{ display: getDisplay(0) }}>
<div className={classes.optionContainer}>
<TextField variant="outlined" label="Cena" placeholder="np. 15,50" error={props.errors.price1.price} value={props.prices.price1.price} className={classes.textField} required
onChange={(event) => {
props.setPrices({
...props.prices, price1: {
priceName: props.prices.price1.priceName,
price: event.target.value
}
})}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<LocalOfferIcon color="primary" />
</InputAdornment>
),
}}/>
</div>
</div>
<div className={classes.paper} style={{ display: getDisplay(1) }}>
<div className={classes.optionContainer}>
<h4 className={classes.option}>Cena 1</h4>
<TextField error={props.error} value={props.prices.price1.priceName} onChange={(event) => {
<TextField error={props.errors.price1.name} value={props.prices.price1.priceName} onChange={(event) => {
props.setPrices({
...props.prices, price1: {
priceName: event.target.value,
price: props.prices.price1.price
}})
}} className={classes.textField} label="Nazwa" variant="outlined" required placeholder="np. Mała"/>
<TextField error={props.error} onChange={(event) => {
}} className={classes.textField} label="Nazwa" variant="outlined" required placeholder="np. Mała" InputProps={{
startAdornment: (
<InputAdornment position="start">
<TextFieldsIcon color="primary" />
</InputAdornment>
),
}}/>
<TextField error={props.errors.price1.price} onChange={(event) => {
props.setPrices({
...props.prices, price1: {
priceName: props.prices.price1.priceName,
price: event.target.value
}})
}} value={props.prices.price1.price} className={classes.textField} label="Cena" variant="outlined" required placeholder="np. 14zł"/>
}} value={props.prices.price1.price} className={classes.textField} label="Cena" variant="outlined" required placeholder="np. 14" InputProps={{
startAdornment: (
<InputAdornment position="start">
<LocalOfferIcon color="primary" />
</InputAdornment>
),
}}/>
</div>
<div className={classes.optionContainer}>
<div>
<h4 className={classes.option}>Cena 2</h4>
<p className={classes.subOption}>(opcjonalna)</p>
</div>
<TextField onChange={(event) => {
<TextField error={props.errors.price2.name} onChange={(event) => {
props.setPrices({
...props.prices, price2: {
priceName: event.target.value,
price: props.prices.price2.price
}})
}} value={props.prices.price2.priceName} className={classes.textField} label="Nazwa" variant="outlined" placeholder="np. Średnia"/>
<TextField onChange={(event) => {
}} value={props.prices.price2.priceName} className={classes.textField} label="Nazwa" variant="outlined" placeholder="np. Średnia" InputProps={{
startAdornment: (
<InputAdornment position="start">
<TextFieldsIcon color="primary" />
</InputAdornment>
),
}}/>
<TextField error={props.errors.price2.price} onChange={(event) => {
props.setPrices({
...props.prices, price2: {
priceName: props.prices.price2.priceName,
price: event.target.value
}})
}} value={props.prices.price2.price} className={classes.textField} label="Cena" variant="outlined" placeholder="np. 18zł"/>
}} value={props.prices.price2.price} className={classes.textField} label="Cena" variant="outlined" placeholder="np. 18" InputProps={{
startAdornment: (
<InputAdornment position="start">
<LocalOfferIcon color="primary" />
</InputAdornment>
),
}}/>
</div>
<div className={classes.optionContainer}>
<div>
<h4 className={classes.option}>Cena 3</h4>
<p className={classes.subOption}>(opcjonalna)</p>
</div>
<TextField onChange={(event) => {
<TextField error={props.errors.price3.name} onChange={(event) => {
props.setPrices({
...props.prices, price3: {
priceName: event.target.value,
price: props.prices.price3.price
}})
}} value={props.prices.price3.priceName} className={classes.textField} label="Nazwa" variant="outlined" placeholder="np. Duża"/>
<TextField onChange={(event) => {
}} value={props.prices.price3.priceName} className={classes.textField} label="Nazwa" variant="outlined" placeholder="np. Duża" InputProps={{
startAdornment: (
<InputAdornment position="start">
<TextFieldsIcon color="primary" />
</InputAdornment>
),
}}/>
<TextField error={props.errors.price3.price} onChange={(event) => {
props.setPrices({
...props.prices, price3: {
priceName: props.prices.price3.priceName,
price: event.target.value
}})
}} value={props.prices.price3.price} className={classes.textField} label="Cena" variant="outlined" placeholder="np. 22zł"/>
}} value={props.prices.price3.price} className={classes.textField} label="Cena" variant="outlined" placeholder="np. 22" InputProps={{
startAdornment: (
<InputAdornment position="start">
<LocalOfferIcon color="primary" />
</InputAdornment>
),
}}/>
</div>
</div>
<ButtonSecondary onClick={() => props.setMulti(!props.multi)} text={ props.multi ? "Jedna cena" : "Kilka opcji cenowych" }/>
</Paper>
</div>
}

6
src/components/Input/SearchPanel.js
View File

@@ -10,14 +10,14 @@ const useStyles = makeStyles((theme) => ({
root: {
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#01c3a9",
borderColor: "#bbbbbb",
},
},
"& .MuiInputBase-root": {
color: "#01c3a9",
color: "#bbbbbb",
},
"& .MuiInputLabel-root": {
color: "#01c3a9",
color: "#bbbbbb",
},
},
}));

2
src/components/Output/CardDish.js
View File

@@ -32,7 +32,7 @@ export default function CardDish(props) {
<h2>{name}</h2>
<p>Porcja: {weight}</p>
<p>
{vegan && "Danie wegańskie "}
{vegan && "Danie wegańskie | "}
{vegetarian && "Danie wegetariańskie"}
</p>
</div>

10
src/components/Output/DishPrices.js Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react'
export default function DishPrices(props) {
const { prices } = props;
const display2 = prices.price2.price !== "";
const display3 = prices.price3.price !== "";
return <p>{display2 || display3 && prices.price1.priceName}{" " + prices.price1.price}zł{ display2 && " / " + prices.price2.priceName + " " + prices.price2.price + "zł"}{ display3 && " / " + prices.price3.priceName + " " + prices.price3.price + "zł"}</p>
}