Uma tabela editada no lugar

Tradução automática

Esta página foi traduzida automaticamente do inglês e ainda não foi revisada por um falante nativo; correções são bem-vindas no GitHub. Se algo não bater, vale o original em inglês. O código e os resultados são os mesmos do original, importados dos arquivos testados.

Tarefa: deixar as pessoas mudarem um valor numa tabela sem abrir uma página de edição.

yaml

# 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

sql

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" faz de cada célula um pequeno formulário que salva uma coluna de uma linha. O esquema da tabela é a regra: shelf precisa ser A, B ou C por causa do CHECK, e um valor recusado volta como uma mensagem flash de erro. Uma coluna com edit="false" é mostrada, não editada, e um envio que tenta mesmo assim responde 400. sort="true" coloca links nos cabeçalhos.

xml

<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>

Um teste edita uma célula do jeito que o navegador faz, com a ação __edit:

xml

<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>

text

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

Veja UI-5 e UI-13.

Uma tabela editada no lugar ​

Uma tabela editada no lugar