Una tabla que se edita en su lugar

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: dejar que la gente cambie un valor en una tabla sin abrir una página de edición.

# Recipe: a table whose cells are edited in place, with the schema as the rule.
paths:
  components: ./components
  migrations: ./migrations

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

CREATE TABLE items (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name VARCHAR(40) NOT NULL,
    shelf TEXT NOT NULL CHECK (shelf IN ('A', 'B', 'C')),
    quantity INTEGER NOT NULL DEFAULT 0
);

INSERT INTO items (name, shelf, quantity) VALUES ('Bolts', 'A', 120), ('Nuts', 'B', 80), ('Washers', 'A', 45);

edit="items" hace de cada celda un pequeño formulario que guarda una columna de una fila. El esquema de la tabla es la regla: shelf debe ser A, B o C por su CHECK, y un valor rechazado vuelve como un mensaje flash de error. Una columna con edit="false" se muestra, no se edita, y un envío que lo intenta igual responde 400. sort="true" pone enlaces en los encabezados.

<q:component name="Stock">
  <q:query name="items" datasource="db" sortable="true">
    SELECT id, name, shelf, quantity FROM items ORDER BY id
  </q:query>

  <ui:window title="Stock">
    <ui:vbox gap="md" padding="lg">
      <q:if condition="flash">
        <ui:alert variant="{flashType == 'error' and 'danger' or 'success'}">{flash}</ui:alert>
      </q:if>
      <!-- edit="items": each cell is a small form that saves one column of
           one row, checked against the table's schema. No action to write. -->
      <ui:table source="{items}" sort="true" edit="items" datasource="db">
        <ui:column key="name" label="Item" edit="false" />
        <ui:column key="shelf" label="Shelf" />
        <ui:column key="quantity" label="Quantity" align="right" />
      </ui:table>
    </ui:vbox>
  </ui:window>
</q:component>

Una prueba edita una celda como lo hace el navegador, con la acción __edit:

<q:test name="the table shows the rows and the column labels" page="/">
  <test:visit />
  <test:expect text="Item" />
  <test:expect text="Washers" />
</q:test>

<q:test name="a cell edit saves one column of one row" page="/">
  <test:submit action="__edit" __table="items" __key="2" __column="quantity" value="75" />
  <test:expect redirect="/" flash="Saved: quantity" />
  <test:expect table="items" count="1" where="id = 2 AND quantity = 75 AND name = 'Nuts'" />
</q:test>

<q:test name="a value the schema refuses is not saved" page="/">
  <test:submit action="__edit" __table="items" __key="1" __column="shelf" value="Z" />
  <test:expect table="items" count="1" where="id = 1 AND shelf = 'A'" />
  <test:expect var="flashType" value="error" />
  <test:expect flash="Parameter 'value' must be one of: A, B, C" />
</q:test>

<q:test name="a column with edit=false cannot be changed" page="/">
  <test:submit action="__edit" __table="items" __key="1" __column="name" value="Screws" />
  <test:expect status="400" text="items.name is not editable on this page." />
  <test:expect table="items" count="1" where="id = 1 AND name = 'Bolts'" />
</q:test>

<q:test name="a header sorts the rows" page="/">
  <test:visit sort="quantity" dir="asc" />
  <test:expect text="Washers A B C ✓ ✓ Nuts A B C ✓ ✓ Bolts" />
</q:test>

tests/stock.test.q
  PASS  the table shows the rows and the column labels
  PASS  a cell edit saves one column of one row
  PASS  a value the schema refuses is not saved
  PASS  a column with edit=false cannot be changed
  PASS  a header sorts the rows
5 passed, 0 failed

Ver UI-5 y UI-13.