Merge pull request #333 from platanus/datetime-picker-filter

Datetime picker filter

Author: ldlsegovia

CHANGELOG.md

@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Unreleased
 
 ##### Added
+* Added date time picker filter [#333](https://github.com/platanus/activeadmin_addons/pull/333)
 * Added filters option in nested selects [#301](https://github.com/platanus/activeadmin_addons/pull/301)
 * Date range filters and date picker inputs now has `autocomplete: 'off'` by default [#320](https://github.com/platanus/activeadmin_addons/pull/320)
 * Added `tags` option to default select2 inputs [#322](https://github.com/platanus/activeadmin_addons/pull/322)

Gemfile.lock

@@ -174,7 +174,7 @@ GEM
     mini_portile2 (2.4.0)
     minitest (5.14.0)
     nenv (0.3.0)
-    nio4r (2.5.2)
+    nio4r (2.5.5)
     nokogiri (1.10.8)
       mini_portile2 (~> 2.4.0)
     notiffany (0.1.3)

README.md

@@ -29,6 +29,7 @@ ActiveAdmin Addons will extend your ActiveAdmin and enable a set of addons you c
 #### Filters
 
 - [Numeric Range Filter](#numeric-range-filter): filter your results using a numeric range (i.e. age between 18-30).
+- [Date Time Picker Filter](#date-time-picker-filter): filter your results using a datetime range.
 - [Search Select Filter](#search-select-filter): filter your results using the ajax select input.
 
 #### Themes
@@ -211,6 +212,16 @@ filter :number, as: :numeric_range_filter
 
 <img src="./docs/images/filter-range.png" height="150" />
 
+#### Date Time Picker Filter
+
+To filter based on a range of datetimes you can use `date_time_picker_filter` like this:
+
+```ruby
+filter :created_at, as: :date_time_picker_filter
+```
+
+<img src="./docs/images/data-time-picker-range.png" height="150" />
+
 #### Search Select Filter
 
 You can use the ajax select input to filter values on index view like this:

app/assets/stylesheets/activeadmin_addons/all.scss

@@ -3,6 +3,7 @@
 @import 'vendor/palette-color-picker';
 
 @import 'inputs/numeric-range-filter';
+@import 'inputs/date-time-picker-filter';
 @import 'inputs/color-picker';
 @import 'inputs/date-time-picker';
 @import 'inputs/select2';

app/assets/stylesheets/activeadmin_addons/inputs/date-time-picker-filter.scss

@@ -0,0 +1,11 @@
+.filter_date_time_picker_filter {
+  li {
+    list-style: none;
+
+    label {
+      display: none;
+    }
+
+    margin-bottom: 5px;
+  }
+}

app/inputs/date_time_picker_filter_input.rb

@@ -0,0 +1,26 @@
+class DateTimePickerFilterInput < ActiveAdminAddons::InputBase
+  include ActiveAdminAddons::FilterInput
+
+  def load_control_attributes
+    load_attr(:picker_options, default: {})
+  end
+
+  def render_custom_input
+    concat(label_html)
+    concat_date_time_picker_field(gteq_input_name)
+    concat_date_time_picker_field(lteq_input_name)
+  end
+
+  def concat_date_time_picker_field(control_name)
+    concat(builder.input(control_name, date_time_picker_options(control_name)))
+  end
+
+  def date_time_picker_options(input_name = gteq_input_name)
+    is_gt = (input_name == gteq_input_name)
+
+    input_html_options.merge(
+      as: :date_time_picker,
+      placeholder: is_gt ? "min" : "max"
+    )
+  end
+end

docs/images/data-time-picker-range.png

@@ -9,6 +9,8 @@
                        fields: [:name],
                        minimum_input_length: 0
 
+  filter :created_at, as: :date_time_picker_filter
+
   index do
     selectable_column
     id_column
@@ -18,6 +20,7 @@
     attachment_column :attachment
     number_column :amount, as: :currency, unit: "$", separator: ","
     toggle_bool_column :active
+    column :created_at
     actions
   end
 

spec/dummy/app/admin/invoices.rb

@@ -0,0 +1,72 @@
+require 'rails_helper'
+
+describe "Date Time Picker Filter Input", type: :feature do
+  let(:now) { DateTime.new(1984, 6, 4, 9, 0, 0).in_time_zone }
+
+  before do
+    register_page(Invoice) do
+      config.sort_order = 'created_at_asc'
+
+      filter :created_at, as: :date_time_picker_filter
+
+      index do
+        column :created_at
+      end
+    end
+
+    5.times { |i| Invoice.create(id: i + 1, created_at: now + i.hours) }
+    visit admin_invoices_path
+  end
+
+  it "shows date time pickers", js: true do
+    expect(page).to have_css(".date-time-picker-input", count: 2)
+    expect(page).to have_css("#q_created_at_gteq", count: 1)
+    expect(page).to have_css("#q_created_at_lteq", count: 1)
+  end
+
+  context "setting min and max values" do
+    before do
+      find("#q_created_at_gteq").set("1984-06-04 10:00")
+      find("#q_created_at_lteq").set("1984-06-04 12:00")
+      click_filter_btn
+    end
+
+    it "shows filtered rows", js: true do
+      expect(page).to_not have_css("#invoice_5")
+      expect(page).to have_css("#invoice_4", count: 1)
+      expect(page).to have_css("#invoice_3", count: 1)
+      expect(page).to have_css("#invoice_2", count: 1)
+      expect(page).to_not have_css("#invoice_1")
+    end
+  end
+
+  context "setting min value only" do
+    before do
+      find("#q_created_at_gteq").set("1984-06-04 12:00")
+      click_filter_btn
+    end
+
+    it "shows filtered rows", js: true do
+      expect(page).to have_css("#invoice_5", count: 1)
+      expect(page).to have_css("#invoice_4", count: 1)
+      expect(page).not_to have_css("#invoice_3")
+      expect(page).not_to have_css("#invoice_2")
+      expect(page).not_to have_css("#invoice_1")
+    end
+  end
+
+  context "setting max value only" do
+    before do
+      find("#q_created_at_lteq").set("1984-06-04 12:00")
+      click_filter_btn
+    end
+
+    it "shows filtered rows", js: true do
+      expect(page).to_not have_css("#invoice_5")
+      expect(page).to have_css("#invoice_4", count: 1)
+      expect(page).to have_css("#invoice_3", count: 1)
+      expect(page).to have_css("#invoice_2", count: 1)
+      expect(page).to have_css("#invoice_1", count: 1)
+    end
+  end
+end

spec/features/inputs/date_time_picker_filter_input_spec.rb

@@ -6,9 +6,7 @@ def on_input_ctx(input_id, &block)
   end
 
   def click_filter_btn
-    within("#filters_sidebar_section") do
-      click_button("Filter")
-    end
+    page.execute_script("document.getElementsByClassName('filter_form')[0].submit()")
   end
 
   def expect_text(text)