pgkiln 0.84.0 → 0.86.0

package/examples/gallery/samples/ux-patterns.sql

@@ -11,8 +11,16 @@
 --   page 6  content patterns: alerts, badges and tags, colour classes,
 --           text styles, lists, media lists, timelines, comments, avatars,
 --           metric cards and empty states;
---   page 7  page patterns: a modal dialog (page 8), a drawer (page 9) and a
---           page with a side column (page 10).
+--   page 7  page patterns: a modal dialog (page 8), a drawer (page 9), a
+--           page with a side column (page 10) and an embedded page (a URL
+--           region);
+--   page 11 more item types: autocomplete, multi-select, URL and percent
+--           graph, and people (pages 12 and 13) with a picture uploaded by
+--           an Image Upload item into the table;
+--   page 14 display positions: banner, body, right side column and footer
+--           (page template Right side column);
+--   page 15 button positions: every slot of a region's header and bottom bar;
+--   page 16 a sign-in region on a page with the template Minimal.
 -- Every page says which template, option or class it uses.
 --
 -- Installed by an administrator from the App Gallery, or with
@@ -34,15 +42,19 @@ create table ux_patterns.person (
   role   text not null,
   status text not null check (status in ('Active', 'Away', 'Left')),
   joined date not null,
-  note   text
+  note   text,
+  website    text check (website ~ '^https?://'),
+  photo      bytea check (octet_length(photo) <= 2 * 1024 * 1024),
+  photo_name text,
+  photo_mime text
 );
 
-insert into ux_patterns.person (name, role, status, joined, note) values
-  ('Alex Morgan', 'Product owner', 'Active', current_date - 400, 'Sets the priorities of the team.'),
-  ('Sam Lee', 'Developer', 'Active', current_date - 200, 'Builds the reports.'),
-  ('Robin Diaz', 'Designer', 'Away', current_date - 90, 'Back next week.'),
-  ('Kim Novak', 'Tester', 'Active', current_date - 30, 'Writes the browser tests.'),
-  ('Jo Park', 'Analyst', 'Left', current_date - 700, 'Moved to another team.');
+insert into ux_patterns.person (name, role, status, joined, note, website) values
+  ('Alex Morgan', 'Product owner', 'Active', current_date - 400, 'Sets the priorities of the team.', 'https://example.com/alex'),
+  ('Sam Lee', 'Developer', 'Active', current_date - 200, 'Builds the reports.', 'https://example.com/sam'),
+  ('Robin Diaz', 'Designer', 'Away', current_date - 90, 'Back next week.', null),
+  ('Kim Novak', 'Tester', 'Active', current_date - 30, 'Writes the browser tests.', null),
+  ('Jo Park', 'Analyst', 'Left', current_date - 700, 'Moved to another team.', null);
 
 -- 2. The application's database role ----------------------------------------
 do $$ begin
@@ -51,6 +63,8 @@ end $$;
 grant app_ux_patterns to pgkiln_runtime;
 grant usage on schema ux_patterns to app_ux_patterns;
 grant select on all tables in schema ux_patterns to app_ux_patterns;
+-- the people form of page 13 edits a person and uploads a picture
+grant insert, update, delete on ux_patterns.person to app_ux_patterns;
 
 -- 3. The application ----------------------------------------------------------
 insert into meta.app (alias, name, home_page, authentication, db_role)
@@ -71,7 +85,11 @@ select a.id, p.no, p.name, p.name, p.parent, p.mode, p.pos, p.size, p.tpl
   (7, 'Page patterns', 1, 'normal', 'center', 'medium', 'standard'),
   (8, 'A modal dialog', 7, 'modal', 'center', 'small', 'standard'),
   (9, 'A drawer', 7, 'modal', 'right', 'medium', 'standard'),
-  (10, 'A side column', 7, 'normal', 'center', 'medium', 'left_side_column')
+  (10, 'A side column', 7, 'normal', 'center', 'medium', 'left_side_column'),
+  (11, 'More item types', 1, 'normal', 'center', 'medium', 'standard'),
+  (14, 'Display positions', 1, 'normal', 'center', 'medium', 'right_side_column'),
+  (15, 'Button positions', 1, 'normal', 'center', 'medium', 'standard'),
+  (16, 'Sign-in region', 1, 'normal', 'center', 'medium', 'minimal')
   ) as p (no, name, parent, mode, pos, size, tpl)
  where a.alias = 'ux-patterns';
 
@@ -79,7 +97,9 @@ insert into meta.nav_entry (app_id, seq, label, icon, target_page)
 select a.id, n.seq, n.label, n.icon, n.page
   from meta.app a, (values
   (10, 'Home', 'home', 1), (20, 'Region templates', 'layers', 2), (30, 'Region options', 'sliders', 3), (40, 'Buttons', 'target', 4),
-  (50, 'Items and forms', 'edit', 5), (60, 'Content patterns', 'grid', 6), (70, 'Page patterns', 'file', 7)
+  (50, 'Items and forms', 'edit', 5), (60, 'Content patterns', 'grid', 6), (70, 'Page patterns', 'file', 7),
+  (80, 'More item types', 'list-plus', 11), (90, 'Display positions', 'layout-panel-left', 14),
+  (100, 'Button positions', 'mouse-pointer-click', 15), (110, 'Sign-in region', 'log-in', 16)
   ) as n (seq, label, icon, page)
  where a.alias = 'ux-patterns';
 
