bterkuile/ember-cli-dunlop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finish numeric_range_filter

Browse Source
This commit is contained in:
Benjamin ter Kuile
2018-11-28 11:38:43 -03:00
parent 296ca5d895 41f3725782
commit 78ab4d4e70
19 changed files with 207 additions and 12379 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.bowerrc
-4
View File
@@ -1,4 +0,0 @@
{
"directory": "bower_components",
"analytics": false
}
.eslintrc.js
+1
View File
@@ -9,5 +9,6 @@ module.exports = {
browser: true
},
rules: {
"no-console": 1
}
};
.gitignore
+1
View File
@@ -16,3 +16,4 @@
/addon/**/*.js
npm-debug.log*
testem.log
/package-lock.json
addon/components/user-filters-manager.coffee
+5
View File
@@ -0,0 +1,5 @@
import Ember from 'ember'
export default Ember.Component.extend
scope_key: null
user_filters: (-> @store.peekAll('dunlop/user-filter').filterBy('scope_key', @get('scope_key'))).property()
addon/styles/components/_table-filtering.sass
+26 -1
View File
@@ -50,7 +50,32 @@ table thead tr.table-filters-row, table.ui.table thead tr.table-filters-row
.ui.horizontal.divider
// Without this css it renders a double border if text is used
border-top: 0
&.filter-pablo-number-range
.number-range-container
display: block !important
padding: 0px 10px
// margin-bottom: 5px
.options-container
display: block !important
padding: 0px 10px
text-align: right
margin-bottom: 5px
.menu
.divider
margin: 1px 0px
.select-number
input
width: 50px
text-align: right
margin-bottom: 5px
.button
// position: absolute
// right: 0
align: right
.error
word-wrap: break-word
max-width: 100px
color: red
// semantic-ui implementation
app/components/table-filters/pablo-number-range.js
+76
View File
@@ -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
+1
View File
@@ -0,0 +1 @@
export { default } from 'ember-cli-dunlop/components/user-filters-manager';
app/templates/components/table-filters.hbs
+15 -10
View File
@@ -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
+26
View File
@@ -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
+1
View File
@@ -0,0 +1 @@
= yield
package-lock.json
Generated
-12359
View File
File diff suppressed because it is too large Load Diff
package.json
+1
View File
@@ -50,6 +50,7 @@
"ember-source": "~2.16.2",
"ember-truth-helpers": "^1.3.0",
"loader.js": "^4.2.3",
"sass": "^1.15.1",
"semantic-ui-ember": "^3.0.3"
},
"engines": {
tests/dummy/app/i18n/translations.coffee
+8
View File
@@ -15,6 +15,9 @@ window.$translations =
are_you_sure: 'Weet je dit zeker?'
button: 'Delete'
close: 'Close'
clear: 'Clear'
apply: 'Apply'
and: 'and'
confirm:
cancel: 'Cancel'
confirm: 'Yes'
@@ -60,3 +63,8 @@ window.$translations =
friday: 'Vrijdag'
saturday: 'Zaterdag'
sunday: 'Zondag'
number:
range:
between: 'Between'
inclusive: 'inclusive'
lower_larger_than_upper_error: 'lower limit (%{lower}) cannot be greater than the upper limit (%{upper}).'
tests/dummy/app/router.coffee
+1
View File
@@ -10,6 +10,7 @@ Router.map ->
@route 'table-filters', ->
@route 'test1'
@route 'test2'
@route 'user-filters-manager'
@route 'table-ordering', ->
@route 'test1'
@route 'test2'
tests/dummy/app/routes/table-filters/user-filters-manager.coffee
+11
View File
@@ -0,0 +1,11 @@
import Ember from 'ember'
import PagedArray from 'ember-cli-pagination/local/paged-array'
export default Ember.Route.extend
model: (params) ->
Ember.A([
@store.createRecord('dunlop/user-filter', scope_key: 'panda/action-list', filters: {a: 42}, is_default: true)
@store.createRecord('dunlop/user-filter', scope_key: 'panda/action-list', filters: {a: 44}, is_default: false)
@store.createRecord('dunlop/user-filter', scope_key: 'migration-adapter/blurp', filters: {a: 44}, is_default: true)
])
tests/dummy/app/templates/table-filters.emblem
+2 -1
View File
@@ -1,4 +1,5 @@
.ui.two.item.stackable.tabs.menu
.ui.three.item.stackable.tabs.menu
= link-to 'table-filters.test1' class='item': span Filters Test1
= link-to 'table-filters.test2' class='item': span Filters Test2
= link-to 'table-filters.user-filters-manager' class='item': span user-filters-manager
= outlet
tests/dummy/app/templates/table-filters/test1.emblem
+4 -2
View File
@@ -9,10 +9,11 @@ table.ui.celled.striped.compact.table.sortable
/th date-range
= 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 dropdown-select
th dropdown-select objects
th boolean-checkboxes
@@ -27,6 +28,8 @@ table.ui.celled.striped.compact.table.sortable
button.ui.mini.primary.button{action 'set_filter_target_date_this_week'}= t 'date.this_week'
'
button.ui.mini.primary.button{action 'set_filter_target_date_next_fifteen_weeks'} Nu &harr; 15 weken
= filter.pablo-number-range key='pablos' inclusive=false
= 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
@@ -36,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'
tests/dummy/app/templates/table-filters/user-filters-manager.emblem
+1
View File
@@ -0,0 +1 @@
h1 user-filters-manager
tests/integration/components/user-filters-manager-test.coffee
+25
View File
@@ -0,0 +1,25 @@
import { test, moduleForComponent } from 'ember-qunit'
import hbs from 'htmlbars-inline-precompile'
moduleForComponent 'user-filters-manager', 'Integration | Component | user filters manager', {
integration: true
}
test 'it renders', (assert) ->
assert.expect 2
# Set any properties with @set 'myProperty', 'value'
# Handle any actions with @on 'myAction', (val) ->
@render hbs """{{user-filters-manager}}"""
assert.equal @$().text().trim(), ''
# Template block usage:
@render hbs """
{{#user-filters-manager}}
template block text
{{/user-filters-manager}}
"""
assert.equal @$().text().trim(), 'template block text'