From 65e514a87bd08b24538081edbfcb3f5ec9eca575 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Wed, 8 May 2019 15:53:10 +0300
Subject: [PATCH] Sketching text facet
---
src/client/components/facet_bar/TextFacet.js | 128 +++++++++++++++++++
src/client/reducers/manuscriptsFacets.js | 17 +++
2 files changed, 145 insertions(+)
create mode 100644 src/client/components/facet_bar/TextFacet.js
diff --git a/src/client/components/facet_bar/TextFacet.js b/src/client/components/facet_bar/TextFacet.js
new file mode 100644
index 00000000..253ac594
--- /dev/null
+++ b/src/client/components/facet_bar/TextFacet.js
@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import SearchIcon from '@material-ui/icons/Search';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import FormControl from '@material-ui/core/FormControl';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const styles = theme => ({
+ textSearch: {
+ margin: theme.spacing.unit,
+ },
+});
+
+class TextFacet extends React.Component {
+ state = {
+ value: '',
+ };
+
+ // componentDidUpdate = prevProps => {
+ // if (prevProps.search.query != this.props.search.query) {
+ // this.setState({
+ // value: this.props.search.query
+ // });
+ // }
+ // }
+
+ handleChange = (event) => {
+ this.setState({ value: event.target.value });
+ };
+
+ handleMouseDown = (event) => {
+ event.preventDefault();
+ };
+
+ // handleOnKeyDown = (event) => {
+ // if (event.key === 'Enter' && this.hasDatasets() && this.hasValidQuery()) {
+ // this.props.clearResults();
+ // this.props.updateQuery(this.state.value);
+ // this.props.fetchResults('text', this.state.value);
+ // }
+ // };
+
+ // handleClick = () => {
+ // if (this.hasDatasets() && this.hasValidQuery()) {
+ // this.props.clearResults();
+ // this.props.updateQuery(this.state.value);
+ // this.props.fetchResults('text', this.state.value);
+ // }
+ // };
+
+ // hasDatasets = () => {
+ // let hasDs = false;
+ // Object.values(this.props.datasets).forEach(value => {
+ // if (value.selected) {
+ // hasDs = true;
+ // }
+ // });
+ // return hasDs;
+ // }
+
+ hasValidQuery = () => {
+ return this.state.value.length > 2;
+ }
+
+ render() {
+ const { classes } = this.props;
+ let searchButton = null;
+ const textResultsFetching = false;
+ if (textResultsFetching) {
+ searchButton = (
+ <IconButton
+ aria-label="Search places"
+ >
+ <CircularProgress size={24} />
+ </IconButton>
+ );
+ } else {
+ searchButton = (
+ <IconButton
+ aria-label="Search"
+ onClick={this.handleClick}
+ onMouseDown={this.handleMouseDown}
+ >
+ <SearchIcon />
+ </IconButton>
+ );
+ }
+
+ return (
+ <div className={classes.root}>
+ <FormControl className={classes.textSearch}>
+ <InputLabel htmlFor="adornment-search">Search</InputLabel>
+ <Input
+ id="adornment-search"
+ type='text'
+ value={this.state.value}
+ onChange={this.handleChange}
+ onKeyDown={this.handleOnKeyDown}
+ endAdornment={
+ <InputAdornment position="end">
+ {searchButton}
+ </InputAdornment>
+ }
+ />
+ </FormControl>
+ </div>
+ );
+ }
+}
+
+TextFacet.propTypes = {
+ classes: PropTypes.object.isRequired,
+ facetID: PropTypes.string.isRequired,
+ facet: PropTypes.object.isRequired,
+ facetClass: PropTypes.string,
+ resultClass: PropTypes.string,
+ fetchFacet: PropTypes.func,
+ updateFacetOption: PropTypes.func,
+ facetUpdateID: PropTypes.number,
+ updatedFilter: PropTypes.object,
+ updatedFacet: PropTypes.string,
+};
+
+export default withStyles(styles)(TextFacet);
diff --git a/src/client/reducers/manuscriptsFacets.js b/src/client/reducers/manuscriptsFacets.js
index 995edb58..76f7447d 100644
--- a/src/client/reducers/manuscriptsFacets.js
+++ b/src/client/reducers/manuscriptsFacets.js
@@ -16,6 +16,23 @@ export const INITIAL_STATE = {
facetUpdateID: 0,
updatedFilter: null,
facets: {
+ // label: {
+ // id: 'label',
+ // label: 'Label',
+ // // predicate: defined in backend
+ // distinctValueCount: 0,
+ // values: [],
+ // flatValues: [],
+ // //sortBy: 'instanceCount',
+ // //sortDirection: 'desc',
+ // sortButton: false,
+ // spatialFilterButton: false,
+ // isFetching: false,
+ // searchField: false,
+ // containerClass: 'one',
+ // filterType: 'text',
+ // uriFilter: null
+ // },
source: {
id: 'source',
label: 'Source',
--
GitLab