@@ -100,7 +120,11 @@ select a.id, e.list, e.seq, e.label, e.icon, e.page, e.badge, e.description
   ('UX_TOPICS', 30, 'Buttons', 'target', 4, null, 'Hot and normal, small and large, pill, outline, link, full width, success and danger, a menu and a badge.'),
   ('UX_TOPICS', 40, 'Items and forms', 'edit', 5, null, 'Every common item type in a form, and the item template options.'),
   ('UX_TOPICS', 50, 'Content patterns', 'grid', 6, null, 'Alerts, badges, colours, text, lists, media lists, timelines, comments, avatars, metrics and empty states.'),
-  ('UX_TOPICS', 60, 'Page patterns', 'file', 7, null, 'A modal dialog, a drawer and a page with a side column.'),
+  ('UX_TOPICS', 60, 'Page patterns', 'file', 7, null, 'A modal dialog, a drawer, a page with a side column and an embedded page.'),
+  ('UX_TOPICS', 70, 'More item types', 'list-plus', 11, null, 'Autocomplete, multi-select, URL, percent graph and a picture uploaded into a table.'),
+  ('UX_TOPICS', 80, 'Display positions', 'layout-panel-left', 14, null, 'Banner, body, right side column and footer.'),
+  ('UX_TOPICS', 90, 'Button positions', 'mouse-pointer-click', 15, null, 'Create, edit, help and up in the header; previous, close, delete and next in the bottom bar.'),
+  ('UX_TOPICS', 100, 'Sign-in region', 'log-in', 16, null, 'The Login region on a page without navigation, as on an own login page.'),
   ('UX_STEPS', 10, 'Choose', null, 2, null, null),
   ('UX_STEPS', 20, 'Details', null, 5, null, null),
   ('UX_STEPS', 30, 'Confirm', null, 7, null, null),
