Added filter with custom options logic + tests

Gruntfile.js

@@ -125,18 +125,19 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks('grunt-webpack');
     grunt.loadNpmTasks('grunt-babel');
 
+
+    grunt.registerTask('default',
+        ['jshint', 'webpack:dist', 'copy:dist', 'test']);
+
     // The development server (the recommended option for development)
     grunt.registerTask('server', ['webpack-dev-server:start']);
 
-    // Build and watch cycle (another option for development)
-    // Advantage: No server required, can run app from filesystem
-    // Disadvantage: Requests are not blocked until bundle is available,
-    //               can serve an old app on too fast refresh
+
     grunt.registerTask('dev', ['jshint', 'webpack:build', 'copy:build']);
 
     // Production build
     grunt.registerTask('dist',
-        ['jshint', 'webpack:dist', 'copy:dist'/*, 'test'*/]);
+        ['jshint', 'webpack:dist', 'copy:dist']);
 
     // Transpile with Babel
     grunt.registerTask('dev-modules', ['babel', 'copy:build']);

examples/dev.html

@@ -86,6 +86,7 @@
         <button onclick="tf.init();">Reset</button>
     </div>
 
+    <link rel="stylesheet" type="text/css" href="../build/tablefilter/themes/skyblue/skyblue.css">
     <script type="text/javascript" src="../build/tablefilter/tablefilter.js"></script>
     <script>
         var table = document.getElementById('demo');
