Merge pull request #9924 from jibees/9757-BOM-show-only-one-modal-when-changing-date-range-

BOM: Display confirm modal on date range change only one time

app/assets/javascripts/admin/line_items/controllers/line_items_controller.js.coffee

@@ -5,6 +5,8 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
   $scope.confirmDelete = true
   $scope.startDate = moment().startOf('day').subtract(7, 'days').format('YYYY-MM-DD')
   $scope.endDate = moment().startOf('day').format('YYYY-MM-DD')
+  $scope.previousDates = { startDate: $scope.startDate, endDate: $scope.endDate }
+  $scope.datesChangedOnCancelEvent = false
   $scope.bulkActions = [ { name: t("admin.orders.bulk_management.actions_delete"), callback: 'deleteLineItems' } ]
   $scope.selectedUnitsProduct = {}
   $scope.selectedUnitsVariant = {}
@@ -26,9 +28,27 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
     $scope.refreshData()
 
   $scope.$watchCollection "[startDate, endDate]", (newValues, oldValues) ->
-    if newValues != oldValues
-      $scope.refreshData()
-      
+    if newValues != oldValues && !$scope.datesChangedOnCancelEvent
+        state = $scope.refreshData()
+        if (state == "cancel")
+          $scope.datesChangedOnCancelEvent = true
+          $scope.cancelDateChange()
+  
+  $scope.cancelDateChange = ->
+    # Reset the date filters to the previous values
+    $scope.startDate = $scope.previousDates.startDate
+    $scope.endDate = $scope.previousDates.endDate
+    # throw a flatpickr:change event to change the date back in the datepicker
+    event = new CustomEvent('flatpickr:change', {
+      detail: { 
+        startDate: $scope.previousDates.startDate,
+        endDate: $scope.previousDates.endDate
+      }
+    })
+    window.dispatchEvent(event)
+    $timeout ->
+      $scope.datesChangedOnCancelEvent = false
+ 
   $scope.refreshData = ->
     unless !$scope.orderCycleFilter? || $scope.orderCycleFilter == ''
       $scope.setOrderCycleDateRange()
@@ -38,6 +58,8 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
 
     return unless moment($scope.formattedStartDate).isValid() and moment($scope.formattedEndDate).isValid()
 
+    return "cancel" unless $scope.confirmRefresh()
+
     $scope.loadOrders()
     $scope.loadLineItems()
 
@@ -45,6 +67,11 @@ angular.module("admin.lineItems").controller 'LineItemsCtrl', ($scope, $timeout,
       $scope.loadAssociatedData()
 
     $scope.dereferenceLoadedData()
+    
+    $timeout ->
+      # update the previous dates with the current ones since loading was successful
+      $scope.previousDates.startDate = $scope.startDate
+      $scope.previousDates.endDate = $scope.endDate
 
   $scope.setOrderCycleDateRange = ->
     start_date = OrderCycles.byID[$scope.orderCycleFilter].orders_open_at

app/views/spree/admin/orders/bulk_management.html.haml

@@ -23,8 +23,8 @@
       %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", data: { "flatpickr-target": "start" }, 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()"}
+          %input{ type: "text", id: 'start_date_filter', 'ng-model': "startDate", data: { "flatpickr-target": "start" }, style: "display: none;" }
+          %input{ type: "text", id: 'end_date_filter', 'ng-model': "endDate", data: { "flatpickr-target": "end" }, style: "display: none;" }
     .one.column  
     .filter_select{ :class => "three columns" }
       %label{ :for => 'supplier_filter' }

app/webpacker/controllers/flatpickr_controller.js

@@ -51,6 +51,7 @@ export default class extends Flatpickr {
       plugins: this.plugins(mode, datetimepicker),
       mode,
     };
+    window.addEventListener("flatpickr:change", this.onChangeEvent.bind(this));
   }
 
   clear(e) {
@@ -60,6 +61,23 @@ export default class extends Flatpickr {
   open() {
     this.fp.element.dispatchEvent(new Event("focus"));
   }
+  onChangeEvent(e) {
+    if (
+      this.modeValue == "range" &&
+      this.hasStartTarget &&
+      this.hasEndTarget &&
+      e.detail.startDate &&
+      e.detail.endDate
+    ) {
+      // date range mode
+      this.startTarget.value = e.detail.startDate;
+      this.endTarget.value = e.detail.endDate;
+      this.fp.setDate([e.detail.startDate, e.detail.endDate]);
+    } else if (e.detail.date) {
+      // single date mode
+      this.fp.setDate(e.detail.date);
+    }
+  }
 
   change(selectedDates, dateStr, instance) {
     if (this.hasStartTarget && this.hasEndTarget && this.modeValue == "range") {

spec/javascripts/unit/admin/line_items/controllers/line_items_controller_spec.js.coffee

@@ -47,6 +47,7 @@ describe "LineItemsCtrl", ->
       delete: (lineItem, callback=null) ->
         callback() if callback
         return Promise.resolve()
+      allSaved: jasmine.createSpy('allSaved').and.returnValue(true)
 
     httpBackend.expectGET("/api/v0/orders.json?q%5Bcompleted_at_gteq%5D=SomeDate&q%5Bcompleted_at_lt%5D=SomeDate&q%5Bcompleted_at_not_null%5D=true&q%5Bdistributor_id_eq%5D=&q%5Border_cycle_id_eq%5D=&q%5Bshipment_state_not_eq%5D=shipped&q%5Bstate_not_eq%5D=canceled").respond {orders: [order], pagination: {page: 1, pages: 1, results: 1}}
     httpBackend.expectGET("/admin/enterprises/visible.json?ams_prefix=basic&q%5Bsells_in%5D%5B%5D=own&q%5Bsells_in%5D%5B%5D=any").respond [distributor]

spec/system/admin/bulk_order_management_spec.rb

@@ -612,11 +612,12 @@ describe '
         end
 
         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
+          accept_confirm "Unsaved changes exist and will be lost if you continue." do
             find("input.datepicker").click
             select_dates_from_daterangepicker(today - 9.days, today)
           end
+          # daterange picker should have changed
+          expect(find("input.datepicker").value).to eq "#{today.prev_day(9).strftime('%F')} to #{today.strftime('%F')}"
           expect(page).to have_no_selector "#save-bar"
           within("tr#li_#{li2.id} td.quantity") do
             expect(page).to have_no_selector "input[name=quantity].ng-dirty"
@@ -624,14 +625,13 @@ describe '
         end
 
         it "shows a dialog and keeps changes when confirm dialog is rejected" do
-          pending "https://github.com/openfoodfoundation/openfoodnetwork/issues/9757"
-
-          page.driver.dismiss_modal :confirm,
-                                    text: "Unsaved changes exist and will be lost if you continue." do
+          previousdaterangestring = find("input.datepicker").value
+          dismiss_confirm "Unsaved changes exist and will be lost if you continue." do
             find("input.datepicker").click
             select_dates_from_daterangepicker(today - 9.days, today)
           end
-          sleep 2
+          # daterange picker shouldn't have changed
+          expect(find("input.datepicker").value).to eq previousdaterangestring
           expect(page).to have_selector "#save-bar"
           within("tr#li_#{li2.id} td.quantity") do
             expect(page).to have_selector "input[name=quantity].ng-dirty"