|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257 |
- 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 )/( 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 = () => {};
- }
-
- 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();
- }
-
- 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">
- <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">×</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;
|