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

import { h, Component, createRef } 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';
import WBRenameDialog from 'wb-rename-dialog';
import WBDeleteDialog from 'wb-delete-dialog';
import WBNewProjectDialog from 'wb-new-project-dialog';
import wbMoveObject from 'wb-move-object';

class WBBrowseProjectTabs extends Component {
  render({ ownerUuid, selected, newProjectDialogRef, projectListingRef,
    moveHere, copyHere }) {

    return (
      <WBTabs tabs={ [
        { 'name': 'Projects', 'isActive': true },
        ownerUuid ? { 'name': ( <span><i class="fas fa-plus-square text-success"></i> New Project</span> ),
          'onClick': () => newProjectDialogRef.current.show(ownerUuid,
            () => projectListingRef.current.fetchItems() ) } : null,
        ( ownerUuid && Object.keys(selected).length > 0 ) ?
          { 'name': ( <span><i class="fas fa-compress-arrows-alt text-warning"></i> Move Here</span> ),
            'onClick': moveHere } : null,
        ( ownerUuid && Object.keys(selected).length > 0 ) ?
          { 'name': ( <span><i class="fas fa-file-import text-warning"></i> Copy Here</span> ),
            'onClick': copyHere } : null
      ] } />
    );
  }
}

class WBBrowse extends Component {
  constructor(...args) {
    super(...args);
    this.renameDialogRef = createRef();
    this.deleteDialogRef = createRef();
    this.newProjectDialogRef = createRef();
    this.projectListingRef = createRef();
    this.projectTabsRef = createRef();
    this.state.selected = {};
  }

  getUrl(params) {
    const mode = ('mode' in params ? params.mode : this.props.mode);

    if (mode === 'shared-with-me')
      return '/shared-with-me/' + ('activePage' in params ? params.activePage :
        (this.props.activePage || ''));

    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));
  }

  renameDialog(item, callback) {
    // throw Error('Not implemented');
    this.renameDialogRef.current.show(item, callback);
  }

  renderRenameLink(item, callback) {
    return (
      <a href="#" title="Rename" onclick={ e => { e.preventDefault(); this.renameDialog(item, callback); } }>
        <i class="fas fa-edit text-secondary"></i>
      </a>
    );
  }

  renderDeleteButton(item, callback) {
    return (
      <button class="btn btn-outline-danger m-1" title="Delete"
        onclick={ () => this.deleteDialogRef.current.show(item, callback) }>
        <i class="fas fa-trash"></i>
      </button>
    );
  }

  renderSelectionCell(item) {
    const { selected } = this.state;
    const { uuid } = item;
    return (
      <div>
        <input type="checkbox" checked={ (uuid in selected) }
          onChange={ e => {
          if (e.target.checked)
            selected[uuid] = true;
          else
            delete selected[uuid];
          this.projectTabsRef.current.setState({});
        } } /> { '\u00A0' }
      </div>
    );
  }

  moveHere() {
    const { ownerUuid, app } = this.props;
    const { selected } = this.state;
    const { arvHost, arvToken } = app.state;
    let prom = new Promise(accept => accept());
    const uuids = Object.keys(selected);
    for (let i = 0; i < uuids.length; i++) {
      prom = prom.then(() => wbMoveObject(arvHost, arvToken, uuids[i], ownerUuid));
      prom = prom.then(() => ( delete selected[uuids[i]] ));
      prom = prom.catch(() => {});
    }
    prom = prom.then(() => this.setState({}));
  }

  copyHere() {

  }

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

    return (
      <div>
        <WBRenameDialog app={ app } ref={ this.renameDialogRef } />

        <WBDeleteDialog app={ app } ref={ this.deleteDialogRef } />

        <WBNewProjectDialog app={ app } ref={ this.newProjectDialogRef } />

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

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

        <WBBrowseProjectTabs ref={ this.projectTabsRef } ownerUuid={ ownerUuid }
          selected={ selected } newProjectDialogRef={ this.newProjectDialogRef }
          projectListingRef={ this.projectListingRef } moveHere={ () => this.moveHere() }
          copyHere={ () => this.copyHere() } />

        <WBProjectListing ref={ this.projectListingRef }
          app={ app }
          arvHost={ app.state.arvHost }
          arvToken={ app.state.arvToken }
          mode={ mode }
          ownerUuid={ ownerUuid }
          itemsPerPage="5"
          activePage={ Number(activePage || 0) }
          getPageUrl={ i => this.getUrl({ 'activePage': i }) }
          renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
          renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
          renderSelectionCell={ it => this.renderSelectionCell(it) } />

        { (mode !== 'browse') ? null : (
          <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'] }) } />
        ) }

        {
          (mode !== 'browse') ? null :
          (!objTypeTab || objTypeTab === 'collection') ? (
            <WBCollectionListing app={ app }
              ownerUuid={ ownerUuid }
              itemsPerPage="20"
              activePage={ Number(collectionPage || 0) }
              getPageUrl={ i => this.getUrl({ 'collectionPage': i }) }
              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
              renderSelectionCell={ it => this.renderSelectionCell(it) } />

          ) : (objTypeTab === 'process') ? (
            <WBProcessListing app={ app }
              appState={ app.state }
              ownerUuid={ ownerUuid }
              itemsPerPage="20"
              activePage={ Number(processPage || 0) }
              onPageChanged={ i => this.route({ 'processPage': i }) }
              renderRenameLink={ (it, cb) => this.renderRenameLink(it, cb) }
              renderDeleteButton={ (it, cb) => this.renderDeleteButton(it, cb) }
              renderSelectionCell={ it => this.renderSelectionCell(it) } />

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

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

export default WBBrowse;