Un formulario a partir de la tabla

Traducción automática

Esta página se tradujo automáticamente del inglés y todavía no la revisó un hablante nativo; las correcciones son bienvenidas en GitHub. Si algo no coincide, vale el original en inglés.

Tarea: un formulario para una tabla sin volver a escribir cada campo y cada regla.

# Recipe: the table's schema gives the action its rules and the form its fields.
paths:
  components: ./components
  migrations: ./migrations

datasources:
  db:
    driver: sqlite
    database: ./data/library.db

El esquema ya dice lo que necesita un libro:

CREATE TABLE authors (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL
);

CREATE TABLE books (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title VARCHAR(120) NOT NULL,
    author_id INTEGER NOT NULL REFERENCES authors(id),
    genre TEXT NOT NULL CHECK (genre IN ('novel', 'poetry', 'essay')),
    pages INTEGER,
    lent BOOLEAN NOT NULL DEFAULT 0
);

INSERT INTO authors (name) VALUES ('Clarice Lispector'), ('Machado de Assis');

<q:action table="books" datasource="db"> lo lee y hace un q:param de cada columna excepto la clave, en el orden de la tabla:

Columna	Se convierte en
title VARCHAR(120) NOT NULL	obligatorio, de 120 caracteres como máximo
author_id ... REFERENCES authors(id)	un entero que debe nombrar a un autor existente
genre ... CHECK (genre IN (...))	uno de los tres
pages INTEGER (acepta NULL)	un entero; si se deja en blanco, llega a la acción como None
lent BOOLEAN	una casilla

Un ui:form sin campos propios dibuja uno por parámetro, con la etiqueta tomada del nombre (author_id se convierte en "Author"). El campo del autor es una lista con los nombres de los autores. null="true" en el parámetro pages de la consulta guarda un valor en blanco como NULL.

<q:component name="Books">
  <!-- No q:param: each column but the key becomes one, with the rules the
       schema gives it (UI-10). NOT NULL is required, VARCHAR(120) a
       maxlength, the CHECK a list, the REFERENCES a row that must exist. -->
  <q:action name="add" method="POST" table="books" datasource="db">
    <q:query name="added" datasource="db">
      INSERT INTO books (title, author_id, genre, pages, lent)
      VALUES (:title, :author_id, :genre, :pages, :lent)
      <q:param name="title" value="{title}" type="string" />
      <q:param name="author_id" value="{author_id}" type="integer" />
      <q:param name="genre" value="{genre}" type="string" />
      <q:param name="pages" value="{pages}" type="integer" null="true" />
      <q:param name="lent" value="{lent}" type="boolean" />
    </q:query>
    <q:redirect url="/" flash="Added: {title}" />
  </q:action>

  <q:query name="books" datasource="db">
    SELECT b.title, a.name AS author, b.genre FROM books b JOIN authors a ON a.id = b.author_id
    ORDER BY b.id
  </q:query>

  <ui:window title="Library">
    <q:if condition="flash">
      <ui:alert variant="{flashType == 'error' and 'danger' or 'success'}">{flash}</ui:alert>
    </q:if>
    <!-- A form with no fields draws one per param: a list of authors for
         author_id, a list for genre, a box for lent, and the button. -->
    <ui:form on-submit="add" submit="Add book" />
    <ui:table source="{books}" />
  </ui:window>
</q:component>

<q:test name="the form draws a field per column, labelled from its name" page="/">
  <test:visit />
  <test:expect text="Title" />
  <test:expect text="Author" />
  <test:expect text="Machado de Assis" />
  <test:expect text="Add book" />
</q:test>

<q:test name="a book is added" page="/">
  <test:submit action="add" title="Dom Casmurro" author_id="2" genre="novel" pages="256" />
  <test:expect redirect="/" flash="Added: Dom Casmurro" />
  <test:expect table="books" count="1" where="title = 'Dom Casmurro' AND pages = 256 AND lent = 0" />
</q:test>

<q:test name="the rules come from the schema" page="/">
  <test:submit action="add" title="" author_id="9" genre="comic" pages="many" />
  <test:expect error="title" message="Required" />
  <test:expect error="author_id" message="Must name an existing row of authors (no id = 9)" />
  <test:expect error="genre" message="Must be one of: novel, poetry, essay" />
  <test:expect error="pages" message="Must be an integer, got 'many'" />
  <test:expect table="books" count="0" />
</q:test>

<q:test name="a blank optional column is stored as NULL" page="/">
  <test:submit action="add" title="A hora da estrela" author_id="1" genre="novel" pages="" />
  <test:expect table="books" count="1" where="pages IS NULL" />
</q:test>

tests/books.test.q
  PASS  the form draws a field per column, labelled from its name
  PASS  a book is added
  PASS  the rules come from the schema
  PASS  a blank optional column is stored as NULL
4 passed, 0 failed

Un q:param escrito en la acción tiene prioridad sobre el del esquema, y columns="a,b" deja solo esas columnas. Ver UI-10.