diff --git a/frontend/src/js/dialog/wb-browse-dialog-user-list.js b/frontend/src/js/dialog/wb-browse-dialog-user-list.js index ed9ad21..ae85fad 100644 --- a/frontend/src/js/dialog/wb-browse-dialog-user-list.js +++ b/frontend/src/js/dialog/wb-browse-dialog-user-list.js @@ -1,11 +1,69 @@ import { h, Component } from 'preact'; +import WBTable from 'wb-table'; +import WBPagination from 'wb-pagination'; +import makeArvadosRequest from 'make-arvados-request'; class WBBrowseDialogUserList extends Component { - render() { + constructor(...args) { + super(...args); + this.state.rows = []; + } + + componentDidMount() { + this.fetchRows(); + } + + componentWillReceiveProps(nextProps) { + this.props = nextProps; + this.fetchRows(); + } + + prepareRows(items) { + const { navigate } = this.props; + return items.map(it => [ + ( + { e.preventDefault(); + navigate('/browse-dialog/browse/' + it.uuid); } }> + { it.last_name + ', ' + it.first_name } + + ), + it.uuid + ]); + } + + fetchRows() { + const { arvHost, arvToken } = this.props.app.state; + const { itemsPerPage, page, textSearch } = this.props; + const order = ['last_name asc', 'first_name asc']; + const filters = []; + if (textSearch) + filters.push([ 'any', 'ilike', '%' + textSearch + '%' ]); + let prom = makeArvadosRequest(arvHost, arvToken, + '/arvados/v1/users?order=' + + encodeURIComponent(JSON.stringify(order)) + + '&limit=' + itemsPerPage + + '&offset=' + (itemsPerPage * page)); + prom = prom.then(xhr => this.setState({ + 'rows': this.prepareRows(xhr.response.items), + 'numPages': Math.ceil(xhr.response.items_available / itemsPerPage) + })); + } + + render({ page, navigate }, { rows, numPages }) { return ( -