pgkiln 0.40.0 → 0.41.0

package/public/app.js

@@ -972,6 +972,132 @@ const pgkilnUnsaved = (() => {
     }
   });
 
+  // ------------------------------------------------------------ Gantt chart drag and drop (sprint 69)
+  // An editable Gantt chart (.gantt-editable, data-gantt = its region) has tasks with
+  // data-task, data-start and data-end (wall clock ms, read as UTC). Dragging a task moves
+  // it, dragging a bar's end handle changes its end, in whole days or hours (data-snap);
+  // from the keyboard the arrow keys do the same (Shift: the end), Enter saves, Escape
+  // cancels. The server checks and saves the new dates and sends the chart back.
+  const GANTT_STEP = { day: 86400000, hour: 3600000 };
+  const ganttWhen = (ms, snap) => new Date(ms).toISOString().slice(0, snap === 'hour' ? 16 : 10);
+  const ganttState = new WeakMap();
+  function ganttPreview(task, steps, mode) {
+    const chart = task.closest('.gantt-editable');
+    const plot = chart.querySelector('.gantt-plot');
+    const step = GANTT_STEP[chart.dataset.snap] || GANTT_STEP.day;
+    const span = Number(chart.dataset.hi) - Number(chart.dataset.lo);
+    const start = Number(task.dataset.start);
+    const end = Number(task.dataset.end);
+    const prev = ganttState.get(task);
+    // the bar's width before this edit (the preview changes it)
+    const orig = prev ? prev.orig : task.getBoundingClientRect().width;
+    // a bar's end never goes before its start; a milestone only moves
+    const resize = mode === 'end' && task.classList.contains('gantt-bar');
+    if (resize) steps = Math.max(steps, Math.round((start - end) / step));
+    const next = resize ? { start, end: end + steps * step } : { start: start + steps * step, end: end + steps * step };
+    const px = (ms) => (ms / span) * plot.getBoundingClientRect().width;
+    // (translate, not transform: a milestone is a rotated square)
+    task.style.translate = !resize && steps ? `${px(steps * step)}px 0` : '';
+    task.style.width = resize && steps ? `${Math.max(orig + px(steps * step), 2)}px` : '';
+    ganttState.set(task, { steps, mode: resize ? 'end' : 'move', next, orig, keyboard: prev?.keyboard });
+    task.classList.toggle('gantt-moving', !!steps);
+    const status = chart.closest('.region')?.querySelector('.gantt-status');
+    if (status) status.textContent = steps ? `${task.dataset.label}: ${ganttWhen(next.start, chart.dataset.snap).replace('T', ' ')} – ${ganttWhen(next.end, chart.dataset.snap).replace('T', ' ')}` : '';
+    return next;
+  }
+  function ganttReset(task) {
+    task.style.translate = '';
+    task.style.width = '';
+    const status = task.closest('.region')?.querySelector('.gantt-status');
+    if (status) status.textContent = '';
+    task.classList.remove('gantt-moving', 'gantt-dragging');
+    ganttState.delete(task);
+  }
+  async function ganttSave(task) {
+    const st = ganttState.get(task);
+    if (!st || !st.steps) return ganttReset(task);
+    const chart = task.closest('.gantt-editable');
+    const region = chart.closest('.region');
+    const id = task.dataset.task;
+    const snap = chart.dataset.snap;
+    chart.setAttribute('aria-busy', 'true');
+    try {
+      const res = await post(`/chart/${chart.dataset.gantt}/move`, { task: id, start: ganttWhen(st.next.start, snap), end: ganttWhen(st.next.end, snap) });
+      const sheet = document.getElementById('pgkiln-css')?.sheet;
+      if (sheet && res.css) for (const rule of res.css.split('\n')) if (rule) sheet.insertRule(rule, sheet.cssRules.length);
+      const node = region ? replaceHtml(region, res.region) : null;
+      const status = node?.querySelector('.gantt-status');
+      if (status) status.textContent = res.message;
+      // keyboard users keep their place
+      if (st.keyboard) node?.querySelector(`.gantt-editable [data-task="${CSS.escape(id)}"]`)?.focus();
+    } catch (err) {
+      chart.removeAttribute('aria-busy');
+      ganttReset(task);
+      showError(err.message);
+    }
+  }
+  let ganttDrag = null;
+  let ganttSwallowClick = false;
+  document.addEventListener('pointerdown', (e) => {
+    const task = e.button === 0 && e.target.closest?.('.gantt-editable [data-task]');
+    if (!task || task.closest('[aria-busy="true"]')) return;
+    ganttDrag = { task, x: e.clientX, mode: e.target.closest('.gantt-handle') ? 'end' : 'move', id: e.pointerId, moved: false };
+    task.setPointerCapture?.(e.pointerId);
+  });
+  document.addEventListener('pointermove', (e) => {
+    if (!ganttDrag || e.pointerId !== ganttDrag.id) return;
+    const { task } = ganttDrag;
+    const chart = task.closest('.gantt-editable');
+    const width = chart.querySelector('.gantt-plot').getBoundingClientRect().width || 1;
+    const step = GANTT_STEP[chart.dataset.snap] || GANTT_STEP.day;
+    const dx = e.clientX - ganttDrag.x;
+    if (!ganttDrag.moved && Math.abs(dx) < 4) return;
+    ganttDrag.moved = true;
+    task.classList.add('gantt-dragging');
+    const steps = Math.round(((dx / width) * (Number(chart.dataset.hi) - Number(chart.dataset.lo))) / step);
+    if (steps !== ganttState.get(task)?.steps) ganttPreview(task, steps, ganttDrag.mode);
+  });
+  const ganttEnd = (e, cancel) => {
+    if (!ganttDrag || e.pointerId !== ganttDrag.id) return;
+    const { task, moved } = ganttDrag;
+    ganttDrag = null;
+    task.classList.remove('gantt-dragging');
+    if (!moved) return;
+    // a drag is not a click on the task's link
+    ganttSwallowClick = true;
+    setTimeout(() => (ganttSwallowClick = false), 0);
+    if (cancel) ganttReset(task);
+    else ganttSave(task);
+  };
+  document.addEventListener('pointerup', (e) => ganttEnd(e, false));
+  document.addEventListener('pointercancel', (e) => ganttEnd(e, true));
+  document.addEventListener('click', (e) => {
+    if (ganttSwallowClick && e.target.closest?.('.gantt-editable [data-task]')) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, true);
+  document.addEventListener('keydown', (e) => {
+    const task = e.target.closest?.('.gantt-editable [data-task]');
+    if (!task || e.altKey || e.ctrlKey || e.metaKey) return;
+    const st = ganttState.get(task);
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      e.preventDefault();
+      const mode = e.shiftKey && task.classList.contains('gantt-bar') ? 'end' : 'move';
+      // switching between moving and changing the end starts over
+      if (st && st.mode !== mode) ganttReset(task);
+      const same = ganttState.get(task);
+      ganttPreview(task, (same ? same.steps : 0) + (e.key === 'ArrowRight' ? 1 : -1), mode);
+      ganttState.get(task).keyboard = true;
+    } else if (e.key === 'Enter' && st?.steps) {
+      e.preventDefault();
+      ganttSave(task);
+    } else if (e.key === 'Escape' && st) {
+      e.preventDefault();
+      ganttReset(task);
+    }
+  });
+
   // ------------------------------------------------------------ lazy regions
   // A lazy region arrives as a placeholder with a "Show" link (which works
   // without JavaScript); fetch the region now and put it in place, with its

