| 1 | import {Button, Grid, MenuItem, Select, TextField} from "@mui/material";
|
|---|
| 2 | import {useLoaderData, useLocation, useNavigate} from "react-router-dom";
|
|---|
| 3 | import {useState} from "react";
|
|---|
| 4 | import {useAuthContext} from "../../configurations/AuthContext";
|
|---|
| 5 | import {CreateRestorant, UpdateRestorant} from "../../services/restoran-service";
|
|---|
| 6 | import {UserRole} from "../../services/user-service";
|
|---|
| 7 |
|
|---|
| 8 | const RestorantForm = ({restorant, onClose}) => {
|
|---|
| 9 | const navigate = useNavigate();
|
|---|
| 10 | const location = useLocation();
|
|---|
| 11 | const {inactiveMenagers} = useLoaderData();
|
|---|
| 12 | const [error, setError] = useState(false);
|
|---|
| 13 |
|
|---|
| 14 | const {loggedUserRole} = useAuthContext();
|
|---|
| 15 | const [formData, setFormData] = useState({
|
|---|
| 16 | ime: restorant?.ime ?? "",
|
|---|
| 17 | lokacija: restorant?.lokacija ?? "",
|
|---|
| 18 | rabotnoVreme: restorant?.rabotnoVreme ?? "",
|
|---|
| 19 | managerId: restorant?.manager.id ??
|
|---|
| 20 | loggedUserRole?.role === UserRole.Menager
|
|---|
| 21 | ? loggedUserRole.roleId
|
|---|
| 22 | : 0
|
|---|
| 23 | });
|
|---|
| 24 |
|
|---|
| 25 | const handleChange = name => event => {
|
|---|
| 26 | setFormData({...formData, [name]: event.target.value});
|
|---|
| 27 |
|
|---|
| 28 | if (name === "managerId" && event.target.value === 0) {
|
|---|
| 29 | setError(true);
|
|---|
| 30 | return;
|
|---|
| 31 | }
|
|---|
| 32 |
|
|---|
| 33 | setError(false)
|
|---|
| 34 | };
|
|---|
| 35 |
|
|---|
| 36 | const handleSubmit = async event => {
|
|---|
| 37 | event.preventDefault();
|
|---|
| 38 |
|
|---|
| 39 | if (formData.managerId === 0) {
|
|---|
| 40 | setError(true);
|
|---|
| 41 |
|
|---|
| 42 | return;
|
|---|
| 43 | }
|
|---|
| 44 |
|
|---|
| 45 | if (restorant) {
|
|---|
| 46 | await UpdateRestorant(restorant.id, formData)
|
|---|
| 47 | navigate(location.pathname);
|
|---|
| 48 | onClose();
|
|---|
| 49 |
|
|---|
| 50 | return;
|
|---|
| 51 | }
|
|---|
| 52 |
|
|---|
| 53 | let restorantId = await CreateRestorant(formData);
|
|---|
| 54 |
|
|---|
| 55 | if (restorantId) {
|
|---|
| 56 | navigate(`/restorants/${restorantId}`);
|
|---|
| 57 | }
|
|---|
| 58 | }
|
|---|
| 59 |
|
|---|
| 60 | return (<form onSubmit={handleSubmit}>
|
|---|
| 61 | <Grid container spacing={2}>
|
|---|
| 62 | <Grid item xs={12}>
|
|---|
| 63 | <TextField
|
|---|
| 64 | onChange={handleChange("ime")}
|
|---|
| 65 | name="ime"
|
|---|
| 66 | variant="outlined"
|
|---|
| 67 | required
|
|---|
| 68 | fullWidth
|
|---|
| 69 | label="Ime"
|
|---|
| 70 | value={formData.ime}
|
|---|
| 71 | inputProps={{
|
|---|
| 72 | minLength: 2,
|
|---|
| 73 | }}
|
|---|
| 74 | />
|
|---|
| 75 | </Grid>
|
|---|
| 76 | <Grid item xs={12}>
|
|---|
| 77 | <TextField
|
|---|
| 78 | onChange={handleChange("lokacija")}
|
|---|
| 79 | variant="outlined"
|
|---|
| 80 | required
|
|---|
| 81 | fullWidth
|
|---|
| 82 | label="Lokacija"
|
|---|
| 83 | name="lokacija"
|
|---|
| 84 | value={formData.lokacija}
|
|---|
| 85 | inputProps={{
|
|---|
| 86 | minLength: 2,
|
|---|
| 87 | }}
|
|---|
| 88 | />
|
|---|
| 89 | </Grid>
|
|---|
| 90 | <Grid item xs={12}>
|
|---|
| 91 | <TextField
|
|---|
| 92 | onChange={handleChange("rabotnoVreme")}
|
|---|
| 93 | variant="outlined"
|
|---|
| 94 | required
|
|---|
| 95 | fullWidth
|
|---|
| 96 | label="Rabotno vreme vo format OD - DO"
|
|---|
| 97 | value={formData.rabotnoVreme}
|
|---|
| 98 | name="rabotnoVreme"
|
|---|
| 99 | inputProps={{
|
|---|
| 100 | minLength: 2,
|
|---|
| 101 | }}
|
|---|
| 102 | />
|
|---|
| 103 | </Grid>
|
|---|
| 104 | {!restorant && <Grid item xs={12}>
|
|---|
| 105 | <Select
|
|---|
| 106 | value={formData.managerId}
|
|---|
| 107 | onChange={handleChange("managerId")}
|
|---|
| 108 | displayEmpty
|
|---|
| 109 | fullWidth
|
|---|
| 110 | labelId="demo-simple-select-error-label"
|
|---|
| 111 | id="demo-simple-select-error"
|
|---|
| 112 | error={error && formData.managerId === 0}
|
|---|
| 113 | >
|
|---|
| 114 | <MenuItem value={0}>
|
|---|
| 115 | <em>None</em>
|
|---|
| 116 | </MenuItem>
|
|---|
| 117 | {inactiveMenagers && inactiveMenagers.length > 0 &&
|
|---|
| 118 | inactiveMenagers.map(manager =>
|
|---|
| 119 | <MenuItem key={manager.id}
|
|---|
| 120 | value={manager.id}>{manager.korisnik.username}</MenuItem>)
|
|---|
| 121 | }
|
|---|
| 122 | </Select>
|
|---|
| 123 | </Grid>}
|
|---|
| 124 | <Grid item>
|
|---|
| 125 | <Button
|
|---|
| 126 | type="submit"
|
|---|
| 127 | fullWidth
|
|---|
| 128 | variant="contained"
|
|---|
| 129 | >
|
|---|
| 130 | {restorant ? "Edit" : "Create"}
|
|---|
| 131 | </Button>
|
|---|
| 132 | </Grid>
|
|---|
| 133 | </Grid>
|
|---|
| 134 | </form>)
|
|---|
| 135 | }
|
|---|
| 136 |
|
|---|
| 137 | export default RestorantForm; |
|---|