@itrocks/list 0.8.0 → 0.13.3

package/property-select.js

@@ -0,0 +1,245 @@
+import { PropertySelectView } from '@itrocks/property-select/front/property-select.js';
+import { normalisePath } from '@itrocks/property-select/property-select.js';
+import { HttpStateStore } from './selector-state.js';
+export class ListPropertySelect {
+    article;
+    options;
+    abort = new AbortController();
+    button;
+    disposed = false;
+    drag;
+    observer;
+    pane;
+    pending = new Map();
+    view;
+    constructor(article, options) {
+        this.article = article;
+        this.options = options;
+        const content = document.createElement('div');
+        this.button = article.querySelector('.add-column');
+        this.pane = options.mountSelector(content, 'Add columns');
+        this.view = new PropertySelectView(content, {
+            consumer: this, metadata: options.metadata, root: article.dataset.propertyRoot,
+            advice: options.advice, stateKey: article.dataset.selectorKey, stateMode: 'session',
+            stateStore: new HttpStateStore(), usedPaths: this.paths()
+        }, { templateUrl: options.templateUrl });
+        this.observer = new MutationObserver(records => {
+            if (this.drag && records.some(record => record.target.tagName === 'TBODY'))
+                this.view.selector.cancel(this.drag.intent.id, 'row view changed');
+            this.view.selector.setConfiguration({ usedPaths: this.paths() });
+        });
+        this.observer.observe(article.querySelector('thead'), { childList: true, subtree: true });
+        this.observer.observe(article.querySelector('tbody'), { childList: true });
+        this.button.addEventListener('click', () => this.pane.open(), { signal: this.abort.signal });
+    }
+    async loadColumn(path, signal) {
+        const form = this.article.querySelector('form');
+        const table = this.article.querySelector('table.objects');
+        const rows = [...table.tBodies[0].rows];
+        const ids = rows.map(row => row.querySelector('input[name=id]').value);
+        const query = new URLSearchParams({ column: path, rowIds: ids.join(',') });
+        const response = await fetch(`${form.action}?${query}`, {
+            signal: AbortSignal.any([signal, this.abort.signal])
+        });
+        const result = await response.json();
+        if (!response.ok)
+            throw new Error(result.error ?? 'Column unavailable');
+        signal.throwIfAborted();
+        if (this.disposed || !this.article.isConnected || rows.some((row, index) => table.tBodies[0].rows[index] !== row)
+            || rows.length !== table.tBodies[0].rows.length)
+            throw new Error('The row view changed; try again');
+        if (result.path !== path)
+            throw new Error('Mismatched column response');
+        const values = new Map(result.rows.map(row => [String(row.id), row.html]));
+        if (ids.some(id => !values.has(id)))
+            throw new Error('The row scope changed; reload the list');
+        const header = document.createElement('th');
+        header.dataset.property = path;
+        header.dataset.sortable = String(result.sortable);
+        const input = document.createElement('input');
+        input.name = `search.${encodeURIComponent(path).replaceAll('.', '%2E')}`;
+        input.dataset.propertyFilter = path;
+        input.setAttribute('aria-label', `Filter ${result.label}`);
+        header.append(result.label, input);
+        const cells = ids.map(id => {
+            const cell = document.createElement('td');
+            cell.innerHTML = values.get(id);
+            return cell;
+        });
+        return { cells, header };
+    }
+    async add(path, signal) {
+        const content = await this.loadColumn(path, signal);
+        const outcome = await this.options.addition.add({ create: () => content, id: path });
+        await this.options.saveColumns();
+        this.view.selector.setConfiguration({ usedPaths: this.paths() });
+        return outcome;
+    }
+    begin(intent, sample) {
+        if (this.disposed || this.drag || this.pending.size)
+            throw new Error('A column operation is pending');
+        const path = normalisePath(intent.path);
+        const paths = this.paths();
+        const suspension = this.pane.suspend({ mobileOnly: true });
+        try {
+            const operation = this.options.addition.beginExternal({
+                id: path,
+                accept: async (signal) => {
+                    const form = this.article.querySelector('form');
+                    const query = new URLSearchParams({ column: path, validate: '1' });
+                    const response = await fetch(`${form.action}?${query}`, {
+                        signal: AbortSignal.any([signal, this.abort.signal])
+                    });
+                    const result = await response.json();
+                    if (!response.ok || result.path !== path)
+                        throw new Error(result.error ?? 'Column unavailable');
+                },
+                create: () => {
+                    const header = document.createElement('th');
+                    header.dataset.property = path;
+                    header.dataset.sortable = 'false';
+                    header.textContent = path;
+                    const cells = [...this.article.querySelectorAll('table.objects tbody tr')].map(() => {
+                        const cell = document.createElement('td');
+                        cell.textContent = 'Loading…';
+                        return cell;
+                    });
+                    return { cells, header };
+                },
+                load: async (signal) => {
+                    try {
+                        return await this.loadColumn(path, signal);
+                    }
+                    catch (error) {
+                        if (!this.disposed && !signal.aborted)
+                            this.previewError(path);
+                        throw error;
+                    }
+                }
+            }, sample);
+            this.drag = { intent, operation, paths, restore: () => suspension.restore() };
+        }
+        catch (error) {
+            suspension.restore();
+            throw error;
+        }
+    }
+    cancel(id) {
+        if (this.drag?.intent.id !== id)
+            return;
+        const drag = this.drag;
+        drag.operation.cancel();
+        this.drag = undefined;
+        drag.restore();
+        this.view.selector.setConfiguration({ usedPaths: this.paths() });
+    }
+    previewError(path) {
+        const header = [...this.article.querySelectorAll('thead [data-property]')]
+            .find(header => header.dataset.property === path);
+        if (!header)
+            return;
+        for (const row of this.article.querySelectorAll('tbody tr'))
+            row.cells[header.cellIndex].textContent = 'Unable to load values';
+        if (header.querySelector('.column-retry'))
+            return;
+        const retry = document.createElement('button');
+        retry.type = 'button';
+        retry.className = 'column-retry';
+        retry.textContent = 'Retry values';
+        retry.addEventListener('click', event => {
+            event.stopPropagation();
+            void this.options.addition.retry(path);
+        }, { signal: this.abort.signal });
+        header.append(retry);
+    }
+    dispose() {
+        if (this.disposed)
+            return;
+        if (this.drag)
+            this.cancel(this.drag.intent.id);
+        this.disposed = true;
+        this.abort.abort();
+        this.observer.disconnect();
+        this.view.dispose();
+        this.pane.remove();
+        this.options.addition.dispose();
+        this.button.hidden = true;
+        this.pending.clear();
+    }
+    async end(id, sample) {
+        const drag = this.drag;
+        if (!drag || drag.intent.id !== id)
+            throw new Error('Unknown column transport');
+        try {
+            const status = await drag.operation.finish(sample);
+            if (status !== 'cancelled')
+                await this.options.saveColumns();
+            if (this.disposed)
+                return { ...drag.intent, status: 'cancelled' };
+            if (this.drag === drag)
+                this.drag = undefined;
+            this.view.selector.setConfiguration({ usedPaths: this.paths() });
+            return { ...drag.intent, status };
+        }
+        catch (error) {
+            drag.operation.cancel();
+            return { ...drag.intent, status: 'rejected', message: String(error) };
+        }
+        finally {
+            if (this.drag === drag)
+                this.drag = undefined;
+            drag.restore();
+        }
+    }
+    async mount() {
+        const mounted = await this.view.mount();
+        if (mounted && !this.disposed)
+            this.button.hidden = false;
+        return mounted;
+    }
+    move(id, sample) {
+        if (this.drag?.intent.id === id)
+            this.drag.operation.move(sample);
+    }
+    paths() {
+        if (this.drag)
+            return [...this.drag.paths];
+        return [...this.article.querySelectorAll('thead [data-property]:not(.column-add-provisional)')]
+            .map(header => header.dataset.property);
+    }
+    async select(intent, signal) {
+        const path = normalisePath(intent.path);
+        try {
+            if (this.drag)
+                throw new Error('A column transport is pending');
+            let status;
+            const pending = this.pending.get(path);
+            if (pending) {
+                await pending;
+                status = 'existing';
+            }
+            else if (this.paths().includes(path))
+                status = 'existing';
+            else {
+                const operation = this.add(path, signal);
+                this.pending.set(path, operation);
+                try {
+                    status = await operation;
+                }
+                finally {
+                    if (this.pending.get(path) === operation)
+                        this.pending.delete(path);
+                }
+            }
+            signal.throwIfAborted();
+            if (this.disposed)
+                throw new Error('List disposed');
+            this.options.addition.reveal(path);
+            this.options.addition.highlight(path);
+            return { ...intent, status };
+        }
+        catch (error) {
+            return { ...intent, message: error instanceof Error ? error.message : 'Column unavailable', status: 'rejected' };
+        }
+    }
+}

