PolyMPR/routes/(apps)/notes/(_islands)/AdminConsultNotes.tsx

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>
  );
}