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!
Pārlūkot izejas kodu

Implemented WBBrowseDialogCollectionContent.

master
Stanislaw Adaszewski pirms 4 gadiem
vecāks
revīzija
db8247446f
3 mainītis faili ar 126 papildinājumiem un 10 dzēšanām
  1. +106
    -2
      frontend/src/js/dialog/wb-browse-dialog-collection-content.js
  2. +1
    -1
      frontend/src/js/dialog/wb-browse-dialog-collection-list.js
  3. +19
    -7
      frontend/src/js/dialog/wb-browse-dialog.js

+ 106
- 2
frontend/src/js/dialog/wb-browse-dialog-collection-content.js Parādīt failu

@@ -1,11 +1,115 @@
import { h, Component } from 'preact';
import WBManifestWorkerWrapper from 'wb-manifest-worker-wrapper';
import makeArvadosRequest from 'make-arvados-request';
import WBTable from 'wb-table';
import WBPagination from 'wb-pagination';
function unescapeName(name) {
return name.replace(/(\\\\|\\[0-9]{3})/g,
(_, $1) => ($1 === '\\\\' ? '\\' : String.fromCharCode(parseInt($1.substr(1), 8))));
}
class WBBrowseDialogCollectionContent extends Component {
render() {
constructor(...args) {
super(...args);
this.state.manifestWorker = new WBManifestWorkerWrapper();
this.state.mode = 'manifestDownload';
this.state.rows = [];
}
componentDidMount() {
const { app, collectionUuid } = this.props;
const { arvHost, arvToken } = app.state;
const { manifestWorker } = this.state;
let prom = makeArvadosRequest(arvHost, arvToken,
'/arvados/v1/collections/' + collectionUuid);
let streams;
prom = prom.then(xhr => {
streams = xhr.response.manifest_text.split('\n');
const paths = streams.filter(s => s).map(s => {
const n = s.indexOf(' ');
return unescapeName(s.substr(0, n));
});
return manifestWorker.postMessage([ 'precreatePaths', paths ]);
});
prom = prom.then(() => {
this.setState({ 'mode': 'manifestParse' });
let prom_1 = new Promise(accept => accept());
for (let i = 0; i < streams.length; i++) {
prom_1 = prom_1.then(() => manifestWorker.postMessage([ 'parseStream', streams[i] ]));
prom_1 = prom_1.then(() => manifestWorker.postMessage([ 'listDirectory', '.' + this.props.collectionPath, true ]));
prom_1 = prom_1.then(e => this.prepareRows(e.data[1]));
}
return prom_1;
});
prom = prom.then(() => manifestWorker.postMessage([ 'listDirectory', '.' + this.props.collectionPath, true ]));
prom = prom.then(e => {
this.state.mode = 'browsingReady';
this.prepareRows(e.data[1])
});
}
componentWillReceiveProps(nextProps) {
this.props = nextProps;
if (this.state.mode !== 'browsingReady')
return;
let prom = this.state.manifestWorker.postMessage([
'listDirectory', '.' + this.props.collectionPath, true
]);
prom = prom.then(e => this.prepareRows(e.data[1]));
}
prepareRows(listing) {
const { makeSelectionCell, collectionPath, navigate,
page, itemsPerPage, collectionUuid, textSearch } = this.props;
const textLower = textSearch.toLowerCase();
listing = listing.filter(it => (it[1].toLowerCase().indexOf(textLower) !== -1));
const numPages = Math.ceil(listing.length / itemsPerPage);
const rows = listing.slice(page * itemsPerPage,
(page + 1) * itemsPerPage).map(it => [
makeSelectionCell(collectionUuid + '/' + collectionPath + '/' + it[1]),
it[0] === 'd' ? (
<a href="#" onclick={ e => {
e.preventDefault();
navigate({ 'collectionPath': collectionPath + '/' + it[1],
'bottomPage': 0 });
} }>{ it[1] }</a>
) : it[1],
it[0] === 'f' ? filesize(it[2]) : ''
]);
this.setState({ rows, numPages });
}
render({ page, navigate }, { rows, mode, numPages }) {
return (
<div>WBBrowseDialogCollectionContent</div>
<div>
{ mode === 'browsingReady' ? (
null
) : [
<div>{ mode === 'manifestParse' ? 'Parsing manifest...' : 'Downloading manifest...' }</div>,
<div class="progress my-2">
<div class={ 'progress-bar progress-bar-striped progress-bar-animated' +
(mode === 'manifestParse' ? ' bg-success': '') } role="progressbar"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
] }
<WBTable headerClasses={ ['col-sm-1', 'col-sm-4', 'col-sm-4'] }
columns={ [ '', 'Name', 'Size' ] } rows={ rows } />
<WBPagination numPages={ numPages } activePage={ page }
onPageChanged={ i => navigate({ 'bottomPage': i }) } />
</div>
);
}
}
WBBrowseDialogCollectionContent.defaultProps = {
'itemsPerPage': 20
};
export default WBBrowseDialogCollectionContent;

+ 1
- 1
frontend/src/js/dialog/wb-browse-dialog-collection-list.js Parādīt failu

@@ -25,7 +25,7 @@ class WBBrowseDialogCollectionList extends Component {
] : []).concat([
(
<a href="#" onclick={ e => { e.preventDefault();
navigate('/browse-dialog/content/' + it.uuid); } }>{ it.name }</a>
navigate('/browse-dialog/content/' + it.uuid + '////'); } }>{ it.name }</a>
),
it.uuid
]));


