wba/frontend/src/js/dialog/wb-pick-object-dialog.js

import { h, Component, createRef } from 'preact';
import WBDialog from 'wb-dialog';
import WBTable from 'wb-table';
import WBPagination from 'wb-pagination';
import makeArvadosRequest from 'make-arvados-request';
import arvadosObjectName from 'arvados-object-name';

class WBPickObjectDialog extends Component {
  constructor(...args) {
    super(...args);
    this.state.title = 'WBPickObjectDialog';
    this.state.rows = [];
    this.state.textSearch = null;
    this.dialogRef = createRef();
  }

  show(title, objectType, accept, filters=[]) {
    this.setState({ title, objectType, page: 0, rows: [], accept, filters, textSearch: null });
    this.dialogRef.current.show();
    this.fetchData();
  }

  hide() {
    this.dialogRef.current.hide();
  }

  fetchData() {
    const { app, itemsPerPage } = this.props;
    const { arvHost, arvToken } = app.state;
    const { objectType, page, textSearch } = this.state;
    let { filters } = this.state;
    if (textSearch)
      filters = filters.concat([['any', 'ilike', '%' + textSearch + '%']]);
    const order = (objectType === 'user') ?
      ['last_name asc', 'first_name asc'] :
      ['name asc'];
    let prom = makeArvadosRequest(arvHost, arvToken,
      '/arvados/v1/' + objectType +
      's?offset=' + (page * itemsPerPage) +
      '&limit=' + itemsPerPage +
      '&filters=' + encodeURIComponent(JSON.stringify(filters)) +
      '&order=' + encodeURIComponent(JSON.stringify(order))
    );
    prom = prom.then(xhr => this.setState({
      numPages: Math.ceil(xhr.response.items_available / itemsPerPage),
      rows: this.prepareRows(xhr.response.items)
    }));
    return prom;
  }

  prepareRows(items) {
    const { accept } = this.state;
    const { dialogRef } = this;

    return items.map(it => [
      (<div>
        <div>
          <a href="#" onclick={ () => { dialogRef.current.hide(); accept(it); } }>
            { arvadosObjectName(it) }
          </a>
        </div>
        <div>{ it.uuid }</div>
      </div>)
    ]);
  }

  search(textSearch) {
    this.setState({ textSearch, page: 0});
    this.fetchData();
  }

  render({}, { title, rows, page, numPages, textSearch }) {
    return (
      <WBDialog title={ title } ref={ this.dialogRef }>
        <div>
          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Search"
              aria-label="Search" value={ textSearch }
              onkeydown={ e => { if (e.keyCode === 13) {
                e.preventDefault();
                this.search(e.target.value);
              } } }
              onchange={ e => this.search(e.target.value) } />

            <div class="input-group-append">
              <button class="btn btn-outline-primary" type="button" onclick={ e => e.preventDefault() }>Search</button>
            </div>
          </div>

          <WBTable columns={ [ 'Name' ] } rows={ rows } />

          <WBPagination activePage={ page } numPages={ numPages } chunkSize={ 3 }
            onPageChanged={ i => { this.setState({ page: i }); this.fetchData(); } } />
        </div>

        <div>
          <button class="btn btn-secondary"
            onclick={ e => { e.preventDefault(); this.hide(); } }>
            Cancel
          </button>
        </div>
      </WBDialog>
    );
  }
}

WBPickObjectDialog.defaultProps = {
  itemsPerPage: 20
};

export default WBPickObjectDialog;