From 36a32208334b5d4eb9d45b261a695176b4565c22 Mon Sep 17 00:00:00 2001
From: SMxJrz <Smelecs@gmail.com>
Date: Tue, 1 Mar 2016 08:47:29 -0500
Subject: [PATCH 1/2] Added a filter to the md-data-table toolset, this allows
 the table to filter on each column. The filter uses the column object to
 perform the checks and It will do lookups to the table data based on the
 orderBy attribute, (alternatively you can provide searchBy in that object if
 you don't want to do ordering for that particular column). This change only
 provides the filter for the user, how they lay it out should ultimately be up
 to them.

---
 app/templates/nutrition-table.html | 16 +++++++++++---
 src/scripts/mdTableFilter.js       | 34 ++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 src/scripts/mdTableFilter.js

diff --git a/app/templates/nutrition-table.html b/app/templates/nutrition-table.html
index c13f3a17..637c3584 100644
--- a/app/templates/nutrition-table.html
+++ b/app/templates/nutrition-table.html
@@ -6,13 +6,24 @@
     <md-button ng-click="hideHead = !hideHead">{{hideHead ? 'Show Head' : 'Decapitate'}}</md-button>
     <md-button ng-click="blah = !blah">{{blah ? 'turn on' : 'turn off'}}</md-button>
     <md-button ng-click="loadStuff()">Load</md-button>
-    <md-button class="md-icon-button">
+    <md-button ng-click="showFilters=!showFilters" class="md-icon-button">
       <md-icon>filter_list</md-icon>
     </md-button>
     <md-button class="md-icon-button">
       <md-icon>more_vert</md-icon>
     </md-button>
   </div>
+  <div layout="column" ng-if="showFilters" layout-padding>
+    <h6 class=".md-title" layout="row">Filter by Column(s)</h6>
+    <div layout="row" layout-fill>
+      <div layout="column" ng-repeat="column in columns">
+        <md-input-container>
+          <label>Filter by {{column.name}}</label>
+          <input ng-model="column.filter" type="text">
+        </md-input-container>
+      </div>
+    </div>
+  </div>
 </md-toolbar>
 
 <md-toolbar class="md-table-toolbar alternate" ng-show="selected.length">
@@ -27,7 +38,6 @@
     </md-button>
   </div>
 </md-toolbar>
-
 <md-table-container>
   <table data-md-table data-md-row-select="!hideCheckboxes" data-ng-model="selected" md-progress="promise">
     <!-- <thead md-head md-order="query.order">
@@ -56,7 +66,7 @@
       </tr>
     </thead>
     <tbody md-body>
-      <tr md-row md:select="dessert" data-md-on-select="log" md-on-deselect="deselect" x-md-auto-select="!blah" ng-disabled="dessert.calories.value > 400" data-ng-repeat="dessert in desserts.data | filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
+      <tr md-row md:select="dessert" data-md-on-select="log" md-on-deselect="deselect" x-md-auto-select="!blah" ng-disabled="dessert.calories.value > 400" data-ng-repeat="dessert in desserts.data | mdTableColumnarFilter:columns | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
         <td md-cell>{{dessert.name}}</td>
         <td md-cell>
           <md-select ng-model="dessert.type" placeholder="Other">
diff --git a/src/scripts/mdTableFilter.js b/src/scripts/mdTableFilter.js
new file mode 100644
index 00000000..49753d11
--- /dev/null
+++ b/src/scripts/mdTableFilter.js
@@ -0,0 +1,34 @@
+'use strict';
+
+angular.module('md.data.table')
+    .filter('mdTableColumnarFilter', columnarFilter);
+
+//utility for nested strings in column orderBy / column searchBy
+//this handles cases where the value is nested within the data object
+function fetchFromObject(obj, prop) {
+    var _index = prop.indexOf('.');
+    if(_index > -1) {
+        return fetchFromObject(obj[prop.substring(0, _index)], prop.substr(_index + 1));
+    }
+
+    return obj[prop];
+}
+
+function columnarFilter(){
+    return function (values, columns) {
+        var result = values;
+        columns.forEach(function(col){
+            // if a column has an orderBy already use that. otherwise a searchBy can be specified.
+            var colId = col.orderBy ? col.orderBy : col.searchBy;
+            //if an orderBy or searchBy value is set and the column filter has a value, it will filter on that column
+            if(colId && col.filter){
+                //filter the current set of values
+                result = result.filter(function(row){
+                    var val = (fetchFromObject(row, colId));
+                    return val && val.toString().toLowerCase().indexOf(col.filter.toLowerCase()) !== -1;
+                });
+            }
+        });
+        return result;
+    };
+}
\ No newline at end of file

From d2151a8937712b175894cf26b18099382be8015f Mon Sep 17 00:00:00 2001
From: SMxJrz <Smelecs@gmail.com>
Date: Tue, 1 Mar 2016 08:47:29 -0500
Subject: [PATCH 2/2] Added a filter to the md-data-table toolset, this allows
 the table to filter on each column. The filter uses the column object to
 perform the checks and It will do lookups to the table data based on the
 orderBy attribute, (alternatively you can provide searchBy in that object if
 you don't want to do ordering for that particular column). This change only
 provides the filter for the user, how they lay it out should ultimately be up
 to them.

---
 app/templates/nutrition-table.html | 16 ++++++++++---
 src/scripts/mdTableFilter.js       | 36 ++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 src/scripts/mdTableFilter.js

diff --git a/app/templates/nutrition-table.html b/app/templates/nutrition-table.html
index c13f3a17..637c3584 100644
--- a/app/templates/nutrition-table.html
+++ b/app/templates/nutrition-table.html
@@ -6,13 +6,24 @@
     <md-button ng-click="hideHead = !hideHead">{{hideHead ? 'Show Head' : 'Decapitate'}}</md-button>
     <md-button ng-click="blah = !blah">{{blah ? 'turn on' : 'turn off'}}</md-button>
     <md-button ng-click="loadStuff()">Load</md-button>
-    <md-button class="md-icon-button">
+    <md-button ng-click="showFilters=!showFilters" class="md-icon-button">
       <md-icon>filter_list</md-icon>
     </md-button>
     <md-button class="md-icon-button">
       <md-icon>more_vert</md-icon>
     </md-button>
   </div>
+  <div layout="column" ng-if="showFilters" layout-padding>
+    <h6 class=".md-title" layout="row">Filter by Column(s)</h6>
+    <div layout="row" layout-fill>
+      <div layout="column" ng-repeat="column in columns">
+        <md-input-container>
+          <label>Filter by {{column.name}}</label>
+          <input ng-model="column.filter" type="text">
+        </md-input-container>
+      </div>
+    </div>
+  </div>
 </md-toolbar>
 
 <md-toolbar class="md-table-toolbar alternate" ng-show="selected.length">
@@ -27,7 +38,6 @@
     </md-button>
   </div>
 </md-toolbar>
-
 <md-table-container>
   <table data-md-table data-md-row-select="!hideCheckboxes" data-ng-model="selected" md-progress="promise">
     <!-- <thead md-head md-order="query.order">
@@ -56,7 +66,7 @@
       </tr>
     </thead>
     <tbody md-body>
-      <tr md-row md:select="dessert" data-md-on-select="log" md-on-deselect="deselect" x-md-auto-select="!blah" ng-disabled="dessert.calories.value > 400" data-ng-repeat="dessert in desserts.data | filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
+      <tr md-row md:select="dessert" data-md-on-select="log" md-on-deselect="deselect" x-md-auto-select="!blah" ng-disabled="dessert.calories.value > 400" data-ng-repeat="dessert in desserts.data | mdTableColumnarFilter:columns | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
         <td md-cell>{{dessert.name}}</td>
         <td md-cell>
           <md-select ng-model="dessert.type" placeholder="Other">
diff --git a/src/scripts/mdTableFilter.js b/src/scripts/mdTableFilter.js
new file mode 100644
index 00000000..971b9fc8
--- /dev/null
+++ b/src/scripts/mdTableFilter.js
@@ -0,0 +1,36 @@
+'use strict';
+
+angular.module('md.data.table')
+    .filter('mdTableColumnarFilter', columnarFilter);
+
+function columnarFilter(){
+    //utility for nested strings in column orderBy / column searchBy
+    //this handles cases where the value is nested within the data object
+    //example is when the location of the column is orderBy/searchBy value "myData.obj.name"
+    var resolveValue = function(obj, prop) {
+        var _index = prop.indexOf('.');
+        if(_index > -1) {
+            return fetchFromObject(obj[prop.substring(0, _index)], prop.substr(_index + 1));
+        }
+
+        return obj[prop];
+    }
+
+
+    return function (values, columns) {
+        var result = values;
+        columns.forEach(function(col){
+            // if a column has an orderBy already use that. otherwise a searchBy can be specified.
+            var colId = col.orderBy ? col.orderBy : col.searchBy;
+            //if an orderBy or searchBy value is set and the column filter has a value, it will filter on that column
+            if(colId && col.filter){
+                //filter the current set of values
+                result = result.filter(function(row){
+                    var val = (resolveValue(row, colId));
+                    return val && val.toString().toLowerCase().indexOf(col.filter.toLowerCase()) !== -1;
+                });
+            }
+        });
+        return result;
+    };
+}
\ No newline at end of file