@@ -93,7 +94,8 @@
 
         var tf = new TableFilter("demo", {
             col_0: 'select',
-            col_3: 'checklist',
+            col_2: 'checklist',
+            col_3: 'select',
             base_path: '../build/tablefilter/',
             rows_counter: true,
             // enable_default_theme: true,
@@ -109,13 +111,19 @@
             remember_grid_values: true,
             col_widths: ['150px','150px','150px','200px','150px'],
             btn_reset: true,
-            grid_layout: true,
+            grid_layout: false,
             sort: true,
             sort_config: {
                 sort_types: ['string','string','number','number','number']
             },
 
             rows_always_visible: [totRowIndex],
+            custom_options: {
+                cols: [3],
+                texts: [['0-0.5', '0.5-1', '1-2', '>2']],
+                values: [['>0 && <=0.5', '>0.5 && <=1', '>1 && <=2', '>2']],
+                sorts: [false]
+            },
             col_operation: {
                 id: ["sum1", "sum2"],
                 col: [2, 3],

src-es6/modules/checkList.js

@@ -95,8 +95,7 @@ export class CheckList{
         Event.add(ul, 'change', (evt) => { this.onChange(evt); });
 
         var rows = tf.tbl.rows;
-        this.isCustom = (tf.hasCustomSlcOptions &&
-                Arr.has(tf.customSlcOptions.cols, colIndex));
+        this.isCustom = tf.isCustomOptions(colIndex);
 
         var activeFlt;
         if(tf.refreshFilters && tf.activeFilterId){
@@ -161,7 +160,7 @@ export class CheckList{
 
         //Retrieves custom values
         if(this.isCustom){
-            var customValues = tf.__getCustomValues(colIndex);
+            var customValues = tf.getCustomOptions(colIndex);
             this.opts = customValues[0];
             this.optsTxt = customValues[1];
         }

src-es6/modules/dropdown.js

@@ -78,8 +78,7 @@ export class Dropdown{
             matchCase = tf.matchCase;
 
         //custom select test
-        this.isCustom = (tf.hasCustomSlcOptions &&
-            Arr.has(tf.customSlcOptions.cols, colIndex));
+        this.isCustom = tf.isCustomOptions(colIndex);
 
         //custom selects text
         var activeFlt;
@@ -164,7 +163,7 @@ export class Dropdown{
 
         //Retrieves custom values
         if(this.isCustom){
-            var customValues = tf.__getCustomValues(colIndex);
+            var customValues = tf.getCustomOptions(colIndex);
             this.opts = customValues[0];
             this.optsTxt = customValues[1];
         }

src-es6/tablefilter.js

@@ -314,10 +314,8 @@ export class TableFilter{
         this.sortNumDesc = this.isSortNumDesc ? f.sort_num_desc : null;
         //enabled selects are populated on demand
         this.fillSlcOnDemand = f.fill_slc_on_demand===true ? true : false;
-        this.hasCustomSlcOptions = Types.isObj(f.custom_slc_options) ?
-            true : false;
-        this.customSlcOptions = Types.isArray(f.custom_slc_options) ?
-            f.custom_slc_options : null;
+        this.hasCustomOptions = Types.isObj(f.custom_options);
+        this.customOptions = f.custom_options;
 
         /*** Filter operators ***/
         this.rgxOperator = f.regexp_operator || 'rgx:';
@@ -923,10 +921,10 @@ export class TableFilter{
                     // checklist
                     else if(col===this.fltTypeCheckList){
                         let checkList;
-                        if(!this.Cpt.checkList){
+                        // if(!this.Cpt.checkList){
                             this.Cpt.checkList = new CheckList(this);
                             checkList = this.Cpt.checkList;
-                        }
+                        // }
 
                         let divCont = Dom.create('div',
                             ['id', checkList.prfxCheckListDiv+i+'_'+this.id],
@@ -1538,40 +1536,49 @@ export class TableFilter{
     //     }, 0.1);
     // },
 
-    /*====================================================
-        - Returns an array [[values],[texts]] with
-        custom values for a given filter
-        - Param: column index (integer)
-    =====================================================*/
-    // _getCustomValues: function(colIndex){
-    //     if(!colIndex){
-    //         return;
-    //     }
-    //     //custom select test
-    //     let isCustomSlc = this.hasCustomSlcOptions &&
-    //             Arr.has(this.customSlcOptions.cols, colIndex);
-    //     if(!isCustomSlc){
-    //         return;
-    //     }
-    //     let optTxt = [], optArray = [];
-    //     let index = Arr.indexByValue(this.customSlcOptions.cols, colIndex);
-    //     let slcValues = this.customSlcOptions.values[index];
-    //     let slcTexts = this.customSlcOptions.texts[index];
-    //     let slcSort = this.customSlcOptions.sorts[index];
-    //     for(let r=0; r<slcValues.length; r++){
-    //         optArray.push(slcValues[r]);
-    //         if(slcTexts[r]){
-    //             optTxt.push(slcTexts[r]);
-    //         } else {
-    //             optTxt.push(slcValues[r]);
-    //         }
-    //     }
-    //     if(slcSort){
-    //         optArray.sort();
-    //         optTxt.sort();
-    //     }
-    //     return [optArray,optTxt];
-    // },
+    /**
+     * Check if given column implements a filter with custom options
+     * @param  {Number}  colIndex Column's index
+     * @return {Boolean}
+     */
+    isCustomOptions(colIndex) {
+        return this.hasCustomOptions &&
+            this.customOptions.cols.indexOf(colIndex) != -1;
+    }
+
+    /**
+     * Returns an array [[value0, value1 ...],[text0, text1 ...]] with the
+     * custom options values and texts
+     * @param  {Number} colIndex Column's index
+     * @return {Array}
+     */
+    getCustomOptions(colIndex){
+        if(!colIndex || !this.isCustomOptions(colIndex)){
+            return;
+        }
+
+        let customOptions = this.customOptions;
+        let cols = customOptions.cols;
+        let optTxt = [], optArray = [];
+        let index = Arr.indexByValue(cols, colIndex);
+        let slcValues = customOptions.values[index];
+        let slcTexts = customOptions.texts[index];
+        let slcSort = customOptions.sorts[index];
+
+        for(let r=0, len=slcValues.length; r<len; r++){
+            optArray.push(slcValues[r]);
+            if(slcTexts[r]){
+                optTxt.push(slcTexts[r]);
+            } else {
+                optTxt.push(slcValues[r]);
+            }
+        }
+        if(slcSort){
+            optArray.sort();
+            optTxt.sort();
+        }
+        return [optArray, optTxt];
+    }
 
     resetValues(){
         this.EvtManager(this.Evt.name.resetvalues);

test/test-custom-options.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>TableFilter filter with custom options tests</title>
+        <link rel="stylesheet" href="libs/qunit/qunit.css">
+        <script src="libs/qunit/qunit.js"></script>
+    </head>
+    <body>
+        <table id="demo">
+            <thead>
+                <tr>
+                    <th>From</th>
+                    <th>Destination</th>
+                    <th>Road Distance (km)</th>
+                    <th>By Air (hrs)</th>
+                    <th>By Rail (hrs)</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><strong>Sydney</strong></td>
+                    <td>Adelaide</td>
+                    <td>1412</td>
+                    <td>1.4</td>
+                    <td>25.3</td>
+                </tr>
+                <tr>
+                    <td><strong>Sydney</strong></td>
+                    <td>Brisbane</td>
+                    <td>982</td>
+                    <td>1.5</td>
+                    <td>16</td>
+                </tr>
+                <tr>
+                    <td><strong>Sydney</strong></td>
+                    <td>Canberra</td>
+                    <td>286</td>
+                    <td>.6</td>
+                    <td>4.3</td>
+                </tr>
+                <tr>
+                    <td><strong>Sydney</strong></td>
+                    <td>Melbourne</td>
+                    <td>872</td>
+                    <td>1.1</td>
+                    <td>10.5</td>
+                </tr>
+                <tr>
+                    <td><strong>Adelaide</strong></td>
+                    <td>Perth</td>
+                    <td>2781</td>
+                    <td>3.1</td>
+                    <td>38</td>
+                </tr>
+                <tr>
+                    <td><strong>Adelaide</strong></td>
+                    <td>Alice Springs</td>
+                    <td>1533</td>
+                    <td>2</td>
+                    <td>20.25</td>
+                </tr>
+                <tr>
+                    <td><strong>Adelaide</strong></td>
+                    <td>Brisbane</td>
+                    <td>2045</td>
+                    <td>2.15</td>
+                    <td>40</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <script src="../dist/tablefilter/tablefilter.js"></script>
+        <script src="test-custom-options.js"></script>
+
+        <div id="qunit"></div>
+        <div id="qunit-fixture"></div>
+    </body>
+</html>

test/test-custom-options.js

@@ -0,0 +1,100 @@
+
+(function(win, TableFilter){
+
+    var tf = new TableFilter('demo', {
+        base_path: '../dist/tablefilter/',
+        col_3: 'select',
+        custom_options: {
+            cols: [3],
+            texts: [['0-0.5', '0.5-1', '1-2', '>2']],
+            values: [['>0 && <=0.5', '>0.5 && <=1', '>1 && <=2', '>2']],
+            sorts: [false]
+        }
+    });
+    tf.init();
+
+    module('Sanity checks');
+    test('Active columns', function() {
+        deepEqual(tf instanceof TableFilter, true, 'TableFilter instanciated');
+        deepEqual(
+            tf.getFilterElement(3).nodeName, 'SELECT', 'Expected filter type');
+    });
+
+    module('Behaviour');
+    test('Filter column with custom filter', function() {
+        var flt = tf.getFilterElement(3);
+        flt.selectedIndex = flt.options.length-1;
+        tf.filter();
+
+        deepEqual(
+            tf.getFilteredData().length, 2, 'Expected nb of filtered rows');
+
+        tf.clearFilters();
+
+        deepEqual(
+            tf.getFilteredData().length, 7, 'Expected nb of filtered rows');
+    });
+
+    test('Paging: filter column with custom filter', function() {
+        tf.destroy();
+        tf = null;
+        tf = new TableFilter('demo', {
+            col_3: 'select',
+            custom_options: {
+                cols: [3],
+                texts: [['0-0.5', '0.5-1', '1-2', '>2']],
+                values: [['>0 && <=0.5', '>0.5 && <=1', '>1 && <=2', '>2']],
+                sorts: [false]
+            },
+            paging: true,
+            paging_length: 3
+        });
+        tf.init();
+
+        var flt = tf.getFilterElement(3);
+        flt.selectedIndex = flt.options.length-1;
+        tf.filter();
+
+        deepEqual(
+            tf.getFilteredData().length, 2, 'Expected nb of filtered rows');
+
+        tf.clearFilters();
+
+        deepEqual(
+            tf.getFilteredData().length, 7, 'Expected nb of filtered rows');
+
+        tf.destroy();
+        tf = null;
+    });
+
+    test('Grid layout: filter column with custom filter', function() {
+        tf = new TableFilter('demo', {
+            base_path: '../dist/tablefilter/',
+            col_3: 'select',
+            custom_options: {
+                cols: [3],
+                texts: [['0-0.5', '0.5-1', '1-2', '>2']],
+                values: [['>0 && <=0.5', '>0.5 && <=1', '>1 && <=2', '>2']],
+                sorts: [false]
+            },
+            grid_layout: true
+        });
+        tf.init();
+
+        var flt = tf.getFilterElement(3);
+        flt.selectedIndex = flt.options.length-1;
+        tf.filter();
+
+        deepEqual(
+            tf.getFilteredData().length, 2, 'Expected nb of filtered rows');
+
+        tf.clearFilters();
+
+        deepEqual(
+            tf.getFilteredData().length, 7, 'Expected nb of filtered rows');
+
+        tf.destroy();
+        tf = null;
+    });
+
+})(window, TableFilter);