Add processor filter to webhooks list page

ang/mjwshared/PaymentprocessorWebhook.html

@@ -6,6 +6,7 @@
     <div crm-ui-accordion="{title: ts('Filters')}">
       <div class="crm-block">
         <div class="crm-group">
+
           <div crm-ui-field="{name: 'myForm.statuses', title: ts('Status')}">
             <select type="text" ng-model="$ctrl.statusFilter" >
               <option value="">{{ts('- Any -')}}</option>
@@ -16,6 +17,19 @@
             </select>
           </div>
 
+          <div crm-ui-field="{name: 'myForm.processor', title: ts('Processor')}">
+            <select type="text" ng-model="$ctrl.processorFilter" >
+              <option value="">{{ts('- Any -')}}</option>
+              <option ng-repeat="processor in $ctrl.processors"
+                      value="{{processor.id}}"
+                      >{{processor.processorType}}:
+                      {{processor.processorName}}:
+                      {{:: processor.isTest ? ts('Test') : ts('Live') }}
+                      ({{ts('%count webhooks', {count:processor.webhooksCount}) }})
+                      </option>
+            </select>
+          </div>
+
           <div crm-ui-field="{name: 'myForm.event', title: ts('Event ID')}">
             <input
               crm-ui-id="myForm.event_id"

ang/mjwshared/PaymentprocessorWebhook.js

@@ -8,7 +8,17 @@
 
         // If you need to look up data when opening the page, list it out
         // under "resolve".
-        resolve: { }
+        resolve: {
+          processors: function(crmApi4) {
+            return crmApi4('PaymentProcessor', 'get', {
+              select: ["id", "MIN(name) AS processorName", "MIN(payment_processor_type_id:label) AS processorType", "MIN(is_test) AS isTest", "COUNT(paymentprocessor_webhook.id) AS webhooksCount"],
+              join: [["PaymentprocessorWebhook AS paymentprocessor_webhook", "LEFT", ["id", "=", "paymentprocessor_webhook.payment_processor_id"]]],
+              groupBy: ["id"],
+              where: [["is_test", "IS NOT EMPTY"]],
+              orderBy: {"payment_processor_type_id:label":"ASC", "is_test":"ASC"}
+            });
+          }
+        }
       });
     }
   );
@@ -17,15 +27,17 @@
   //   $scope -- This is the set of variables shared between JS and HTML.
   //   crmApi, crmStatus, crmUiHelp -- These are services provided by civicrm-core.
   //   myContact -- The current contact, defined above in config().
-  angular.module('mjwshared').controller('MjwsharedPaymentprocessorWebhook', function($scope, crmApi4, crmStatus, crmUiHelp) {
+  angular.module('mjwshared').controller('MjwsharedPaymentprocessorWebhook', function($scope, crmApi4, crmStatus, crmUiHelp, processors) {
     // The ts() and hs() functions help load strings for this module.
     var ts = $scope.ts = CRM.ts('mjwshared');
     var hs = $scope.hs = crmUiHelp({file: 'CRM/mjwshared/PaymentprocessorWebhook'}); // See: templates/CRM/mjwshared/PaymentprocessorWebhook.hlp
     // Local variable for this controller (needed when inside a callback fn where `this` is not available).
     var ctrl = this;
 
+    this.processors = processors;
     this.events = [];
     this.statusFilter = '';
+    this.processorFilter = '';
     this.eventFilter = '';
     this.paymentProcessor = [];
     this.offset = 0;
@@ -55,6 +67,9 @@
       if (ctrl.statusFilter) {
         params.where.push(['status', '=', ctrl.statusFilter]);
       }
+      if (ctrl.processorFilter) {
+        params.where.push(['payment_processor_id', '=', ctrl.processorFilter]);
+      }
       if (ctrl.eventFilter) {
         params.where.push(['event_id', 'LIKE', '%' + ctrl.eventFilter + '%']);
       }
@@ -83,7 +98,7 @@
 
     this.changePage = function(dir) {
       let newOffset = Math.min(Math.max(ctrl.offset + dir*ctrl.limit, 0), ctrl.resultsCount - 1);
-      console.log({newOffset, o: ctrl.offset, dir});
+      // console.log({newOffset, o: ctrl.offset, dir});
       if (newOffset != ctrl.offset) {
         ctrl.offset = newOffset;
         ctrl.load();