Implements daterangepicker for /admin/orders

+ update specs as well

app/views/spree/admin/orders/_filters.html.haml

@@ -3,11 +3,10 @@
     .field-block.alpha.four.columns
       .date-range-filter.field
         = label_tag nil, t(:date_range)
-        .date-range-fields
-          = text_field_tag "q[completed_at_gteq]", nil, class: 'datepicker', 'ng-model' => 'q.completed_at_gteq', :placeholder => t(:start), data: { controller: "flatpickr", action: "flatpickr_clear@window->flatpickr#clear" }
-          %span.range-divider
-            %i.icon-arrow-right
-          = text_field_tag "q[completed_at_lteq]", nil, class: 'datepicker', 'ng-model' => 'q.completed_at_lteq', :placeholder => t(:stop), data: { controller: "flatpickr", action: "flatpickr_clear@window->flatpickr#clear"  }
+        .date-range-fields{ data: { controller: "flatpickr", "flatpickr-mode-value": "range", "flatpickr-default-date": "{{ [q.completed_at_gteq, q.completed_at_lteq] }}" } }
+          = text_field_tag nil, nil, class: "datepicker", data: { "flatpickr-target": "instance", action: "flatpickr_clear@window->flatpickr#clear" }
+          = text_field_tag "q[completed_at_gteq]", nil, "ng-model": "q.completed_at_gteq", data: { "flatpickr-target": "start" }, style: "display: none"
+          = text_field_tag "q[completed_at_lteq]", nil, "ng-model": "q.completed_at_lteq", data: { "flatpickr-target": "end" }, style: "display: none"
       .field
         = label_tag nil, t(:status)
         %select2-watch-ng-model{'ng-model': 'q.state_eq'}

app/webpacker/css/admin/components/date-picker.scss

@@ -1,15 +1,5 @@
 // scss-lint:disable QualifyingElement
 
-.date-range-filter {
-  .range-divider {
-    padding: 0;
-    margin-left: 5px;
-  }
-  input.datepicker {
-    width: 96px !important;
-  }
-}
-
 input.datetimepicker {
   min-width: 12.9em;
 }

spec/support/features/datepicker_helper.rb

@@ -8,8 +8,15 @@ module Features
       end
     end
 
-    def select_date_from_datepicker(date)
-      navigate_datepicker_to_month date
+    def select_dates_from_daterangepicker(from, to)
+      # Once the datepicker is open,
+      # it simply consist to select the 'from' date and then the 'to' date
+      select_date_from_datepicker(from)
+      select_date_from_datepicker(to, from)
+    end
+
+    def select_date_from_datepicker(date, reference_date = Time.zone.today)
+      navigate_datepicker_to_month(date, reference_date)
       find('.flatpickr-calendar.open .flatpickr-days .flatpickr-day:not(.prevMonthDay)',
            text: date.strftime("%e").to_s.strip, exact_text: true, match: :first).click
     end
@@ -22,7 +29,7 @@ module Features
       find(".flatpickr-calendar.open .flatpickr-minute").set datetime.strftime("%M").to_s.strip
     end
 
-    def navigate_datepicker_to_month(date, reference_date = Time.zone.today)
+    def navigate_datepicker_to_month(date, reference_date)
       month_and_year = date.strftime("%-m %Y")
 
       until datepicker_month_and_year == month_and_year.upcase

spec/system/admin/orders_spec.rb

@@ -90,10 +90,8 @@ describe '
     it "filter by complete date" do
       login_as_admin_and_visit 'admin/orders'
 
-      find('#q_completed_at_gteq').click
-      select_date_from_datepicker order3.completed_at.yesterday
-      find('#q_completed_at_lteq').click
-      select_date_from_datepicker order4.completed_at.tomorrow
+      find("input.datepicker").click
+      select_dates_from_daterangepicker(order3.completed_at.yesterday, order4.completed_at.tomorrow)
 
       page.find('.filter-actions .button.icon-search').click
 
@@ -218,7 +216,7 @@ describe '
     end
   end
 
-  context "save the filter params" do
+  context "save the filter params", js: true do
     let!(:shipping_method) { create(:shipping_method, name: "UPS Ground") }
     let!(:user) { create(:user, email: 'an@email.com') }
     let!(:order) do
@@ -246,10 +244,8 @@ describe '
       fill_in "Email", with: user.email
       fill_in "First name begins with", with: "J"
       fill_in "Last name begins with", with: "D"
-      find('#q_completed_at_gteq').click
-      select_date_from_datepicker Time.zone.at(1.week.ago)
-      find('#q_completed_at_lteq').click
-      select_date_from_datepicker Time.zone.now.tomorrow
+      find("input.datepicker").click
+      select_dates_from_daterangepicker(Time.zone.at(1.week.ago), Time.zone.now.tomorrow)
 
       page.find('a.icon-search').click
     end
@@ -267,8 +263,7 @@ describe '
       expect(find_field("Email").value).to eq user.email
       expect(find_field("First name begins with").value).to eq "J"
       expect(find_field("Last name begins with").value).to eq "D"
-      expect(find("#q_completed_at_gteq").value).to eq 1.week.ago.strftime("%Y-%m-%d")
-      expect(find("#q_completed_at_lteq").value).to eq Time.zone.now.tomorrow.strftime("%Y-%m-%d")
+      expect(find("input.datepicker").value).to eq "#{1.week.ago.strftime('%Y-%m-%d')} to #{Time.zone.now.tomorrow.strftime('%Y-%m-%d')}"
     end
 
     it "and clear filters" do
@@ -282,8 +277,7 @@ describe '
       expect(find_field("Email").value).to be_empty
       expect(find_field("First name begins with").value).to be_empty
       expect(find_field("Last name begins with").value).to be_empty
-      expect(find("#q_completed_at_gteq").value).to be_empty
-      expect(find("#q_completed_at_lteq").value).to be_empty
+      expect(find("input.datepicker").value).to be_empty
     end
   end
 end