From 813ed09d5fc9d71fde610a3e912cbdad74c484db Mon Sep 17 00:00:00 2001
From: Muhammad Nuzaihan <muhammad@taqisystems.com>
Date: Fri, 11 May 2018 13:13:36 +0800
Subject: [PATCH] improve on the range selection - resolves #1956

---
 .../controllers/_ui_element/time_range.coffee | 28 +++++-
 .../app/views/generic/time_range.jst.eco      |  9 +-
 .../generic/time_range_value_selector.jst.eco |  6 ++
 public/assets/tests/form.js                   | 93 ++++++++++++++++++-
 4 files changed, 121 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/javascripts/app/views/generic/time_range_value_selector.jst.eco

diff --git a/app/assets/javascripts/app/controllers/_ui_element/time_range.coffee b/app/assets/javascripts/app/controllers/_ui_element/time_range.coffee
index f0321ac92..9e4a0764a 100644
--- a/app/assets/javascripts/app/controllers/_ui_element/time_range.coffee
+++ b/app/assets/javascripts/app/controllers/_ui_element/time_range.coffee
@@ -10,8 +10,28 @@ class App.UiElement.time_range
     for key, value of ranges
       ranges[key] = App.i18n.translateInline(value)
 
-    values = {}
-    for count in [0..31]
-      values[count.toString()] = count.toString()
+    range = 'minute'
+    if attribute.value && attribute.value.range
+      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)
diff --git a/app/assets/javascripts/app/views/generic/time_range.jst.eco b/app/assets/javascripts/app/views/generic/time_range.jst.eco
index 16587f36e..d933027a0 100644
--- a/app/assets/javascripts/app/views/generic/time_range.jst.eco
+++ b/app/assets/javascripts/app/views/generic/time_range.jst.eco
@@ -1,11 +1,4 @@
-<div class="controls u-positionOrigin">
-  <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 js-valueRangeSelector"></div>
 <div class="controls u-positionOrigin">
   <select class="form-control js-range" name="<%= @attribute.name %>::range">
     <% for key, value of @ranges: %>
diff --git a/app/assets/javascripts/app/views/generic/time_range_value_selector.jst.eco b/app/assets/javascripts/app/views/generic/time_range_value_selector.jst.eco
new file mode 100644
index 000000000..1575ab66a
--- /dev/null
+++ b/app/assets/javascripts/app/views/generic/time_range_value_selector.jst.eco
@@ -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') %>
\ No newline at end of file
diff --git a/public/assets/tests/form.js b/public/assets/tests/form.js
index 56b811c28..4271c4e6f 100644
--- a/public/assets/tests/form.js
+++ b/public/assets/tests/form.js
@@ -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() {
 
-  $('#forms').append('<hr><h1>form select with empty option list</h1><form id="form14"></form>')
-  var el = $('#form14')
+  $('#forms').append('<hr><h1>form select with empty option list</h1><form id="form15"></form>')
+  var el = $('#form15')
   var defaults = {}
   new App.ControllerForm({
     el:        el,
@@ -1296,5 +1384,4 @@ test("form select with empty option list", function() {
     select6: 'B',
   }
   deepEqual(params, test_params)
-
 });