From 0ab5ed8b11da95d9bb855c8c7abf558123f79749 Mon Sep 17 00:00:00 2001
From: Jovanni Hernandez <jovanni.m.hernandez@gmail.com>
Date: Tue, 18 Dec 2018 16:56:24 +0000
Subject: [PATCH] Added new filter option to allow the user to define the
 filter they want to allow for a given column

---
 public/routes_menu_config.json                | 15 +++++++--
 .../Widgets/TabularDataFromAPIWidget.js       | 12 +++++--
 src/Helpers/ReactTableHelpers.js              | 32 ++++++++++++++++++-
 3 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/public/routes_menu_config.json b/public/routes_menu_config.json
index 4f6eb1a..984ba6c 100644
--- 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
index d6bb7b2..74cf1ab 100644
--- 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
index f4c6e5e..228ccac 100644
--- 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>
+	)
 }
\ No newline at end of file