RC

app/components/table-filters/pablo-number-range.js

@@ -5,18 +5,19 @@ export default Component.extend({
     tagName: 'th',
     classNames: ['filter', 'filter-pablo-number-range'],
     classNameBindings: ['has_active_filter_value:active-filter'],
-    placeholder: '-/-',
+    placeholder: '[ ... ]',
     display_addition: '',
     apply_filters: function apply_filters() { },
     eager_filter: true,
     has_active_filter_value: Ember.computed.or('lower_bound', 'upper_bound'),
     lower_bound_candidate: '1',
-    upper_bound_candidate: '2',
+    upper_bound_candidate: '3',
-    filter_text: Ember.computed('{lower_bound,upper_bound,display_addition}', function () {
+    filter_text: Ember.computed('{lower_bound,upper_bound,display_addition,inclusive}', function () {
-        var gteq, lteq, range;
+        var lower_limit, upper_limit, range, isInclusive;
-        gteq = this.get('lower_bound') || '-';
+        isInclusive = this.get('inclusive');
-        lteq = this.get('upper_bound') || '-';
+        lower_limit = this.get('lower_bound') || '-';
-        range = gteq + " / " + lteq;
+        upper_limit = this.get('upper_bound') || '-';
+        range = isInclusive ? `[${lower_limit}, ${upper_limit}]` : `(${lower_limit}, ${upper_limit})`;
         if (this.get('display_addition')) {
             range += " " + this.get('display_addition');
         }
@@ -25,23 +26,38 @@ export default Component.extend({
     init: function init() {
         this._super();
         this.set('error', '');
-        Ember.defineProperty(this, 'lower_bound', Ember.computed.alias("filters." + this.get('key') + "_gteq"));
+        Ember.defineProperty(this, 'lower_bound', Ember.computed.alias(`filters.${this.get('key')}_gteq`));
-        Ember.defineProperty(this, 'upper_bound', Ember.computed.alias("filters." + this.get('key') + "_lteq"));
+        Ember.defineProperty(this, 'upper_bound', Ember.computed.alias(`filters.${this.get('key')}_lteq`));
-        this.set('lower_bound_candidate', '1');
-        return this.set('upper_bound_candidate', '2');
     },
     actions: {
+        toggle_inclusive() {
+            this.set('inclusive', !this.get('inclusive'));
+            const isInclusive = this.get('inclusive');
+            var lbc = this.get('lower_bound_candidate');
+            var hbc = this.get('upper_bound_candidate');
+
+            if (!isInclusive) {
+                lbc++;
+                hbc--;
+            } else {
+                lbc--
+                hbc++
+            }
+
+            this.set(`lower_bound_candidate`, lbc);
+            this.set(`upper_bound_candidate`, hbc);
+        },
         set_filter: function set_filter(key, value) {
             this.set('error', '');
             let lbc = this.get('lower_bound_candidate');
-            let hbc = this.get('upper_bound_candidate')
+            let hbc = this.get('upper_bound_candidate');
 
             if (hbc < lbc) {
-                this.set('error', `lower limit (${lbc}) cannot be greater \nthan the upper limit (${hbc}).`);
+                this.set('error', `lower limit (${lbc}) cannot be greater than the upper limit (${hbc}).`);
                 console.log(this.error);
             } else {
-                this.set('lower_bound', parseInt(this.get('lower_bound_candidate')) || '');
+                this.set('lower_bound', lbc || '');
-                this.set('upper_bound', parseInt(this.get('upper_bound_candidate')) || '');
+                this.set('upper_bound', hbc || '');
                 this.$('.dropdown').dropdown('hide');
                 if (this.get('eager_filter')) {
                     return this.get('apply_filters')(this);
@@ -50,10 +66,11 @@ export default Component.extend({
         },
         clear_filters: function clear_filters() {
             this.set('lower_bound', '');
+            this.set('inclusive', true);
             this.set('error', '');
             this.set('upper_bound', '');
             this.set('lower_bound_candidate', '1');
-            this.set('upper_bound_candidate', '2');
+            this.set('upper_bound_candidate', '3');
             if (this.get('eager_filter')) {
                 return this.get('apply_filters')(this);
             }

app/templates/components/table-filters/pablo-number-range.emblem

@@ -7,9 +7,11 @@ ui-dropdown class='left basic labeled top left pointing icon select-number' acti
       '   and 
       .ui.input.select-number= input type='number' value=upper_bound_candidate enter=(action 'set_filter')
       if error
-        // .flash-message {{error}}
         br
         .ui.pointing.red.basic.label {{error}}
+    .item
+      ui-checkbox class='item' checked=inclusive label='inclusive' onChange=(action 'toggle_inclusive' option)
+      
     .divider
     .options-container
         button.ui.mini.secondary.button{action 'clear_filters'}= t 'Clear'

tests/dummy/app/templates/table-filters/test1.emblem

@@ -10,10 +10,10 @@ table.ui.celled.striped.compact.table.sortable
       = sortable-table-header filters=filters key='target_date' model=model
       /= sortable-table-header filters=filters key='target_date' action=(invoke 'reload' model) model=model
       th pablo-number-range (pablos)
+      th number-range
       th dropdown-select-multiple
       th select-multiple (using modal)
-      th CUSTOM
+      th CUSTOM      
-      th number-range
       th dropdown-select
       th dropdown-select objects
       th boolean-checkboxes
@@ -29,6 +29,7 @@ table.ui.celled.striped.compact.table.sortable
           '
           button.ui.mini.primary.button{action 'set_filter_target_date_next_fifteen_weeks'} Nu ↔ 15 weken
       = filter.pablo-number-range    key='pablos' inclusive=true
+      = filter.number-range    key='age' inclusive=true
       = filter.dropdown-select-multiple key='dropdown_select_multiple_ids_in' options=scenario_classification_objects labelPath='grumpy'
       = filter.select-multiple key='select_multiple_modal_ids_in'       options=scenario_classification_objects valueKey='id' textKey='grumpy'
       th class=filters.target_week:active-filter
@@ -38,7 +39,6 @@ table.ui.celled.striped.compact.table.sortable
           i.close.icon.clear-target-week-filter{action 'clear_filter' 'target_week'}
         else
           i.filter.icon{action 'set_filter' 'target_week' '7-2018'}
-      = filter.number-range    key='age' inclusive=true
       = filter.dropdown-select key='location_planning_scenario_classification' options=scenario_classification_options
       = filter.dropdown-select key='location_planning_scenario_classification' options=scenario_classification_objects labelPath='grumpy'
       = filter.boolean-checkboxes key='my_boolean'