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

import { h, Component } from 'preact';
import makeArvadosRequest from 'make-arvados-request';
import WBTable from 'wb-table';
import WBPagination from 'wb-pagination';

class WBProjectListing extends Component {

  constructor(...args) {
    super(...args);
    this.state.rows = [];
    this.state.numPages = 0;
    this.state.activePage = 0;
  }

  componentDidMount() {
    this.setActivePage(0);
  }

  prepareRows(items) {
    return items.map(item => [
      (<div>
        <div>{ item['name'] }</div>
        <div>{ item['uuid'] }</div>
      </div>),
      item['description'],
      item['owner_uuid']
    ]);
  }

  setActivePage(i) {
    this.state.activePage = i;
    let filters = [
      [ 'group_class', '=', 'project' ]
    ];
    if (this.props.ownerUuid)
      filters.push([ 'owner_uuid', '=', this.props.ownerUuid ]);
    let prom = makeArvadosRequest(this.props.arvHost, this.props.arvToken,
      '/arvados/v1/groups?filters=' + encodeURIComponent(JSON.stringify(filters)) +
      '&limit=' + encodeURIComponent(this.props.itemsPerPage) +
      '&offset=' + encodeURIComponent(this.props.itemsPerPage * i));
    prom = prom.then(xhr =>
      this.setState({
        'numPages': Math.ceil(xhr.response['items_available'] / xhr.response['limit']),
        'rows': this.prepareRows(xhr.response['items'])
      }));
  }

  render({ arvHost, arvToken, ownerUuid }, { rows, numPages, activePage }) {
    return (
      <div>
        <WBTable columns={ [ 'Name', 'Description', 'Owner' ] }
          rows={ rows } />
        <WBPagination numPages={ numPages }
          activePage={ activePage }
          onPageChanged={ i => this.setActivePage(i) } />
      </div>
    );
  }
}

WBProjectListing.defaultProps = {
  'itemsPerPage': 100,
  'ownerUuid': null
};

export default WBProjectListing;