dev/core#2310 Searchkit - Perform bulk updates in batches; improve user feedback.

ext/search/ang/crmSearchActions.ang.php

@@ -9,6 +9,9 @@
   'partials' => [
     'ang/crmSearchActions',
   ],
+  'css' => [
+    'css/crmSearchActions.css',
+  ],
   'basePages' => [],
   'requires' => ['crmUi', 'crmUtil', 'dialogService', 'api4', 'checklist-model'],
   'settingsFactory' => ['\Civi\Search\Actions', 'getActionSettings'],

ext/search/ang/crmSearchActions/crmSearchActionDelete.ctrl.js

@@ -1,7 +1,7 @@
 (function(angular, $, _) {
   "use strict";
 
-  angular.module('crmSearchActions').controller('crmSearchActionDelete', function($scope, crmApi4, dialogService) {
+  angular.module('crmSearchActions').controller('crmSearchActionDelete', function($scope, dialogService) {
     var ts = $scope.ts = CRM.ts(),
       model = $scope.model,
       ctrl = $scope.$ctrl = this;
@@ -13,11 +13,18 @@
     };
 
     this.delete = function() {
-      crmApi4(model.entity, 'Delete', {
-        where: [['id', 'IN', model.ids]],
-      }).then(function() {
-        dialogService.close('crmSearchAction');
-      });
+      $('.ui-dialog-titlebar button').hide();
+      ctrl.run = {};
+    };
+
+    this.onSuccess = function() {
+      CRM.alert(ts('Successfully deleted %1 %2.', {1: model.ids.length, 2: ctrl.entityTitle}), ts('Deleted'), 'success');
+      dialogService.close('crmSearchAction');
+    };
+
+    this.onError = function() {
+      CRM.alert(ts('An error occurred while attempting to delete %1 %2.', {1: model.ids.length, 2: ctrl.entityTitle}), ts('Error'), 'error');
+      dialogService.close('crmSearchAction');
     };
 
   });

ext/search/ang/crmSearchActions/crmSearchActionDelete.html

@@ -2,9 +2,19 @@
   <form ng-controller="crmSearchActionDelete">
     <p><strong>{{:: ts('Are you sure you want to delete %1 %2?', {1: model.ids.length, 2: $ctrl.entityTitle}) }}</strong></p>
     <hr />
-    <div class="buttons pull-right">
-      <button type="button" ng-click="$ctrl.cancel()" class="btn btn-danger">{{:: ts('Cancel') }}</button>
-      <button ng-click="$ctrl.delete()" class="btn btn-primary">{{:: ts('Delete %1', {1: $ctrl.entityTitle}) }}</button>
+    <div ng-if="$ctrl.run" class="crm-search-action-progress">
+      <h5>{{:: ts('Deleting %1 %2...', {1: model.ids.length, 2: $ctrl.entityTitle}) }}</h5>
+      <crm-search-batch-runner entity="model.entity" action="Delete" params="$ctrl.run" ids="model.ids" success="$ctrl.onSuccess()" error="$ctrl.onError()" ></crm-search-batch-runner>
+    </div>
+    <hr />
+    <div class="buttons text-right">
+      <button type="button" ng-click="$ctrl.cancel()" class="btn btn-danger" ng-hide="$ctrl.run">
+        <i class="crm-i fa-times"></i>
+        {{:: ts('Cancel') }}
+      </button>
+      <button ng-click="$ctrl.delete()" class="btn btn-primary" ng-disabled="$ctrl.run">
+        <i class="crm-i fa-{{ $ctrl.run ? 'spin fa-spinner' : 'trash' }}"></i>
+        {{:: ts('Delete %1', {1: $ctrl.entityTitle}) }}
+      </button>
     </div>
-  </form>
 </div>

ext/search/ang/crmSearchActions/crmSearchActionUpdate.ctrl.js

@@ -29,7 +29,16 @@
       // Debounce the onchange event using timeout
       $timeout(function() {
         if (ctrl.add) {
-          ctrl.values.push([ctrl.add, '']);
+          var field = ctrl.getField(ctrl.add),
+            value = '';
+          if (field.serialize) {
+            value = [];
+          } else if (field.data_type === 'Boolean') {
+            value = true;
+          } else if (field.options && field.options.length) {
+            value = field.options[0].id;
+          }
+          ctrl.values.push([ctrl.add, value]);
         }
         ctrl.add = null;
       });
@@ -61,12 +70,20 @@
     };
 
     this.save = function() {
-      crmApi4(model.entity, 'Update', {
-        where: [['id', 'IN', model.ids]],
+      $('.ui-dialog-titlebar button').hide();
+      ctrl.run = {
         values: _.zipObject(ctrl.values)
-      }).then(function() {
-        dialogService.close('crmSearchAction');
-      });
+      };
+    };
+
+    this.onSuccess = function() {
+      CRM.alert(ts('Successfully updated %1 %2.', {1: model.ids.length, 2: ctrl.entityTitle}), ts('Saved'), 'success');
+      dialogService.close('crmSearchAction');
+    };
+
+    this.onError = function() {
+      CRM.alert(ts('An error occurred while attempting to update %1 %2.', {1: model.ids.length, 2: ctrl.entityTitle}), ts('Error'), 'error');
+      dialogService.close('crmSearchAction');
     };
 
   });

