postgrest-mithril/src/components/Table.js

/*
	columns: <displayed columns>,
	serial: true/false,
	model_options: <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
			]
		}
	}
}