Merge pull request #8418 from KombiCode/7706-add-close-button-to-flatpickr

7706 add close button to flatpickr

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
         }),

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;
+}

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),

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:

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
 

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
 

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