Fix #209 Optgroups for operators

mistic100 · mistic100 · commit b5f05ef0f06d · 2016-01-02T16:16:12.000+01:00
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -10,7 +10,7 @@ I want to keep the core clean of extra (and certainly awesome) functionalities.
 
 Check the doc about [creating plugins](http://mistic100.github.io/jQuery-QueryBuilder/dev/plugins.html).
 
-I reserve the right to refuse any plugin I think is not useful for many people. Particularly, only import/export plugins for mainstream data storages will be intergated in the main repository. Others should be in a separated repository. But it's totally possible to add a link to your repository in the documentation.
+I reserve the right to refuse any plugin I think is not useful for many people. Particularly, only import/export plugins for mainstream data storages will be integrated in the main repository. Others should be in a separated repository. But it's totally possible to add a link to your repository in the documentation.
 
 ## Unit tests
 Any big feature must have it's own QUnit tests suite. Of course existing tests must still pass after changes.
diff --git a/examples/index.html b/examples/index.html
@@ -132,6 +132,30 @@ <h3>Output</h3>
     'invert': null
   },
 
+  // standard operators in custom optgroups
+  operators: [
+    {type: 'equal',            optgroup: 'basic'},
+    {type: 'not_equal',        optgroup: 'basic'},
+    {type: 'in',               optgroup: 'basic'},
+    {type: 'not_in',           optgroup: 'basic'},
+    {type: 'less',             optgroup: 'numbers'},
+    {type: 'less_or_equal',    optgroup: 'numbers'},
+    {type: 'greater',          optgroup: 'numbers'},
+    {type: 'greater_or_equal', optgroup: 'numbers'},
+    {type: 'between',          optgroup: 'numbers'},
+    {type: 'not_between',      optgroup: 'numbers'},
+    {type: 'begins_with',      optgroup: 'strings'},
+    {type: 'not_begins_with',  optgroup: 'strings'},
+    {type: 'contains',         optgroup: 'strings'},
+    {type: 'not_contains',     optgroup: 'strings'},
+    {type: 'ends_with',        optgroup: 'strings'},
+    {type: 'not_ends_with',    optgroup: 'strings'},
+    {type: 'is_empty'     },
+    {type: 'is_not_empty' },
+    {type: 'is_null'      },
+    {type: 'is_not_null'  }
+  ],
+
   filters: [
   /*
    * basic
diff --git a/src/core.js b/src/core.js
@@ -13,6 +13,7 @@ QueryBuilder.prototype.init = function($el, options) {
         rule_id: 0,
         generated_id: false,
         has_optgroup: false,
+        has_operator_oprgroup: false,
         id: null,
         updating_value: false
     };
@@ -59,6 +60,7 @@ QueryBuilder.prototype.init = function($el, options) {
     this.$el.addClass('query-builder form-inline');
 
     this.filters = this.checkFilters(this.filters);
+    this.operators = this.checkOperators(this.operators);
     this.bindEvents();
     this.initPlugins();
 
@@ -120,7 +122,7 @@ QueryBuilder.prototype.checkFilters = function(filters) {
         else {
             this.status.has_optgroup = true;
 
-            // backward compatiblity, register optgroup if needed
+            // register optgroup if needed
             if (!this.settings.optgroups[filter.optgroup]) {
                 this.settings.optgroups[filter.optgroup] = filter.optgroup;
             }
@@ -138,7 +140,7 @@ QueryBuilder.prototype.checkFilters = function(filters) {
                     if (filter.placeholder_value === undefined) {
                         filter.placeholder_value = -1;
                     }
-                    Utils.iterateOptions(filter.values, function(key, val) {
+                    Utils.iterateOptions(filter.values, function(key) {
                         if (key == filter.placeholder_value) {
                             Utils.error('Config', 'Placeholder of filter "{0}" overlaps with one of its values', filter.id);
                         }
@@ -148,36 +150,65 @@ QueryBuilder.prototype.checkFilters = function(filters) {
         }
     }, this);
 
-    // group filters with same optgroup, preserving declaration order when possible
     if (this.status.has_optgroup) {
-        var optgroups = [],
-            newFilters = [];
+        filters = Utils.groupSort(filters, 'optgroup');
+    }
 
-        filters.forEach(function(filter, i) {
-            var idx;
+    return filters;
+};
 
-            if (filter.optgroup) {
-                idx = optgroups.lastIndexOf(filter.optgroup);
+/**
+ * Checks the configuration of each operator
+ * @throws ConfigError
+ */
+QueryBuilder.prototype.checkOperators = function(operators) {
+    var definedOperators = [];
 
-                if (idx == -1) {
-                    idx = optgroups.length;
-                }
-                else {
-                    idx++;
-                }
+    operators.forEach(function(operator, i) {
+        if (typeof operator === 'string') {
+            if (!QueryBuilder.OPERATORS[operator]) {
+                Utils.error('Config', 'Unknown operator "{0}"', operator);
             }
-            else {
-                idx = optgroups.length;
+
+            operators[i] = operator = $.extendext(true, 'replace', {}, QueryBuilder.OPERATORS[operator]);
+        }
+        else {
+            if (!operator.type) {
+                Utils.error('Config', 'Missing "type" for operator {0}', i);
             }
 
-            optgroups.splice(idx, 0, filter.optgroup);
-            newFilters.splice(idx, 0, filter);
-        });
+            if (QueryBuilder.OPERATORS[operator.type]) {
+                operators[i] = operator = $.extendext(true, 'replace', {}, QueryBuilder.OPERATORS[operator.type], operator);
+            }
 
-        filters = newFilters;
+            if (operator.nb_inputs === undefined || operator.apply_to === undefined) {
+                Utils.error('Config', 'Missing "nb_inputs" and/or "apply_to" for operator "{0}"', operator.type);
+            }
+        }
+
+        if (definedOperators.indexOf(operator.type) != -1) {
+            Utils.error('Config', 'Operator "{0}" already defined', operator.type);
+        }
+        definedOperators.push(operator.type);
+
+        if (!operator.optgroup) {
+            operator.optgroup = null;
+        }
+        else {
+            this.status.has_operator_optgroup = true;
+
+            // register optgroup if needed
+            if (!this.settings.optgroups[operator.optgroup]) {
+                this.settings.optgroups[operator.optgroup] = operator.optgroup;
+            }
+        }
+    }, this);
+
+    if (this.status.has_operator_optgroup) {
+        operators = Utils.groupSort(operators, 'optgroup');
     }
 
-    return filters;
+    return operators;
 };
 
 /**
@@ -689,4 +720,4 @@ QueryBuilder.prototype.triggerValidationError = function(node, error, value) {
     if (!e.isDefaultPrevented()) {
         node.error = error;
     }
-};
+};
diff --git a/src/defaults.js b/src/defaults.js
@@ -73,6 +73,32 @@ QueryBuilder.templates = {};
  */
 QueryBuilder.regional = {};
 
+/**
+ * Default operators
+ */
+QueryBuilder.OPERATORS = {
+    equal:            {type: 'equal',            nb_inputs: 1, multiple: false, apply_to: ['string', 'number', 'datetime', 'boolean']},
+    not_equal:        {type: 'not_equal',        nb_inputs: 1, multiple: false, apply_to: ['string', 'number', 'datetime', 'boolean']},
+    in:               {type: 'in',               nb_inputs: 1, multiple: true,  apply_to: ['string', 'number', 'datetime']},
+    not_in:           {type: 'not_in',           nb_inputs: 1, multiple: true,  apply_to: ['string', 'number', 'datetime']},
+    less:             {type: 'less',             nb_inputs: 1, multiple: false, apply_to: ['number', 'datetime']},
+    less_or_equal:    {type: 'less_or_equal',    nb_inputs: 1, multiple: false, apply_to: ['number', 'datetime']},
+    greater:          {type: 'greater',          nb_inputs: 1, multiple: false, apply_to: ['number', 'datetime']},
+    greater_or_equal: {type: 'greater_or_equal', nb_inputs: 1, multiple: false, apply_to: ['number', 'datetime']},
+    between:          {type: 'between',          nb_inputs: 2, multiple: false, apply_to: ['number', 'datetime']},
+    not_between:      {type: 'not_between',      nb_inputs: 2, multiple: false, apply_to: ['number', 'datetime']},
+    begins_with:      {type: 'begins_with',      nb_inputs: 1, multiple: false, apply_to: ['string']},
+    not_begins_with:  {type: 'not_begins_with',  nb_inputs: 1, multiple: false, apply_to: ['string']},
+    contains:         {type: 'contains',         nb_inputs: 1, multiple: false, apply_to: ['string']},
+    not_contains:     {type: 'not_contains',     nb_inputs: 1, multiple: false, apply_to: ['string']},
+    ends_with:        {type: 'ends_with',        nb_inputs: 1, multiple: false, apply_to: ['string']},
+    not_ends_with:    {type: 'not_ends_with',    nb_inputs: 1, multiple: false, apply_to: ['string']},
+    is_empty:         {type: 'is_empty',         nb_inputs: 0, multiple: false, apply_to: ['string']},
+    is_not_empty:     {type: 'is_not_empty',     nb_inputs: 0, multiple: false, apply_to: ['string']},
+    is_null:          {type: 'is_null',          nb_inputs: 0, multiple: false, apply_to: ['string', 'number', 'datetime', 'boolean']},
+    is_not_null:      {type: 'is_not_null',      nb_inputs: 0, multiple: false, apply_to: ['string', 'number', 'datetime', 'boolean']}
+};
+
 /**
  * Default configuration
  */
@@ -114,26 +140,26 @@ QueryBuilder.DEFAULTS = {
     lang: {},
 
     operators: [
-        {type: 'equal',            nb_inputs: 1, multiple: false, apply_to: ['string', 'number', 'datetime', 'boolean']},
-        {type: 'not_equal',        nb_inputs: 1, multiple: false, apply_to: ['string', 'number', 'datetime', 'boolean']},
-        {type: 'in',               nb_inputs: 1, multiple: true,  apply_to: ['string', 'number', 'datetime']},
-        {type: 'not_in',           nb_inputs: 1, multiple: true,  apply_to: ['string', 'number', 'datetime']},
-        {type: 'less',             nb_inputs: 1, multiple: false, apply_to: ['number', 'datetime']},
-        {type: 'less_or_equal',    nb_inputs: 1, multiple: false, apply_to: ['number', 'datetime']},
-        {type: 'greater',          nb_inputs: 1, multiple: false, apply_to: ['number', 'datetime']},
-        {type: 'greater_or_equal', nb_inputs: 1, multiple: false, apply_to: ['number', 'datetime']},
-        {type: 'between',          nb_inputs: 2, multiple: false, apply_to: ['number', 'datetime']},
-        {type: 'not_between',      nb_inputs: 2, multiple: false, apply_to: ['number', 'datetime']},
-        {type: 'begins_with',      nb_inputs: 1, multiple: false, apply_to: ['string']},
-        {type: 'not_begins_with',  nb_inputs: 1, multiple: false, apply_to: ['string']},
-        {type: 'contains',         nb_inputs: 1, multiple: false, apply_to: ['string']},
-        {type: 'not_contains',     nb_inputs: 1, multiple: false, apply_to: ['string']},
-        {type: 'ends_with',        nb_inputs: 1, multiple: false, apply_to: ['string']},
-        {type: 'not_ends_with',    nb_inputs: 1, multiple: false, apply_to: ['string']},
-        {type: 'is_empty',         nb_inputs: 0, multiple: false, apply_to: ['string']},
-        {type: 'is_not_empty',     nb_inputs: 0, multiple: false, apply_to: ['string']},
-        {type: 'is_null',          nb_inputs: 0, multiple: false, apply_to: ['string', 'number', 'datetime', 'boolean']},
-        {type: 'is_not_null',      nb_inputs: 0, multiple: false, apply_to: ['string', 'number', 'datetime', 'boolean']}
+        'equal',
+        'not_equal',
+        'in',
+        'not_in',
+        'less',
+        'less_or_equal',
+        'greater',
+        'greater_or_equal',
+        'between',
+        'not_between',
+        'begins_with',
+        'not_begins_with',
+        'contains',
+        'not_contains',
+        'ends_with',
+        'not_ends_with',
+        'is_empty',
+        'is_not_empty',
+        'is_null',
+        'is_not_null'
     ],
 
     icons: {
@@ -143,4 +169,4 @@ QueryBuilder.DEFAULTS = {
         remove_rule:  'glyphicon glyphicon-remove',
         error:        'glyphicon glyphicon-warning-sign'
     }
-};
+};
diff --git a/src/template.js b/src/template.js
@@ -60,7 +60,7 @@ QueryBuilder.templates.filterSelect = '\
   {{~ it.filters: filter }} \
     {{? optgroup !== filter.optgroup }} \
       {{? optgroup !== null }}</optgroup>{{?}} \
-      {{? (optgroup = filter.optgroup) !== null}} \
+      {{? (optgroup = filter.optgroup) !== null }} \
         <optgroup label="{{= it.translate(it.settings.optgroups[optgroup]) }}"> \
       {{?}} \
     {{?}} \
@@ -70,10 +70,18 @@ QueryBuilder.templates.filterSelect = '\
 </select>';
 
 QueryBuilder.templates.operatorSelect = '\
+{{ var optgroup = null; }} \
 <select class="form-control" name="{{= it.rule.id }}_operator"> \
   {{~ it.operators: operator }} \
+    {{? optgroup !== operator.optgroup }} \
+      {{? optgroup !== null }}</optgroup>{{?}} \
+      {{? (optgroup = operator.optgroup) !== null }} \
+        <optgroup label="{{= it.translate(it.settings.optgroups[optgroup]) }}"> \
+      {{?}} \
+    {{?}} \
     <option value="{{= operator.type }}">{{= it.lang.operators[operator.type] || operator.type }}</option> \
   {{~}} \
+  {{? optgroup !== null }}</optgroup>{{?}} \
 </select>';
 
 /**
@@ -146,7 +154,8 @@ QueryBuilder.prototype.getRuleOperatorSelect = function(rule, operators) {
         operators: operators,
         icons: this.icons,
         lang: this.lang,
-        settings: this.settings
+        settings: this.settings,
+        translate: this.translateLabel
     });
 
     return this.change('getRuleOperatorSelect', h, rule);
@@ -222,4 +231,4 @@ QueryBuilder.prototype.getRuleInput = function(rule, value_id) {
     }
 
     return this.change('getRuleInput', h, rule, name);
-};
+};
diff --git a/src/utils.js b/src/utils.js
@@ -110,4 +110,38 @@ Utils.escapeString = function(value) {
  */
 Utils.escapeRegExp = function(str) {
     return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
-};
+};
+
+/**
+ * Sort objects by grouping them by {key}, preserving initial order when possible
+ * @param {object[]} items
+ * @param {string} key
+ * @returns {object[]}
+ */
+Utils.groupSort = function(items, key) {
+    var optgroups = [],
+        newItems = [];
+
+    items.forEach(function(item) {
+        var idx;
+
+        if (item[key]) {
+            idx = optgroups.lastIndexOf(item[key]);
+
+            if (idx == -1) {
+                idx = optgroups.length;
+            }
+            else {
+                idx++;
+            }
+        }
+        else {
+            idx = optgroups.length;
+        }
+
+        optgroups.splice(idx, 0, item[key]);
+        newItems.splice(idx, 0, item);
+    });
+
+    return newItems;
+};
diff --git a/tests/core.module.js b/tests/core.module.js
