Numbers and dates

Task: take an amount, a count and a date, and do arithmetic with them without converting anything by hand.

# Recipe: numbers and dates arrive checked and converted, not as text.
paths:
  components: ./components
  migrations: ./migrations

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

CREATE TABLE expenses (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    amount REAL NOT NULL,
    people INTEGER NOT NULL,
    spent_on DATE NOT NULL
);

A form sends text. type="decimal" and type="integer" make it a number before the action runs, so amount / people works. min and max are checked on that number. type="date" takes YYYY-MM-DD and a day that exists, and keeps it as text, ready for the database.

<q:component name="Expenses">
  <q:action name="split" method="POST">
    <!-- decimal and integer arrive as numbers, date as a checked date:
         the arithmetic below needs no conversion. -->
    <q:param name="amount" type="decimal" required="true" min="0.01" max="10000" />
    <q:param name="people" type="integer" required="true" min="1" max="50" />
    <q:param name="spent_on" type="date" required="true" />
    <q:query name="saved" datasource="db">
      INSERT INTO expenses (amount, people, spent_on) VALUES (:amount, :people, :spent_on)
      <q:param name="amount" value="{amount}" type="decimal" />
      <q:param name="people" value="{people}" type="integer" />
      <q:param name="spent_on" value="{spent_on}" type="string" />
    </q:query>
    <q:redirect url="/" flash="{amount} on {spent_on}: {round(amount / people, 2)} each." />
  </q:action>

  <ui:window title="Split an expense">
    <q:if condition="flash">
      <ui:alert variant="{flashType == 'error' and 'danger' or 'success'}">{flash}</ui:alert>
    </q:if>
    <!-- The form gets type="number" (with min and max) and type="date". -->
    <ui:form on-submit="split" submit="Split">
      <ui:formitem label="Amount"><ui:input bind="amount" /></ui:formitem>
      <ui:formitem label="People"><ui:input bind="people" /></ui:formitem>
      <ui:formitem label="Date"><ui:input bind="spent_on" /></ui:formitem>
    </ui:form>
  </ui:window>
</q:component>

The form gets type="number" with the same min and max, and type="date", so the browser checks first. The tests post straight to the server, as a script would:

<q:test name="the numbers arrive as numbers" page="/">
  <test:submit action="split" amount="100" people="3" spent_on="2026-09-20" />
  <test:expect redirect="/" flash="100.0 on 2026-09-20: 33.33 each." />
  <test:expect table="expenses" count="1" where="amount = 100 AND people = 3 AND spent_on = '2026-09-20'" />
</q:test>

<q:test name="text where a number goes is refused" page="/">
  <test:submit action="split" amount="ten" people="3" spent_on="2026-09-20" />
  <test:expect error="amount" message="Must be a number, got 'ten'" />
</q:test>

<q:test name="min and max hold" page="/">
  <test:submit action="split" amount="0" people="51" spent_on="2026-09-20" />
  <test:expect error="amount" message="Must be at least 0.01 (got 0.0)" />
  <test:expect error="people" message="Must be at most 50 (got 51)" />
</q:test>

<q:test name="a date that does not exist is refused" page="/">
  <test:submit action="split" amount="10" people="2" spent_on="2026-02-30" />
  <test:expect error="spent_on" message="Must be a date (YYYY-MM-DD), got '2026-02-30'" />
  <test:expect table="expenses" count="0" />
</q:test>

tests/split.test.q
  PASS  the numbers arrive as numbers
  PASS  text where a number goes is refused
  PASS  min and max hold
  PASS  a date that does not exist is refused
4 passed, 0 failed

See ACT-2 and UI-9.