feat(ui): implement full UI layer for all modules

Add interactive island components and server partials for notes, students, and admin modules, following the Figma prototype design. - static/styles/ui.css: shared component library (buttons, tables, chips, cards, filters, tabs, form inputs) - notes: NotesView (student grade view with UE cards, promo tabs, weighted averages), AdminConsultNotes, AdminUEs islands + partials - students: ConsultStudents (list/filter/delete), AdminPromotions (CRUD) islands + partials - admin: AdminModules, AdminUsers, AdminRoles islands + partials - All partials use State type with unknown cast for session access Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-26 22:54:10 +02:00
parent 34b7ac0231
commit 5ba8b8cb68
25 changed files with 2059 additions and 77 deletions
@@ -0,0 +1,124 @@
+import { useEffect, useState } from "preact/hooks";
+
+type UE = { id: number; nom: string };
+
+export default function AdminUEs() {
+  const [ues, setUes] = useState<UE[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [newNom, setNewNom] = useState("");
+  const [creating, setCreating] = useState(false);
+
+  async function load() {
+    try {
+      const res = await fetch("/notes/api/ues");
+      if (!res.ok) throw new Error("Impossible de charger les UEs");
+      setUes(await res.json());
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Erreur");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  async function createUE() {
+    if (!newNom.trim()) return;
+    setCreating(true);
+    try {
+      const res = await fetch("/notes/api/ues", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ nom: newNom.trim() }),
+      });
+      if (!res.ok) throw new Error("Création échouée");
+      setNewNom("");
+      await load();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Erreur");
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  async function deleteUE(id: number) {
+    if (!confirm("Supprimer cette UE ?")) return;
+    try {
+      const res = await fetch(`/notes/api/ues/${id}`, { method: "DELETE" });
+      if (!res.ok) throw new Error("Suppression échouée");
+      await load();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Erreur");
+    }
+  }
+
+  return (
+    <div class="page-content">
+      <h2 class="page-title">Gestion des UEs</h2>
+
+      {error && <p class="state-error">{error}</p>}
+
+      <div class="form-row">
+        <input
+          class="form-input"
+          placeholder="Nom de la nouvelle UE"
+          value={newNom}
+          onInput={(e) => setNewNom((e.target as HTMLInputElement).value)}
+          onKeyDown={(e) => e.key === "Enter" && createUE()}
+        />
+        <button
+          type="button"
+          class="btn btn-primary"
+          onClick={createUE}
+          disabled={creating}
+        >
+          + Ajouter
+        </button>
+      </div>
+
+      {loading
+        ? <p class="state-loading">Chargement…</p>
+        : (
+          <div class="data-table-wrap">
+            <table class="data-table">
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Nom</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {ues.length === 0
+                  ? (
+                    <tr>
+                      <td colspan={3} class="state-empty">
+                        Aucune UE enregistrée
+                      </td>
+                    </tr>
+                  )
+                  : ues.map((ue) => (
+                    <tr key={ue.id}>
+                      <td class="col-dim">{ue.id}</td>
+                      <td>{ue.nom}</td>
+                      <td>
+                        <button
+                          type="button"
+                          class="btn btn-sm btn-danger"
+                          onClick={() => deleteUE(ue.id)}
+                        >
+                          🗑
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+    </div>
+  );
+}