Merge branch 'main' of https://github.com/Charles40130/Projet-Dev-Web-Ing1
This commit is contained in:
Mathis
commit
76d5e02d4c
@ -9,8 +9,14 @@ const th = `${thTd} bg-gray-100`;
|
||||
function User() {
|
||||
const [users, setUsers] = useState([]);
|
||||
const [logs, setLogs] = useState([]);
|
||||
|
||||
const [name, setname] = useState("");
|
||||
const [surname, setSurname] = useState("");
|
||||
const [pseudo, setPseudo] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [gender, setGender] = useState("Homme");
|
||||
|
||||
const [pointsInput, setPointsInput] = useState({});
|
||||
|
||||
const handleAddUser = (e) => {
|
||||
@ -18,20 +24,32 @@ function User() {
|
||||
const newUser = {
|
||||
id: Date.now(),
|
||||
name,
|
||||
surname,
|
||||
pseudo,
|
||||
email,
|
||||
password,
|
||||
gender,
|
||||
accessLevel: "User",
|
||||
points: 0,
|
||||
};
|
||||
setUsers([...users, newUser]);
|
||||
logAction(name, "Utilisateur ajouté");
|
||||
|
||||
// Réinitialisation du formulaire
|
||||
setname("");
|
||||
setSurname("");
|
||||
setPseudo("");
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
setGender("Homme");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
axios.get(`${API_BASE_URL}/users`).then((response) => {
|
||||
setUsers(response.data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleDeleteUser = (userId) => {
|
||||
const user = users.find((u) => u.id === userId);
|
||||
|
||||
@ -50,10 +68,7 @@ function User() {
|
||||
window.location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(
|
||||
"Erreur lors de la suppression de l'utilisateur :",
|
||||
error
|
||||
);
|
||||
console.error("Erreur lors de la suppression de l'utilisateur :", error);
|
||||
});
|
||||
|
||||
logAction(user.name, "Utilisateur supprimé");
|
||||
@ -68,7 +83,7 @@ function User() {
|
||||
const handleChangeAccessLevel = (userId, newLevel) => {
|
||||
setUsers(
|
||||
users.map((user) => {
|
||||
if (user.id === userId && newLevel != user.role) {
|
||||
if (user.id === userId && newLevel !== user.role) {
|
||||
const oldLevel = user.role;
|
||||
user.role = newLevel;
|
||||
if (user.role === "user") {
|
||||
@ -91,10 +106,7 @@ function User() {
|
||||
alert("Il y a eu une erreur dans le changement de niveau !");
|
||||
console.error("Erreur lors du changement de niveau :", error);
|
||||
});
|
||||
logAction(
|
||||
user.name,
|
||||
`Niveau d'accés changé de ${oldLevel} à ${newLevel}`
|
||||
);
|
||||
logAction(user.name, `Niveau d'accès changé de ${oldLevel} à ${newLevel}`);
|
||||
}
|
||||
return user;
|
||||
})
|
||||
@ -113,14 +125,14 @@ function User() {
|
||||
points: user.points,
|
||||
})
|
||||
.then((response) => {
|
||||
alert("Les points ont bien été enregistré !");
|
||||
console.log("Ajout des points réussit :", response.data);
|
||||
alert("Les points ont bien été enregistrés !");
|
||||
console.log("Ajout des points réussi :", response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
alert("Il y a eu une erreur dans l'ajout des points!");
|
||||
alert("Il y a eu une erreur dans l'ajout des points !");
|
||||
console.error("Erreur lors de l'ajout des points :", error);
|
||||
});
|
||||
logAction(user.name, `Points ajustés par ${pointsToAdd}`);
|
||||
logAction(user.name, `Points ajustés à ${pointsToAdd}`);
|
||||
}
|
||||
return user;
|
||||
})
|
||||
@ -145,7 +157,7 @@ function User() {
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
<Sidebar />
|
||||
@ -155,31 +167,62 @@ function User() {
|
||||
Gestion des utilisateurs
|
||||
</h1>
|
||||
<p>Gérez les utilisateurs à partir de ce panneau.</p>
|
||||
|
||||
|
||||
<form
|
||||
className="gap-3 mb-5 grid grid-cols-[1fr_1fr_auto]"
|
||||
className="gap-3 mb-5 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"
|
||||
onSubmit={handleAddUser}
|
||||
>
|
||||
<input
|
||||
className="p-3 border rounded-md"
|
||||
type="text"
|
||||
id="name"
|
||||
placeholder="name"
|
||||
placeholder="Nom"
|
||||
value={name}
|
||||
onChange={(e) => setname(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
className="p-3 border rounded-md"
|
||||
type="text"
|
||||
placeholder="Prénom"
|
||||
value={surname}
|
||||
onChange={(e) => setSurname(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
className="p-3 border rounded-md"
|
||||
type="text"
|
||||
placeholder="Pseudo"
|
||||
value={pseudo}
|
||||
onChange={(e) => setPseudo(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
className="p-3 border rounded-md"
|
||||
type="email"
|
||||
id="email"
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
className="p-3 border rounded-md"
|
||||
type="password"
|
||||
placeholder="Mot de passe"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<select
|
||||
className="p-3 border rounded-md"
|
||||
value={gender}
|
||||
onChange={(e) => setGender(e.target.value)}
|
||||
>
|
||||
<option value="Homme">Homme</option>
|
||||
<option value="Femme">Femme</option>
|
||||
<option value="Autre">Autre</option>
|
||||
</select>
|
||||
<button
|
||||
className="p-3 bg-green-600 text-white border-none rounded-md "
|
||||
className="p-3 bg-green-600 text-white border-none rounded-md col-span-full md:col-span-1"
|
||||
type="submit"
|
||||
>
|
||||
Ajouter utilisateur
|
||||
@ -189,19 +232,25 @@ function User() {
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={`${th}`}>Nom</th>
|
||||
<th className={`${th}`}>Email</th>
|
||||
<th className={`${th}`}>Niveau d'accès</th>
|
||||
<th className={`${th}`}>Points</th>
|
||||
<th className={`${th}`}>Actions</th>
|
||||
<th className={th}>Nom</th>
|
||||
<th className={th}>Prénom</th>
|
||||
<th className={th}>Pseudo</th>
|
||||
<th className={th}>Email</th>
|
||||
<th className={th}>Genre</th>
|
||||
<th className={th}>Niveau d'accès</th>
|
||||
<th className={th}>Points</th>
|
||||
<th className={th}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr key={user.id}>
|
||||
<td className={`${thTd}`}>{user.name}</td>
|
||||
<td className={`${thTd}`}>{user.email}</td>
|
||||
<td className={`${thTd}`}>
|
||||
<td className={thTd}>{user.name}</td>
|
||||
<td className={thTd}>{user.surname}</td>
|
||||
<td className={thTd}>{user.pseudo}</td>
|
||||
<td className={thTd}>{user.email}</td>
|
||||
<td className={thTd}>{user.gender}</td>
|
||||
<td className={thTd}>
|
||||
<select
|
||||
value={user.role}
|
||||
onChange={(e) =>
|
||||
@ -214,7 +263,7 @@ function User() {
|
||||
<option value="complexe">Complexe</option>
|
||||
</select>
|
||||
</td>
|
||||
<td className={`${thTd}`}>
|
||||
<td className={thTd}>
|
||||
<input
|
||||
className="border ml-4 w-16"
|
||||
type="number"
|
||||
@ -234,7 +283,7 @@ function User() {
|
||||
Changer
|
||||
</button>
|
||||
</td>
|
||||
<td className={`${thTd}`}>
|
||||
<td className={thTd}>
|
||||
<button
|
||||
className="p-2 bg-red-600 text-white border-none rounded-md"
|
||||
onClick={() => handleDeleteUser(user.id)}
|
||||
@ -255,17 +304,17 @@ function User() {
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={`${th}`}>Nom</th>
|
||||
<th className={`${th}`}>Action</th>
|
||||
<th className={`${th}`}>Timestamp</th>
|
||||
<th className={th}>Nom</th>
|
||||
<th className={th}>Action</th>
|
||||
<th className={th}>Timestamp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{logs.map((log) => (
|
||||
<tr key={log.id}>
|
||||
<td className={`${thTd}`}>{log.name}</td>
|
||||
<td className={`${thTd}`}>{log.action}</td>
|
||||
<td className={`${thTd}`}>{log.timestamp}</td>
|
||||
<td className={thTd}>{log.name}</td>
|
||||
<td className={thTd}>{log.action}</td>
|
||||
<td className={thTd}>{log.timestamp}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user