ext/search/ang/crmSearchActions/crmSearchActionUpdate.html

@@ -2,16 +2,26 @@
   <form ng-controller="crmSearchActionUpdate">
     <p><strong>{{:: ts('Update the %1 selected %2 with the following values:', {1: model.ids.length, 2: $ctrl.entityTitle}) }}</strong></p>
     <div class="form-inline" ng-repeat="clause in $ctrl.values" >
-      <input class="form-control" ng-change="$ctrl.updateField($index)" ng-model="clause[0]" crm-ui-select="{data: $ctrl.availableFields, allowClear: true, placeholder: 'Field'}" />
+      <input class="form-control" ng-change="$ctrl.updateField($index)" ng-disabled="$ctrl.run" ng-model="clause[0]" crm-ui-select="{data: $ctrl.availableFields, allowClear: true, placeholder: 'Field'}" />
       <crm-search-input class="form-group" ng-model="clause[1]" field="$ctrl.getField(clause[0])" ></crm-search-input>
     </div>
-    <div class="form-inline">
+    <div class="form-inline" ng-hide="$ctrl.run">
       <input class="form-control twenty" style="width: 15em;" ng-model="$ctrl.add" ng-change="$ctrl.addField()" ng-disabled="!$ctrl.fields" ng-class="{loading: !$ctrl.fields}" crm-ui-select="{data: $ctrl.availableFields, placeholder: ts('Add Value')}"/>
     </div>
+    <div ng-if="$ctrl.run" class="crm-search-action-progress">
+      <h5>{{:: ts('Updating %1 %2...', {1: model.ids.length, 2: $ctrl.entityTitle}) }}</h5>
+      <crm-search-batch-runner entity="model.entity" action="Update" params="$ctrl.run" ids="model.ids" success="$ctrl.onSuccess()" error="$ctrl.onError()" ></crm-search-batch-runner>
+    </div>
     <hr />
-    <div class="buttons pull-right">
-      <button type="button" ng-click="$ctrl.cancel()" class="btn btn-danger">{{:: ts('Cancel') }}</button>
-      <button ng-click="$ctrl.save()" class="btn btn-primary" ng-disabled="!$ctrl.values.length">{{:: ts('Update %1', {1: $ctrl.entityTitle}) }}</button>
+    <div class="buttons text-right">
+      <button type="button" ng-click="$ctrl.cancel()" class="btn btn-danger" ng-hide="$ctrl.run">
+        <i class="crm-i fa-times"></i>
+        {{:: ts('Cancel') }}
+      </button>
+      <button ng-click="$ctrl.save()" class="btn btn-primary" ng-disabled="!$ctrl.values.length || $ctrl.run">
+        <i class="crm-i fa-{{ $ctrl.run ? 'spin fa-spinner' : 'check' }}"></i>
+        {{:: ts('Update %1', {1: $ctrl.entityTitle}) }}
+      </button>
     </div>
   </form>
 </div>

