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

import { h, Component } 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 )
//
// general pattern therefore:
// /browse-dialog/( mode )/( uuid )/( top-page )/( bottom-page )/( text-search )
//
// props:
//   selectMany: Boolean
//   selectWhat: [ 'file', 'directory' ]
//
// 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;
  }

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

  navigate(url, useHistory=true) {
    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
      ].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 ] = url.split('/');
    topPage = parseInt(topPage, 10) || 0;
    bottomPage = parseInt(bottomPage, 10) || 0;
    this.setState({
      'currentUrl': url,
      mode, uuid, topPage, bottomPage, textSearch
    });
  }

  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': []
    });
  }

  render({ app, id, selectMany, selectWhat }, { history, currentUrl, mode, uuid, topPage, bottomPage, textSearch }) {
    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">
              { 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">All Projects</a>
                <a href="#" class="btn btn-outline-primary mr-2">All Users</a>
                <a href="#" class="btn btn-outline-primary mr-2">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={ linkState(this, 'textSearch') } />

                <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 } />
                </div>
              ) : null }

              { (mode === 'users') ? (
                <WBBrowseDialogUserList app={ app } parent={ this } />
              ) : null }

              { (mode === 'content') ? (
                <div>
                  <h5>Content</h5>
                  <WBBrowseDialogCollectionContent app={ app } parent={ this }
                    selectMany={ selectMany } selectWhat={ selectWhat }/>
                </div>

              ) : (mode === 'browse' || mode === 'shared-with-me') ? (
                <div>
                  <h5>Collections</h5>
                  <WBBrowseDialogCollectionList app={ app } parent={ this }
                    selectMany={ selectMany } selectWhat={ selectWhat } />
                </div>
              ) : null }
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-primary">Accept</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default WBBrowseDialog;