diff --git a/frontend/src/js/dialog/wb-browse-dialog-project-list.js b/frontend/src/js/dialog/wb-browse-dialog-project-list.js index ff84e28..a6a4120 100644 --- a/frontend/src/js/dialog/wb-browse-dialog-project-list.js +++ b/frontend/src/js/dialog/wb-browse-dialog-project-list.js @@ -7,6 +7,7 @@ class WBBrowseDialogProjectList extends Component { constructor(...args) { super(...args); this.state.rows = []; + this.state.history = []; } componentDidMount() { @@ -28,9 +29,30 @@ class WBBrowseDialogProjectList extends Component { this.fetchRows(); } + popHistory() { + const state = this.state.history.pop(); + this.setState(state); + this.fetchRows(); + } + prepareRows(items) { + const { resetSearch, pushHistory } = this.props; + const ownerUuid = ( 'ownerUuid' in this.state ? + this.state.ownerUuid : this.props.ownerUuid ); return items.map(it => [ - it.name, + ( + { + e.preventDefault(); + this.setState({ + 'ownerUuid': it.uuid, + 'page': 0 + }); + this.fetchRows(); + this.state.history.push({ 'ownerUuid': ownerUuid }); + pushHistory(this); + resetSearch(); + } }>{ it.name } + ), it.file_count, it.file_size_total ]); @@ -57,7 +79,7 @@ class WBBrowseDialogProjectList extends Component { prom = prom.then(xhr => { this.setState({ 'rows': this.prepareRows(xhr.response.items), - 'numPages': xhr.response.items_available / itemsPerPage + 'numPages': Math.ceil(xhr.response.items_available / itemsPerPage) }); }); } @@ -69,14 +91,16 @@ class WBBrowseDialogProjectList extends Component { rows={ rows } /> this.changePage(i) } /> + onPageChanged={ i => this.changePage(i) } + chunkSize="3" /> ); } } WBBrowseDialogProjectList.defaultProps = { - 'itemsPerPage': 5 + 'itemsPerPage': 5, + 'resetSearch': () => {} }; export default WBBrowseDialogProjectList; diff --git a/frontend/src/js/dialog/wb-browse-dialog.js b/frontend/src/js/dialog/wb-browse-dialog.js index 647c9ad..37c52bd 100644 --- a/frontend/src/js/dialog/wb-browse-dialog.js +++ b/frontend/src/js/dialog/wb-browse-dialog.js @@ -1,9 +1,36 @@ import { h, Component } from 'preact'; import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list'; import WBBrowseDialogCollectionList from 'wb-browse-dialog-project-list'; +import linkState from 'linkstate'; class WBBrowseDialog extends Component { - render({ app, id }, { mode }) { + constructor(...args) { + super(...args); + this.state.history = []; + } + + resetSearch() { + this.setState({ + 'textSearch': null, + 'textSearchInput': null + }); + } + + pushHistory(child) { + const { history } = this.state; + history.push([ child, { textSearch } ]); + this.state.history = history.slice(history.length - 1000); + } + + popHistory() { + if (this.history.length === 0) + return; + const entry = history.pop(); + this.setState(entry[1]); + entry[0].popHistory(); + } + + render({ app, id }, { mode, textSearch, textSearchInput }) { return (