Visiting `/Project-1/archive/PartyA/mdl` (no trailing slash) errored with `Unrecognized table URL` because tableNameFromUrl only matched `…/<rowsdir>/table.html`. The cascade declares `default_tool: tables` at `archive/<party>/mdl`, so the server serves the tables HTML at the bare directory URL — a shape the client didn't recognize. Two coordinated fixes: - shared/zddc-source.js `pathToDir`: was over-eagerly stripping the last segment when the URL didn't end in `/`. Now checks whether the last segment contains a dot — file URLs strip to parent (original behavior preserved), bare-directory URLs append the missing slash. Only call site is detectServerRoot, so blast radius is contained. - tables/js/context.js `tableNameFromUrl` + `rowEditUrl`: accept both legacy `…/<rowsdir>/table.html` and the new bare-directory shape. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
222 lines
8.6 KiB
JavaScript
222 lines
8.6 KiB
JavaScript
(function (app) {
|
|
'use strict';
|
|
|
|
// load() resolves to the table context the rest of the app renders:
|
|
// { title?, description?, columns, rows, defaults? }
|
|
//
|
|
// Two paths:
|
|
//
|
|
// 1. Inline JSON (test seam, and also any host that wants to
|
|
// pre-render a context server-side): if #table-context parses
|
|
// to a non-empty object, return it as-is.
|
|
//
|
|
// 2. File-backed walk (the real-world path served by zddc-server):
|
|
// page is at /<dir>/table.html — fetch <dir>/table.yaml,
|
|
// list every other *.yaml in <dir> as a row file (filtering
|
|
// out table.yaml and form.yaml so they don't appear as rows),
|
|
// parse each, and assemble the same shape. The whole table
|
|
// lives in one directory.
|
|
//
|
|
// file:// mode without a directory handle is unsupported in v1 — the
|
|
// walk only runs against http(s). file:// users must either inject an
|
|
// inline context (tests) or open the page through zddc-server.
|
|
async function load() {
|
|
const inline = readInlineContext();
|
|
if (inline && Object.keys(inline).length > 0) {
|
|
return inline;
|
|
}
|
|
if (typeof location !== 'undefined' &&
|
|
(location.protocol === 'http:' || location.protocol === 'https:')) {
|
|
try {
|
|
const walked = await walkServer();
|
|
if (walked) {
|
|
return walked;
|
|
}
|
|
} catch (err) {
|
|
console.error('[tables] failed to load table from server', err);
|
|
showStatus('Could not load table: ' + (err && err.message ? err.message : err));
|
|
}
|
|
}
|
|
return {};
|
|
}
|
|
|
|
function readInlineContext() {
|
|
const el = document.getElementById('table-context');
|
|
if (!el) {
|
|
return null;
|
|
}
|
|
try {
|
|
return JSON.parse(el.textContent || '{}');
|
|
} catch (err) {
|
|
console.error('[tables] failed to parse #table-context', err);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function showStatus(msg) {
|
|
const el = document.getElementById('table-status');
|
|
if (!el) return;
|
|
el.textContent = msg;
|
|
el.hidden = false;
|
|
}
|
|
|
|
async function walkServer() {
|
|
const source = window.zddc && window.zddc.source;
|
|
if (!source) {
|
|
throw new Error('zddc.source not available');
|
|
}
|
|
const tableName = tableNameFromUrl(location.pathname);
|
|
if (!tableName) {
|
|
throw new Error('Unrecognized table URL: ' + location.pathname);
|
|
}
|
|
const probe = await source.detectServerRoot();
|
|
if (!probe.handle) {
|
|
throw new Error(probe.status === 403
|
|
? 'No permission to list this directory'
|
|
: 'Server unreachable');
|
|
}
|
|
const dir = probe.handle;
|
|
|
|
// Spec lives at <currentdir>/table.yaml — the page URL is
|
|
// <currentdir>/table.html, so the spec is right next door.
|
|
const spec = await readYaml(dir, 'table.yaml');
|
|
if (!spec || !Array.isArray(spec.columns)) {
|
|
throw new Error('Spec table.yaml missing columns[]');
|
|
}
|
|
|
|
// Optional row schema from <dir>/form.yaml — same JSON Schema
|
|
// the form-mode renderer uses. Phase 2 derives per-cell editor
|
|
// widgets from it (text/number/date/select/checkbox).
|
|
// Best-effort: a directory with only table.yaml still renders
|
|
// as a sortable/filterable table; cells fall back to plain
|
|
// text inputs without per-property hints.
|
|
let rowSchema = null;
|
|
try {
|
|
const formSpec = await readYaml(dir, 'form.yaml');
|
|
if (formSpec && formSpec.schema) {
|
|
rowSchema = formSpec.schema;
|
|
}
|
|
} catch (_) {
|
|
// form.yaml missing or unreadable; carry on without it.
|
|
}
|
|
|
|
// Rows are every *.yaml in <currentdir> EXCEPT the spec
|
|
// (table.yaml) and the row-edit form (form.yaml). They live
|
|
// in the same directory by design — copying the directory
|
|
// copies the whole table.
|
|
const rows = await readRows(dir, '', tableName);
|
|
|
|
return {
|
|
title: spec.title,
|
|
description: spec.description,
|
|
columns: spec.columns,
|
|
defaults: spec.defaults,
|
|
rowSchema: rowSchema,
|
|
rows: rows
|
|
};
|
|
}
|
|
|
|
function tableNameFromUrl(pathname) {
|
|
// Two URL shapes resolve to a table page:
|
|
// Form A — /<…>/<rowsdir>/table.html (legacy/explicit
|
|
// entry-point; the tool was opened via the
|
|
// literal file URL).
|
|
// Form B — /<…>/<rowsdir> or /<…>/<rowsdir>/ (served
|
|
// by the cascade's `default_tool: tables` at
|
|
// archive/<party>/mdl; the URL is the directory
|
|
// itself, no trailing filename).
|
|
// In both cases the table name is the rows-directory basename.
|
|
const a = String(pathname || '').match(/\/([^\/]+)\/table\.html$/);
|
|
if (a) return a[1];
|
|
const trimmed = String(pathname || '').replace(/\/$/, '');
|
|
const b = trimmed.match(/\/([^\/]+)$/);
|
|
return b ? b[1] : null;
|
|
}
|
|
|
|
function stripDotSlash(p) {
|
|
let out = String(p || '');
|
|
if (out.startsWith('./')) out = out.slice(2);
|
|
if (out.startsWith('/')) out = out.slice(1);
|
|
if (out.endsWith('/')) out = out.slice(0, -1);
|
|
return out;
|
|
}
|
|
|
|
async function readYaml(dir, relPath) {
|
|
const fileHandle = await resolveFile(dir, relPath);
|
|
const file = await fileHandle.getFile();
|
|
const text = await file.text();
|
|
if (!window.jsyaml) {
|
|
throw new Error('js-yaml not loaded');
|
|
}
|
|
return window.jsyaml.load(text);
|
|
}
|
|
|
|
// Walk a "/"-separated relative path under dir, returning the
|
|
// FileSystemFileHandle (or HttpFileHandle) at the leaf.
|
|
async function resolveFile(dir, relPath) {
|
|
const parts = relPath.split('/').filter(Boolean);
|
|
if (parts.length === 0) {
|
|
throw new Error('Empty file path');
|
|
}
|
|
const fileName = parts.pop();
|
|
let cur = dir;
|
|
for (let i = 0; i < parts.length; i++) {
|
|
cur = await cur.getDirectoryHandle(parts[i]);
|
|
}
|
|
return cur.getFileHandle(fileName);
|
|
}
|
|
|
|
async function resolveDirectory(dir, relPath) {
|
|
const parts = relPath.split('/').filter(Boolean);
|
|
let cur = dir;
|
|
for (let i = 0; i < parts.length; i++) {
|
|
cur = await cur.getDirectoryHandle(parts[i]);
|
|
}
|
|
return cur;
|
|
}
|
|
|
|
async function readRows(rowsDir, _rowsRel, _tableName) {
|
|
const rows = [];
|
|
for await (const entry of rowsDir.values()) {
|
|
if (entry.kind !== 'file') continue;
|
|
if (!entry.name.endsWith('.yaml')) continue;
|
|
// Skip the spec and the row-edit form — they live alongside
|
|
// the rows but aren't rows themselves.
|
|
if (entry.name === 'table.yaml' || entry.name === 'form.yaml') continue;
|
|
try {
|
|
const handle = await rowsDir.getFileHandle(entry.name);
|
|
const file = await handle.getFile();
|
|
const data = window.jsyaml.load(await file.text());
|
|
rows.push({
|
|
url: rowEditUrl(entry.name),
|
|
// Underlying YAML URL — strip the trailing .html
|
|
// from the form-mode re-edit URL. Phase 3 PUTs to
|
|
// this URL with If-Match: <etag> for optimistic
|
|
// concurrency.
|
|
yamlUrl: rowEditUrl(entry.name).replace(/\.html$/, ''),
|
|
data: data || {},
|
|
// ETag captured by HttpFileHandle.getFile from the
|
|
// server's response header. null in offline / file://
|
|
// mode (no HTTP roundtrip happened).
|
|
etag: handle._etag || null,
|
|
editable: true
|
|
});
|
|
} catch (err) {
|
|
console.warn('[tables] skipping unparseable row', entry.name, err);
|
|
}
|
|
}
|
|
return rows;
|
|
}
|
|
|
|
// Re-edit URL for one row. The page directory is the same
|
|
// directory the rows live in, regardless of which URL shape
|
|
// (Form A `…/table.html` vs Form B bare `…/<rowsdir>`) we were
|
|
// opened with — see tableNameFromUrl.
|
|
function rowEditUrl(rowFileName) {
|
|
let pageDir = location.pathname.replace(/\/table\.html$/, '/');
|
|
if (!pageDir.endsWith('/')) pageDir += '/';
|
|
return pageDir + rowFileName + '.html';
|
|
}
|
|
|
|
app.modules.context = { load: load };
|
|
})(window.tablesApp);
|