| 1 | import {Button, Grid, TextField} from "@mui/material";
|
|---|
| 2 | import {useNavigate} from "react-router-dom";
|
|---|
| 3 | import {useState} from "react";
|
|---|
| 4 | import {UpdateUser, UserRole} from "../../services/user-service";
|
|---|
| 5 |
|
|---|
| 6 | const UserForm = ({editUser, ...props}) => {
|
|---|
| 7 | const navigate = useNavigate();
|
|---|
| 8 | const [user, setUser] = useState({
|
|---|
| 9 | username: editUser?.username ?? "",
|
|---|
| 10 | password: editUser?.password ?? "",
|
|---|
| 11 | email: editUser?.email ?? "",
|
|---|
| 12 | address: editUser?.address ?? "",
|
|---|
| 13 | phoneNumber: editUser?.phoneNumber ?? "",
|
|---|
| 14 | role: props.editUser?.role ?? ""
|
|---|
| 15 | });
|
|---|
| 16 |
|
|---|
| 17 | const handleChange = name => event => {
|
|---|
| 18 | setUser({...user, [name]: event.target.value});
|
|---|
| 19 | };
|
|---|
| 20 |
|
|---|
| 21 | const handleSubmit = async event => {
|
|---|
| 22 | event.preventDefault();
|
|---|
| 23 |
|
|---|
| 24 | await UpdateUser(editUser.id, user)
|
|---|
| 25 | // navigate(0);
|
|---|
| 26 | props.onClose();
|
|---|
| 27 | }
|
|---|
| 28 |
|
|---|
| 29 | return (<form onSubmit={handleSubmit} className={"m-3"}>
|
|---|
| 30 | <Grid container spacing={2}>
|
|---|
| 31 | {editUser.role === UserRole.User &&
|
|---|
| 32 | <>
|
|---|
| 33 | <Grid item xs={12} sm={6}>
|
|---|
| 34 | <TextField
|
|---|
| 35 | onChange={handleChange("address")}
|
|---|
| 36 | name="address"
|
|---|
| 37 | variant="outlined"
|
|---|
| 38 | fullWidth
|
|---|
| 39 | value={user.address}
|
|---|
| 40 | id="address"
|
|---|
| 41 | label="Address"
|
|---|
| 42 | inputProps={{
|
|---|
| 43 | minLength: 2,
|
|---|
| 44 | }}
|
|---|
| 45 | />
|
|---|
| 46 | </Grid>
|
|---|
| 47 | <Grid item xs={12} sm={6}>
|
|---|
| 48 | <TextField
|
|---|
| 49 | onChange={handleChange("phoneNumber")}
|
|---|
| 50 | variant="outlined"
|
|---|
| 51 | value={user.phoneNumber}
|
|---|
| 52 | fullWidth
|
|---|
| 53 | id="phone"
|
|---|
| 54 | label="Phone"
|
|---|
| 55 | name="phone"
|
|---|
| 56 | inputProps={{
|
|---|
| 57 | minLength: 2,
|
|---|
| 58 | }}
|
|---|
| 59 | />
|
|---|
| 60 | </Grid>
|
|---|
| 61 | </>}
|
|---|
| 62 | <Grid item xs={12}>
|
|---|
| 63 | <TextField
|
|---|
| 64 | onChange={handleChange("email")}
|
|---|
| 65 | variant="outlined"
|
|---|
| 66 | required
|
|---|
| 67 | fullWidth
|
|---|
| 68 | value={user.email}
|
|---|
| 69 | id="email"
|
|---|
| 70 | label="Email Address"
|
|---|
| 71 | name="email"
|
|---|
| 72 | />
|
|---|
| 73 | </Grid>
|
|---|
| 74 | </Grid>
|
|---|
| 75 | <Button
|
|---|
| 76 | type="submit"
|
|---|
| 77 | fullWidth
|
|---|
| 78 | variant="contained"
|
|---|
| 79 | className={"mt-3"}
|
|---|
| 80 | >
|
|---|
| 81 | Update
|
|---|
| 82 | </Button>
|
|---|
| 83 | </form>)
|
|---|
| 84 | }
|
|---|
| 85 |
|
|---|
| 86 | export default UserForm; |
|---|