flowdeck/app/templates/_database_table_scripts.html

<!-- ═══════════ Database Table Scripts — Vanilla JS (no Alpine) ═══════════ -->
<script>
(function() {
    'use strict';
    const COLLECTION_ID = window.__DB_COLLECTION_ID || 0;
    const PAGE_ID = window.__DB_PAGE_ID || 0;

    // ── State ──
    const state = {
        properties: [],
        pages: [],
        editingCell: null  // {pageId, propId, input}
    };

    // ── Icons helper (mirrors fd_icon on server side) ──
    const propTypeIcons = {
        title: 'Aa', text: 'Aa', number: '#', select: '☰',
        multi_select: '☰', date: '📅', checkbox: '☑',
        url: '🔗', email: '✉', phone: '📞'
    };

    function cellValue(cpage, prop) {
        if (!cpage.property_values_json) return '';
        let pv;
        try {
            pv = typeof cpage.property_values_json === 'string'
                ? JSON.parse(cpage.property_values_json)
                : cpage.property_values_json;
        } catch(e) { return ''; }
        const val = pv[String(prop.id)];
        if (val === undefined || val === null) {
            return prop.prop_type === 'title' ? (cpage.title || '') : '';
        }
        if (Array.isArray(val)) return val.join(', ');
        return String(val);
    }

    // ── Render ──
    function renderTable() {
        const thead = document.getElementById('db-thead');
        const tbody = document.getElementById('db-tbody');
        if (!thead || !tbody) return;

        const props = state.properties;
        const pages = state.pages;

        // Header
        let h = '<tr class="db-header-row">';
        h += '<th class="db-th db-th-handle" style="width:32px"></th>';
        for (const prop of props) {
            h += '<th class="db-th db-th-property"><div class="db-th-content">';
            h += '<span class="db-prop-type-icon">' + (propTypeIcons[prop.prop_type] || 'Aa') + '</span>';
            h += '<span class="db-prop-name">' + escHtml(prop.name) + '</span>';
            h += '</div></th>';
        }
        h += '<th class="db-th db-th-add-prop"><button id="db-add-prop-btn" class="db-add-prop-btn">+ Add property</button></th>';
        h += '</tr>';
        thead.innerHTML = h;

        // Bind Add Property
        const addBtn = document.getElementById('db-add-prop-btn');
        if (addBtn) addBtn.onclick = showPropModal;

        // Body
        let b = '';
        // New Page row
        b += '<tr class="db-row db-row-new">';
        b += '<td class="db-td db-td-handle"><span class="db-plus-icon">+</span></td>';
        b += '<td class="db-td db-td-name" colspan="' + Math.max(1, props.length + 1) + '">';
        b += '<button id="db-new-page-btn" class="db-new-page-btn">New page</button>';
        b += '</td></tr>';

        // Data rows
        for (let i = 0; i < pages.length; i++) {
            const cp = pages[i];
            b += '<tr class="db-row" data-page-id="' + cp.id + '" data-idx="' + i + '">';
            // Drag handle
            b += '<td class="db-td db-td-handle">';
            b += '<span class="db-drag-handle db-hover-only" style="visibility:hidden">⋮⋮</span>';
            b += '</td>';
            // Cells
            for (const prop of props) {
                const val = cellValue(cp, prop) || '\u2014';
                const cellId = 'cell-' + cp.id + '-' + prop.id;
                b += '<td class="db-td db-td-cell">';
                b += '<div class="db-cell-content" id="' + cellId + '" data-page-id="' + cp.id + '" data-prop-id="' + prop.id + '">';
                b += '<span class="db-cell-value">' + escHtml(val) + '</span>';
                b += '</div></td>';
            }
            // Open button (hover only)
            b += '<td class="db-td db-td-open db-hover-only" style="visibility:hidden">';
            b += '<button class="db-open-btn db-open-page-btn" data-page-id="' + cp.id + '" title="Open">↗</button>';
            b += '</td>';
            b += '</tr>';
        }

        // Empty rows (fill to 5 total: 1 New Page + data + empty)
        const emptyNeeded = Math.max(0, 4 - pages.length);
        for (let i = 0; i < emptyNeeded; i++) {
            b += '<tr class="db-row db-row-empty">';
            b += '<td class="db-td db-td-handle"></td>';
            for (let j = 0; j < props.length; j++) {
                b += '<td class="db-td db-td-cell"><div class="db-cell-content"></div></td>';
            }
            b += '<td class="db-td db-td-open"></td>';
            b += '</tr>';
        }

        tbody.innerHTML = b;

        // Bind events after render
        bindTableEvents();
    }

    function escHtml(s) {
        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    function bindTableEvents() {
        const tbody = document.getElementById('db-tbody');
        if (!tbody) return;

        // New Page button
        const newBtn = document.getElementById('db-new-page-btn');
        if (newBtn) newBtn.onclick = addNewPage;

        // Cell click → start editing
        tbody.querySelectorAll('.db-cell-content').forEach(el => {
            el.onclick = function(e) {
                if (state.editingCell) return;
                const pageId = parseInt(this.dataset.pageId);
                const propId = parseInt(this.dataset.propId);
                startEditCell(pageId, propId, this);
            };
        });

        // Open buttons
        tbody.querySelectorAll('.db-open-page-btn').forEach(btn => {
            btn.onclick = function(e) {
                e.stopPropagation();
                const pageId = parseInt(this.dataset.pageId);
                window.location.href = '/pages/' + pageId;
            };
        });

        // Row hover effects
        tbody.querySelectorAll('.db-row').forEach(row => {
            row.onmouseenter = function() {
                this.querySelectorAll('.db-hover-only').forEach(el => { el.style.visibility = 'visible'; });
            };
            row.onmouseleave = function() {
                this.querySelectorAll('.db-hover-only').forEach(el => { el.style.visibility = 'hidden'; });
            };
        });
    }

    // ── Cell Editing ──
    function startEditCell(pageId, propId, cellEl) {
        const cp = state.pages.find(p => p.id === pageId);
        const prop = state.properties.find(p => p.id === propId);
        if (!cp || !prop) return;

        const span = cellEl.querySelector('.db-cell-value');
        const currentVal = cellValue(cp, prop);

        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'db-cell-input';
        input.value = currentVal;
        input.style.cssText = 'width:100%;padding:3px 6px;border:1px solid #2383E2;border-radius:3px;font-size:14px;font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-primary);outline:none;box-sizing:border-box;';

        cellEl.innerHTML = '';
        cellEl.appendChild(input);
        cellEl.classList.add('db-cell-editing');
        input.focus();

        state.editingCell = { pageId, propId, input, cellEl };

        input.onkeydown = function(e) {
            if (e.key === 'Enter') { commitEditCell(); }
            else if (e.key === 'Escape') { cancelEditCell(); }
        };
        input.onblur = function() { commitEditCell(); };
    }

    function commitEditCell() {
        if (!state.editingCell) return;
        const { pageId, propId, input, cellEl } = state.editingCell;
        const val = input.value;
        state.editingCell = null;

        const cp = state.pages.find(p => p.id === pageId);
        const prop = state.properties.find(p => p.id === propId);
        if (!cp || !prop) return;

        // Update local state
        let pv;
        try {
            pv = typeof cp.property_values_json === 'string'
                ? JSON.parse(cp.property_values_json)
                : cp.property_values_json;
        } catch(e) { pv = {}; }
        pv[String(propId)] = val;
        cp.property_values_json = pv;
        if (prop.prop_type === 'title') { cp.title = val; }

        // Re-render cell
        cellEl.classList.remove('db-cell-editing');
        cellEl.innerHTML = '<span class="db-cell-value">' + escHtml(val || '\u2014') + '</span>';
        cellEl.onclick = function(e) {
            if (state.editingCell) return;
            startEditCell(pageId, propId, cellEl);
        };

        // Persist to server
        const csrf = document.cookie.match(/csrf_token=([^;]+)/);
        fetch('/db/pages/' + pageId + '/api', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': csrf ? csrf[1] : ''
            },
            body: JSON.stringify({ title: cp.title, properties: pv })
        }).catch(function(e) { console.error('[DB] commitEditCell error:', e); });
    }

    function cancelEditCell() {
        if (!state.editingCell) return;
        const { pageId, propId, cellEl } = state.editingCell;
        state.editingCell = null;

        const cp = state.pages.find(p => p.id === pageId);
        const prop = state.properties.find(p => p.id === propId);
        if (!cp || !prop) return;
        const val = cellValue(cp, prop);

        cellEl.classList.remove('db-cell-editing');
        cellEl.innerHTML = '<span class="db-cell-value">' + escHtml(val || '\u2014') + '</span>';
        cellEl.onclick = function(e) {
            if (state.editingCell) return;
            startEditCell(pageId, propId, cellEl);
        };
    }

    // ── Add New Page ──
    async function addNewPage() {
        const csrf = document.cookie.match(/csrf_token=([^;]+)/);
        try {
            const r = await fetch('/api/collections/' + COLLECTION_ID + '/pages', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': csrf ? csrf[1] : ''
                },
                body: JSON.stringify({ title: 'New page' })
            });
            const d = await r.json();
            if (d.id) {
                state.pages.push({
                    id: d.id, title: d.title, position: d.position,
                    icon: 'file', collection_id: COLLECTION_ID,
                    property_values_json: {}
                });
                renderTable();
                console.log('[DB] New page created:', d.id);
            }
        } catch(e) {
            console.error('[DB] addNewPage error:', e);
        }
    }

    // ── Property Modal ──
    function showPropModal() {
        document.getElementById('db-prop-modal').style.display = 'flex';
        document.getElementById('db-prop-name-input').value = '';
        document.getElementById('db-prop-name-input').focus();
    }

    function hidePropModal() {
        document.getElementById('db-prop-modal').style.display = 'none';
    }

    async function createProperty() {
        const nameInput = document.getElementById('db-prop-name-input');
        const typeSelect = document.getElementById('db-prop-type-select');
        const name = nameInput.value.trim();
        if (!name) return;

        const csrf = document.cookie.match(/csrf_token=([^;]+)/);
        try {
            const r = await fetch('/db/' + COLLECTION_ID + '/properties/api', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': csrf ? csrf[1] : ''
                },
                body: JSON.stringify({ name: name, prop_type: typeSelect.value })
            });
            const d = await r.json();
            if (d.id) {
                state.properties.push(d);
                renderTable();
                hidePropModal();
                console.log('[DB] Property created:', d.name);
            }
        } catch(e) {
            console.error('[DB] createProperty error:', e);
        }
    }

    // ── View Dropdown ──
    function bindUI() {
        // Add view dropdown toggle
        document.getElementById('db-view-add-btn').onclick = function(e) {
            e.stopPropagation();
            const dd = document.getElementById('db-add-view-dropdown');
            dd.style.display = dd.style.display === 'none' ? 'block' : 'none';
        };
        document.addEventListener('click', function() {
            document.getElementById('db-add-view-dropdown').style.display = 'none';
        });

        // Property modal
        document.getElementById('db-prop-modal-close').onclick = hidePropModal;
        document.getElementById('db-prop-cancel').onclick = hidePropModal;
        document.getElementById('db-prop-create').onclick = createProperty;
        document.getElementById('db-prop-modal').onclick = function(e) {
            if (e.target === this) hidePropModal();
        };
        document.getElementById('db-prop-name-input').onkeydown = function(e) {
            if (e.key === 'Enter') createProperty();
        };

        // New button (top right)
        document.getElementById('db-new-btn').onclick = addNewPage;
    }

    // ── Load Data ──
    async function loadData() {
        {% if collection_data %}
        // Preloaded from server
        state.properties = {{ collection_data.properties | tojson }};
        state.pages = {{ collection_data.pages | tojson }};
        {% else %}
        try {
            const r = await fetch('/api/collections/' + COLLECTION_ID + '/table-data');
            const d = await r.json();
            state.properties = d.properties || [];
            state.pages = d.pages || [];
        } catch(e) {
            console.error('[DB] loadData error:', e);
        }
        {% endif %}
        console.log('[DB-Table] Init: collection_id=' + COLLECTION_ID, state.properties.length + ' props, ' + state.pages.length + ' pages');
        renderTable();
        bindUI();
    }

    // ── Start ──
    if (COLLECTION_ID > 0) {
        loadData();
    } else {
        console.warn('[DB-Table] No collection_id — cannot load database table');
    }
})();
</script>