improve on the range selection - resolves #1956
This commit is contained in:
parent
3558f9a0ec
commit
813ed09d5f
4 changed files with 121 additions and 15 deletions
|
@ -10,8 +10,28 @@ class App.UiElement.time_range
|
||||||
for key, value of ranges
|
for key, value of ranges
|
||||||
ranges[key] = App.i18n.translateInline(value)
|
ranges[key] = App.i18n.translateInline(value)
|
||||||
|
|
||||||
values = {}
|
range = 'minute'
|
||||||
for count in [0..31]
|
if attribute.value && attribute.value.range
|
||||||
values[count.toString()] = count.toString()
|
range = attribute.value.range
|
||||||
|
values =
|
||||||
|
minute: [1..120]
|
||||||
|
hour: [1..48]
|
||||||
|
day: [1..31]
|
||||||
|
month: [1..12]
|
||||||
|
year: [1..20]
|
||||||
|
|
||||||
$( App.view('generic/time_range')( attribute: attribute, ranges: ranges, values: values ) )
|
element = $( App.view('generic/time_range')(attribute: attribute, ranges: ranges))
|
||||||
|
@localRenderPulldown(element.filter('.js-valueRangeSelector'), values[range], attribute)
|
||||||
|
element.find('select.form-control.js-range').on('change', (e) =>
|
||||||
|
range = $(e.currentTarget).val()
|
||||||
|
@localRenderPulldown($(e.currentTarget).closest('.js-filterElement').find('.js-valueRangeSelector'), values[range], attribute)
|
||||||
|
)
|
||||||
|
element
|
||||||
|
|
||||||
|
@localRenderPulldown: (el, range, attribute) ->
|
||||||
|
return if !range
|
||||||
|
values = {}
|
||||||
|
for count in range
|
||||||
|
values[count.toString()] = count.toString()
|
||||||
|
select = App.view('generic/time_range_value_selector')(attribute: attribute, values: values)
|
||||||
|
el.html(select)
|
||||||
|
|
|
@ -1,11 +1,4 @@
|
||||||
<div class="controls u-positionOrigin">
|
<div class="controls u-positionOrigin js-valueRangeSelector"></div>
|
||||||
<select class="form-control js-value" name="<%= @attribute.name %>::value">
|
|
||||||
<% for key, value of @values: %>
|
|
||||||
<option value="<%= key %>" <% if @attribute.value && @attribute.value.value.toString() is key.toString(): %>selected<% end %>><%- value %></option>
|
|
||||||
<% end %>
|
|
||||||
</select>
|
|
||||||
<%- @Icon('arrow-down', 'dropdown-arrow') %>
|
|
||||||
</div>
|
|
||||||
<div class="controls u-positionOrigin">
|
<div class="controls u-positionOrigin">
|
||||||
<select class="form-control js-range" name="<%= @attribute.name %>::range">
|
<select class="form-control js-range" name="<%= @attribute.name %>::range">
|
||||||
<% for key, value of @ranges: %>
|
<% for key, value of @ranges: %>
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
<select class="form-control js-value" name="<%= @attribute.name %>::value">
|
||||||
|
<% for key, value of @values: %>
|
||||||
|
<option value="<%= key %>" <% if @attribute.value && @attribute.value.value.toString() is key.toString(): %>selected<% end %>><%- value %></option>
|
||||||
|
<% end %>
|
||||||
|
</select>
|
||||||
|
<%- @Icon('arrow-down', 'dropdown-arrow') %>
|
|
@ -1266,10 +1266,98 @@ test("object manager form 3", function() {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test("time range form 1", function() {
|
||||||
|
|
||||||
|
$('#forms').append('<hr><h1>time range form 1</h1><form id="form14"></form>')
|
||||||
|
var el = $('#form14')
|
||||||
|
|
||||||
|
var defaults = {}
|
||||||
|
new App.ControllerForm({
|
||||||
|
el: el,
|
||||||
|
model: {
|
||||||
|
configure_attributes: [
|
||||||
|
{ name: 'time_range', display: 'Format', tag: 'time_range', null: false },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
params: $.extend(defaults, { object: 'Ticket' }),
|
||||||
|
autofocus: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var params = App.ControllerForm.params(el)
|
||||||
|
var test_params = {
|
||||||
|
"time_range": {
|
||||||
|
"range": "minute",
|
||||||
|
"value": "1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
deepEqual(params, test_params, 'base form param range check')
|
||||||
|
|
||||||
|
el.find('.js-range').val('minute').trigger('change')
|
||||||
|
el.find('.js-valueRangeSelector .js-value').val('120').trigger('change')
|
||||||
|
|
||||||
|
params = App.ControllerForm.params(el)
|
||||||
|
test_params = {
|
||||||
|
"time_range": {
|
||||||
|
"range": "minute",
|
||||||
|
"value": "120"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
deepEqual(params, test_params, 'form param minute range check')
|
||||||
|
|
||||||
|
el.find('.js-range').val('hour').trigger('change')
|
||||||
|
el.find('.js-valueRangeSelector .js-value').val('48').trigger('change')
|
||||||
|
|
||||||
|
params = App.ControllerForm.params(el)
|
||||||
|
test_params = {
|
||||||
|
"time_range": {
|
||||||
|
"range": "hour",
|
||||||
|
"value": "48"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
deepEqual(params, test_params, 'form param hour range check')
|
||||||
|
|
||||||
|
el.find('.js-range').val('day').trigger('change')
|
||||||
|
el.find('.js-valueRangeSelector .js-value').val('31').trigger('change')
|
||||||
|
|
||||||
|
params = App.ControllerForm.params(el)
|
||||||
|
test_params = {
|
||||||
|
"time_range": {
|
||||||
|
"range": "day",
|
||||||
|
"value": "31"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
deepEqual(params, test_params, 'form param day range check')
|
||||||
|
|
||||||
|
el.find('.js-range').val('month').trigger('change')
|
||||||
|
el.find('.js-valueRangeSelector .js-value').val('12').trigger('change')
|
||||||
|
|
||||||
|
params = App.ControllerForm.params(el)
|
||||||
|
test_params = {
|
||||||
|
"time_range": {
|
||||||
|
"range": "month",
|
||||||
|
"value": "12"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
deepEqual(params, test_params, 'form param month range check')
|
||||||
|
|
||||||
|
el.find('.js-range').val('year').trigger('change')
|
||||||
|
el.find('.js-valueRangeSelector .js-value').val('20').trigger('change')
|
||||||
|
|
||||||
|
params = App.ControllerForm.params(el)
|
||||||
|
test_params = {
|
||||||
|
"time_range": {
|
||||||
|
"range": "year",
|
||||||
|
"value": "20"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
deepEqual(params, test_params, 'form param year range check')
|
||||||
|
});
|
||||||
|
|
||||||
test("form select with empty option list", function() {
|
test("form select with empty option list", function() {
|
||||||
|
|
||||||
$('#forms').append('<hr><h1>form select with empty option list</h1><form id="form14"></form>')
|
$('#forms').append('<hr><h1>form select with empty option list</h1><form id="form15"></form>')
|
||||||
var el = $('#form14')
|
var el = $('#form15')
|
||||||
var defaults = {}
|
var defaults = {}
|
||||||
new App.ControllerForm({
|
new App.ControllerForm({
|
||||||
el: el,
|
el: el,
|
||||||
|
@ -1296,5 +1384,4 @@ test("form select with empty option list", function() {
|
||||||
select6: 'B',
|
select6: 'B',
|
||||||
}
|
}
|
||||||
deepEqual(params, test_params)
|
deepEqual(params, test_params)
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue