Close #603 Add support for filter icons (via plugin)

mistic100 · Mar 11, 2018 · 12450e1 · 12450e1
1 parent 1e6194c
commit 12450e1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -168,8 +168,8 @@ <h3>Output</h3>
       'bt-tooltip-errors': { delay: 100 },
       'sortable': null,
       'filter-description': { mode: 'bootbox' },
-     // 'bt-selectpicker': null,
-      'chosen-selectpicker': null,
+      'bt-selectpicker': null,
+//      'chosen-selectpicker': null,
       'unique-filter': null,
       'bt-checkbox': { color: 'primary' },
       'invert': null,
@@ -211,6 +211,7 @@ <h3>Output</h3>
           en: 'Name',
           fr: 'Nom'
         },
+        icon: 'glyphicon glyphicon-user',
         value_separator: ',',
         type: 'string',
         optgroup: 'core',
@@ -227,6 +228,7 @@ <h3>Output</h3>
       {
         id: 'age',
         label: 'Age',
+        icon: 'glyphicon glyphicon-calendar',
         type: 'integer',
         input: 'text',
         value_separator: '|',
@@ -243,6 +245,7 @@ <h3>Output</h3>
       {
         id: 'bson',
         label: 'BSON',
+        icon: 'glyphicon glyphicon-qrcode',
         type: 'string',
         input: 'textarea',
         operators: ['equal'],
@@ -255,6 +258,7 @@ <h3>Output</h3>
       {
         id: 'category',
         label: 'Category',
+        icon: 'glyphicon glyphicon-th-list',
         type: 'integer',
         input: 'checkbox',
         optgroup: 'core',
@@ -280,6 +284,7 @@ <h3>Output</h3>
       {
         id: 'continent',
         label: 'Continent',
+        icon: 'glyphicon glyphicon-globe',
         type: 'string',
         input: 'select',
         optgroup: 'core',
@@ -328,6 +333,7 @@ <h3>Output</h3>
       {
         id: 'state',
         label: 'State',
+        icon: 'glyphicon glyphicon-globe',
         type: 'string',
         input: 'select',
         multiple: true,
@@ -363,6 +369,7 @@ <h3>Output</h3>
       {
         id: 'in_stock',
         label: 'In stock',
+        icon: 'glyphicon glyphicon-log-in',
         type: 'integer',
         input: 'radio',
         optgroup: 'plugin',
@@ -378,6 +385,7 @@ <h3>Output</h3>
       {
         id: 'price',
         label: 'Price',
+        icon: 'glyphicon glyphicon-usd',
         type: 'double',
         size: 5,
         validation: {
@@ -394,6 +402,7 @@ <h3>Output</h3>
       {
         id: 'rate',
         label: 'Rate',
+        icon: 'glyphicon glyphicon-flash',
         type: 'integer',
         validation: {
           min: 0,
@@ -417,6 +426,7 @@ <h3>Output</h3>
       {
         id: 'id',
         label: 'Identifier',
+        icon: 'glyphicon glyphicon-sunglasses',
         type: 'string',
         optgroup: 'plugin',
         placeholder: '____-____-____',
@@ -435,6 +445,7 @@ <h3>Output</h3>
       {
         id: 'coord',
         label: 'Coordinates',
+        icon: 'glyphicon glyphicon-star-empty',
         type: 'string',
         default_value: 'C.5',
         description: 'The letter is the cadran identifier:\

diff --git a/src/template.js b/src/template.js
@@ -62,7 +62,7 @@ QueryBuilder.templates.filterSelect = '\
         <optgroup label="{{= it.translate(it.settings.optgroups[optgroup]) }}"> \
       {{?}} \
     {{?}} \
-    <option value="{{= filter.id }}">{{= it.translate(filter.label) }}</option> \
+    <option value="{{= filter.id }}" {{? filter.icon}}data-icon="{{= filter.icon}}"{{?}}>{{= it.translate(filter.label) }}</option> \
   {{~}} \
   {{? optgroup !== null }}</optgroup>{{?}} \
 </select>';
@@ -82,7 +82,7 @@ QueryBuilder.templates.operatorSelect = '\
         <optgroup label="{{= it.translate(it.settings.optgroups[optgroup]) }}"> \
       {{?}} \
     {{?}} \
-    <option value="{{= operator.type }}">{{= it.translate("operators", operator.type) }}</option> \
+    <option value="{{= operator.type }}" {{? operator.icon}}data-icon="{{= operator.icon}}"{{?}}>{{= it.translate("operators", operator.type) }}</option> \
   {{~}} \
   {{? optgroup !== null }}</optgroup>{{?}} \
 </select>';