280 lines
10 KiB
TypeScript
280 lines
10 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import {
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
TextField,
|
|
Button,
|
|
MenuItem,
|
|
InputAdornment,
|
|
IconButton,
|
|
} from "@mui/material";
|
|
import { Person, Email, LocationOn, Phone, AssignmentInd, Visibility, VisibilityOff } from "@mui/icons-material"; // Icons
|
|
|
|
|
|
interface Role {
|
|
id: number;
|
|
name: string;
|
|
}
|
|
|
|
interface AddUserDialogProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onUserAdded: () => void;
|
|
}
|
|
|
|
const AddUserDialog: React.FC<AddUserDialogProps> = ({ open, onClose, onUserAdded }) => {
|
|
const [name, setName] = useState("");
|
|
const [password, setPassword] = useState("newuser");
|
|
const [showPassword, setShowPassword] = useState(false); // Toggle password visibility
|
|
const [address, setAddress] = useState("");
|
|
const [email, setEmail] = useState("");
|
|
const [phone_number, setPhoneNumber] = useState("");
|
|
const [is_under, setIsUnder] = useState<number | "">("");
|
|
const [roles, setRoles] = useState<Role[]>([]);
|
|
// const [status, setStatus] = useState(1); // 1 = Active, 0 = Inactive
|
|
|
|
useEffect(() => {
|
|
|
|
fetch(`${process.env.REACT_APP_API_BASE_URL}/role`)
|
|
.then((res) => res.json())
|
|
.then((data) => setRoles(data))
|
|
.catch((error) => console.error("Error fetching roles:", error));
|
|
}, []);
|
|
|
|
const handleSubmit = () => {
|
|
const newUser = {
|
|
name,
|
|
password,
|
|
address,
|
|
email,
|
|
phone_number,
|
|
role: 1, // Always "TBT"
|
|
is_under,
|
|
// status: status === 1, // Convert 1 -> true, 0 -> false
|
|
};
|
|
const token: string | null = localStorage.getItem('token');
|
|
|
|
if (!token) {
|
|
return;
|
|
}
|
|
fetch(`${process.env.REACT_APP_API_BASE_URL}/user`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",'x-api-key': token
|
|
},
|
|
body: JSON.stringify(newUser),
|
|
})
|
|
.then((response) => response.json())
|
|
.then(() => {
|
|
onUserAdded();
|
|
onClose();
|
|
})
|
|
.catch((error) => console.error("Error adding user:", error));
|
|
};
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={onClose}
|
|
PaperProps={{
|
|
sx: {
|
|
backgroundColor: "#121212",
|
|
border: "2px solid green",
|
|
borderRadius: "12px",
|
|
padding: "16px",
|
|
width: "400px",
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle sx={{ color: "green", textAlign: "center" }}>Add New User</DialogTitle>
|
|
<DialogContent>
|
|
{/* Name */}
|
|
<TextField
|
|
autoFocus
|
|
margin="dense"
|
|
label="Name"
|
|
type="text"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<Person sx={{ color: "white" }} />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
sx={{
|
|
input: { color: "white" },
|
|
label: { color: "white" },
|
|
"& .MuiOutlinedInput-root": {
|
|
"& fieldset": { borderColor: "white" },
|
|
"&:hover fieldset": { borderColor: "limegreen" },
|
|
"&.Mui-focused fieldset": { borderColor: "limegreen" },
|
|
},
|
|
}}
|
|
/>
|
|
{/* Email */}
|
|
<TextField
|
|
margin="dense"
|
|
label="Email"
|
|
type="email"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<Email sx={{ color: "white" }} />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
sx={{
|
|
input: { color: "white" },
|
|
label: { color: "white" },
|
|
"& .MuiOutlinedInput-root": {
|
|
"& fieldset": { borderColor: "white" },
|
|
"&:hover fieldset": { borderColor: "limegreen" },
|
|
"&.Mui-focused fieldset": { borderColor: "limegreen" },
|
|
},
|
|
}}
|
|
/>
|
|
{/* Password */}
|
|
<TextField
|
|
margin="dense"
|
|
label="Password"
|
|
type={showPassword ? "text" : "password"}
|
|
fullWidth
|
|
variant="outlined"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton onClick={() => setShowPassword(!showPassword)}>
|
|
{showPassword ? <VisibilityOff sx={{ color: "white" }} /> : <Visibility sx={{ color: "white" }} />}
|
|
</IconButton>
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
sx={{
|
|
input: { color: "white" },
|
|
label: { color: "white" },
|
|
"& .MuiOutlinedInput-root": {
|
|
"& fieldset": { borderColor: "white" },
|
|
"&:hover fieldset": { borderColor: "limegreen" },
|
|
"&.Mui-focused fieldset": { borderColor: "limegreen" },
|
|
},
|
|
}}
|
|
/>
|
|
{/* Address */}
|
|
<TextField
|
|
margin="dense"
|
|
label="Address"
|
|
type="text"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={address}
|
|
onChange={(e) => setAddress(e.target.value)}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<LocationOn sx={{ color: "white" }} />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
sx={{
|
|
input: { color: "white" },
|
|
label: { color: "white" },
|
|
"& .MuiOutlinedInput-root": {
|
|
"& fieldset": { borderColor: "white" },
|
|
"&:hover fieldset": { borderColor: "limegreen" },
|
|
"&.Mui-focused fieldset": { borderColor: "limegreen" },
|
|
},
|
|
}}
|
|
/>
|
|
{/* Phone Number */}
|
|
<TextField
|
|
margin="dense"
|
|
label="Phone Number"
|
|
type="tel"
|
|
fullWidth
|
|
variant="outlined"
|
|
value={phone_number}
|
|
onChange={(e) => setPhoneNumber(e.target.value)}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<Phone sx={{ color: "white" }} />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
sx={{
|
|
input: { color: "white" },
|
|
label: { color: "white" },
|
|
"& .MuiOutlinedInput-root": {
|
|
"& fieldset": { borderColor: "white" },
|
|
"&:hover fieldset": { borderColor: "limegreen" },
|
|
"&.Mui-focused fieldset": { borderColor: "limegreen" },
|
|
},
|
|
}}
|
|
/>
|
|
{/* Is Under (Dropdown) */}
|
|
<TextField
|
|
select
|
|
fullWidth
|
|
variant="outlined"
|
|
label="Is Under"
|
|
value={is_under}
|
|
onChange={(e) => setIsUnder(Number(e.target.value))}
|
|
sx={{
|
|
input: { color: "white" },
|
|
label: { color: "white" },
|
|
"& .MuiOutlinedInput-root": {
|
|
"& fieldset": { borderColor: "white" },
|
|
"&:hover fieldset": { borderColor: "limegreen" },
|
|
"&.Mui-focused fieldset": { borderColor: "limegreen" },
|
|
},
|
|
}}
|
|
>
|
|
{roles.map((role) => (
|
|
<MenuItem key={role.id} value={role.id}>
|
|
{role.name}
|
|
</MenuItem>
|
|
))}
|
|
</TextField>
|
|
|
|
{/* <Typography sx={{ color: "white", marginTop: 2 }}>Status</Typography>
|
|
|
|
<FormControlLabel
|
|
control={
|
|
<Switch
|
|
checked={status === 1}
|
|
onChange={(e) => setStatus(e.target.checked ? 1 : 0)}
|
|
color="success"
|
|
/>
|
|
}
|
|
label={status === 1 ? "Active" : "Inactive"}
|
|
sx={{ color: "white", marginTop: 2 }}
|
|
/> */}
|
|
|
|
|
|
</DialogContent>
|
|
<DialogActions sx={{ justifyContent: "center" }}>
|
|
<Button onClick={onClose} sx={{ color: "white", border: "1px solid green" }}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={handleSubmit} sx={{ backgroundColor: "green", color: "black" }}>
|
|
Add User
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default AddUserDialog;
|