Changing custom functions to not be on global object, but passed in w…

…ith customFunctions attribute
predixdesignsystem · Oct 29, 2015 · f2cfeb9 · f2cfeb9
1 parent ffec3fc
commit f2cfeb9
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -46,7 +46,7 @@ Advanced:
         name="first"
         sortable
         filter-function-name="filterWholeWord"
-        sort-function-name="sortColumn">
+        sort-function-name="sortByEmailDomain">
       </px-data-table-column>
       <px-data-table-column name="last" ...></px-data-table-column>
       <px-data-table-column name="color" ...></px-data-table-column>
@@ -156,6 +156,36 @@ This property is read only.
 <px-data-table selected-rows="{{mySelectedItems}}" table-data="{{data}}"></px-data-table>
 ```
 
+##### customFunctions
+
+*Type:* **Object** - (*Optional*) - *Default:* {}
+
+Custom function declarations for any custom filtering/sorting functions.
+
+These are just the declarations of the functions; to use the functions for a column you must pass in the filter-function-name / sort-function-name to px-data-table-column.
+
+```html
+<px-data-table customFunctions="{{myCustomFunctions}}" table-data="{{data}}"></px-data-table>
+```
+
+```js
+myCustomFunctions = {
+  sortByEmailDomain: function(a, b) {
+    var aDomain = a.value.substring(a.value.indexOf("@")+1, a.value.indexOf("."));
+    var bDomain = b.value.substring(b.value.indexOf("@")+1, b.value.indexOf("."));
+    return this.descending
+      ? (aDomain < bDomain ? 1 : -1)
+       : (aDomain > bDomain ? 1 : -1);
+  },
+  filterWholeWord: function(searchString, cellValue) {
+    if(searchString === undefined || searchString === null || searchString === "") {
+      return true;
+    }
+    return (searchString.toString().toLowerCase() === cellValue.toString().toLowerCase());
+  }
+};
+```
+
 ### Events
 
 #### px-row-click
@@ -270,22 +300,26 @@ Options: center, left, right
 
 ##### filterFunctionName
 
-*Type:* **Array** - (*Optional*)
+*Type:* **String** - (*Optional*) - *Default:* filter on the typed in string
 
-TODO
+Name of the custom function to filter this row with.
+
+A custom function with this name must be the px-data-table customFunctions attribute. If not, the column falls back to default filtering behavior.
 
 ```html
-<px-data-table selected="{{selectedItems}}" table-data="{{data}}"></px-data-table>
+<px-data-table-column filter-function-name="filterWholeWord" ...></px-data-table-column>
 ```
 
 ##### sortFunctionName
 
-*Type:* **Array** - (*Optional*)
+*Type:* **String** - (*Optional*) - *Default:* sort in increasing/decreasing alphanumerical
+
+Name of the custom function to sort this row with.
 
-TODO
+A custom function with this name must be the px-data-table customFunctions attribute. If not, the column falls back to default sorting behavior.
 
 ```html