@@ -216,7 +240,7 @@ select pg_temp.page_id('ux-patterns', r.page), r.seq, r.title, r.type, r.cols, r
 
   -- 7 Page patterns
   (7, 5, 'About this page', 'static', 12, 'plain', '{}',
-   '<p class="lead">A page''s <strong>mode</strong> and <strong>dialog position</strong> make it a modal dialog or a drawer; its <strong>page template</strong> can add a side column. The buttons open examples of each.</p>',
+   '<p class="lead">A page''s <strong>mode</strong> and <strong>dialog position</strong> make it a modal dialog or a drawer; its <strong>page template</strong> can add a side column. The buttons open examples of each. Under them a <strong>URL region</strong> (type <code>url</code>) shows the modal dialog page in a sandboxed frame: its source is a URL, here a page of this server (<code>/a/ux-patterns/8</code>).</p>',
    '{}', null, null),
   (7, 10, 'Dialogs, drawers and columns', 'static', 12, 'buttons_container', '{}', null, '{}', 'p-buttons', null),
   (8, 10, 'A modal dialog', 'static', 12, 'plain', '{}',
@@ -230,7 +254,56 @@ select pg_temp.page_id('ux-patterns', r.page), r.seq, r.title, r.type, r.cols, r
    '{}', null, 'left'),
   (10, 20, 'The body', 'static', 12, 'standard', '{}',
    '<p>The regions of the body use the 12-column grid as usual. A faceted search beside its report is the typical use of a side column.</p>',
-   '{}', null, null)
+   '{}', null, null),
+  (7, 20, 'An embedded page (URL region)', 'url', 12, 'standard', '{}', '/a/ux-patterns/8',
+   '{"height": 240}', null, null),
+
+  -- 11 More item types
+  (11, 5, 'About this page', 'static', 12, 'plain', '{}',
+   '<p class="lead">More item types, each named in its label. <strong>Autocomplete</strong> is a text field with suggestions from its list of values (any text may be typed), a <strong>multi-select</strong> returns its values colon separated, a <strong>URL</strong> field opens the phone''s URL keyboard and a <strong>percent graph</strong> shows a number from 0 to 100 as a bar. The people of this catalog (page 12) have a picture: their form (page 13) uploads it with an <strong>Image Upload</strong> item into the table <code>ux_patterns.person</code>.</p>',
+   '{}', null, null),
+  (11, 10, 'Text with suggestions and choices', 'static', 12, 'standard', '{}', null, '{}', 'm-input', null),
+  (11, 20, 'Display only', 'static', 12, 'standard', '{}', null, '{}', 'm-display', null),
+
+  -- 14 Display positions (page template right_side_column)
+  (14, 1, 'Banner (position banner)', 'static', 12, 'standard', '{to-accent,to-compact}',
+   '<p>A region with the position <code>banner</code> shows at the top of the page content, above the body: a notice for everyone who opens the page.</p>',
+   '{}', null, 'banner'),
+  (14, 5, 'About this page', 'static', 12, 'plain', '{}',
+   '<p class="lead">A page has <strong>display positions</strong> and each region chooses one with its <strong>Position</strong> (Page Designer → region → Layout). This page has the page template <em>Right side column</em> (<code>right_side_column</code>), so the regions with the position <code>right</code> show in a column beside the body; on a narrow screen under it.</p>',
+   '{}', null, null),
+  (14, 10, 'The body (position body)', 'static', 12, 'standard', '{}',
+   '<p>Regions without a position, or with <code>body</code>, are the body: the 12-column grid of every page.</p>',
+   '{}', null, 'body'),
+  (14, 20, 'People (body)', 'report', 12, 'standard', '{}',
+   E'select name, role, status from ux_patterns.person order by name', '{"searchable": false}', null, null),
+  (14, 30, 'Right column (position right)', 'static', 12, 'standard', '{}',
+   '<p>This region has the position <code>right</code>: on this page it is the side column. On a page with another template it would show in the body, in sequence.</p>',
+   '{}', null, 'right'),
+  (14, 40, 'Topics (right)', 'list', 12, 'standard', '{}', null, '{"list": "UX_TOPICS", "template": "links"}', null, 'right'),
+  (14, 50, 'Footer (position footer)', 'static', 12, 'plain', '{}',
+   '<p class="muted">A region with the position <code>footer</code> comes after the body and the side column: small print, links, a last update.</p>',
+   '{}', null, 'footer'),
+
+  -- 15 Button positions
+  (15, 5, 'About this page', 'static', 12, 'plain', '{}',
+   '<p class="lead">A region''s button has a <strong>Button position</strong> (Page Designer → button → Layout; <code>slot</code> in the files), as APEX''s button positions. <em>Create, Edit, Change, Copy, Help</em> and <em>Up</em> go into the region''s header after the title; <em>Previous, Close</em> and <em>Delete</em> to the left end of the bottom bar and <em>Next</em> to the right end; <em>Region</em> (or none) with the region''s other buttons. Each button is labelled with its position. Previous and Next go to the neighbouring pages, Up and Close to the home page, Help opens an inline dialog; the others do nothing.</p>',
+   '{}', null, null),
+  (15, 10, 'Every button position', 'static', 12, 'standard', '{}',
+   '<p>The buttons of this region use every position. They apply to the <code>standard</code>, <code>collapsible</code> and <code>plain</code> templates; the other templates place every button where they always do.</p>',
+   '{}', 'slots', null),
+  (15, 20, 'In a collapsible region', 'static', 12, 'collapsible', '{}',
+   '<p>The same positions in a collapsible region: <em>Edit</em> in the header, <em>Previous</em> and <em>Next</em> in the bottom bar.</p>',
+   '{}', 'slots-collapsible', null),
+  (15, 30, 'Help', 'static', 12, 'inline_dialog', '{}',
+   '<p>A button with the position <code>help</code> sits in the header, like APEX''s Help button. This one opens an inline dialog with a dynamic action <em>Open region</em>.</p>',
+   '{}', 'slot-help', null),
+
+  -- 16 Sign-in region (page template minimal)
+  (16, 5, 'About this page', 'static', 12, 'plain', '{}',
+   '<p class="lead">This page has the page template <em>Minimal (no navigation)</em> (<code>minimal</code>): no header, navigation menu or navigation bar, the title and the regions only, centred. The region below is a <strong>Login</strong> region: the application''s sign-in form, as on an own login page (Application settings → Sign-in methods → Create a login page). It posts to the application''s sign-in, so throttling and every sign-in method work as on the built-in page. You are signed in already: signing in again as demo / demo starts a new session and opens the home page. A wrong password shows the built-in sign-in page with its message, because this page is not the application''s login page.</p>',
+   '{}', 'about-login', null),
+  (16, 10, 'Sign in', 'login', 12, 'standard', '{}', null, '{}', null, null)
   ) as r (page, seq, title, type, cols, template, topts, source, config, sid, pos);
 
 -- buttons
@@ -262,10 +335,36 @@ select pg_temp.page_id('ux-patterns', b.page), pg_temp.region_id('ux-patterns',
   (7, 'p-buttons', 30, 'SIDE', 'A page with a side column', 'redirect', false, 10, '{}', null, null)
   ) as b (page, region, seq, name, label, action, hot, target, topts, menu, badge);
 
