wba/frontend/src/js/page/wb-browse.js

import { h, Component } from 'preact';
import { route } from 'preact-router';
import WBNavbarCommon from 'wb-navbar-common';
import WBProjectListing from 'wb-project-listing';
import WBInlineSearch from 'wb-inline-search';
import WBArvadosCrumbs from 'wb-arvados-crumbs';
import WBTabs from 'wb-tabs';
import WBProcessListing from 'wb-process-listing';
import WBCollectionListing from 'wb-collection-listing';
import WBWorkflowListing from 'wb-workflow-listing';

class WBBrowse extends Component {
  getUrl(params) {
    let res = '/browse/' +
      ('ownerUuid' in params ? params.ownerUuid : (this.props.ownerUuid || '')) + '/' +
      ('activePage' in params ? params.activePage : (this.props.activePage || '')) + '/' +
      ('objTypeTab' in params ? params.objTypeTab : (this.props.objTypeTab || '')) + '/' +
      ('collectionPage' in params ? params.collectionPage : (this.props.collectionPage || '')) + '/' +
      ('processPage' in params ? params.processPage : (this.props.processPage || '')) + '/' +
      ('workflowPage' in params ? params.workflowPage : (this.props.workflowPage || ''));

    return res;
  }

  route(params) {
    route(this.getUrl(params));
  }

  render({ ownerUuid, activePage, appState, app,
    objTypeTab, collectionPage, processPage, workflowPage }) {

    return (
      <div>
        <WBNavbarCommon app={ app } activeItem={ !ownerUuid ? 'all-projects' :
          (ownerUuid === app.state.currentUser.uuid ? 'home' : null) } />

        <WBArvadosCrumbs uuid={ ownerUuid } app={ app } />

        <WBTabs tabs={ [ { 'name': 'Projects', 'isActive': true } ] } />

        <WBProjectListing app={ app }
          arvHost={ appState.arvHost }
          arvToken={ appState.arvToken }
          ownerUuid={ ownerUuid }
          itemsPerPage="5"
          activePage={ Number(activePage || 0) }
          onPageChanged={ i => route('/browse/' + (ownerUuid || '') + '/' + i)} />

        <WBTabs tabs={ [
          { 'id': 'collection', 'name': 'Collections', 'isActive': (!objTypeTab || objTypeTab === 'collection') },
          { 'id': 'process', 'name': 'Processes', 'isActive': (objTypeTab === 'process') },
          { 'id': 'workflow', 'name': 'Workflows', 'isActive': (objTypeTab === 'workflow') } ] }
          onTabChanged={ tab => this.route({ 'objTypeTab': tab['id'] }) } />

        {
          (!objTypeTab || objTypeTab === 'collection') ? (
            <WBCollectionListing app={ app }
              ownerUuid={ ownerUuid }
              itemsPerPage="20"
              activePage={ Number(collectionPage || 0) }
              getPageUrl={ i => this.getUrl({ 'collectionPage': i }) } />

          ) : (objTypeTab === 'process' ? (
            <WBProcessListing appState={ appState }
              ownerUuid={ ownerUuid }
              itemsPerPage="20"
              activePage={ Number(processPage || 0) }
              onPageChanged={ i => this.route({ 'processPage': i }) } />

          ) : (objTypeTab === 'workflow' ? (
            <WBWorkflowListing app={ app }
              ownerUuid={ ownerUuid }
              itemsPerPage="20"
              page={ Number(workflowPage || 0) }
              getPageUrl={ i => this.getUrl({ 'workflowPage': i }) } />

          ) : null))
        }
      </div>
    );
  }
}

export default WBBrowse;