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>
This commit is contained in:
@@ -0,0 +1,143 @@
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
type Promotion = { id: string; annee: string | null };
|
||||
|
||||
export default function AdminPromotions() {
|
||||
const [promos, setPromos] = useState<Promotion[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [newId, setNewId] = useState("");
|
||||
const [newAnnee, setNewAnnee] = useState("");
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const res = await fetch("/students/api/promotions");
|
||||
if (!res.ok) throw new Error("Impossible de charger les promotions");
|
||||
setPromos(await res.json());
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
async function createPromo() {
|
||||
if (!newId.trim()) return;
|
||||
setCreating(true);
|
||||
try {
|
||||
const res = await fetch("/students/api/promotions", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
idPromo: newId.trim(),
|
||||
annee: newAnnee.trim() || null,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => ({}));
|
||||
throw new Error(body.error ?? "Création échouée");
|
||||
}
|
||||
setNewId("");
|
||||
setNewAnnee("");
|
||||
await load();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function deletePromo(id: string) {
|
||||
if (!confirm(`Supprimer la promotion ${id} ?`)) return;
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/students/api/promotions/${encodeURIComponent(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 Promotions</h2>
|
||||
|
||||
{error && <p class="state-error">{error}</p>}
|
||||
|
||||
<div class="form-row">
|
||||
<input
|
||||
class="form-input"
|
||||
placeholder="Identifiant (ex: 4A22)"
|
||||
value={newId}
|
||||
onInput={(e) => setNewId((e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
<input
|
||||
class="form-input"
|
||||
placeholder="Année (ex: 2022-2023)"
|
||||
value={newAnnee}
|
||||
onInput={(e) => setNewAnnee((e.target as HTMLInputElement).value)}
|
||||
style="min-width: 14rem"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onClick={createPromo}
|
||||
disabled={creating}
|
||||
>
|
||||
+ Ajouter
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{loading
|
||||
? <p class="state-loading">Chargement…</p>
|
||||
: (
|
||||
<div class="data-table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Identifiant</th>
|
||||
<th>Année</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{promos.length === 0
|
||||
? (
|
||||
<tr>
|
||||
<td colspan={3} class="state-empty">
|
||||
Aucune promotion enregistrée
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
: promos.map((p) => (
|
||||
<tr key={p.id}>
|
||||
<td class="col-promo">{p.id}</td>
|
||||
<td>{p.annee ?? "—"}</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-danger"
|
||||
onClick={() => deletePromo(p.id)}
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,45 +1,150 @@
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
import Promotion from "$root/routes/(apps)/students/(_components)/Promotion.tsx";
|
||||
|
||||
type SingleUserResponse = { promo: Promotion; student: Student };
|
||||
type ManyUsersResponse = { promos: Promotion[]; students: Student[] };
|
||||
|
||||
type APIResponse = SingleUserResponse | ManyUsersResponse;
|
||||
type Student = {
|
||||
numEtud: number;
|
||||
nom: string;
|
||||
prenom: string;
|
||||
idPromo: string;
|
||||
};
|
||||
type Promotion = { id: string; annee: string };
|
||||
|
||||
export default function ConsultStudents() {
|
||||
const [data, setData] = useState<APIResponse | null>(null);
|
||||
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("");
|
||||
|
||||
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(() => {
|
||||
const fetchData = async () => {
|
||||
const response = await fetch("/students/api/students");
|
||||
if (!response.ok) {
|
||||
setError("Failed to load data. Please try again later.");
|
||||
}
|
||||
|
||||
const result: APIResponse = await response.json();
|
||||
setData(result);
|
||||
};
|
||||
|
||||
fetchData();
|
||||
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();
|
||||
} 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;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
{error && <p className="error">{error}</p>}
|
||||
{data && ((Object.hasOwn(data, "student"))
|
||||
? (
|
||||
<Promotion
|
||||
students={[(data as SingleUserResponse).student]}
|
||||
promo={(data as SingleUserResponse).promo}
|
||||
/>
|
||||
)
|
||||
: (data as ManyUsersResponse).promos.map((promo) => (
|
||||
<Promotion
|
||||
students={(data as ManyUsersResponse).students}
|
||||
promo={promo}
|
||||
/>
|
||||
)))}
|
||||
</>
|
||||
<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"
|
||||
>
|
||||
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>
|
||||
|
||||
{loading
|
||||
? <p class="state-loading">Chargement…</p>
|
||||
: (
|
||||
<div class="data-table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<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={5} class="state-empty">
|
||||
Aucun élève trouvé
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
: filtered.map((s) => (
|
||||
<tr key={s.numEtud}>
|
||||
<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}
|
||||
>
|
||||
✏
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-danger"
|
||||
onClick={() => deleteStudent(s.numEtud)}
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,11 +4,12 @@ const properties: AppProperties = {
|
||||
name: "Students",
|
||||
icon: "badge",
|
||||
pages: {
|
||||
index: "Homepage",
|
||||
upload: "Upload students",
|
||||
consult: "Consult students",
|
||||
index: "Accueil",
|
||||
consult: "Élèves",
|
||||
promotions: "Promotions",
|
||||
upload: "Import xlsx",
|
||||
},
|
||||
adminOnly: ["upload", "consult"],
|
||||
adminOnly: ["consult", "promotions", "upload"],
|
||||
hint: "Create students promotion and see informations",
|
||||
};
|
||||
|
||||
|
||||
@@ -8,12 +8,7 @@ import { State } from "$root/defaults/interfaces.ts";
|
||||
|
||||
// deno-lint-ignore require-await
|
||||
async function Students(_request: Request, _context: FreshContext<State>) {
|
||||
return (
|
||||
<>
|
||||
<h2>Consult students</h2>
|
||||
<ConsultStudents />
|
||||
</>
|
||||
);
|
||||
return <ConsultStudents />;
|
||||
}
|
||||
|
||||
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 AdminPromotions from "../../(_islands)/AdminPromotions.tsx";
|
||||
|
||||
// deno-lint-ignore require-await
|
||||
async function Promotions(
|
||||
_request: Request,
|
||||
_context: FreshContext<State>,
|
||||
) {
|
||||
return <AdminPromotions />;
|
||||
}
|
||||
|
||||
export const config = getPartialsConfig();
|
||||
export default makePartials(Promotions);
|
||||
@@ -4,16 +4,44 @@ import {
|
||||
} from "$root/defaults/makePartials.tsx";
|
||||
import { FreshContext } from "$fresh/server.ts";
|
||||
import { State } from "$root/defaults/interfaces.ts";
|
||||
import SelfPortrait from "$root/routes/(apps)/students/(_components)/SelfPortrait.tsx";
|
||||
|
||||
// deno-lint-ignore require-await
|
||||
export async function Index(_request: Request, context: FreshContext<State>) {
|
||||
export async function Index(
|
||||
_request: Request,
|
||||
context: FreshContext<State>,
|
||||
) {
|
||||
const isEmployee =
|
||||
(context.state as unknown as { session: Record<string, string> }).session
|
||||
.eduPersonPrimaryAffiliation === "employee";
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>Welcome {context.state.session?.givenName}!</h2>
|
||||
<h3>Your amU identity</h3>
|
||||
<SelfPortrait self={context.state.session!} />
|
||||
</>
|
||||
<div class="page-content">
|
||||
<h2 class="page-title">Étudiants</h2>
|
||||
<p>
|
||||
Bienvenue{" "}
|
||||
<strong>
|
||||
{(context.state as unknown as { session: Record<string, string> })
|
||||
.session.displayName}
|
||||
</strong>
|
||||
.
|
||||
</p>
|
||||
{isEmployee && (
|
||||
<p>
|
||||
Consultez la{" "}
|
||||
<a href="/students/consult" f-partial="/students/partials/consult">
|
||||
liste des élèves
|
||||
</a>{" "}
|
||||
ou gérez les{" "}
|
||||
<a
|
||||
href="/students/promotions"
|
||||
f-partial="/students/partials/promotions"
|
||||
>
|
||||
promotions
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user