wba/frontend/src/js/dialog/wb-browse-dialog-user-list.js

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 {
  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 => [
      (
        <a href="#" onclick={ e => { e.preventDefault();
          navigate('/browse-dialog/browse/' + it.uuid); } }>
          { it.last_name + ', ' + it.first_name }
        </a>
      ),
      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)) +
      '&filters=' +
      encodeURIComponent(JSON.stringify(filters)) +
      '&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 (
      <div>
        <WBTable columns={ [ 'Name', 'UUID' ] }
          rows={ rows } />

        <WBPagination numPages={ numPages } activePage={ page }
          onPageChanged={ i => navigate({ 'topPage': i }) } />
      </div>
    );
  }
}

WBBrowseDialogUserList.defaultProps = {
  'itemsPerPage': 20
};

export default WBBrowseDialogUserList;