From 792d6d95697fa35bc8d9930fbc5beec405dcc835 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 5 Aug 2022 14:55:42 +0200 Subject: [PATCH 01/21] Add stimulus flatpickr Update yarn.lock --- package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index b33500daa3..042a7c11b1 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "select2": "^4.0.13", "shortcut-buttons-flatpickr": "^0.4.0", "stimulus": "^3.0.1", + "stimulus-flatpickr": "^1.4.0", "tom-select": "^2.0.0", "webpack": "~4", "webpack-cli": "~3" diff --git a/yarn.lock b/yarn.lock index d1482ba6cc..422fd00959 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11605,6 +11605,11 @@ static-extend@^0.1.1: resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow= +stimulus-flatpickr@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/stimulus-flatpickr/-/stimulus-flatpickr-1.4.0.tgz#a41071a3e69cfc50b7eaaacf356fc0ab1ab0543c" + integrity sha512-rcC/c9+E+f5W2kOjaaLShtf3i+p95ACqt+oGzSAgeuZh2YeIN8gW4EWO7h0STBLzSVPl6BjIfPWP7upMPavIVQ== + stimulus@^3.0.1: version "3.1.0" resolved "https://registry.yarnpkg.com/stimulus/-/stimulus-3.1.0.tgz#225298f1936f96b0eafa883b8b304266427912c3" From d73d6dcdb64e19f27b9d4d738a107dce8e3bbd30 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 5 Aug 2022 14:56:01 +0200 Subject: [PATCH 02/21] Do not import flatpickr via this require as now flatpickr is managed by yarn and should be imported when module need it, via import --- app/assets/javascripts/admin/all.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/javascripts/admin/all.js b/app/assets/javascripts/admin/all.js index 8eb5c1a59c..7aa6444552 100644 --- a/app/assets/javascripts/admin/all.js +++ b/app/assets/javascripts/admin/all.js @@ -23,7 +23,6 @@ //= require lodash.underscore.js // datetimepicker (fil, nb) -//= require flatpickr/dist/flatpickr.min //= require flatpickr/dist/l10n/ar //= require flatpickr/dist/l10n/cat //= require flatpickr/dist/l10n/cy From b1fd6d95418f514110ce75191d0d25e2f48a8d39 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 5 Aug 2022 15:33:27 +0200 Subject: [PATCH 03/21] Create the flatpickr date|datetime controller --- .../controllers/flatpickr_controller.js | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 app/webpacker/controllers/flatpickr_controller.js diff --git a/app/webpacker/controllers/flatpickr_controller.js b/app/webpacker/controllers/flatpickr_controller.js new file mode 100644 index 0000000000..5fbef1f87d --- /dev/null +++ b/app/webpacker/controllers/flatpickr_controller.js @@ -0,0 +1,59 @@ +// import Flatpickr +import Flatpickr from "stimulus-flatpickr"; + +export default class extends Flatpickr { + static values = { enableTime: Boolean }; + + initialize() { + const datetimepicker = this.enableTimeValue == true; + // sets your language (you can also set some global setting for all time pickers) + this.config = { + altInput: true, + altFormat: datetimepicker + ? Spree.translations.flatpickr_datetime_format + : Spree.translations.flatpickr_date_format, + dateFormat: datetimepicker ? "Y-m-d H:i" : "Y-m-d", + enableTime: datetimepicker, + time_24hr: datetimepicker, + locale: I18n.base_locale, + plugins: [ + ShortcutButtonsPlugin({ + button: [ + { + label: datetimepicker + ? Spree.translations.now + : Spree.translations.today, + }, + { + label: Spree.translations.close, + }, + ], + label: "or", + onClick: this.onClickButtons, + }), + labelPlugin({}), + ], + }; + } + + // private + + onClickButtons = (index, fp) => { + let date; + // Memorize index used for the 'Close' button + // (currently it has index of 1) + const 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); + } + }; +} From 6b7030a6a80efa06ff3c5eb0cb2effb6868b0e19 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 5 Aug 2022 15:30:12 +0200 Subject: [PATCH 04/21] Don't use directive, but the flatpickr stimulusjs controller --- app/views/admin/subscriptions/_details.html.haml | 4 ++-- app/views/spree/admin/orders/_filters.html.haml | 4 ++-- app/views/spree/admin/orders/bulk_management.html.haml | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/views/admin/subscriptions/_details.html.haml b/app/views/admin/subscriptions/_details.html.haml index 675c7671a9..9015d16024 100644 --- a/app/views/admin/subscriptions/_details.html.haml +++ b/app/views/admin/subscriptions/_details.html.haml @@ -34,11 +34,11 @@ .row .seven.columns.alpha.field %label{ for: 'begins_at'}= t('admin.begins_at') - %input.fullwidth#begins_at{ name: 'begins_at', type: 'text', placeholder: "#{t('.begins_at_placeholder')}", datepicker: 'subscription.begins_at', required: true, ng: { model: 'subscription.begins_at' } } + %input.fullwidth#begins_at{ name: 'begins_at', type: 'text', placeholder: "#{t('.begins_at_placeholder')}", data: { controller: "flatpickr" }, required: true, ng: { model: 'subscription.begins_at' } } .error{ ng: { show: 'subscription_form.$submitted && subscription_details_form.begins_at.$error.required' } }= t(:error_required) .error{ ng: { repeat: 'error in errors.begins_at', show: 'subscription_details_form.begins_at.$pristine' } } {{ error }} .two.columns   .seven.columns.omega.field %label{ for: 'ends_at'}= t('admin.ends_at') - %input.fullwidth#ends_at{ name: 'ends_at', type: 'text', placeholder: "#{t('.ends_at_placeholder')}", datepicker: 'subscription.begins_at', ng: { model: 'subscription.ends_at' } } + %input.fullwidth#ends_at{ name: 'ends_at', type: 'text', placeholder: "#{t('.ends_at_placeholder')}", data: { controller: "flatpickr" }, ng: { model: 'subscription.ends_at' } } .error{ ng: { repeat: 'error in errors.ends_at', show: 'subscription_details_form.ends_at.$pristine' } } {{ error }} diff --git a/app/views/spree/admin/orders/_filters.html.haml b/app/views/spree/admin/orders/_filters.html.haml index 8a789b8c64..8c3cf2a9a6 100644 --- a/app/views/spree/admin/orders/_filters.html.haml +++ b/app/views/spree/admin/orders/_filters.html.haml @@ -4,10 +4,10 @@ .date-range-filter.field = label_tag nil, t(:date_range) .date-range-fields - = text_field_tag "q[completed_at_gteq]", nil, class: 'datepicker', datepicker: 'q.completed_at_gteq', 'ng-model' => 'q.completed_at_gteq', :placeholder => t(:start) + = text_field_tag "q[completed_at_gteq]", nil, class: 'datepicker', 'ng-model' => 'q.completed_at_gteq', :placeholder => t(:start), data: { controller: "flatpickr" } %span.range-divider %i.icon-arrow-right - = text_field_tag "q[completed_at_lteq]", nil, class: 'datepicker', datepicker: 'q.completed_at_lteq', 'ng-model' => 'q.completed_at_lteq', :placeholder => t(:stop) + = text_field_tag "q[completed_at_lteq]", nil, class: 'datepicker', 'ng-model' => 'q.completed_at_lteq', :placeholder => t(:stop), data: { controller: "flatpickr" } .field = label_tag nil, t(:status) %select2-watch-ng-model{'ng-model': 'q.state_eq'} diff --git a/app/views/spree/admin/orders/bulk_management.html.haml b/app/views/spree/admin/orders/bulk_management.html.haml index 570500e68f..aef3aabccb 100644 --- a/app/views/spree/admin/orders/bulk_management.html.haml +++ b/app/views/spree/admin/orders/bulk_management.html.haml @@ -21,12 +21,12 @@ %label{ :for => 'start_date_filter' } = t("admin.start_date") %br - %input.fullwidth.datepicker{ :type => "text", :id => 'start_date_filter', 'ng-model' => 'startDate', 'datepicker' => "startDate", 'confirm-change' => "confirmRefresh()", 'ng-change' => 'refreshData()', 'ng-model-options' => '{ debounce: 1000 }' } + %input.fullwidth.datepicker{ :type => "text", :id => 'start_date_filter', 'ng-model' => 'startDate', data: { controller: "flatpickr" }, 'confirm-change' => "confirmRefresh()", 'ng-change' => 'refreshData()', 'ng-model-options' => '{ debounce: 1000 }' } .date_filter{ :class => "two columns" } %label{ :for => 'end_date_filter' } = t("admin.end_date") %br - %input.fullwidth.datepicker{ :type => "text", :id => 'end_date_filter', 'ng-model' => 'endDate', 'datepicker' => "endDate", 'confirm-change' => "confirmRefresh()", 'ng-change' => 'refreshData()', 'ng-model-options' => '{ debounce: 1000 }' } + %input.fullwidth.datepicker{ :type => "text", :id => 'end_date_filter', 'ng-model' => 'endDate', data: { controller: "flatpickr" }, 'confirm-change' => "confirmRefresh()", 'ng-change' => 'refreshData()', 'ng-model-options' => '{ debounce: 1000 }' } .one.column   .filter_select{ :class => "three columns" } %label{ :for => 'supplier_filter' } From c6332ab306a7759cfbcd427321328ca96be79888 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 5 Aug 2022 15:34:05 +0200 Subject: [PATCH 05/21] Remove datepicker instance --- .../admin/utils/directives/date_picker.js.coffee | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 app/assets/javascripts/admin/utils/directives/date_picker.js.coffee diff --git a/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee b/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee deleted file mode 100644 index 6645c8c620..0000000000 --- a/app/assets/javascripts/admin/utils/directives/date_picker.js.coffee +++ /dev/null @@ -1,14 +0,0 @@ -angular.module("admin.utils").directive "datepicker", ($window, $timeout) -> - require: "ngModel" - link: (scope, element, attrs, ngModel) -> - $timeout -> - flapickrInstance = flatpickr(element, Object.assign( - {}, - $window.FLATPICKR_DATE_DEFAULT, { - onOpen: (selectedDates, dateStr, instance) -> - instance.setDate(ngModel.$modelValue) - } - )); - ngModel.$render = () -> - newValue = ngModel.$viewValue; - flapickrInstance?.setDate(newValue) From 5c83a3277e452c51e11a4580c1b2d3592a5db5d2 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 5 Aug 2022 15:34:50 +0200 Subject: [PATCH 06/21] Replace datetimepicker by flatpickr stimulus controller --- app/views/admin/order_cycles/_name_and_timing_form.html.haml | 4 ++-- app/views/admin/order_cycles/_row.html.haml | 4 ++-- app/views/admin/reports/_date_range_form.html.haml | 4 ++-- app/views/admin/reports/filters/_xero_invoices.html.haml | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/views/admin/order_cycles/_name_and_timing_form.html.haml b/app/views/admin/order_cycles/_name_and_timing_form.html.haml index 2548ba3843..172a5763e2 100644 --- a/app/views/admin/order_cycles/_name_and_timing_form.html.haml +++ b/app/views/admin/order_cycles/_name_and_timing_form.html.haml @@ -11,7 +11,7 @@ = f.label :orders_open_at, t('.orders_open') .omega.six.columns.fullwidth_inputs - if viewing_as_coordinator_of?(@order_cycle) - = f.text_field :orders_open_at, 'datetimepicker' => 'order_cycle.orders_open_at', 'ng-model' => 'order_cycle.orders_open_at', 'ng-if' => 'loaded()', 'change-warning' => 'order_cycle', class: "datetimepicker" + = f.text_field :orders_open_at, data: { controller: "flatpickr", "flatpickr-enable-time-value": true }, 'ng-model' => 'order_cycle.orders_open_at', 'ng-if' => 'loaded()', 'change-warning' => 'order_cycle', class: "datetimepicker" - else {{ order_cycle.orders_open_at }} @@ -24,7 +24,7 @@ = f.label :orders_close, t('.orders_close') .six.columns.omega.fullwidth_inputs - if viewing_as_coordinator_of?(@order_cycle) - = f.text_field :orders_close_at, 'datetimepicker' => 'order_cycle.orders_close_at', 'ng-model' => 'order_cycle.orders_close_at', 'ng-if' => 'loaded()', 'change-warning' => 'order_cycle', class: "datetimepicker" + = f.text_field :orders_close_at, data: { controller: "flatpickr", "flatpickr-enable-time-value": true }, 'ng-model' => 'order_cycle.orders_close_at', 'ng-if' => 'loaded()', 'change-warning' => 'order_cycle', class: "datetimepicker" - else {{ order_cycle.orders_close_at }} diff --git a/app/views/admin/order_cycles/_row.html.haml b/app/views/admin/order_cycles/_row.html.haml index 4636e07e5a..5a2e06dbb6 100644 --- a/app/views/admin/order_cycles/_row.html.haml +++ b/app/views/admin/order_cycles/_row.html.haml @@ -7,10 +7,10 @@ {{ schedule.name + ($last ? '' : ',') }} %span{ ng: { show: 'orderCycle.schedules.length == 0'}} None %td.orders_open_at{ ng: { show: 'columns.open.visible' } } - %input.datetimepicker{ id: 'oc{{::orderCycle.id}}_orders_open_at', name: 'oc{{::orderCycle.id}}[orders_open_at]', type: 'text', ng: { if: 'orderCycle.viewing_as_coordinator', model: 'orderCycle.orders_open_at' }, datetimepicker: 'orderCycle.orders_open_at', 'change-warning' => 'orderCycle' } + %input.datetimepicker{ id: 'oc{{::orderCycle.id}}_orders_open_at', name: 'oc{{::orderCycle.id}}[orders_open_at]', type: 'text', ng: { if: 'orderCycle.viewing_as_coordinator', model: 'orderCycle.orders_open_at' }, data: { controller: "flatpickr", "flatpickr-enable-time-value": true }, 'change-warning' => 'orderCycle' } %input{ id: 'oc{{::orderCycle.id}}_orders_open_at', name: 'oc{{::orderCycle.id}}[orders_open_at]', type: 'text', ng: { if: '!orderCycle.viewing_as_coordinator', model: 'orderCycle.orders_open_at'}, disabled: true } %td.orders_close_at{ ng: { show: 'columns.close.visible' } } - %input.datetimepicker{ id: 'oc{{::orderCycle.id}}_orders_close_at', name: 'oc{{::orderCycle.id}}[orders_close_at]', type: 'text', ng: { if: 'orderCycle.viewing_as_coordinator', model: 'orderCycle.orders_close_at' }, datetimepicker: 'orderCycle.orders_close_at', 'change-warning' => 'orderCycle' } + %input.datetimepicker{ id: 'oc{{::orderCycle.id}}_orders_close_at', name: 'oc{{::orderCycle.id}}[orders_close_at]', type: 'text', ng: { if: 'orderCycle.viewing_as_coordinator', model: 'orderCycle.orders_close_at' }, data: { controller: "flatpickr", "flatpickr-enable-time-value": true }, 'change-warning' => 'orderCycle' } %input{ id: 'oc{{::orderCycle.id}}_orders_close_at', name: 'oc{{::orderCycle.id}}[orders_close_at]', type: 'text', ng: { if: '!orderCycle.viewing_as_coordinator', model: 'orderCycle.orders_close_at'}, disabled: true } - unless simple_index diff --git a/app/views/admin/reports/_date_range_form.html.haml b/app/views/admin/reports/_date_range_form.html.haml index 34bd30ec84..0bf6fe70ef 100644 --- a/app/views/admin/reports/_date_range_form.html.haml +++ b/app/views/admin/reports/_date_range_form.html.haml @@ -4,7 +4,7 @@ .row.date-range-filter .alpha.two.columns= label_tag nil, t(:date_range) .omega.fourteen.columns - = f.text_field "#{field}_gt", :class => 'datetimepicker datepicker-from', :placeholder => t(:start) + = f.text_field "#{field}_gt", :class => 'datetimepicker datepicker-from', :placeholder => t(:start), data: { controller: "flatpickr", "flatpickr-enable-time-value": true } %span.range-divider %i.icon-arrow-right - = f.text_field "#{field}_lt", :class => 'datetimepicker datepicker-to', :placeholder => t(:stop) + = f.text_field "#{field}_lt", :class => 'datetimepicker datepicker-to', :placeholder => t(:stop), data: { controller: "flatpickr", "flatpickr-enable-time-value": true } diff --git a/app/views/admin/reports/filters/_xero_invoices.html.haml b/app/views/admin/reports/filters/_xero_invoices.html.haml index d7cc558445..50bf6642f2 100644 --- a/app/views/admin/reports/filters/_xero_invoices.html.haml +++ b/app/views/admin/reports/filters/_xero_invoices.html.haml @@ -16,10 +16,10 @@ .fourteen.columns.omega= number_field_tag :initial_invoice_number, params[:initial_invoice_number] .row .two.columns.alpha= label_tag :invoice_date, t(:invoice_date) - .fourteen.columns.omega= text_field_tag :invoice_date, params[:invoice_date], class: 'datetimepicker' + .fourteen.columns.omega= text_field_tag :invoice_date, params[:invoice_date], class: 'datetimepicker', data: { controller: "flatpickr", "flatpickr-enable-time-value": true } .row .two.columns.alpha= label_tag :due_date, t(:due_date) - .fourteen.columns.omega= text_field_tag :due_date, params[:due_date], class: 'datetimepicker' + .fourteen.columns.omega= text_field_tag :due_date, params[:due_date], class: 'datetimepicker', data: { controller: "flatpickr", "flatpickr-enable-time-value": true } .row .two.columns.alpha= label_tag :account_code, t(:account_code) .fourteen.columns.omega= text_field_tag :account_code, params[:account_code] From fb0d922d736c47ce812d13178c8a8f8280d6ece3 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 5 Aug 2022 15:34:23 +0200 Subject: [PATCH 07/21] Remove datetimepicker directive + default values --- .../order_cycles/order_cycles.js.erb.coffee | 17 ----- app/assets/javascripts/admin/util.js.erb | 66 ------------------- 2 files changed, 83 deletions(-) diff --git a/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee b/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee index 9241517262..eef4dc44dc 100644 --- a/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee +++ b/app/assets/javascripts/admin/order_cycles/order_cycles.js.erb.coffee @@ -1,21 +1,4 @@ angular.module('admin.orderCycles', ['ngTagsInput', 'admin.indexUtils', 'admin.enterprises']) - .directive 'datetimepicker', ($timeout, $parse) -> - require: "ngModel" - link: (scope, element, attrs, ngModel) -> - $timeout -> - fp = flatpickr(element, Object.assign({}, - window.FLATPICKR_DATETIME_DEFAULT, { - onOpen: (selectedDates, dateStr, instance) -> - instance.setDate(ngModel.$modelValue) - instance.input.dispatchEvent(new Event('focus', { bubbles: true })); - })); - fp.minuteElement.addEventListener "keyup", (e) -> - if !isNaN(event.target.value) - fp.setDate(fp.selectedDates[0].setMinutes(e.target.value), true) - fp.hourElement.addEventListener "keyup", (e) -> - if !isNaN(event.target.value) - fp.setDate(fp.selectedDates[0].setHours(e.target.value), true) - .directive 'ofnOnChange', -> (scope, element, attrs) -> element.bind 'change', -> diff --git a/app/assets/javascripts/admin/util.js.erb b/app/assets/javascripts/admin/util.js.erb index f06a5866d9..5da1fe404a 100644 --- a/app/assets/javascripts/admin/util.js.erb +++ b/app/assets/javascripts/admin/util.js.erb @@ -1,70 +1,4 @@ $(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); - } - } - window.FLATPICKR_DATE_DEFAULT = { - altInput: true, - altFormat: Spree.translations.flatpickr_date_format, - dateFormat: "Y-m-d", - locale: I18n.base_locale, - plugins: [ - ShortcutButtonsPlugin({ - button: [ - { - label: Spree.translations.today - }, - { - label: Spree.translations.close - } - ], - label: "or", - onClick: onClickButtons - }), - labelPlugin({}) - ] - } - window.FLATPICKR_DATETIME_DEFAULT = Object.assign( - {}, - window.FLATPICKR_DATE_DEFAULT, - { - altInput: true, - altFormat: Spree.translations.flatpickr_datetime_format, - dateFormat: "Y-m-d H:i", - enableTime: true, - time_24hr: true, - plugins: [ - ShortcutButtonsPlugin({ - button: [ - { - label: Spree.translations.now - }, - { - label: Spree.translations.close - } - ], - label: "or", - onClick: onClickButtons - }), - labelPlugin({}) - ] - } - ); - flatpickr(".datetimepicker", window.FLATPICKR_DATETIME_DEFAULT); $('a.close').click(function(event){ event.preventDefault(); $(this).parent().slideUp(250); From c3a7acf9ad27d5a1eeb2e52d85a39f42f45b8a6b Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 5 Aug 2022 16:17:41 +0200 Subject: [PATCH 08/21] import locale --- app/assets/javascripts/admin/all.js | 13 --------- .../controllers/flatpickr_controller.js | 29 ++++++++++++++++++- 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/admin/all.js b/app/assets/javascripts/admin/all.js index 7aa6444552..abfd7e3741 100644 --- a/app/assets/javascripts/admin/all.js +++ b/app/assets/javascripts/admin/all.js @@ -23,19 +23,6 @@ //= require lodash.underscore.js // datetimepicker (fil, nb) -//= require flatpickr/dist/l10n/ar -//= require flatpickr/dist/l10n/cat -//= require flatpickr/dist/l10n/cy -//= require flatpickr/dist/l10n/de -//= require flatpickr/dist/l10n/es -//= require flatpickr/dist/l10n/fr -//= require flatpickr/dist/l10n/it -//= require flatpickr/dist/l10n/nl -//= require flatpickr/dist/l10n/pl -//= require flatpickr/dist/l10n/pt -//= require flatpickr/dist/l10n/ru -//= require flatpickr/dist/l10n/sv -//= require flatpickr/dist/l10n/tr //= require shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr.min //= require flatpickr/dist/plugins/labelPlugin/labelPlugin diff --git a/app/webpacker/controllers/flatpickr_controller.js b/app/webpacker/controllers/flatpickr_controller.js index 5fbef1f87d..8a4f3c693d 100644 --- a/app/webpacker/controllers/flatpickr_controller.js +++ b/app/webpacker/controllers/flatpickr_controller.js @@ -1,8 +1,35 @@ // import Flatpickr import Flatpickr from "stimulus-flatpickr"; - +import { ar } from "flatpickr/dist/l10n/ar"; +import { cat } from "flatpickr/dist/l10n/cat"; +import { cy } from "flatpickr/dist/l10n/cy"; +import { de } from "flatpickr/dist/l10n/de"; +import { fr } from "flatpickr/dist/l10n/fr"; +import { it } from "flatpickr/dist/l10n/it"; +import { nl } from "flatpickr/dist/l10n/nl"; +import { pl } from "flatpickr/dist/l10n/pl"; +import { pt } from "flatpickr/dist/l10n/pt"; +import { ru } from "flatpickr/dist/l10n/ru"; +import { sv } from "flatpickr/dist/l10n/sv"; +import { tr } from "flatpickr/dist/l10n/tr"; +import { en } from "flatpickr/dist/l10n/default.js"; export default class extends Flatpickr { static values = { enableTime: Boolean }; + locales = { + ar: ar, + cat: cat, + cy: cy, + de: de, + fr: fr, + it: it, + nl: nl, + pl: pl, + pt: pt, + ru: ru, + sv: sv, + tr: tr, + en: en, + }; initialize() { const datetimepicker = this.enableTimeValue == true; From ddfbcacd8311d2744f6792cb66fea4dd6dddde7a Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 5 Aug 2022 16:23:23 +0200 Subject: [PATCH 09/21] Include plugins --- app/assets/javascripts/admin/all.js | 4 ---- app/webpacker/controllers/flatpickr_controller.js | 3 +++ 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/admin/all.js b/app/assets/javascripts/admin/all.js index abfd7e3741..0f0643d388 100644 --- a/app/assets/javascripts/admin/all.js +++ b/app/assets/javascripts/admin/all.js @@ -22,10 +22,6 @@ //= require angular-rails-templates //= require lodash.underscore.js -// datetimepicker (fil, nb) -//= require shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr.min -//= require flatpickr/dist/plugins/labelPlugin/labelPlugin - // spree //= require admin/spree/spree //= require admin/spree/spree-select2 diff --git a/app/webpacker/controllers/flatpickr_controller.js b/app/webpacker/controllers/flatpickr_controller.js index 8a4f3c693d..46cfb8ea5d 100644 --- a/app/webpacker/controllers/flatpickr_controller.js +++ b/app/webpacker/controllers/flatpickr_controller.js @@ -13,6 +13,9 @@ import { ru } from "flatpickr/dist/l10n/ru"; import { sv } from "flatpickr/dist/l10n/sv"; import { tr } from "flatpickr/dist/l10n/tr"; import { en } from "flatpickr/dist/l10n/default.js"; +import ShortcutButtonsPlugin from "shortcut-buttons-flatpickr"; +import labelPlugin from "flatpickr/dist/plugins/labelPlugin/labelPlugin"; + export default class extends Flatpickr { static values = { enableTime: Boolean }; locales = { From 8942d3d17ba45e56248aacea78faf5755e4427e2 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 5 Aug 2022 16:44:51 +0200 Subject: [PATCH 10/21] Clear date on custom event `flatpickr_clear` --- .../admin/orders/controllers/orders_controller.js.coffee | 2 ++ app/views/spree/admin/orders/_filters.html.haml | 4 ++-- app/webpacker/controllers/flatpickr_controller.js | 4 ++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/admin/orders/controllers/orders_controller.js.coffee b/app/assets/javascripts/admin/orders/controllers/orders_controller.js.coffee index 3756a66266..95486ce19d 100644 --- a/app/assets/javascripts/admin/orders/controllers/orders_controller.js.coffee +++ b/app/assets/javascripts/admin/orders/controllers/orders_controller.js.coffee @@ -29,6 +29,8 @@ angular.module("admin.orders").controller "ordersCtrl", ($scope, $timeout, Reque $scope.q = { completed_at_not_null: true } + e = new CustomEvent("flatpickr_clear"); + window.dispatchEvent(e) $scope.clearFilters = () -> KeyValueMapStore.clearKeyValueMap() diff --git a/app/views/spree/admin/orders/_filters.html.haml b/app/views/spree/admin/orders/_filters.html.haml index 8c3cf2a9a6..b4db8dac72 100644 --- a/app/views/spree/admin/orders/_filters.html.haml +++ b/app/views/spree/admin/orders/_filters.html.haml @@ -4,10 +4,10 @@ .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" } + = 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" } + = 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" } .field = label_tag nil, t(:status) %select2-watch-ng-model{'ng-model': 'q.state_eq'} diff --git a/app/webpacker/controllers/flatpickr_controller.js b/app/webpacker/controllers/flatpickr_controller.js index 46cfb8ea5d..93779dacbd 100644 --- a/app/webpacker/controllers/flatpickr_controller.js +++ b/app/webpacker/controllers/flatpickr_controller.js @@ -66,6 +66,10 @@ export default class extends Flatpickr { }; } + clear(e) { + this.fp.setDate(null); + } + // private onClickButtons = (index, fp) => { From 19584ce6e0568cff55fc163f76b5596fc3a06b80 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Sun, 7 Aug 2022 18:40:14 +0200 Subject: [PATCH 11/21] flatpickr controller is now ready to be used in `range` mode --- .../controllers/flatpickr_controller.js | 73 ++++++++++++------- 1 file changed, 45 insertions(+), 28 deletions(-) diff --git a/app/webpacker/controllers/flatpickr_controller.js b/app/webpacker/controllers/flatpickr_controller.js index 93779dacbd..ca8e58b458 100644 --- a/app/webpacker/controllers/flatpickr_controller.js +++ b/app/webpacker/controllers/flatpickr_controller.js @@ -17,7 +17,8 @@ import ShortcutButtonsPlugin from "shortcut-buttons-flatpickr"; import labelPlugin from "flatpickr/dist/plugins/labelPlugin/labelPlugin"; export default class extends Flatpickr { - static values = { enableTime: Boolean }; + static values = { enableTime: Boolean, mode: String }; + static targets = ["start", "end"]; locales = { ar: ar, cat: cat, @@ -36,6 +37,7 @@ export default class extends Flatpickr { initialize() { const datetimepicker = this.enableTimeValue == true; + const mode = this.modeValue == "range" ? "range" : "single"; // sets your language (you can also set some global setting for all time pickers) this.config = { altInput: true, @@ -46,23 +48,8 @@ export default class extends Flatpickr { enableTime: datetimepicker, time_24hr: datetimepicker, locale: I18n.base_locale, - plugins: [ - ShortcutButtonsPlugin({ - button: [ - { - label: datetimepicker - ? Spree.translations.now - : Spree.translations.today, - }, - { - label: Spree.translations.close, - }, - ], - label: "or", - onClick: this.onClickButtons, - }), - labelPlugin({}), - ], + plugins: this.plugins(mode, datetimepicker), + mode, }; } @@ -70,24 +57,54 @@ export default class extends Flatpickr { this.fp.setDate(null); } + change(selectedDates, dateStr, instance) { + if (this.hasStartTarget && this.hasEndTarget) { + this.startTarget.value = selectedDates[0] + ? this.fp.formatDate(selectedDates[0], this.config.dateFormat) + : ""; + this.endTarget.value = selectedDates[1] + ? this.fp.formatDate(selectedDates[1], this.config.dateFormat) + : ""; + // Also, send event to be sure that ng-model is well updated + this.startTarget.dispatchEvent(new Event("change")); + this.endTarget.dispatchEvent(new Event("change")); + } + } + // private + plugins = (mode, datetimepicker) => { + const buttons = [{ label: Spree.translations.close }]; + if (mode == "single") { + buttons.unshift({ + label: datetimepicker + ? Spree.translations.now + : Spree.translations.today, + }); + } + return [ + ShortcutButtonsPlugin({ + button: buttons, + label: mode != "range" && "or", + onClick: this.onClickButtons, + }), + labelPlugin({}), + ]; + }; + onClickButtons = (index, fp) => { - let date; - // Memorize index used for the 'Close' button - // (currently it has index of 1) - const closeButtonIndex = 1; + // Memorize index used for the 'Close' and 'Today|Now' buttons + // it has index of 1 in case of single mode (ie. can set Today or Now date) + // it has index of 0 in case of range mode (no Today or Now button) + const closeButtonIndex = this.modeValue == "range" ? 0 : 1; + const todayButtonIndex = this.modeValue == "range" ? null : 0; switch (index) { - case 0: - date = new Date(); + case todayButtonIndex: + fp.setDate(new Date(), true); break; case closeButtonIndex: fp.close(); break; } - // Set the date unless clicked button was the 'Close' one - if (index != closeButtonIndex) { - fp.setDate(date, true); - } }; } From 73f55ae77643d1697e4e4827b632861863d60fee Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Sun, 7 Aug 2022 19:11:23 +0200 Subject: [PATCH 12/21] 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 From eb621cae35e8a4e2b2b0719438dcf3fead115c38 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 8 Aug 2022 10:38:34 +0200 Subject: [PATCH 13/21] Update spec to be more defensive Actually, this one fail on master too (when changing month?) --- spec/system/admin/bulk_order_management_spec.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/spec/system/admin/bulk_order_management_spec.rb b/spec/system/admin/bulk_order_management_spec.rb index a7a345126d..a7104a1b23 100644 --- a/spec/system/admin/bulk_order_management_spec.rb +++ b/spec/system/admin/bulk_order_management_spec.rb @@ -534,7 +534,7 @@ describe ' } let!(:o2) { create(:order_with_distributor, state: 'complete', shipment_state: 'ready', - completed_at: Time.zone.today - 7.days) + completed_at: Time.zone.today - 6.days) } let!(:o3) { create(:order_with_distributor, state: 'complete', shipment_state: 'ready', @@ -542,7 +542,7 @@ describe ' } let!(:o4) { create(:order_with_distributor, state: 'complete', shipment_state: 'ready', - completed_at: Time.zone.now.end_of_day + 1.second) + completed_at: Time.zone.now.end_of_day + 1.day) } let!(:li1) { create(:line_item_with_shipment, order: o1, quantity: 1 ) } let!(:li2) { create(:line_item_with_shipment, order: o2, quantity: 2 ) } From eec117e769731c59f11ae20b5255956e876c1b04 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Sun, 7 Aug 2022 19:11:48 +0200 Subject: [PATCH 14/21] Implements daterangepicker for `/admin/orders/bulk_management` + update specs as well --- .../admin/orders/bulk_management.html.haml | 16 ++++++------- .../admin/bulk_order_management_spec.rb | 24 ++++++++++--------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/app/views/spree/admin/orders/bulk_management.html.haml b/app/views/spree/admin/orders/bulk_management.html.haml index aef3aabccb..e5fefd6b25 100644 --- a/app/views/spree/admin/orders/bulk_management.html.haml +++ b/app/views/spree/admin/orders/bulk_management.html.haml @@ -17,16 +17,14 @@ %input.red{ type: "button", value: "Save Changes", ng: { click: "submit()", disabled: "!bulk_order_form.$dirty" } } .filters{ :class => "sixteen columns alpha" } - .date_filter{ :class => "two columns alpha" } - %label{ :for => 'start_date_filter' } - = t("admin.start_date") + .date_filter{class: "four columns"} + %label + = t("date_range") %br - %input.fullwidth.datepicker{ :type => "text", :id => 'start_date_filter', 'ng-model' => 'startDate', data: { controller: "flatpickr" }, 'confirm-change' => "confirmRefresh()", 'ng-change' => 'refreshData()', 'ng-model-options' => '{ debounce: 1000 }' } - .date_filter{ :class => "two columns" } - %label{ :for => 'end_date_filter' } - = t("admin.end_date") - %br - %input.fullwidth.datepicker{ :type => "text", :id => 'end_date_filter', 'ng-model' => 'endDate', data: { controller: "flatpickr" }, 'confirm-change' => "confirmRefresh()", 'ng-change' => 'refreshData()', 'ng-model-options' => '{ debounce: 1000 }' } + %div{ data: { controller: "flatpickr", "flatpickr-mode-value": "range", "flatpickr-default-date": "{{ [startDate, endDate] }}" } } + %input.datepicker.fullwidth{ class: "datepicker", data: { "flatpickr-target": "instance" } } + %input{ type: "text", id: 'start_date_filter', 'ng-model': "startDate", 'ng-change': 'refreshData()', 'ng-model-options': '{ debounce: 1000 }', data: { "flatpickr-target": "start" }, style: "display: none;", "confirm-change": "confirmRefresh()" } + %input{ type: "text", id: 'end_date_filter', 'ng-model': "endDate", 'ng-change': 'refreshData()', 'ng-model-options': '{ debounce: 1000 }', data: { "flatpickr-target": "end" }, style: "display: none;", "confirm-change": "confirmRefresh()"} .one.column   .filter_select{ :class => "three columns" } %label{ :for => 'supplier_filter' } diff --git a/spec/system/admin/bulk_order_management_spec.rb b/spec/system/admin/bulk_order_management_spec.rb index a7104a1b23..a77ef06579 100644 --- a/spec/system/admin/bulk_order_management_spec.rb +++ b/spec/system/admin/bulk_order_management_spec.rb @@ -548,6 +548,7 @@ describe ' let!(:li2) { create(:line_item_with_shipment, order: o2, quantity: 2 ) } let!(:li3) { create(:line_item_with_shipment, order: o3, quantity: 3 ) } let!(:li4) { create(:line_item_with_shipment, order: o4, quantity: 4 ) } + let(:today) { Time.zone.today } before :each do visit_bulk_order_management @@ -555,10 +556,8 @@ describe ' it "displays date fields for filtering orders, with default values set" do # use Date.current since Date.today is without timezone - today = Time.zone.today one_week_ago = today.prev_day(7).strftime("%F") - expect(page).to have_field "start_date_filter", with: one_week_ago - expect(page).to have_field "end_date_filter", with: today.strftime("%F") + expect(find("input.datepicker").value).to eq "#{one_week_ago} to #{today.strftime('%F')}" end it "only loads line items whose orders meet the date restriction criteria" do @@ -569,16 +568,19 @@ describe ' end it "displays only line items whose orders meet the date restriction criteria, when changed" do - find('#start_date_filter').click - select_date_from_datepicker Time.zone.today - 8.days + from = today - 8.days + to = today + 1.day + + find("input.datepicker").click + select_dates_from_daterangepicker(from, today) expect(page).to have_selector "tr#li_#{li1.id}" expect(page).to have_selector "tr#li_#{li2.id}" expect(page).to have_selector "tr#li_#{li3.id}" expect(page).to have_no_selector "tr#li_#{li4.id}" - find('#end_date_filter').click - select_date_from_datepicker Time.zone.today + 1.day + find("input.datepicker").click + select_dates_from_daterangepicker(from, to) expect(page).to have_selector "tr#li_#{li1.id}" expect(page).to have_selector "tr#li_#{li2.id}" @@ -596,8 +598,8 @@ describe ' it "shows a dialog and ignores changes when confirm dialog is accepted" do page.driver.accept_modal :confirm, text: "Unsaved changes exist and will be lost if you continue." do - find('#start_date_filter').click - select_date_from_datepicker Time.zone.today - 9.days + find("input.datepicker").click + select_dates_from_daterangepicker(today - 9.days, today) end expect(page).to have_no_selector "#save-bar" within("tr#li_#{li2.id} td.quantity") do @@ -608,8 +610,8 @@ describe ' it "shows a dialog and keeps changes when confirm dialog is rejected" do page.driver.dismiss_modal :confirm, text: "Unsaved changes exist and will be lost if you continue." do - find('#start_date_filter').click - select_date_from_datepicker Time.zone.today - 9.days + find("input.datepicker").click + select_dates_from_daterangepicker(today - 9.days, today) end expect(page).to have_selector "#save-bar" within("tr#li_#{li2.id} td.quantity") do From ec4d091c2ef75676924ae00691004de1a16a3c16 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 5 Sep 2022 15:18:53 +0200 Subject: [PATCH 15/21] Remove the `or` label as it was unecessary and actually, untranslated --- app/webpacker/controllers/flatpickr_controller.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/webpacker/controllers/flatpickr_controller.js b/app/webpacker/controllers/flatpickr_controller.js index ca8e58b458..2e166fab72 100644 --- a/app/webpacker/controllers/flatpickr_controller.js +++ b/app/webpacker/controllers/flatpickr_controller.js @@ -85,7 +85,6 @@ export default class extends Flatpickr { return [ ShortcutButtonsPlugin({ button: buttons, - label: mode != "range" && "or", onClick: this.onClickButtons, }), labelPlugin({}), From 6ec3e7ee0c56fedc549dfe34e690208f67288f37 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Thu, 8 Sep 2022 16:19:27 +0200 Subject: [PATCH 16/21] Only send event change on valid range (ie. both start and end date) + do not refresh data on start date change but only on end date change --- app/views/spree/admin/orders/bulk_management.html.haml | 2 +- app/webpacker/controllers/flatpickr_controller.js | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/app/views/spree/admin/orders/bulk_management.html.haml b/app/views/spree/admin/orders/bulk_management.html.haml index e5fefd6b25..4008d10abc 100644 --- a/app/views/spree/admin/orders/bulk_management.html.haml +++ b/app/views/spree/admin/orders/bulk_management.html.haml @@ -23,7 +23,7 @@ %br %div{ data: { controller: "flatpickr", "flatpickr-mode-value": "range", "flatpickr-default-date": "{{ [startDate, endDate] }}" } } %input.datepicker.fullwidth{ class: "datepicker", data: { "flatpickr-target": "instance" } } - %input{ type: "text", id: 'start_date_filter', 'ng-model': "startDate", 'ng-change': 'refreshData()', 'ng-model-options': '{ debounce: 1000 }', data: { "flatpickr-target": "start" }, style: "display: none;", "confirm-change": "confirmRefresh()" } + %input{ type: "text", id: 'start_date_filter', 'ng-model': "startDate", data: { "flatpickr-target": "start" }, style: "display: none;", "confirm-change": "confirmRefresh()" } %input{ type: "text", id: 'end_date_filter', 'ng-model': "endDate", 'ng-change': 'refreshData()', 'ng-model-options': '{ debounce: 1000 }', data: { "flatpickr-target": "end" }, style: "display: none;", "confirm-change": "confirmRefresh()"} .one.column   .filter_select{ :class => "three columns" } diff --git a/app/webpacker/controllers/flatpickr_controller.js b/app/webpacker/controllers/flatpickr_controller.js index 2e166fab72..230d3c7d7c 100644 --- a/app/webpacker/controllers/flatpickr_controller.js +++ b/app/webpacker/controllers/flatpickr_controller.js @@ -66,8 +66,11 @@ export default class extends Flatpickr { ? this.fp.formatDate(selectedDates[1], this.config.dateFormat) : ""; // Also, send event to be sure that ng-model is well updated - this.startTarget.dispatchEvent(new Event("change")); - this.endTarget.dispatchEvent(new Event("change")); + // Send event only if range il valid, ie. start and end are not empty + if (this.startTarget.value && this.endTarget.value) { + this.startTarget.dispatchEvent(new Event("change")); + this.endTarget.dispatchEvent(new Event("change")); + } } } From a272479483fda607e1d5884d844ad2a9528d325e Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 14 Sep 2022 14:14:36 +0200 Subject: [PATCH 17/21] When selecting date range picker, orders should load --- spec/system/admin/bulk_order_management_spec.rb | 1 + 1 file changed, 1 insertion(+) diff --git a/spec/system/admin/bulk_order_management_spec.rb b/spec/system/admin/bulk_order_management_spec.rb index a77ef06579..d66832b660 100644 --- a/spec/system/admin/bulk_order_management_spec.rb +++ b/spec/system/admin/bulk_order_management_spec.rb @@ -573,6 +573,7 @@ describe ' find("input.datepicker").click select_dates_from_daterangepicker(from, today) + expect(page).to have_text 'Loading orders' expect(page).to have_selector "tr#li_#{li1.id}" expect(page).to have_selector "tr#li_#{li2.id}" From e076e23064a337fcb60f03022c9455f93601a5ca Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 20 Sep 2022 15:08:09 +0200 Subject: [PATCH 18/21] Do not use `ng-change` on endDate but instead watch both start and end date --- .../line_items/controllers/line_items_controller.js.coffee | 4 ++++ app/views/spree/admin/orders/bulk_management.html.haml | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/admin/line_items/controllers/line_items_controller.js.coffee b/app/assets/javascripts/admin/line_items/controllers/line_items_controller.js.coffee index 7a74e6e76d..7e4b881716 100644 --- a/app/assets/javascripts/admin/line_items/controllers/line_items_controller.js.coffee +++ b/app/assets/javascripts/admin/line_items/controllers/line_items_controller.js.coffee @@ -25,6 +25,10 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout, $scope.resetFilters() $scope.refreshData() + $scope.$watchCollection "[startDate, endDate]", (newValues, oldValues) -> + if newValues != oldValues + $scope.refreshData() + $scope.refreshData = -> unless !$scope.orderCycleFilter? || $scope.orderCycleFilter == '' $scope.setOrderCycleDateRange() diff --git a/app/views/spree/admin/orders/bulk_management.html.haml b/app/views/spree/admin/orders/bulk_management.html.haml index 4008d10abc..244af705d0 100644 --- a/app/views/spree/admin/orders/bulk_management.html.haml +++ b/app/views/spree/admin/orders/bulk_management.html.haml @@ -24,7 +24,7 @@ %div{ data: { controller: "flatpickr", "flatpickr-mode-value": "range", "flatpickr-default-date": "{{ [startDate, endDate] }}" } } %input.datepicker.fullwidth{ class: "datepicker", data: { "flatpickr-target": "instance" } } %input{ type: "text", id: 'start_date_filter', 'ng-model': "startDate", data: { "flatpickr-target": "start" }, style: "display: none;", "confirm-change": "confirmRefresh()" } - %input{ type: "text", id: 'end_date_filter', 'ng-model': "endDate", 'ng-change': 'refreshData()', 'ng-model-options': '{ debounce: 1000 }', data: { "flatpickr-target": "end" }, style: "display: none;", "confirm-change": "confirmRefresh()"} + %input{ type: "text", id: 'end_date_filter', 'ng-model': "endDate", data: { "flatpickr-target": "end" }, style: "display: none;", "confirm-change": "confirmRefresh()"} .one.column   .filter_select{ :class => "three columns" } %label{ :for => 'supplier_filter' } From ea7661576389ddfda52d003a3ea50bd05d48e2a9 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 20 Sep 2022 16:17:54 +0200 Subject: [PATCH 19/21] Forward focus event on calendar open --- app/webpacker/controllers/flatpickr_controller.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/webpacker/controllers/flatpickr_controller.js b/app/webpacker/controllers/flatpickr_controller.js index 230d3c7d7c..b6c619c859 100644 --- a/app/webpacker/controllers/flatpickr_controller.js +++ b/app/webpacker/controllers/flatpickr_controller.js @@ -57,6 +57,10 @@ export default class extends Flatpickr { this.fp.setDate(null); } + open() { + this.fp.element.dispatchEvent(new Event("focus")); + } + change(selectedDates, dateStr, instance) { if (this.hasStartTarget && this.hasEndTarget) { this.startTarget.value = selectedDates[0] From 263b36d1d9b55fefbeda86d4d0087c5d76e86f20 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 20 Sep 2022 16:18:14 +0200 Subject: [PATCH 20/21] Confirm input changed by pressing enter key --- spec/system/admin/order_cycles/simple_spec.rb | 1 + 1 file changed, 1 insertion(+) diff --git a/spec/system/admin/order_cycles/simple_spec.rb b/spec/system/admin/order_cycles/simple_spec.rb index 0d2aac2561..9072a61e95 100644 --- a/spec/system/admin/order_cycles/simple_spec.rb +++ b/spec/system/admin/order_cycles/simple_spec.rb @@ -700,6 +700,7 @@ describe ' datetime = Time.zone.at(Time.zone.local(2040, 10, 17, 0o6, 0o0, 0o0)) input = find(".flatpickr-calendar.open .flatpickr-minute") input.send_keys datetime.strftime("%M").to_s.strip + input.send_keys :enter expect(page).to have_content "You have unsaved changes" end From f5ebc797c4ed92a4b6a37a98630fde752f053520 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 5 Oct 2022 10:33:11 +0200 Subject: [PATCH 21/21] Send change event on flatpickr widget close --- app/webpacker/controllers/flatpickr_controller.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/webpacker/controllers/flatpickr_controller.js b/app/webpacker/controllers/flatpickr_controller.js index b6c619c859..1f20ba505d 100644 --- a/app/webpacker/controllers/flatpickr_controller.js +++ b/app/webpacker/controllers/flatpickr_controller.js @@ -62,7 +62,7 @@ export default class extends Flatpickr { } change(selectedDates, dateStr, instance) { - if (this.hasStartTarget && this.hasEndTarget) { + if (this.hasStartTarget && this.hasEndTarget && this.modeValue == "range") { this.startTarget.value = selectedDates[0] ? this.fp.formatDate(selectedDates[0], this.config.dateFormat) : ""; @@ -78,6 +78,11 @@ export default class extends Flatpickr { } } + close() { + // Send a change event to the input element to trigger the ng-change + this.hasEndTarget && this.endTarget.dispatchEvent(new Event("change")); + } + // private plugins = (mode, datetimepicker) => {