Several forms on one page

Task: add, remove and empty from one page, each with its own action.

# Recipe: several forms on one page, each posting to its own action.
paths:
  components: ./components
  migrations: ./migrations

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

CREATE TABLE cart (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    item TEXT NOT NULL,
    quantity INTEGER NOT NULL
);

INSERT INTO cart (item, quantity) VALUES ('Coffee', 1), ('Bread', 2);

Each ui:form on-submit and each ui:button on-click sends the name of its action in a field called action; the page runs that action and no other. with="id={cart.id}" sends the row's id with the button.

<q:component name="Cart">
  <!-- Three actions on one page. Each form (and each button) sends the name
       of its action in the field "action"; the page runs that one only. -->
  <q:action name="add" method="POST">
    <q:param name="item" required="true" maxlength="60" />
    <q:param name="quantity" type="integer" min="1" max="99" default="1" />
    <q:query name="added" datasource="db">
      INSERT INTO cart (item, quantity) VALUES (:item, :quantity)
      <q:param name="item" value="{item}" type="string" />
      <q:param name="quantity" value="{quantity}" type="integer" />
    </q:query>
    <q:redirect url="/" flash="Added {quantity} × {item}." />
  </q:action>

  <q:action name="remove" method="POST">
    <q:param name="id" type="integer" required="true" />
    <q:query name="removed" datasource="db">
      DELETE FROM cart WHERE id = :id
      <q:param name="id" value="{id}" type="integer" />
    </q:query>
    <q:redirect url="/" flash="Removed." />
  </q:action>

  <q:action name="empty" method="POST">
    <q:query name="emptied" datasource="db">DELETE FROM cart</q:query>
    <q:redirect url="/" flash="The cart is empty." />
  </q:action>

  <q:query name="cart" datasource="db">
    SELECT id, item, quantity FROM cart ORDER BY id
  </q:query>

  <ui:window title="Cart">
    <q:if condition="flash">
      <ui:alert variant="{flashType == 'error' and 'danger' or 'success'}">{flash}</ui:alert>
    </q:if>
    <ui:form on-submit="add">
      <ui:hbox gap="sm">
        <ui:input bind="item" placeholder="Item" grow="true" />
        <ui:input bind="quantity" width="80" />
        <ui:button variant="primary">Add</ui:button>
      </ui:hbox>
    </ui:form>
    <q:loop query="cart">
      <ui:hbox gap="sm" align="center">
        <ui:text>{cart.quantity} × {cart.item}</ui:text>
        <!-- with= sends the row's id along with the action's name. -->
        <ui:button on-click="remove" with="id={cart.id}">Remove</ui:button>
      </ui:hbox>
    </q:loop>
    <ui:button on-click="empty" variant="danger">Empty the cart</ui:button>
  </ui:window>
</q:component>

On a page with more than one action, a post whose action is missing or names none of them answers 400 and lists the actions there are. Nothing runs in its place, as the last test checks:

<q:test name="each form runs its own action" page="/">
  <test:submit action="add" item="Milk" quantity="3" />
  <test:expect flash="Added 3 × Milk." />
  <test:submit action="remove" id="1" />
  <test:expect flash="Removed." />
  <test:expect table="cart" count="2" />
  <test:expect table="cart" count="0" where="item = 'Coffee'" />
</q:test>

<q:test name="the button with no fields empties the cart" page="/">
  <test:submit action="empty" />
  <test:expect redirect="/" flash="The cart is empty." />
  <test:expect table="cart" count="0" />
</q:test>

<q:test name="a post that names no action of the page is refused" page="/">
  <test:submit action="checkout" />
  <test:expect status="400" />
  <test:expect text="No q:action named 'checkout' on this page. Available: add, remove, empty." />
  <test:expect table="cart" count="2" />
</q:test>

tests/cart.test.q
  PASS  each form runs its own action
  PASS  the button with no fields empties the cart
  PASS  a post that names no action of the page is refused
3 passed, 0 failed

See ACT-5.