price -> prices (unfinished)
This commit is contained in:
@@ -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>
|
||||
}
|
||||
@@ -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",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user