314 lines
9.8 KiB
TypeScript
314 lines
9.8 KiB
TypeScript
import { useEffect, useState } from "preact/hooks";
|
|
|
|
type Student = {
|
|
numEtud: number;
|
|
nom: string;
|
|
prenom: string;
|
|
idPromo: string;
|
|
};
|
|
type Promotion = { id: string; annee: string };
|
|
|
|
export default function ConsultStudents() {
|
|
const [students, setStudents] = useState<Student[]>([]);
|
|
const [promos, setPromos] = useState<Promotion[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [filterPromo, setFilterPromo] = useState("");
|
|
const [filterNom, setFilterNom] = useState("");
|
|
const [selected, setSelected] = useState<Set<number>>(new Set());
|
|
const [bulkPromo, setBulkPromo] = useState("");
|
|
const [bulkBusy, setBulkBusy] = useState(false);
|
|
|
|
async function load() {
|
|
try {
|
|
const [sRes, pRes] = await Promise.all([
|
|
fetch("/students/api/students"),
|
|
fetch("/students/api/promotions"),
|
|
]);
|
|
if (!sRes.ok) throw new Error("Impossible de charger les élèves");
|
|
setStudents(await sRes.json());
|
|
if (pRes.ok) setPromos(await pRes.json());
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : "Erreur");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
load();
|
|
}, []);
|
|
|
|
async function deleteStudent(numEtud: number) {
|
|
if (!confirm(`Supprimer l'élève #${numEtud} ?`)) return;
|
|
try {
|
|
const res = await fetch(`/students/api/students/${numEtud}`, {
|
|
method: "DELETE",
|
|
});
|
|
if (!res.ok) throw new Error("Suppression échouée");
|
|
await load();
|
|
setSelected((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(numEtud);
|
|
return next;
|
|
});
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : "Erreur");
|
|
}
|
|
}
|
|
|
|
const filtered = students.filter((s) => {
|
|
const matchPromo = !filterPromo || s.idPromo === filterPromo;
|
|
const matchNom = !filterNom ||
|
|
`${s.nom} ${s.prenom}`.toLowerCase().includes(filterNom.toLowerCase());
|
|
return matchPromo && matchNom;
|
|
});
|
|
|
|
const filteredIds = new Set(filtered.map((s) => s.numEtud));
|
|
const selectedInView = [...selected].filter((id) => filteredIds.has(id));
|
|
const allFilteredSelected = filtered.length > 0 &&
|
|
filtered.every((s) => selected.has(s.numEtud));
|
|
|
|
function toggleOne(numEtud: number) {
|
|
setSelected((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(numEtud)) next.delete(numEtud);
|
|
else next.add(numEtud);
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function toggleAll() {
|
|
if (allFilteredSelected) {
|
|
setSelected((prev) => {
|
|
const next = new Set(prev);
|
|
for (const s of filtered) next.delete(s.numEtud);
|
|
return next;
|
|
});
|
|
} else {
|
|
setSelected((prev) => {
|
|
const next = new Set(prev);
|
|
for (const s of filtered) next.add(s.numEtud);
|
|
return next;
|
|
});
|
|
}
|
|
}
|
|
|
|
async function bulkDelete() {
|
|
const count = selectedInView.length;
|
|
if (count === 0) return;
|
|
if (
|
|
!confirm(`Supprimer définitivement ${count} élève(s) sélectionné(s) ?`)
|
|
) return;
|
|
setBulkBusy(true);
|
|
try {
|
|
const results = await Promise.all(
|
|
selectedInView.map((id) =>
|
|
fetch(`/students/api/students/${id}`, { method: "DELETE" })
|
|
),
|
|
);
|
|
const failed = results.filter((r) => !r.ok).length;
|
|
if (failed > 0) setError(`${failed} suppression(s) échouée(s)`);
|
|
setSelected(new Set());
|
|
await load();
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : "Erreur");
|
|
} finally {
|
|
setBulkBusy(false);
|
|
}
|
|
}
|
|
|
|
async function bulkChangePromo() {
|
|
if (!bulkPromo || selectedInView.length === 0) return;
|
|
setBulkBusy(true);
|
|
try {
|
|
const results = await Promise.all(
|
|
selectedInView.map((id) =>
|
|
fetch(`/students/api/students/${id}`, {
|
|
method: "PUT",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({ idPromo: bulkPromo }),
|
|
})
|
|
),
|
|
);
|
|
const failed = results.filter((r) => !r.ok).length;
|
|
if (failed > 0) setError(`${failed} modification(s) échouée(s)`);
|
|
setSelected(new Set());
|
|
setBulkPromo("");
|
|
await load();
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : "Erreur");
|
|
} finally {
|
|
setBulkBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div class="page-content">
|
|
<h2 class="page-title">Gestion des Élèves</h2>
|
|
|
|
{error && <p class="state-error">{error}</p>}
|
|
|
|
<div class="toolbar">
|
|
<a
|
|
class="btn btn-primary"
|
|
href="/students/upload"
|
|
f-partial="/students/partials/upload"
|
|
style="margin-left: auto"
|
|
>
|
|
Importer xlsx
|
|
</a>
|
|
</div>
|
|
|
|
<div class="filters">
|
|
<select
|
|
class="filter-select"
|
|
value={filterPromo}
|
|
onChange={(e) =>
|
|
setFilterPromo((e.target as HTMLSelectElement).value)}
|
|
>
|
|
<option value="">Toutes les promos</option>
|
|
{promos.map((p) => (
|
|
<option key={p.id} value={p.id}>{p.id} — {p.annee}</option>
|
|
))}
|
|
</select>
|
|
<input
|
|
class="filter-input"
|
|
placeholder="Rechercher par nom…"
|
|
value={filterNom}
|
|
onInput={(e) => setFilterNom((e.target as HTMLInputElement).value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Bulk actions bar */}
|
|
{selectedInView.length > 0 && (
|
|
<div class="bulk-bar">
|
|
<span class="bulk-count">
|
|
{selectedInView.length} sélectionné(s)
|
|
</span>
|
|
<div class="bulk-actions">
|
|
<select
|
|
class="filter-select"
|
|
value={bulkPromo}
|
|
onChange={(e) =>
|
|
setBulkPromo((e.target as HTMLSelectElement).value)}
|
|
>
|
|
<option value="">Changer de promo…</option>
|
|
{promos.map((p) => (
|
|
<option key={p.id} value={p.id}>{p.id}</option>
|
|
))}
|
|
</select>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-primary"
|
|
disabled={!bulkPromo || bulkBusy}
|
|
onClick={bulkChangePromo}
|
|
>
|
|
Appliquer
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-danger"
|
|
disabled={bulkBusy}
|
|
onClick={bulkDelete}
|
|
>
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{loading
|
|
? <p class="state-loading">Chargement…</p>
|
|
: (
|
|
<div class="data-table-wrap">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 2.5rem">
|
|
<input
|
|
type="checkbox"
|
|
checked={allFilteredSelected && filtered.length > 0}
|
|
onChange={toggleAll}
|
|
/>
|
|
</th>
|
|
<th>N° étud.</th>
|
|
<th>Nom</th>
|
|
<th>Prénom</th>
|
|
<th>Promo</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filtered.length === 0
|
|
? (
|
|
<tr>
|
|
<td colspan={6} class="state-empty">
|
|
Aucun élève trouvé
|
|
</td>
|
|
</tr>
|
|
)
|
|
: filtered.map((s) => (
|
|
<tr
|
|
key={s.numEtud}
|
|
class={selected.has(s.numEtud) ? "row-selected" : ""}
|
|
>
|
|
<td>
|
|
<input
|
|
type="checkbox"
|
|
checked={selected.has(s.numEtud)}
|
|
onChange={() => toggleOne(s.numEtud)}
|
|
/>
|
|
</td>
|
|
<td class="col-dim">{s.numEtud}</td>
|
|
<td>{s.nom}</td>
|
|
<td>{s.prenom}</td>
|
|
<td>{s.idPromo}</td>
|
|
<td>
|
|
<div class="col-actions">
|
|
<a
|
|
class="btn btn-sm btn-secondary"
|
|
href={`/students/edit/${s.numEtud}`}
|
|
f-client-nav={false}
|
|
>
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
|
|
</svg>
|
|
</a>
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm btn-danger"
|
|
onClick={() => deleteStudent(s.numEtud)}
|
|
>
|
|
<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>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|