diff --git a/wherehows-web/app/components/dataset-table-pager.js b/wherehows-web/app/components/dataset-table-pager.js new file mode 100644 index 0000000000..9980a1d1ba --- /dev/null +++ b/wherehows-web/app/components/dataset-table-pager.js @@ -0,0 +1,56 @@ +import Ember from 'ember'; + +const { + Component, + computed, + getProperties, + get +} = Ember; + +export default Component.extend({ + tagName: 'section', + + pages: computed('data', 'limit', function() { + const { data, limit: rowsPerPage = 1 } = getProperties( + this, + 'data', + 'limit' + ); + let numberOfPages = 1; + + if (Array.isArray(data)) { + const needsExtraPage = data.length % rowsPerPage; + numberOfPages = Math.floor(data.length / rowsPerPage); + needsExtraPage && ++numberOfPages; + } + + return [...Array(numberOfPages).keys()].map(x => x + 1); + }), + + actions: { + onDecrementPage() { + let page = get(this, 'page'); + + if (page > 1) { + get(this, 'onPageChanged')(page - 1); + } + }, + + onIncrementPage() { + let page = get(this, 'page'); + let max = Math.max(...get(this, 'pages')); + + if (page < max) { + get(this, 'onPageChanged')(page + 1); + } + }, + + changePage(page) { + get(this, 'onPageChanged')(page); + }, + + changeLimit(limit) { + get(this, 'onLimitChanged')(limit); + } + } +}); diff --git a/wherehows-web/app/templates/components/dataset-table-pager.hbs b/wherehows-web/app/templates/components/dataset-table-pager.hbs new file mode 100644 index 0000000000..bb452716e6 --- /dev/null +++ b/wherehows-web/app/templates/components/dataset-table-pager.hbs @@ -0,0 +1,19 @@ +
+

Page:

+ {{ember-selector values=pages selected=page selectionDidChange="changePage"}} +
+ +
+

Rows per page:

+ {{ember-selector values=pageLengths selected=limit selectionDidChange="changeLimit"}} +
+ +
+ + + +
\ No newline at end of file