IF YOU WOULD LIKE TO GET AN ACCOUNT, please write an email to s dot adaszewski at gmail dot com. User accounts are meant only to report issues and/or generate pull requests. This is a purpose-specific Git hosting for ADARED projects. Thank you for your understanding!
Browse Source

WBBrowseDialog slowly tarts working...

master
parent
commit
aa467cd073
2 changed files with 60 additions and 50 deletions
  1. +24
    -37
      frontend/src/js/dialog/wb-browse-dialog-project-list.js
  2. +36
    -13
      frontend/src/js/dialog/wb-browse-dialog.js

+ 24
- 37
frontend/src/js/dialog/wb-browse-dialog-project-list.js View File

@@ -16,54 +16,29 @@ class WBBrowseDialogProjectList extends Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
this.props = nextProps; this.props = nextProps;
this.setState({
'page': 0
});
this.fetchRows();
}
changePage(page) {
this.setState({
'page': page
});
this.fetchRows();
}
popHistory() {
const state = this.state.history.pop();
this.setState(state);
this.fetchRows(); this.fetchRows();
} }
prepareRows(items) { prepareRows(items) {
const { resetSearch, pushHistory } = this.props;
const ownerUuid = ( 'ownerUuid' in this.state ?
this.state.ownerUuid : this.props.ownerUuid );
const { navigate } = this.props;
return items.map(it => [ return items.map(it => [
( (
<a href="#" onclick={ e => { <a href="#" onclick={ e => {
e.preventDefault(); e.preventDefault();
this.setState({
'ownerUuid': it.uuid,
'page': 0
});
this.fetchRows();
this.state.history.push({ 'ownerUuid': ownerUuid });
pushHistory(this);
resetSearch();
navigate('/browse-dialog/browse/' + it.uuid);
} }>{ it.name }</a> } }>{ it.name }</a>
), ),
it.file_count,
it.file_size_total
it.uuid
]); ]);
} }
fetchRows() {
fetchSharedWithMe() {
}
fetchOwned() {
const { arvHost, arvToken } = this.props.app.state; const { arvHost, arvToken } = this.props.app.state;
const { textSearch, itemsPerPage } = this.props;
const ownerUuid = ('ownerUuid' in this.state ?
this.state.ownerUuid : this.props.ownerUuid);
const { page } = this.state;
const { ownerUuid, page, textSearch, itemsPerPage } = this.props;
const filters = [ const filters = [
['group_class', '=', 'project'] ['group_class', '=', 'project']
]; ];
@@ -76,22 +51,34 @@ class WBBrowseDialogProjectList extends Component {
encodeURIComponent(JSON.stringify(filters)) + encodeURIComponent(JSON.stringify(filters)) +
'&limit=' + itemsPerPage + '&limit=' + itemsPerPage +
'&offset=' + (page * itemsPerPage)); '&offset=' + (page * itemsPerPage));
return prom;
}
fetchRows() {
const { mode, itemsPerPage } = this.props;
let prom = (mode === 'shared-with-me') ?
this.fetchSharedWithMe() :
this.fetchOwned();
prom = prom.then(xhr => { prom = prom.then(xhr => {
this.setState({ this.setState({
'rows': this.prepareRows(xhr.response.items), 'rows': this.prepareRows(xhr.response.items),
'numPages': Math.ceil(xhr.response.items_available / itemsPerPage) 'numPages': Math.ceil(xhr.response.items_available / itemsPerPage)
}); });
}); });
return prom;
} }
render({ app }, { ownerUuid, textSearch, page, numPages, rows }) {
render({ app, navigate }, { ownerUuid, textSearch, page, numPages, rows }) {
return ( return (
<div> <div>
<WBTable columns={ ['Name', 'File Count', 'Size'] }
<WBTable columns={ ['Name', 'UUID'] }
rows={ rows } /> rows={ rows } />
<WBPagination numPages={ numPages } activePage={ page } <WBPagination numPages={ numPages } activePage={ page }
onPageChanged={ i => this.changePage(i) }
onPageChanged={ i => navigate({ 'topPage': i }) }
chunkSize="3" /> chunkSize="3" />
</div> </div>
); );


+ 36
- 13
frontend/src/js/dialog/wb-browse-dialog.js View File

@@ -1,6 +1,6 @@
import { h, Component } from 'preact'; import { h, Component } from 'preact';
import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list'; import WBBrowseDialogProjectList from 'wb-browse-dialog-project-list';
import WBBrowseDialogCollectionList from 'wb-browse-dialog-project-list';
import WBBrowseDialogCollectionList from 'wb-browse-dialog-collection-list';
import WBBrowseDialogCollectionContent from 'wb-browse-dialog-collection-content'; import WBBrowseDialogCollectionContent from 'wb-browse-dialog-collection-content';
import WBBrowseDialogUserList from 'wb-browse-dialog-user-list'; import WBBrowseDialogUserList from 'wb-browse-dialog-user-list';
import linkState from 'linkstate'; import linkState from 'linkstate';
@@ -35,19 +35,35 @@ class WBBrowseDialog extends Component {
this.state.selected = {}; this.state.selected = {};
this.state.selectedOrder = []; this.state.selectedOrder = [];
const { currentUser } = this.props.app.state; const { currentUser } = this.props.app.state;
this.navigate('/browse-dialog/browse/' + currentUser.uuid, false);
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() { navigateBack() {
if (this.history.length === 0)
if (this.state.history.length === 0)
return; return;
const url = this.history.pop();
navigate(url, false);
const url = this.state.history.pop();
this.navigate(url, false);
} }
navigate(url, history=true) {
if (history)
this.history.push(this.state.currentUrl);
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('/'); let [ _1, _2, mode, uuid, topPage, bottomPage, textSearch ] = url.split('/');
topPage = parseInt(topPage, 10) || 0; topPage = parseInt(topPage, 10) || 0;
bottomPage = parseInt(bottomPage, 10) || 0; bottomPage = parseInt(bottomPage, 10) || 0;
@@ -89,7 +105,7 @@ class WBBrowseDialog extends Component {
}); });
} }
render({ app, id, selectMany, selectWhat }, { currentUrl, mode, uuid, topPage, bottomPage, textSearch }) {
render({ app, id, selectMany, selectWhat }, { history, currentUrl, mode, uuid, topPage, bottomPage, textSearch }) {
return ( return (
<div class="modal" id={ id } tabindex="-1" role="dialog"> <div class="modal" id={ id } tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document"> <div class="modal-dialog modal-lg" role="document">
@@ -104,8 +120,13 @@ class WBBrowseDialog extends Component {
<div class="modal-body"> <div class="modal-body">
<div class="mb-3"> <div class="mb-3">
<a href="#" class="btn btn-outline-secondary mr-2">Back</a>
<a href="#" class="btn btn-outline-primary mr-2">Home</a>
<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 Projects</a>
<a href="#" class="btn btn-outline-primary mr-2">All Users</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> <a href="#" class="btn btn-outline-primary mr-2">Shared with Me</a>
@@ -124,8 +145,10 @@ class WBBrowseDialog extends Component {
{ (mode === 'browse' || mode === 'shared-with-me') ? ( { (mode === 'browse' || mode === 'shared-with-me') ? (
<div> <div>
<h5>Projects</h5> <h5>Projects</h5>
<WBBrowseDialogProjectList app={ app } parent={ this }
page={ topPage } />
<WBBrowseDialogProjectList app={ app }
navigate={ url => this.navigate(url) }
mode={ mode } ownerUuid={ uuid }
page={ topPage } textSearch={ textSearch } />
</div> </div>
) : null } ) : null }


Loading…
Cancel
Save