392 lines
12 KiB
TypeScript
392 lines
12 KiB
TypeScript
import { useEffect, useState } from "preact/hooks";
|
|
|
|
type User = { id: string; nom: string; prenom: string; idRole: number | null };
|
|
type Role = { id: number; nom: string };
|
|
type Enseignement = { idProf: string; idModule: string; idPromo: string };
|
|
type Module = { id: string; nom: string };
|
|
type Promo = { id: string; annee: string };
|
|
|
|
type Props = { userId: string };
|
|
|
|
export default function EditUser({ userId }: Props) {
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [roles, setRoles] = useState<Role[]>([]);
|
|
const [enseignements, setEnseignements] = useState<Enseignement[]>([]);
|
|
const [modules, setModules] = useState<Module[]>([]);
|
|
const [promos, setPromos] = useState<Promo[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [saveMsg, setSaveMsg] = useState<string | null>(null);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const [nom, setNom] = useState("");
|
|
const [prenom, setPrenom] = useState("");
|
|
const [idRole, setIdRole] = useState("");
|
|
|
|
// Add enseignement form
|
|
const [addModule, setAddModule] = useState("");
|
|
const [addPromo, setAddPromo] = useState("");
|
|
const [adding, setAdding] = useState(false);
|
|
const [addError, setAddError] = useState<string | null>(null);
|
|
|
|
async function load() {
|
|
try {
|
|
const [uRes, rRes, eRes, mRes, pRes] = await Promise.all([
|
|
fetch(`/admin/api/users/${encodeURIComponent(userId)}`),
|
|
fetch("/admin/api/roles"),
|
|
fetch("/admin/api/enseignements"),
|
|
fetch("/admin/api/modules"),
|
|
fetch("/students/api/promotions"),
|
|
]);
|
|
if (!uRes.ok) throw new Error("Utilisateur introuvable");
|
|
const u: User = await uRes.json();
|
|
setUser(u);
|
|
setNom(u.nom);
|
|
setPrenom(u.prenom);
|
|
setIdRole(u.idRole !== null ? String(u.idRole) : "");
|
|
if (rRes.ok) setRoles(await rRes.json());
|
|
if (eRes.ok) {
|
|
const allEns: Enseignement[] = await eRes.json();
|
|
setEnseignements(allEns.filter((e) => e.idProf === userId));
|
|
}
|
|
if (mRes.ok) setModules(await mRes.json());
|
|
if (pRes.ok) setPromos(await pRes.json());
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : "Erreur");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
load();
|
|
}, [userId]);
|
|
|
|
async function saveInfos() {
|
|
if (!user) return;
|
|
setSaving(true);
|
|
setSaveMsg(null);
|
|
try {
|
|
const res = await fetch(
|
|
`/admin/api/users/${encodeURIComponent(userId)}`,
|
|
{
|
|
method: "PUT",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({
|
|
nom: nom.trim(),
|
|
prenom: prenom.trim(),
|
|
idRole: idRole ? Number(idRole) : null,
|
|
}),
|
|
},
|
|
);
|
|
if (!res.ok) throw new Error("Modification échouée");
|
|
const updated: User = await res.json();
|
|
setUser(updated);
|
|
setSaveMsg("Informations enregistrées.");
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : "Erreur");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function deleteUser() {
|
|
if (!confirm(`Supprimer définitivement l'utilisateur ${userId} ?`)) return;
|
|
try {
|
|
const res = await fetch(
|
|
`/admin/api/users/${encodeURIComponent(userId)}`,
|
|
{ method: "DELETE" },
|
|
);
|
|
if (!res.ok) throw new Error("Suppression échouée");
|
|
globalThis.location.href = "/admin/users";
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : "Erreur");
|
|
}
|
|
}
|
|
|
|
async function addEnseignement() {
|
|
if (!addModule || !addPromo) {
|
|
setAddError("ECUE et Promo sont requis");
|
|
return;
|
|
}
|
|
setAdding(true);
|
|
setAddError(null);
|
|
try {
|
|
const res = await fetch("/admin/api/enseignements", {
|
|
method: "POST",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({
|
|
idProf: userId,
|
|
idModule: addModule,
|
|
idPromo: addPromo,
|
|
}),
|
|
});
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => ({}));
|
|
throw new Error(body.error ?? "Création échouée");
|
|
}
|
|
setAddModule("");
|
|
setAddPromo("");
|
|
await load();
|
|
} catch (e) {
|
|
setAddError(e instanceof Error ? e.message : "Erreur");
|
|
} finally {
|
|
setAdding(false);
|
|
}
|
|
}
|
|
|
|
async function removeEnseignement(idModule: string, idPromo: string) {
|
|
if (!confirm("Retirer cet enseignement ?")) return;
|
|
try {
|
|
const res = await fetch(
|
|
`/admin/api/enseignements/${encodeURIComponent(userId)}/${
|
|
encodeURIComponent(idModule)
|
|
}/${encodeURIComponent(idPromo)}`,
|
|
{ method: "DELETE" },
|
|
);
|
|
if (!res.ok) throw new Error("Suppression échouée");
|
|
await load();
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : "Erreur");
|
|
}
|
|
}
|
|
|
|
const moduleMap = Object.fromEntries(modules.map((m) => [m.id, m]));
|
|
const roleMap = Object.fromEntries(roles.map((r) => [r.id, r.nom]));
|
|
|
|
if (loading) {
|
|
return (
|
|
<div class="page-content">
|
|
<p class="state-loading">Chargement...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error && !user) {
|
|
return (
|
|
<div class="page-content">
|
|
<p class="state-error">{error}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) return null;
|
|
|
|
return (
|
|
<div class="page-content">
|
|
<a
|
|
class="back-link"
|
|
href="/admin/users"
|
|
f-partial="/admin/partials/users"
|
|
>
|
|
← Retour a la liste
|
|
</a>
|
|
|
|
<h2
|
|
class="page-title"
|
|
style="border-bottom: none; margin-bottom: 0.5rem"
|
|
>
|
|
Edition -- {user.prenom} {user.nom}
|
|
</h2>
|
|
|
|
<div class="info-bar">
|
|
<span class="numEtud-chip">{user.id}</span>
|
|
<span>
|
|
{user.idRole
|
|
? (roleMap[user.idRole] ?? `Role #${user.idRole}`)
|
|
: "Aucun role"}
|
|
</span>
|
|
</div>
|
|
|
|
{error && <p class="state-error">{error}</p>}
|
|
{saveMsg && (
|
|
<p style="font-size: 0.82rem; color: light-dark(var(--light-accent-color), var(--dark-accent-color)); margin-bottom: 0.5rem">
|
|
{saveMsg}
|
|
</p>
|
|
)}
|
|
|
|
{/* Section 1: Informations generales */}
|
|
<div class="edit-section">
|
|
<p class="edit-section-title">Informations generales</p>
|
|
|
|
<div class="form-grid">
|
|
<div class="form-field">
|
|
<label>Nom</label>
|
|
<input
|
|
class="form-input"
|
|
value={nom}
|
|
onInput={(e) => setNom((e.target as HTMLInputElement).value)}
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Prenom</label>
|
|
<input
|
|
class="form-input"
|
|
value={prenom}
|
|
onInput={(e) => setPrenom((e.target as HTMLInputElement).value)}
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Login</label>
|
|
<input
|
|
class="form-input"
|
|
value={user.id}
|
|
disabled
|
|
style="opacity: 0.6"
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Role</label>
|
|
<select
|
|
class="filter-select"
|
|
value={idRole}
|
|
onChange={(e) => setIdRole((e.target as HTMLSelectElement).value)}
|
|
style="min-width: 0"
|
|
>
|
|
<option value="">Aucun role</option>
|
|
{roles.map((r) => <option key={r.id} value={r.id}>{r.nom}
|
|
</option>)}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.5rem; justify-content: space-between; flex-wrap: wrap">
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
onClick={saveInfos}
|
|
disabled={saving}
|
|
>
|
|
{saving ? "..." : "Enregistrer"}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-danger"
|
|
onClick={deleteUser}
|
|
>
|
|
Supprimer l'utilisateur
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section 2: Enseignements */}
|
|
<div class="edit-section">
|
|
<p class="edit-section-title">Enseignements</p>
|
|
<p
|
|
class="col-dim"
|
|
style="font-size: 0.75rem; margin: 0 0 0.75rem"
|
|
>
|
|
ECUEs enseignes par cet utilisateur
|
|
</p>
|
|
|
|
{enseignements.length > 0
|
|
? (
|
|
<div class="data-table-wrap" style="margin-bottom: 1rem">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ECUE</th>
|
|
<th>Promo</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{enseignements.map((e) => {
|
|
const mod = moduleMap[e.idModule];
|
|
return (
|
|
<tr key={`${e.idModule}-${e.idPromo}`}>
|
|
<td class="col-promo">
|
|
{mod ? `${mod.id} -- ${mod.nom}` : e.idModule}
|
|
</td>
|
|
<td>
|
|
<span class="promo-chip">{e.idPromo}</span>
|
|
</td>
|
|
<td>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-danger"
|
|
onClick={() =>
|
|
removeEnseignement(e.idModule, e.idPromo)}
|
|
>
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path d="M3 6h18" />
|
|
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
|
<rect
|
|
x="5"
|
|
y="6"
|
|
width="14"
|
|
height="16"
|
|
rx="1"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
: (
|
|
<p
|
|
class="state-empty"
|
|
style="padding: 1rem 0; text-align: left"
|
|
>
|
|
Aucun enseignement assigne.
|
|
</p>
|
|
)}
|
|
|
|
<p style="font-size: 0.78rem; font-weight: var(--font-weight-bold); margin: 0 0 0.5rem">
|
|
Ajouter un enseignement
|
|
</p>
|
|
{addError && (
|
|
<p class="state-error" style="padding: 0.3rem 0.5rem">
|
|
{addError}
|
|
</p>
|
|
)}
|
|
<div class="form-row">
|
|
<select
|
|
class="filter-select"
|
|
value={addModule}
|
|
onChange={(e) =>
|
|
setAddModule((e.target as HTMLSelectElement).value)}
|
|
style="min-width: 12rem"
|
|
>
|
|
<option value="">ECUE</option>
|
|
{modules.map((m) => (
|
|
<option key={m.id} value={m.id}>
|
|
{m.id} -- {m.nom}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
class="filter-select"
|
|
value={addPromo}
|
|
onChange={(e) => setAddPromo((e.target as HTMLSelectElement).value)}
|
|
style="min-width: 9rem"
|
|
>
|
|
<option value="">Promo</option>
|
|
{promos.map((p) => <option key={p.id} value={p.id}>{p.id}</option>)}
|
|
</select>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
onClick={addEnseignement}
|
|
disabled={adding}
|
|
>
|
|
{adding ? "..." : "+ Ajouter"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|