web client v0.8

src/components/EditRestaurant/LunchMenu.js

@@ -9,6 +9,16 @@ import YesNo from "../Dialogs/YesNo";
 import ButtonSecondary from "../Input/ButtonSecondary";
 import TextField from "@material-ui/core/TextField";
 import AddIcon from "@material-ui/icons/Add";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
+import TextFieldsIcon from "@material-ui/icons/TextFields";
+import axios from "axios";
+import validator from "validator";
+import { useDispatch, useSelector } from "react-redux";
+import { notification, refreshUserData } from "../../actions";
+import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
+import { backend } from "../../config";
+import Tooltip from "@material-ui/core/Tooltip";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -20,9 +30,24 @@ const useStyles = makeStyles((theme) => ({
   expandIcon: {
     color: "#bbbbbb",
   },
-  textInputFullWidth: {
+  textInput: {
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(2),
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiFormHelperText-root": {
+      color: "#bbbbbb",
+    },
+  },
+  textInputWide: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(2),
     flexGrow: 5,
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
@@ -37,16 +62,28 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function EditCategoriesList(props) {
+  const dispatch = useDispatch();
   const [open, setOpen] = useState(false);
-  const [newSet, setNewSet] = useState("");
+  const initialSet = {
+    lunchSetName: "",
+    lunchSetPrice: "",
+    lunchSetDishes: [],
+    nameError: false,
+    priceError: false,
+  };
+  const [newSet, setNewSet] = useState(initialSet);
+  const [selectedSet, setSelectedSet] = useState(initialSet);
+  const token = useSelector((state) => state.data.userData.jwt);
   const classes = useStyles();
   const handleDeleteButton = (set) => {
+    setSelectedSet(set);
     setOpen(true);
   };
   const onCancel = () => {
     setOpen(false);
   };
   const onAccept = () => {
+    sendForm("delete", selectedSet);
     setOpen(false);
   };
   const SetList = props.lunchMenu.map((set) => {
@@ -55,21 +92,83 @@ export default function EditCategoriesList(props) {
         <AccordionSummary
           expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
         >
-          <h4>{set.name}</h4>
+          <h4>
+            {set.lunchSetName} ({set.lunchSetPrice}zł)
+          </h4>
           <div className="editRestaurant-categorySpan">
-            <IconButton
-              color="primary"
-              component="span"
-              onClick={() => handleDeleteButton(set)}
-            >
-              <DeleteIcon />
-            </IconButton>
+            <Tooltip title="Usuń">
+              <IconButton
+                color="primary"
+                component="span"
+                onClick={() => handleDeleteButton(set)}
+              >
+                <DeleteIcon />
+              </IconButton>
+            </Tooltip>
           </div>
         </AccordionSummary>
       </Accordion>
     );
   });
 
+  // HANDLERS
+
+  const validateForm = () => {
+    const validation = {
+      nameValid: validator.isLength(newSet.lunchSetName, { min: 1, max: 30 }),
+      priceValid: validator.isLength(newSet.lunchSetPrice, { min: 1, max: 12 }),
+    };
+    setNewSet({
+      ...newSet,
+      nameError: !validation.nameValid,
+      priceError: !validation.priceValid,
+    });
+
+    return validation.nameValid && validation.priceValid;
+  };
+
+  const sendForm = (action, set) => {
+    let valid = false;
+    if (action === "add") {
+      valid = validateForm();
+    } else {
+      valid = true;
+    }
+    if (valid) {
+      const data = {
+        restaurantId: props.restaurantId,
+        action: action,
+        set: {
+          lunchSetName: set.lunchSetName,
+          lunchSetPrice: set.lunchSetPrice,
+          lunchSetDishes: set.lunchSetDishes,
+        },
+      };
+      dispatch(showBackdrop());
+      axios({
+        method: "POST",
+        url: backend + "/restaurant/lunchSet",
+        data: data,
+        headers: {
+          "x-auth-token": token,
+        },
+      })
+        .then((response) => {
+          dispatch(hideBackdrop());
+          dispatch(notification("Zmieniono zestaw.", "success"));
+          dispatch(refreshUserData(token));
+        })
+        .catch((error) => {
+          dispatch(hideBackdrop());
+          dispatch(notification("Wystąpił błąd.", "error"));
+        });
+    } else {
+      dispatch(notification("Popraw dane.", "error"));
+    }
+  };
+
+  // COMPONENT
+
   return (
     <div style={{ width: "100%" }}>
       <YesNo open={open} cancel={onCancel} accept={onAccept} />
@@ -82,13 +181,41 @@ export default function EditCategoriesList(props) {
         </AccordionSummary>
         <div className="editRestaurant-addCategory">
           <TextField
-            className={classes.textInputFullWidth}
-            value={newSet}
-            onChange={(event) => setNewSet(event.target.value)}
+            className={classes.textInputWide}
+            value={newSet.lunchSetName}
+            onChange={(event) =>
+              setNewSet({ ...newSet, lunchSetName: event.target.value })
+            }
             label="Nazwa zestawu"
             variant="outlined"
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <TextFieldsIcon color="primary" />
+                </InputAdornment>
+              ),
+            }}
           ></TextField>
-          <ButtonSecondary onClick={() => {}} text="Dodaj" />
+          <TextField
+            className={classes.textInput}
+            value={newSet.lunchSetPrice}
+            onChange={(event) =>
+              setNewSet({ ...newSet, lunchSetPrice: event.target.value })
+            }
+            label="Cena"
+            variant="outlined"
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <AttachMoneyIcon color="primary" />
+                </InputAdornment>
+              ),
+            }}
+          ></TextField>
+          <ButtonSecondary
+            onClick={() => sendForm("add", newSet)}
+            text="Dodaj"
+          />
         </div>
       </Accordion>
     </div>