Merge pull request #130 from partio-scout/feature/generic-filters

Add generic filter that allows user to choose which property is filtered

src/client/actions/SearchFilterActions.js

@@ -50,9 +50,13 @@ export function getSearchFilterActions(alt, searchFilterResource, participantRes
     loadOptions(property) {
       return dispatch => {
         dispatch();
-        participantResource.findAll(`filter[fields][${property}]=true`)
-          .then(response => this.optionsLoaded(property, processResults(response)),
-                err => this.optionsLoadingFailed(err));
+        if (!property) {
+          this.optionsLoaded('', null); // dispatch empty list
+        } else {
+          participantResource.findAll(`filter[fields][${property}]=true`)
+            .then(response => this.optionsLoaded(property, processResults(response)),
+                  err => this.optionsLoadingFailed(err));
+        }
       };
 
       function processResults(result) {

src/client/components/ParticipantListPage/containers/GenericPropertyFilterContainer.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Input } from 'react-bootstrap';
+import { getPropertyFilterContainer } from './PropertyFilterContainer';
+import _ from 'lodash';
+
+export function getGenericPropertyFilterContainer(searchFilterStore, searchFilterActions) {
+  const PropertyFilterContainer = getPropertyFilterContainer(searchFilterStore, searchFilterActions);
+
+  const properties = [
+    { childNaps: 'Lapsi nukkuu päiväunet' },
+    { accommodation: 'Majoittautuminen' },
+    { country: 'Maa' },
+    { willOfTheWisp: 'Virvatuli' },
+    { willOfTheWispWave: 'Virvatulen aalto' },
+  ];
+
+  class GenericPropertyFilterContainer extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        property: '',
+      };
+      this.onPropertyChange = this.onPropertyChange.bind(this);
+    }
+
+    static availableProperties() {
+      return properties.map(p => _.keys(p)[0]);
+    }
+
+    onPropertyChange(e) {
+      this.props.onChange(this.state.property, null);
+      this.setState({ property: e.target.value });
+      searchFilterActions.loadOptions.defer(e.target.value);
+    }
+
+    render() {
+      return (
+        <div>
+          <Input type="select" label="Kenttä" value={ this.state.property } onChange={ this.onPropertyChange }>
+            <option value=""></option>
+            { properties.map((property, index) => <option value={ _.keys(property)[0] } key={ index }>{ _.values(property)[0] }</option>) }
+          </Input>
+          <PropertyFilterContainer
+            onChange={ this.props.onChange }
+            currentSelection={ this.props.currentSelection }
+            label=""
+            property={ this.state.property }
+          />
+        </div>
+      );
+    }
+  }
+
+  GenericPropertyFilterContainer.propTypes = {
+    onChange: React.PropTypes.func.isRequired,
+    currentSelection: React.PropTypes.object.isRequired,
+  };
+
+  return GenericPropertyFilterContainer;
+}

src/client/components/ParticipantListPage/containers/QuickFilterContainer.jsx

@@ -6,12 +6,14 @@ import { getPropertyFilterContainer } from './PropertyFilterContainer';
 import { getDebouncedTextFieldContainer } from './DebouncedTextFieldContainer';
 import { getPresenceFilterContainer } from './PresenceFilterContainer';
 import { getSaveSearchButtonContainer } from './SaveSearchButtonContainer';
+import { getGenericPropertyFilterContainer } from './GenericPropertyFilterContainer';
 
 export function getQuickFilterContainer(participantStore, participantActions, searchFilterActions, searchFilterStore) {
   const DebouncedTextFieldContainer = getDebouncedTextFieldContainer();
   const SaveSearchButtonContainer = getSaveSearchButtonContainer(searchFilterActions);
   const PropertyFilterContainer = getPropertyFilterContainer(searchFilterStore, searchFilterActions);
   const PresenceFilterContainer = getPresenceFilterContainer();
+  const GenericPropertyFilterContainer = getGenericPropertyFilterContainer(searchFilterStore, searchFilterActions);
 
   function getCurrentSelection(properties, currentFilter) {
     const andSelection = currentFilter.and && _.reduce(currentFilter.and, _.merge, {}) || {};
@@ -25,7 +27,10 @@ export function getQuickFilterContainer(participantStore, participantActions, se
   }
 
   function QuickFilterContainer(props, context) {
-    const currentSelection = getCurrentSelection(['textSearch', 'ageGroup', 'subCamp', 'localGroup', 'campGroup', 'presence', 'village'], props.filter);
+    const propertiesForGenericFilter = GenericPropertyFilterContainer.availableProperties();
+    const properties = ['textSearch', 'ageGroup', 'subCamp', 'localGroup', 'campGroup', 'presence', 'village'].concat(propertiesForGenericFilter);
+
+    const currentSelection = getCurrentSelection(properties, props.filter);
 
     function resetFilters(event) {
       event.preventDefault();
@@ -88,6 +93,10 @@ export function getQuickFilterContainer(participantStore, participantActions, se
               onChange={ handleChange }
               currentSelection={ currentSelection }
             />
+            <GenericPropertyFilterContainer
+              onChange={ handleChange }
+              currentSelection={ currentSelection }
+            />
             <SaveSearchButtonContainer location={ props.location } />
           </form>
         </div>

src/kuksa-integration/rebuild-tables.js

@@ -97,7 +97,7 @@ function rebuildParticipantsTable() {
     email: participant.email,
     internationalGuest: !!participant.localGroup,
     diet: participant.diet,
-    accommodation: participant.accommodation,
+    accommodation: participant.accommodation || 'Muu',
     localGroup: participant.representedParty || _.get(participant, 'localGroup.name') || 'Muu',
     campGroup: _.get(participant, 'campGroup.name') || 'Muu',
     subCamp: getSubCamp(participant),