ZDDC/tables/js/render.js

(function (app) {
    'use strict';

    function renderHeader(theadEl, columns, sortState, filterMap, onHeaderClick, onFilterChange) {
        const util = app.modules.util;
        const filters = app.modules.filters;
        const sort = app.modules.sort;
        theadEl.innerHTML = '';

        const titleRow = util.h('tr', { className: 'zddc-table__title-row' });
        const filterRow = util.h('tr', { className: 'zddc-table__filter-row' });

        for (let i = 0; i < columns.length; i++) {
            const col = columns[i];
            const indicator = sort.indicator(sortState, col.field);
            const th = util.h('th', {
                className: 'zddc-table__th',
                'data-field': col.field,
                style: col.width ? 'width:' + col.width : null,
                onClick: function (ev) { onHeaderClick(col.field, ev.shiftKey); }
            }, col.title || col.field, indicator);
            titleRow.appendChild(th);

            const td = util.h('td', { className: 'zddc-table__filter-cell' });
            const f = filterMap[col.field] || filters.defaultFilterFor(col);
            if (filters.isEnumColumn(col)) {
                const select = util.h('select', {
                    multiple: true,
                    'aria-label': 'Filter ' + (col.title || col.field),
                    className: 'zddc-table__filter-enum',
                    onChange: function (ev) {
                        const opts = ev.target.options;
                        const picked = [];
                        for (let j = 0; j < opts.length; j++) {
                            if (opts[j].selected) {
                                picked.push(opts[j].value);
                            }
                        }
                        onFilterChange(col.field, { kind: 'enum', value: picked });
                    }
                });
                for (let j = 0; j < col.enum.length; j++) {
                    const v = col.enum[j];
                    const opt = util.h('option', { value: v }, v);
                    if (Array.isArray(f.value) && f.value.indexOf(v) !== -1) {
                        opt.selected = true;
                    }
                    select.appendChild(opt);
                }
                td.appendChild(select);
            } else {
                const input = util.h('input', {
                    type: 'text',
                    className: 'zddc-table__filter-text',
                    placeholder: 'filter…',
                    'aria-label': 'Filter ' + (col.title || col.field),
                    value: typeof f.value === 'string' ? f.value : '',
                    onInput: function (ev) {
                        onFilterChange(col.field, { kind: 'contains', value: ev.target.value });
                    }
                });
                td.appendChild(input);
            }
            filterRow.appendChild(td);
        }

        theadEl.appendChild(titleRow);
        theadEl.appendChild(filterRow);
    }

    function renderBody(tbodyEl, rows, columns) {
        const util = app.modules.util;
        tbodyEl.innerHTML = '';
        for (let i = 0; i < rows.length; i++) {
            const row = rows[i];
            const tr = util.h('tr', {
                className: 'zddc-table__row' + (row.editable ? ' zddc-table__row--editable' : ' zddc-table__row--readonly'),
                'data-url': row.url,
                'data-editable': row.editable ? '1' : '0',
                onClick: function (ev) {
                    const target = ev.currentTarget;
                    const editable = target.getAttribute('data-editable') === '1';
                    const url = target.getAttribute('data-url');
                    if (editable && url) {
                        // Indirection so tests can intercept without
                        // fighting Chromium's location.assign property
                        // descriptor. Production calls window.location.assign.
                        const nav = (window.tablesApp && window.tablesApp.navigateTo) ||
                            function (u) { window.location.assign(u); };
                        nav(url);
                    }
                }
            });
            for (let c = 0; c < columns.length; c++) {
                const col = columns[c];
                const raw = util.resolveField(row.data, col.field);
                const text = util.formatCell(raw, col.format);
                tr.appendChild(util.h('td', { className: 'zddc-table__cell' }, text));
            }
            tbodyEl.appendChild(tr);
        }
    }

    function renderRowCount(el, displayed, total) {
        if (!el) return;
        if (displayed === total) {
            el.textContent = total + (total === 1 ? ' row' : ' rows');
        } else {
            el.textContent = displayed + ' of ' + total + ' rows';
        }
    }

    app.modules.render = {
        header: renderHeader,
        body: renderBody,
        rowCount: renderRowCount
    };
})(window.tablesApp);