+-- button positions (page 15) and the other new pages' buttons: harmless (navigate, open the help, or nothing)
+insert into meta.button (page_id, region_id, seq, name, label, action, hot, target_page, template_options, slot)
+select pg_temp.page_id('ux-patterns', b.page), pg_temp.region_id('ux-patterns', b.page, b.region), b.seq, b.name, b.label, b.action, b.hot, b.target,
+       b.topts::text[], b.slot
+  from (values
+  (15, 'slots', 10, 'CREATE', 'Create (create)', 'da', true, null, '{}', 'create'),
+  (15, 'slots', 20, 'EDIT', 'Edit (edit)', 'da', false, null, '{}', 'edit'),
+  (15, 'slots', 30, 'CHANGE', 'Change (change)', 'da', false, null, '{}', 'change'),
+  (15, 'slots', 40, 'COPY', 'Copy (copy)', 'da', false, null, '{}', 'copy'),
+  (15, 'slots', 50, 'HELP', 'Help (help)', 'da', false, null, '{}', 'help'),
+  (15, 'slots', 60, 'UP', 'Up (up)', 'redirect', false, 1, '{}', 'up'),
+  (15, 'slots', 70, 'PREVIOUS', 'Previous (previous)', 'redirect', false, 14, '{}', 'previous'),
+  (15, 'slots', 80, 'CLOSE', 'Close (close)', 'redirect', false, 1, '{}', 'close'),
+  (15, 'slots', 90, 'DELETE', 'Delete (delete)', 'da', false, null, '{to-danger}', 'delete'),
+  (15, 'slots', 100, 'NEXT', 'Next (next)', 'redirect', true, 16, '{}', 'next'),
+  (15, 'slots', 110, 'IN_REGION', 'With the others (region)', 'da', false, null, '{}', 'region'),
+  (15, 'slots-collapsible', 10, 'C_EDIT', 'Edit (edit)', 'da', false, null, '{}', 'edit'),
+  (15, 'slots-collapsible', 20, 'C_PREVIOUS', 'Previous (previous)', 'redirect', false, 14, '{}', 'previous'),
+  (15, 'slots-collapsible', 30, 'C_NEXT', 'Next (next)', 'redirect', true, 16, '{}', 'next'),
+  (11, 'm-display', 10, 'PEOPLE', 'People and their pictures', 'redirect', true, 12, '{}', null),
+  (16, 'about-login', 10, 'HOME', 'Back to the catalog', 'redirect', false, 1, '{}', null)
+  ) as b (page, region, seq, name, label, action, hot, target, topts, slot);
+
 insert into meta.dynamic_action (page_id, seq, name, event, trigger_element, action, affected_region_id)
 select pg_temp.page_id('ux-patterns', 2), d.seq, d.name, 'click', d.button, 'open_region', pg_temp.region_id('ux-patterns', 2, d.region)
   from (values (10, 'Open the inline dialog', 'OPEN_DIALOG', 'dialog'), (20, 'Open the inline drawer', 'OPEN_DRAWER', 'drawer')) as d (seq, name, button, region);
 
+insert into meta.dynamic_action (page_id, seq, name, event, trigger_element, action, affected_region_id)
+select pg_temp.page_id('ux-patterns', 15), 10, 'Open the help', 'click', 'HELP', 'open_region', pg_temp.region_id('ux-patterns', 15, 'slot-help');
+
 -- items
 insert into meta.item (page_id, region_id, seq, name, label, type, lov, default_value, required, help, config, template_options)
 select pg_temp.page_id('ux-patterns', 5), pg_temp.region_id('ux-patterns', 5, i.region), i.seq, i.name, i.label, i.type, i.lov, i.def, i.req, i.help,
@@ -293,3 +392,44 @@ select pg_temp.page_id('ux-patterns', 5), pg_temp.region_id('ux-patterns', 5, i.
   ('f-options', 40, 'P5_BOLD', 'Bold value (to-bold)', 'display', null, 'A bold value', false, null, '{}', '{to-bold}'),
   ('f-options', 50, 'P5_HIDDEN_LABEL', 'Hidden label (to-hide-label)', 'text', null, 'The label is only for screen readers', false, null, '{}', '{to-hide-label}')
   ) as i (region, seq, name, label, type, lov, def, req, help, config, topts);
