Mo Elzubeir
112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { ButtonGroup, Button, CustomInput } from 'reactstrap';
|
|
import { translate } from 'react-i18next';
|
|
|
|
export class SearchingResultsTopPanel extends React.Component {
|
|
static propTypes = {
|
|
noRecords: PropTypes.bool,
|
|
selectedArticles: PropTypes.array.isRequired,
|
|
searchResultsCount: PropTypes.number.isRequired,
|
|
selectAllArticles: PropTypes.func.isRequired,
|
|
showDeleteArticlesPopup: PropTypes.func.isRequired,
|
|
showEmailArticlesPopup: PropTypes.func.isRequired,
|
|
showClipArticlesPopup: PropTypes.func.isRequired,
|
|
isRefinePanelVisible: PropTypes.bool.isRequired,
|
|
toggleRefinePanel: PropTypes.func.isRequired,
|
|
t: PropTypes.func.isRequired
|
|
};
|
|
|
|
onShowClick = (e) => {
|
|
e.preventDefault();
|
|
this.props.toggleRefinePanel();
|
|
};
|
|
|
|
selectAllArticles = (e) => {
|
|
const isChecked = e.target.checked;
|
|
if (this.props.searchResultsCount > 0) {
|
|
this.props.selectAllArticles(isChecked);
|
|
}
|
|
};
|
|
|
|
showDeleteArticlesPopup = () => {
|
|
if (this.props.selectedArticles.length > 0) {
|
|
this.props.showDeleteArticlesPopup(this.props.selectedArticles);
|
|
}
|
|
};
|
|
|
|
showEmailArticlesPopup = () => {
|
|
if (this.props.selectedArticles.length > 0) {
|
|
this.props.showEmailArticlesPopup(this.props.selectedArticles);
|
|
}
|
|
};
|
|
|
|
showClipArticlesPopup = () => {
|
|
if (this.props.selectedArticles.length > 0) {
|
|
this.props.showClipArticlesPopup(this.props.selectedArticles);
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const { t, searchResultsCount, noRecords } = this.props;
|
|
const chosenArticlesCount = this.props.selectedArticles.length;
|
|
const isAllArticlesChosen =
|
|
this.props.searchResultsCount > 0
|
|
? searchResultsCount === chosenArticlesCount
|
|
: false;
|
|
|
|
if (noRecords) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="d-flex justify-content-end mb-3 mb-md-0">
|
|
<ButtonGroup>
|
|
<Button color="light">
|
|
<CustomInput
|
|
id="toggle-all-results"
|
|
type="checkbox"
|
|
checked={isAllArticlesChosen}
|
|
onChange={this.selectAllArticles}
|
|
/>
|
|
</Button>
|
|
|
|
{/* <Button color="secondary">
|
|
<i className="fa fa-tag mr-2"> </i>
|
|
{t('searchTab.tagBtn')}
|
|
</Button> */}
|
|
|
|
<Button color="secondary" onClick={this.showClipArticlesPopup}>
|
|
<i className="fa fa-scissors mr-2"> </i>
|
|
{t('searchTab.clipBtn')}
|
|
</Button>
|
|
<Button color="secondary" onClick={this.showEmailArticlesPopup}>
|
|
<i className="fa fa-envelope-o mr-2"> </i>
|
|
{t('searchTab.emailBtn')}
|
|
</Button>
|
|
<Button color="secondary" onClick={this.showDeleteArticlesPopup}>
|
|
<i className="fa fa-trash mr-2"> </i>
|
|
{t('searchTab.deleteBtn')}
|
|
</Button>
|
|
</ButtonGroup>
|
|
|
|
{!this.props.isRefinePanelVisible && (
|
|
<Button
|
|
color="light"
|
|
title="Show refine panel"
|
|
className="btn-icon ml-3"
|
|
onClick={this.onShowClick}
|
|
>
|
|
<i className="pe-7s-filter btn-icon-wrapper"></i>
|
|
{t('searchTab.filter')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default translate(['tabsContent'], { wait: true })(
|
|
SearchingResultsTopPanel
|
|
);
|