import { h, Component } from 'preact'; import WBTable from 'wb-table'; import WBPagination from 'wb-pagination'; import makeArvadosRequest from 'make-arvados-request'; class WBBrowseDialogCollectionList extends Component { constructor(...args) { super(...args); this.state.rows = []; } componentDidMount() { this.fetchRows(); } componentWillReceiveProps(nextProps) { this.props = nextProps; this.fetchRows(); } prepareRows(items) { const { navigate, selectWhat, makeSelectionCell } = this.props; return items.map(it => [ ([].concat(selectWhat).indexOf('directory') !== -1 ? makeSelectionCell(it.uuid + '/') : null), ( { e.preventDefault(); navigate('/browse-dialog/content/' + it.uuid + '////'); } }>{ it.name } ), it.uuid ]); } fetchRows() { const { arvHost, arvToken } = this.props.app.state; const { ownerUuid, textSearch, page, itemsPerPage } = this.props; const filters = []; if (ownerUuid) filters.push(['owner_uuid', '=', ownerUuid]); if (textSearch) filters.push(['name', 'ilike', '%' + textSearch + '%']); let prom = makeArvadosRequest(arvHost, arvToken, '/arvados/v1/collections?filters=' + encodeURIComponent(JSON.stringify(filters)) + '&limit=' + itemsPerPage + '&offset=' + (itemsPerPage * page)); prom = prom.then(xhr => this.setState({ 'rows': this.prepareRows(xhr.response.items), 'numPages': Math.ceil(xhr.response.items_available / itemsPerPage) })); return prom; } render({ selectWhat, page, navigate }, { rows, numPages }) { return (
navigate({ 'bottomPage': i }) } />
); } } WBBrowseDialogCollectionList.defaultProps = { 'itemsPerPage': 20 }; export default WBBrowseDialogCollectionList;