+
+-- page 11: more item types
+insert into meta.item (page_id, region_id, seq, name, label, type, lov, default_value, help, config)
+select pg_temp.page_id('ux-patterns', 11), pg_temp.region_id('ux-patterns', 11, i.region), i.seq, i.name, i.label, i.type, i.lov, i.def, i.help, i.config::jsonb
+  from (values
+  ('m-input', 10, 'P11_ROLE', 'Role (autocomplete)', 'autocomplete', 'select distinct role from ux_patterns.person order by 1', null,
+   'Suggestions from the roles of the people; type anything else as well.', '{}'),
+  ('m-input', 20, 'P11_DAYS', 'Days (multiselect)', 'multiselect', 'STATIC:Monday;MON,Tuesday;TUE,Wednesday;WED,Thursday;THU,Friday;FRI', 'MON:WED',
+   'Several values: the item''s value is their return values, colon separated (MON:WED).', '{}'),
+  ('m-input', 30, 'P11_WEBSITE', 'Website (url)', 'url', null, 'https://example.com', 'A URL field: the phone shows its URL keyboard.', '{}'),
+  ('m-display', 10, 'P11_ACTIVE_PCT', 'People active (percent_graph)', 'percent_graph', null, null,
+   'A computation counts the active people; the bar reads out as the number.', '{}'),
+  ('m-display', 20, 'P11_DONE_PCT', 'A full bar (percent_graph, 100)', 'percent_graph', null, null, null, '{}')
+  ) as i (region, seq, name, label, type, lov, def, help, config);
+
+insert into meta.computation (page_id, seq, item_name, point, type, expression)
+values (pg_temp.page_id('ux-patterns', 11), 10, 'P11_ACTIVE_PCT', 'before_header', 'sql_query',
+        E'select round(100.0 * count(*) filter (where status = ''Active'') / greatest(count(*), 1)) from ux_patterns.person'),
+       (pg_temp.page_id('ux-patterns', 11), 20, 'P11_DONE_PCT', 'before_header', 'static', '100');
+
+-- pages 12 and 13: the people, with a picture (Report and form wizard)
+select meta.generate_page('ux-patterns', 'report_form', 'ux_patterns.person', 12, '{"label": "People", "form_page": 13, "nav": false}');
+update meta.page set parent_page = 11 where id = pg_temp.page_id('ux-patterns', 12);
+insert into meta.region (page_id, seq, title, type, columns, template, source)
+values (pg_temp.page_id('ux-patterns', 12), 1, 'About this page', 'static', 12, 'plain',
+        '<p class="lead">Made with the <em>Report and form</em> wizard (<code>meta.generate_page</code>) on <code>ux_patterns.person</code>. Open a person: the form has a <strong>Picture</strong> item of type <code>image_upload</code> that crops the picture to a square in the browser and saves it into the column <code>photo</code> (with its name and type in <code>photo_name</code> and <code>photo_mime</code>), a <strong>Role</strong> with <code>autocomplete</code> and a <strong>Website</strong> of type <code>url</code>.</p>');
+update meta.region set source = 'select id, name, role, status, website, photo_name from ux_patterns.person order by name',
+       config = config || '{"headings": {"photo_name": "Picture"}}'
+ where page_id = pg_temp.page_id('ux-patterns', 12) and type = 'report';
+delete from meta.item where page_id = pg_temp.page_id('ux-patterns', 13) and name in ('P13_PHOTO_NAME', 'P13_PHOTO_MIME');
+update meta.item set type = 'image_upload', label = 'Picture (image_upload)',
+       help = 'Image Upload: a picture only, cropped to a square and made smaller in the browser before it is saved into the column photo.',
+       config = '{"filename_column": "photo_name", "mime_column": "photo_mime", "accept": "image/png,image/jpeg,image/webp", "max_mb": 2,
+                  "crop": "1:1", "max_px": 600}'
+ where page_id = pg_temp.page_id('ux-patterns', 13) and name = 'P13_PHOTO';
+update meta.item set type = 'autocomplete', label = 'Role (autocomplete)', lov = 'select distinct role from ux_patterns.person order by 1'
+ where page_id = pg_temp.page_id('ux-patterns', 13) and name = 'P13_ROLE';
+update meta.item set type = 'select', lov = 'STATIC:Active,Away,Left'
+ where page_id = pg_temp.page_id('ux-patterns', 13) and name = 'P13_STATUS';
+update meta.item set type = 'url', label = 'Website (url)', help = 'Starts with https://.'
+ where page_id = pg_temp.page_id('ux-patterns', 13) and name = 'P13_WEBSITE';

package/examples/hr/README.md

@@ -44,6 +44,8 @@ Then open http://127.0.0.1:3100/a/hr and sign in as `king`, `blake`, `jones`, `a
 | `hr_68_component_details.sql` | *Component details* (page 47): a popup LOV over 6,000 rows that loads more as the dialog scrolls, a wait popup around a two-second process (*Recalculate*) and around an Ajax call (*Check in the background*), and an *Actions* menu whose entries run dynamic actions (event `menu_entry`) |
 | `hr_71_fulltext_search.sql` | Full-text search: `hr.policy` gets a generated `search_vector` column (title weight A, body B, english) with a GIN index, and the search configuration `POLICIES` (search type *fulltext*, *Did you mean* when `pg_trgm` is installed) joins page 42 *Search*: "works home" finds *Working from home*, the matched words highlighted |
 | `hr_72_vector_search.sql` | Search by meaning: `hr.policy` gets *Relocation leave* and a managers-only *Salary bands* with row level security (`audience`); with pgvector, the vector provider `POLICY_EMBEDDINGS` (a stand-in function, `hr.policy_embedding`, eight topics), `hr.policy.embedding vector(8)` with an HNSW index and a trigger, the hybrid search configuration `POLICIES_MEANING` on page 42 (*time off for a family move* finds *Relocation leave*), and *Policy questions* (page 49): the agent `POLICY_AGENT` with the Retrieve tool `policy_search`. Needs an AI service named `HR_ASSISTANT` for page 49 |
+| `hr_80_notifications.sql` | The notification bell and live badges: HR's own notifications (`hr.notification`: leave requested and decided, workflow, automation and task messages) also go on the bell through `meta.notify`, a leave notification opening the request (page 7); *Mark all read* clears the bell too; badges from SQL (`badge_query`) on the navigation bar (*Leave requests* pending, *My tasks* you can act on), the *Pending requests* shortcut and the *Mark all read* button, refreshed every 30 seconds without a reload; a `timer` dynamic action refreshes *My notifications*. Sign in as jones, and as scott in another browser: ask for leave and watch jones's bell |
+| `hr_81_vector_search_type.sql` | *Policies by meaning only* on page 42: the search type `vector` next to part 72's hybrid one (only with pgvector) |
 
 The files run in order, each once (recorded in `public.pgkiln_seed`), so new ones can be added
 later. pgkiln's own tests use this application as their fixture (`npm test` installs it first).

