labo-components/app/components/search/CollectionBar.jsx

B&G UI components

import React from 'react';
import PropTypes from 'prop-types';

import IDUtil from '../../util/IDUtil';
import ComponentUtil from '../../util/ComponentUtil';

export default class CollectionBar extends React.PureComponent {

	constructor(props) {
		super(props);
		this.CLASS_PREFIX = "scb";
	}

	getCollectionHits = config => {
		if (config && config.getCollectionMetadata()) {
			const md = config.getCollectionMetadata();
			const docType = config.getDocumentType();
			if (md && md.collection_statistics) {
				if (md.collection_statistics.length > 0) {
					const match = md.collection_statistics.find(dt => dt.doc_type === docType);
					return match ? match.doc_count : 0;
				}
			}
		}
		return 0;
	};

	resetSearch = () => {
		this.props.resetSearch(this.constructor.name, null);
	};

	render() {
		const collectionConfig = this.props.collectionConfig;
		const collectionMetadata = collectionConfig ? collectionConfig.getCollectionMetadata() : null;

		const infoButton = collectionMetadata && collectionMetadata.registryUrl ? (
			<a className="btn btn-link text-dark" title="View collection info" href={collectionMetadata.registryUrl} target="_blank" rel="noreferrer">
				<i className="fas fa-external-link-alt" />
			</a>
		) : null;

		const hits = collectionConfig ? (
			<span className={IDUtil.cssClassName("count", this.CLASS_PREFIX)} title="Records in this collection">
				{ComponentUtil.formatNumber(this.getCollectionHits(collectionConfig))}
			</span>
		) : null;

		const saveButton = collectionConfig && this.props.user.id !== 'ANONYMOUS' ? (
			<button 
				className="btn btn-secondary btn-sm text-uppercase fw-bold" 
				onClick={this.props.saveQuery} 
				title="Save current query to the active project">
				Save Query
			</button>
		) : null;

		return (
			<div className={IDUtil.cssClassName("single-search-collection-bar")}>
				{collectionConfig && collectionConfig.getCollectionMetadata() ? (
					<div className={IDUtil.cssClassName("active", this.CLASS_PREFIX)}>
						<div className={IDUtil.cssClassName("collection-info", this.CLASS_PREFIX)}>
							<h2 onClick={this.props.selectCollection}>{collectionConfig.getCollectionTitle()}</h2>
							{hits}
							{infoButton}
						</div>
						<div className={IDUtil.cssClassName("buttons", this.CLASS_PREFIX)}>
							{saveButton}
							<button className="btn btn-light btn-sm text-uppercase fw-bold" onClick={this.resetSearch}>Clear search</button>
						</div>
					</div>
				) : (
					<div>
						<button className="btn btn-primary btn-sm text-uppercase fw-bold" onClick={this.props.selectCollection}>Select collection</button>
					</div>
				)}
			</div>
		);
	}
}

CollectionBar.propTypes = {
	user: PropTypes.shape({
		id: PropTypes.string.isRequired,
		name: PropTypes.string
	}),
	collectionConfig: PropTypes.shape({
		// optional: collection config of active project
		getCollectionTitle: PropTypes.func.isRequired,
		getCollectionMetadata: PropTypes.func
	}),
	selectCollection: PropTypes.func.isRequired, // show modal to select collection
	resetSearch: PropTypes.func.isRequired, // reset search
	saveQuery: PropTypes.func, // save query, optional (only when project is selected)
};