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,145 @@
+import { useEffect, useState } from "preact/hooks";
+
+type Student = {
+  numEtud: number;
+  nom: string;
+  prenom: string;
+  idPromo: string;
+};
+type Promotion = { id: string; annee: string | null };
+
+export default function AdminConsultNotes() {
+  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 [filterPrenom, setFilterPrenom] = useState("");
+  const [applied, setApplied] = useState({
+    promo: "",
+    nom: "",
+    prenom: "",
+  });
+
+  useEffect(() => {
+    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 étudiants");
+        setStudents(await sRes.json());
+        if (pRes.ok) setPromos(await pRes.json());
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Erreur");
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, []);
+
+  const filtered = students.filter((s) => {
+    if (applied.promo && s.idPromo !== applied.promo) return false;
+    if (
+      applied.nom &&
+      !s.nom.toLowerCase().includes(applied.nom.toLowerCase())
+    ) return false;
+    if (
+      applied.prenom &&
+      !s.prenom.toLowerCase().includes(applied.prenom.toLowerCase())
+    ) return false;
+    return true;
+  });
+
+  function applyFilters() {
+    setApplied({ promo: filterPromo, nom: filterNom, prenom: filterPrenom });
+  }
+
+  return (
+    <div class="page-content">
+      <div class="toolbar">
+        <h2 class="page-title">Consulter les Notes</h2>
+      </div>
+
+      {error && <p class="state-error">{error}</p>}
+
+      <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}</option>)}
+        </select>
+        <input
+          class="filter-input"
+          placeholder="Nom"
+          value={filterNom}
+          onInput={(e) => setFilterNom((e.target as HTMLInputElement).value)}
+        />
+        <input
+          class="filter-input"
+          placeholder="Prénom"
+          value={filterPrenom}
+          onInput={(e) => setFilterPrenom((e.target as HTMLInputElement).value)}
+        />
+        <button type="button" class="btn btn-primary" onClick={applyFilters}>
+          Filtrer
+        </button>
+      </div>
+
+      {loading
+        ? <p class="state-loading">Chargement…</p>
+        : (
+          <div class="data-table-wrap">
+            <table class="data-table">
+              <thead>
+                <tr>
+                  <th>Promo</th>
+                  <th>Nom</th>
+                  <th>Prénom</th>
+                  <th>N° Étudiant</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filtered.length === 0
+                  ? (
+                    <tr>
+                      <td colspan={5} class="state-empty">
+                        Aucun étudiant trouvé
+                      </td>
+                    </tr>
+                  )
+                  : filtered.map((s) => (
+                    <tr key={s.numEtud}>
+                      <td class="col-promo">{s.idPromo}</td>
+                      <td>{s.nom}</td>
+                      <td>{s.prenom}</td>
+                      <td class="col-dim">{s.numEtud}</td>
+                      <td>
+                        <div class="col-actions">
+                          <a
+                            class="btn btn-sm btn-secondary"
+                            href={`/notes/edition/${s.numEtud}`}
+                            f-client-nav={false}
+                          >
+                            ✏ édit
+                          </a>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+    </div>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,223 @@
+import { useEffect, useState } from "preact/hooks";
+
+type Note = { numEtud: number; idModule: string; note: number };
+type UE = { id: number; nom: string };
+type UEModule = {
+  idModule: string;
+  idUE: number;
+  idPromo: string;
+  coeff: number;
+};
+type Module = { id: string; nom: string };
+type Ajustement = { numEtud: number; idUE: number; valeur: number };
+
+type Props = {
+  numEtud: number | null;
+  prenom: string;
+};
+
+function scoreClass(score: number | null): string {
+  if (score === null) return "score-none";
+  return score >= 10 ? "score-good" : "score-warn";
+}
+
+function avgClass(avg: number | null): string {
+  if (avg === null) return "";
+  return avg >= 10 ? "avg-good" : "avg-warn";
+}
+
+export default function NotesView({ numEtud, prenom }: Props) {
+  const [notes, setNotes] = useState<Note[]>([]);
+  const [ues, setUes] = useState<UE[]>([]);
+  const [ueModules, setUeModules] = useState<UEModule[]>([]);
+  const [modules, setModules] = useState<Module[]>([]);
+  const [ajustements, setAjustements] = useState<Ajustement[]>([]);
+  const [promos, setPromos] = useState<string[]>([]);
+  const [activePromo, setActivePromo] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (numEtud === null) {
+      setLoading(false);
+      return;
+    }
+
+    async function load() {
+      try {
+        const [notesRes, uesRes, ueModRes, modRes, ajRes] = await Promise.all([
+          fetch(`/notes/api/notes?numEtud=${numEtud}`),
+          fetch("/notes/api/ues"),
+          fetch("/notes/api/ue-modules"),
+          fetch("/admin/api/modules"),
+          fetch(`/notes/api/ajustements?numEtud=${numEtud}`),
+        ]);
+
+        if (!notesRes.ok || !uesRes.ok || !ueModRes.ok) {
+          throw new Error("Erreur lors du chargement");
+        }
+
+        const [notesData, uesData, ueModData, modData, ajData] = await Promise
+          .all([
+            notesRes.json(),
+            uesRes.json(),
+            ueModRes.json(),
+            modRes.ok ? modRes.json() : [],
+            ajRes.ok ? ajRes.json() : [],
+          ]);
+
+        setNotes(notesData);
+        setUes(uesData);
+        setUeModules(ueModData);
+        setModules(modData);
+        setAjustements(ajData);
+
+        // Derive promos from UE-modules for this student's notes
+        const noteModuleIds = new Set(notesData.map((n: Note) => n.idModule));
+        const relevantPromos = [
+          ...new Set(
+            ueModData
+              .filter((um: UEModule) => noteModuleIds.has(um.idModule))
+              .map((um: UEModule) => um.idPromo),
+          ),
+        ] as string[];
+
+        setPromos(relevantPromos);
+        if (relevantPromos.length > 0) setActivePromo(relevantPromos[0]);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Erreur inconnue");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    load();
+  }, [numEtud]);
+
+  if (numEtud === null) {
+    return (
+      <div class="page-content">
+        <p class="state-empty">
+          Bonjour {prenom}{" "}
+          — aucun dossier étudiant n'est associé à votre compte.
+        </p>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div class="page-content">
+        <p class="state-loading">Chargement…</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div class="page-content">
+        <p class="state-error">{error}</p>
+      </div>
+    );
+  }
+
+  // Filter UE-modules by active promo
+  const filteredUeModules = activePromo
+    ? ueModules.filter((um) => um.idPromo === activePromo)
+    : ueModules;
+
+  // Group UE-modules by UE
+  const ueIds = [...new Set(filteredUeModules.map((um) => um.idUE))];
+
+  const moduleMap = Object.fromEntries(modules.map((m) => [m.id, m]));
+  const noteMap = Object.fromEntries(
+    notes.map((n) => [n.idModule, n.note]),
+  );
+  const ajMap = Object.fromEntries(
+    ajustements.map((a) => [a.idUE, a.valeur]),
+  );
+
+  return (
+    <div class="page-content">
+      {promos.length > 1 && (
+        <div class="tabs">
+          {promos.map((p) => (
+            <button
+              type="button"
+              key={p}
+              class={`tab-btn${activePromo === p ? " active" : ""}`}
+              onClick={() => setActivePromo(p)}
+            >
+              {p}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {ueIds.length === 0 && (
+        <p class="state-empty">Aucune note disponible pour cette période.</p>
+      )}
+
+      {ueIds.map((ueId) => {
+        const ue = ues.find((u) => u.id === ueId);
+        if (!ue) return null;
+
+        const ueModsForUE = filteredUeModules.filter((um) => um.idUE === ueId);
+        let weightedSum = 0;
+        let coveredCoeff = 0;
+        ueModsForUE.forEach((um) => {
+          const note = noteMap[um.idModule];
+          if (note !== undefined) {
+            weightedSum += note * um.coeff;
+            coveredCoeff += um.coeff;
+          }
+        });
+
+        const avg = coveredCoeff > 0 ? weightedSum / coveredCoeff : null;
+        const ajustement = ajMap[ueId] ?? null;
+        const finalAvg = avg !== null && ajustement !== null
+          ? avg + ajustement
+          : avg;
+
+        return (
+          <div key={ueId} class="ue-card">
+            <div class="ue-card-header">
+              <p class="ue-card-title">UE : {ue.nom}</p>
+              {finalAvg !== null && (
+                <p class={`ue-card-avg ${avgClass(finalAvg)}`}>
+                  Moyenne : {finalAvg.toFixed(2)}/20
+                  {ajustement !== null && ajustement !== 0 && (
+                    <span>
+                      {" "}
+                      (ajustement : {ajustement > 0 ? "+" : ""}
+                      {ajustement})
+                    </span>
+                  )}
+                </p>
+              )}
+              {finalAvg === null && (
+                <p class="ue-card-avg avg-warn">Notes non disponibles</p>
+              )}
+            </div>
+
+            {ueModsForUE.map((um) => {
+              const mod = moduleMap[um.idModule];
+              const note = noteMap[um.idModule] ?? null;
+              return (
+                <div key={um.idModule} class="ue-module-row">
+                  <span class="ue-module-name">
+                    {mod ? mod.id : um.idModule} —{" "}
+                    {mod ? mod.nom : "Module inconnu"} (coef {um.coeff})
+                  </span>
+                  <span class={`score-chip ${scoreClass(note)}`}>
+                    {note !== null ? `${note}/20` : "—"}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
@@ -4,11 +4,12 @@ const properties: AppProperties = {
  name: "PolyNotes",
  icon: "school",
  pages: {
-    index: "Homepage",
-    notes: "Notes",
-    courses: "Courses management",
+    index: "Accueil",
+    notes: "Mes notes",
+    courses: "Consulter",
+    ues: "UEs",
  },
-  adminOnly: ["courses", "students"],
+  adminOnly: ["courses", "ues"],
  hint: "Student grading management",
 };

@@ -3,11 +3,12 @@ import {
  makePartials,
 } from "$root/defaults/makePartials.tsx";
 import { FreshContext } from "$fresh/server.ts";
-import { State } from "$root/routes/_middleware.ts";
+import { State } from "$root/defaults/interfaces.ts";
+import AdminConsultNotes from "../../(_islands)/AdminConsultNotes.tsx";

 // deno-lint-ignore require-await
-async function Courses(_request: Request, context: FreshContext<State>) {
-  return <h2>Welcome to {context.state.session?.displayName}.</h2>;
+async function Courses(_request: Request, _context: FreshContext<State>) {
+  return <AdminConsultNotes />;
 }

 export const config = getPartialsConfig();
@@ -0,0 +1,18 @@
+import {
+  getPartialsConfig,
+  makePartials,
+} from "$root/defaults/makePartials.tsx";
+import { FreshContext } from "$fresh/server.ts";
+import { State } from "$root/defaults/interfaces.ts";
+import AdminUEs from "../../(_islands)/AdminUEs.tsx";
+
+// deno-lint-ignore require-await
+async function UEs(
+  _request: Request,
+  _context: FreshContext<State>,
+) {
+  return <AdminUEs />;
+}
+
+export const config = getPartialsConfig();
+export default makePartials(UEs);
@@ -3,11 +3,53 @@ import {
  makePartials,
 } from "$root/defaults/makePartials.tsx";
 import { FreshContext } from "$fresh/server.ts";
-import { State } from "$root/routes/_middleware.ts";
+import { State } from "$root/defaults/interfaces.ts";

 // deno-lint-ignore require-await
-export async function Index(_request: Request, context: FreshContext<State>) {
-  return <h2>Welcome to {context.state.session?.displayName}.</h2>;
+export async function Index(
+  _request: Request,
+  context: FreshContext<State>,
+) {
+  const isEmployee =
+    (context.state as unknown as { session: Record<string, string> }).session
+      .eduPersonPrimaryAffiliation === "employee";
+
+  return (
+    <div class="page-content">
+      <h2 class="page-title">PolyNotes</h2>
+      <p>
+        Bienvenue{" "}
+        <strong>
+          {(context.state as unknown as { session: Record<string, string> })
+            .session.displayName}
+        </strong>
+        .
+      </p>
+      {isEmployee
+        ? (
+          <p>
+            Consultez les{" "}
+            <a href="/notes/courses" f-partial="/notes/partials/courses">
+              notes des élèves
+            </a>{" "}
+            ou gérez les{" "}
+            <a href="/notes/ues" f-partial="/notes/partials/ues">
+              UEs
+            </a>
+            .
+          </p>
+        )
+        : (
+          <p>
+            Consultez vos{" "}
+            <a href="/notes/notes" f-partial="/notes/partials/notes">
+              notes
+            </a>
+            .
+          </p>
+        )}
+    </div>
+  );
 }

 export const config = getPartialsConfig();
@@ -1,13 +1,36 @@
+import { FreshContext } from "$fresh/server.ts";
+import { db } from "$root/databases/db.ts";
+import { students } from "$root/databases/schema.ts";
+import { and, eq } from "npm:drizzle-orm@0.45.2";
 import {
  getPartialsConfig,
  makePartials,
 } from "$root/defaults/makePartials.tsx";
-import { FreshContext } from "$fresh/server.ts";
-import { State } from "$root/routes/_middleware.ts";
+import { State } from "$root/defaults/interfaces.ts";
+import NotesView from "../(_islands)/NotesView.tsx";

-// deno-lint-ignore require-await
-async function Notes(_request: Request, context: FreshContext<State>) {
-  return <h2>Welcome to {context.state.session?.displayName}.</h2>;
+async function Notes(
+  _request: Request,
+  context: FreshContext<State>,
+) {
+  const session =
+    (context.state as unknown as { session: { sn: string; givenName: string } })
+      .session;
+  const { sn, givenName } = session;
+
+  let numEtud: number | null = null;
+  try {
+    const student = await db
+      .select()
+      .from(students)
+      .where(and(eq(students.nom, sn), eq(students.prenom, givenName)))
+      .then((rows) => rows[0] ?? null);
+    numEtud = student?.numEtud ?? null;
+  } catch {
+    // DB lookup failed — island will show fallback message
+  }
+
+  return <NotesView numEtud={numEtud} prenom={session.givenName} />;
 }

 export const config = getPartialsConfig();