package/public/builder.css

@@ -168,7 +168,7 @@ body.ide { margin: 0; min-height: 100vh; min-height: 100dvh; padding-left: var(-
 .ide-page { max-width: 1680px; margin: 0 auto; padding: 14px 18px 48px; }
 .ide .region-standard, .ide .region-collapsible { border-radius: var(--radius); box-shadow: none; }
 .ide .region-header { min-height: 38px; padding: 0.35rem 0.85rem; background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
-.ide .region-header h2 { font-size: 13px; font-weight: 650; }
+.ide .region-header h2 { font-size: 13px; font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
 .ide .region-body { padding: 0.85rem; }
 .ide .btn { font-size: 13px; padding: 0.34rem 0.8rem; border-radius: 4px; }
 .ide input:not([type=checkbox]):not([type=radio]), .ide select, .ide textarea { padding: 0.32rem 0.5rem; border-radius: 3px; font-size: 13px; }

package/public/sw.js

@@ -1,6 +1,7 @@
 // pgkiln service worker for one application (served as /a/<alias>/sw.js with PGKILN = {base, offlinePages, offlineSubmit, version}).
 //   static files (app.css, app.js, icons) and the offline page: cached at install, served from the cache by their
 //   exact URL; pages ask for them with ?v=<version> (static-version.ts), so a changed file is fetched anew
+//   (offline, the cached copy of another version)
 //   pages (navigations): network first; offline, the cached copy (only when the app keeps pages) or the offline page
 //   signing in or out empties the page cache, so the next person on the device doesn't see them
 //   push notifications (migration 074): shown as they arrive, a click opens their page of the app;
@@ -40,8 +41,10 @@ self.addEventListener('fetch', (event) => {
   if (req.method !== 'GET') return;
 
   if (url.pathname.startsWith('/static/')) {
-    // the exact URL: another ?v= (a changed file) is not the cached copy
-    event.respondWith(caches.match(req, { cacheName: STATIC }).then((hit) => hit || fetch(req)));
+    // the exact URL: another ?v= (a changed file) is not the cached copy. Offline, the copy under another ?v= is
+    // better than none: a page kept on the device under an older version still gets its script and styles
+    const anyVersion = async () => (await caches.match(req, { cacheName: STATIC, ignoreSearch: true })) || Response.error();
+    event.respondWith(caches.match(req, { cacheName: STATIC }).then((hit) => hit || fetch(req).catch(anyVersion)));
     return;
   }
 

package/src/app.ts

@@ -70,6 +70,9 @@ import { galleryRoutes } from './builder/gallery.ts';
 import { appGroupRoutes } from './builder/app-groups.ts';
 import { crossAppRoutes } from './builder/cross-app.ts';
 import { workspaceBackupRoutes } from './builder/workspace-backups.ts';
+import { restCatalogRoutes } from './builder/rest-catalogs.ts';
+import { workspaceTransferRoutes } from './builder/workspace-transfer.ts';
+import { findWorkspaceRoutes } from './builder/find-workspace.ts';
 import { runtimeScope } from './db.ts';
 
 export async function buildApp(opts: { logger?: boolean } = {}) {
@@ -179,6 +182,9 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(appGroupRoutes);
   await app.register(crossAppRoutes);
   await app.register(workspaceBackupRoutes);
+  await app.register(restCatalogRoutes);
+  await app.register(workspaceTransferRoutes);
+  await app.register(findWorkspaceRoutes);
   await app.register(sharedRoutes);
   await app.register(designerRoutes);
   await app.register(lockRoutes);

package/src/builder/find-workspace.ts

@@ -0,0 +1,120 @@
+import type { FastifyInstance } from 'fastify';
+import { owner } from '../db.ts';
+import { esc, html, type Raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { documentShell } from '../layout.ts';
+import { senderAllowed, sendWith, type MailService } from '../mail/mail.ts';
+import { clientIp, getSession, logActivity, saveState, takeFlash, type Session } from '../session.ts';
+import { publicUrl } from '../sso.ts';
+import { back, BASE, builderHead, csrf, flash, THEME_COOKIE, validTheme, type Req } from './ui.ts';
+
+// "Find my workspace" on the builder's sign-in page (migration 096; APEX: Find
+// My Workspace): a developer who forgot which workspace to sign in to enters
+// their e-mail address, and the developer accounts with that address get a
+// mail with their user name and workspaces. The page says the same whatever
+// the address, the mail goes out after the answer (no timing difference), and
+// requests are limited per address and per IP address. It is offered only
+// when administrators chose a mail service for the builder (Workspace
+// utilities → Mail services → Builder mail).
+
+const PER_IP_HOUR = 10;
+const PER_ADDRESS_HOUR = 3;
+export const EMAIL = /^[^@\s<>"(),;:\\]+@[^@\s<>"(),;:\\]+\.[^@\s<>"(),;:\\]+$/;
+
+/** The builder's mail service and From address, when set up and usable; null otherwise. */
+export async function builderMail(): Promise<{ service: MailService; from: string } | null> {
+  const rows = (await owner.query<{ name: string; value: string }>(`select name, value from meta.setting where name in ('builder_mail_service', 'builder_mail_from')`)).rows;
+  const get = (k: string) => rows.find((r) => r.name === k)?.value ?? '';
+  const service = get('builder_mail_service') ? await owner.one<MailService>('select * from meta.mail_service where name = $1 and enabled', [get('builder_mail_service')]) : undefined;
+  const from = get('builder_mail_from');
+  return service && from && senderAllowed(service.senders, from) ? { service, from } : null;
+}
+
+/** The mail for one address: each account with it, and its workspaces. */
+export async function workspacesMail(email: string): Promise<{ to: string; subject: string; text: string; html: string } | null> {
+  const accounts = (await owner.query<{ username: string; admin: boolean; workspaces: string[] }>(
+    `select d.username, d.is_admin as admin,
+            coalesce((select array_agg(w.name order by w.id = 1 desc, lower(w.name)) from meta.workspace w
+                       where d.is_admin or exists (select 1 from meta.workspace_member m where m.workspace_id = w.id and m.username = d.username)), '{}') as workspaces
+       from meta.developer d where lower(d.email) = lower($1) order by d.username`, [email])).rows;
+  if (!accounts.length) return null;
+  const signIn = `${publicUrl()}${BASE}/login`;
+  const lines = accounts.map((a) => `${a.username}${a.admin ? ' (administrator: every workspace)' : ''}\n${a.workspaces.length ? a.workspaces.map((w) => `  - ${w}`).join('\n') : '  (no workspace yet: ask an administrator)'}`);
+  const text = `You asked which pgkiln workspaces you can sign in to.\n\n${lines.join('\n\n')}\n\nSign in at ${signIn}\n\nIf you didn't ask, you can ignore this mail: nothing was changed.`;
+  const body = `<p>You asked which pgkiln workspaces you can sign in to.</p>${accounts.map((a) => `<p><b>${esc(a.username)}</b>${a.admin ? ' (administrator: every workspace)' : ''}</p><ul>${a.workspaces.length ? a.workspaces.map((w) => `<li>${esc(w)}</li>`).join('') : '<li>No workspace yet: ask an administrator.</li>'}</ul>`).join('')}<p>Sign in at <a href="${esc(signIn)}">${esc(signIn)}</a></p><p>If you didn't ask, you can ignore this mail: nothing was changed.</p>`;
+  return { to: email, subject: 'Your pgkiln workspaces', text, html: body };
+}
+
+const page = (s: Session, theme: ReturnType<typeof validTheme>, body: Raw) =>
+  documentShell(
+    'Find my workspace · Builder',
+    html`<main class="signin">
+      <section class="signin-hero" aria-label="pgkiln">
+        <span class="signin-logo" aria-hidden="true">pg</span>
+        <h1 class="signin-title">pgkiln</h1>
+        <p class="signin-tagline">Build data applications on PostgreSQL, in SQL you can trust</p>
+      </section>
+      <section class="signin-panel"><div class="signin-form">${body}
+        <nav class="signin-actions" aria-label="Quick actions"><a href="${BASE}/login">${icon('arrow-left')} Back to sign in</a></nav></div></section>
+    </main>`,
+    'login-body ide-login signin-body',
+    {},
+    builderHead(),
+    { theme: theme ?? 'dark' },
+  );
+
+export async function findWorkspaceRoutes(app: FastifyInstance) {
+  app.get(`${BASE}/find-workspace`, async (req: Req, reply) => {
+    const s = await getSession(req, reply, null, BASE);
+    const done = takeFlash(s);
+    const error = takeFlash(s, '__ERROR');
+    await saveState(s);
+    const mail = await builderMail();
+    const theme = validTheme(req.cookies?.[THEME_COOKIE]);
+    const body = !mail
+      ? html`<h2>Find my workspace</h2><p class="muted u-mt0">This installation doesn't send mail to developers. Ask an administrator which workspaces you belong to; or sign in with your user name and password only: the workspace is optional.</p>`
+      : done
+        ? html`<h2>Check your mail</h2><div class="alert alert-success" role="status">${done}</div>`
+        : html`<h2>Find my workspace</h2>
+          <p class="muted u-mt0">Enter the e-mail address of your developer account: we send you your user name and the workspaces you can sign in to.</p>
+          ${error ? html`<div class="alert alert-error" role="alert">${error}</div>` : ''}
+          <form method="post" action="${BASE}/find-workspace">${csrf(s)}
+            <div class="field signin-field"><label class="sr-only" for="f_email">E-mail address</label>
+              <div class="signin-input">${icon('at')}<input id="f_email" name="email" type="email" placeholder="E-mail address" required autocomplete="email" maxlength="254"></div></div>
+            <button class="btn btn-hot signin-submit">Send</button>
+          </form>`;
+    return reply.type('text/html').send(page(s, theme, body));
+  });
+
+  app.post(`${BASE}/find-workspace`, async (req: Req, reply) => {
+    const s = await getSession(req, reply, null, BASE);
+    const to = `${BASE}/find-workspace`;
+    if (req.body?.__csrf !== s.csrf_token) {
+      flash(s, 'Your session expired. Please try again.', 'error');
+      return back(reply, s, to);
+    }
+    const email = String(req.body?.email ?? '').trim().slice(0, 254);
+    if (!EMAIL.test(email)) {
+      flash(s, 'Enter an e-mail address, e.g. ann@example.com.', 'error');
+      return back(reply, s, to);
+    }
+    const ip = clientIp(req);
+    const mail = await builderMail();
+    // the same limits and the same answer for every address
+    const recent = await owner.one<{ by_ip: number; by_address: number }>(
+      `select count(*) filter (where ip = $1)::int as by_ip, count(*) filter (where lower(detail) = lower($2))::int as by_address
+         from meta.activity_log where event = 'find_workspace' and app_id is null and at > now() - interval '1 hour'`, [ip, email]);
+    const limited = !!recent && (recent.by_ip >= PER_IP_HOUR || recent.by_address >= PER_ADDRESS_HOUR);
+    await logActivity({ appId: null, username: null, event: 'find_workspace', ip, detail: email.toLowerCase() });
+    if (mail && !limited)
+      // after the answer: the time it takes never tells whether an account has the address
+      setImmediate(() => {
+        workspacesMail(email)
+          .then((m) => (m ? sendWith(mail.service, { from: mail.from, to: [m.to], cc: [], bcc: [], replyTo: null, subject: m.subject, text: m.text, html: m.html, attachments: [] }) : null))
+          .catch((e) => console.error('find my workspace: the mail was not sent:', (e as Error).message));
+      });
+    flash(s, `If a developer account has the address ${email}, it gets a mail with its user name and workspaces in a few minutes. No mail? Ask an administrator.`);
+    return back(reply, s, to);
+  });
+}
+

package/src/builder/home.ts

@@ -298,6 +298,8 @@ export async function homeRoutes(app: FastifyInstance) {
         ${card(`${BASE}/developers`, icon('users'), 'Developers', 'Who may use this builder.')}
         ${s.workspace?.sql_workshop === false ? '' : card(`${BASE}/sql`, icon('database'), 'SQL Workshop', 'Run SQL, browse objects and load data.')}
         ${card(`${BASE}/backups`, icon('archive'), 'Manage backups', 'The backups of every application of this workspace; back them all up at once.')}
+        ${card(`${BASE}/rest-catalogs`, icon('globe'), 'REST Source Catalogs', 'Web services described once for the workspace (e.g. from an OpenAPI document); applications make REST data sources from them.')}
+        ${s.workspace?.admin ? card(`${BASE}/workspace-export`, icon('download'), 'Export and import', 'This workspace\'s components as one file: settings, developers, groups, links, catalogs, scripts, blueprints (workspace administrators).') : ''}
         ${card(`${BASE}/dashboard`, icon('activity'), 'Dashboard', 'Usage and problems across the workspace.')}
         ${(await isAdmin(s.username)) ? card(`${BASE}/instance`, icon('settings'), 'Instance settings', 'Session length, sign-in throttling and the server\'s configuration (administrators).') : ''}
         ${(await isAdmin(s.username))

package/src/builder/mail.ts

@@ -207,10 +207,37 @@ export async function mailRoutes(app: FastifyInstance) {
             <td data-label="Status">${x.enabled ? 'enabled' : html`<b>disabled</b>`}</td></tr>`)
             : html`<tr><td colspan="6" class="empty">No mail services yet.</td></tr>`}</tbody></table></div>`,
         html`<a class="btn btn-sm btn-hot" href="${BASE}/mail/new">${icon('plus')} Add service</a>`)}
+      ${await builderMailRegion(s, services)}
       ${region('Recent mail', mailTable(recent, true))}`;
     return send(reply, s, shell(s, 'Mail services', [['App Builder', BASE], ['Workspace utilities', `${BASE}/utilities`], ['Mail services']], main));
   });
 
+  // (096) the builder's own mail ("Find my workspace"): a service and a From address it may send as
+  app.post(`${BASE}/mail/builder`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s || !(await adminOnly(s, reply, 'Mail services'))) return;
+    const name = String(req.body?.service ?? '');
+    const from = String(req.body?.from ?? '').trim();
+    try {
+      if (!name) await owner.query(`delete from meta.setting where name in ('builder_mail_service', 'builder_mail_from')`);
+      else {
+        const svc = await owner.one<{ senders: string[] }>('select senders from meta.mail_service where name = $1', [name]);
+        if (!svc) throw new Error('Choose one of the mail services.');
+        if (!/^[^@\s<>"]+@[^@\s<>"]+$/.test(from)) throw new Error('The From address is an e-mail address, e.g. pgkiln@example.com.');
+        if (!senderAllowed(svc.senders, from)) throw new Error(`The service ${name} may not send as ${from}: add it to its senders first.`);
+        await owner.tx(async (c) => {
+          for (const [k, v] of [['builder_mail_service', name], ['builder_mail_from', from]])
+            await c.query('insert into meta.setting (name, value) values ($1, $2) on conflict (name) do update set value = excluded.value', [k, v]);
+        });
+      }
+      await logActivity({ appId: null, username: s.username, event: 'mail_service', ip: clientIp(req), detail: name ? `builder mail: ${name} as ${from}` : 'builder mail: none' });
+      flash(s, name ? 'Builder mail saved: "Find my workspace" sends through it.' : 'The builder sends no mail now.');
+    } catch (e) {
+      flash(s, (e as Error).message, 'error');
+    }
+    return back(reply, s, `${BASE}/mail#builder-mail`);
+  });
+
   // a new service: choose the provider, then its settings only
   app.get(`${BASE}/mail/new`, async (req: Req, reply) => {
     const s = await developer(req, reply);
@@ -423,3 +450,15 @@ export async function mailRoutes(app: FastifyInstance) {
   app.post(`${BASE}/apps/:id(^\\d+$)/mail/:mid(^\\d+$)/retry`, change('queued', ['error', 'cancelled']));
   app.post(`${BASE}/apps/:id(^\\d+$)/mail/:mid(^\\d+$)/cancel`, change('cancelled', ['queued']));
 }
+
+/** (096) Mail services → Builder mail: the service and From address of the builder's own mail. */
+async function builderMailRegion(s: Session, services: { name: string; enabled: boolean }[]) {
+  const set = Object.fromEntries((await owner.query<{ name: string; value: string }>(`select name, value from meta.setting where name in ('builder_mail_service', 'builder_mail_from')`)).rows.map((r) => [r.name, r.value]));
+  return region('Builder mail', html`<form method="post" action="${BASE}/mail/builder">${csrf(s)}
+    <p class="muted u-mt0">The service the builder itself sends through: <b>Find my workspace</b> on the sign-in page mails developers their workspaces (to the address on their account). None: the builder sends no mail.</p>
+    <div class="form-grid">
+      ${select('service', 'Service', set.builder_mail_service ?? '', [['', 'None'], ...services.map((x) => [x.name, `${x.name}${x.enabled ? '' : ' (disabled)'}`] as [string, string])])}
+      ${input('from', 'From address', set.builder_mail_from ?? '', { type: 'email', placeholder: 'pgkiln@example.com', help: 'One of the service\'s senders.' })}
+    </div>
+    <div class="buttons"><button class="btn">Save</button></div></form>`, '', 'builder-mail');
+}

package/src/builder/region-settings.ts

@@ -53,6 +53,9 @@ const CHART_LABELS: Record<string, string> = {
   funnel: 'Funnel (stages in the query order)',
   radar: 'Radar (one axis per row)',
   gantt: 'Gantt (task, start and end columns)',
+  treemap: 'Treemap (label and value; node_id, parent_id for a hierarchy)',
+  sunburst: 'Sunburst (label and value; node_id, parent_id for a hierarchy)',
+  timeline: 'Timeline (label, start, end; a series column for lanes)',
   pyramid: 'Pyramid (one series; two series back to back)',
   polar: 'Polar area (one sector per row)',
   range: 'Range (low and high columns: floating columns)',
@@ -131,6 +134,11 @@ export function mergeChartSettings(config: Config, b: Body, a: Allowed): Config
     if (raw && Number.isFinite(v)) gauge[k] = v;
   }
   set('gauge', Object.keys(gauge).length ? gauge : undefined);
+  // (sprint 69) Gantt drag and drop
+  set('gantt_move', b.gantt_move?.trim() || undefined);
+  const authz = b.gantt_move_authz?.trim().toUpperCase();
+  set('gantt_move_authz', authz && (authz === 'MUST_NOT_BE_PUBLIC_USER' || a.authz?.has(authz)) ? authz : undefined);
+  set('gantt_snap', b.gantt_snap === 'day' || b.gantt_snap === 'hour' ? b.gantt_snap : undefined);
   return out;
 }
 
@@ -728,6 +736,7 @@ export async function regionSettingsForm(pageId: number, appId: number, r: Regio
   const cfg = r.config ?? {};
   const id = (n: string) => `rg_${r.id}_${n}`;
   const pages = async () => (await owner.query('select page_no, name from meta.page where app_id = $1 order by page_no', [appId])).rows;
+  const schemes = async () => (await owner.query('select name from meta.authz_scheme where app_id = $1 order by name', [appId])).rows.map((x) => x.name as string);
   let body: Raw;
   let title = 'Settings';
   switch (r.type as SettingsType) {
@@ -752,7 +761,16 @@ export async function regionSettingsForm(pageId: number, appId: number, r: Regio
         </div>
         <small class="help">Gauge charts only. A warning threshold above the critical one means low values are bad (e.g. warning 50, critical 20).</small></fieldset>
         ${linkFieldset(id, cfg.link, await pages(), 'Each data point')}
-        <small class="help">Drill-down: <code>#column#</code> takes the value from the point's row, <code>#series#</code> the name of its series. Columns only the link refers to are not drawn.</small>`;
+        <small class="help">Drill-down: <code>#column#</code> takes the value from the point's row, <code>#series#</code> the name of its series. Columns only the link refers to are not drawn.</small>
+        <fieldset class="prop-group"><legend>Gantt: drag and drop</legend><div class="form-grid">
+          <div class="field" data-wide><label class="label" for="${id('gantt_move')}">SQL that moves a task</label>
+            <textarea id="${id('gantt_move')}" name="gantt_move" rows="3" data-code="sql" placeholder="update my_schema.task set starts = :NEW_START::date, ends = :NEW_END::date where id = :TASK_ID::int">${cfg.gantt_move ?? ''}</textarea>
+            <small class="help">Gantt charts with a <code>task_id</code> column. Runs as the application's database role (row level security applies) with <code>:TASK_ID</code>, <code>:NEW_START</code> and <code>:NEW_END</code> (<code>YYYY-MM-DD</code>, or <code>YYYY-MM-DDTHH:MM</code> by the hour; a milestone gets the same start and end). Empty: tasks can't be dragged.</small></div>
+          <div class="field"><label class="label" for="${id('gantt_move_authz')}">Who may drag</label>
+            <select id="${id('gantt_move_authz')}" name="gantt_move_authz">${opt('', 'Everyone who sees the chart', cfg.gantt_move_authz)}${opt('MUST_NOT_BE_PUBLIC_USER', 'Signed-in users', cfg.gantt_move_authz)}${(await schemes()).map((n) => opt(n, `Authorization: ${n}`, cfg.gantt_move_authz))}</select></div>
+          <div class="field"><label class="label" for="${id('gantt_snap')}">Steps</label>
+            <select id="${id('gantt_snap')}" name="gantt_snap">${opt('', 'Days, or hours when a task has a time', cfg.gantt_snap)}${opt('day', 'Days', cfg.gantt_snap)}${opt('hour', 'Hours', cfg.gantt_snap)}</select></div>
+        </div><small class="help">Only tasks the user sees in this chart can be moved; the chart is drawn again from its query afterwards.</small></fieldset>`;
       break;
     case 'cards':
       title = 'Cards settings';