152 lines
No EOL
5.3 KiB
TypeScript
152 lines
No EOL
5.3 KiB
TypeScript
import { IoCloseOutline } from "react-icons/io5";
|
|
import { useState } from "react";
|
|
import styles from "./EditPopUp.module.css";
|
|
import { User, useOrgUsers } from "../../../hooks/useUsers";
|
|
|
|
type EditPopUpProps = {
|
|
closePopup: () => void;
|
|
refetchUsers: () => Promise<void>;
|
|
user: User;
|
|
};
|
|
|
|
const EditPopUp = ({ closePopup, refetchUsers, user }: EditPopUpProps) => {
|
|
const { updateUser } = useOrgUsers();
|
|
const [formData, setFormData] = useState({
|
|
fullName: user.fullName || "",
|
|
email: user.email || "",
|
|
privilege: user.privilege || "",
|
|
username: user.username || ""
|
|
});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: value
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
setError(null);
|
|
|
|
try {
|
|
await updateUser(user.id, {
|
|
fullName: formData.fullName,
|
|
email: formData.email,
|
|
privilege: formData.privilege,
|
|
username: formData.username
|
|
});
|
|
|
|
// Refresh the users list and close the popup
|
|
await refetchUsers();
|
|
closePopup();
|
|
} catch (error: any) {
|
|
setError(error.message || "Failed to update user");
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={popupStyles.overlay}>
|
|
<div style={popupStyles.popup}>
|
|
<div className={styles.popupHeader}>
|
|
<p>Edit User</p>
|
|
<button
|
|
className={styles.closeButton}
|
|
onClick={closePopup}><IoCloseOutline className={styles.closeIcon}/>
|
|
</button>
|
|
</div>
|
|
<div className={styles.horizontalLineLight}></div>
|
|
{error && <div className={styles.errorMessage}>{error}</div>}
|
|
<form onSubmit={handleSubmit} className={styles.form}>
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="fullName">Name:</label>
|
|
<input
|
|
type="text"
|
|
id="fullName"
|
|
name="fullName"
|
|
value={formData.fullName}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="email">Email:</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="username">Username:</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
value={formData.username}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className={styles.formGroup}>
|
|
<label htmlFor="privilege">Privilege:</label>
|
|
<select
|
|
id="privilege"
|
|
name="privilege"
|
|
value={formData.privilege}
|
|
onChange={handleChange}
|
|
required
|
|
>
|
|
<option value="admin">admin</option>
|
|
<option value="user">user</option>
|
|
<option value="sysadmin">sysadmin</option>
|
|
</select>
|
|
</div>
|
|
<div className={styles.horizontalLineLight}></div>
|
|
<div className={styles.submitButtonDiv}>
|
|
<button
|
|
type="submit"
|
|
className={styles.submitButton}
|
|
disabled={isSubmitting}>
|
|
{isSubmitting ? "Updating..." : "Update"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const popupStyles: { overlay: React.CSSProperties; popup: React.CSSProperties } = {
|
|
overlay: {
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: "rgba(0,0,0,0.5)",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
|
|
},
|
|
popup: {
|
|
backgroundColor: "#fff",
|
|
borderRadius: "8px",
|
|
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
|
position: "relative",
|
|
width: "400px",
|
|
maxWidth: "90%"
|
|
}
|
|
};
|
|
|
|
export default EditPopUp;
|