Listing filters

assets/js/src/listing/bulk_actions.jsx

@@ -1,10 +1,8 @@
 define([
-  'react',
-  'mailpoet'
+  'react'
 ],
 function(
-  React,
-  MailPoet
+  React
 ) {
   var ListingBulkActions = React.createClass({
     getInitialState: function() {

assets/js/src/listing/filters.jsx

@@ -1,8 +1,72 @@
-define(['react'], function(React) {
-
+define([
+  'react'
+],
+function(
+  React
+) {
   var ListingFilters = React.createClass({
+    handleFilterAction: function() {
+      var filters = this.props.filters.map(function(filter, index) {
+        var value = this.refs['filter-'+index].getDOMNode().value;
+        if(value) {
+          return {
+            'name': filter.name,
+            'value': value
+          };
+        }
+      }.bind(this));
+      return this.props.onSelectFilter(filters);
+    },
+    handleChangeAction: function() {
+      return true;
+    },
     render: function() {
-      return null;
+      var filters = this.props.filters
+        .filter(function(filter) {
+          return !(
+            filter.options.length === 0
+            || (
+              filter.options.length === 1
+              && !filter.options[0].value
+            )
+          );
+        })
+        .map(function(filter, i) {
+          return (
+            <select
+              ref={ 'filter-'+i }
+              key={ 'filter-'+i }
+              onChange={ this.handleChangeAction }>
+              { filter.options.map(function(option, j) {
+                return (
+                  <option
+                    value={ option.value }
+                    key={ 'filter-option-' + j }
+                  >{ option.label }</option>
+                );
+              }.bind(this)) }
+            </select>
+          );
+      }.bind(this));
+
+      var button = false;
+
+      if(filters.length > 0) {
+        button = (
+          <input
+            onClick={ this.handleFilterAction }
+            type="submit"
+            defaultValue="Filter"
+            className="button" />
+        );
+      }
+
+      return (
+        <div className="alignleft actions actions">
+          { filters }
+          { button }
+        </div>
+      );
     }
   });
 

assets/js/src/listing/listing.jsx

@@ -209,6 +209,7 @@ define(
           groups: [],
           group: 'all',
           filters: [],
+          filter: [],
           selected_ids: [],
           selection: false
         };
@@ -228,6 +229,7 @@ define(
             offset: (this.state.page - 1) * this.state.limit,
             limit: this.state.limit,
             group: this.state.group,
+            filter: this.state.filter,
             search: this.state.search,
             sort_by: this.state.sort_by,
             sort_order: this.state.sort_order
@@ -270,6 +272,7 @@ define(
         data.listing = {
           offset: 0,
           limit: 0,
+          filter: this.state.filter,
           group: this.state.group,
           search: this.state.search,
           selection: selected_ids
@@ -350,13 +353,21 @@ define(
           selected_ids: []
         });
       },
+      handleFilter: function(filters) {
+        this.setState({
+          filter: filters,
+          page: 1
+        }, function() {
+          this.getItems();
+        }.bind(this));
+      },
       handleGroup: function(group) {
         // reset search
         jQuery('#search_input').val('');
 
         this.setState({
           group: group,
-          filters: [],
+          filter: [],
           search: '',
           page: 1
         }, function() {
@@ -414,7 +425,10 @@ define(
                 selection={ this.state.selection }
                 selected_ids={ this.state.selected_ids }
                 onBulkAction={ this.handleBulkAction } />
-              <ListingFilters filters={ this.state.filters } />
+              <ListingFilters
+                filters={ this.state.filters }
+                filter={ this.state.filter }
+                onSelectFilter={ this.handleFilter } />
               <ListingPages
                 count={ this.state.count }
                 page={ this.state.page }