feat : fixed some page not being as described in the figma
This commit is contained in:
@@ -15,8 +15,10 @@ import * as $_apps_admin_api_roles_idRole_ from "./routes/(apps)/admin/api/roles
|
||||
import * as $_apps_admin_api_users from "./routes/(apps)/admin/api/users.ts";
|
||||
import * as $_apps_admin_api_users_id_ from "./routes/(apps)/admin/api/users/[id].ts";
|
||||
import * as $_apps_admin_index from "./routes/(apps)/admin/index.tsx";
|
||||
import * as $_apps_admin_partials_enseignements from "./routes/(apps)/admin/partials/enseignements.tsx";
|
||||
import * as $_apps_admin_partials_index from "./routes/(apps)/admin/partials/index.tsx";
|
||||
import * as $_apps_admin_partials_modules from "./routes/(apps)/admin/partials/modules.tsx";
|
||||
import * as $_apps_admin_partials_permissions from "./routes/(apps)/admin/partials/permissions.tsx";
|
||||
import * as $_apps_admin_partials_roles from "./routes/(apps)/admin/partials/roles.tsx";
|
||||
import * as $_apps_admin_partials_users from "./routes/(apps)/admin/partials/users.tsx";
|
||||
import * as $_apps_mobility_api_insert_mobility from "./routes/(apps)/mobility/api/insert_mobility.ts";
|
||||
@@ -42,6 +44,7 @@ import * as $_apps_students_api_promotions_idPromo_ from "./routes/(apps)/studen
|
||||
import * as $_apps_students_api_students from "./routes/(apps)/students/api/students.ts";
|
||||
import * as $_apps_students_api_students_numEtud_ from "./routes/(apps)/students/api/students/[numEtud].ts";
|
||||
import * as $_apps_students_api_students_import_csv from "./routes/(apps)/students/api/students/import-csv.ts";
|
||||
import * as $_apps_students_edit_numEtud_ from "./routes/(apps)/students/edit/[numEtud].tsx";
|
||||
import * as $_apps_students_index from "./routes/(apps)/students/index.tsx";
|
||||
import * as $_apps_students_partials_admin_consult from "./routes/(apps)/students/partials/(admin)/consult.tsx";
|
||||
import * as $_apps_students_partials_admin_promotions from "./routes/(apps)/students/partials/(admin)/promotions.tsx";
|
||||
@@ -59,7 +62,9 @@ import * as $login from "./routes/login.tsx";
|
||||
import * as $logout from "./routes/logout.tsx";
|
||||
import * as $_islands_AppNavigator from "./routes/(_islands)/AppNavigator.tsx";
|
||||
import * as $_islands_Navbar from "./routes/(_islands)/Navbar.tsx";
|
||||
import * as $_apps_admin_islands_AdminEnseignements from "./routes/(apps)/admin/(_islands)/AdminEnseignements.tsx";
|
||||
import * as $_apps_admin_islands_AdminModules from "./routes/(apps)/admin/(_islands)/AdminModules.tsx";
|
||||
import * as $_apps_admin_islands_AdminPermissions from "./routes/(apps)/admin/(_islands)/AdminPermissions.tsx";
|
||||
import * as $_apps_admin_islands_AdminRoles from "./routes/(apps)/admin/(_islands)/AdminRoles.tsx";
|
||||
import * as $_apps_admin_islands_AdminUsers from "./routes/(apps)/admin/(_islands)/AdminUsers.tsx";
|
||||
import * as $_apps_mobility_islands_ConsultMobility from "./routes/(apps)/mobility/(_islands)/ConsultMobility.tsx";
|
||||
@@ -93,8 +98,12 @@ const manifest = {
|
||||
"./routes/(apps)/admin/api/users.ts": $_apps_admin_api_users,
|
||||
"./routes/(apps)/admin/api/users/[id].ts": $_apps_admin_api_users_id_,
|
||||
"./routes/(apps)/admin/index.tsx": $_apps_admin_index,
|
||||
"./routes/(apps)/admin/partials/enseignements.tsx":
|
||||
$_apps_admin_partials_enseignements,
|
||||
"./routes/(apps)/admin/partials/index.tsx": $_apps_admin_partials_index,
|
||||
"./routes/(apps)/admin/partials/modules.tsx": $_apps_admin_partials_modules,
|
||||
"./routes/(apps)/admin/partials/permissions.tsx":
|
||||
$_apps_admin_partials_permissions,
|
||||
"./routes/(apps)/admin/partials/roles.tsx": $_apps_admin_partials_roles,
|
||||
"./routes/(apps)/admin/partials/users.tsx": $_apps_admin_partials_users,
|
||||
"./routes/(apps)/mobility/api/insert_mobility.ts":
|
||||
@@ -133,6 +142,8 @@ const manifest = {
|
||||
$_apps_students_api_students_numEtud_,
|
||||
"./routes/(apps)/students/api/students/import-csv.ts":
|
||||
$_apps_students_api_students_import_csv,
|
||||
"./routes/(apps)/students/edit/[numEtud].tsx":
|
||||
$_apps_students_edit_numEtud_,
|
||||
"./routes/(apps)/students/index.tsx": $_apps_students_index,
|
||||
"./routes/(apps)/students/partials/(admin)/consult.tsx":
|
||||
$_apps_students_partials_admin_consult,
|
||||
@@ -156,8 +167,12 @@ const manifest = {
|
||||
islands: {
|
||||
"./routes/(_islands)/AppNavigator.tsx": $_islands_AppNavigator,
|
||||
"./routes/(_islands)/Navbar.tsx": $_islands_Navbar,
|
||||
"./routes/(apps)/admin/(_islands)/AdminEnseignements.tsx":
|
||||
$_apps_admin_islands_AdminEnseignements,
|
||||
"./routes/(apps)/admin/(_islands)/AdminModules.tsx":
|
||||
$_apps_admin_islands_AdminModules,
|
||||
"./routes/(apps)/admin/(_islands)/AdminPermissions.tsx":
|
||||
$_apps_admin_islands_AdminPermissions,
|
||||
"./routes/(apps)/admin/(_islands)/AdminRoles.tsx":
|
||||
$_apps_admin_islands_AdminRoles,
|
||||
"./routes/(apps)/admin/(_islands)/AdminUsers.tsx":
|
||||
|
||||
@@ -0,0 +1,292 @@
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
type Enseignement = { idProf: string; idModule: string; idPromo: string };
|
||||
type Module = { id: string; nom: string };
|
||||
type Promo = { id: string; annee: string };
|
||||
|
||||
export default function AdminEnseignements() {
|
||||
const [enseignements, setEnseignements] = useState<Enseignement[]>([]);
|
||||
const [modules, setModules] = useState<Module[]>([]);
|
||||
const [promos, setPromos] = useState<Promo[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Filters
|
||||
const [filterPromo, setFilterPromo] = useState("");
|
||||
const [filterModule, setFilterModule] = useState("");
|
||||
const [filterEnseignant, setFilterEnseignant] = useState("");
|
||||
|
||||
// Add form
|
||||
const [showAdd, setShowAdd] = useState(false);
|
||||
const [addPromo, setAddPromo] = useState("");
|
||||
const [addModule, setAddModule] = useState("");
|
||||
const [addProf, setAddProf] = useState("");
|
||||
const [adding, setAdding] = useState(false);
|
||||
const [addError, setAddError] = useState<string | null>(null);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const [eRes, mRes, pRes] = await Promise.all([
|
||||
fetch("/admin/api/enseignements"),
|
||||
fetch("/admin/api/modules"),
|
||||
fetch("/students/api/promotions"),
|
||||
]);
|
||||
if (!eRes.ok) throw new Error("Impossible de charger les enseignements");
|
||||
setEnseignements(await eRes.json());
|
||||
if (mRes.ok) setModules(await mRes.json());
|
||||
if (pRes.ok) setPromos(await pRes.json());
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
async function deleteEnseignement(
|
||||
idProf: string,
|
||||
idModule: string,
|
||||
idPromo: string,
|
||||
) {
|
||||
if (
|
||||
!confirm(
|
||||
`Supprimer l'assignation ${idProf} → ${idModule} / ${idPromo} ?`,
|
||||
)
|
||||
) return;
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/admin/api/enseignements/${encodeURIComponent(idProf)}/${
|
||||
encodeURIComponent(idModule)
|
||||
}/${encodeURIComponent(idPromo)}`,
|
||||
{ method: "DELETE" },
|
||||
);
|
||||
if (!res.ok) throw new Error("Suppression échouée");
|
||||
await load();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
}
|
||||
}
|
||||
|
||||
async function addEnseignement() {
|
||||
if (!addProf.trim() || !addModule || !addPromo) {
|
||||
setAddError("Tous les champs sont requis");
|
||||
return;
|
||||
}
|
||||
setAdding(true);
|
||||
setAddError(null);
|
||||
try {
|
||||
const res = await fetch("/admin/api/enseignements", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
idProf: addProf.trim(),
|
||||
idModule: addModule,
|
||||
idPromo: addPromo,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => ({}));
|
||||
throw new Error(body.error ?? "Création échouée");
|
||||
}
|
||||
setAddProf("");
|
||||
setAddModule("");
|
||||
setAddPromo("");
|
||||
setShowAdd(false);
|
||||
await load();
|
||||
} catch (e) {
|
||||
setAddError(e instanceof Error ? e.message : "Erreur");
|
||||
} finally {
|
||||
setAdding(false);
|
||||
}
|
||||
}
|
||||
|
||||
const moduleMap = Object.fromEntries(modules.map((m) => [m.id, m]));
|
||||
|
||||
const filtered = enseignements.filter((e) => {
|
||||
const matchPromo = !filterPromo || e.idPromo === filterPromo;
|
||||
const matchModule = !filterModule || e.idModule === filterModule;
|
||||
const matchEns = !filterEnseignant ||
|
||||
e.idProf.toLowerCase().includes(filterEnseignant.toLowerCase());
|
||||
return matchPromo && matchModule && matchEns;
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="page-content">
|
||||
<h2 class="page-title">Assignations Enseignant → Module / Promo</h2>
|
||||
|
||||
{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="">Promo ▾</option>
|
||||
{promos.map((p) => <option key={p.id} value={p.id}>{p.id}</option>)}
|
||||
</select>
|
||||
<select
|
||||
class="filter-select"
|
||||
value={filterModule}
|
||||
onChange={(e) =>
|
||||
setFilterModule((e.target as HTMLSelectElement).value)}
|
||||
>
|
||||
<option value="">Module ▾</option>
|
||||
{modules.map((m) => (
|
||||
<option key={m.id} value={m.id}>{m.id} – {m.nom}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
class="filter-input"
|
||||
placeholder="Enseignant ▾"
|
||||
value={filterEnseignant}
|
||||
onInput={(e) =>
|
||||
setFilterEnseignant((e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
onClick={() => {
|
||||
setFilterPromo("");
|
||||
setFilterModule("");
|
||||
setFilterEnseignant("");
|
||||
}}
|
||||
>
|
||||
Filtrer
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onClick={() => setShowAdd((v) => !v)}
|
||||
style="margin-left: auto"
|
||||
>
|
||||
+ Assigner
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showAdd && (
|
||||
<div class="form-row" style="margin-bottom: 1.25rem">
|
||||
{addError && (
|
||||
<span class="state-error" style="padding: 0.3rem 0.5rem">
|
||||
{addError}
|
||||
</span>
|
||||
)}
|
||||
<select
|
||||
class="filter-select"
|
||||
value={addPromo}
|
||||
onChange={(e) => setAddPromo((e.target as HTMLSelectElement).value)}
|
||||
style="min-width: 10rem"
|
||||
>
|
||||
<option value="">Promo…</option>
|
||||
{promos.map((p) => <option key={p.id} value={p.id}>{p.id}</option>)}
|
||||
</select>
|
||||
<select
|
||||
class="filter-select"
|
||||
value={addModule}
|
||||
onChange={(e) =>
|
||||
setAddModule((e.target as HTMLSelectElement).value)}
|
||||
style="min-width: 14rem"
|
||||
>
|
||||
<option value="">Module…</option>
|
||||
{modules.map((m) => (
|
||||
<option key={m.id} value={m.id}>{m.id} – {m.nom}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
class="form-input"
|
||||
placeholder="User ID enseignant…"
|
||||
value={addProf}
|
||||
onInput={(e) => setAddProf((e.target as HTMLInputElement).value)}
|
||||
style="min-width: 10rem"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onClick={addEnseignement}
|
||||
disabled={adding}
|
||||
>
|
||||
{adding ? "…" : "Créer"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
onClick={() => setShowAdd(false)}
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading
|
||||
? <p class="state-loading">Chargement…</p>
|
||||
: (
|
||||
<div class="data-table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Promo</th>
|
||||
<th>Module</th>
|
||||
<th>Enseignant (User.id)</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtered.length === 0
|
||||
? (
|
||||
<tr>
|
||||
<td colspan={4} class="state-empty">
|
||||
Aucun enseignement trouvé
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
: filtered.map((e) => {
|
||||
const mod = moduleMap[e.idModule];
|
||||
return (
|
||||
<tr key={`${e.idProf}-${e.idModule}-${e.idPromo}`}>
|
||||
<td>
|
||||
<span class="promo-chip">{e.idPromo}</span>
|
||||
</td>
|
||||
<td class="col-promo">
|
||||
{mod ? `${mod.id} – ${mod.nom}` : e.idModule}
|
||||
</td>
|
||||
<td>{e.idProf}</td>
|
||||
<td>
|
||||
<div class="col-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-danger"
|
||||
onClick={() =>
|
||||
deleteEnseignement(
|
||||
e.idProf,
|
||||
e.idModule,
|
||||
e.idPromo,
|
||||
)}
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="info-note">
|
||||
<p>
|
||||
Un même module peut être enseigné par plusieurs utilisateurs sur une
|
||||
même promo.
|
||||
</p>
|
||||
<p class="info-note-dim">
|
||||
Clé composite = idProf (User.Id) + idModule + idPromo
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
type Perm = { id: string; nom: string };
|
||||
type Role = { id: number; nom: string; permissions: string[] };
|
||||
|
||||
export default function AdminPermissions() {
|
||||
const [permissions, setPermissions] = useState<Perm[]>([]);
|
||||
const [roles, setRoles] = useState<Role[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function load() {
|
||||
try {
|
||||
const [pRes, rRes] = await Promise.all([
|
||||
fetch("/admin/api/permissions"),
|
||||
fetch("/admin/api/roles"),
|
||||
]);
|
||||
if (!pRes.ok) throw new Error("Impossible de charger les permissions");
|
||||
setPermissions(await pRes.json());
|
||||
if (rRes.ok) setRoles(await rRes.json());
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
load();
|
||||
}, []);
|
||||
|
||||
function rolesForPerm(permId: string): Role[] {
|
||||
return roles.filter((r) => r.permissions.includes(permId));
|
||||
}
|
||||
|
||||
const MAX_ROLE_CHIPS = 2;
|
||||
|
||||
return (
|
||||
<div class="page-content">
|
||||
<h2 class="page-title">Permissions</h2>
|
||||
|
||||
<div class="info-note" style="margin-top: 0; margin-bottom: 1.25rem">
|
||||
<p>
|
||||
Les permissions sont définies statiquement par le serveur.
|
||||
</p>
|
||||
<p class="info-note-dim">
|
||||
Elles ne peuvent pas être créées ou supprimées via l'API.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && <p class="state-error">{error}</p>}
|
||||
|
||||
{loading
|
||||
? <p class="state-loading">Chargement…</p>
|
||||
: (
|
||||
<div class="data-table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>idPermission</th>
|
||||
<th>nomPermission</th>
|
||||
<th>Rôles associés</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{permissions.map((p) => {
|
||||
const associated = rolesForPerm(p.id);
|
||||
const shown = associated.slice(0, MAX_ROLE_CHIPS);
|
||||
const overflow = associated.length - MAX_ROLE_CHIPS;
|
||||
return (
|
||||
<tr key={p.id}>
|
||||
<td>
|
||||
<span
|
||||
class="col-promo"
|
||||
style="font-family: monospace"
|
||||
>
|
||||
{p.id}
|
||||
</span>
|
||||
</td>
|
||||
<td>{p.nom}</td>
|
||||
<td>
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem">
|
||||
{shown.map((r) => (
|
||||
<span key={r.id} class="role-chip">{r.nom}</span>
|
||||
))}
|
||||
{overflow > 0 && (
|
||||
<span
|
||||
class="col-dim"
|
||||
style="font-size: 0.72rem; margin-left: 0.2rem"
|
||||
>
|
||||
+{overflow}
|
||||
</span>
|
||||
)}
|
||||
{associated.length === 0 && (
|
||||
<span class="col-dim">—</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +1,23 @@
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
type Role = { id: number; nom: string };
|
||||
type Permission = { id: string; nom: string };
|
||||
type Role = { id: number; nom: string; permissions: string[] };
|
||||
type Perm = { id: string; nom: string };
|
||||
|
||||
const MAX_CHIPS = 3;
|
||||
|
||||
export default function AdminRoles() {
|
||||
const [roles, setRoles] = useState<Role[]>([]);
|
||||
const [permissions, setPermissions] = useState<Permission[]>([]);
|
||||
const [permissions, setPermissions] = useState<Perm[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [newNom, setNewNom] = useState("");
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [editId, setEditId] = useState<number | null>(null);
|
||||
const [editNom, setEditNom] = useState("");
|
||||
|
||||
// Manage-perms sub-view
|
||||
const [managingRole, setManagingRole] = useState<Role | null>(null);
|
||||
const [editPerms, setEditPerms] = useState<Set<string>>(new Set());
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
@@ -55,21 +61,6 @@ export default function AdminRoles() {
|
||||
}
|
||||
}
|
||||
|
||||
async function saveEdit(id: number) {
|
||||
try {
|
||||
const res = await fetch(`/admin/api/roles/${id}`, {
|
||||
method: "PUT",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ nom: editNom.trim() }),
|
||||
});
|
||||
if (!res.ok) throw new Error("Modification échouée");
|
||||
setEditId(null);
|
||||
await load();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRole(id: number) {
|
||||
if (!confirm("Supprimer ce rôle ?")) return;
|
||||
try {
|
||||
@@ -81,19 +72,143 @@ export default function AdminRoles() {
|
||||
}
|
||||
}
|
||||
|
||||
function openManage(role: Role) {
|
||||
setManagingRole(role);
|
||||
setEditPerms(new Set(role.permissions));
|
||||
setSaveError(null);
|
||||
}
|
||||
|
||||
function togglePerm(permId: string) {
|
||||
setEditPerms((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(permId)) next.delete(permId);
|
||||
else next.add(permId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
async function savePerms() {
|
||||
if (!managingRole) return;
|
||||
setSaving(true);
|
||||
setSaveError(null);
|
||||
try {
|
||||
const res = await fetch(`/admin/api/roles/${managingRole.id}`, {
|
||||
method: "PUT",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
nom: managingRole.nom,
|
||||
permissions: [...editPerms],
|
||||
}),
|
||||
});
|
||||
if (!res.ok) throw new Error("Enregistrement échoué");
|
||||
await load();
|
||||
setManagingRole(null);
|
||||
} catch (e) {
|
||||
setSaveError(e instanceof Error ? e.message : "Erreur");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Manage-perms view ----
|
||||
if (managingRole) {
|
||||
const activeCount = editPerms.size;
|
||||
return (
|
||||
<div class="page-content">
|
||||
<a
|
||||
class="back-link"
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setManagingRole(null);
|
||||
}}
|
||||
>
|
||||
← Retour à la liste des rôles
|
||||
</a>
|
||||
<h2 class="page-title">
|
||||
Permissions du rôle – {managingRole.nom}
|
||||
</h2>
|
||||
|
||||
{saveError && <p class="state-error">{saveError}</p>}
|
||||
|
||||
<div
|
||||
class="toolbar"
|
||||
style="margin-bottom: 1.25rem; align-items: center"
|
||||
>
|
||||
<div style="display: flex; align-items: center; gap: 0.6rem">
|
||||
<span class="numEtud-chip">idRole : {managingRole.id}</span>
|
||||
<span style="font-weight: var(--font-weight-bold); font-size: 0.9rem">
|
||||
{managingRole.nom}
|
||||
</span>
|
||||
<span style="font-size: 0.8rem; color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim))">
|
||||
{activeCount} permission{activeCount !== 1 ? "s" : ""} active
|
||||
{activeCount !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onClick={savePerms}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? "…" : "Enregistrer"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 0.5rem; display: flex; justify-content: space-between">
|
||||
<span style="font-size: 0.78rem; font-weight: var(--font-weight-bold)">
|
||||
Permissions disponibles
|
||||
</span>
|
||||
<span style="font-size: 0.72rem; color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim))">
|
||||
Activer = inclure dans le rôle
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="perm-toggle-grid">
|
||||
{permissions.map((p) => {
|
||||
const active = editPerms.has(p.id);
|
||||
return (
|
||||
<label
|
||||
key={p.id}
|
||||
class={`perm-toggle-card${active ? " active" : ""}`}
|
||||
onClick={() => togglePerm(p.id)}
|
||||
>
|
||||
<div class="perm-toggle-label">
|
||||
<span class="perm-toggle-id">{p.id}</span>
|
||||
<span class="perm-toggle-nom">{p.nom}</span>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={active}
|
||||
onChange={() => togglePerm(p.id)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<span class="toggle-slider" />
|
||||
</label>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---- Main list view ----
|
||||
return (
|
||||
<div class="page-content">
|
||||
<h2 class="page-title">Gestion des Rôles</h2>
|
||||
|
||||
{error && <p class="state-error">{error}</p>}
|
||||
|
||||
<div class="form-row">
|
||||
<div class="toolbar">
|
||||
<input
|
||||
class="form-input"
|
||||
placeholder="Nom du rôle"
|
||||
placeholder="Nom du rôle…"
|
||||
value={newNom}
|
||||
onInput={(e) => setNewNom((e.target as HTMLInputElement).value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && createRole()}
|
||||
style="min-width: 14rem"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@@ -101,7 +216,7 @@ export default function AdminRoles() {
|
||||
onClick={createRole}
|
||||
disabled={creating}
|
||||
>
|
||||
+ Ajouter
|
||||
+ Créer rôle
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -112,8 +227,9 @@ export default function AdminRoles() {
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Nom</th>
|
||||
<th>idRole</th>
|
||||
<th>Nom du rôle</th>
|
||||
<th>Permissions</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -121,105 +237,60 @@ export default function AdminRoles() {
|
||||
{roles.length === 0
|
||||
? (
|
||||
<tr>
|
||||
<td colspan={3} class="state-empty">
|
||||
<td colspan={4} class="state-empty">
|
||||
Aucun rôle enregistré
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
: roles.map((r) => (
|
||||
<tr key={r.id}>
|
||||
<td class="col-dim">{r.id}</td>
|
||||
<td>
|
||||
{editId === r.id
|
||||
? (
|
||||
<input
|
||||
class="form-input"
|
||||
value={editNom}
|
||||
onInput={(e) =>
|
||||
setEditNom(
|
||||
(e.target as HTMLInputElement).value,
|
||||
)}
|
||||
style="min-width: 0; width: 100%"
|
||||
/>
|
||||
)
|
||||
: r.nom}
|
||||
</td>
|
||||
<td>
|
||||
<div class="col-actions">
|
||||
{editId === r.id
|
||||
? (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary"
|
||||
onClick={() => saveEdit(r.id)}
|
||||
>
|
||||
✓
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-secondary"
|
||||
onClick={() => setEditId(null)}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
: (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-secondary"
|
||||
onClick={() => {
|
||||
setEditId(r.id);
|
||||
setEditNom(r.nom);
|
||||
}}
|
||||
>
|
||||
✏
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-danger"
|
||||
onClick={() => deleteRole(r.id)}
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
</>
|
||||
: roles.map((r) => {
|
||||
const shown = r.permissions.slice(0, MAX_CHIPS);
|
||||
const overflow = r.permissions.length - MAX_CHIPS;
|
||||
return (
|
||||
<tr key={r.id}>
|
||||
<td class="col-dim">{r.id}</td>
|
||||
<td style="font-weight: var(--font-weight-bold)">
|
||||
{r.nom}
|
||||
</td>
|
||||
<td>
|
||||
<div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem">
|
||||
{shown.map((p) => (
|
||||
<span key={p} class="perm-chip">{p}</span>
|
||||
))}
|
||||
{overflow > 0 && (
|
||||
<span
|
||||
class="col-dim"
|
||||
style="font-size: 0.72rem; margin-left: 0.2rem"
|
||||
>
|
||||
+{overflow}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="col-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-secondary"
|
||||
onClick={() => openManage(r)}
|
||||
>
|
||||
⚙ Gérer perms
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-danger"
|
||||
onClick={() => deleteRole(r.id)}
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{permissions.length > 0 && (
|
||||
<div style="margin-top: 2rem">
|
||||
<h3 style="font-size: 0.9rem; font-weight: var(--font-weight-bold); margin-bottom: 0.75rem; color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim))">
|
||||
Permissions disponibles
|
||||
</h3>
|
||||
<div class="data-table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Nom</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{permissions.map((p) => (
|
||||
<tr key={p.id}>
|
||||
<td class="col-dim">{p.id}</td>
|
||||
<td>{p.nom}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,11 +5,13 @@ const properties: AppProperties = {
|
||||
icon: "school",
|
||||
pages: {
|
||||
index: "Accueil",
|
||||
modules: "Modules",
|
||||
users: "Utilisateurs",
|
||||
roles: "Rôles",
|
||||
permissions: "Permissions",
|
||||
modules: "Modules",
|
||||
enseignements: "Enseignements",
|
||||
},
|
||||
adminOnly: ["modules", "users", "roles"],
|
||||
adminOnly: ["users", "roles", "permissions", "modules", "enseignements"],
|
||||
hint: "PolyMPR module",
|
||||
};
|
||||
|
||||
|
||||
@@ -17,6 +17,22 @@ const CONFLICT = new Response(
|
||||
);
|
||||
|
||||
export const handler: Handlers<null, AuthenticatedState> = {
|
||||
// GET /enseignements
|
||||
async GET(
|
||||
_request: Request,
|
||||
context: FreshContext<AuthenticatedState>,
|
||||
): Promise<Response> {
|
||||
if (context.state.session.eduPersonPrimaryAffiliation !== "employee") {
|
||||
return new Response(JSON.stringify([]), {
|
||||
headers: { "content-type": "application/json" },
|
||||
});
|
||||
}
|
||||
const rows = await db.select().from(enseignements);
|
||||
return new Response(JSON.stringify(rows), {
|
||||
headers: { "content-type": "application/json" },
|
||||
});
|
||||
},
|
||||
|
||||
// #29 POST /enseignements
|
||||
async POST(
|
||||
request: Request,
|
||||
|
||||
@@ -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 AdminEnseignements from "../(_islands)/AdminEnseignements.tsx";
|
||||
|
||||
// deno-lint-ignore require-await
|
||||
async function Enseignements(
|
||||
_request: Request,
|
||||
_context: FreshContext<State>,
|
||||
) {
|
||||
return <AdminEnseignements />;
|
||||
}
|
||||
|
||||
export const config = getPartialsConfig();
|
||||
export default makePartials(Enseignements);
|
||||
@@ -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 AdminPermissions from "../(_islands)/AdminPermissions.tsx";
|
||||
|
||||
// deno-lint-ignore require-await
|
||||
async function Permissions(
|
||||
_request: Request,
|
||||
_context: FreshContext<State>,
|
||||
) {
|
||||
return <AdminPermissions />;
|
||||
}
|
||||
|
||||
export const config = getPartialsConfig();
|
||||
export default makePartials(Permissions);
|
||||
@@ -1,19 +1,54 @@
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
type UE = { id: number; nom: string };
|
||||
type UEModule = {
|
||||
idModule: string;
|
||||
idUE: number;
|
||||
idPromo: string;
|
||||
coeff: number;
|
||||
};
|
||||
type Module = { id: string; nom: string };
|
||||
type Promo = { id: string; annee: string };
|
||||
|
||||
export default function AdminUEs() {
|
||||
const [ues, setUes] = useState<UE[]>([]);
|
||||
const [ueModules, setUeModules] = useState<UEModule[]>([]);
|
||||
const [modules, setModules] = useState<Module[]>([]);
|
||||
const [promos, setPromos] = useState<Promo[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [newNom, setNewNom] = useState("");
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
const [selectedUe, setSelectedUe] = useState<UE | null>(null);
|
||||
|
||||
// New UE form
|
||||
const [newUeNom, setNewUeNom] = useState("");
|
||||
const [creatingUe, setCreatingUe] = useState(false);
|
||||
|
||||
// Add UE-module form
|
||||
const [addModuleId, setAddModuleId] = useState("");
|
||||
const [addPromoId, setAddPromoId] = useState("");
|
||||
const [addCoeff, setAddCoeff] = useState("1");
|
||||
const [adding, setAdding] = useState(false);
|
||||
const [addError, setAddError] = useState<string | null>(null);
|
||||
|
||||
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());
|
||||
const [uRes, umRes, mRes, pRes] = await Promise.all([
|
||||
fetch("/notes/api/ues"),
|
||||
fetch("/notes/api/ue-modules"),
|
||||
fetch("/admin/api/modules"),
|
||||
fetch("/students/api/promotions"),
|
||||
]);
|
||||
if (!uRes.ok) throw new Error("Impossible de charger les UEs");
|
||||
const uesData: UE[] = await uRes.json();
|
||||
setUes(uesData);
|
||||
if (umRes.ok) setUeModules(await umRes.json());
|
||||
if (mRes.ok) setModules(await mRes.json());
|
||||
if (pRes.ok) setPromos(await pRes.json());
|
||||
// Keep selection in sync
|
||||
setSelectedUe((prev) =>
|
||||
prev ? uesData.find((u) => u.id === prev.id) ?? null : null
|
||||
);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
} finally {
|
||||
@@ -26,28 +61,37 @@ export default function AdminUEs() {
|
||||
}, []);
|
||||
|
||||
async function createUE() {
|
||||
if (!newNom.trim()) return;
|
||||
setCreating(true);
|
||||
if (!newUeNom.trim()) return;
|
||||
setCreatingUe(true);
|
||||
try {
|
||||
const res = await fetch("/notes/api/ues", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ nom: newNom.trim() }),
|
||||
body: JSON.stringify({ nom: newUeNom.trim() }),
|
||||
});
|
||||
if (!res.ok) throw new Error("Création échouée");
|
||||
setNewNom("");
|
||||
setNewUeNom("");
|
||||
await load();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
} finally {
|
||||
setCreating(false);
|
||||
setCreatingUe(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteUE(id: number) {
|
||||
if (!confirm("Supprimer cette UE ?")) return;
|
||||
async function deleteUeModule(
|
||||
idModule: string,
|
||||
idUE: number,
|
||||
idPromo: string,
|
||||
) {
|
||||
if (!confirm("Supprimer ce module de la UE ?")) return;
|
||||
try {
|
||||
const res = await fetch(`/notes/api/ues/${id}`, { method: "DELETE" });
|
||||
const res = await fetch(
|
||||
`/notes/api/ue-modules/${encodeURIComponent(idModule)}/${idUE}/${
|
||||
encodeURIComponent(idPromo)
|
||||
}`,
|
||||
{ method: "DELETE" },
|
||||
);
|
||||
if (!res.ok) throw new Error("Suppression échouée");
|
||||
await load();
|
||||
} catch (e) {
|
||||
@@ -55,68 +99,247 @@ export default function AdminUEs() {
|
||||
}
|
||||
}
|
||||
|
||||
async function addUeModule() {
|
||||
if (!selectedUe || !addModuleId || !addPromoId) {
|
||||
setAddError("Module et Promo sont requis");
|
||||
return;
|
||||
}
|
||||
const coeff = parseFloat(addCoeff);
|
||||
if (isNaN(coeff) || coeff <= 0) {
|
||||
setAddError("Coefficient invalide");
|
||||
return;
|
||||
}
|
||||
setAdding(true);
|
||||
setAddError(null);
|
||||
try {
|
||||
const res = await fetch("/notes/api/ue-modules", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
idModule: addModuleId,
|
||||
idUE: selectedUe.id,
|
||||
idPromo: addPromoId,
|
||||
coeff,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => ({}));
|
||||
throw new Error(body.error ?? "Création échouée");
|
||||
}
|
||||
setAddModuleId("");
|
||||
setAddPromoId("");
|
||||
setAddCoeff("1");
|
||||
await load();
|
||||
} catch (e) {
|
||||
setAddError(e instanceof Error ? e.message : "Erreur");
|
||||
} finally {
|
||||
setAdding(false);
|
||||
}
|
||||
}
|
||||
|
||||
const moduleMap = Object.fromEntries(modules.map((m) => [m.id, m]));
|
||||
|
||||
const selectedUeModules = selectedUe
|
||||
? ueModules.filter((um) => um.idUE === selectedUe.id)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div class="page-content">
|
||||
<h2 class="page-title">Gestion des UEs</h2>
|
||||
<p
|
||||
class="col-dim"
|
||||
style="font-size: 0.78rem; margin: -0.5rem 0 1rem"
|
||||
>
|
||||
UE = Unité d'Enseignement regroupant plusieurs modules
|
||||
</p>
|
||||
|
||||
{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>
|
||||
<div class="ue-split">
|
||||
{/* Left panel – UE list */}
|
||||
<div class="ue-panel-left">
|
||||
<div class="panel-box">
|
||||
<p class="panel-box-title">UEs existantes</p>
|
||||
<div class="form-row" style="margin-bottom: 0.75rem">
|
||||
<input
|
||||
class="form-input"
|
||||
placeholder="Nom de la nouvelle UE…"
|
||||
value={newUeNom}
|
||||
onInput={(e) =>
|
||||
setNewUeNom((e.target as HTMLInputElement).value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && createUE()}
|
||||
style="min-width: 0; flex: 1"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onClick={createUE}
|
||||
disabled={creatingUe}
|
||||
style="width: 100%; justify-content: center; margin-bottom: 0.5rem"
|
||||
>
|
||||
+ Nouvelle UE
|
||||
</button>
|
||||
<div>
|
||||
{ues.map((ue) => (
|
||||
<div
|
||||
key={ue.id}
|
||||
class={`ue-list-item${
|
||||
selectedUe?.id === ue.id ? " active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSelectedUe(ue);
|
||||
setAddError(null);
|
||||
}}
|
||||
>
|
||||
{ue.nom}
|
||||
</div>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{ues.length === 0 && (
|
||||
<p class="state-empty" style="padding: 1rem 0">
|
||||
Aucune UE
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right panel – UE detail */}
|
||||
<div class="ue-panel-right">
|
||||
{selectedUe
|
||||
? (
|
||||
<div class="panel-box">
|
||||
<p class="panel-box-title">{selectedUe.nom}</p>
|
||||
<p style="font-size: 0.78rem; font-weight: var(--font-weight-bold); margin: 0 0 0.5rem">
|
||||
Modules assignés (UE_Module)
|
||||
</p>
|
||||
<div class="data-table-wrap" style="margin-bottom: 1rem">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Module</th>
|
||||
<th>Promo</th>
|
||||
<th>Coeff</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{selectedUeModules.length === 0
|
||||
? (
|
||||
<tr>
|
||||
<td colspan={4} class="state-empty">
|
||||
Aucun module assigné
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
: selectedUeModules.map((um) => {
|
||||
const mod = moduleMap[um.idModule];
|
||||
return (
|
||||
<tr
|
||||
key={`${um.idModule}-${um.idPromo}`}
|
||||
>
|
||||
<td class="col-promo">
|
||||
{mod
|
||||
? `${mod.id} – ${mod.nom}`
|
||||
: um.idModule}
|
||||
</td>
|
||||
<td>
|
||||
<span class="promo-chip">{um.idPromo}</span>
|
||||
</td>
|
||||
<td>{um.coeff}</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-danger"
|
||||
onClick={() =>
|
||||
deleteUeModule(
|
||||
um.idModule,
|
||||
um.idUE,
|
||||
um.idPromo,
|
||||
)}
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p style="font-size: 0.78rem; font-weight: var(--font-weight-bold); margin: 0 0 0.5rem">
|
||||
Ajouter un module à cette UE
|
||||
</p>
|
||||
{addError && (
|
||||
<p class="state-error" style="padding: 0.3rem 0.5rem">
|
||||
{addError}
|
||||
</p>
|
||||
)}
|
||||
<div class="form-row">
|
||||
<select
|
||||
class="filter-select"
|
||||
value={addModuleId}
|
||||
onChange={(e) =>
|
||||
setAddModuleId(
|
||||
(e.target as HTMLSelectElement).value,
|
||||
)}
|
||||
style="min-width: 12rem"
|
||||
>
|
||||
<option value="">Module ▾</option>
|
||||
{modules.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.id} – {m.nom}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
class="filter-select"
|
||||
value={addPromoId}
|
||||
onChange={(e) =>
|
||||
setAddPromoId(
|
||||
(e.target as HTMLSelectElement).value,
|
||||
)}
|
||||
style="min-width: 9rem"
|
||||
>
|
||||
<option value="">Promo ▾</option>
|
||||
{promos.map((p) => (
|
||||
<option key={p.id} value={p.id}>{p.id}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
type="number"
|
||||
class="form-input"
|
||||
placeholder="Coeff"
|
||||
value={addCoeff}
|
||||
min="0.1"
|
||||
step="0.5"
|
||||
onInput={(e) =>
|
||||
setAddCoeff((e.target as HTMLInputElement).value)}
|
||||
style="min-width: 5rem; max-width: 6rem"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onClick={addUeModule}
|
||||
disabled={adding}
|
||||
>
|
||||
{adding ? "…" : "+ Ajouter"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<div class="panel-box">
|
||||
<p class="state-empty" style="padding: 2rem 0">
|
||||
Sélectionnez une UE pour voir ses modules
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,20 +1,42 @@
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
type Promotion = { id: string; annee: string | null };
|
||||
type Student = { numEtud: number; idPromo: string };
|
||||
|
||||
function parsePromo(id: string) {
|
||||
const m = id.match(/^(\d+A)(FISE|FISA)(.+)$/);
|
||||
if (!m) return { annee: id, filiere: "?", anneeSco: "?" };
|
||||
return { annee: m[1], filiere: m[2], anneeSco: m[3] };
|
||||
}
|
||||
|
||||
const ANNEES = ["3A", "4A", "5A"];
|
||||
const FILIERES = ["FISE", "FISA"];
|
||||
|
||||
export default function AdminPromotions() {
|
||||
const [promos, setPromos] = useState<Promotion[]>([]);
|
||||
const [students, setStudents] = useState<Student[]>([]);
|
||||
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);
|
||||
|
||||
// PromoBuilder state
|
||||
const [selectedAnnee, setSelectedAnnee] = useState("4A");
|
||||
const [selectedFiliere, setSelectedFiliere] = useState("FISE");
|
||||
const [anneeSco, setAnneeSco] = useState("");
|
||||
|
||||
const generatedId = anneeSco.trim()
|
||||
? `${selectedAnnee}${selectedFiliere}${anneeSco.trim()}`
|
||||
: "";
|
||||
|
||||
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());
|
||||
const [pRes, sRes] = await Promise.all([
|
||||
fetch("/students/api/promotions"),
|
||||
fetch("/students/api/students"),
|
||||
]);
|
||||
if (!pRes.ok) throw new Error("Impossible de charger les promotions");
|
||||
setPromos(await pRes.json());
|
||||
if (sRes.ok) setStudents(await sRes.json());
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
} finally {
|
||||
@@ -27,23 +49,22 @@ export default function AdminPromotions() {
|
||||
}, []);
|
||||
|
||||
async function createPromo() {
|
||||
if (!newId.trim()) return;
|
||||
if (!generatedId) 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,
|
||||
idPromo: generatedId,
|
||||
annee: selectedAnnee,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => ({}));
|
||||
throw new Error(body.error ?? "Création échouée");
|
||||
}
|
||||
setNewId("");
|
||||
setNewAnnee("");
|
||||
setAnneeSco("");
|
||||
await load();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
@@ -57,9 +78,7 @@ export default function AdminPromotions() {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/students/api/promotions/${encodeURIComponent(id)}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
},
|
||||
{ method: "DELETE" },
|
||||
);
|
||||
if (!res.ok) throw new Error("Suppression échouée");
|
||||
await load();
|
||||
@@ -68,36 +87,93 @@ export default function AdminPromotions() {
|
||||
}
|
||||
}
|
||||
|
||||
function studentCount(idPromo: string) {
|
||||
return students.filter((s) => s.idPromo === idPromo).length;
|
||||
}
|
||||
|
||||
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>
|
||||
{/* PromoBuilder */}
|
||||
<div class="promo-builder">
|
||||
<p class="promo-builder-title">Créer une promotion</p>
|
||||
<p class="promo-builder-subtitle">
|
||||
POST /promotions – idPromo est généré automatiquement
|
||||
</p>
|
||||
|
||||
<div class="promo-builder-row">
|
||||
<div class="promo-builder-field">
|
||||
<label>Année</label>
|
||||
<div class="pill-group">
|
||||
{ANNEES.map((a) => (
|
||||
<button
|
||||
key={a}
|
||||
type="button"
|
||||
class={`pill-btn${selectedAnnee === a ? " active" : ""}`}
|
||||
onClick={() => setSelectedAnnee(a)}
|
||||
>
|
||||
{a}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="promo-builder-field">
|
||||
<label>Filière</label>
|
||||
<div class="pill-group">
|
||||
{FILIERES.map((f) => (
|
||||
<button
|
||||
key={f}
|
||||
type="button"
|
||||
class={`pill-btn${selectedFiliere === f ? " active" : ""}`}
|
||||
onClick={() => setSelectedFiliere(f)}
|
||||
>
|
||||
{f}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="promo-builder-field">
|
||||
<label>Année scolaire</label>
|
||||
<input
|
||||
class="form-input"
|
||||
placeholder="ex: 25/26, 24/27…"
|
||||
value={anneeSco}
|
||||
onInput={(e) => setAnneeSco((e.target as HTMLInputElement).value)}
|
||||
style="min-width: 9rem"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem">
|
||||
<span style="font-size: 0.78rem; color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim))">
|
||||
idPromo généré :
|
||||
</span>
|
||||
<span class="promo-id-preview">
|
||||
{generatedId || "—"}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onClick={createPromo}
|
||||
disabled={creating || !generatedId}
|
||||
>
|
||||
{creating ? "…" : "+ Créer la promo"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Existing promotions table */}
|
||||
<p style="font-size: 0.82rem; font-weight: var(--font-weight-bold); margin-bottom: 0.5rem">
|
||||
Promotions existantes
|
||||
</p>
|
||||
|
||||
{loading
|
||||
? <p class="state-loading">Chargement…</p>
|
||||
: (
|
||||
@@ -105,35 +181,51 @@ export default function AdminPromotions() {
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Identifiant</th>
|
||||
<th>idPromo</th>
|
||||
<th>Année</th>
|
||||
<th>Action</th>
|
||||
<th>Filière</th>
|
||||
<th>Année sco.</th>
|
||||
<th>Nb étudiants</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{promos.length === 0
|
||||
? (
|
||||
<tr>
|
||||
<td colspan={3} class="state-empty">
|
||||
<td colspan={6} 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>
|
||||
))}
|
||||
: promos.map((p) => {
|
||||
const parsed = parsePromo(p.id);
|
||||
const count = studentCount(p.id);
|
||||
return (
|
||||
<tr key={p.id}>
|
||||
<td>
|
||||
<span class="promo-chip">{p.id}</span>
|
||||
</td>
|
||||
<td>{parsed.annee}</td>
|
||||
<td>
|
||||
<span class="filiere-chip">{parsed.filiere}</span>
|
||||
</td>
|
||||
<td>{parsed.anneeSco}</td>
|
||||
<td class="col-dim">
|
||||
{count} étudiant{count !== 1 ? "s" : ""}
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-danger"
|
||||
onClick={() => deletePromo(p.id)}
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
import { useEffect, useState } from "preact/hooks";
|
||||
|
||||
type Student = {
|
||||
numEtud: number;
|
||||
nom: string;
|
||||
prenom: string;
|
||||
idPromo: string;
|
||||
};
|
||||
type Promo = { id: string; annee: string };
|
||||
type Module = { id: string; nom: string };
|
||||
|
||||
type Props = { numEtud: number };
|
||||
|
||||
function anneeLabel(idPromo: string): string {
|
||||
const m = idPromo.match(/^(\d+)A/);
|
||||
if (!m) return "";
|
||||
const n = m[1];
|
||||
if (n === "3") return "3ème année";
|
||||
if (n === "4") return "4ème année";
|
||||
if (n === "5") return "5ème année";
|
||||
return `${n}ème année`;
|
||||
}
|
||||
|
||||
export default function EditStudents({ numEtud }: Props) {
|
||||
const [student, setStudent] = useState<Student | null>(null);
|
||||
const [promos, setPromos] = useState<Promo[]>([]);
|
||||
const [_modules, setModules] = useState<Module[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [saveMsg, setSaveMsg] = useState<string | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Edit form state
|
||||
const [nom, setNom] = useState("");
|
||||
const [prenom, setPrenom] = useState("");
|
||||
const [idPromo, setIdPromo] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
async function load() {
|
||||
try {
|
||||
const [sRes, pRes, mRes] = await Promise.all([
|
||||
fetch(`/students/api/students/${numEtud}`),
|
||||
fetch("/students/api/promotions"),
|
||||
fetch("/admin/api/modules"),
|
||||
]);
|
||||
if (!sRes.ok) throw new Error("Élève introuvable");
|
||||
const s: Student = await sRes.json();
|
||||
setStudent(s);
|
||||
setNom(s.nom);
|
||||
setPrenom(s.prenom);
|
||||
setIdPromo(s.idPromo);
|
||||
if (pRes.ok) setPromos(await pRes.json());
|
||||
if (mRes.ok) setModules(await mRes.json());
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
load();
|
||||
}, [numEtud]);
|
||||
|
||||
async function saveInfos() {
|
||||
if (!student) return;
|
||||
setSaving(true);
|
||||
setSaveMsg(null);
|
||||
try {
|
||||
const res = await fetch(`/students/api/students/${numEtud}`, {
|
||||
method: "PUT",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
nom: nom.trim(),
|
||||
prenom: prenom.trim(),
|
||||
idPromo,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) throw new Error("Modification échouée");
|
||||
const updated: Student = await res.json();
|
||||
setStudent(updated);
|
||||
setSaveMsg("Informations enregistrées.");
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteStudent() {
|
||||
if (!confirm(`Supprimer définitivement 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");
|
||||
globalThis.location.href = "/students/consult";
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Erreur");
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div class="page-content">
|
||||
<p class="state-loading">Chargement…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error && !student) {
|
||||
return (
|
||||
<div class="page-content">
|
||||
<p class="state-error">{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!student) return null;
|
||||
|
||||
return (
|
||||
<div class="page-content">
|
||||
<a
|
||||
class="back-link"
|
||||
href="/students/consult"
|
||||
f-partial="/students/partials/consult"
|
||||
>
|
||||
← Retour à la liste
|
||||
</a>
|
||||
|
||||
<h2 class="page-title" style="border-bottom: none; margin-bottom: 0.5rem">
|
||||
Édition – {student.prenom} {student.nom}
|
||||
</h2>
|
||||
|
||||
{/* Info bar */}
|
||||
<div class="info-bar">
|
||||
<span class="numEtud-chip">{student.numEtud}</span>
|
||||
<span>{student.idPromo}</span>
|
||||
<span class="col-dim">{anneeLabel(student.idPromo)}</span>
|
||||
</div>
|
||||
|
||||
{error && <p class="state-error">{error}</p>}
|
||||
{saveMsg && (
|
||||
<p style="font-size: 0.82rem; color: light-dark(var(--light-accent-color), var(--dark-accent-color)); margin-bottom: 0.5rem">
|
||||
{saveMsg}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Section 1: Informations générales */}
|
||||
<div class="edit-section">
|
||||
<p class="edit-section-title">Informations générales</p>
|
||||
<p class="edit-section-subtitle">PUT /students/{"{numEtud}"}</p>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-field">
|
||||
<label>Nom</label>
|
||||
<input
|
||||
class="form-input"
|
||||
value={nom}
|
||||
onInput={(e) => setNom((e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>Prénom</label>
|
||||
<input
|
||||
class="form-input"
|
||||
value={prenom}
|
||||
onInput={(e) => setPrenom((e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>N° Étudiant</label>
|
||||
<input
|
||||
class="form-input"
|
||||
value={student.numEtud}
|
||||
disabled
|
||||
style="opacity: 0.6"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>Promo</label>
|
||||
<select
|
||||
class="filter-select"
|
||||
value={idPromo}
|
||||
onChange={(e) =>
|
||||
setIdPromo((e.target as HTMLSelectElement).value)}
|
||||
style="min-width: 0"
|
||||
>
|
||||
{promos.map((p) => <option key={p.id} value={p.id}>{p.id}
|
||||
</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 0.5rem; justify-content: space-between; flex-wrap: wrap">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onClick={saveInfos}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? "…" : "Enregistrer infos"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-danger"
|
||||
onClick={deleteStudent}
|
||||
>
|
||||
Supprimer l'élève
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 2: Spécialisations */}
|
||||
<div class="edit-section">
|
||||
<p class="edit-section-title">Spécialisations</p>
|
||||
<p class="edit-section-subtitle">
|
||||
GET·POST·DELETE /spe5a – plusieurs modules possibles
|
||||
</p>
|
||||
<p
|
||||
class="state-empty"
|
||||
style="padding: 1rem 0; text-align: left"
|
||||
>
|
||||
Fonctionnalité non disponible (endpoint non implémenté).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Section 3: Notes lecture seule */}
|
||||
<div class="edit-section">
|
||||
<p class="edit-section-title">Notes (lecture seule)</p>
|
||||
<p class="edit-section-subtitle">
|
||||
GET /students/{"{numEtud}"}/notes – voir récap complet
|
||||
</p>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap">
|
||||
<span class="col-dim" style="font-size: 0.82rem">
|
||||
Voir le récap complet des notes et moyennes de cet étudiant →
|
||||
</span>
|
||||
<a
|
||||
class="btn btn-secondary"
|
||||
href={`/notes/recap/${numEtud}`}
|
||||
f-client-nav={false}
|
||||
>
|
||||
Récap notes
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import { FreshContext } from "$fresh/server.ts";
|
||||
import { AuthenticatedState } from "$root/defaults/interfaces.ts";
|
||||
import EditStudents from "../(_islands)/EditStudents.tsx";
|
||||
|
||||
// deno-lint-ignore require-await
|
||||
export default async function EditPage(
|
||||
_request: Request,
|
||||
context: FreshContext<AuthenticatedState>,
|
||||
) {
|
||||
const numEtud = Number(context.params.numEtud);
|
||||
return <EditStudents numEtud={numEtud} />;
|
||||
}
|
||||
@@ -391,3 +391,412 @@
|
||||
margin-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------
|
||||
Chips: perm, role, promo, module
|
||||
------------------------------------------------------- */
|
||||
|
||||
.perm-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.1rem 0.45rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid
|
||||
light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
color: light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
font-size: 0.68rem;
|
||||
font-family: monospace;
|
||||
margin: 0.1rem;
|
||||
}
|
||||
|
||||
.role-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid
|
||||
light-dark(var(--light-foreground-dimmer), var(--dark-foreground-dimmer));
|
||||
color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
|
||||
font-size: 0.72rem;
|
||||
margin: 0.1rem;
|
||||
}
|
||||
|
||||
.promo-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #b8820a;
|
||||
color: #d4a017;
|
||||
font-size: 0.72rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.filiere-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid
|
||||
light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
color: light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
font-size: 0.72rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.module-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid
|
||||
light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
color: light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
font-size: 0.7rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.numEtud-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid
|
||||
light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
|
||||
font-size: 0.72rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------
|
||||
Permission toggle cards (role management)
|
||||
------------------------------------------------------- */
|
||||
|
||||
.perm-toggle-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.perm-toggle-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.55rem 0.75rem;
|
||||
background: light-dark(white, #141228);
|
||||
border: 1px solid
|
||||
light-dark(var(--light-foreground-dimmer), var(--dark-foreground-dimmer));
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.perm-toggle-card.active {
|
||||
border-color: light-dark(
|
||||
var(--light-accent-color),
|
||||
var(--dark-accent-color)
|
||||
);
|
||||
background: light-dark(#f0fff4, #0d1f12);
|
||||
}
|
||||
|
||||
.perm-toggle-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.perm-toggle-id {
|
||||
font-size: 0.7rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-family: monospace;
|
||||
color: light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
}
|
||||
|
||||
.perm-toggle-nom {
|
||||
font-size: 0.78rem;
|
||||
color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
|
||||
}
|
||||
|
||||
/* Simple toggle switch */
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 2.4rem;
|
||||
height: 1.3rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: light-dark(#ccc, #444);
|
||||
border-radius: 1rem;
|
||||
transition: background 150ms;
|
||||
}
|
||||
|
||||
.toggle-slider::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
left: 0.15rem;
|
||||
top: 0.15rem;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 150ms;
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .toggle-slider {
|
||||
background: light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .toggle-slider::before {
|
||||
transform: translateX(1.1rem);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------
|
||||
UE split layout
|
||||
------------------------------------------------------- */
|
||||
|
||||
.ue-split {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ue-panel-left {
|
||||
width: 270px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ue-panel-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.panel-box {
|
||||
background: light-dark(white, #141228);
|
||||
border: 1px solid
|
||||
light-dark(var(--light-foreground-dimmer), var(--dark-foreground-dimmer));
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.panel-box-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin: 0 0 0.6rem;
|
||||
}
|
||||
|
||||
.ue-list-item {
|
||||
padding: 0.45rem 0.6rem;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
font-size: 0.82rem;
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: 0.2rem;
|
||||
color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
|
||||
}
|
||||
|
||||
.ue-list-item:hover {
|
||||
background: light-dark(#f0efff, #1a172d);
|
||||
color: light-dark(var(--light-foreground), var(--dark-foreground));
|
||||
}
|
||||
|
||||
.ue-list-item.active {
|
||||
background: light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
color: light-dark(
|
||||
var(--light-background-color),
|
||||
var(--dark-background-color)
|
||||
);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------
|
||||
Pill buttons (PromoBuilder)
|
||||
------------------------------------------------------- */
|
||||
|
||||
.pill-group {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pill-btn {
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
border: 1px solid
|
||||
light-dark(var(--light-foreground-dimmer), var(--dark-foreground-dimmer));
|
||||
background: transparent;
|
||||
color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
|
||||
font-size: 0.82rem;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pill-btn::before {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
.pill-btn.active {
|
||||
border-color: light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
background: light-dark(
|
||||
var(--light-accent-color),
|
||||
var(--dark-accent-color)
|
||||
);
|
||||
color: light-dark(
|
||||
var(--light-background-color),
|
||||
var(--dark-background-color)
|
||||
);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
/* PromoBuilder box */
|
||||
.promo-builder {
|
||||
background: light-dark(white, #141228);
|
||||
border: 1px solid
|
||||
light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.promo-builder-title {
|
||||
font-size: 0.85rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin: 0 0 0.15rem;
|
||||
}
|
||||
|
||||
.promo-builder-subtitle {
|
||||
font-size: 0.72rem;
|
||||
color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
|
||||
font-family: monospace;
|
||||
margin: 0 0 0.85rem;
|
||||
}
|
||||
|
||||
.promo-builder-row {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.promo-builder-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.promo-builder-field label {
|
||||
font-size: 0.72rem;
|
||||
color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
|
||||
}
|
||||
|
||||
.promo-id-preview {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border: 1px solid
|
||||
light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
border-radius: 3px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
min-width: 10rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------
|
||||
Edit student sections
|
||||
------------------------------------------------------- */
|
||||
|
||||
.edit-section {
|
||||
background: light-dark(white, #141228);
|
||||
border: 1px solid
|
||||
light-dark(var(--light-foreground-dimmer), var(--dark-foreground-dimmer));
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.edit-section-title {
|
||||
font-size: 0.88rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin: 0 0 0.15rem;
|
||||
}
|
||||
|
||||
.edit-section-subtitle {
|
||||
font-size: 0.7rem;
|
||||
color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
|
||||
font-family: monospace;
|
||||
margin: 0 0 0.8rem;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
font-size: 0.7rem;
|
||||
color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
|
||||
}
|
||||
|
||||
.info-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: light-dark(white, #141228);
|
||||
border: 1px solid
|
||||
light-dark(var(--light-foreground-dimmer), var(--dark-foreground-dimmer));
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.8rem;
|
||||
color: light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
text-decoration: none;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Info note box */
|
||||
.info-note {
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid
|
||||
light-dark(var(--light-accent-color), var(--dark-accent-color));
|
||||
border-radius: 4px;
|
||||
background: light-dark(#f0fff4, #0a1a10);
|
||||
margin-top: 1.5rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.info-note-dim {
|
||||
font-size: 0.7rem;
|
||||
color: light-dark(var(--light-foreground-dim), var(--dark-foreground-dim));
|
||||
font-family: monospace;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user