PolyMPR/routes/(apps)/admin/(_islands)/AdminModules.tsx

import { useEffect, useState } from "preact/hooks";

type Module = { id: string; nom: string };
type Enseignement = { idProf: string; idModule: string; idPromo: string };
type User = { id: string; nom: string; prenom: string };

export default function AdminModules() {
  const [modules, setModules] = useState<Module[]>([]);
  const [enseignements, setEnseignements] = useState<Enseignement[]>([]);
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [newId, setNewId] = useState("");
  const [newNom, setNewNom] = useState("");
  const [creating, setCreating] = useState(false);
  const [filterNom, setFilterNom] = useState("");

  async function load() {
    try {
      const [mRes, eRes, uRes] = await Promise.all([
        fetch("/admin/api/modules"),
        fetch("/admin/api/enseignements"),
        fetch("/admin/api/users"),
      ]);
      if (!mRes.ok) throw new Error("Impossible de charger les ECUEs");
      setModules(await mRes.json());
      if (eRes.ok) setEnseignements(await eRes.json());
      if (uRes.ok) setUsers(await uRes.json());
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    load();
  }, []);

  async function createModule() {
    if (!newId.trim() || !newNom.trim()) return;
    setCreating(true);
    try {
      const res = await fetch("/admin/api/modules", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ id: newId.trim(), nom: newNom.trim() }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error ?? "Création échouée");
      }
      setNewId("");
      setNewNom("");
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    } finally {
      setCreating(false);
    }
  }

  async function deleteModule(id: string) {
    if (!confirm(`Supprimer l'ECUE ${id} ?`)) return;
    try {
      const res = await fetch(
        `/admin/api/modules/${encodeURIComponent(id)}`,
        { method: "DELETE" },
      );
      if (!res.ok) throw new Error("Suppression échouée");
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur");
    }
  }

  const userMap = Object.fromEntries(
    users.map((u) => [u.id, u]),
  );

  function enseignantsForModule(moduleId: string): string {
    const profs = [
      ...new Set(
        enseignements
          .filter((e) => e.idModule === moduleId)
          .map((e) => e.idProf),
      ),
    ];
    if (profs.length === 0) return "";
    return profs
      .map((id) => {
        const u = userMap[id];
        return u ? `${u.nom} ${u.prenom.charAt(0)}.` : id;
      })
      .join(", ");
  }

  const filtered = modules.filter((m) =>
    !filterNom ||
    `${m.id} ${m.nom}`.toLowerCase().includes(filterNom.toLowerCase())
  );

  return (
    <div class="page-content">
      <h2 class="page-title">Gestion des ECUEs</h2>

      {error && <p class="state-error">{error}</p>}

      <div class="filters">
        <input
          class="filter-input"
          placeholder="Rechercher..."
          value={filterNom}
          onInput={(e) => setFilterNom((e.target as HTMLInputElement).value)}
        />
        <button
          type="button"
          class="btn btn-primary"
          onClick={() => {
            const el = document.getElementById("new-module-section");
            if (el) el.scrollIntoView({ behavior: "smooth" });
          }}
          style="margin-left: auto"
        >
          + Ajouter ECUE
        </button>
      </div>

      {loading
        ? <p class="state-loading">Chargement...</p>
        : (
          <div class="data-table-wrap">
            <table class="data-table">
              <thead>
                <tr>
                  <th>id (code)</th>
                  <th>Nom de l'ECUE</th>
                  <th>Enseignants assignes</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {filtered.length === 0
                  ? (
                    <tr>
                      <td colspan={4} class="state-empty">
                        Aucun ECUE enregistré
                      </td>
                    </tr>
                  )
                  : filtered.map((m) => {
                    const profs = enseignantsForModule(m.id);
                    return (
                      <tr key={m.id}>
                        <td class="col-dim">{m.id}</td>
                        <td>{m.nom}</td>
                        <td>
                          {profs
                            ? (
                              <span style="font-size: 0.78rem">
                                {profs}
                              </span>
                            )
                            : <span class="col-dim">--</span>}
                        </td>
                        <td>
                          <div class="col-actions">
                            <a
                              class="btn btn-sm btn-secondary"
                              href={`/admin/modules/${
                                encodeURIComponent(m.id)
                              }`}
                              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>{" "}
                              edit
                            </a>
                            <button
                              type="button"
                              class="btn btn-sm btn-danger"
                              onClick={() => deleteModule(m.id)}
                            >
                              <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>
        )}

      {/* Nouvel ECUE */}
      <div
        id="new-module-section"
        class="edit-section"
        style="margin-top: 1.5rem"
      >
        <p class="edit-section-title">Nouvel ECUE</p>
        <div class="form-row">
          <input
            class="form-input"
            placeholder="Code"
            value={newId}
            onInput={(e) => setNewId((e.target as HTMLInputElement).value)}
            style="min-width: 8rem; max-width: 10rem"
          />
          <input
            class="form-input"
            placeholder="Nom de l'ECUE"
            value={newNom}
            onInput={(e) => setNewNom((e.target as HTMLInputElement).value)}
          />
          <button
            type="button"
            class="btn btn-primary"
            onClick={createModule}
            disabled={creating}
          >
            {creating ? "..." : "+ Créer"}
          </button>
        </div>
      </div>
    </div>
  );
}