From c45e120ff86277d8766e0f86bde9270a167807b3 Mon Sep 17 00:00:00 2001 From: Thierry Jet Date: Tue, 26 Oct 2021 14:33:02 +0200 Subject: [PATCH 1/8] Add a close button to datetimepicker. Close the popover when clicked. Not yet using translation --- app/assets/javascripts/admin/util.js.erb | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb index cc5f32f843..2a2da817bf 100644 --- a/app/assets/javascripts/admin/util.js.erb +++ b/app/assets/javascripts/admin/util.js.erb @@ -1,12 +1,21 @@ $(document).ready(function() { var onClickButtons = function(index, fp) { var date; + // Memorize index used for the 'Close' button + // (currently it has index of 1) + var closeButtonIndex = 1; switch (index) { case 0: date = new Date(); break; + case closeButtonIndex: + fp.close(); + break; + } + // Set the date unless clicked button was the 'Close' one + if (index != closeButtonIndex) { + fp.setDate(date, true); } - fp.setDate(date, true); } window.FLATPICKR_DATE_DEFAULT = { altInput: true, @@ -35,9 +44,14 @@ $(document).ready(function() { time_24hr: true, plugins: [ ShortcutButtonsPlugin({ - button: [{ - label: Spree.translations.now - }], + button: [ + { + label: Spree.translations.now + }, + { + label: "CLOSE" + } + ], label: "or", onClick: onClickButtons }), From 47e969222660cc579ab6d447b9a6d16f06a59353 Mon Sep 17 00:00:00 2001 From: Thierry Jet Date: Tue, 26 Oct 2021 14:36:16 +0200 Subject: [PATCH 2/8] Add a close button to datepicker. Close the popover when clicked. Not yet using translation --- app/assets/javascripts/admin/util.js.erb | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb index 2a2da817bf..8157219f8a 100644 --- a/app/assets/javascripts/admin/util.js.erb +++ b/app/assets/javascripts/admin/util.js.erb @@ -24,9 +24,14 @@ $(document).ready(function() { locale: I18n.base_locale, plugins: [ ShortcutButtonsPlugin({ - button: [{ - label: Spree.translations.today - }], + button: [ + { + label: Spree.translations.today + }, + { + label: "CLOSE" + } + ], label: "or", onClick: onClickButtons }), From 66f754267b7905c4c9e3823843b266f9e59ba682 Mon Sep 17 00:00:00 2001 From: Thierry Jet Date: Tue, 26 Oct 2021 14:40:42 +0200 Subject: [PATCH 3/8] Customize spacing for shortcut-buttons into flatpickr --- .../stylesheets/admin/plugins/flatpickr-customization.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss index e26fb0af97..d94b85df3d 100644 --- a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss +++ b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss @@ -60,3 +60,9 @@ $background-blue: #5498da; } // scss-lint:enable SelectorFormat + +// customization for shortcut-buttons +.shortcut-buttons-flatpickr-wrapper > .shortcut-buttons-flatpickr-buttons { + justify-content: space-between; + flex-grow: 1; +} From 5ebee9cd5f5c5fc621bcf9d5360c08b4ca3c8732 Mon Sep 17 00:00:00 2001 From: Thierry Jet Date: Tue, 26 Oct 2021 19:36:27 +0200 Subject: [PATCH 4/8] Translation stuff ready for Close button. Add close: key scoped spree.admin.date_picker in en.yml --- app/assets/javascripts/admin/util.js.erb | 4 ++-- app/views/spree/admin/shared/_translations.html.erb | 1 + config/locales/en.yml | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb index 8157219f8a..f06a5866d9 100644 --- a/app/assets/javascripts/admin/util.js.erb +++ b/app/assets/javascripts/admin/util.js.erb @@ -29,7 +29,7 @@ $(document).ready(function() { label: Spree.translations.today }, { - label: "CLOSE" + label: Spree.translations.close } ], label: "or", @@ -54,7 +54,7 @@ $(document).ready(function() { label: Spree.translations.now }, { - label: "CLOSE" + label: Spree.translations.close } ], label: "or", diff --git a/app/views/spree/admin/shared/_translations.html.erb b/app/views/spree/admin/shared/_translations.html.erb index ae1c510129..97eae43d00 100644 --- a/app/views/spree/admin/shared/_translations.html.erb +++ b/app/views/spree/admin/shared/_translations.html.erb @@ -8,6 +8,7 @@ :default => 'Y-m-d H:i'), :today => Spree.t('date_picker.today'), :now => Spree.t('date_picker.now'), + :close => Spree.t('date_picker.close'), :add => I18n.t(:add, scope: :actions), :are_you_sure_delete => Spree.t(:are_you_sure_delete), :bill_address => I18n.t(:bill_address), diff --git a/config/locales/en.yml b/config/locales/en.yml index f68aaf3ee2..21827e0a70 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -3867,6 +3867,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using flatpickr_datetime_format: "Y-m-d H:i" today: "Today" now: "Now" + close: "Close" orders: error_flash_for_unavailable_items: "An item in your cart has become unavailable. Please update the selected quantities." edit: From 41a7369b23dd1e6efb1e4cb823ad55ba7c140aae Mon Sep 17 00:00:00 2001 From: Thierry Jet Date: Tue, 26 Oct 2021 19:51:28 +0200 Subject: [PATCH 5/8] Add a test for datetimepicker close button usage --- spec/system/admin/order_cycles/list_spec.rb | 24 +++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/spec/system/admin/order_cycles/list_spec.rb b/spec/system/admin/order_cycles/list_spec.rb index c1766fec36..3cef1208eb 100644 --- a/spec/system/admin/order_cycles/list_spec.rb +++ b/spec/system/admin/order_cycles/list_spec.rb @@ -129,8 +129,8 @@ describe ' I18n.locale = :en end - context 'using datepickers' do - it "correctly opens the datepicker and changes the date field" do + context 'using datetimepickers' do + it "correctly opens the datetimepicker and changes the date field" do login_as_admin_and_visit admin_order_cycles_path within("tr.order-cycle-#{oc_pt.id}") do @@ -147,6 +147,26 @@ describe ' expect(find('input.datetimepicker', match: :first).value).to eq '2012-01-30 00:00' end end + + it "correctly opens the datetimepicker and closes it using the last button (the 'Close' one)" do + login_as_admin_and_visit admin_order_cycles_path + + # Opens a datetimepicker + within("tr.order-cycle-#{oc_pt.id}") do + find('input.datetimepicker', match: :first).click + end + + # Looks for the close button and click it + within(".flatpickr-calendar.open") do + expect(page).to have_selector '.shortcut-buttons-flatpickr-buttons' + fp_buttons_count = find_all('.shortcut-buttons-flatpickr-button').count + find(".shortcut-buttons-flatpickr-buttons > button:nth-child(#{fp_buttons_count})").click + end + + # Should no more have opened flatpickr + expect(page).not_to have_selector '.flatpickr-calendar.open' + + end end end From 8eff2716ed1a6579d39c4f7bbd4e097dea07cf42 Mon Sep 17 00:00:00 2001 From: Thierry Jet Date: Tue, 26 Oct 2021 20:46:12 +0200 Subject: [PATCH 6/8] Modify choose_today_from_datepicker to avoid possible ambiguous match with the find --- spec/support/features/datepicker_helper.rb | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/spec/support/features/datepicker_helper.rb b/spec/support/features/datepicker_helper.rb index dbe9e7d1f6..6bb8a2c6b2 100644 --- a/spec/support/features/datepicker_helper.rb +++ b/spec/support/features/datepicker_helper.rb @@ -4,7 +4,8 @@ module Features module DatepickerHelper def choose_today_from_datepicker within(".flatpickr-calendar.open") do - find('.shortcut-buttons-flatpickr-button').click + # Now that we have added the Close button, find the first button to avoid any ambiguous match + find('.shortcut-buttons-flatpickr-buttons > button:nth-child(1)').click end end From c8340d5c3b311ed842e9aef1e27ef516dda14f92 Mon Sep 17 00:00:00 2001 From: Thierry Jet Date: Tue, 26 Oct 2021 20:01:50 +0200 Subject: [PATCH 7/8] Add flatpickr_spec.rb to spec/system and add tests for datepicker in it. Use nth-last-child in tests. Modify test for datetimepicker to also select a datetime before closing and then check the value is correct after close occurred --- spec/system/admin/order_cycles/list_spec.rb | 12 ++++-- spec/system/flatpickr_spec.rb | 47 +++++++++++++++++++++ 2 files changed, 56 insertions(+), 3 deletions(-) create mode 100644 spec/system/flatpickr_spec.rb diff --git a/spec/system/admin/order_cycles/list_spec.rb b/spec/system/admin/order_cycles/list_spec.rb index 3cef1208eb..812e8db49f 100644 --- a/spec/system/admin/order_cycles/list_spec.rb +++ b/spec/system/admin/order_cycles/list_spec.rb @@ -150,22 +150,28 @@ describe ' it "correctly opens the datetimepicker and closes it using the last button (the 'Close' one)" do login_as_admin_and_visit admin_order_cycles_path + test_value = Time.parse("2022-12-22 00:00") # Opens a datetimepicker within("tr.order-cycle-#{oc_pt.id}") do find('input.datetimepicker', match: :first).click end - # Looks for the close button and click it + # Sets the value to test_value then looks for the close button and click it within(".flatpickr-calendar.open") do expect(page).to have_selector '.shortcut-buttons-flatpickr-buttons' - fp_buttons_count = find_all('.shortcut-buttons-flatpickr-button').count - find(".shortcut-buttons-flatpickr-buttons > button:nth-child(#{fp_buttons_count})").click + select_datetime_from_datepicker test_value + find(".shortcut-buttons-flatpickr-buttons > button:nth-last-child(1)").click end # Should no more have opened flatpickr expect(page).not_to have_selector '.flatpickr-calendar.open' + # Check the value is correct + within("tr.order-cycle-#{oc_pt.id}") do + expect(find('input.datetimepicker', match: :first).value).to eq test_value.to_datetime.strftime("%Y-%m-%d %H:%M") + end + end end end diff --git a/spec/system/flatpickr_spec.rb b/spec/system/flatpickr_spec.rb new file mode 100644 index 0000000000..74a863414c --- /dev/null +++ b/spec/system/flatpickr_spec.rb @@ -0,0 +1,47 @@ +# frozen_string_literal: true + +require "system_helper" + +describe "Test Flatpickr", js: true do + include AuthenticationHelper + include WebHelper + + context "orders" do + it "opens the datepicker and closes it using the last button (the 'Close' one)" do + login_as_admin_and_visit 'admin/orders' + open_datepicker('#q_completed_at_gteq') + # Looks for the close button and click it + within(".flatpickr-calendar.open") do + expect(page).to have_selector '.shortcut-buttons-flatpickr-buttons' + find(".shortcut-buttons-flatpickr-buttons > button:nth-last-child(1)").click + end + # Should no more have opened flatpickr + expect(page).not_to have_selector '.flatpickr-calendar.open' + end + it "opens the datepicker and sets date to today" do + login_as_admin_and_visit 'admin/orders' + open_datepicker('#q_completed_at_gteq') + choose_today_from_datepicker + check_fielddate('#q_completed_at_gteq', Date.today()) + end + it "opens the datepicker and closes it by clicking outside" do + login_as_admin_and_visit 'admin/orders' + open_datepicker('#q_completed_at_gteq') + find("#admin-menu").click + # Should no more have opened flatpickr + expect(page).not_to have_selector '.flatpickr-calendar.open' + end + end + +private + def open_datepicker(field) + # Opens a datepicker + find(field).click + # Should have opened flatpickr + expect(page).to have_selector '.flatpickr-calendar.open' + end + def check_fielddate(field, date) + # Check the value is correct + expect(find(field, match: :first).value).to eq date.to_datetime.strftime("%Y-%m-%d") + end +end From fd5e34bf5c11ebf0bd7e76514eee626f752160a2 Mon Sep 17 00:00:00 2001 From: Thierry Jet Date: Wed, 3 Nov 2021 09:57:23 +0100 Subject: [PATCH 8/8] Few changes in test files for date(time)picker in order to make tests more readable --- spec/support/features/datepicker_helper.rb | 3 +-- spec/system/admin/order_cycles/list_spec.rb | 2 +- spec/system/flatpickr_spec.rb | 10 +++++++--- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/spec/support/features/datepicker_helper.rb b/spec/support/features/datepicker_helper.rb index 6bb8a2c6b2..4ac09f4a64 100644 --- a/spec/support/features/datepicker_helper.rb +++ b/spec/support/features/datepicker_helper.rb @@ -4,8 +4,7 @@ module Features module DatepickerHelper def choose_today_from_datepicker within(".flatpickr-calendar.open") do - # Now that we have added the Close button, find the first button to avoid any ambiguous match - find('.shortcut-buttons-flatpickr-buttons > button:nth-child(1)').click + find("button", text: "TODAY").click end end diff --git a/spec/system/admin/order_cycles/list_spec.rb b/spec/system/admin/order_cycles/list_spec.rb index 812e8db49f..2af66cd68c 100644 --- a/spec/system/admin/order_cycles/list_spec.rb +++ b/spec/system/admin/order_cycles/list_spec.rb @@ -161,7 +161,7 @@ describe ' within(".flatpickr-calendar.open") do expect(page).to have_selector '.shortcut-buttons-flatpickr-buttons' select_datetime_from_datepicker test_value - find(".shortcut-buttons-flatpickr-buttons > button:nth-last-child(1)").click + find("button", text: "CLOSE").click end # Should no more have opened flatpickr diff --git a/spec/system/flatpickr_spec.rb b/spec/system/flatpickr_spec.rb index 74a863414c..11e1165e7e 100644 --- a/spec/system/flatpickr_spec.rb +++ b/spec/system/flatpickr_spec.rb @@ -7,23 +7,25 @@ describe "Test Flatpickr", js: true do include WebHelper context "orders" do - it "opens the datepicker and closes it using the last button (the 'Close' one)" do + it "opens the datepicker and closes it using the 'CLOSE' button" do login_as_admin_and_visit 'admin/orders' open_datepicker('#q_completed_at_gteq') # Looks for the close button and click it within(".flatpickr-calendar.open") do expect(page).to have_selector '.shortcut-buttons-flatpickr-buttons' - find(".shortcut-buttons-flatpickr-buttons > button:nth-last-child(1)").click + find("button", text: "CLOSE").click end # Should no more have opened flatpickr expect(page).not_to have_selector '.flatpickr-calendar.open' end + it "opens the datepicker and sets date to today" do login_as_admin_and_visit 'admin/orders' open_datepicker('#q_completed_at_gteq') choose_today_from_datepicker check_fielddate('#q_completed_at_gteq', Date.today()) end + it "opens the datepicker and closes it by clicking outside" do login_as_admin_and_visit 'admin/orders' open_datepicker('#q_completed_at_gteq') @@ -33,13 +35,15 @@ describe "Test Flatpickr", js: true do end end -private + private + def open_datepicker(field) # Opens a datepicker find(field).click # Should have opened flatpickr expect(page).to have_selector '.flatpickr-calendar.open' end + def check_fielddate(field, date) # Check the value is correct expect(find(field, match: :first).value).to eq date.to_datetime.strftime("%Y-%m-%d")