A table you edit in place

Task: let people change a value in a table without opening an edit page.

# 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" makes each cell a small form that saves one column of one row. The table's schema is the rule: shelf must be A, B or C because of its CHECK, and a refused value comes back as an error flash. A column with edit="false" is shown, not edited, and a post that tries anyway answers 400. sort="true" puts links on the headers.

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

A test edits a cell the way the browser does, with the __edit action:

<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

See UI-5 and UI-13.