diff --git a/frontend/src/js/component/wb-navbar-common.js b/frontend/src/js/component/wb-navbar-common.js index f07610d..c4b4cf3 100644 --- a/frontend/src/js/component/wb-navbar-common.js +++ b/frontend/src/js/component/wb-navbar-common.js @@ -8,7 +8,8 @@ class WBNavbarCommon extends Component { ) } onItemClicked={ item => app.navbarItemClicked(item) } diff --git a/frontend/src/js/component/wb-user-listing.js b/frontend/src/js/component/wb-user-listing.js new file mode 100644 index 0000000..88e7970 --- /dev/null +++ b/frontend/src/js/component/wb-user-listing.js @@ -0,0 +1,63 @@ +import { h, Component } from 'preact'; +import WBPagination from 'wb-pagination'; +import makeArvadosRequest from 'make-arvados-request'; +import urlForObject from 'url-for-object'; + +class WBUserListing extends Component { + componentDidMount() { + this.preparePage(); + } + + componentWillReceiveProps(nextProps) { + this.props = nextProps; + this.preparePage(); + } + + preparePage() { + const { arvHost, arvToken } = this.props.app.state; + const { itemsPerPage, page } = this.props; + + const order = ['last_name asc']; + + let prom = makeArvadosRequest(arvHost, arvToken, + '/arvados/v1/users?order=' + encodeURIComponent(JSON.stringify(order)) + + '&limit=' + itemsPerPage + '&offset=' + (itemsPerPage * page)); + prom = prom.then(xhr => { + this.setState({ + 'items': xhr.response['items'], + 'numPages': Math.ceil(xhr.response['items_available'] / itemsPerPage) + }); + }); + } + + render({ app, page, getPageUrl }, { items, numPages }) { + return ( +
+

Users

+
+ { items ? items.map(it => ( + + )) : 'Loading...' } +
+ + +
+ ); + } +} + +WBUserListing.defaultProps = { + 'itemsPerPage': 20, + 'page': 0 +}; + +export default WBUserListing; diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js index 4718dca..f229443 100644 --- a/frontend/src/js/page/wb-app.js +++ b/frontend/src/js/page/wb-app.js @@ -6,6 +6,7 @@ import WBLandingPage from 'wb-landing-page'; import WBProcessView from 'wb-process-view'; import WBCollectionView from 'wb-collection-view'; import WBCollectionBrowse from 'wb-collection-browse'; +import WBUsersPage from 'wb-users-page'; import arvadosTypeName from 'arvados-type-name'; class WBApp extends Component { @@ -38,6 +39,9 @@ class WBApp extends Component { } else if (item['id'] === 'all-projects') { route('/browse'); + } else if (item['id'] === 'all-users') { + route('/users'); + } } @@ -68,6 +72,8 @@ class WBApp extends Component { + + ); } diff --git a/frontend/src/js/page/wb-users-page.js b/frontend/src/js/page/wb-users-page.js new file mode 100644 index 0000000..5e79335 --- /dev/null +++ b/frontend/src/js/page/wb-users-page.js @@ -0,0 +1,22 @@ +import { h, Component } from 'preact'; +import WBNavbarCommon from 'wb-navbar-common'; +import WBUserListing from 'wb-user-listing'; + +class WBUsersPage extends Component { + getUrl(page) { + return ('/users/' + page); + } + + render({ app, page }) { + return ( +
+ + + this.getUrl(page) } /> +
+ ); + } +}; + +export default WBUsersPage;