Skip to content
Snippets Groups Projects
Commit c0130e8c authored by esikkala's avatar esikkala
Browse files

Add search field for facet values

parent 3376ecae
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/client/components/FacetBar.js
+ 4
− 1
View file @ c0130e8c
...@@ -28,7 +28,7 @@ const styles = theme => ({ ...@@ -28,7 +28,7 @@ const styles = theme => ({
marginBottom: 2, marginBottom: 2,
}, },
facetValuesContainerTen: { facetValuesContainerTen: {
height: 295, height: 345,
padding: theme.spacing.unit, padding: theme.spacing.unit,
}, },
facetValuesContainerThree: { facetValuesContainerThree: {
...@@ -70,6 +70,7 @@ class FacetBar extends React.Component { ...@@ -70,6 +70,7 @@ class FacetBar extends React.Component {
facetFilters={this.props.facetFilters} facetFilters={this.props.facetFilters}
updateFilter={this.props.updateFilter} updateFilter={this.props.updateFilter}
updatedFacet={this.props.updatedFacet} updatedFacet={this.props.updatedFacet}
searchField={false}
/> />
</div> </div>
</Paper> </Paper>
...@@ -95,6 +96,7 @@ class FacetBar extends React.Component { ...@@ -95,6 +96,7 @@ class FacetBar extends React.Component {
facetFilters={this.props.facetFilters} facetFilters={this.props.facetFilters}
updateFilter={this.props.updateFilter} updateFilter={this.props.updateFilter}
updatedFacet={this.props.updatedFacet} updatedFacet={this.props.updatedFacet}
searchField={true}
/> />
</div> </div>
</Paper> </Paper>
...@@ -120,6 +122,7 @@ class FacetBar extends React.Component { ...@@ -120,6 +122,7 @@ class FacetBar extends React.Component {
facetFilters={this.props.facetFilters} facetFilters={this.props.facetFilters}
updateFilter={this.props.updateFilter} updateFilter={this.props.updateFilter}
updatedFacet={this.props.updatedFacet} updatedFacet={this.props.updatedFacet}
searchField={true}
/> />
</div> </div>
</Paper> </Paper>
......
src/client/components/HierarchicalFacet.js
+ 121
− 111
View file @ c0130e8c
...@@ -8,11 +8,29 @@ import Checkbox from '@material-ui/core/Checkbox'; ...@@ -8,11 +8,29 @@ import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@material-ui/core/FormControlLabel';
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from '@material-ui/core/CircularProgress';
import purple from '@material-ui/core/colors/purple'; import purple from '@material-ui/core/colors/purple';
import Input from '@material-ui/core/Input';
import IconButton from '@material-ui/core/IconButton';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
import Typography from '@material-ui/core/Typography';
// https://frontend-collective.github.io/react-sortable-tree/storybook/?selectedKind=Basics&selectedStory=Search&full=0&addons=0&stories=1&panelRight=0
const styles = () => ({ const styles = () => ({
searchForm: { facetSearchContainer: {
display: 'inline-block', width: '100%',
height: 50, height: 44,
display: 'flex',
alignItems: 'center'
},
facetSearchIconButton: {
padding: 10
},
treeContainer: {
height: '100%'
},
treeContainerWithSearchField: {
height: 'calc(100% - 40px)'
}, },
spinnerContainer: { spinnerContainer: {
display: 'flex', display: 'flex',
...@@ -77,7 +95,7 @@ class HierarchicalFacet extends Component { ...@@ -77,7 +95,7 @@ class HierarchicalFacet extends Component {
// console.log(this.props.updatedFacet) // console.log(this.props.updatedFacet)
// } // }
if (this.props.updatedFacet !== '' && this.props.updatedFacet !== this.props.property && prevProps.facetFilters != this.props.facetFilters) { if (this.props.updatedFacet !== '' && this.props.updatedFacet !== this.props.property && prevProps.facetFilters != this.props.facetFilters) {
console.log(`fetching new values for ${this.props.property}`) // console.log(`fetching new values for ${this.props.property}`)
this.props.fetchFacet(this.props.property); this.props.fetchFacet(this.props.property);
} }
} }
...@@ -124,72 +142,29 @@ class HierarchicalFacet extends Component { ...@@ -124,72 +142,29 @@ class HierarchicalFacet extends Component {
render() { render() {
const { classes } = this.props; const { classes } = this.props;
const { searchString, searchFocusIndex, /*searchFoundCount*/ } = this.state; const { searchString, searchFocusIndex, searchFoundCount } = this.state;
//console.log(this.props.data) //console.log(this.props.data)
// Case insensitive search of `node.title` // Case insensitive search of `node.title`
const customSearchMethod = ({ node, searchQuery }) => const customSearchMethod = ({ node, searchQuery }) =>
searchQuery && searchQuery &&
node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1; node.prefLabel.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
// const selectPrevMatch = () => const selectPrevMatch = () =>
// this.setState({ this.setState({
// searchFocusIndex: searchFocusIndex:
// searchFocusIndex !== null searchFocusIndex !== null
// ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
// : searchFoundCount - 1, : searchFoundCount - 1,
// }); });
//
// const selectNextMatch = () =>
// this.setState({
// searchFocusIndex:
// searchFocusIndex !== null
// ? (searchFocusIndex + 1) % searchFoundCount
// : 0,
// });
// <form
// className={classes.searchForm}
// onSubmit={event => {
// event.preventDefault();
// }}
// >
// <input
// id="find-box"
// type="text"
// placeholder="Search..."
// style={{ fontSize: '1rem' }}
// value={searchString}
// onChange={event =>
// this.setState({ searchString: event.target.value })
// }
// />
//
// <button
// type="button"
// disabled={!searchFoundCount}
// onClick={selectPrevMatch}
// >
// &lt;
// </button>
//
// <button
// type="submit"
// disabled={!searchFoundCount}
// onClick={selectNextMatch}
// >
// &gt;
// </button>
//
// <span>
// &nbsp;
// {searchFoundCount > 0 ? searchFocusIndex + 1 : 0}
// &nbsp;/&nbsp;
// {searchFoundCount || 0}
// </span>
// </form>
// const selectNextMatch = () =>
this.setState({
searchFocusIndex:
searchFocusIndex !== null
? (searchFocusIndex + 1) % searchFoundCount
: 0,
});
return ( return (
<React.Fragment> <React.Fragment>
...@@ -198,56 +173,90 @@ class HierarchicalFacet extends Component { ...@@ -198,56 +173,90 @@ class HierarchicalFacet extends Component {
<CircularProgress style={{ color: purple[500] }} thickness={5} /> <CircularProgress style={{ color: purple[500] }} thickness={5} />
</div> </div>
: :
<SortableTree <React.Fragment>
treeData={this.state.treeData} {this.props.searchField &&
onChange={treeData => this.setState({ treeData })} <div className={classes.facetSearchContainer}>
canDrag={false} <Input
rowHeight={30} placeholder={`Search...`}
// Custom comparison for matching during search. onChange={event => this.setState({ searchString: event.target.value })}
// This is optional, and defaults to a case sensitive search of >
// the title and subtitle values. </Input>
// see `defaultSearchMethod` in https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/default-handlers.js {searchFoundCount > 0 &&
searchMethod={customSearchMethod} <React.Fragment>
searchQuery={searchString} <IconButton
// When matches are found, this property lets you highlight a specific className={classes.facetSearchIconButton}
// match and scroll to it. This is optional. aria-label="Previous"
searchFocusOffset={searchFocusIndex} onClick={selectPrevMatch}
// This callback returns the matches from the search, >
// including their `node`s, `treeIndex`es, and `path`s <NavigateBeforeIcon />
// Here I just use it to note how many matches were found. </IconButton>
// This is optional, but without it, the only thing searches <IconButton
// do natively is outline the matching nodes. className={classes.facetSearchIconButton}
searchFinishCallback={matches => aria-label="Next"
this.setState({ onClick={selectNextMatch}
searchFoundCount: matches.length, >
searchFocusIndex: <NavigateNextIcon />
matches.length > 0 ? searchFocusIndex % matches.length : 0, </IconButton>
}) <Typography>
{searchFoundCount > 0 ? searchFocusIndex + 1 : 0} / {searchFoundCount || 0}
</Typography>
</React.Fragment>
}
</div>
} }
onlyExpandSearchedNodes={true} <div className={this.props.searchField ? classes.treeContainerWithSearchField : classes.treeContainer }>
theme={FileExplorerTheme} <SortableTree
generateNodeProps={n => ({ treeData={this.state.treeData}
title: ( onChange={treeData => this.setState({ treeData })}
<FormControlLabel canDrag={false}
control={ rowHeight={30}
<Checkbox // Custom comparison for matching during search.
className={classes.checkbox} // This is optional, and defaults to a case sensitive search of
checked={n.node.selected == 'true' ? true : false} // the title and subtitle values.
disabled={n.node.instanceCount > 0 ? false : true} // see `defaultSearchMethod` in https://github.com/frontend-collective/react-sortable-tree/blob/master/src/utils/default-handlers.js
onChange={this.handleCheckboxChange(n)} searchMethod={customSearchMethod}
value={n.node.id} searchQuery={searchString}
color="primary" // When matches are found, this property lets you highlight a specific
// match and scroll to it. This is optional.
searchFocusOffset={searchFocusIndex}
// This callback returns the matches from the search,
// including their `node`s, `treeIndex`es, and `path`s
// Here I just use it to note how many matches were found.
// This is optional, but without it, the only thing searches
// do natively is outline the matching nodes.
searchFinishCallback={matches =>
this.setState({
searchFoundCount: matches.length,
searchFocusIndex:
matches.length > 0 ? searchFocusIndex % matches.length : 0,
})
}
onlyExpandSearchedNodes={true}
theme={FileExplorerTheme}
generateNodeProps={n => ({
title: (
<FormControlLabel
control={
<Checkbox
className={classes.checkbox}
checked={n.node.selected == 'true' ? true : false}
disabled={n.node.instanceCount > 0 ? false : true}
onChange={this.handleCheckboxChange(n)}
value={n.node.id}
color="primary"
/>
}
label={this.generateLabel(n.node)}
classes={{
root: classes.formControlRoot,
label: this.generateLabelClass(classes, n.node)
}}
/> />
} ),
label={this.generateLabel(n.node)} })}
classes={{ />
root: classes.formControlRoot, </div>
label: this.generateLabelClass(classes, n.node) </React.Fragment>
}}
/>
),
})}
/>
} }
</React.Fragment> </React.Fragment>
); );
...@@ -263,6 +272,7 @@ HierarchicalFacet.propTypes = { ...@@ -263,6 +272,7 @@ HierarchicalFacet.propTypes = {
facetFilters: PropTypes.object.isRequired, facetFilters: PropTypes.object.isRequired,
updateFilter: PropTypes.func.isRequired, updateFilter: PropTypes.func.isRequired,
updatedFacet: PropTypes.string.isRequired, updatedFacet: PropTypes.string.isRequired,
searchField: PropTypes.bool.isRequired,
}; };
export default withStyles(styles)(HierarchicalFacet); export default withStyles(styles)(HierarchicalFacet);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment