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

import { h, Component, createRef } from 'preact';
import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
import WBBrowseDialogCollectionList from 'wb-browse-dialog-collection-list';
import WBBrowseDialogCollectionContent from 'wb-browse-dialog-collection-content';
import WBBrowseDialogUserList from 'wb-browse-dialog-user-list';
import linkState from 'linkstate';
import { Router } from 'preact-router';
import { createHashHistory } from 'history';

//
// internal URLs look like this
//
// /browse-dialog/browse/( owner-uuid )/( project-page )/( text-search )
// /browse-dialog/users//( users-page )/( text-search )
// /browse-dialog/shared-with-me//( project-page )/( collection-page )/( text-search )
// /browse-dialog/content/( collection-uuid )//( content-page )/( text-search )/( collection-path )
//
// general pattern therefore:
// /browse-dialog/( mode )/( uuid )/( top-page )/( bottom-page )/( text-search )
//
// props:
//   selectMany: Boolean
//   selectWhat: [ 'file', 'directory', 'owner' ]
//
// state:
//   selected: Array of UUID
//   textSearch: string
//   textSearchInput: string
//

class WBBrowseDialog extends Component {
  constructor(...args) {
    super(...args);
    this.state.history = [];
    this.state.selected = {};
    this.state.selectedOrder = [];
    const { currentUser } = this.props.app.state;
    this.state.currentUrl = '/browse-dialog/browse/' + currentUser.uuid;
    this.state.uuid = currentUser.uuid;
    this.state.mode = 'browse';
    this.state.topPage = 0;
    this.state.bottomPage = 0;
    this.state.collectionPath = '';
    this.state.textSearch = '';
    this.state.id = ('id' in this.props) ? this.props.id : uuid.v4();
    this.state.accept = () => {};
    this.modalRef = createRef();
  }

  navigateBack() {
    if (this.state.history.length === 0)
      return;
    const url = this.state.history.pop();
    this.navigate(url, false);
  }

  navigate(url, useHistory=true, stateUpdate={}) {
    if (typeof(url) === 'object') {
      url = ['', 'browse-dialog',
        'mode' in url ? url.mode : this.state.mode,
        'uuid' in url ? url.uuid : this.state.uuid,
        'topPage' in url ? url.topPage : this.state.topPage,
        'bottomPage' in url ? url.bottomPage : this.state.bottomPage,
        'textSearch' in url ? url.textSearch : this.state.textSearch,
        encodeURIComponent('collectionPath' in url ? url.collectionPath : this.state.collectionPath)
      ].join('/');
    }

    url = url.substr(url.indexOf('/browse-dialog/'));

    if (useHistory)
      this.state.history.push(this.state.currentUrl);
    let [ _1, _2, mode, uuid, topPage, bottomPage, textSearch, collectionPath ] = url.split('/');
    topPage = parseInt(topPage, 10) || 0;
    bottomPage = parseInt(bottomPage, 10) || 0;
    collectionPath = decodeURIComponent(collectionPath || '');
    this.setState(Object.assign({
      'currentUrl': url,
      mode, uuid, topPage, bottomPage, textSearch, collectionPath
    }, stateUpdate));
  }

  select(uuid) {
    let { selected, selectedOrder } = this.state;
    if (uuid in selected) {
      const n = selectedOrder.indexOf(uuid);
      selectedOrder = selected.splice(n, n + 1);
    }
    selected[uuid] = true;
    selectedOrder.push(uuid);
    /* this.setState({
      selected, selectedOrder
    }); */
  }

  deselect(uuid) {
    let { selected, selectedOrder } = this.state;
    if (!(uuid in selected))
      return;
    const n = selectedOrder.indexOf(uuid);
    selectedOrder = selected.splice(n, n + 1);
    delete selected[uuid];
    /* this.setState({
      selected, selectedOrder
    }); */
  }

  resetSelection() {
    this.setState({
      'selected': {},
      'selectedOrder': []
    });
  }

  makeSelectionCell(uuid) {
    const { selected, accept, selectMany, id } = this.state;

    return selectMany ? (
      <div>
        <input type="checkbox" checked={ (uuid in selected) }
          onChange={ e => {
          if (e.target.checked)
            this.select(uuid);
          else
            this.deselect(uuid);
        } } /> { '\u00A0' }
      </div>
    ) : (
      <button class="btn btn-outline-primary" title="Use"
        onclick={ () => {
          $('#' + id).modal('hide');
          accept(uuid);
        } }>
        <i class="fas fa-hand-pointer"></i>
      </button>
    );
  }

