diff --git a/app/components/table-filters/pablo-number-range.js b/app/components/table-filters/pablo-number-range.js index 65d2132..533ed89 100644 --- a/app/components/table-filters/pablo-number-range.js +++ b/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', - filter_text: Ember.computed('{lower_bound,upper_bound,display_addition}', function () { - var gteq, lteq, range; - gteq = this.get('lower_bound') || '-'; - lteq = this.get('upper_bound') || '-'; - range = gteq + " / " + lteq; + 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'); } @@ -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, 'upper_bound', Ember.computed.alias("filters." + this.get('key') + "_lteq")); - this.set('lower_bound_candidate', '1'); - return this.set('upper_bound_candidate', '2'); + 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`)); }, 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('upper_bound', parseInt(this.get('upper_bound_candidate')) || ''); + 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); @@ -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); } diff --git a/app/templates/components/table-filters/pablo-number-range.emblem b/app/templates/components/table-filters/pablo-number-range.emblem index 8d09bff..b745999 100644 --- a/app/templates/components/table-filters/pablo-number-range.emblem +++ b/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' diff --git a/tests/dummy/app/templates/table-filters/test1.emblem b/tests/dummy/app/templates/table-filters/test1.emblem index 3c6ec46..cad9005 100644 --- a/tests/dummy/app/templates/table-filters/test1.emblem +++ b/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 number-range + th CUSTOM 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'