web client v0.6 (add dish)

src/components/EditRestaurant/LunchMenu.js

@@ -1,31 +1,96 @@
-import React from "react";
+import React, { useState } from "react";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import IconButton from "@material-ui/core/IconButton";
 import DeleteIcon from "@material-ui/icons/Delete";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
+import { makeStyles } from "@material-ui/core/styles";
+import YesNo from "../Dialogs/YesNo";
+import ButtonSecondary from "../Input/ButtonSecondary";
+import TextField from "@material-ui/core/TextField";
+import AddIcon from "@material-ui/icons/Add";
 
-export default function LunchMenu(props) {
-  const { lunchMenu } = props;
-  const LunchDishes = () => {
-    if (lunchMenu.length > 0) {
-      lunchMenu.map((dish) => {
-        return (
-          <ListItem key={dish}>
-            Dish name
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: "#262626",
+    color: "#bbbbbb",
+    width: "100%",
+    marginBottom: "24px",
+  },
+  expandIcon: {
+    color: "#bbbbbb",
+  },
+  textInputFullWidth: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    flexGrow: 5,
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiFormHelperText-root": {
+      color: "#bbbbbb",
+    },
+  },
+}));
+
+export default function EditCategoriesList(props) {
+  const [open, setOpen] = useState(false);
+  const [newSet, setNewSet] = useState("");
+  const classes = useStyles();
+  const handleDeleteButton = (set) => {
+    setOpen(true);
+  };
+  const onCancel = () => {
+    setOpen(false);
+  };
+  const onAccept = () => {
+    setOpen(false);
+  };
+  const SetList = props.lunchMenu.map((set) => {
+    return (
+      <Accordion key={set.id} className={classes.root}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+        >
+          <h4>{set.name}</h4>
+          <div className="editRestaurant-categorySpan">
             <IconButton
               color="primary"
-              aria-label="upload picture"
               component="span"
+              onClick={() => handleDeleteButton(set)}
             >
               <DeleteIcon />
             </IconButton>
-          </ListItem>
-        );
-      });
-    } else {
-      return <ListItem>Lunch menu puste</ListItem>;
-    }
-  };
+          </div>
+        </AccordionSummary>
+      </Accordion>
+    );
+  });
 
-  return <List>{LunchDishes}</List>;
+  return (
+    <div style={{ width: "100%" }}>
+      <YesNo open={open} cancel={onCancel} accept={onAccept} />
+      {props.lunchMenu.length === 0 ? <p>Lunch menu puste</p> : SetList}
+      <Accordion className={classes.root}>
+        <AccordionSummary
+          expandIcon={<AddIcon className={classes.expandIcon} />}
+        >
+          <h4>Dodaj zestaw</h4>
+        </AccordionSummary>
+        <div className="editRestaurant-addCategory">
+          <TextField
+            className={classes.textInputFullWidth}
+            value={newSet}
+            onChange={(event) => setNewSet(event.target.value)}
+            label="Nazwa zestawu"
+            variant="outlined"
+          ></TextField>
+          <ButtonSecondary onClick={() => {}} text="Dodaj" />
+        </div>
+      </Accordion>
+    </div>
+  );
 }