  show(selectWhat, selectMany, accept=(() => {})) {
    const { app } = this.props;
    const { currentUser } = app.state;
    this.navigate('/browse-dialog/browse/' + currentUser.uuid, false,
      { selectWhat, selectMany, accept, history: [],
        selected: {}, selectedOrder: [] });
    $('#' + this.state.id).modal();
  }

  componentWillUnmount() {
    $(this.modalRef.current).modal('hide');
  }

  render({ app },
    { history, currentUrl, mode, uuid,
      topPage, bottomPage, textSearch,
      collectionPath, id, accept, selectedOrder,
      selectMany, selectWhat }) {

    return (
      <div class="modal" id={ id } tabindex="-1" role="dialog" ref={ this.modalRef }>
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              { false ? <h5 class="modal-title">Browse</h5> : null }
              <div>{ currentUrl }</div>
              <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-3">
                <a href="#" class={ 'btn btn-outline-secondary mr-2' +
                  (history.length === 0 ? ' disabled': '') }
                  onclick={ e => { e.preventDefault();
                    this.navigateBack(); } }>Back</a>
                <a href="#" class="btn btn-outline-primary mr-2"
                  onclick={ e => { e.preventDefault();
                    this.navigate('/browse-dialog/browse/' + app.state.currentUser.uuid); } }>Home</a>
                <a href="#" class="btn btn-outline-primary mr-2"
                  onclick={ e => { e.preventDefault();
                    this.navigate('/browse-dialog/browse'); } }>All Projects</a>
                <a href="#" class="btn btn-outline-primary mr-2"
                  onclick={ e => { e.preventDefault();
                    this.navigate('/browse-dialog/users'); } }>All Users</a>
                <a href="#" class="btn btn-outline-primary mr-2"
                  onclick={ e => { e.preventDefault();
                    this.navigate('/browse-dialog/shared-with-me'); } }>Shared with Me</a>
              </div>

              <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Search"
                  aria-label="Search" value={ textSearch }
                  onChange={ e => this.navigate({
                      'textSearch': e.target.value,
                      'topPage': 0,
                      'bottomPage': 0}) } />

                <div class="input-group-append">
                  <button class="btn btn-outline-primary" type="button">Search</button>
                </div>
              </div>

              { (mode === 'browse' || mode === 'shared-with-me') ? (
                <div>
                  <h5>Projects</h5>
                  <WBBrowseDialogProjectList app={ app }
                    navigate={ url => this.navigate(url) }
                    mode={ mode } ownerUuid={ uuid }
                    page={ topPage } textSearch={ textSearch }
                    selectWhat={ selectWhat }
                    makeSelectionCell={ uuid => this.makeSelectionCell(uuid) } />
                </div>
              ) : null }

              { (mode === 'users') ? (
                <WBBrowseDialogUserList app={ app }
                  navigate={ url => this.navigate(url) }
                  page={ topPage } textSearch={ textSearch }/>
              ) : null }

              { (mode === 'content') ? (
                <div>
                  <h5>Content</h5>
                  <WBBrowseDialogCollectionContent app={ app }
                    collectionUuid={ uuid } collectionPath={ collectionPath }
                    page={ bottomPage } selectWhat={ selectWhat }
                    makeSelectionCell={ uuid => this.makeSelectionCell(uuid) }
                    navigate={ url => this.navigate(url) }
                    textSearch={ textSearch } />
                </div>

              ) : (selectWhat !== 'owner' && mode === 'browse') ? (
                <div>
                  <h5>Collections</h5>
                  <WBBrowseDialogCollectionList app={ app }
                    page={ bottomPage } textSearch={ textSearch }
                    navigate={ url => this.navigate(url) }
                    ownerUuid={ uuid } selectWhat={ selectWhat }
                    makeSelectionCell={ uuid => this.makeSelectionCell(uuid) } />
                </div>
              ) : null }
            </div>

            <div class="modal-footer">
              { selectMany ? (
                <button type="button" class="btn btn-primary"
                  onclick={ e => { e.preventDefault(); accept(selectedOrder); $('#' + id).modal('hide'); } }>Accept</button>
              ) : null }
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

WBBrowseDialog.defaultProps = {
  'accept': () => {}
};

export default WBBrowseDialog;