redesign / fixes

src/components/Output/AppBackdrop.js

@@ -6,7 +6,7 @@ import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles((theme) => ({
   backdrop: {
-    zIndex: theme.zIndex.drawer + 15,
+    zIndex: theme.zIndex.drawer + 5,
     color: "#fff",
   },
 }));

src/components/Output/DishesCategory.js

@@ -11,6 +11,9 @@ const useStyles = makeStyles((theme) => ({
   root: {
     backgroundColor: "#262626",
     color: "#bbbbbb",
+    "& .MuiListItem-gutters": {
+      padding: "2px"
+    }
   },
   expandIcon: {
     color: "#bbbbbb",
@@ -20,6 +23,7 @@ const useStyles = makeStyles((theme) => ({
 export default function DishesCategory(props) {
   const classes = useStyles();
   const dishes = props.dishes;
+
   const dishCards = dishes.map((dish) => {
     return (
       <ListItem key={dish._id}>

src/components/Output/EditDishList.js

@@ -90,18 +90,19 @@ export default function EditDishList(props) {
     setSetListOpen(true);
   };
 
-  const addToSet = (setName) => {
+  const addToSet = (setName, quantity) => {
     setSetListOpen(false);
     const data = {
       setName: setName,
       restaurantId: props.restaurantId,
       dishId: selectedDish,
+      quantity: quantity,
       action: "add",
     };
     dispatch(showBackdrop());
     axios({
       method: "POST",
-      url: backend + "/restaurant/lunch",
+      url: backend + "restaurant/lunch",
       data: data,
       headers: {
         "x-auth-token": token,
@@ -182,7 +183,7 @@ export default function EditDishList(props) {
         lunchMenu={props.lunchMenu}
         open={setListOpen}
         cancel={() => setSetListOpen(false)}
-        add={(setName) => addToSet(setName)}
+        add={(setName, quantity) => addToSet(setName, quantity)}
       />
       {thisCategoryDishes.length === 0 ? (
         <ListItem style={{ marginLeft: "14px", fontSize: "12px" }}>

src/components/Output/LunchCardDish.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
+
+export default function LunchCardDish(props) {
+  const history = useHistory();
+  const {
+    name,
+    imgUrl,
+    _id,
+  } = props.dish;
+
+  return (
+    <div
+      className="carddish-container"
+      onClick={() => history.push(`/dish/${_id}`)}
+    >
+      <div className="carddish-left">
+        <h3>{props.quantity}x</h3>
+        <div
+          className="lunch-carddish-img"
+          style={{ backgroundImage: "url(" + imgUrl + ")" }}
+        />
+        <div className="carddish-left-info">
+            <h2>{name}</h2>
+        </div>
+      </div>
+      <div className="lunch-carddish-right">
+        <KeyboardArrowRightIcon color="primary" />
+      </div>
+    </div>
+  );
+}

src/components/Output/LunchDishesCategory.js

@@ -0,0 +1,63 @@
+import React from "react";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import LunchCardDish from "./LunchCardDish";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: "#262626",
+    color: "#bbbbbb",
+    "& .MuiListItem-gutters": {
+      padding: "2px"
+    },
+  },
+  expandIcon: {
+    color: "#bbbbbb",
+  },
+}));
+
+const filterDishes = (dishes, setDishes) => {
+    const ids = setDishes.map((dish) => {
+      return dish.dishId
+    })
+    let result = [];
+    dishes.map((dish) => {
+      if (ids.includes(dish._id)) {
+        const lunchSetDish = setDishes.filter((thisDish) => thisDish.dishId === dish._id)[0]
+        result.push({...dish, quantity: lunchSetDish.quantity});
+      }
+      return true;
+    });
+    return result;
+};
+
+
+export default function LunchDishesCategory(props) {
+  const classes = useStyles();
+  const dishes = props.dishes;
+  const filtered = filterDishes(dishes, props.lunchSetDishes)
+  const dishCards = filtered.map((dish) => {
+    return (
+      <ListItem key={dish._id}>
+        <LunchCardDish dish={dish} quantity={dish.quantity}></LunchCardDish>
+      </ListItem>
+    );
+  });
+
+  return (
+    <Accordion className={classes.root}>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+      >
+        <h4>
+          {props.name} <span>{props.price && `(${props.price}zł)`}</span>
+        </h4>
+      </AccordionSummary>
+      <List>{dishCards}</List>
+    </Accordion>
+  );
+}

src/components/Output/LunchMenu.js

@@ -1,35 +1,26 @@
 import React from "react";
-import DishesCategory from "./DishesCategory";
+import LunchDishesCategory from "./LunchDishesCategory";
 import { useSelector } from "react-redux";
 
 export default function LunchMenu(props) {
-  const dishlist = useSelector((state) => state.dishes);
+  const dishes = useSelector((state) => state.dishes)
   const { restaurant } = props;
   const lunchMenu = restaurant.lunchMenu;
-  function filterDishes(dishes, set) {
-    var result = [];
-    if (dishes.length !== 0) {
-      dishes.map((dish) => {
-        if (set.lunchSetDishes.includes(dish._id)) {
-          result.push(dish);
-        }
-        return true;
-      });
-      return result;
-    } else {
-      return [];
-    }
-  }
   const sets = lunchMenu.map((set) => {
-    return (
-      <DishesCategory
-        key={set.lunchSetName}
-        name={set.lunchSetName}
-        price={set.lunchSetPrice}
-        hidePrice={true}
-        dishes={filterDishes(dishlist, set)}
-      />
-    );
+    if(set.lunchSetDishes.length > 0){
+      return (
+        <LunchDishesCategory
+          key={set.lunchSetName}
+          name={set.lunchSetName}
+          price={set.lunchSetPrice}
+          hidePrice={true}
+          lunchSetDishes={set.lunchSetDishes}
+          dishes={dishes}
+        />
+      );
+    } else {
+      return <div key={set.lunchSetName}></div>;
+    }
   });
 
   return <div className="dishlist-container">{sets && sets}</div>;

src/components/Output/LunchSetDishList.js

@@ -18,9 +18,12 @@ export default function EditDishList(props) {
   const token = useSelector((state) => state.data.userData.jwt);
 
   const filterDishes = (dishes, setDishes) => {
+    const ids = setDishes.map((dish) => {
+      return dish.dishId
+    })
     let result = [];
     dishes.map((dish) => {
-      if (setDishes.includes(dish._id)) {
+      if (ids.includes(dish._id)) {
         result.push(dish);
       }
       return true;
@@ -50,7 +53,7 @@ export default function EditDishList(props) {
     dispatch(showBackdrop());
     axios({
       method: "POST",
-      url: backend + "/restaurant/lunch",
+      url: backend + "restaurant/lunch",
       data: data,
       headers: {
         "x-auth-token": token,
@@ -70,10 +73,14 @@ export default function EditDishList(props) {
   const allDishes = useSelector((state) => state.dishes);
   const thisSetDishes = filterDishes(allDishes, props.lunchSet.lunchSetDishes);
   const Dishes = thisSetDishes.map((dish) => {
+    const thisDishInSet = props.lunchSet.lunchSetDishes.filter((dishInSet) => {
+      return dishInSet.dishId === dish._id;
+    })[0]
     return (
       <ListItem key={dish._id}>
         <div className="editRestaurant-dish">
           <div className="editRestaurant-dishLeft">
+            <h3 className="editRestaurant-dishLeft-header">{thisDishInSet.quantity}x</h3>
             <div
               className="editRestaurant-dishImg"
               style={

src/components/Output/Restaurant.js

@@ -73,6 +73,7 @@ export default function Restaurant(props) {
       <div className="restaurant-content">
         <div className="restaurant-dishes">
           {!showDishList && <CircularProgress />}
+          {(showDishList && restaurant.lunchMenu) && <h3>Zestawy</h3>}
           {(showDishList && restaurant.lunchMenu) && <LunchMenu restaurant={restaurant} />}
           <h3>Menu</h3>
           {!showDishList && <CircularProgress />}