Finish numeric_range_filter

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

@@ -0,0 +1,76 @@
+import Ember from 'ember';
+import Component from '@ember/component';
+
+export default Component.extend({
+    tagName: 'th',
+    classNames: ['filter', 'filter-pablo-number-range'],
+    classNameBindings: ['has_active_filter_value:active-filter'],
+    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: '3',
+    filter_text: Ember.computed('{lower_bound,upper_bound,display_addition,inclusive}', function () {
+        var lower_limit, upper_limit, range, isInclusive;
+        isInclusive = this.get('inclusive');
+        lower_limit = this.get('lower_bound') || '-';
+        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');
+        }
+        return range;
+    }),
+    init: function init() {
+        this._super();
+        this.set('error', '');
+        const isInclusive = this.get('inclusive');
+        Ember.defineProperty(this, 'lower_bound',
+            Ember.computed.alias(`filters.${this.get('key')}${isInclusive ? '_gteq' : '_gt'}`));
+        Ember.defineProperty(this, 'upper_bound',
+            Ember.computed.alias(`filters.${this.get('key')}${isInclusive ? '_lteq' : '_lt'}`));
+    },
+    actions: {
+        toggle_inclusive() {
+            this.set('inclusive', !this.get('inclusive'));
+            const isInclusive = this.get('inclusive');
+
+            Ember.defineProperty(this, 'lower_bound',
+                Ember.computed.alias(`filters.${this.get('key')}${isInclusive ? '_gteq' : '_gt'}`));
+            Ember.defineProperty(this, 'upper_bound',
+                Ember.computed.alias(`filters.${this.get('key')}${isInclusive ? '_lteq' : '_lt'}`));
+
+            delete this.filters[`${this.get('key')}${isInclusive ? '_gt' : '_gteq'}`];
+            delete this.filters[`${this.get('key')}${isInclusive ? '_lt' : '_lteq'}`];
+        },
+        set_filter: function set_filter(key, value) {
+            this.set('error', '');
+            let lbc = this.get('lower_bound_candidate');
+            let hbc = this.get('upper_bound_candidate');
+
+            if (hbc < lbc) {
+                this.set('error', t('number.range.lower_larger_than_upper_error', { lower: lbc, upper: hbc }));
+                console.log(this.error);
+            } else {
+                this.set('lower_bound', lbc || '');
+                this.set('upper_bound', hbc || '');
+                this.$('.dropdown').dropdown('hide');
+                if (this.get('eager_filter')) {
+                    return this.get('apply_filters')(this);
+                }
+            }
+        },
+        clear_filters: function clear_filters() {
+            this.set('inclusive', true);
+            this.set('error', '');
+            this.set('lower_bound', '');
+            this.set('upper_bound', '');
+            this.set('lower_bound_candidate', '1');
+            this.set('upper_bound_candidate', '3');
+            this.$('.dropdown').dropdown('hide');
+            return this.get('apply_filters')(this);
+        }
+    }
+});

app/components/user-filters-manager.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-dunlop/components/user-filters-manager';

app/templates/components/table-filters.hbs

@@ -1,12 +1,17 @@
 {{yield (hash
-  input                    = (component "table-filters/input"  apply_filters=(action 'apply_filters') filters=filters)
-  date                     = (component "table-filters/date"  apply_filters=(action 'apply_filters') filters=filters)
-  date-range               = (component "table-filters/date-range"  apply_filters=(action 'apply_filters') filters=filters)
-  number-range             = (component "table-filters/number-range"  apply_filters=(action 'apply_filters') filters=filters)
-  dropdown-select          = (component "table-filters/dropdown-select"  apply_filters=(action 'apply_filters') filters=filters)
-  dropdown-select-multiple = (component "table-filters/dropdown-select-multiple" apply_filters=(action 'apply_filters') filters=filters)
-  option-buttons           = (component "table-filters/option-buttons"  apply_filters=(action 'apply_filters') filters=filters)
-  boolean-checkboxes       = (component "table-filters/boolean-checkboxes"  apply_filters=(action 'apply_filters') filters=filters)
-  select-multiple          = (component "table-filters/select-multiple" apply_filters=(action 'apply_filters') filters=filters)
-  actions                  = (component 'table-filters/actions' apply_filters=(action 'apply_filters') clear_filters=(action 'clear_filters') filter_calls=filter_calls)
-)}}
+input = (component "table-filters/input" apply_filters=(action 'apply_filters') filters=filters)
+date = (component "table-filters/date" apply_filters=(action 'apply_filters') filters=filters)
+date-range = (component "table-filters/date-range" apply_filters=(action 'apply_filters') filters=filters)
+number-range = (component "table-filters/number-range" apply_filters=(action 'apply_filters') filters=filters)
+pablo-number-range = (component "table-filters/pablo-number-range" apply_filters=(action 'apply_filters')
+filters=filters)
+dropdown-select = (component "table-filters/dropdown-select" apply_filters=(action 'apply_filters') filters=filters)
+dropdown-select-multiple = (component "table-filters/dropdown-select-multiple" apply_filters=(action 'apply_filters')
+filters=filters)
+option-buttons = (component "table-filters/option-buttons" apply_filters=(action 'apply_filters') filters=filters)
+boolean-checkboxes = (component "table-filters/boolean-checkboxes" apply_filters=(action 'apply_filters')
+filters=filters)
+select-multiple = (component "table-filters/select-multiple" apply_filters=(action 'apply_filters') filters=filters)
+actions = (component 'table-filters/actions' apply_filters=(action 'apply_filters') clear_filters=(action
+'clear_filters') filter_calls=filter_calls)
+)}}

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

@@ -0,0 +1,26 @@
+ui-dropdown class='left basic labeled top left pointing icon select-number' action='nothing'
+  = filter_text
+  .menu
+    .item class='number-range-container'
+      = t 'number.range.between'
+      '
+      .ui.input.select-number= input type='number' value=lower_bound_candidate enter=(action 'set_filter')
+      '
+      = t 'general.and'
+      '
+      .ui.input.select-number= input type='number' value=upper_bound_candidate enter=(action 'set_filter')
+      if error
+        br
+        .ui.pointing.red.basic.label {{error}}
+    .item
+      ui-checkbox class='item' checked=inclusive label=(t 'number.range.inclusive') onChange=(action 'toggle_inclusive')
+
+    .divider
+    .options-container
+        button.ui.mini.secondary.button{action 'clear_filters'}= t 'general.clear'
+        '
+        button.ui.mini.primary.button{action 'set_filter'}= t 'general.apply'
+
+    = yield
+if has_active_filter_value
+  i.close.icon.clear-target-date-filter{action 'clear_filters'}

app/templates/components/user-filters-manager.emblem

@@ -0,0 +1 @@
+= yield