|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- 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 => [
- (<div>
- <div>
- <a href="#" onclick={ () => { dialogRef.current.hide(); accept(it); } }>
- { arvadosObjectName(it) }
- </a>
- </div>
- <div>{ it.uuid }</div>
- </div>)
- ]);
- }
-
- search(textSearch) {
- this.setState({ textSearch, page: 0});
- this.fetchData();
- }
-
- render({}, { title, rows, page, numPages, textSearch }) {
- return (
- <WBDialog title={ title } ref={ this.dialogRef }>
- <div>
- <div class="input-group mb-3">
- <input type="text" class="form-control" placeholder="Search"
- aria-label="Search" value={ textSearch }
- onkeydown={ e => { if (e.keyCode === 13) {
- e.preventDefault();
- this.search(e.target.value);
- } } }
- onchange={ e => this.search(e.target.value) } />
-
- <div class="input-group-append">
- <button class="btn btn-outline-primary" type="button" onclick={ e => e.preventDefault() }>Search</button>
- </div>
- </div>
-
- <WBTable columns={ [ 'Name' ] } rows={ rows } />
-
- <WBPagination activePage={ page } numPages={ numPages } chunkSize={ 3 }
- onPageChanged={ i => { this.setState({ page: i }); this.fetchData(); } } />
- </div>
-
- <div>
- <button class="btn btn-secondary"
- onclick={ e => { e.preventDefault(); this.hide(); } }>
- Cancel
- </button>
- </div>
- </WBDialog>
- );
- }
- }
-
- WBPickObjectDialog.defaultProps = {
- itemsPerPage: 20
- };
-
- export default WBPickObjectDialog;
|