Added new filter option to allow the user to define the filter they w…

…ant to allow for a given column
tiburon-security · Dec 18, 2018 · 0ab5ed8 · 0ab5ed8
1 parent a4ca462
commit 0ab5ed8
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 6 deletions.
diff --git a/public/routes_menu_config.json b/public/routes_menu_config.json
@@ -139,11 +139,22 @@
 							{
 								"label": "First Name",
 								"id": "first_name",
-								"custom_filter_ui" :"SelectFilter"
+								"custom_filter_ui" :"UniqueValuesSelectFilter"
 							},
 							{
 								"label": "Last Name",
-								"id": "last_name"
+								"id": "last_name",
+								"custom_filter_ui" :"ArrayValuesSelectFilter",
+								"custom_filter_array" : [
+									{
+										"key" : "Bluth",
+										"label" : "Bluth"
+									},							
+									{
+										"key" : "Weaver",
+										"label" : "Weaver"
+									}
+								]
 							},
 							{
 								"label" : "Siblings",

diff --git a/src/Dashboard/Widgets/TabularDataFromAPIWidget.js b/src/Dashboard/Widgets/TabularDataFromAPIWidget.js
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import qs from 'qs';
 import { INTERWIDGET_MESSAGE_TYPES } from '../../redux/actions/Dashboard.js';
-import { ArrayTabularDataAccessor, BulletedListFormatter, AdditionalDataSubComponent, SubmitAndAdditionalDataSubComponent, SelectFilter } from '../../Helpers/ReactTableHelpers.js'
+import { ArrayTabularDataAccessor, BulletedListFormatter, AdditionalDataSubComponent, SubmitAndAdditionalDataSubComponent, UniqueValuesSelectFilter, ArrayValuesSelectFilter } from '../../Helpers/ReactTableHelpers.js'
 import { stripQueryStringSeperator } from '../../Helpers/Generic.js'
 
 // Data Table Imports
@@ -196,8 +196,14 @@ class TabularDataFromAPIWidget extends Component {
 
 				switch(col.custom_filter_ui){
 
-					case "SelectFilter" : {
-						obj["Filter"] = (({filter, onChange}) => SelectFilter(filter, onChange, this.state.data, col.id));
+					case "UniqueValuesSelectFilter" : {
+						obj["Filter"] = (({filter, onChange}) => UniqueValuesSelectFilter(filter, onChange, this.state.data, col.id));
+						obj["filterable"] = true;
+						break;
+					}					
+
+					case "ArrayValuesSelectFilter" : {
+						obj["Filter"] = (({filter, onChange}) => ArrayValuesSelectFilter(filter, onChange, col.custom_filter_array));
 						obj["filterable"] = true;
 						break;
 					}

diff --git a/src/Helpers/ReactTableHelpers.js b/src/Helpers/ReactTableHelpers.js
@@ -212,7 +212,7 @@ export function AdditionalDataSubComponent(tableRow, columns){
  * Custom component for column filters which displays the unique items 
  * for a column in a drop-down Select menu
  */
-export function SelectFilter(filter, onChange, allData, column){
+export function UniqueValuesSelectFilter(filter, onChange, allData, column){
 
 	// Pluck target column value from each row via map, then convert to Set to deduplicate
 	var uniqueColumnValues = allData.length > 0 ? [...(new Set(allData.map(row => row[column])))] : [];
@@ -241,4 +241,34 @@ export function SelectFilter(filter, onChange, allData, column){
 			}
 		</select>
 	)
+}
+
+
+/**
+ * Custom component for column filters which displays the user supplied
+ * filters for a column in a drop-down Select menu. Array format:
+ * [
+ *  {
+ *   key : string // key to filter on
+ *   label : string // 'pretty' label for the key
+ *  }
+ * ]
+ */
+export function ArrayValuesSelectFilter(filter, onChange, optionsArray){
+
+	return (
+		<select
+		onChange={event => onChange(event.target.value)}
+		style={{ width: "100%" }}
+		value={filter ? filter.value : "all"}
+		>
+			<option value="">Show All</option>
+			{
+				optionsArray.map( i => {
+					return <option key={i["key"].toString()} value={i["key"]}>{i["label"]}</option>
+				})
+
+			}
+		</select>
+	)
 }