diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb index cc5f32f843..f06a5866d9 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, @@ -15,9 +24,14 @@ $(document).ready(function() { locale: I18n.base_locale, plugins: [ ShortcutButtonsPlugin({ - button: [{ - label: Spree.translations.today - }], + button: [ + { + label: Spree.translations.today + }, + { + label: Spree.translations.close + } + ], label: "or", onClick: onClickButtons }), @@ -35,9 +49,14 @@ $(document).ready(function() { time_24hr: true, plugins: [ ShortcutButtonsPlugin({ - button: [{ - label: Spree.translations.now - }], + button: [ + { + label: Spree.translations.now + }, + { + label: Spree.translations.close + } + ], label: "or", onClick: onClickButtons }), 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; +} 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 873ea1b811..c84c009ce4 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: diff --git a/spec/support/features/datepicker_helper.rb b/spec/support/features/datepicker_helper.rb index dbe9e7d1f6..4ac09f4a64 100644 --- a/spec/support/features/datepicker_helper.rb +++ b/spec/support/features/datepicker_helper.rb @@ -4,7 +4,7 @@ module Features module DatepickerHelper def choose_today_from_datepicker within(".flatpickr-calendar.open") do - find('.shortcut-buttons-flatpickr-button').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 c1766fec36..2af66cd68c 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,32 @@ 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 + 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 + + # 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' + select_datetime_from_datepicker test_value + find("button", text: "CLOSE").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..11e1165e7e --- /dev/null +++ b/spec/system/flatpickr_spec.rb @@ -0,0 +1,51 @@ +# 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 '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("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') + 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