Nicolas
b39105ac27
L'UI par-dessus l'API `/admin/api/tours*`. Nouvelle entrée
`/admin/didacticiels` dans `AdminLayout` (i18n `admin.nav.tours`), route
sous `RequireAdmin`+`AdminLayout` dans `App.tsx`.
`ToursPage.tsx` : liste des scénarios à gauche (nom, état activé/désactivé,
nombre d'étapes) ; à droite l'éditeur du scénario sélectionné —
- renommer, activer/désactiver ;
- éditer la liste d'étapes (route, cible via `<select>` alimenté par
`GET /tours/targets`, titre, contenu), réordonner (↑/↓), ajouter,
retirer ;
- « Enregistrer » → un seul `PATCH /:id` qui remplace tout (name/enabled +
étapes rénumérotées `order` = index), erreurs API affichées telles quelles ;
- « Supprimer le scénario » (confirmation `window.confirm`) ;
- « Nouveau scénario » → formulaire clé + nom → `POST /`.
`admin-client.ts` gagne `getTourScenarios` / `getTourTargets` /
`createTourScenario` / `updateTourScenario` / `deleteTourScenario`.
Tests Cypress (`admin-tours.cy.ts`, 4) : liste (activés + désactivés,
nombre d'étapes) ; édition nom + réordonnancement d'étapes → un seul PATCH
avec la liste complète réordonnée ; création → POST `{key,name}` ;
suppression après confirmation → DELETE. 4/4 en local ; `pnpm build` +
`pnpm lint` verts.
Closes #44
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
import { Activity, GraduationCap, LayoutDashboard, ListChecks, PackageSearch } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { NavLink, Outlet, useNavigate } from "react-router-dom";
|
|
import { useAdminAuth } from "../features/admin/AdminAuthContext";
|
|
import "./AdminLayout.scss";
|
|
|
|
/**
|
|
* One entry in the admin sidebar's nav. `key` maps to `admin.nav.<key>` in
|
|
* the locale file — adding a section is one array entry plus one locale key.
|
|
* Paths are absolute under `/admin` (the admin route group lives inside
|
|
* `apps/web`'s `App.tsx`, mounted at `/admin`).
|
|
*/
|
|
const NAV_ITEMS = [
|
|
{ to: "/admin", key: "dashboard", Icon: LayoutDashboard, end: true },
|
|
{ to: "/admin/monitoring", key: "monitoring", Icon: Activity, end: false },
|
|
{ to: "/admin/corrections", key: "corrections", Icon: ListChecks, end: false },
|
|
{ to: "/admin/catalogue", key: "catalog", Icon: PackageSearch, end: false },
|
|
{ to: "/admin/didacticiels", key: "tours", Icon: GraduationCap, end: false },
|
|
] as const;
|
|
|
|
/**
|
|
* Shell for every authenticated admin page: a fixed sidebar (brand, section
|
|
* nav, the signed-in admin's name + logout) plus a main area rendering the
|
|
* matched child route via `<Outlet />`. Mounted once as the parent of the
|
|
* whole `RequireAdmin`-guarded route group (see `App.tsx`), so `admin` is
|
|
* guaranteed non-null here.
|
|
*/
|
|
export function AdminLayout() {
|
|
const { t } = useTranslation();
|
|
const { admin, logout } = useAdminAuth();
|
|
const navigate = useNavigate();
|
|
const [isLoggingOut, setIsLoggingOut] = useState(false);
|
|
|
|
async function handleLogout() {
|
|
setIsLoggingOut(true);
|
|
try {
|
|
await logout();
|
|
void navigate("/admin/login");
|
|
} catch {
|
|
// Even if the network call failed, the local session state was
|
|
// cleared optimistically enough for the guard to bounce to /login;
|
|
// nothing useful to show the operator here.
|
|
void navigate("/admin/login");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="admin-layout">
|
|
<aside className="admin-sidebar">
|
|
<div className="admin-sidebar__brand">
|
|
batchCooking <span>Admin</span>
|
|
</div>
|
|
|
|
<nav className="admin-sidebar__nav">
|
|
{NAV_ITEMS.map(({ to, key, Icon, end }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={end}
|
|
className={({ isActive }) => (isActive ? "active" : undefined)}
|
|
>
|
|
<Icon size={18} aria-hidden="true" />
|
|
<span>{t(`admin.nav.${key}`)}</span>
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="admin-sidebar__footer">
|
|
<span className="admin-sidebar__who" title={admin?.email}>
|
|
{admin?.name}
|
|
</span>
|
|
<button type="button" onClick={handleLogout} disabled={isLoggingOut}>
|
|
{t("admin.layout.logout")}
|
|
</button>
|
|
<p className="admin-sidebar__version" aria-hidden="true">
|
|
v{__APP_VERSION__}
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<main className="admin-content">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|