From 73f55ae77643d1697e4e4827b632861863d60fee Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Sun, 7 Aug 2022 19:11:23 +0200 Subject: [PATCH] Implements daterangepicker for `/admin/orders` + update specs as well --- .../spree/admin/orders/_filters.html.haml | 9 ++++----- .../css/admin/components/date-picker.scss | 10 ---------- spec/support/features/datepicker_helper.rb | 13 +++++++++--- spec/system/admin/orders_spec.rb | 20 +++++++------------ 4 files changed, 21 insertions(+), 31 deletions(-) diff --git a/app/views/spree/admin/orders/_filters.html.haml b/app/views/spree/admin/orders/_filters.html.haml index b4db8dac72..5811ba9811 100644 --- a/app/views/spree/admin/orders/_filters.html.haml +++ b/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'} diff --git a/app/webpacker/css/admin/components/date-picker.scss b/app/webpacker/css/admin/components/date-picker.scss index 5296bd1f6a..a35b5a970e 100644 --- a/app/webpacker/css/admin/components/date-picker.scss +++ b/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; } diff --git a/spec/support/features/datepicker_helper.rb b/spec/support/features/datepicker_helper.rb index 97903ef5f2..b1894d8b5f 100644 --- a/spec/support/features/datepicker_helper.rb +++ b/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 diff --git a/spec/system/admin/orders_spec.rb b/spec/system/admin/orders_spec.rb index 15bb057012..723c0df433 100644 --- a/spec/system/admin/orders_spec.rb +++ b/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