/* columns: , serial: true/false, model_options: */ export default initial_vnode => { // component state let model = initial_vnode.attrs.model // displayed columns let columns = initial_vnode.attrs.columns if (!columns) { if (model.configs().selects) { columns = model.configs().selects.map(select => ({ label: select.alias || select.label })) } } // pagination let offset = 0 let limit = initial_vnode.attrs.pagination && initial_vnode.attrs.pagination.size || Infinity let pages = [] // [{activie: boolean, show: boolean}] function generate_pages() { if (limit > 0 && limit < Infinity && model.cache().count) { let active_page = offset / limit pages = Array.from(Array(Math.floor(model.cache().count / limit) + 1)) .map((_,i) => active_page == i ? {active: true} : {active: false}) if (pages.length <= 10) { pages.forEach((_, i, pages) => pages[i].show = true) } else { // some wicked calculation let _showed_pages = new Set([0, active_page, pages.length -1]) let l = active_page, r = active_page while (_showed_pages.size < 10) { l -= 1 if (l < 0) { _showed_pages.add(r+1) r += 1 } else { _showed_pages.add(l) } if (_showed_pages.size < 10) { r += 1 if (r >= pages.length) { _showed_pages.add(l-1) l -= 1 } else { _showed_pages.add(r) } } } _showed_pages.forEach(v => pages[v].show = true) } } } return { view: vnode => { // try to generate columns if it is still uninitialized if (typeof columns == 'undefined' || columns.length == 0) { columns = model.data(offset, limit) && model.data(offset, limit).length && Object.keys(model.data(offset, limit)[0]).map(key => ({label: key})) || [] } // refresh paginations generate_pages() return [ m('table', [ // always show table header m('thead', m('tr', [ vnode.attrs.serial ? m('th.centered', '序号') : undefined, ...columns.map(column => m('th.centered', column.label)) ])), model.data(offset, limit).length ? m('tbody', model.data(offset, limit).map((row, i) => m('tr', [ vnode.attrs.serial ? m('td.centered', offset+i+1) : undefined, ...columns.map(column => { let v = row[column.label] || '' if (typeof column.tag != 'undefined') v = m(column.tag, v) return m(`td${column.class || ''}`, v) }) ]))) : m('', 'Empty') ]), pages.length > 1 ? m('.centered', m('.pagination.centered', pages.map((page, i) => page.show ? m('a', { class: page.active ? 'active' : '', onclick: e => { offset = i*limit model.select(offset, limit) } }, i+1) : undefined)) ) : undefined ] } } }