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

import { h, Component } from 'preact';
import { route } from 'preact-router';
import makeArvadosRequest from 'make-arvados-request';
import WBTable from 'wb-table';
import WBPagination from 'wb-pagination';
import WBNameAndUuid from 'wb-name-and-uuid';
import urlForObject from 'url-for-object';

class WBProjectListing extends Component {

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

  componentDidMount() {
    this.fetchItems();
  }

  prepareRows(items) {
    const { app, renderRenameLink, renderDeleteButton,
      renderSelectionCell, renderSharingButton,
      renderEditDescription } = this.props;

    return items.map(item => [
      renderSelectionCell(item),
      (<div>
        <div>
          <a href={ '/browse/' + item.uuid }>
            { item['name'] }
          </a> { renderRenameLink(item, () => this.fetchItems()) }
        </div>
        <div>{ item['uuid'] }</div>
      </div>),
      (<div>
        { item['description'] } { renderEditDescription(item, () => this.fetchItems()) }
      </div>),
      ( <WBNameAndUuid app={ app } uuid={ item['owner_uuid'] } lazy={ true } /> ),
      (<div>
        <a class="btn btn-outline-primary m-1" title="Properties"
          href={ urlForObject(item, 'properties') }>
          <i class="fas fa-list-ul"></i>
        </a>
        { renderDeleteButton(item, () => this.fetchItems()) }
        { renderSharingButton(item) }
      </div>)
    ]);
  }

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

  componentWillReceiveProps(nextProps, nextState) {
    // this.setState({ 'rows': [] }); // .rows = [];
    this.props = nextProps;
    this.fetchItems();
  }

  render({ arvHost, arvToken, ownerUuid, activePage, getPageUrl }, { rows, numPages }) {
    return (
      <div>
        <WBTable columns={ [ '', 'Name', 'Description', 'Owner', 'Actions' ] }
          headerClasses={ [ 'w-1' ] }
          rows={ rows } />

        <WBPagination numPages={ numPages }
          activePage={ activePage }
          getPageUrl={ getPageUrl } />
      </div>
    );
  }
}

WBProjectListing.defaultProps = {
  'itemsPerPage': 100,
  'ownerUuid': null,
  'renderRenameLink': () => null,
  'renderDeleteButton': () => null,
  'renderSelectionCell': () => null,
  'renderEditDescription': () => null
};

export default WBProjectListing;