ascua-scaffold 0.1.0 → 0.2.0

package/README.md

@@ -37,6 +37,8 @@ src/resources/products.ts       el esquema del formulario, sus campos y las conv
 src/routes/products/index.ts    /products, de 50 en 50
 src/routes/products/new.ts      /products/new
 src/routes/products/[id].ts     /products/:id, editar y borrar (?/delete)
+src/routes/products/grid.ts     /products/grid, todas las filas editables a la vez
+src/resources/grid.ts           leer lo que manda una grilla (uno para todo el sitio)
 src/pool.ts                     el pool, con las migraciones aplicadas una vez (si no existe)
 ```
 
@@ -66,6 +68,21 @@ obligatoria y no tiene `DEFAULT`, el comando lo dice y no genera nada.
 Lo generado es tuyo: no se vuelve a generar. Con `--force` se reescribe
 encima.
 
+## La grilla
+
+`/products/grid` es la página entera editable, como una DataWindow de
+PowerBuilder: una fila por registro y una celda por campo, de 50 en 50. Es
+un `<form>` de HTML, así que también funciona sin JavaScript.
+
+- Cada fila lleva los valores con que se mostró: al guardar, solo se
+  escriben las filas que cambiaron.
+- Cada fila cambiada se valida con el mismo esquema del formulario
+  (`ProductForm`) y se guardan todas en una sola transacción
+  (`transaction()` de brasa): si una falla, no se escribe ninguna, y el
+  error aparece en su celda.
+- Un `UNIQUE` repetido vuelve con un 409 y el error bajo la celda de esa
+  fila.
+
 ## Requisitos
 
 - Un sitio con servidor: `ascua({ site: { mode: "server" } })` en

package/generate.js

@@ -426,7 +426,7 @@ export default function ${n.plural}({ data }: { data: Awaited<ReturnType<typeof
   return view\`
     <section>
       <h1>${titulo}</h1>
-      <p><a href="${base}/new">New ${uno}</a></p>
+      <p><a href="${base}/new">New ${uno}</a> · <a href="${base}/grid">Edit as a grid</a></p>
       <table>
         <thead><tr>${cabeceras}</tr></thead>
         <tbody>
@@ -554,6 +554,217 @@ export default function Edit${n.uno}({ data, form }: { data: Awaited<ReturnType<
   return { index, nuevo, editar };
 }
 
+/** `src/resources/grid.ts`: leer lo que manda una grilla. Uno para todo el sitio. */
+export function ayudaRejilla() {
+  return `// Generated by ascua-scaffold. Yours to edit: it is not generated again.
+//
+// A grid is a plain <form>: one row per record, one field per cell. Each row
+// carries its key (k0, k1…) and the values it was shown with (w0, w1…), so
+// the server only writes the rows that changed. Cell names are c<row>.<column>.
+
+export type FormValues = Partial<Record<string, string | string[]>>;
+export type FormErrors = Partial<Record<string, string>>;
+
+/** A row of the grid: its key, as text, and the values of its fields. */
+export interface GridRow {
+  key: string;
+  values: FormValues;
+}
+
+/** Every row the grid sent, and the ones that changed. */
+export function readGrid(formData: FormData, columns: readonly string[]): { rows: GridRow[]; changed: GridRow[] } {
+  const rows: GridRow[] = [];
+  const changed: GridRow[] = [];
+  for (let i = 0; formData.has(\`k\${i}\`); i++) {
+    const key = String(formData.get(\`k\${i}\`));
+    const values: FormValues = {};
+    // An unchecked checkbox sends nothing, and stays missing: field.checkbox()
+    // takes any value that arrived, even "", as checked.
+    for (const column of columns) {
+      const value = formData.get(\`c\${i}.\${column}\`);
+      if (typeof value === "string") values[column] = value;
+    }
+    let was: FormValues = {};
+    try {
+      was = JSON.parse(String(formData.get(\`w\${i}\`) ?? "{}"));
+    } catch {
+      // Without what it was shown with, the row counts as changed.
+    }
+    rows.push({ key, values });
+    if (columns.some((column) => (was[column] ?? "") !== (values[column] ?? ""))) changed.push({ key, values });
+  }
+  return { rows, changed };
+}
+`;
+}
+
+/** Una celda editable de la grilla, con su error debajo. */
+function celda(c, valoresEnum) {
+  const nombre = `\${\`c\${r.index}.${c.name}\`}`;
+  const v = `r.values${acceso(c.name)}`;
+  const texto = `String(${v} ?? "")`;
+  let html;
+  switch (c.kind) {
+    case "boolean":
+      html = `<input type="checkbox" name=${nombre} prop:checked=\${${v} === "on"}>`;
+      break;
+    case "enum": {
+      const vacia = c.nullable ? `<option value=""></option>` : "";
+      html =
+        `<select name=${nombre}>${vacia}<For each=\${() => ${valoresEnum}} key=\${(v: string) => v} ` +
+        `render=\${(v: string) => view\`<option prop:selected=\${${v} === v}>\${v}</option>\`}/></select>`;
+      break;
+    }
+    case "integer":
+      html = `<input type="number" step="1" name=${nombre} prop:value=\${${texto}}>`;
+      break;
+    case "decimal":
+    case "number":
+      html = `<input type="number" step="any" name=${nombre} prop:value=\${${texto}}>`;
+      break;
+    case "date":
+      html = `<input type="date" name=${nombre} prop:value=\${${texto}}>`;
+      break;
+    case "datetime":
+      html = `<input type="datetime-local" name=${nombre} prop:value=\${${texto}}>`;
+      break;
+    case "time":
+      html = `<input type="time" name=${nombre} prop:value=\${${texto}}>`;
+      break;
+    default:
+      html = `<input name=${nombre} prop:value=\${${texto}}>`;
+  }
+  return `<td>${html}<small class="error">\${r.errors${acceso(c.name)} ?? ""}</small></td>`;
+}
+
+/** Los valores de un enum en el código generado: `<x>Values` o escritos. */
+export function valoresEnumDe(c, enums) {
+  return c.values ? (enums.has(c.sqlType) ? `${camel(c.sqlType)}Values` : JSON.stringify(c.values)) : "[]";
+}
+
+/** `src/routes/<tabla>/grid.ts`: la página entera editable, como una DataWindow. */
+export function rejilla(tabla, a, n, { db, pool, resource, grid, base, enums }) {
+  const { guarda, valor } = claveDeUrl(a);
+  const pk = a.clave.name;
+  const titulo = etiqueta(tabla.name);
+  const forma = `${n.uno}Form`;
+  const params = `${camel(n.uno)}Params`;
+  const values = `${camel(n.uno)}Values`;
+  const importsEnum = [...new Set(a.alEditar.filter((c) => c.kind === "enum" && enums.has(c.sqlType)).map((c) => `${camel(c.sqlType)}Values`))];
+  const columnas = a.alEditar.map((c) => JSON.stringify(c.name)).join(", ");
+  const cabeceras = [pk, ...a.alEditar.map((c) => c.name)].map((c) => `<th>${etiqueta(c)}</th>`).join("");
+  const celdas = a.alEditar.map((c) => celda(c, valoresEnumDe(c, enums))).join("\n               ");
+
+  return `// Generated by ascua-scaffold. Yours to edit: it is not generated again.
+//
+// Every ${singular(tabla.name)} of the page, editable at once. Saving validates each changed
+// row with ${forma} and writes them all in one transaction: if one fails,
+// none is written, and the error shows in its cell.
+import { fail, notFound, redirect, validate, type ActionContext, type LoadContext } from "vite-plugin-ascua/site";
+
+import { ${[...importsEnum, camel(n.list), "transaction", camel(n.update)].join(", ")} } from "${db}";
+import { db } from "${pool}";
+import { readGrid, type FormErrors, type FormValues } from "${grid}";
+import { ${forma}, ${params}, ${values}, duplicate, type ${n.uno}Data } from "${resource}";
+
+const PAGE = 50;
+const COLUMNS = [${columnas}] as const;
+
+export const title = "${titulo}";
+
+/** The key from the form, or a 404 if it cannot be one. */
+function key(id: string) {
+  if (!(${guarda})) throw notFound();
+  return ${valor};
+}
+
+export async function load(_params: Record<string, string>, { url }: LoadContext) {
+  const page = Math.max(1, Math.floor(Number(url.searchParams.get("page"))) || 1);
+  const rows = await ${camel(n.list)}(await db(), { limit: PAGE + 1, offset: (page - 1) * PAGE });
+  return {
+    page,
+    more: rows.length > PAGE,
+    rows: rows.slice(0, PAGE).map((row) => ({ key: String(row${acceso(pk)}), values: ${values}(row) })),
+  };
+}
+
+/** What a failed save sends back: the errors and what was written, by row key. */
+interface Failed {
+  errors: Record<string, FormErrors>;
+  values: Record<string, FormValues>;
+}
+
+export const actions = {
+  async default({ formData, url }: ActionContext) {
+    const { rows, changed } = readGrid(formData, COLUMNS);
+    const values = Object.fromEntries(rows.map((row) => [row.key, row.values]));
+    const errors: Record<string, FormErrors> = {};
+    const valid: { key: string; data: ${n.uno}Data }[] = [];
+    for (const row of changed) {
+      const result = await validate(${forma}, row.values);
+      if (result.ok) valid.push({ key: row.key, data: result.data });
+      else errors[row.key] = result.errors;
+    }
+    if (Object.keys(errors).length) return fail(400, { errors, values } satisfies Failed);
+
+    let current = "";
+    try {
+      await transaction(await db(), async (tx) => {
+        for (const row of valid) {
+          current = row.key;
+          await ${camel(n.update)}(tx, { ...${params}(row.data), ${propiedad(pk)}: key(row.key) });
+        }
+      });
+    } catch (error) {
+      // A repeated UNIQUE value: the error goes under that row's cell.
+      const taken = duplicate(error, new FormData());
+      return fail(409, { errors: { [current]: taken.data.errors }, values } satisfies Failed);
+    }
+    throw redirect(url.pathname + url.search);
+  },
+};
+
+export default function ${n.plural}Grid({ data, form }: { data: Awaited<ReturnType<typeof load>>; form?: Failed }) {
+  const rows = data.rows.map((row, index) => ({
+    index,
+    key: row.key,
+    was: JSON.stringify(row.values),
+    values: form?.values[row.key] ?? row.values,
+    errors: form?.errors[row.key] ?? {},
+  }));
+  type Row = (typeof rows)[number];
+  return view\`
+    <section>
+      <h1>${titulo}</h1>
+      <p><a href="${base}">List</a> · <a href="${base}/new">New ${etiqueta(singular(tabla.name)).toLowerCase()}</a></p>
+      <form method="post">
+        <table class="grid">
+          <thead><tr>${cabeceras}</tr></thead>
+          <tbody>
+            <For each=\${() => rows} key=\${(r: Row) => r.key}
+                 render=\${(r: Row) => view\`<tr>
+               <td><a href=\${\`${base}/\${r.key}\`}>\${r.key}</a><input type="hidden" name=\${\`k\${r.index}\`} value=\${r.key}><input type="hidden" name=\${\`w\${r.index}\`} value=\${r.was}><small class="error">\${r.errors[""] ?? ""}</small></td>
+               ${celdas}
+             </tr>\`}/>
+          </tbody>
+        </table>
+        <button>Save changes</button>
+      </form>
+      <nav>
+        <Show when=\${() => data.page > 1}><a href=\${\`?page=\${data.page - 1}\`}>Previous</a></Show>
+        <Show when=\${() => data.more}><a href=\${\`?page=\${data.page + 1}\`}>Next</a></Show>
+      </nav>
+      <style>
+        .grid input, .grid select { width: 100%; box-sizing: border-box; }
+        .grid input[type="checkbox"] { width: auto; }
+        .grid td { vertical-align: top; }
+        .error { display: block; color: crimson; }
+      </style>
+    </section>\`;
+}
+`;
+}
+
 /** `src/pool.ts`: un pool para todo el servidor, con las migraciones aplicadas una vez. */
 export function piscina({ mysql, migrate, db }) {
   if (mysql) {

package/index.js

@@ -16,7 +16,7 @@ import { createRequire } from "node:module";
 import { dirname, join, relative, resolve } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 
-import { analizar, consultasSql, nombres, piscina, recurso, rutas, ScaffoldError, t } from "./generate.js";
+import { analizar, ayudaRejilla, consultasSql, nombres, piscina, recurso, rejilla, rutas, ScaffoldError, t } from "./generate.js";
 
 const AYUDA = t(
   `Uso: ascua-scaffold <tabla> [opciones]
@@ -27,6 +27,8 @@ Genera, a partir de una tabla de las migraciones de brasa:
   src/routes/<tabla>/index.ts     la lista, paginada
   src/routes/<tabla>/new.ts       el alta
   src/routes/<tabla>/[id].ts      la edición y la baja
+  src/routes/<tabla>/grid.ts      todas las filas editables a la vez
+  src/resources/grid.ts           leer lo que manda una grilla, si no existe
   src/pool.ts                     el pool de la base, si no existe
 
 Opciones:
@@ -41,6 +43,8 @@ Generates, from a table in the brasa migrations:
   src/routes/<table>/index.ts     the list, paginated
   src/routes/<table>/new.ts       creating
   src/routes/<table>/[id].ts      editing and deleting
+  src/routes/<table>/grid.ts      every row editable at once
+  src/resources/grid.ts           reading what a grid sends, if missing
   src/pool.ts                     the database pool, if missing
 
 Options:
@@ -138,6 +142,14 @@ export async function main(argv = process.argv.slice(2)) {
   const propio = join(dirConsultas, `${tabla.name}.sql`);
   const ajenas = salida.queries.filter((x) => !(args.force && resolve(x.file) === propio));
   const repetidas = [n.list, n.get, n.create, n.update, n.delete].filter((q) => ajenas.some((x) => x.name === q));
+  const enPropio = repetidas.filter((q) => salida.queries.some((x) => x.name === q && resolve(x.file) === propio));
+  if (repetidas.length && enPropio.length === repetidas.length) {
+    // Las del ejemplo de `brasa init`, por ejemplo: están en el archivo que se va a escribir.
+    const archivo = relative(process.cwd(), propio);
+    throw new ScaffoldError(
+      t(`${archivo} ya tiene ${repetidas.join(", ")}. Con --force se reemplaza ese archivo`, `${archivo} already has ${repetidas.join(", ")}. Use --force to replace that file`),
+    );
+  }
   if (repetidas.length) {
     throw new ScaffoldError(
       t(`ya hay consultas con estos nombres: ${repetidas.join(", ")}. Quita esas o genera otra tabla`, `queries with these names already exist: ${repetidas.join(", ")}. Remove them or scaffold another table`),
@@ -145,6 +157,9 @@ export async function main(argv = process.argv.slice(2)) {
   }
 
   const carpeta = tabla.name.replace(/_/g, "-").toLowerCase();
+  if (carpeta === "grid") {
+    throw new ScaffoldError(t("una tabla `grid` chocaría con src/resources/grid.ts, que comparten las grillas", "a `grid` table would clash with src/resources/grid.ts, which the grids share"));
+  }
   // Los enums de Postgres tienen su `<x>Values` en el módulo; los de MySQL
   // (`ENUM('a','b')` en la columna), no: sus valores van escritos.
   const enums = new Set(mysql ? [] : tabla.columns.filter((c) => c.kind === "enum").map((c) => c.sqlType));
@@ -155,9 +170,11 @@ export async function main(argv = process.argv.slice(2)) {
     index: join(raiz, "src", "routes", carpeta, "index.ts"),
     nuevo: join(raiz, "src", "routes", carpeta, "new.ts"),
     editar: join(raiz, "src", "routes", carpeta, "[id].ts"),
+    rejilla: join(raiz, "src", "routes", carpeta, "grid.ts"),
     pool: join(raiz, "src", "pool.ts"),
+    ayuda: join(raiz, "src", "resources", "grid.ts"),
   };
-  const existentes = Object.entries(archivos).filter(([k, f]) => k !== "pool" && existsSync(f));
+  const existentes = Object.entries(archivos).filter(([k, f]) => k !== "pool" && k !== "ayuda" && existsSync(f));
   if (existentes.length && !args.force) {
     throw new ScaffoldError(
       t(`ya existen: ${existentes.map(([, f]) => relative(raiz, f)).join(", ")}. Usa --force para reescribirlos`, `already exist: ${existentes.map(([, f]) => relative(raiz, f)).join(", ")}. Use --force to overwrite them`),
@@ -176,6 +193,14 @@ export async function main(argv = process.argv.slice(2)) {
     index: r.index,
     nuevo: r.nuevo,
     editar: r.editar,
+    rejilla: rejilla(tabla, a, n, {
+      db: importar(archivos.rejilla, out),
+      pool: importar(archivos.rejilla, archivos.pool),
+      resource: importar(archivos.rejilla, archivos.recurso),
+      grid: importar(archivos.rejilla, archivos.ayuda),
+      base: `/${carpeta}`,
+      enums,
+    }),
   };
   const escritos = [];
   for (const [k, contenido] of Object.entries(contenidos)) {
@@ -183,6 +208,10 @@ export async function main(argv = process.argv.slice(2)) {
     writeFileSync(archivos[k], contenido);
     escritos.push(archivos[k]);
   }
+  if (!existsSync(archivos.ayuda)) {
+    writeFileSync(archivos.ayuda, ayudaRejilla());
+    escritos.push(archivos.ayuda);
+  }
   if (!existsSync(archivos.pool)) {
     writeFileSync(archivos.pool, piscina({ mysql, migrate: config.migrate, db: importar(archivos.pool, out) }));
     escritos.push(archivos.pool);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ascua-scaffold",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "De una tabla de brasa a un recurso de Ascua: consultas, formulario validado y rutas para listar, crear, editar y borrar.",
   "keywords": ["ascua", "scaffold", "crud", "brasa", "sql", "forms"],
   "homepage": "https://ascua.gitweave.run",