From 41e59baaa64468b81f16ec9616bdd85a9945efa5 Mon Sep 17 00:00:00 2001 From: Stanislaw Adaszewski Date: Thu, 30 Jan 2020 14:30:27 +0100 Subject: [PATCH] Trying to implement pagination. --- frontend/rollup.config.js | 1 + frontend/src/html/index.html | 1 + frontend/src/js/component/wb-app.js | 39 ++++------ .../src/js/component/wb-project-listing.js | 20 +++++ frontend/src/js/misc/make-arvados-request.js | 27 +++++++ frontend/src/js/widget/wb-pagination.js | 73 +++++++++++++++++++ frontend/src/js/widget/wb-table.js | 26 +++++++ 7 files changed, 161 insertions(+), 26 deletions(-) create mode 100644 frontend/src/js/component/wb-project-listing.js create mode 100644 frontend/src/js/misc/make-arvados-request.js create mode 100644 frontend/src/js/widget/wb-pagination.js create mode 100644 frontend/src/js/widget/wb-table.js diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js index db67adf..9fafe04 100755 --- a/frontend/rollup.config.js +++ b/frontend/rollup.config.js @@ -23,6 +23,7 @@ export default { 'src/css/index.css': 'dist/css/index.css', 'node_modules/bootstrap/dist/css/bootstrap.min.css': 'dist/css/bootstrap.min.css', 'node_modules/bootstrap/dist/js/bootstrap.min.js': 'dist/js/bootstrap.min.js', + 'node_modules/jquery/dist/jquery.min.js': 'dist/js/jquery.min.js', verbose: true }), buble({jsx: 'h'}), diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html index c48306f..711a065 100755 --- a/frontend/src/html/index.html +++ b/frontend/src/html/index.html @@ -2,6 +2,7 @@ + diff --git a/frontend/src/js/component/wb-app.js b/frontend/src/js/component/wb-app.js index 8794e72..711b4e8 100644 --- a/frontend/src/js/component/wb-app.js +++ b/frontend/src/js/component/wb-app.js @@ -1,37 +1,24 @@ import { h, Component } from 'preact'; import WBTabs from 'wb-tabs'; +import WBTable from 'wb-table'; +import WBPagination from 'wb-pagination'; class WBApp extends Component { render() { return (

WBApp

- - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescriptionSize
NameDescription0 bytes
NameDescription0 bytes
NameDescription0 bytes
+ alert(idx) } /> + { + xhr.onreadystatechange = () => { + if (xhr.readyState !== 4) + return; + if (xhr.status !== 200) + reject(xhr); + else + accept(xhr); + }; + xhr.send(data); + }); + + return res; +} + +export default makeArvadosRequest; diff --git a/frontend/src/js/widget/wb-pagination.js b/frontend/src/js/widget/wb-pagination.js new file mode 100644 index 0000000..3a7c1e3 --- /dev/null +++ b/frontend/src/js/widget/wb-pagination.js @@ -0,0 +1,73 @@ +import { h, Component } from 'preact'; + +class WBPagination extends Component { + renderVisiblePages(numPages, activePage, chunkSize, onPageChanged) { + let visible = {}; + + let begActChnk = activePage - Math.floor(chunkSize / 2); + let endActChnk = activePage + Math.floor(chunkSize / 2) + 1; + for (let i = begActChnk; i < endActChnk; i++) + visible[i] = true; + + for (let i = 0; i < chunkSize; i++) + visible[i] = true; + + for (let i = Math.max(numPages - chunkSize, 0); i < numPages; i++) + visible[i] = true; + + visible = Object.keys(visible).map(n => Number(n)); + + let res = []; + let prev = 0; + + res.push(( +
  • + onPageChanged(activePage - 1) }>Previous +
    • + )); + + for (let i in visible) { + if (i > prev + 1) + res.push(( +
  • + onPageChanged(i - 1) }>... +
    • + )); + prev = i; + + res.push(( +
  • + onPageChanged(i) }>{ i + 1 } +
    • + )); + } + + res.push(( +
  • = numPages - 1 ? "page-item disabled" : "page-item" }> + onPageChanged(activePage + 1) }>Next +
    • + )); + + return res; + } + + render({ numPages, activePage, chunkSize, onPageChanged }) { + return ( + + ); + } +} + +WBPagination.defaultProps = { + 'chunkSize': 5 +}; + +export default WBPagination; diff --git a/frontend/src/js/widget/wb-table.js b/frontend/src/js/widget/wb-table.js new file mode 100644 index 0000000..c698135 --- /dev/null +++ b/frontend/src/js/widget/wb-table.js @@ -0,0 +1,26 @@ +import { h, Component } from 'preact'; + +class WBTable extends Component { + render({ columns, rows }) { + return ( + + + + { columns.map(c => ) } + + + + { rows.map(r => ( + + { columns.map((_, idx) => ( + + )) } + + )) } + +
    { c }
    { r[idx] }
    + ); + } +} + +export default WBTable;