diff --git a/frontend/src/js/dialog/wb-pick-object-dialog.js b/frontend/src/js/dialog/wb-pick-object-dialog.js new file mode 100644 index 0000000..07d3b5c --- /dev/null +++ b/frontend/src/js/dialog/wb-pick-object-dialog.js @@ -0,0 +1,111 @@ +import { h, Component, createRef } from 'preact'; +import WBDialog from 'wb-dialog'; +import WBTable from 'wb-table'; +import WBPagination from 'wb-pagination'; +import makeArvadosRequest from 'make-arvados-request'; +import arvadosObjectName from 'arvados-object-name'; + +class WBPickObjectDialog extends Component { + constructor(...args) { + super(...args); + this.state.title = 'WBPickObjectDialog'; + this.state.rows = []; + this.state.textSearch = null; + this.dialogRef = createRef(); + } + + show(title, objectType, accept, filters=[]) { + this.setState({ title, objectType, page: 0, rows: [], accept, filters, textSearch: null }); + this.dialogRef.current.show(); + this.fetchData(); + } + + hide() { + this.dialogRef.current.hide(); + } + + fetchData() { + const { app, itemsPerPage } = this.props; + const { arvHost, arvToken } = app.state; + const { objectType, page, textSearch } = this.state; + let { filters } = this.state; + if (textSearch) + filters = filters.concat([['any', 'ilike', '%' + textSearch + '%']]); + const order = (objectType === 'user') ? + ['last_name asc', 'first_name asc'] : + ['name asc']; + let prom = makeArvadosRequest(arvHost, arvToken, + '/arvados/v1/' + objectType + + 's?offset=' + (page * itemsPerPage) + + '&limit=' + itemsPerPage + + '&filters=' + encodeURIComponent(JSON.stringify(filters)) + + '&order=' + encodeURIComponent(JSON.stringify(order)) + ); + prom = prom.then(xhr => this.setState({ + numPages: Math.ceil(xhr.response.items_available / itemsPerPage), + rows: this.prepareRows(xhr.response.items) + })); + return prom; + } + + prepareRows(items) { + const { accept } = this.state; + const { dialogRef } = this; + + return items.map(it => [ + (
+
+ { dialogRef.current.hide(); accept(it); } }> + { arvadosObjectName(it) } + +
+
{ it.uuid }
+
) + ]); + } + + search(textSearch) { + this.setState({ textSearch, page: 0}); + this.fetchData(); + } + + render({}, { title, rows, page, numPages, textSearch }) { + return ( + +
+
+ { if (e.keyCode === 13) { + e.preventDefault(); + this.search(e.target.value); + } } } + onchange={ e => this.search(e.target.value) } /> + +
+ +
+
+ + + + { this.setState({ page: i }); this.fetchData(); } } /> +
+ +
+ +
+
+ ); + } +} + +WBPickObjectDialog.defaultProps = { + itemsPerPage: 20 +}; + +export default WBPickObjectDialog; diff --git a/frontend/src/js/page/wb-sharing-page.js b/frontend/src/js/page/wb-sharing-page.js index 5904529..3ef7193 100644 --- a/frontend/src/js/page/wb-sharing-page.js +++ b/frontend/src/js/page/wb-sharing-page.js @@ -4,14 +4,14 @@ import WBArvadosCrumbs from 'wb-arvados-crumbs'; import WBNameAndUuid from 'wb-name-and-uuid'; import WBSelect from 'wb-select'; import WBTable from 'wb-table'; -import WBBrowseDialog from 'wb-browse-dialog'; +import WBPickObjectDialog from 'wb-pick-object-dialog'; import makeArvadosRequest from 'make-arvados-request'; class WBSharingPage extends Component { constructor(...args) { super(...args); this.state.rows = []; - this.browseDialogRef = createRef(); + this.dialogRef = createRef(); } componentDidMount() { @@ -44,6 +44,14 @@ class WBSharingPage extends Component { ]); } + addEntry(it) { + throw Error('Not implemented'); + } + + save() { + throw Error('Not implemented'); + } + render({ app, uuid }, { rows }) { return (
@@ -51,18 +59,24 @@ class WBSharingPage extends Component { -
- This is the sharing management page for { uuid } -
+
+
+ This is the sharing management page for { uuid } +
- + - + - + + + +
); }