Fix #642 Add optgroups support for values

Author: mistic100

examples/index.html

@@ -284,14 +284,42 @@ <h3>Output</h3>
         input: 'select',
         optgroup: 'core',
         placeholder: 'Select something',
-        values: {
-          'eur': 'Europe',
-          'asia': 'Asia',
-          'oce': 'Oceania',
-          'afr': 'Africa',
-          'na': 'North America',
-          'sa': 'South America'
-        },
+        values: [
+          {
+            label: 'Europe',
+            value: 'eur',
+            optgroup: 'North'
+          },
+          {
+            label: 'Asia',
+            value: 'asia',
+            optgroup: 'North'
+          },
+          {
+            label: 'Oceania',
+            value: 'oce',
+            optgroup: 'South'
+          },
+          {
+            label: 'Africa',
+            value: 'afr',
+            optgroup: 'South'
+          },
+          {
+            label: 'North America',
+            value: 'na',
+            optgroup: 'North'
+          },
+          {
+            label: 'South America',
+            value: 'sa',
+            optgroup: 'South'
+          },
+          {
+            label: 'Mordor',
+            value: 'mrd'
+          }
+        ],
         operators: ['equal', 'not_equal', 'is_null', 'is_not_null']
       },
       /*

src/core.js

@@ -93,12 +93,40 @@ QueryBuilder.prototype.checkFilters = function(filters) {
                 break;
 
             case 'select':
+                var cleanValues = [];
+                filter.has_optgroup = false;
+
+                Utils.iterateOptions(filter.values, function(value, label, optgroup) {
+                    cleanValues.push({
+                        value: value,
+                        label: label,
+                        optgroup: optgroup || null
+                    });
+
+                    if (optgroup) {
+                        filter.has_optgroup = true;
+
+                        // register optgroup if needed
+                        if (!this.settings.optgroups[optgroup]) {
+                            this.settings.optgroups[optgroup] = optgroup;
+                        }
+                    }
+                }.bind(this));
+
+                if (filter.has_optgroup) {
+                    filter.values = Utils.groupSort(cleanValues, 'optgroup');
+                }
+                else {
+                    filter.values = cleanValues;
+                }
+
                 if (filter.placeholder) {
                     if (filter.placeholder_value === undefined) {
                         filter.placeholder_value = -1;
                     }
-                    Utils.iterateOptions(filter.values, function(key) {
-                        if (key == filter.placeholder_value) {
+
+                    filter.values.forEach(function(entry) {
+                        if (entry.value == filter.placeholder_value) {
                             Utils.error('Config', 'Placeholder of filter "{0}" overlaps with one of its values', filter.id);
                         }
                     });

src/defaults.js

@@ -156,7 +156,8 @@ QueryBuilder.DEFAULTS = {
         group: null,
         rule: null,
         filterSelect: null,
-        operatorSelect: null
+        operatorSelect: null,
+        ruleValueSelect: null
     },
 
     lang_code: 'en',

src/template.js

@@ -87,6 +87,24 @@ QueryBuilder.templates.operatorSelect = '\
   {{? optgroup !== null }}</optgroup>{{?}} \
 </select>';
 
+QueryBuilder.templates.ruleValueSelect = '\
+{{ var optgroup = null; }} \
+<select class="form-control" name="{{= it.name }}" {{? it.rule.filter.multiple }}multiple{{?}}> \
+  {{? it.rule.filter.placeholder }} \
+    <option value="{{= it.rule.filter.placeholder_value }}" disabled selected>{{= it.rule.filter.placeholder }}</option> \
+  {{?}} \
+  {{~ it.rule.filter.values: entry }} \
+    {{? optgroup !== entry.optgroup }} \
+      {{? optgroup !== null }}</optgroup>{{?}} \
+      {{? (optgroup = entry.optgroup) !== null }} \
+        <optgroup label="{{= it.translate(it.settings.optgroups[optgroup]) }}"> \
+      {{?}} \
+    {{?}} \
+    <option value="{{= entry.value }}">{{= entry.label }}</option> \
+  {{~}} \
+  {{? optgroup !== null }}</optgroup>{{?}} \
+</select>';
+
 /**
  * Returns group's HTML
  * @param {string} group_id
@@ -203,6 +221,36 @@ QueryBuilder.prototype.getRuleOperatorSelect = function(rule, operators) {
     return this.change('getRuleOperatorSelect', h, rule, operators);
 };
 
+/**
+ * Returns the rule's value select HTML
+ * @param {string} name
+ * @param {Rule} rule
+ * @returns {string}
+ * @fires QueryBuilder.changer:getRuleValueSelect
+ * @private
+ */
+QueryBuilder.prototype.getRuleValueSelect = function(name, rule) {
+    var h = this.templates.ruleValueSelect({
+        builder: this,
+        name: name,
+        rule: rule,
+        icons: this.icons,
+        settings: this.settings,
+        translate: this.translate.bind(this)
+    });
+
+    /**
+     * Modifies the raw HTML of the rule's value dropdown (in case of a "select filter)
+     * @event changer:getRuleValueSelect
+     * @memberof QueryBuilder
+     * @param {string} html
+     * @param [string} name
+     * @param {Rule} rule
+     * @returns {string}
+     */
+    return this.change('getRuleValueSelect', h, name, rule);
+};
+
 /**
  * Returns the rule's value HTML
  * @param {Rule} rule
@@ -231,14 +279,7 @@ QueryBuilder.prototype.getRuleInput = function(rule, value_id) {
                 break;
 
             case 'select':
-                h += '<select class="form-control" name="' + name + '"' + (filter.multiple ? ' multiple' : '') + '>';
-                if (filter.placeholder) {
-                    h += '<option value="' + filter.placeholder_value + '" disabled selected>' + filter.placeholder + '</option>';
-                }
-                Utils.iterateOptions(filter.values, function(key, val) {
-                    h += '<option value="' + key + '">' + val + '</option> ';
-                });
-                h += '</select>';
+                h = this.getRuleValueSelect(name, rule);
                 break;
 
             case 'textarea':

src/utils.js

@@ -14,10 +14,11 @@ QueryBuilder.utils = Utils;
  * @callback Utils#OptionsIteratee
  * @param {string} key
  * @param {string} value
+ * @param {string} [optgroup]
  */
 
 /**
- * Iterates over radio/checkbox/selection options, it accept three formats
+ * Iterates over radio/checkbox/selection options, it accept four formats
  *
  * @example
  * // array of values
@@ -28,6 +29,9 @@ QueryBuilder.utils = Utils;
  * @example
  * // array of 1-element maps
  * options = [{1: 'one'}, {2: 'two'}, {3: 'three'}]
+ * @example
+ * // array of elements
+ * options = [{value: 1, label: 'one', optgroup: 'group'}, {value: 2, label: 'two'}]
  *
  * @param {object|array} options
  * @param {Utils#OptionsIteratee} tpl
@@ -36,12 +40,18 @@ Utils.iterateOptions = function(options, tpl) {
     if (options) {
         if ($.isArray(options)) {
             options.forEach(function(entry) {
-                // array of one-element maps
                 if ($.isPlainObject(entry)) {
-                    $.each(entry, function(key, val) {
-                        tpl(key, val);
-                        return false; // break after first entry
-                    });
+                    // array of elements
+                    if ('value' in entry) {
+                        tpl(entry.value, entry.label || entry.value, entry.optgroup);
+                    }
+                    // array of one-element maps
+                    else {
+                        $.each(entry, function(key, val) {
+                            tpl(key, val);
+                            return false; // break after first entry
+                        });
+                    }
                 }
                 // array of values
                 else {

tests/utils.module.js

@@ -7,31 +7,39 @@ $(function () {
      */
     QUnit.test('iterateOptions', function (assert) {
         var output;
-        function callback(a, b) {
-            output.push(a, b);
+        function callback(a, b, c) {
+            output.push(a, b, c);
         }
 
         output = [];
         Utils.iterateOptions(['one', 'foo', 'bar'], callback);
         assert.deepEqual(
             output,
-            ['one', 'one', 'foo', 'foo', 'bar', 'bar'],
+            ['one', 'one', undefined, 'foo', 'foo', undefined, 'bar', 'bar', undefined],
             'Should iterate simple array'
         );
 
         output = [];
         Utils.iterateOptions({1: 'one', 2: 'foo', 3: 'bar'}, callback);
         assert.deepEqual(
             output,
-            ['1', 'one', '2', 'foo', '3', 'bar'],
+            ['1', 'one', undefined, '2', 'foo', undefined, '3', 'bar', undefined],
             'Should iterate simple hash-map'
         );
 
         output = [];
         Utils.iterateOptions([{1: 'one'}, {2: 'foo'}, {3: 'bar'}], callback);
         assert.deepEqual(
             output,
-            ['1', 'one', '2', 'foo', '3', 'bar'],
+            ['1', 'one', undefined, '2', 'foo', undefined, '3', 'bar', undefined],
+            'Should iterate array of one element hash-maps'
+        );
+
+        output = [];
+        Utils.iterateOptions([{value: 1, label: 'one', optgroup: 'group'}, {value: 2, label: 'foo'}, {value: 3, label: 'bar', optgroup: 'group'}], callback);
+        assert.deepEqual(
+            output,
+            [1, 'one', 'group', 2, 'foo', undefined, 3, 'bar', 'group'],
             'Should iterate array of hash-maps'
         );
     });