price -> prices (unfinished)

src/components/Dialogs/Dish.js

@@ -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>

src/components/Dialogs/EditDish.js

@@ -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}
+                className={styles.textInputFullWidth}
-                  required
+                fullWidth
-                  value={state.name}
+                required
-                  error={state.nameError}
+                value={state.name}
-                  label="Nazwa"
+                error={state.nameError}
-                  variant="outlined"
+                label="Nazwa"
-                  placeholder="np. Schabowy"
+                variant="outlined"
-                  onChange={(event) =>
+                placeholder="np. Schabowy"
-                    setState({ ...state, name: event.target.value })
+                onChange={(event) =>
-                  }
+                  setState({ ...state, name: event.target.value })
-                  InputProps={{
+                }
-                    startAdornment: (
+                InputProps={{
-                      <InputAdornment position="start">
+                  startAdornment: (
-                        <TextFieldsIcon color="primary" />
+                    <InputAdornment position="start">
-                      </InputAdornment>
+                      <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"

src/components/Dialogs/NewDish.js

@@ -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>

src/components/Input/InputPrices.js

@@ -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"/>
+                    }} className={classes.textField} label="Nazwa" variant="outlined" required placeholder="np. Mała" InputProps={{
-                    <TextField error={props.error} onChange={(event) => {
+                  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"/>
+                    }} value={props.prices.price2.priceName} className={classes.textField} label="Nazwa" variant="outlined" placeholder="np. Średnia" InputProps={{
-                    <TextField onChange={(event) => {
+                  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"/>
+                    }} value={props.prices.price3.priceName} className={classes.textField} label="Nazwa" variant="outlined" placeholder="np. Duża" InputProps={{
-                    <TextField onChange={(event) => {
+                  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>
 }

src/components/Input/SearchPanel.js

@@ -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",
     },
   },
 }));

src/components/Output/CardDish.js

@@ -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>

src/components/Output/DishPrices.js

@@ -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>
+}

src/styles/Dish.scss

@@ -48,7 +48,7 @@
   h5 {
     font-size: 1rem;
     font-weight: 300;
-    margin: 0 8px 0 auto;
+    margin: 0 0 0 auto;
   }
   p {
     color: $gray;
@@ -71,9 +71,9 @@
 }
 
 .dish-row-column {
-  margin-top: 18px;
+  margin-top: 12px;
-  margin-bottom: 18px;
+  margin-bottom: 12px;
   h5 {
-    margin-bottom: 8px;
+    margin-bottom: 4px;
   }
 }

src/styles/DishList.scss

@@ -40,10 +40,12 @@ h4 {
 .carddish-left {
   display: flex;
   h2 {
-    font-size: 1rem;
+    font-size: 1.1rem;
+    font-weight: 500;
     margin: auto;
   }
   p {
+    font-size: 13px;
     margin-left: auto;
     color: $gray;
   }

src/styles/Pictograms.scss

@@ -24,6 +24,7 @@
   padding: 2px;
   margin: 4px;
   h4 {
+    color: #c0c0c0;
     margin: 8px 4px 8px 8px;
   }
   .pictogram {

src/styles/SearchResults.scss

@@ -79,3 +79,13 @@
     font-size: 0.9rem;
   }
 }
+
+.card-description {
+  overflow: hidden;
+  line-height: 1.2em;
+  max-height: 3.5em;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* number of lines to show */
+  -webkit-box-orient: vertical;
+}