ext/search/ang/crmSearchActions/crmSearchBatchRunner.component.js

@@ -0,0 +1,75 @@
+(function(angular, $, _) {
+  "use strict";
+
+  angular.module('crmSearchActions').component('crmSearchBatchRunner', {
+    bindings: {
+      entity: '<',
+      action: '@',
+      ids: '<',
+      params: '<',
+      success: '&',
+      error: '&'
+    },
+    templateUrl: '~/crmSearchActions/crmSearchBatchRunner.html',
+    controller: function($scope, $timeout, $interval, crmApi4) {
+      var ts = $scope.ts = CRM.ts(),
+        ctrl = this,
+        currentBatch = 0,
+        totalBatches,
+        incrementer;
+
+      this.progress = 0;
+
+      // Number of records to process in each batch
+      var BATCH_SIZE = 500,
+        // Extimated number of seconds each batch will take (for auto-incrementing the progress bar)
+        EST_BATCH_TIME = 5;
+
+      this.$onInit = function() {
+        totalBatches = Math.ceil(ctrl.ids.length / BATCH_SIZE);
+        runBatch();
+      };
+
+      this.$onDestroy = function() {
+        stopIncrementer();
+      };
+
+      function runBatch() {
+        ctrl.first = currentBatch * BATCH_SIZE;
+        ctrl.last = (currentBatch + 1) * BATCH_SIZE;
+        if (ctrl.last > ctrl.ids.length) {
+          ctrl.last = ctrl.ids.length;
+        }
+        var params = _.cloneDeep(ctrl.params);
+        params.where = params.where || [];
+        params.where.push(['id', 'IN', ctrl.ids.slice(ctrl.first, ctrl.last)]);
+        crmApi4(ctrl.entity, ctrl.action, params).then(
+          function(result) {
+            stopIncrementer();
+            ctrl.progress = Math.floor(100 * ++currentBatch / totalBatches);
+            if (ctrl.last >= ctrl.ids.length) {
+              $timeout(ctrl.success, 500);
+            } else {
+              runBatch();
+            }
+          }, function(error) {
+            ctrl.error();
+          });
+        // Move the bar every second to simulate progress between batches
+        incrementer = $interval(function(i) {
+          var est = Math.floor(100 * (currentBatch + (i / EST_BATCH_TIME)) / totalBatches);
+          ctrl.progress = est > 100 ? 100 : est;
+        }, 1000, EST_BATCH_TIME);
+      }
+
+      function stopIncrementer() {
+        if (angular.isDefined(incrementer)) {
+          $interval.cancel(incrementer);
+          incrementer = undefined;
+        }
+      }
+
+    }
+  });
+
+})(angular, CRM.$, CRM._);

ext/search/ang/crmSearchActions/crmSearchBatchRunner.html

@@ -0,0 +1,8 @@
+<div class="progress">
+  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="{{ $ctrl.progress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $ctrl.progress }}%">
+    <span class="sr-only">{{ ts('%1% Complete', {1: $ctrl.progress}) }}</span>
+  </div>
+</div>
+<p class="help-block">
+  {{ ts('Processing records %1 - %2', {1: 1 + $ctrl.first, 2: $ctrl.last}) }}
+</p>

ext/search/ang/crmSearchAdmin.ang.php

@@ -7,7 +7,7 @@
     'ang/crmSearchAdmin/*/*.js',
   ],
   'css' => [
-    'css/*.css',
+    'css/crmSearchAdmin.css',
   ],
   'partials' => [
     'ang/crmSearchAdmin',

ext/search/css/crmSearchActions.css

@@ -0,0 +1,5 @@
+.crm-search-action-progress {
+  padding: 10px;
+  margin-top: 10px;
+  border: 1px solid lightgrey;
+}