inital version
This commit is contained in:
Pablo Bañales
@@ -9,5 +9,6 @@ module.exports = {
|
||||
browser: true
|
||||
},
|
||||
rules: {
|
||||
"no-console": 1
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
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: '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;
|
||||
if (this.get('display_addition')) {
|
||||
range += " " + this.get('display_addition');
|
||||
}
|
||||
return range;
|
||||
}),
|
||||
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');
|
||||
},
|
||||
actions: {
|
||||
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', `lower limit (${lbc}) cannot be greater \nthan 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.$('.dropdown').dropdown('hide');
|
||||
if (this.get('eager_filter')) {
|
||||
return this.get('apply_filters')(this);
|
||||
}
|
||||
}
|
||||
},
|
||||
clear_filters: function clear_filters() {
|
||||
this.set('lower_bound', '');
|
||||
this.set('error', '');
|
||||
this.set('upper_bound', '');
|
||||
this.set('lower_bound_candidate', '1');
|
||||
this.set('upper_bound_candidate', '2');
|
||||
if (this.get('eager_filter')) {
|
||||
return this.get('apply_filters')(this);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -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)
|
||||
)}}
|
||||
@@ -0,0 +1,22 @@
|
||||
ui-dropdown class='left basic labeled top left pointing icon select-number' action='nothing'
|
||||
= filter_text
|
||||
.menu
|
||||
.item class='number-range-container'
|
||||
'Between
|
||||
.ui.input.select-number= input type='number' value=lower_bound_candidate enter=(action 'set_filter')
|
||||
' 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}}
|
||||
.divider
|
||||
.options-container
|
||||
button.ui.mini.secondary.button{action 'clear_filters'}= t 'Clear'
|
||||
'
|
||||
button.ui.mini.primary.button{action 'set_filter'}= t 'Apply'
|
||||
|
||||
|
||||
= yield
|
||||
if has_active_filter_value
|
||||
i.close.icon.clear-target-date-filter{action 'clear_filters'}
|
||||
Generated
+4111
-3146
File diff suppressed because it is too large
Load Diff
@@ -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": {
|
||||
|
||||
@@ -9,6 +9,7 @@ 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 dropdown-select-multiple
|
||||
th select-multiple (using modal)
|
||||
th CUSTOM
|
||||
@@ -27,6 +28,7 @@ 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 ↔ 15 weken
|
||||
= filter.pablo-number-range key='pablos' 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
|
||||
|
||||
Reference in New Issue
Block a user