pgkiln 0.44.0 → 0.46.0

package/docs/guide/12-development.md

@@ -114,7 +114,8 @@ src/
     authz.ts               authorization schemes, conditions, visibility (menu requests count as buttons)
     engine.ts              form fetch, validations, processes (conditions, execution chains, queueing background chains; web requests queued by an sql process are made right after it), application processes
     processes.ts           download (file or zip from a query, safe headers), workflow processes, configuration checks of chains
-    logic.ts               computations, branches (page, URL, function returning a URL, another application) and their conditions
+    logic.ts               computations (the page's and (102) the application's), branches (page, URL, function returning a URL, another application) and their conditions
+    shortcuts.ts           (103) "NAME" shortcuts in static content, help texts and confirm messages
     render.ts              page chrome (nav, breadcrumb), dynamic action JSON, theme (the page's nonce'd <style>, light/dark and style switches)
     styles.ts              base styles (BASE_STYLES: Iris, Lavender, Standard; baseStyleOf → html data-style), Theme Roller style variants: fixed lists (fonts, sizes, corners), parseStyle/appStyles checks, the request's
                            style (user choice, default), themeCss() (only hex values and constants reach the CSS)
@@ -153,6 +154,8 @@ src/
     tasks.ts               task list region and task actions (approvals); (094) the vacation rule panel and route
     data-reporter.ts       Data Reporter region (migration 057): sources from the region's config, checkDef (offered columns, whitelists),
                            reportQuery/chartQuery, the list and editor (GET form), save/delete routes (meta.save_data_report)
+    form-designer.ts       Form Designer region (migration 106): sources from the region's config, checkFormDef (offered columns, displays,
+                           actions), forms as cards, a form's rows, a row's form (lost update hash), the designer; row/design/delete routes
     workflows.ts           workflow console region and its actions
     ai.ts                  Generate text with AI: the ai_generate process (config checks, &ITEM. as delimited escaped data,
                            schemas from items, answers into items), aiInputs/aiOutputs for its dynamic action (route in routes.ts)
@@ -208,7 +211,9 @@ src/
     mail.ts                Workspace utilities → Mail services (administrators: providers, write-only secret, allowed senders,
                            applications with From and daily limit, test) and Applications → Activity → Mail (retry, cancel)
     shared.ts              Shared Components and access control
-    designer.ts            page designer: component tree (with computations and branches), layout canvas and gallery, property editor, toolbar
+    designer.ts            page designer: component tree (with computations and branches), layout canvas and gallery, property editor, toolbar;
+                           (sprint 86) GET /builder/apps/:app/pages/:no, /builder/pages/:id redirects browsers there (designerUrl in ui.ts)
+    errors.ts              (sprint 86) the builder's HTML 404 and 500 pages for browsers (wantsHtml, a not-found handler and an onSend hook)
     arrange.ts             page designer layout changes: move, column span, create from the gallery, undo / redo
     sql.ts                 SQL Workshop: the home and SQL commands (templates and drafts to review)
     object-browser.ts      (sprint 75) the Object Browser: objects by type, system objects hidden, a table in tabs, column actions as SQL to review
@@ -240,6 +245,7 @@ src/
     themeroller.ts         Settings → Theme Roller: style variants (add, edit, rename, delete), default style, users may choose
     subscriptions.ts       Shared Components → Subscriptions: subscribe, refresh, unsubscribe, subscribers and publish; the note under a component
     reporter.ts            page designer: Data Reporter settings (sources: table or view, offered columns, labels, masks; sharing)
