From 17bd6cd84e01fc37a07ee3847d80624bd3186601 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Mon, 25 Mar 2019 09:02:52 +0200
Subject: [PATCH] URI filters to objects, new component for showing active
filters
---
src/client/components/facet_bar/ChipsArray.js | 67 +++++++++++++++++++
src/client/components/facet_bar/Tree.js | 12 +++-
src/client/epics/index.js | 4 +-
src/client/reducers/helpers.js | 13 ++--
src/client/reducers/manuscriptsFacets.js | 6 +-
src/client/reducers/organizationsFacets.js | 2 +-
src/client/reducers/peopleFacets.js | 4 +-
src/client/reducers/placesFacets.js | 4 +-
src/client/reducers/worksFacets.js | 2 +-
9 files changed, 98 insertions(+), 16 deletions(-)
create mode 100644 src/client/components/facet_bar/ChipsArray.js
diff --git a/src/client/components/facet_bar/ChipsArray.js b/src/client/components/facet_bar/ChipsArray.js
new file mode 100644
index 00000000..ac344029
--- /dev/null
+++ b/src/client/components/facet_bar/ChipsArray.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Chip from '@material-ui/core/Chip';
+import Paper from '@material-ui/core/Paper';
+//import TagFacesIcon from '@material-ui/icons/TagFaces';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ justifyContent: 'center',
+ flexWrap: 'wrap',
+ padding: theme.spacing.unit / 2,
+ },
+ chip: {
+ margin: theme.spacing.unit / 2,
+ },
+});
+
+class ChipsArray extends React.Component {
+
+ handleDelete = data => () => {
+ if (data.label === 'React') {
+ alert('Why would you want to delete React?! :)'); // eslint-disable-line no-alert
+ return;
+ }
+
+ this.setState(state => {
+ const chipData = [...state.chipData];
+ const chipToDelete = chipData.indexOf(data);
+ chipData.splice(chipToDelete, 1);
+ return { chipData };
+ });
+ };
+
+ render() {
+ const { classes, data } = this.props;
+ return (
+ <Paper className={classes.root}>
+ {data !== null && data.map(item => {
+ let icon = null;
+
+ // if (item.label === 'React') {
+ // icon = <TagFacesIcon />;
+ // }
+
+ return (
+ <Chip
+ key={item.key}
+ icon={icon}
+ label={item.label}
+ onDelete={this.handleDelete(item)}
+ className={classes.chip}
+ />
+ );
+ })}
+ </Paper>
+ );
+ }
+}
+
+ChipsArray.propTypes = {
+ classes: PropTypes.object.isRequired,
+ data: PropTypes.object,
+};
+
+export default withStyles(styles)(ChipsArray);
diff --git a/src/client/components/facet_bar/Tree.js b/src/client/components/facet_bar/Tree.js
index 1ff0d472..0fc4feba 100644
--- a/src/client/components/facet_bar/Tree.js
+++ b/src/client/components/facet_bar/Tree.js
@@ -12,6 +12,7 @@ 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';
+import ChipsArray from './ChipsArray';
const styles = () => ({
facetSearchContainer: {
@@ -84,6 +85,10 @@ class Tree extends Component {
}
componentDidUpdate = prevProps => {
+ // if (this.props.facetID === 'productionPlace') {
+ // console.log(this.props.facet.values)
+ // }
+
if (prevProps.facet.values != this.props.facet.values) {
this.setState({
treeData: this.props.facet.values
@@ -127,7 +132,10 @@ class Tree extends Component {
facetClass: this.props.facetClass,
facetID: this.props.facetID,
option: this.props.facet.filterType,
- value: treeObj.node.id
+ value: {
+ id: treeObj.node.id,
+ label: treeObj.node.prefLabel
+ }
});
};
@@ -218,6 +226,7 @@ class Tree extends Component {
: 0,
});
+ //<ChipsArray data={this.props.facet.uriFilter} />}
return (
<React.Fragment>
{isFetching ?
@@ -226,6 +235,7 @@ class Tree extends Component {
</div>
:
<React.Fragment>
+
{searchField && facet.filterType !== 'spatialFilter' &&
<div className={classes.facetSearchContainer}>
<Input
diff --git a/src/client/epics/index.js b/src/client/epics/index.js
index 44096b2c..7bf03045 100644
--- a/src/client/epics/index.js
+++ b/src/client/epics/index.js
@@ -180,9 +180,9 @@ export const stateToUrl = ({
let activeUriFilters = false;
let activeSpatialFilters = false;
for (const [key, value] of Object.entries(facets)) {
- if (value.uriFilter.size != 0) {
+ if (value.uriFilter !== null) {
activeUriFilters = true;
- uriFilters[key] = Array.from(value.uriFilter);
+ uriFilters[key] = Object.keys(value.uriFilter);
} else if (has(value, 'spatialFilter') && value.spatialFilter !== null) {
activeSpatialFilters = true;
spatialFilters[key] = boundsToValues(value.spatialFilter._bounds);
diff --git a/src/client/reducers/helpers.js b/src/client/reducers/helpers.js
index da831958..adce08d4 100644
--- a/src/client/reducers/helpers.js
+++ b/src/client/reducers/helpers.js
@@ -1,3 +1,5 @@
+import { has, isEmpty } from 'lodash';
+
export const fetchResults = state => {
return {
...state,
@@ -67,11 +69,14 @@ const updateFacetFilter = (state, action) => {
const oldFacet = state.facets[facetID];
let newFacet = {};
if (oldFacet.filterType === 'uriFilter') {
- let newUriFilter = oldFacet.uriFilter;
- if (newUriFilter.has(value)) {
- newUriFilter.delete(value);
+ let newUriFilter = oldFacet.uriFilter == null ? {} : oldFacet.uriFilter;
+ if (has(newUriFilter, value.id)) {
+ delete newUriFilter[value.id];
+ if (isEmpty(newUriFilter)) {
+ newUriFilter = null;
+ }
} else {
- newUriFilter.add(value);
+ newUriFilter[value.id] = value.label;
}
newFacet = {
...state.facets[facetID],
diff --git a/src/client/reducers/manuscriptsFacets.js b/src/client/reducers/manuscriptsFacets.js
index 8db825be..3b6715d2 100644
--- a/src/client/reducers/manuscriptsFacets.js
+++ b/src/client/reducers/manuscriptsFacets.js
@@ -30,7 +30,7 @@ export const INITIAL_STATE = {
searchField: false,
containerClass: 'three',
filterType: 'uriFilter',
- uriFilter: new Set()
+ uriFilter: null
},
productionPlace: {
id: 'productionPlace',
@@ -47,7 +47,7 @@ export const INITIAL_STATE = {
searchField: true,
containerClass: 'ten',
filterType: 'uriFilter',
- uriFilter: new Set(),
+ uriFilter: null,
spatialFilter: null
},
author: {
@@ -65,7 +65,7 @@ export const INITIAL_STATE = {
searchField: true,
containerClass: 'ten',
filterType: 'uriFilter',
- uriFilter: new Set()
+ uriFilter: null
},
// language: {
// id: 'language',
diff --git a/src/client/reducers/organizationsFacets.js b/src/client/reducers/organizationsFacets.js
index 9ec803ff..89c77548 100644
--- a/src/client/reducers/organizationsFacets.js
+++ b/src/client/reducers/organizationsFacets.js
@@ -30,7 +30,7 @@ export const INITIAL_STATE = {
searchField: false,
containerClass: 'five',
filterType: 'uriFilter',
- uriFilter: new Set()
+ uriFilter: null
},
}
};
diff --git a/src/client/reducers/peopleFacets.js b/src/client/reducers/peopleFacets.js
index f583fbf6..4605a5ff 100644
--- a/src/client/reducers/peopleFacets.js
+++ b/src/client/reducers/peopleFacets.js
@@ -30,7 +30,7 @@ export const INITIAL_STATE = {
searchField: false,
containerClass: 'five',
filterType: 'uriFilter',
- uriFilter: new Set()
+ uriFilter: null
},
place: {
id: 'place',
@@ -47,7 +47,7 @@ export const INITIAL_STATE = {
searchField: true,
containerClass: 'ten',
filterType: 'uriFilter',
- uriFilter: new Set()
+ uriFilter: null
},
}
};
diff --git a/src/client/reducers/placesFacets.js b/src/client/reducers/placesFacets.js
index cdb32a13..6feefc3a 100644
--- a/src/client/reducers/placesFacets.js
+++ b/src/client/reducers/placesFacets.js
@@ -30,7 +30,7 @@ export const INITIAL_STATE = {
searchField: false,
containerClass: 'five',
filterType: 'uriFilter',
- uriFilter: new Set()
+ uriFilter: null
},
area: {
id: 'area',
@@ -47,7 +47,7 @@ export const INITIAL_STATE = {
searchField: true,
containerClass: 'ten',
filterType: 'uriFilter',
- uriFilter: new Set(),
+ uriFilter: null,
spatialFilter: null
},
}
diff --git a/src/client/reducers/worksFacets.js b/src/client/reducers/worksFacets.js
index 480a2425..7b4ecb07 100644
--- a/src/client/reducers/worksFacets.js
+++ b/src/client/reducers/worksFacets.js
@@ -30,7 +30,7 @@ export const INITIAL_STATE = {
searchField: false,
containerClass: 'five',
filterType: 'uriFilter',
- uriFilter: new Set()
+ uriFilter: null
},
},
};
--
GitLab