-<px-data-table selected="{{selectedItems}}" table-data="{{data}}"></px-data-table>
+<px-data-table-column sort-function-name="sortByEmailDomain" ...></px-data-table-column>
 ```
 
 ##### default

diff --git a/aha-table.html b/aha-table.html
@@ -262,10 +262,8 @@
 	</template>
 </dom-module>
 <script>
-	var pxDataTableBehaviors = pxDataTableBehaviors || {};
 	Polymer({
 		is: 'aha-table',
-		behaviors: [pxDataTableBehaviors],
 		properties: {
 			//data: instance of the model data
 			data: {
@@ -481,7 +479,12 @@
 			showGotoFirstLast: {
 				type: Boolean,
 				value: false
-			}
+			},
+      // custom function declarations, used in individual columns for filtering/sorting
+      customFunctions: {
+        type: Object,
+        value: {}
+      }
 		},
 
 		ready: function() {
@@ -495,6 +498,7 @@
 			this.$.aha_table_main.setAttribute('resolved', '');
 			this.$.aha_table_main.removeAttribute('unresolved');
 		},
+
 		getRowClass: function(row, selectedRows) {
 			return ['tr', 'rows',
 					this.striped  ? 'striped'  : '',
@@ -737,11 +741,12 @@
 			if(e.model.column){
 				var searchedColumn = e.model.column.name;
 
+        var self = this;
 				this.data.forEach(function(row){
 					var matched = false;
 					row._not_matched_columns = row._not_matched_columns || [];
 
-					var customSearchFunction = pxDataTableBehaviors[e.model.column['filter-function-name']];
+					var customSearchFunction = self.customFunctions[e.model.column['filter-function-name']];
 					if (customSearchFunction) {
 						matched = customSearchFunction(e.target.value, row[searchedColumn]);
 					}
@@ -858,7 +863,7 @@
 				var sortFunction;
 				this.meta.forEach(function(obj){
 					if (this.sortedColumn === obj.name){
-						sortFunction = pxDataTableBehaviors[obj['sort-function-name']];
+						sortFunction = this.customFunctions[obj['sort-function-name']];
 					}
 				}, this);
 

diff --git a/contacts-mini.json b/contacts-mini.json
@@ -1,7 +1,5 @@
 [
   {
-    "index": 2,
-    "name": "Dora Griffith",
     "first": "Valentine",
     "last": "Meyer",
     "image": "https://s3.amazonaws.com/uifaces/faces/twitter/iboldurev/73.jpg",
@@ -19,8 +17,6 @@
     "color": "<button class='btn' style='color:rgb(201,142,97);'>Blue Bottle cardigan</button>"
   },
   {
-    "index": 3,
-    "name": "Shelley Molina",
     "first": "Silva",
     "last": "Alexander",
     "image": "https://s3.amazonaws.com/uifaces/faces/twitter/smalonso/73.jpg",
@@ -33,13 +29,11 @@
     "state": "Michigan",
     "zip": 22009,
     "country": "Thailand",
-    "email": "silvaalexander@scentric.com",
+    "email": "silvaalexander@gmail.com",
     "phone": "(823) 415-2224",
     "color": "<button class='btn' style='color:rgb(113,105,251);'>Freegan tilde</button>"
   },
   {
-    "index": 4,
-    "name": "Rita Lopez",
     "first": "Hopkins",
     "last": "Wong",
     "image": "https://s3.amazonaws.com/uifaces/faces/twitter/taherrapee/73.jpg",
@@ -52,13 +46,11 @@
     "state": "Maine",
     "zip": 89440,
     "country": "Seychelles",
-    "email": "hopkinswong@scentric.com",
+    "email": "hopkinswong@hotmail.com",
     "phone": "(814) 488-2063",
     "color": "<button class='btn' style='color:rgb(133,126,66);'>bespoke gastropub</button>"
   },
   {
-    "index": 5,
-    "name": "Wagner Shelton",
     "first": "Harriet",
     "last": "Sherman",
     "image": "https://s3.amazonaws.com/uifaces/faces/twitter/ismailmayat/73.jpg",
@@ -76,8 +68,6 @@
     "color": "<button class='btn' style='color:rgb(195,89,110);'>dreamcatcher fingerstache</button>"
   },
   {
-    "index": 6,
-    "name": "Bethany Adkins",
     "first": "Stacie",
     "last": "Bartlett",
     "image": "https://s3.amazonaws.com/uifaces/faces/twitter/carlyson/73.jpg",
@@ -95,9 +85,7 @@
     "color": "<button class='btn' style='color:rgb(164,84,221);'>Etsy beard</button>"
   },
   {
-    "index": 2,
-    "name": "Dora Griffith",
-    "first": "Valentine",
+    "first": "Lindsay",
     "last": "Meyer",
     "image": "https://s3.amazonaws.com/uifaces/faces/twitter/iboldurev/73.jpg",
     "boolean": true,
@@ -109,14 +97,12 @@
     "state": "South Carolina",
     "zip": 41343,
     "country": "Germany",
-    "email": "valentinemeyer@scentric.com",
+    "email": "lindsay@gmail.com",
     "phone": "(956) 428-2996",
     "color": "<button class='btn' style='color:rgb(201,142,97);'>Austin meggings</button>"
   },
   {
-    "index": 3,
-    "name": "Shelley Molina",
-    "first": "Silva",
+    "first": "Shelley",
     "last": "Alexander",
     "image": "https://s3.amazonaws.com/uifaces/faces/twitter/smalonso/73.jpg",
     "boolean": true,
@@ -128,14 +114,12 @@
     "state": "Michigan",
     "zip": 22009,
     "country": "Thailand",
-    "email": "silvaalexander@scentric.com",
+    "email": "shelley@hotmail.com",
     "phone": "(823) 415-2224",
     "color": "<button class='btn' style='color:rgb(113,105,251);'>Kitsch banjo</button>"
   },
   {
-    "index": 4,
-    "name": "Rita Lopez",
-    "first": "Hopkins",
+    "first": "Rita",
     "last": "Wong",
     "image": "https://s3.amazonaws.com/uifaces/faces/twitter/taherrapee/73.jpg",
     "boolean": false,
@@ -147,14 +131,12 @@
     "state": "Maine",
     "zip": 89440,
     "country": "Seychelles",
-    "email": "hopkinswong@scentric.com",
+    "email": "rita@yahoo.com",
     "phone": "(814) 488-2063",
     "color": "<button class='btn' style='color:rgb(133,126,66);'>Brooklyn authentic</button>"
   },
   {
-    "index": 5,
-    "name": "Wagner Shelton",
-    "first": "Harriet",
+    "first": "Joe",
     "last": "Sherman",
     "image": "https://s3.amazonaws.com/uifaces/faces/twitter/ismailmayat/73.jpg",
     "boolean": true,
@@ -166,14 +148,12 @@
     "state": "Kansas",
     "zip": 21389,
     "country": "Chad",
-    "email": "harrietsherman@scentric.com",
+    "email": "joejoe@yahoo.com",
     "phone": "(887) 497-3612",
     "color": "<button class='btn' style='color:rgb(195,89,110);'>Pickled cray scenester</button>"
   },
   {
-    "index": 6,
-    "name": "Bethany Adkins",
-    "first": "Stacie",
+    "first": "Jane",
     "last": "Bartlett",
     "image": "https://s3.amazonaws.com/uifaces/faces/twitter/carlyson/73.jpg",
     "boolean": false,
@@ -185,7 +165,7 @@
     "state": "Iowa",
     "zip": 72190,
     "country": "Uruguay",
-    "email": "staciebartlett@scentric.com",
+    "email": "jane@scentric.com",
     "phone": "(957) 412-3261",
     "color": "<button class='btn' style='color:rgb(164,84,221);'>8-bit migas</button>"
   }

diff --git a/demo.html b/demo.html
@@ -9,8 +9,6 @@
     <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
     <!-- Import custom element. Note: see comment about relative paths to dependencies in the *.html file referenced below -->
 
-    <script src="pxDataTableBehaviorsDemo.js"></script>
-
     <link rel="import" href="px-data-table.html" />
     <link rel="import" href="../iron-ajax/iron-ajax.html" />
     <link rel="import" href="../px-theme/px-theme.html"/>
@@ -43,12 +41,12 @@ <h3>Data table demos</h3>
 
       <p>Very customized data table, with:</p>
       <ul>
-        <li>Filter - only first and third columns</li>
-        <li>Custom filtering functions - on an entire word in the first column and on the button text in the third column</li>
-        <li>Sorting - only first and second columns</li>
-        <li>Custom sorting functions - on the first column</li>
-        <li>Html rendering - in the third column</li>
-        <li>Ellipsis - in fourth column</li>
+        <li>Filter - only First and Color columns</li>
+        <li>Custom filtering functions - on an entire word in the First column and on the button text in the Color column</li>
+        <li>Sorting - on the first three columns</li>
+        <li>Custom sorting functions - by the email domain in the Email column</li>
+        <li>Html rendering - in the Color column</li>
+        <li>Ellipsis - in Date column</li>
         <li>Interacting with the selected rows... there are <span>{{mySelectedRows.length}}</span> rows selected</li>
         <li>... and you can <button onclick="logSelectedRows()">console.log the selected rows</button></li>
         <li>... and you can receive px-row-click events from the table, which can be used by taking action on the row</li>
@@ -58,13 +56,17 @@ <h3>Data table demos</h3>
           name="first"
           searchable
           sortable
-          filter-function-name="filterWholeWord"
-          sort-function-name="sortColumn">
+          filter-function-name="filterWholeWord">
         </px-data-table-column>
         <px-data-table-column
           name="last"
           sortable>
         </px-data-table-column>
+        <px-data-table-column
+          name="email"
+          sort-function-name="sortByEmailDomain"
+          sortable>
+        </px-data-table-column>
         <px-data-table-column
           name="color"
     			type="html"
@@ -90,6 +92,28 @@ <h3>Data table demos</h3>
           console.log("Row clicked", clickedRow, " _selected: ", clickedRow._selected);
         });
 
+        document.getElementById("mytable").customFunctions = {
+          sortByEmailDomain: function(a, b) {
+            var aDomain = a.value.substring(a.value.indexOf("@")+1, a.value.indexOf("."));
+            var bDomain = b.value.substring(b.value.indexOf("@")+1, b.value.indexOf("."));
+            return this.descending
+              ? (aDomain < bDomain ? 1 : -1)
+              : (aDomain > bDomain ? 1 : -1);
+          },
+          filterMarkupVal: function(searchString, cellValue) {
+            var lhs = cellValue.slice(cellValue.indexOf('>') + 1);
+            var content = lhs.substr(0, lhs.indexOf('<'));
+
+            return (content.toString().toLowerCase().indexOf(searchString.toString().toLowerCase()) > -1);
+          },
+          filterWholeWord: function(searchString, cellValue) {
+            if(searchString === undefined || searchString === null || searchString === "") {
+              return true;
+            }
+            return (searchString.toString().toLowerCase() === cellValue.toString().toLowerCase());
+          }
+        };
+
       </script>
 
     </template>

diff --git a/px-data-table-column.html b/px-data-table-column.html
@@ -78,10 +78,29 @@
         value: true
       },
 
-      sortFunctionName: {  // TODO this seems gross...... can we change this?
+      /**
+       * Name of the custom function to sort this row with.
+       *
+       * A custom function with this name must be the px-data-table customFunctions attribute.  If not, the column falls back to default sorting behavior.
+       *
+       *      <px-data-table-column sort-function-name="sortByEmailDomain" ...></px-data-table-column>
+       *
+       * @default sort in increasing/decreasing alphanumerical
+       */
+      sortFunctionName: {
         type: String,
         value: ""
       },
+
+      /**
+       * Name of the custom function to filter this row with.
+       *
+       * A custom function with this name must be the px-data-table customFunctions attribute.  If not, the column falls back to default filtering behavior.
+       *
+       *      <px-data-table-column filter-function-name="filterWholeWord" ...></px-data-table-column>
+       *
+       * @default filter on the typed in string
+       */
       filterFunctionName: {
         type: String,
         value: ""