+    form-designer.ts       page designer: Form Designer settings (designers' scheme; sources: key, actions, offered columns, labels, lists of values)
     workingcopies.ts       Working copies: list and create, compare with differences, merge or refresh with conflict choices, delete
     rest.ts                REST module endpoints list and curl example (Shared Components)
     workflows.ts           workflow versions, diagram and instances (Shared Components)

package/docs/guide/16-files.md

@@ -604,3 +604,26 @@ name.
 The standard PDF fonts cover Western European text; set `PDF_FONT` (and `PDF_FONT_BOLD`) for other
 scripts, as for report PDFs. APEX's Word and Excel templates and outputs have no equivalent: the
 templates here are HTML and the output is PDF.
+
+### Report queries
+
+**Shared Components → Report Queries** (APEX: Report Queries, migration 104) are named queries an
+application prints, without a template: the query's rows as a table.
+
+| Property | Meaning |
+|---|---|
+| `name` | Pages download it with `?doc=NAME` (a document template of that name wins); a button with the action *document* names it |
+| `query` | A SELECT with `:ITEM` binds (the page's session state), run as the application's role; its columns' names are the headings |
+| `format` | `pdf` (with the report layout), `xlsx`, `csv`, `json`, `xml` or `html` |
+| `layout` | A report layout for the PDF; empty: the default layout |
+| `file_name`, `title` | The file's name without extension and the PDF's or HTML file's title (`&ITEM.` allowed); empty: the name, and the description or the name |
+| `authz` | Who may download it, besides access to the page |
+
+```
+/a/sales/3?doc=ORDERS_BY_REGION        the file, with page 3's session state
+```
+
+The files are made like a download process's [data export](06-processing.md#data-export) (Excel and
+PDF hold at most 100,000 rows) and are sent as attachments that a browser never shows as a page
+(`Content-Security-Policy: sandbox`). Signed out, on a public page of an application with sign-in,
+`?doc=` serves only the report queries and document templates of the page's own buttons.

package/docs/guide/18-cli.md

@@ -65,6 +65,10 @@ hr/
     app-items/ai_ename.json
     app-processes/0010-link-user-to-employee.json
     app-processes/0010-link-user-to-employee.code.sql
+    app-computations/0010-ai_region-after_authentication.json   (by sequence, item and point)
+    component-groups/sales_lookups.json
+    report-queries/orders_by_region.json   (the query in .query.sql)
+    shortcuts/delete_confirm_msg.json   (a long value in .value.txt, .html or .sql by its type)
     lovs/jobs.json
     lovs/jobs.query.sql
     report-layouts/hr_directory.json   (a logo as hr_directory.logo.png)

package/examples/hr/hr_61_form_designer.sql

@@ -0,0 +1,80 @@
+-- =====================================================================
+-- HR example, part 61: a Form Designer (docs/guide/04-pages-and-regions.md,
+-- "Form Designer")
+--
+-- Page 45 "Forms": the application's administrators (authorization scheme
+-- ADMIN) build data entry forms on three tables the developer offers in the
+-- region's settings, and publish them for every employee:
+--   - "Departments": hr.dept, add and change rows;
+--   - "Meetings": hr.meeting, add, change and delete rows; its row level
+--     security still applies (an employee changes only their own meetings);
+--   - "Employees": hr.emp, change rows only, with the job and department
+--     as lists of values.
+-- Two published forms are there to start from: "Departments" (a list of
+-- departments with Add and Edit) and "Book a meeting" (no list: the form
+-- only adds rows). Forms are installation data: not part of the export.
+-- =====================================================================
+
+insert into meta.page (app_id, page_no, name, title, parent_page)
+select id, 45, 'Forms', 'Forms', 1 from meta.app where alias = 'hr';
+
+insert into meta.region (page_id, seq, title, type, columns, template, config)
+select p.id, 10, 'Form Designer', 'form_designer', 12, 'standard', $j${
+  "design_authz": "ADMIN",
+  "page_size": 15,
+  "sources": [
+    {"id": "departments", "label": "Departments", "description": "Department names and locations.",
+     "schema": "hr", "table": "dept", "key": "deptno", "insert": true, "update": true, "delete": false,
+     "columns": [{"name": "dname", "label": "Department"}, {"name": "loc", "label": "Location"}]},
+    {"id": "meetings", "label": "Meetings", "description": "Meetings in the planner; employees change only their own.",
+     "schema": "hr", "table": "meeting", "key": "id", "insert": true, "update": true, "delete": true,
+     "columns": [{"name": "title", "label": "Title"}, {"name": "starts_at", "label": "Starts"}, {"name": "ends_at", "label": "Ends"}, {"name": "private", "label": "Private"}]},
+    {"id": "employees", "label": "Employees", "description": "Job, department and salary of employees.",
+     "schema": "hr", "table": "emp", "key": "empno", "insert": false, "update": true, "delete": false,
+     "columns": [{"name": "ename", "label": "Name"}, {"name": "job", "label": "Job", "lov": "LOV:JOBS"}, {"name": "deptno", "label": "Department", "lov": "LOV:DEPARTMENTS"},
+                 {"name": "hiredate", "label": "Hire date"}, {"name": "sal", "label": "Salary"}]}
+  ]}$j$::jsonb
+  from meta.page p join meta.app a on a.id = p.app_id
+ where a.alias = 'hr' and p.page_no = 45;
+
+-- two published forms to start from (forms are installation data: not part of the export)
+insert into meta.user_form (app_id, region_id, name, description, published, definition, created_by, updated_by)
+select a.id, r.id, f.name, f.description, true, f.definition, 'king', 'king'
+  from meta.app a join meta.page p on p.app_id = a.id and p.page_no = 45 join meta.region r on r.page_id = p.id and r.type = 'form_designer',
+       (values
+  ('Departments', 'Add a department or change its name and location.',
+   '{"source": "departments",
+     "fields": [{"column": "dname", "label": "", "help": "", "required": true, "display": "auto", "default": ""},
+                {"column": "loc", "label": "", "help": "The city.", "required": false, "display": "auto", "default": ""}],
+     "list": ["dname", "loc"], "actions": {"insert": true, "update": true, "delete": false}}'::jsonb),
+  ('Book a meeting', 'Put a meeting in the planner.',
+   '{"source": "meetings",
+     "fields": [{"column": "title", "label": "What", "help": "", "required": true, "display": "auto", "default": ""},
+                {"column": "starts_at", "label": "", "help": "", "required": true, "display": "auto", "default": ""},
+                {"column": "ends_at", "label": "", "help": "Leave empty for a meeting without an end.", "required": false, "display": "auto", "default": ""},
+                {"column": "private", "label": "Only visible to me", "help": "", "required": false, "display": "auto", "default": "false"}],
+     "list": [], "actions": {"insert": true, "update": false, "delete": false}}'::jsonb)
+  ) as f (name, description, definition)
+ where a.alias = 'hr';
+
+insert into meta.nav_entry (app_id, parent_id, seq, label, icon, target_page)
+select a.id, n.id, 60, 'Forms', 'file', 45
+  from meta.app a join meta.nav_entry n on n.app_id = a.id and n.label = 'Administration' and n.parent_id is null
+ where a.alias = 'hr';
+
+insert into meta.translation (app_id, language, source, target)
+select a.id, 'nl', t.source, t.target
+  from meta.app a, (values
+  ('Forms', 'Formulieren'),
+  ('Form Designer', 'Formulierbouwer'),
+  ('Department names and locations.', 'Namen en vestigingsplaatsen van afdelingen.'),
+  ('Meetings', 'Vergaderingen'),
+  ('Meetings in the planner; employees change only their own.', 'Vergaderingen in de planner; medewerkers wijzigen alleen hun eigen.'),
+  ('Job, department and salary of employees.', 'Functie, afdeling en salaris van medewerkers.'),
+  ('Title', 'Titel'),
+  ('Starts', 'Begint'),
+  ('Ends', 'Eindigt'),
+  ('Private', 'Privé')
+  ) as t (source, target)
+ where a.alias = 'hr'
+on conflict do nothing;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgkiln",
-  "version": "0.44.0",
+  "version": "0.46.0",
   "description": "Open source low-code, SQL-driven application builder for PostgreSQL, inspired by Oracle APEX",
   "keywords": [
     "postgresql",

package/public/app.css

@@ -1056,6 +1056,20 @@ fieldset.prop-group > legend { font-size: 0.75rem; text-transform: uppercase; le
 .grid-table th.grid-drop-after { box-shadow: inset -3px 0 0 var(--accent); }
 /* copy and paste: a range of selected cells */
 .grid-table td.grid-cell-selected { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
+/* cell navigation mode (APEX): with JavaScript an editable cell reads as text (its formatted value, .grid-text)
+   until it is clicked or Enter / F2 edits it; arrow keys move between cells (app.js) */
+.grid-text { display: none; }
+.js .grid-table td[data-col]:not(.grid-frozen) { position: relative; }
+.js .grid-table tbody td[data-col]:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
+.js .grid-table tbody td[data-col] :is(input:not([type=checkbox]), select) { border-color: transparent; background: transparent; box-shadow: none; }
+.js .grid-table tbody td[data-col] select { appearance: none; }
+.js .grid-table tbody td[data-col]:focus-within :is(input:not([type=checkbox]), select) { border-color: var(--border); background: var(--surface); appearance: auto; }
+.js .grid-table td[data-col] > .grid-text { display: flex; align-items: center; position: absolute; inset: 0; padding: 0 calc(0.85rem + 1px);
+  overflow: hidden; white-space: nowrap; pointer-events: none; }
+.js .grid-table td[data-col] > .grid-text.num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
+.js .grid-table td[data-col]:has(> .grid-text) :is(input, select) { color: transparent; }
+.js .grid-table td[data-col]:focus-within > .grid-text { display: none; }
+.js .grid-table td[data-col]:focus-within :is(input, select) { color: inherit; }
 .grid-columns-form { border-collapse: collapse; font-size: 0.85rem; }
 .grid-columns-form th, .grid-columns-form td { padding: 0.2rem 0.35rem; text-align: left; white-space: nowrap; }
 .grid-columns-form input[type=number] { width: 5.5rem; }
@@ -1138,6 +1152,13 @@ td[data-add]:hover > .cal-add, .cal-add:focus-visible { opacity: 1; }
 .facet { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
 .facet legend { font-weight: 650; font-size: 0.85rem; margin-bottom: 0.3rem; padding: 0; display: flex; gap: 0.5rem; }
 .facet-clear { font-weight: 400; font-size: 0.8rem; }
+.facet:has(> .facet-menu) { position: relative; }
+.facet:has(> .facet-menu) > legend { padding-right: 1.6rem; }
+.facet-menu { position: absolute; top: 0; right: 0; }
+.facet-menu > summary { cursor: pointer; padding: 0 0.35rem; border-radius: 4px; color: var(--muted); }
+.facet-menu > summary:hover, .facet-menu[open] > summary { background: var(--surface-3); color: inherit; }
+.facet-menu .menu-panel { left: auto; right: 0; min-width: 11rem; }
+.facet-menu .menu-links a[aria-current] { font-weight: 650; }
 .facet-value { font-weight: 400; font-size: 0.9rem; }
 /* (sprint 65) a facet's chart of its counts, collapsed under the legend */
 .facet-chart { margin: 0.1rem 0 0.4rem; }
@@ -1216,6 +1237,9 @@ input[type=color] { width: 4rem; min-height: 2.4rem; padding: 0.15rem; }
   .report-reflow.grid-table .agg-row td.grid-lead { display: none; }
   .report-reflow.grid-table td.grid-lead:empty { display: none; }
   .grid-resize { display: none !important; }
+  /* a card shows its fields as fields: no navigation mode */
+  .js .report-reflow.grid-table td[data-col] > .grid-text { display: none; }
+  .js .report-reflow.grid-table tbody td[data-col] :is(input, select) { color: inherit; border-color: var(--border); background: var(--surface); appearance: auto; }
 }
 
 /* two-thirds / one-third columns on desktops (builder Users page) */
@@ -1948,9 +1972,25 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 .th-menu-values li.muted { padding: 0.35rem 0.9rem; }
 .js th[data-col] > a { cursor: pointer; }
 
-/* (sprint 76) a date item in the application's date format: the browser's picker on a hidden date field */
+/* (sprint 76) a date item in the application's date format */
 .date-field { position: relative; }
-.date-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
+/* (sprint 84; APEX: the date picker) a month of days under a date field (app.js) */
+.date-picker { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; background: var(--surface); color: var(--text);
+  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgb(16 24 40 / 18%); padding: 0.5rem; min-width: 17rem; }
+.date-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
+.date-picker-title { font-weight: 650; text-transform: capitalize; }
+.date-picker-grid { border-collapse: collapse; width: 100%; }
+.date-picker-grid th { font-size: 0.75rem; font-weight: 600; color: var(--muted); padding: 0.2rem 0; text-align: center; }
+.date-picker-grid td { padding: 1px; text-align: center; }
+.date-picker-grid button { width: 2.2rem; height: 2.1rem; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
+.date-picker-grid button:hover { background: var(--surface-3); }
+.date-picker-grid button.date-other { color: var(--muted); }
+.date-picker-grid button.date-today { box-shadow: inset 0 0 0 1px var(--accent); }
+.date-picker-grid button.date-selected { background: var(--accent); color: var(--accent-text); }
+.date-picker-grid button:disabled { opacity: 0.35; cursor: not-allowed; }
+.date-picker-grid button:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
+.date-picker-foot { display: flex; justify-content: space-between; margin-top: 0.4rem; }
+.js .grid-table tbody td[data-col]:not(:focus-within) .date-field > .btn { visibility: hidden; }
 
 /* (sprint 77) display positions: banner, breadcrumb bar, a side column, footer; button positions in a region */
 .t-pos-banner, .t-pos-breadcrumb { margin-bottom: 1rem; }
@@ -1965,3 +2005,40 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 @media (max-width: 900px) { .t-columns-left, .t-columns-right { grid-template-columns: 1fr; } .t-columns-right > .t-side { order: 0; } }
 .region-footer-split { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
 .region-footer-split > div { display: flex; gap: 0.5rem; }
+
+/* (sprint 85) the Form Designer region (form-designer.ts): forms as cards with a Design link, the designer's field table, a row's form */
+.fd-cards > li { display: flex; flex-direction: column; gap: 0.25rem; }
+.fd-design-link { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.3rem; }
+.fd-fields input.fd-seq { width: 4.5rem; }
+.fd-fields td select { min-width: 8rem; }
+.fd-fields td input:not([type=checkbox]):not(.fd-seq) { min-width: 6rem; width: 100%; }
+.fd-form { margin: 0.75rem 0; }
+.fd-radios { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
+.fd-new { margin-top: 1rem; }
+
+/* (sprint 88, GEN-4; APEX: the Cards list template and the hero region) a list's cards each get a colour band
+   and their icon in a round badge, in the chart palette's order; the hero sits on the page background */
+.list-cards > li { --card-color: var(--series-1); }
+.list-cards > li:nth-child(8n+2) { --card-color: var(--series-2); }
+.list-cards > li:nth-child(8n+3) { --card-color: var(--series-3); }
+.list-cards > li:nth-child(8n+4) { --card-color: var(--series-4); }
+.list-cards > li:nth-child(8n+5) { --card-color: var(--series-5); }
+.list-cards > li:nth-child(8n+6) { --card-color: var(--series-6); }
+.list-cards > li:nth-child(8n+7) { --card-color: var(--series-7); }
+.list-cards > li:nth-child(8n+8) { --card-color: var(--series-8); }
+.list-card { border-top: 4px solid var(--card-color); }
+.list-card-icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
+  background: color-mix(in srgb, var(--card-color) 16%, transparent); color: var(--card-color); }
+.list-card-icon .icon { width: 1.3rem; height: 1.3rem; }
+.list-card-head { gap: 0.75rem; }
+.region-hero { background: transparent; padding-left: 0; padding-right: 0; }
+
+/* (sprint 88, GEN-4; APEX: the page footer) the application's version and Back to top, under the content */
+.t-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem;
+  margin: 0 1.5rem 1rem; max-width: calc(1500px - 3rem); padding: 0.75rem 0 0.25rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; }
+@media (max-width: 640px) { .t-footer { margin: 0 0.75rem 1rem; } }
+.t-footer .t-top { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; color: inherit; }
+.t-footer .t-top:hover, .t-footer .t-top:focus-visible { color: var(--accent); }
+.t-footer .icon { width: 1rem; height: 1rem; }
+@media print { .t-footer { display: none; } }
+.list-card:hover { border-top-color: var(--card-color); }