|
- import { h, Component, createRef } from 'preact';
- import { route } from 'preact-router';
- import WBNavbarCommon from 'wb-navbar-common';
- import WBProjectListing from 'wb-project-listing';
- import WBInlineSearch from 'wb-inline-search';
- import WBArvadosCrumbs from 'wb-arvados-crumbs';
- import WBTabs from 'wb-tabs';
- import WBProcessListing from 'wb-process-listing';
- import WBCollectionListing from 'wb-collection-listing';
- import WBWorkflowListing from 'wb-workflow-listing';
- import WBRenameDialog from 'wb-rename-dialog';
- import WBDeleteDialog from 'wb-delete-dialog';
- import WBNewProjectDialog from 'wb-new-project-dialog';
- import WBEditDescriptionDialog from 'wb-edit-description-dialog';
- import wbMoveObject from 'wb-move-object';
- import wbCopyCollection from 'wb-copy-collection';
- import arvadosTypeName from 'arvados-type-name';
-
- class WBBrowseProjectTabs extends Component {
- render({ ownerUuid, selected, newProjectDialogRef, projectListingRef,
- moveHere, copyHere }) {
-
- return (
- <WBTabs tabs={ [
- { 'name': 'Projects', 'isActive': true },
- ownerUuid ? { 'name': ( <span><i class="fas fa-plus-square text-success"></i> New Project</span> ),
- 'onClick': () => newProjectDialogRef.current.show(ownerUuid,
- () => projectListingRef.current.fetchItems() ) } : null,
- ( ownerUuid && Object.keys(selected).length > 0 ) ?
- { 'name': ( <span><i class="fas fa-compress-arrows-alt text-warning"></i> Move Here</span> ),
- 'onClick': moveHere } : null,
- ( ownerUuid && (uuids => uuids.length > 0 && uuids.length ===
- uuids.map(arvadosTypeName).filter(a => (a === 'collection')).length )(Object.keys(selected)) ) ?
- { 'name': ( <span><i class="fas fa-file-import text-warning"></i> Copy Here</span> ),
- 'onClick': copyHere } : null
- ] } />
- );
- }
- }
-
- class WBBrowse extends Component {
- constructor(...args) {
- super(...args);
- this.renameDialogRef = createRef();
- this.deleteDialogRef = createRef();
- this.newProjectDialogRef = createRef();
- this.projectListingRef = createRef();
- this.projectTabsRef = createRef();
- this.editDescriptionDialogRef = createRef();
- this.state.selected = {};
- }
-
- getUrl(params) {
- const mode = ('mode' in params ? params.mode : this.props.mode);
-
- if (mode === 'shared-with-me')
- return '/shared-with-me/' +
- ('activePage' in params ? params.activePage : (this.props.activePage || '')) + '/' +
- ('textSearch' in params ? params.textSearch : (this.props.textSearch || ''));
-
- let res = '/browse/' +
- ('ownerUuid' in params ? params.ownerUuid : (this.props.ownerUuid || '')) + '/' +
- ('activePage' in params ? params.activePage : (this.props.activePage || '')) + '/' +
- ('objTypeTab' in params ? params.objTypeTab : (this.props.objTypeTab || '')) + '/' +
- ('collectionPage' in params ? params.collectionPage : (this.props.collectionPage || '')) + '/' +
- ('processPage' in params ? params.processPage : (this.props.processPage || '')) + '/' +
- ('workflowPage' in params ? params.workflowPage : (this.props.workflowPage || '')) + '/' +
- encodeURIComponent('textSearch' in params ? params.textSearch : (this.props.textSearch || ''));
-
- return res;
- }
-
- route(params) {
- route(this.getUrl(params));
- }
-
- renameDialog(item, callback) {
- // throw Error('Not implemented');
- this.renameDialogRef.current.show(item, callback);
- }
-
- renderRenameLink(item, callback) {
- return (
- <a href="#" title="Rename" onclick={ e => { e.preventDefault(); this.renameDialog(item, callback); } }>
- <i class="fas fa-edit text-secondary"></i>
- </a>
- );
- }
-
- renderEditDescription(item, callback) {
- return (
- <a href="#" title="Edit description" onclick={ e => { e.preventDefault();
- this.editDescriptionDialogRef.current.show(item, callback); } }>
-
- <i class="fas fa-edit text-secondary"></i>
- </a>
- );
- }
-
- renderDeleteButton(item, callback) {
- return (
- <button class="btn btn-outline-danger m-1" title="Delete"
- onclick={ () => this.deleteDialogRef.current.show(item, callback) }>
- <i class="fas fa-trash"></i>
- </button>
- );
- }
-
- renderSelectionCell(item) {
- const { selected } = this.state;
- const { uuid } = item;
- return (
- <div>
- <input type="checkbox" checked={ (uuid in selected) }
- onChange={ e => {
- if (e.target.checked)
- selected[uuid] = true;
- else
- delete selected[uuid];
- this.projectTabsRef.current.setState({});
- } } /> { '\u00A0' }
- </div>
- );
- }
-
- renderSharingButton(item) {
- return (
- <a class="btn btn-outline-success m-1" title="Share"
- href={ '/sharing/' + item.uuid }>
- <i class="fas fa-share-alt"></i>
- </a>
- );
- }
-
- moveOrCopyOp(op) {
- const { ownerUuid, app } = this.props;
- const { selected } = this.state;
- const { arvHost, arvToken } = app.state;
- let prom = new Promise(accept => accept());
- const uuids = Object.keys(selected);
- for (let i = 0; i < uuids.length; i++) {
- prom = prom.then(() => op(arvHost, arvToken, uuids[i], ownerUuid));
- prom = prom.then(() => ( delete selected[uuids[i]] ));
- prom = prom.catch(() => {});
- }
- prom = prom.then(() => this.setState({}));
- }
-
- moveHere() {
- this.moveOrCopyOp(wbMoveObject);
- }
-
- copyHere() {
- this.moveOrCopyOp(wbCopyCollection);
- }
-
- render({ mode, ownerUuid, activePage, app,
- objTypeTab, collectionPage, processPage, workflowPage,
- textSearch }, { selected }) {
-
- const commonProps = {
- renderRenameLink: (it, cb) => this.renderRenameLink(it, cb),
- renderEditDescription: (it, cb) => this.renderEditDescription(it, cb),
- renderDeleteButton: (it, cb) => this.renderDeleteButton(it, cb),
- renderSelectionCell: it => this.renderSelectionCell(it),
- renderSharingButton: it => this.renderSharingButton(it),
- textSearch,
- app,
- appState: app.state,
- arvHost: app.state.arvHost,
- arvToken: app.state.arvToken,
- ownerUuid
- };
-
- const { currentUser } = app.state;
- const atHome = (ownerUuid === currentUser.uuid);
-
- return (
- <div>
- <WBRenameDialog app={ app } ref={ this.renameDialogRef } />
-
- <WBDeleteDialog app={ app } ref={ this.deleteDialogRef } />
-
- <WBNewProjectDialog app={ app } ref={ this.newProjectDialogRef } />
-
- <WBEditDescriptionDialog app={ app } ref={ this.editDescriptionDialogRef } />
-
- <WBNavbarCommon app={ app }
- activeItem={ mode === 'shared-with-me' ? 'shared-with-me' :
- (!ownerUuid) ? 'all-projects' :
- (ownerUuid === app.state.currentUser.uuid) ? 'home' : null }
- textSearch={ textSearch }
- textSearchNavigate={ textSearch => route(this.getUrl({ textSearch,
- activePage: 0, collectionPage: 0, processPage: 0, workflowPage: 0 })) } />
-
- <WBArvadosCrumbs mode={ mode } uuid={ ownerUuid } app={ app } />
-
- <WBBrowseProjectTabs ref={ this.projectTabsRef } ownerUuid={ ownerUuid }
- selected={ selected } newProjectDialogRef={ this.newProjectDialogRef }
- projectListingRef={ this.projectListingRef } moveHere={ () => this.moveHere() }
- copyHere={ () => this.copyHere() } />
-
- <WBProjectListing ref={ this.projectListingRef }
- mode={ mode }
- itemsPerPage="5"
- activePage={ Number(activePage || 0) }
- getPageUrl={ i => this.getUrl({ 'activePage': i }) }
- { ...commonProps } />
-
- { (mode !== 'browse') ? null : (
- <WBTabs tabs={ [
- { 'id': 'collection', 'name': 'Collections', 'isActive': ((!objTypeTab && !atHome) || objTypeTab === 'collection') },
- { 'id': 'process', 'name': 'Processes', 'isActive': (objTypeTab === 'process') },
- { 'id': 'workflow', 'name': 'Workflows', 'isActive': (objTypeTab === 'workflow') } ] }
- onTabChanged={ tab => this.route({ 'objTypeTab': tab['id'] }) } />
- ) }
-
- {
- (mode !== 'browse') ? null :
- ((!objTypeTab && !atHome) || objTypeTab === 'collection') ? (
- <WBCollectionListing
- itemsPerPage="20"
- activePage={ Number(collectionPage || 0) }
- getPageUrl={ i => this.getUrl({ 'collectionPage': i }) }
- { ...commonProps } />
-
- ) : (objTypeTab === 'process') ? (
- <WBProcessListing
- itemsPerPage="20"
- activePage={ Number(processPage || 0) }
- onPageChanged={ i => this.route({ 'processPage': i }) }
- { ...commonProps } />
-
- ) : (objTypeTab === 'workflow') ? (
- <WBWorkflowListing
- itemsPerPage="20"
- page={ Number(workflowPage || 0) }
- getPageUrl={ i => this.getUrl({ 'workflowPage': i }) }
- { ...commonProps } />
-
- ) : null
- }
- </div>
- );
- }
- }
-
- export default WBBrowse;
|