+ 19
- 7
frontend/src/js/dialog/wb-browse-dialog.js Parādīt failu

@@ -13,7 +13,7 @@ import { createHashHistory } from 'history';
// /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 )
// /browse-dialog/content/( collection-uuid )//( content-page )/( text-search )/( collection-path )
//
// general pattern therefore:
// /browse-dialog/( mode )/( uuid )/( top-page )/( bottom-page )/( text-search )
@@ -40,6 +40,8 @@ class WBBrowseDialog extends Component {
this.state.mode = 'browse';
this.state.topPage = 0;
this.state.bottomPage = 0;
this.state.collectionPath = '';
this.state.textSearch = '';
}
navigateBack() {
@@ -56,7 +58,8 @@ class WBBrowseDialog extends Component {
'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
'textSearch' in url ? url.textSearch : this.state.textSearch,
encodeURIComponent('collectionPath' in url ? url.collectionPath : this.state.collectionPath)
].join('/');
}
@@ -64,12 +67,13 @@ class WBBrowseDialog extends Component {
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, collectionPath ] = url.split('/');
topPage = parseInt(topPage, 10) || 0;
bottomPage = parseInt(bottomPage, 10) || 0;
collectionPath = decodeURIComponent(collectionPath);
this.setState({
'currentUrl': url,
mode, uuid, topPage, bottomPage, textSearch
mode, uuid, topPage, bottomPage, textSearch, collectionPath
});
}
@@ -130,7 +134,11 @@ class WBBrowseDialog extends Component {
);
}
render({ app, id, selectMany, selectWhat }, { history, currentUrl, mode, uuid, topPage, bottomPage, textSearch }) {
render({ app, id, selectMany, selectWhat },
{ history, currentUrl, mode, uuid,
topPage, bottomPage, textSearch,
collectionPath }) {
return (
<div class="modal" id={ id } tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
@@ -197,8 +205,12 @@ class WBBrowseDialog extends Component {
{ (mode === 'content') ? (
<div>
<h5>Content</h5>
<WBBrowseDialogCollectionContent app={ app } parent={ this }
selectMany={ selectMany } selectWhat={ selectWhat }/>
<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') ? (


Notiek ielāde…
Atcelt
Saglabāt