@mostajs/crud-ui

Panneau CRUD générique (rendu HTML-string, zéro dépendance) — spec déclaratif + lignes → formulaire + table + actions.

Auteur : Dr Hamid MADANI [email protected] · Licence : AGPL-3.0-or-later · Membre de mosta-ui-html-stack.

Vue pure composant @mostajs/app-shell-ui : l'app charge les données et fournit un spec ; crud-ui assemble le HTML (formulaire de création + table avec lien détail + boutons d'action POST). Aucun accès données, aucun effet de bord. Extrait du panel() de l'app Hadhinat (incubator/app/server.mjs).

Installation

npm install @mostajs/crud-ui @mostajs/app-shell-ui

Usage

import { page } from '@mostajs/app-shell-ui';
import { panel } from '@mostajs/crud-ui';

const rows = await app.incubator.companies.list();   // données chargées par l'app

const body = panel({
  title: 'Entreprises', back: { href: '/', label: '← Architecture' },
  rows, routeBase: '/m/companies', detail: true,
  actions: [{ id: 'advance', label: 'Avancer ▸', show: (r) => r._status !== 'graduated' }],
  create: { fields: [{ name: 'legalName', label: 'Raison sociale', required: 1 }] },
});

const html = page({ title: 'Entreprises', brand: '🏢 Hadhinat', body });

Génère : formulaire POST /m/companies/create, table avec lien détail GET /m/companies/<id>, boutons POST /m/companies/act/<id> (filtrés par show(row)).

API

| Fonction | Rôle | |---|---| | panel({title, sub, back, note, rows, cols, hidden, routeBase, detail, actions, create, extra, empty}) | Corps du panneau (à enrober via app-shell-ui.page()) | | detailLink(href, label?) · actionForm(routeBase, action, row) · actionsCell(routeBase, actions, row) | Helpers réutilisables |

• detail : true → lien routeBase/<id> ; ou (row)=>href. actions[].show(row) filtre les boutons. Sans create/actions → table en lecture seule.
• create.fields au format app-shell-ui form (l'app résout les options dynamiques en amont).

Sécurité : valeurs/route/labels échappés (via app-shell-ui). note/extra/create.extra = HTML brut (responsabilité de l'appelant).

Tests & exemple

npm test         # 5 tests @mostajs/mjs-unit
npm run example  # panneau complet → examples/out.html

Voir docs/00-PROPOSITION-PLAN-CRUD-UI-20062026.md (lot UI-2).