package/selector-state.d.ts

@@ -0,0 +1,14 @@
+import type { SelectorState } from '@itrocks/property-select/property-select.js';
+import type { StateRecord } from '@itrocks/property-select/property-select.js';
+import type { StateStore } from '@itrocks/property-select/property-select.js';
+/** The key is supplied by the host router; this transport does not derive it from location. */
+export declare class HttpStateStore implements StateStore {
+    private readonly endpoint;
+    private readonly fetcher;
+    private generation?;
+    constructor(endpoint?: string, fetcher?: typeof fetch);
+    read(key: string, signal?: AbortSignal): Promise<StateRecord>;
+    remove(key: string, revision: number): Promise<StateRecord>;
+    write(key: string, state: SelectorState, revision: number): Promise<StateRecord>;
+    private request;
+}

package/selector-state.js

@@ -0,0 +1,38 @@
+import { StateConflictError } from '@itrocks/property-select/property-select.js';
+/** The key is supplied by the host router; this transport does not derive it from location. */
+export class HttpStateStore {
+    endpoint;
+    fetcher;
+    generation;
+    constructor(endpoint = '/property-select/state/json', fetcher = globalThis.fetch.bind(globalThis)) {
+        this.endpoint = endpoint;
+        this.fetcher = fetcher;
+    }
+    read(key, signal) {
+        return this.request('GET', key, undefined, undefined, signal);
+    }
+    remove(key, revision) {
+        return this.request('DELETE', key, undefined, revision);
+    }
+    write(key, state, revision) {
+        return this.request('PUT', key, state, revision);
+    }
+    async request(method, key, state, revision, signal) {
+        const response = await this.fetcher(`${this.endpoint}?${new URLSearchParams({ key })}`, {
+            body: method === 'GET' ? undefined : JSON.stringify({ revision, state }), cache: 'no-store',
+            credentials: 'same-origin', method, signal,
+            headers: { 'Content-Type': 'application/json', 'X-Property-Select-Session': this.generation ?? '' }
+        });
+        if (response.status === 410)
+            throw new Error('The selector session has ended. Reload the page.');
+        if (response.status === 409)
+            throw new StateConflictError();
+        if (!response.ok)
+            throw new Error(`Unable to save selector state (${response.status}). Try again.`);
+        const generation = response.headers.get('X-Property-Select-Session') ?? undefined;
+        if (this.generation && generation !== this.generation)
+            throw new Error('The selector session has ended. Reload the page.');
+        this.generation = generation;
+        return response.json();
+    }
+}