ZDDC/shared/seltable.js

/**
 * ZDDC — shared selectable + autofilter table (used by the classifier catalog
 * and the tables tool's "Add from archive").
 *
 * A flat table with PER-COLUMN autofilters (one input per column, AND-combined,
 * each an AND of space-separated terms) plus an optional programmatic global
 * filter, and powerful selection for building complex sets quickly:
 *   click             replace selection + set anchor
 *   ctrl/cmd-click    toggle one row
 *   shift-click       range from the anchor (replaces the selection)
 *   ctrl-shift-click  ADD the anchor→row range to the existing selection
 *   ctrl/cmd-Enter    fire onActivate(selectedIds) — a bulk action
 *   Esc               clear
 * Ranges run over the CURRENTLY FILTERED order. Selection is keyed by a stable
 * rowId so it survives filtering and re-render.
 */
(function () {
    'use strict';
    if (!window.app) window.app = {};
    if (!window.app.modules) window.app.modules = {};

    function terms(q) { return String(q == null ? '' : q).trim().toLowerCase().split(/\s+/).filter(Boolean); }
    function hit(text, ts) {
        var t = String(text == null ? '' : text).toLowerCase();
        for (var i = 0; i < ts.length; i++) { if (t.indexOf(ts[i]) === -1) return false; }
        return true;
    }
    function elt(tag, cls, text) {
        var e = document.createElement(tag);
        if (cls) e.className = cls;
        if (text != null) e.textContent = text;
        return e;
    }

    function create(opts) {
        var container = opts.container;
        var columns = opts.columns || [];
        var rowId = opts.rowId || function (r) { return r.id; };
        var getRows = (typeof opts.rows === 'function') ? opts.rows : function () { return opts.rows || []; };
        var selected = Object.create(null);   // id -> true
        var anchorId = null;
        var globalTerms = [];                  // programmatic global filter (tests/reveal)
        var colFilters = Object.create(null);  // colKey -> terms[]  (the per-column autofilters)

        function rows() { return getRows() || []; }
        function colByKey(k) { for (var i = 0; i < columns.length; i++) { if (columns[i].key === k) return columns[i]; } return null; }
        function colVal(col, row) { return col.get ? col.get(row) : (row[col.key] == null ? '' : row[col.key]); }
        function rowBlob(row) { var s = ''; for (var i = 0; i < columns.length; i++) { s += colVal(columns[i], row) + ' '; } return s; }
        function rowMatches(row) {
            if (globalTerms.length && !hit(rowBlob(row), globalTerms)) return false;
            for (var k in colFilters) {
                var col = colByKey(k);
                if (col && !hit(colVal(col, row), colFilters[k])) return false;
            }
            return true;
        }
        function filtered() { return rows().filter(rowMatches); }

        function getSelection() { return Object.keys(selected); }
        function getFilteredRows() { return filtered(); }
        function fireSel() { if (opts.onSelectionChange) opts.onSelectionChange(getSelection()); }
        function setFilter(q) { globalTerms = terms(q); renderBody(); }
        function setColFilter(colKey, q) { var t = terms(q); if (t.length) colFilters[colKey] = t; else delete colFilters[colKey]; renderBody(); }
        function selectAllFiltered() { filtered().forEach(function (r) { selected[rowId(r)] = true; }); anchorId = null; renderBody(); fireSel(); }
        function clearSel() { selected = Object.create(null); anchorId = null; renderBody(); fireSel(); }

        function onRowClick(e, row, fr) {
            var ids = fr.map(rowId), id = rowId(row), idx = ids.indexOf(id), aIdx;
            if (e.shiftKey && anchorId != null && (aIdx = ids.indexOf(anchorId)) >= 0) {
                if (!(e.ctrlKey || e.metaKey)) selected = Object.create(null);   // shift replaces; ctrl-shift adds
                var lo = Math.min(aIdx, idx), hi = Math.max(aIdx, idx);
                for (var i = lo; i <= hi; i++) selected[ids[i]] = true;
            } else if (e.ctrlKey || e.metaKey) {
                if (selected[id]) delete selected[id]; else selected[id] = true;
                anchorId = id;
            } else {
                selected = Object.create(null); selected[id] = true; anchorId = id;
            }
            renderBody(); fireSel();
        }

        var bodyEl = null, countEl = null;
        function render() {
            container.textContent = '';
            container.classList.add('seltable');
            var bar = elt('div', 'seltable__bar');
            var allBtn = elt('button', 'btn btn-sm btn-secondary', 'Select filtered');
            allBtn.addEventListener('click', selectAllFiltered);
            var clrBtn = elt('button', 'btn btn-sm btn-secondary', 'Clear');
            clrBtn.addEventListener('click', clearSel);
            countEl = elt('span', 'seltable__count');
            bar.appendChild(allBtn); bar.appendChild(clrBtn); bar.appendChild(countEl);
            container.appendChild(bar);

            var scroll = elt('div', 'seltable__scroll');
            var table = elt('table', 'seltable__table');
            var thead = elt('thead'), htr = elt('tr');
            columns.forEach(function (c) { htr.appendChild(elt('th', c.cls || null, c.title || c.key)); });
            if (opts.rowExtra) htr.appendChild(elt('th', 'seltable__extrah', opts.extraTitle || ''));
            thead.appendChild(htr);
            // Per-column autofilter row.
            var ftr = elt('tr', 'seltable__filters');
            columns.forEach(function (c) {
                var th = elt('th');
                if (c.filterable !== false) {
                    var inp = elt('input', 'seltable__colfilter'); inp.type = 'search'; inp.placeholder = 'filter…'; inp.spellcheck = false;
                    inp.setAttribute('data-no-select', '');
                    inp.addEventListener('input', function () { setColFilter(c.key, this.value); });
                    th.appendChild(inp);
                }
                ftr.appendChild(th);
            });
            if (opts.rowExtra) ftr.appendChild(elt('th'));
            thead.appendChild(ftr);
            table.appendChild(thead);
            bodyEl = elt('tbody'); table.appendChild(bodyEl);
            scroll.appendChild(table); container.appendChild(scroll);

            container.tabIndex = 0;
            container.addEventListener('keydown', function (e) {
                if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); if (opts.onActivate) opts.onActivate(getSelection()); }
                else if (e.key === 'Escape') { clearSel(); }
            });
            renderBody();
        }
        function renderBody() {
            if (!bodyEl) return;
            var fr = filtered();
            bodyEl.textContent = '';
            fr.forEach(function (row) {
                var id = rowId(row);
                var tr = elt('tr', 'seltable__row' + (selected[id] ? ' is-selected' : ''));
                tr.dataset.id = id;
                tr.addEventListener('click', function (e) {
                    if (e.target.closest('input,button,select,a,[data-no-select]')) return;
                    onRowClick(e, row, fr);
                });
                if (opts.onRowDrop) {
                    tr.addEventListener('dragover', function (e) {
                        if (window.app.modules.dnd && window.app.modules.dnd.active()) { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; tr.classList.add('drop-hover'); }
                    });
                    tr.addEventListener('dragleave', function () { tr.classList.remove('drop-hover'); });
                    tr.addEventListener('drop', function (e) {
                        tr.classList.remove('drop-hover');
                        e.preventDefault();
                        var keys = window.app.modules.dnd ? window.app.modules.dnd.getDrag() : [];
                        if (window.app.modules.dnd) window.app.modules.dnd.clearDrag();
                        if (keys.length) opts.onRowDrop(id, keys);
                    });
                }
                columns.forEach(function (c) {
                    var td = elt('td', c.cls || null);
                    if (c.render) c.render(row, td); else td.textContent = colVal(c, row);
                    tr.appendChild(td);
                });
                if (opts.rowExtra) { var ex = elt('td', 'seltable__extra'); opts.rowExtra(row, ex); tr.appendChild(ex); }
                bodyEl.appendChild(tr);
            });
            if (countEl) {
                var nSel = getSelection().length;
                countEl.textContent = fr.length + ' shown' + (nSel ? ' · ' + nSel + ' selected' : '');
            }
        }

        return {
            render: render, renderBody: renderBody,
            getSelection: getSelection, getFilteredRows: getFilteredRows,
            setFilter: setFilter, setColFilter: setColFilter, selectAllFiltered: selectAllFiltered, clear: clearSel,
            clickRow: function (id, mods) {
                var fr = filtered();
                var row = fr.filter(function (r) { return String(rowId(r)) === String(id); })[0];
                if (row) onRowClick(Object.assign({ shiftKey: false, ctrlKey: false, metaKey: false }, mods || {}), row, fr);
            },
        };
    }

    window.app.modules.seltable = { create: create };
})();