Feature/linkable filters

assets/js/components/PeopleIndex.js

@@ -21,10 +21,24 @@ const People = new Model('people')
 const PeopleSelector = new Selectable('people')
 const PeopleFilter = new Filterable('people')
 
+function getUrlFilter(state) {
+ const url = new URL(state.getIn(['router', 'location', 'search'], ''), window.location)
+ const decoded = atob(url.searchParams.get('filter', undefined))
+ try {
+ return JSON.parse(decoded)
+ } catch (_e) {
+ return undefined
+ }
+}
+
 const mapStateToProps = state => {
  const selection = PeopleSelector.immutableSelected(state)
+ const storeFilter = PeopleFilter.getFilter(state)
+ const urlFilter = getUrlFilter(state)
  return {
  selection,
+ urlFilter,
+ initialFilter: urlFilter ? urlFilter : storeFilter
  }
 }
 
@@ -83,16 +97,24 @@ export class PeopleIndex extends Component {
  super(props)
  this.state = {
  currentState: 0,
- copied: false
+ copied: false,
  }
  this.onCopy = this.onCopy.bind(this)
+ this.onFilterChange = this.onFilterChange.bind(this)
+ if (this.props.urlFilter) {
+ this.props.filter.set(this.props.urlFilter)
+ }
  }
 
  onCopy() {
  this.setState({copied: true})
  copy(this.props.selection.join(', '))
  }
 
+ onFilterChange(filter) {
+ this.props.filter.set(filter)
+ }
+
  render() {
  const props = this.props
  return (
@@ -114,7 +136,7 @@ export class PeopleIndex extends Component {
  <Tagger />
  </Grid>
  </Grid>
- <Grid container><Grid item xs><Search filter={props.filter} /></Grid></Grid>
+ <Grid container><Grid item xs><Search initialFilter={this.props.initialFilter} onFilterChange={this.onFilterChange} /></Grid></Grid>
  <PeopleTable />
  </React.Fragment>
  )

assets/js/components/people-browser/BooleanFilter.js

@@ -53,7 +53,7 @@ const OperatorWidgetForField = withFieldState('property')(props => {
  return (
  <FormControl fullWidth>
  <InputLabel>Comparison</InputLabel>
- <MaterialFormSelect initialValue="is" field="op">
+ <MaterialFormSelect field="op">
  <MenuItem value='is'>Is</MenuItem>
  </MaterialFormSelect>
  </FormControl>
@@ -75,7 +75,7 @@ const OperatorWidgetForField = withFieldState('property')(props => {
  return (
  <FormControl fullWidth>
  <InputLabel>Comparison</InputLabel>
- <BooleanSelect initialValue="contains" field="op"/>
+ <BooleanSelect field="op"/>
  </FormControl>
  )
  }
@@ -100,7 +100,7 @@ export const BooleanFilter = props => {
  <Grid item xs={3}>
  <FormControl fullWidth>
  <InputLabel>What</InputLabel>
- <MaterialFormSelect initialValue="name" field="property">
+ <MaterialFormSelect field="property">
  <MenuItem value="name">Name</MenuItem>
  <MenuItem value="email">E-Mail</MenuItem>
  <MenuItem value="geo.properties.city">City</MenuItem>

assets/js/components/people-browser/Search.js

@@ -1,30 +1,56 @@
 import React from 'react'
 import Grid from '@material-ui/core/Grid'
-import IconButton from '@material-ui/core/IconButton'
+import Button from '@material-ui/core/Button'
 import { Form, withFormApi } from 'informed'
 import faPlusSquare from '@fortawesome/fontawesome-free-solid/faPlusSquare'
 import { library as faLibrary } from '@fortawesome/fontawesome'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import MaterialFormSwitch from '../MaterialFormSwitch'
+import copy from 'copy-to-clipboard'
 
 faLibrary.add(faPlusSquare)
 
 import BooleanFilter from './BooleanFilter'
 
 const AddButton = withFormApi(props => (
- <IconButton
+ <Button
  color="primary"
  onClick={() => {
  const curFilter = props.formApi.getState().values.filter || []
  props.formApi.setValues({...(props.formApi.getState().values), filter: [...curFilter, {}]})
  }}>
  <FontAwesomeIcon icon={['fa', 'plus-square']} />
- </IconButton>
+ &nbsp;Add a filter
+ </Button>
+))
+
+const CopyButton = withFormApi(props => (
+ <Button
+ color="primary"
+ onClick={() => {
+ const curFilter = {children: props.formApi.getState().values.filter || [], op: props.formApi.getState().values.op ? 'or' : 'and'}
+ const encoded = btoa(JSON.stringify(curFilter))
+ const filterUrl = new URL(window.location)
+ filterUrl.searchParams.set('filter', encoded)
+ copy(filterUrl)
+ }}>
+ Copy link to filter
+ </Button>
 ))
 
 export const Search = props => {
+ const initialFilter = (props.initialFilter || {children: [{}]}).children
+ const initialOp = (props.initialFilter || {op: 'and'}).op
+ const boolOp = initialOp == 'or'
  return (
- <Form initialValues={{filter: [{}]}} onChange={({values}) => props.filter.set({op: values.op ? 'or' : 'and', children: values.filter})}>
+ <Form initialValues={{op: boolOp, filter: (initialFilter)}} onValueChange={(values) => {
+ if (values.filter && values.filter[0]) {
+ props.onFilterChange({
+ op: values.op ? 'or' : 'and', 
+ children: values.filter
+ })
+ }
+ }}>
  {({formApi}) => (
  <Grid container direction="column" alignItems="stretch" spacing={8}>
  <Grid item>Match All <MaterialFormSwitch field='op'/> Match Any</Grid>
@@ -33,7 +59,7 @@ export const Search = props => {
  <BooleanFilter index={idx} field={'filter['+idx+']'} />
  </Grid>
  )}
- <Grid item><AddButton /> Add a filter</Grid>
+ <Grid item><AddButton /> <CopyButton /></Grid>
  </Grid>
  )}
  </Form>

assets/js/store/filter.js

@@ -21,6 +21,10 @@ export default class Filterable {
  return values.filter(value => this.matcher(value, filterConfig))
  }
 
+ getFilter(state) {
+ return state.getIn(['filters', 'filters', this.key])
+ }
+
  bindActionCreators(dispatch) {
  return {
  set: f => dispatch(setFilter(this.key, f))