web client v0.7 (edit dish / visibility / delete/ routes)
This commit is contained in:
409
src/components/Dialogs/EditDish.js
Normal file
409
src/components/Dialogs/EditDish.js
Normal file
@@ -0,0 +1,409 @@
|
||||
import React, { useState } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { useParams, useHistory } from "react-router-dom";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
import ButtonSecondary from "../Input/ButtonSecondary";
|
||||
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";
|
||||
import { notification, refreshUserData } from "../../actions";
|
||||
import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
|
||||
import InputLabel from "@material-ui/core/InputLabel";
|
||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||
import Checkboxes from "../Input/Checkboxes";
|
||||
import axios from "axios";
|
||||
import { backend } from "../../config";
|
||||
import MenuItem from "@material-ui/core/MenuItem";
|
||||
import FormControl from "@material-ui/core/FormControl";
|
||||
import Select from "@material-ui/core/Select";
|
||||
import ImageUpload from "../Input/ImageUpload";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
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";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
margin: "auto",
|
||||
textAlign: "center",
|
||||
maxHeight: "90vh",
|
||||
"& .MuiPaper-root": {
|
||||
width: "auto",
|
||||
backgroundColor: "#262626",
|
||||
color: "#bbbbbb",
|
||||
overflow: "visible",
|
||||
},
|
||||
},
|
||||
closeButton: {
|
||||
color: "#bbbbbb",
|
||||
position: "absolute",
|
||||
right: theme.spacing(1),
|
||||
top: theme.spacing(1),
|
||||
},
|
||||
textInput: {
|
||||
margin: theme.spacing(2),
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
"& .MuiInputLabel-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
},
|
||||
textInputFullWidth: {
|
||||
marginTop: theme.spacing(2),
|
||||
marginBottom: theme.spacing(2),
|
||||
color: "#bbbbbb",
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
"& .MuiInputLabel-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
"$ .MuiFormHelperText-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
},
|
||||
formControl: {
|
||||
margin: theme.spacing(2),
|
||||
minWidth: 100,
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
"$ .MuiSelect-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
"& .MuiInputLabel-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
},
|
||||
selectEmpty: {
|
||||
marginTop: theme.spacing(2),
|
||||
},
|
||||
}));
|
||||
|
||||
export default function EditDish() {
|
||||
const styles = useStyles();
|
||||
const token = useSelector((state) => state.data.userData.jwt);
|
||||
const { id } = useParams();
|
||||
const dishes = useSelector((state) => state.dishes);
|
||||
const history = useHistory();
|
||||
const dispatch = useDispatch();
|
||||
const dish = dishes.find((element) => element._id === id);
|
||||
if (dish === undefined) history.push("/");
|
||||
const initialState = {
|
||||
restaurantId: dish.restaurantId,
|
||||
name: dish.name,
|
||||
category: dish.category,
|
||||
price: dish.price,
|
||||
notes: dish.notes,
|
||||
imgUrl: dish.imgUrl,
|
||||
hidden: false,
|
||||
weight: dish.weight,
|
||||
allergens: {
|
||||
gluten: dish.allergens.gluten,
|
||||
lactose: dish.allergens.lactose,
|
||||
soy: dish.allergens.soy,
|
||||
eggs: dish.allergens.eggs,
|
||||
seaFood: dish.allergens.seaFood,
|
||||
peanuts: dish.allergens.peanuts,
|
||||
sesame: dish.allergens.sesame,
|
||||
},
|
||||
ingredients: dish.ingredients,
|
||||
glicemicIndex: dish.glicemicIndex,
|
||||
kCal: dish.kCal,
|
||||
vegan: dish.vegan,
|
||||
vegetarian: dish.vegetarian,
|
||||
charLeft: 200 - dish.notes.length,
|
||||
nameError: false,
|
||||
categoryError: false,
|
||||
priceError: false,
|
||||
};
|
||||
const [state, setState] = useState(initialState);
|
||||
|
||||
const restaurants = useSelector((state) => state.data.userData.restaurants);
|
||||
function matchId(element) {
|
||||
return element._id === dish.restaurantId;
|
||||
}
|
||||
const restaurant = restaurants.find(matchId);
|
||||
if (restaurant === undefined) history.push("/");
|
||||
|
||||
const Categories = restaurant.categories.map((category) => {
|
||||
return (
|
||||
<MenuItem key={category} value={category}>
|
||||
{category}
|
||||
</MenuItem>
|
||||
);
|
||||
});
|
||||
|
||||
// HANDLERS
|
||||
|
||||
const handleCategoryChange = (event) => {
|
||||
setState({ ...state, category: event.target.value });
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
if (validateForm()) {
|
||||
sendForm();
|
||||
} else {
|
||||
dispatch(notification("Popraw dane", "error"));
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageUploaded = (link) => {
|
||||
setState({ ...state, imgUrl: link });
|
||||
};
|
||||
|
||||
const handleDescriptionChange = (event) => {
|
||||
let stringLength = event.target.value.length;
|
||||
let charleft = 200 - stringLength;
|
||||
setState({ ...state, notes: event.target.value, charLeft: charleft });
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const validation = {
|
||||
name: validator.isLength(state.name, { max: 50, min: 1 }),
|
||||
category: restaurant.categories.includes(state.category),
|
||||
price: validator.isAlphanumeric(state.price),
|
||||
};
|
||||
|
||||
setState({
|
||||
...state,
|
||||
nameError: !validation.name,
|
||||
categoryError: !validation.category,
|
||||
priceError: !validation.price,
|
||||
});
|
||||
|
||||
return validation.name && validation.category && validation.price;
|
||||
};
|
||||
|
||||
const sendForm = () => {
|
||||
const data = {
|
||||
dishId: id,
|
||||
restaurantId: state.restaurantId,
|
||||
name: state.name,
|
||||
category: state.category,
|
||||
price: state.price,
|
||||
notes: state.notes,
|
||||
imgUrl: state.imgUrl,
|
||||
hidden: false,
|
||||
weight: state.weight,
|
||||
allergens: state.allergens,
|
||||
ingredients: state.ingredients,
|
||||
glicemicIndex: state.glicemicIndex,
|
||||
kCal: state.kCal,
|
||||
vegan: state.vegan,
|
||||
vegetarian: state.vegetarian,
|
||||
};
|
||||
dispatch(showBackdrop());
|
||||
axios({
|
||||
url: backend + "/dish",
|
||||
method: "PUT",
|
||||
data: data,
|
||||
headers: {
|
||||
"x-auth-token": token,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
dispatch(hideBackdrop());
|
||||
dispatch(notification("Danie zmienione.", "success"));
|
||||
dispatch(refreshUserData(token));
|
||||
history.push(`/dish/${dish._id}`);
|
||||
})
|
||||
.catch((error) => {
|
||||
dispatch(hideBackdrop());
|
||||
dispatch(
|
||||
notification("Wystąpił nieoczekiwany błąd, przepraszamy.", "error")
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
className={styles.root}
|
||||
open={true}
|
||||
aria-labelledby="newRestaurant-title"
|
||||
>
|
||||
<DialogTitle id="newRestaurant-title">{state.name}</DialogTitle>
|
||||
<Divider />
|
||||
<DialogContent>
|
||||
<div className="editDish-content">
|
||||
<Paper variant="outlined">
|
||||
<div className="newRestaurant-content">
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
required
|
||||
value={state.name}
|
||||
error={state.nameError}
|
||||
label="Nazwa"
|
||||
variant="outlined"
|
||||
placeholder="np. Schabowy"
|
||||
onChange={(event) =>
|
||||
setState({ ...state, name: event.target.value })
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<TextFieldsIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<FormControl
|
||||
variant="outlined"
|
||||
required
|
||||
className={styles.formControl}
|
||||
>
|
||||
<InputLabel id="category-select">Kategoria</InputLabel>
|
||||
<Select
|
||||
labelId="category-select"
|
||||
id="category"
|
||||
value={state.category}
|
||||
error={state.categoryError}
|
||||
required
|
||||
onChange={handleCategoryChange}
|
||||
>
|
||||
{Categories}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
required
|
||||
label="Cena"
|
||||
placeholder="np. 18,50"
|
||||
type="number"
|
||||
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="Waga (g)"
|
||||
type="number"
|
||||
placeholder="np. 150"
|
||||
value={state.weight}
|
||||
variant="outlined"
|
||||
onChange={(event) =>
|
||||
setState({ ...state, weight: event.target.value })
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<FitnessCenterIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
label="Indeks glikemiczny"
|
||||
placeholder="np. 70"
|
||||
type="number"
|
||||
value={state.glicemicIndex}
|
||||
variant="outlined"
|
||||
onChange={(event) =>
|
||||
setState({ ...state, glicemicIndex: event.target.value })
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<LocalHospitalIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
label="Kaloryczność (kcal)"
|
||||
value={state.kCal}
|
||||
placeholder="np. 1000"
|
||||
variant="outlined"
|
||||
onChange={(event) =>
|
||||
setState({ ...state, kCal: event.target.value })
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<FavoriteBorderIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="newRestaurant-content-fullwidth">
|
||||
<TextField
|
||||
className={styles.textInputFullWidth}
|
||||
fullWidth
|
||||
multiline
|
||||
rows={2}
|
||||
rowsMax={4}
|
||||
value={state.ingredients}
|
||||
placeholder="np. ziemniaki, mąka, filet z dorsza, pieprz, sól..."
|
||||
label="Składniki"
|
||||
variant="outlined"
|
||||
onChange={(event) =>
|
||||
setState({ ...state, ingredients: event.target.value })
|
||||
}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.textInputFullWidth}
|
||||
fullWidth
|
||||
multiline
|
||||
rows={2}
|
||||
rowsMax={4}
|
||||
value={state.notes}
|
||||
label="Uwagi"
|
||||
variant="outlined"
|
||||
onChange={handleDescriptionChange}
|
||||
helperText={"Pozostałe znaki: " + state.charLeft}
|
||||
FormHelperTextProps={{
|
||||
style: { color: "#bbbbbb" },
|
||||
}}
|
||||
/>
|
||||
<Checkboxes
|
||||
allergens={state.allergens}
|
||||
vegan={state.vegan}
|
||||
vegetarian={state.vegetarian}
|
||||
onVegan={() => setState({ ...state, vegan: !state.vegan })}
|
||||
onVegetarian={() =>
|
||||
setState({ ...state, vegetarian: !state.vegetarian })
|
||||
}
|
||||
onUpdate={(updated) =>
|
||||
setState({ ...state, allergens: updated })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Paper>
|
||||
<Paper>
|
||||
<h4>Dodaj zdjęcie.</h4>
|
||||
<ImageUpload
|
||||
img={state.imgUrl}
|
||||
onUpload={(link) => handleImageUploaded(link)}
|
||||
/>
|
||||
</Paper>
|
||||
</div>
|
||||
<div className="editRestaurant-bottom">
|
||||
<ButtonPrimary text="Anuluj" onClick={() => history.push("/")} />
|
||||
<ButtonSecondary text="Zapisz" onClick={() => handleAdd()} />
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { useParams, useHistory } from "react-router-dom";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import List from "@material-ui/core/List";
|
||||
@@ -20,6 +20,7 @@ import EditRestaurantLocation from "../EditRestaurant/EditRestaurantLocation";
|
||||
import EditRestaurantMenu from "../EditRestaurant/EditRestaurantMenu";
|
||||
import EditRestaurantPhoto from "../EditRestaurant/EditRestaurantPhoto";
|
||||
import EditRestaurantSubscription from "../EditRestaurant/EditRestaurantSubscription";
|
||||
import { fetchAllDishes } from "../../actions";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
main: {
|
||||
@@ -44,6 +45,7 @@ const useStyles = makeStyles((theme) => ({
|
||||
}));
|
||||
|
||||
export default function EditRestaurant(props) {
|
||||
const dispatch = useDispatch();
|
||||
const classes = useStyles();
|
||||
const [tab, setTab] = useState(0);
|
||||
const history = useHistory();
|
||||
@@ -67,6 +69,7 @@ export default function EditRestaurant(props) {
|
||||
badgeData.secondaryText = `Aktywna do: ${restaurant.subscriptionDue}`;
|
||||
}
|
||||
};
|
||||
dispatch(fetchAllDishes(restaurant._id));
|
||||
|
||||
const handleListItemClick = (event, index) => {
|
||||
setTab(index);
|
||||
|
||||
@@ -22,6 +22,7 @@ import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
|
||||
import InputLabel from "@material-ui/core/InputLabel";
|
||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||
import Checkboxes from "../Input/Checkboxes";
|
||||
import { backend } from "../../config";
|
||||
|
||||
// ICONS
|
||||
|
||||
@@ -192,7 +193,7 @@ export default function NewRestaurant() {
|
||||
};
|
||||
dispatch(showBackdrop());
|
||||
axios({
|
||||
url: "http://localhost:4000/dish",
|
||||
url: backend + "/dish",
|
||||
method: "POST",
|
||||
data: data,
|
||||
headers: {
|
||||
|
||||
@@ -24,6 +24,7 @@ import { useSelector, useDispatch } from "react-redux";
|
||||
import { notification, refreshUserData } from "../../actions";
|
||||
import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
|
||||
import InputWorkingHours from "../Input/InputWorkingHours";
|
||||
import { backend } from "../../config";
|
||||
// ICONS
|
||||
import FastfoodIcon from "@material-ui/icons/Fastfood";
|
||||
import LocationCityIcon from "@material-ui/icons/LocationCity";
|
||||
@@ -152,7 +153,7 @@ export default function NewRestaurant() {
|
||||
};
|
||||
dispatch(showBackdrop());
|
||||
axios({
|
||||
url: "http://localhost:4000/restaurant",
|
||||
url: backend + "/restaurant",
|
||||
method: "POST",
|
||||
data: data,
|
||||
headers: {
|
||||
|
||||
Reference in New Issue
Block a user