web client v0.4 (edit restaurant info)
This commit is contained in:
240
src/components/EditRestaurant/EditRestaurantInfo.js
Normal file
240
src/components/EditRestaurant/EditRestaurantInfo.js
Normal file
@@ -0,0 +1,240 @@
|
||||
import React, { useState } from "react";
|
||||
import ButtonPrimary from "../Input/ButtonPrimary";
|
||||
import ButtonSecondary from "../Input/ButtonSecondary";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import InputWorkingHours from "../Input/InputWorkingHours";
|
||||
import Autocomplete from "@material-ui/lab/Autocomplete";
|
||||
import InputAdornment from "@material-ui/core/InputAdornment";
|
||||
import PhoneIcon from "@material-ui/icons/Phone";
|
||||
import FacebookIcon from "@material-ui/icons/Facebook";
|
||||
import InstagramIcon from "@material-ui/icons/Instagram";
|
||||
import LanguageIcon from "@material-ui/icons/Language";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
import { decodeTags } from "../../Services";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
textInput: {
|
||||
margin: theme.spacing(2),
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
"& .MuiInputLabel-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
},
|
||||
textInputFullWidth: {
|
||||
marginTop: theme.spacing(2),
|
||||
marginBottom: theme.spacing(2),
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
"& .MuiInputLabel-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
"$ .MuiFormHelperText-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const calculateCharLeft = (from) => {
|
||||
return 400 - from.length;
|
||||
};
|
||||
|
||||
export default function EditRestaurantInfo(props) {
|
||||
const initialState = {
|
||||
name: props.restaurant.name,
|
||||
city: props.restaurant.city,
|
||||
adress: props.restaurant.adress,
|
||||
description: props.restaurant.description,
|
||||
phone: props.restaurant.phone,
|
||||
hidden: props.restaurant.hidden,
|
||||
links: props.restaurant.links,
|
||||
tags: decodeTags(props.restaurant.tags),
|
||||
workingHours: props.restaurant.workingHours,
|
||||
charleft: calculateCharLeft(props.restaurant.description),
|
||||
};
|
||||
const [state, setState] = useState(initialState);
|
||||
const styles = useStyles();
|
||||
const handleDescriptionChange = (event) => {
|
||||
let stringLength = event.target.value.length;
|
||||
let charleft = 400 - stringLength;
|
||||
setState({ ...state, description: event.target.value, charLeft: charleft });
|
||||
};
|
||||
const availableTags = [
|
||||
"Płatność kartą",
|
||||
"Lubimy zwierzaki",
|
||||
"Bezglutenowe",
|
||||
"Wegańskie",
|
||||
"Wegetariańskie",
|
||||
"Podajemy alkohol",
|
||||
"Dowozimy",
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="editRestaurant-tab">
|
||||
<div className="editRestaurant-doubleColumn">
|
||||
<div className="editRestaurant-sectiontitle">
|
||||
<h4>Podstawowe dane</h4>
|
||||
<Divider />
|
||||
</div>
|
||||
<div className="editRestaurant-fullWidth">
|
||||
<TextField
|
||||
className={styles.textInputFullWidth}
|
||||
fullWidth
|
||||
value={state.name}
|
||||
onChange={(event) =>
|
||||
setState({ ...state, name: event.target.value })
|
||||
}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
label="Nazwa lokalu"
|
||||
variant="outlined"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
value={state.city}
|
||||
onChange={(event) => setState({ ...state, city: event.target.value })}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
label="Miasto"
|
||||
variant="outlined"
|
||||
/>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
value={state.adress}
|
||||
onChange={(event) =>
|
||||
setState({ ...state, adress: event.target.value })
|
||||
}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
label="Adres"
|
||||
variant="outlined"
|
||||
/>
|
||||
<div className="editRestaurant-fullWidth">
|
||||
<TextField
|
||||
className={styles.textInputFullWidth}
|
||||
fullWidth
|
||||
label="Opis"
|
||||
value={state.description}
|
||||
onChange={handleDescriptionChange}
|
||||
multiline
|
||||
rows={3}
|
||||
rowsMax={8}
|
||||
variant="outlined"
|
||||
helperText={`Pozostałe znaki: ${state.charleft}`}
|
||||
InputLabelProps={{ shrink: true }}
|
||||
FormHelperTextProps={{
|
||||
style: { color: "#bbbbbb" },
|
||||
}}
|
||||
/>
|
||||
<Autocomplete
|
||||
multiple
|
||||
options={availableTags}
|
||||
value={state.tags}
|
||||
onChange={(event, values) => setState({ ...state, tags: values })}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
className={styles.textInputFullWidth}
|
||||
variant="outlined"
|
||||
label="Tagi"
|
||||
placeholder="Wybierz tagi"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="editRestaurant-sectiontitle">
|
||||
<h4>Godziny otwarcia</h4>
|
||||
<Divider />
|
||||
</div>
|
||||
<InputWorkingHours
|
||||
setHours={(hours) => setState({ ...state, workingHours: hours })}
|
||||
hours={state.workingHours}
|
||||
/>
|
||||
<div className="editRestaurant-sectiontitle">
|
||||
<h4>Dane kontaktowe</h4>
|
||||
<Divider />
|
||||
</div>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
label="Telefon"
|
||||
type="tel"
|
||||
variant="outlined"
|
||||
value={state.phone}
|
||||
onChange={(event) =>
|
||||
setState({ ...state, phone: event.target.value })
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<PhoneIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
label="Facebook"
|
||||
variant="outlined"
|
||||
value={state.links.facebook}
|
||||
onChange={(event) =>
|
||||
setState({
|
||||
...state,
|
||||
links: { ...state.links, facebook: event.target.value },
|
||||
})
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<FacebookIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
label="Instagram"
|
||||
variant="outlined"
|
||||
value={state.links.instagram}
|
||||
onChange={(event) =>
|
||||
setState({
|
||||
...state,
|
||||
links: { ...state.links, instagram: event.target.value },
|
||||
})
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<InstagramIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
label="www"
|
||||
variant="outlined"
|
||||
value={state.links.www}
|
||||
onChange={(event) =>
|
||||
setState({
|
||||
...state,
|
||||
links: { ...state.links, www: event.target.value },
|
||||
})
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<LanguageIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="editRestaurant-bottom">
|
||||
<ButtonPrimary text="Anuluj" />
|
||||
<ButtonSecondary text="Zapisz" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user