wba/frontend/src/js/dialog/wb-toolbox-dialog.js

import { h, Component } from 'preact';
import WBTable from 'wb-table';
import WBNameAndUuid from 'wb-name-and-uuid';
import wbFetchObjects from 'wb-fetch-objects';
import wbFormatDate from 'wb-format-date';

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

  componentDidMount() {
    this.fetchRows();
  }

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

  fetchRows() {
    const { items, id, selectMany, onAccepted } = this.props;
    const { arvHost, arvToken } = this.props.app.state;
    const { selectedValues } = this.state;
    let prom = wbFetchObjects(arvHost, arvToken,
      items);
    let lookup;
    prom = prom.then(lkup => (lookup = lkup));
    prom = prom.then(() => wbFetchObjects(arvHost, arvToken,
      items.map(uuid => lookup[uuid].owner_uuid)));
    let ownerLookup;
    prom = prom.then(lkup => (ownerLookup = lkup));
    prom = prom.then(() => {
      const rows = items.map((uuid, idx) => {
        const it = lookup[uuid];
        const ow = ownerLookup[it.owner_uuid];
        let r = [];
        if (selectMany)
          r.push();
        r = r.concat([
          selectMany ? (
            <div>
              <input type="checkbox" checked={ (uuid in selectedValues) }
                onChange={ e => {
                if (e.target.value === 'on')
                  selectedValues[uuid] = true;
                else
                  delete selectedValues[uuid];
              } } /> { '\u00A0' }
            </div>
          ) : (
            <button class="btn btn-outline-primary" title="Use"
              onclick={ () => {
                $('#' + id).modal('hide');
                onAccepted(uuid);
              } }>
              <i class="fas fa-hand-pointer"></i>
            </button>
          ),
          ( <WBNameAndUuid uuid={ uuid } lookup={ lookup }
              onLinkClicked={ () => $('#' + id).modal('hide') } /> ),
          it.kind,
          wbFormatDate(it.created_at),
          ( <WBNameAndUuid uuid={ it.owner_uuid } lookup={ ownerLookup }
              onLinkClicked={ () => $('#' + id).modal('hide') } /> )
        ]);
        return r;
      });
      this.setState({ rows });
    });
  }

  render({ id, selectMany, onAccepted, items, app }, { rows, selectedValues }) {
    return (
      <div class="modal" id={ id } tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Browse Toolbox</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

            <div class="modal-body">
              <div class="mb-2">
                { selectMany ? (
                  <button class="btn btn-outline-primary mr-2" onclick={ () => {
                    items.map(uuid => (selectedValues[uuid] = true));
                    this.fetchRows();
                  } }>
                    Select All
                  </button>
                ) : null }
                { selectMany ? (
                  <button class="btn btn-outline-primary mr-2" onclick={ () => {
                    this.setState({ 'selectedValues' : {} });
                    this.fetchRows();
                  } }>
                    Select None
                  </button>
                ) : null }
                <button class="btn btn-outline-primary mr-2" onclick={ () => {
                  app.clearToolbox();
                  this.props.items = [];
                  this.fetchRows();
                } } >
                  Clear Toolbox
                </button>
                <button class="btn btn-outline-primary mr-2" onclick={ () => {
                  app.loadToolbox();
                  this.props.items = app.state.toolboxItems;
                  this.fetchRows();
                } } >
                  Refresh Toolbox
                </button>
              </div>

              <WBTable columns={ [ '', 'Name', 'Kind', 'Created At', 'Owner' ] }
                rows={ rows } />
            </div>

            <div class="modal-footer">
              { selectMany ? (
                <button type="button" class="btn btn-primary" onclick={
                  () => {
                    $('#' + id).modal('hide');
                    onAccepted(items.filter(uuid => (uuid in selectedValues)));
                  }
                }>Accept</button>
              ) : null }
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

WBToolboxDialog.defaultProps = {
  'onAccepted': () => {}
};

export default WBToolboxDialog;