|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- 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, textSearch } = this.props;
-
- const order = ['last_name asc'];
-
- const filters = [];
- if (textSearch)
- filters.push([ 'any', 'ilike', '%' + textSearch + '%' ]);
-
- let prom = makeArvadosRequest(arvHost, arvToken,
- '/arvados/v1/users?order=' + encodeURIComponent(JSON.stringify(order)) +
- '&filters=' + encodeURIComponent(JSON.stringify(filters)) +
- '&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 (
- <div class="container-fluid">
- <h1>Users</h1>
- <div class="d-flex flex-wrap">
- { items ? items.map(it => (
- <div class="card mx-2 my-2">
- <h5 class="card-header">
- <a href={ urlForObject(it) }>{ it.last_name + ', ' + it.first_name }</a>
- </h5>
- <div class="card-body">
- <div><a href={ 'mailto:' + it.email }>{ it.email }</a></div>
- <div>{ it.uuid }</div>
- </div>
- </div>
- )) : 'Loading...' }
- </div>
-
- <WBPagination activePage={ page } numPages={ numPages }
- getPageUrl={ getPageUrl } />
- </div>
- );
- }
- }
-
- WBUserListing.defaultProps = {
- 'itemsPerPage': 20,
- 'page': 0
- };
-
- export default WBUserListing;
|