package/examples/hr/hr_80_notifications.sql

@@ -0,0 +1,125 @@
+-- =====================================================================
+-- HR example, part 80: the notification bell and live badges (migration 154)
+--
+-- HR has had its own notifications since hr.sql: rows in hr.notification
+-- (leave requested and decided, the workflows' and automations' messages),
+-- listed under "My notifications" on the home page. This part puts them on
+-- pgkiln's notification bell as well:
+--
+--   * Settings → User Interface: Notifications on, Live badges every 30 s
+--   * hr.notification gets the page a notification opens (page, items) and
+--     an icon; a trigger hands every new row to meta.notify(), so the bell
+--     shows it and opening it goes to that page (a leave request opens the
+--     request on page 7, the link signed for the recipient)
+--   * "Mark all read" on the home page also marks the bell's notifications read
+--   * badges from SQL (badge_query), refreshed in place by the live badges:
+--     the navigation bar's "Leave requests" (pending requests you can see),
+--     "My tasks" (tasks you can act on), the Shortcuts list's "Pending
+--     requests" and the "Mark all read" button (your unread notifications)
+--   * a timer dynamic action refreshes "My notifications" every 30 seconds
+--
+-- Sign in as jones, open the home page, and in another browser sign in as
+-- scott (a clerk of jones's department) and ask for leave: jones's bell and
+-- badges change without a reload.
+-- =====================================================================
+
+update meta.app set notifications = true, live_badges_s = 30 where alias = 'hr';
+
+-- the page a notification opens, and its icon
+alter table hr.notification add column page int, add column items jsonb, add column icon text;
+
+-- the leave notifications open the request (page 7)
+create or replace function hr.notify_leave_requested() returns trigger
+language plpgsql security definer set search_path = hr, pg_catalog as $$
+begin
+  insert into hr.notification (username, message, page, items, icon)
+  select m.username, format('%s requested %s day(s) of leave from %s.',
+                            e.ename, new.days, to_char(new.start_date, 'DD Mon YYYY')),
+         7, jsonb_build_object('P7_ID', new.id), 'calendar'
+    from hr.emp e join hr.emp m on m.empno = e.mgr
+   where e.empno = new.empno and m.username is not null;
+  return new;
+end
+$$;
+
+create or replace function hr.notify_leave_decided() returns trigger
+language plpgsql security definer set search_path = hr, pg_catalog as $$
+begin
+  if new.status in ('APPROVED', 'REJECTED') then
+    insert into hr.notification (username, message, page, items, icon)
+    select e.username, format('Your leave from %s to %s was %s by %s.',
+                              to_char(new.start_date, 'DD Mon'), to_char(new.end_date, 'DD Mon'),
+                              lower(new.status), new.decided_by),
+           7, jsonb_build_object('P7_ID', new.id), case new.status when 'APPROVED' then 'check' else 'x' end
+      from hr.emp e
+     where e.empno = new.empno and e.username is not null;
+  end if;
+  return new;
+end
+$$;
+
+-- Every new hr.notification also goes on the bell. Only from the running
+-- application (meta.app_id() is HR, notifications on); a row added through
+-- the API or SQL Workshop stays in hr.notification only. The bell never
+-- stops the change that wrote the notification.
+create function hr.notification_to_bell() returns trigger
+language plpgsql security definer set search_path = hr, pg_catalog as $$
+begin
+  if exists (select 1 from meta.app a where a.id = meta.app_id() and a.alias = 'hr' and a.notifications) then
+    perform meta.notify(
+      p_user  => new.username,
+      p_title => left(new.message, 200),
+      p_page  => new.page,
+      p_items => coalesce(new.items, '{}'::jsonb),
+      p_icon  => new.icon);
+  end if;
+  return new;
+exception when others then
+  raise warning 'hr.notification_to_bell: %', sqlerrm;
+  return new;
+end
+$$;
+revoke execute on function hr.notification_to_bell() from public;
+
+create trigger notification_to_bell after insert on hr.notification
+  for each row execute function hr.notification_to_bell();
+
+-- "Mark all read" on the home page: the bell's notifications too
+insert into meta.process (page_id, seq, name, type, code, when_button)
+select p.id, 20, 'Mark the bell read', 'sql', 'select meta.mark_notifications_read()', 'MARK_READ'
+  from meta.page p join meta.app a on a.id = p.app_id where a.alias = 'hr' and p.page_no = 1;
+
+-- the button shows how many of your notifications are unread
+update meta.button b set badge_query = 'select nullif(count(*), 0) from hr.notification where read_at is null'
+  from meta.page p join meta.app a on a.id = p.app_id
+ where b.page_id = p.id and a.alias = 'hr' and p.page_no = 1 and b.name = 'MARK_READ';
+
+-- badges from SQL in the navigation bar and the Shortcuts list (row level
+-- security applies: a manager counts their department's requests, an
+-- employee their own)
+insert into meta.list_entry (app_id, list_name, seq, label, icon, target_page, description, badge_query)
+select a.id, 'HR_NAVBAR', e.seq, e.label, e.icon, e.page, e.description, e.badge_query
+  from meta.app a, (values
+  (20, 'Leave requests', 'calendar', 6, 'Pending leave requests you can see',
+   'select nullif(count(*), 0) from hr.leave_request where status = ''PENDING'''),
+  (30, 'My tasks', 'check', 14, 'Tasks you can act on',
+   'select nullif(count(*), 0) from meta.tasks where app_id = meta.app_id() and may_act and state in (''unassigned'', ''assigned'')')
+  ) as e (seq, label, icon, page, description, badge_query)
+ where a.alias = 'hr';
+
+update meta.list_entry l set badge_query = 'select count(*) from hr.leave_request where status = ''PENDING'''
+  from meta.app a
+ where l.app_id = a.id and a.alias = 'hr' and l.list_name = 'HR_SHORTCUTS' and l.label = 'Pending requests';
+
+-- a timer dynamic action: "My notifications" refreshes every 30 seconds while the page is visible
+insert into meta.dynamic_action (page_id, seq, name, event, trigger_element, action, affected_region_id)
+select p.id, 50, 'Refresh my notifications', 'timer', '30', 'refresh_region', r.id
+  from meta.page p join meta.app a on a.id = p.app_id join meta.region r on r.page_id = p.id and r.title = 'My notifications'
+ where a.alias = 'hr' and p.page_no = 1;
+
+-- Dutch labels for the new navigation bar entries (part 4's translations)
+insert into meta.translation (app_id, language, source, target)
+select a.id, 'nl', t.src, t.nl
+  from meta.app a, (values ('Leave requests', 'Verlofaanvragen'), ('My tasks', 'Mijn taken')) as t (src, nl)
+ where a.alias = 'hr'
+on conflict do nothing;

package/examples/hr/hr_81_vector_search_type.sql

@@ -0,0 +1,33 @@
+-- =====================================================================
+-- HR example, part 81: search by meaning alone (search type vector)
+--
+-- Part 72 added POLICIES_MEANING, a hybrid search (full-text and vector
+-- similarity combined). This part adds POLICIES_VECTOR to the same search
+-- page (42): the vector similarity alone, so the two can be compared ("time
+-- off for a family move" finds Relocation leave in both; a word that only
+-- full-text matches finds nothing here). Only with pgvector, like part 72.
+-- =====================================================================
+
+do $$
+begin
+  if not exists (select from information_schema.columns where table_schema = 'hr' and table_name = 'policy' and column_name = 'embedding') then
+    raise notice 'HR part 81: hr.policy has no vector column (pgvector is not installed): no vector search.';
+    return;
+  end if;
+  insert into meta.search_config (app_id, name, label, seq, source_type, source, search_type,
+                                  vector_provider, vector_column, key_column, distance, min_similarity,
+                                  title_column, description_column, icon, max_results)
+  select id, 'POLICIES_VECTOR', 'Policies by meaning only', 27, 'table', 'hr.policy', 'vector',
+         'POLICY_EMBEDDINGS', 'embedding', 'id', 'cosine', 0.6,
+         'title', 'body', 'sparkles', 3
+    from meta.app where alias = 'hr';
+  update meta.region r
+     set config = jsonb_set(r.config, '{configs}', (r.config->'configs') || '["POLICIES_VECTOR"]'::jsonb)
+    from meta.page p join meta.app a on a.id = p.app_id
+   where r.page_id = p.id and a.alias = 'hr' and p.page_no = 42 and r.type = 'search';
+end $$;
+
+insert into meta.translation (app_id, language, source, target)
+select a.id, 'nl', 'Policies by meaning only', 'Regelingen alleen op betekenis'
+  from meta.app a where a.alias = 'hr'
+on conflict do nothing;

package/package.json

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

package/public/app.css

@@ -426,6 +426,12 @@ dialog.region-inline_drawer:target { inset: 0 0 0 auto; }
 .region-collapsible summary.region-header { cursor: pointer; list-style: none; }
 .region-collapsible summary.region-header::-webkit-details-marker { display: none; }
 .region-collapsible details:not([open]) summary.region-header { border-bottom: 0; }
+/* (166) header buttons of a collapsible region: over the header row, outside the summary (the toggle) */
+.region-collapsible.has-header-buttons { position: relative; }
+.region-collapsible > .region-header-buttons { position: absolute; top: 0; right: 1rem; z-index: 1; max-width: calc(min(50%, 22rem) - 1rem); min-height: 50px; display: flex; align-items: center; justify-content: flex-end; }
+.region-collapsible > .region-header-buttons .buttons { margin: 0; flex-wrap: wrap; justify-content: flex-end; }
+.region-collapsible.has-header-buttons > details > summary.region-header { padding-right: min(50%, 22rem); }
+.region.to-compact > .region-header-buttons { min-height: 0; top: 0.35rem; }
 .region-body { padding: 1rem; }
 .region-footer { display: flex; padding: 0.75rem 1rem; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
 .region-plain > .region-footer { background: none; padding: 1rem 0 0; }
@@ -1815,7 +1821,8 @@ td.tc-cell { overflow-wrap: anywhere; }
 .t-navbar a[aria-current="page"] { background: rgb(255 255 255 / 16%); }
 .t-navbar-menu a { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.9rem; }
 @media (max-width: 1024px) {
-  .t-navbar .nb-icon > span:not(.badge) { display: none; }
+  /* (166) visually hidden, still the link's name: an aria-label would leave out the badge (label-content-name-mismatch) */
+  .t-navbar .nb-icon > span:not(.badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 }
 @media (max-width: 640px) {
   .list-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }

package/public/app.js

@@ -595,9 +595,16 @@ const pgkilnUnsaved = (() => {
       // (156) stops the actions after it; the triggering event's own effect is stopped by its handler (cancels())
       case 'cancel_event':
         return STOP;
-      case 'set_style':
-        for (const el of targets(da)) for (const [k, v] of Object.entries(da.styles || {})) el.style.setProperty(k, v);
+      case 'set_style': {
+        // (166) an item's own field (input, select, text area), as in APEX; its wrapper only when it has none
+        const field = (n) => {
+          const f = document.getElementById(n);
+          return f && f.matches('input, select, textarea') ? f : wrapperOf(n);
+        };
+        const els = [...da.items.map(field).filter(Boolean), ...(da.region ? [document.getElementById(`R${da.region}`)].filter(Boolean) : [])];
+        for (const el of els) for (const [k, v] of Object.entries(da.styles || {})) el.style.setProperty(k, v);
         return;
+      }
       case 'collapse_tree':
       case 'expand_tree':
         for (const el of targets(da)) el.querySelectorAll('.tree-view details').forEach((d) => (d.open = da.action === 'expand_tree'));
@@ -615,7 +622,12 @@ const pgkilnUnsaved = (() => {
         }
         return;
       case 'trigger_geocoding':
-        for (const n of da.items) document.querySelector(`[data-geocode="${CSS.escape(n)}"]`)?.click();
+        for (const n of da.items) {
+          // (166) not for the address just chosen from the list (a change action on the address item itself would reopen it)
+          const field = document.getElementById(n);
+          if (field && field.dataset.geocoded !== undefined && field.value === field.dataset.geocoded) continue;
+          document.querySelector(`[data-geocode="${CSS.escape(n)}"]`)?.click();
+        }
         return;
       case 'open_report_dialog':
         for (const el of targets(da)) {
@@ -1015,12 +1027,17 @@ const pgkilnUnsaved = (() => {
     e.stopImmediatePropagation();
     const submitter = e.submitter;
     if (!(await runChain(run))) return;
-    submitting = true;
-    try {
-      form.requestSubmit(submitter && submitter.form === form ? submitter : undefined);
-    } finally {
-      submitting = false;
-    }
+    // (166) in a new task: for a submit the user started (a button, Enter) the browser is still firing
+    // this submit event when the actions end, and ignores a requestSubmit made then. requestSubmit
+    // dispatches its submit event synchronously, so the flag lets exactly that one through.
+    setTimeout(() => {
+      submitting = true;
+      try {
+        form.requestSubmit(submitter && submitter.form === form ? submitter : undefined);
+      } finally {
+        submitting = false;
+      }
+    });
   }, true);
 
   // ------------------------------------------------------------ cascading lists of values
@@ -3082,6 +3099,8 @@ const liveBadges = (() => {
       b.textContent = p.label;
       b.addEventListener('click', () => {
         input.value = p.label;
+        // (166) the address chosen: trigger_geocoding on this item's change doesn't look it up again
+        input.dataset.geocoded = p.label;
         input.dispatchEvent(new Event('change', { bubbles: true }));
         const target = btn.dataset.coords && document.getElementById(btn.dataset.coords);
         if (target) {

package/src/app.ts

@@ -106,6 +106,7 @@ import { runtimeScope } from './db.ts';
 import { startTelemetry } from './telemetry/export.ts';
 import { telemetryHooks, telemetryRoutes } from './telemetry/http.ts';
 import { telemetryBuilderRoutes } from './builder/telemetry.ts';
+import { inRequestScope } from './builder/i18n.ts';
 
 export async function buildApp(opts: { logger?: boolean } = {}) {
   // a database older than the code: apply the migrations (MIGRATE_ON_START=true)
@@ -209,6 +210,14 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
     // the page's URL carries the package version, so the file never changes under it
     return reply.header('cache-control', 'public, max-age=31536000, immutable').type('image/svg+xml').send(svg);
   });
+  // (sprint 164) builder handlers run in a request scope: scopedTx (src/builder/i18n.ts) takes the developer's language from it
+  app.addHook('onRoute', (opts) => {
+    if (!opts.url.startsWith('/builder')) return;
+    const handler = opts.handler;
+    opts.handler = function (this: unknown, req, reply) {
+      return inRequestScope(req, () => (handler as (this: unknown, ...a: unknown[]) => unknown).call(this, req, reply));
+    } as typeof opts.handler;
+  });
   await app.register(runtimeRoutes);
   await app.register(accountRoutes);
   await app.register(notificationRoutes);