wba/frontend/src/js/component/wb-user-listing.js

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;