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

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

class WBBrowseDialogProjectList extends Component {
  constructor(...args) {
    super(...args);
    this.state.rows = [];
    this.state.history = [];
  }

  componentDidMount() {
    this.fetchRows();
  }

  componentWillReceiveProps(nextProps) {
    this.props = nextProps;
    this.fetchRows();
  }

  prepareRows(items) {
    const { navigate, selectWhat, makeSelectionCell } = this.props;
    return items.map(it => ([].concat(selectWhat).indexOf('owner') !== -1 ? [ makeSelectionCell(it.uuid, 'project') ] : []).concat([
      (
        <a href="#" onclick={ e => {
          e.preventDefault();
          navigate('/browse-dialog/browse/' + it.uuid);
        } }>{ it.name }</a>
      ),
      it.uuid
    ]));
  }

  fetchSharedWithMe() {
    const { arvHost, arvToken, currentUser } = this.props.app.state;
    const { textSearch, itemsPerPage, page } = this.props;
    const filters = [
      ['group_class', '=', 'project']
    ];
    if (textSearch)
      filters.push([ 'name', 'ilike', '%' + textSearch + '%']);
    const prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/groups/shared?filters=' +
      encodeURIComponent(JSON.stringify(filters)) +
      '&limit=' + itemsPerPage +
      '&offset=' + (itemsPerPage * page));
    return prom;
  }

  fetchOwned() {
    const { arvHost, arvToken } = this.props.app.state;
    const { ownerUuid, page, textSearch, itemsPerPage } = this.props;
    const filters = [
      ['group_class', '=', 'project']
    ];
    if (ownerUuid)
      filters.push(['owner_uuid', '=', ownerUuid]);
    if (textSearch)
      filters.push(['name', 'ilike', '%' + textSearch + '%']);
    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/groups?filters=' +
      encodeURIComponent(JSON.stringify(filters)) +
      '&limit=' + itemsPerPage +
      '&offset=' + (page * itemsPerPage));
    return prom;
  }

  fetchRows() {
    const { mode, itemsPerPage } = this.props;

    let prom = (mode === 'shared-with-me') ?
      this.fetchSharedWithMe() :
      this.fetchOwned();

    prom = prom.then(xhr => {
      this.setState({
        'rows': this.prepareRows(xhr.response.items),
        'numPages': Math.ceil(xhr.response.items_available / itemsPerPage)
      });
    });

    return prom;
  }

  render({ app, navigate, page, selectWhat }, { numPages, rows }) {
    return (
      <div>
        <WBTable columns={ ([].concat(selectWhat).indexOf('owner') !== -1 ? [''] : []).concat(['Name', 'UUID']) }
          headerClasses={ [].concat(selectWhat).indexOf('owner') !== -1 ? ['col-sm-1', 'col-sm-4', 'col-sm-4'] : [] }
          rows={ rows } />

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

WBBrowseDialogProjectList.defaultProps = {
  'itemsPerPage': 5,
  'resetSearch': () => {}
};

export default WBBrowseDialogProjectList;