From 1b37659eef23bf15c754e3ee256cefafd3ca7748 Mon Sep 17 00:00:00 2001
From: Rich Lott / Artful Robot <forums@artfulrobot.uk>
Date: Thu, 18 Nov 2021 10:05:53 +0000
Subject: [PATCH] Add angular app to view/manage webhooks
---
ang/mjwshared.ang.php | 23 ++++
ang/mjwshared.css | 27 ++++
ang/mjwshared.js | 4 +
ang/mjwshared/PaymentprocessorWebhook.html | 105 ++++++++++++++
ang/mjwshared/PaymentprocessorWebhook.js | 130 ++++++++++++++++++
mjwshared.civix.php | 30 +---
mjwshared.php | 30 ++++
.../CRM/mjwshared/PaymentprocessorWebhook.hlp | 3 +
8 files changed, 325 insertions(+), 27 deletions(-)
create mode 100644 ang/mjwshared.ang.php
create mode 100644 ang/mjwshared.css
create mode 100644 ang/mjwshared.js
create mode 100644 ang/mjwshared/PaymentprocessorWebhook.html
create mode 100644 ang/mjwshared/PaymentprocessorWebhook.js
create mode 100644 templates/CRM/mjwshared/PaymentprocessorWebhook.hlp
diff --git a/ang/mjwshared.ang.php b/ang/mjwshared.ang.php
new file mode 100644
index 0000000..2404957
--- /dev/null
+++ b/ang/mjwshared.ang.php
@@ -0,0 +1,23 @@
+<?php
+// This file declares an Angular module which can be autoloaded
+// in CiviCRM. See also:
+// \https://docs.civicrm.org/dev/en/latest/hooks/hook_civicrm_angularModules/n
+return [
+ 'js' => [
+ 'ang/mjwshared.js',
+ 'ang/mjwshared/*.js',
+ 'ang/mjwshared/*/*.js',
+ ],
+ 'css' => [
+ 'ang/mjwshared.css',
+ ],
+ 'partials' => [
+ 'ang/mjwshared',
+ ],
+ 'requires' => [
+ 'crmUi',
+ 'crmUtil',
+ 'ngRoute',
+ ],
+ 'settings' => [],
+];
diff --git a/ang/mjwshared.css b/ang/mjwshared.css
new file mode 100644
index 0000000..71d0ccb
--- /dev/null
+++ b/ang/mjwshared.css
@@ -0,0 +1,27 @@
+/* Add any CSS rules for Angular module "mjwshared" */
+#paymentprocessor-webhooks-table td.success { color: #080; }
+#paymentprocessor-webhooks-table td.error { color: #800; }
+#paymentprocessor-webhooks-table td.processing { color: #048; }
+#paymentprocessor-webhooks-table td.new { color: #08a; }
+
+#paymentprocessor-webhooks-table tbody>tr { position: relative; }
+#paymentprocessor-webhooks-table tbody>tr.selected { position: relative; background-color: white; }
+#paymentprocessor-webhooks-table div.details { position: absolute; left: 0; right: 0; top: 100%; background: white; padding: 1.6rem; z-index: 1; box-shadow: 0 1rem 2rem rgba(0,0,0,0.4); }
+#paymentprocessor-webhooks-table div.details .message { padding: 1.6rem; background: #fafafa; white-space: pre-wrap; font-size: 1.4rem;}
+#paymentprocessor-webhooks-table div.details .raw { padding: 1.6rem; background: #fafafa; white-space: pre-wrap; font-size: 1.4rem; color: #444;}
+
+#paymentprocessor-webhooks div.pager {
+ display: flex;
+ justify-content: space-between;
+}
+#paymentprocessor-webhooks div.pager-info {
+ flex: 0 1 auto;
+}
+#paymentprocessor-webhooks div.pager-buttons {
+ flex: 1 1 13em;
+ text-align: right;
+}
+#paymentprocessor-webhooks div.pager-buttons button + button {
+ margin-left: 2rem;
+ display: inline-block;
+}
diff --git a/ang/mjwshared.js b/ang/mjwshared.js
new file mode 100644
index 0000000..2f23129
--- /dev/null
+++ b/ang/mjwshared.js
@@ -0,0 +1,4 @@
+(function(angular, $, _) {
+ // Declare a list of dependencies.
+ angular.module('mjwshared', CRM.angRequires('mjwshared'));
+})(angular, CRM.$, CRM._);
diff --git a/ang/mjwshared/PaymentprocessorWebhook.html b/ang/mjwshared/PaymentprocessorWebhook.html
new file mode 100644
index 0000000..23e743e
--- /dev/null
+++ b/ang/mjwshared/PaymentprocessorWebhook.html
@@ -0,0 +1,105 @@
+<div class="crm-container" id="paymentprocessor-webhooks">
+ <h1 crm-page-title>{{ts('Payment Processor Webhooks')}}</h1>
+
+ <form name="myForm" crm-ui-id-scope>
+
+ <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>
+ <option value="new">{{ts('New')}}</option>
+ <option value="processing">{{ts('Processing')}}</option>
+ <option value="success">{{ts('Success')}}</option>
+ <option value="error">{{ts('Error')}}</option>
+ </select>
+ </div>
+
+ <div crm-ui-field="{name: 'myForm.event', title: ts('Event ID')}">
+ <input
+ crm-ui-id="myForm.event_id"
+ name="event_id"
+ ng-model="$ctrl.eventFilter"
+ class="crm-form-text"
+ />
+ </div>
+ </div>
+ </div>
+
+ <div class="pager">
+ <div class="pager-info">Showing {{$ctrl.offset+1}} – {{$ctrl.offset + $ctrl.events.length}} of {{$ctrl.resultsCount}} </div>
+ <div class="pager-buttons">
+ <button
+ ng-if="$ctrl.offset > 0"
+ ng-click="$ctrl.changePage(-1)"
+ >{{ts('Previous page')}}</button>
+ <button
+ ng-if="$ctrl.offset + $ctrl.limit < $ctrl.resultsCount"
+ ng-click="$ctrl.changePage(1)"
+ >{{ts('Next page')}}</button>
+ <button ng-click="$ctrl.load()">{{ts('Search / Reload')}}</button>
+ </div>
+ </div>
+ </div>
+ </form>
+
+ <table id="paymentprocessor-webhooks-table" >
+ <thead>
+ <tr>
+ <th>Status</th>
+ <th>Time</th>
+ <th>Processor</th>
+ <th>Event ID</th>
+ <th>Message</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="(idx, row) in $ctrl.events" ng-class="{selected: (row.id == $ctrl.selectedRow)}">
+ <td ng-class="row['status']">{{row['status']}}</td>
+ <td><span title="Date received">{{row['created_date']}}</span> <span ng-if="row['processed_date']" title="Date processed">| {{row['processed_date']}}</span></td>
+ <td>{{row['payment_processor.name']}}</td>
+ <td>{{row['event_id']}}</td>
+ <td>{{$ctrl.abbreviate(row['message'])}}</td>
+ <td>
+ <a href ng-click="$ctrl.selectedRow = row.id" ng-if="$ctrl.selectedRow != row.id">Details</a>
+ <a href ng-click="$ctrl.selectedRow = null" ng-if="$ctrl.selectedRow == row.id">Hide details</a>
+ <a href ng-click="$ctrl.delete(row.id)">Delete</a>
+ <a href ng-click="$ctrl.retry(row.id)">Retry</a>
+
+ <div class="details" ng-if="$ctrl.selectedRow == row.id">
+ <p>
+ Identifier: <code>{{row.identifier}}</code>
+ Type: <code>{{row.trigger}}</code>
+ </p>
+ <p>Full message:</p>
+ <div class="message">{{row.message}}</div>
+ <p>
+ Raw data:
+ </p>
+ <div class="raw">{{row.data}}</div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <br />
+
+ <!-- this is repeated code, @todo tidy into separate directive? -->
+ <div class="pager">
+ <div class="pager-info">Showing {{$ctrl.offset+1}} – {{$ctrl.offset + $ctrl.events.length}} of {{$ctrl.resultsCount}} </div>
+ <div class="pager-buttons">
+ <button
+ ng-if="$ctrl.offset > 0"
+ ng-click="$ctrl.changePage(-1)"
+ >{{ts('Previous page')}}</button>
+ <button
+ ng-if="$ctrl.offset + $ctrl.limit < $ctrl.resultsCount"
+ ng-click="$ctrl.changePage(1)"
+ >{{ts('Next page')}}</button>
+ <button ng-click="$ctrl.load()">{{ts('Search / Reload')}}</button>
+ </div>
+ </div>
+
+</div>
diff --git a/ang/mjwshared/PaymentprocessorWebhook.js b/ang/mjwshared/PaymentprocessorWebhook.js
new file mode 100644
index 0000000..58a63c2
--- /dev/null
+++ b/ang/mjwshared/PaymentprocessorWebhook.js
@@ -0,0 +1,130 @@
+(function(angular, $, _) {
+
+ angular.module('mjwshared').config(function($routeProvider) {
+ $routeProvider.when('/paymentprocessorWebhook', {
+ controller: 'MjwsharedPaymentprocessorWebhook',
+ controllerAs: '$ctrl',
+ templateUrl: '~/mjwshared/PaymentprocessorWebhook.html',
+
+ // If you need to look up data when opening the page, list it out
+ // under "resolve".
+ resolve: { }
+ });
+ }
+ );
+
+ // The controller uses *injection*. This default injects a few things:
+ // $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) {
+ // 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.events = [];
+ this.statusFilter = '';
+ this.eventFilter = '';
+ this.paymentProcessor = [];
+ this.offset = 0;
+ this.limit = 25;
+ this.selectedRow = null;
+ this.resultsCount = 0;
+ this.lastQuery = '';
+
+ this.abbreviate = function (text) {
+ return text.replace(/^(.{80}).+$/s, '$1 ...');
+ }
+
+ this.load = function() {
+ const params = {
+ select: ["*", 'row_count', "payment_processor.name"],
+ join: [["PaymentProcessor AS payment_processor", true, null, ["payment_processor_id", "=", "payment_processor.id"]]],
+ where: [],
+ orderBy: {"id":"DESC"}
+ };
+ if (ctrl.statusFilter) {
+ params.where.push(['status', '=', ctrl.statusFilter]);
+ }
+ if (ctrl.eventFilter) {
+ params.where.push(['event_id', 'LIKE', '%' + ctrl.eventFilter + '%']);
+ }
+ // If we've changed the query, then start from the top again.
+ if (JSON.stringify(params) !== ctrl.lastQuery) {
+ ctrl.offset = 0;
+ ctrl.lastQuery = JSON.stringify(params);
+ }
+
+ // Handle paging.
+ Object.assign(params, {
+ offset: ctrl.offset,
+ limit: ctrl.limit,
+ });
+
+ return crmStatus(
+ // Status messages. For defaults, just use "{}"
+ {start: ts('Loading...'), success: ts('Loaded')},
+ // The save action. Note that crmApi() returns a promise.
+ crmApi4('PaymentprocessorWebhook', 'get', params)
+ .then(r => {
+ ctrl.resultsCount = r.count;
+ ctrl.events = r;
+ })
+ );
+ };
+
+ 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});
+ if (newOffset != ctrl.offset) {
+ ctrl.offset = newOffset;
+ ctrl.load();
+ }
+ };
+
+ this.delete = function(id) {
+ if (!(parseInt(id) > 0)) return;
+ if (!confirm(ts("Deleting a received webhook event is not un-do-able, and you may not be able to generate it again. Are you sure?"))) {
+ return;
+ }
+
+ return crmStatus(
+ {start: ts('Deleting...'), success: ts('Gone')},
+ crmApi4('PaymentprocessorWebhook', 'delete', {
+ where: [['id', '=', id]],
+ limit: 1
+ }))
+ .then(r => {
+ // Reload the page.
+ return ctrl.load();
+ });
+ };
+
+ this.retry = function(id) {
+ if (!(parseInt(id) > 0)) return;
+ if (!confirm(ts("Retrying an event could cause bad things to happen, depending on the event and the processor, so please be confident in your understanding of both. Schedule retry of this event?"))) {
+ return;
+ }
+
+ return crmStatus(
+ // Status messages. For defaults, just use "{}"
+ {start: ts('Updating...'), success: ts('Updated')},
+ crmApi4('PaymentprocessorWebhook', 'update', {
+ where: [['id', '=', id]],
+ values: {status: 'new', processed_date: null, message: ts('Scheduled for retry')},
+ limit: 1
+ }))
+ .then(r => {
+ // Reload the page.
+ return ctrl.load();
+ });
+ }
+
+
+ this.load();
+ });
+
+
+})(angular, CRM.$, CRM._);
diff --git a/mjwshared.civix.php b/mjwshared.civix.php
index e6899c0..4189703 100644
--- a/mjwshared.civix.php
+++ b/mjwshared.civix.php
@@ -221,7 +221,8 @@ function _mjwshared_civix_upgrader() {
* Search directory tree for files which match a glob pattern.
*
* Note: Dot-directories (like "..", ".git", or ".svn") will be ignored.
- * Note: In Civi 4.3+, delegate to CRM_Utils_File::findFiles()
+ * Note: Delegate to CRM_Utils_File::findFiles(), this function kept only
+ * for backward compatibility of extension code that uses it.
*
* @param string $dir base dir
* @param string $pattern , glob pattern, eg "*.txt"
@@ -229,32 +230,7 @@ function _mjwshared_civix_upgrader() {
* @return array
*/
function _mjwshared_civix_find_files($dir, $pattern) {
- if (is_callable(['CRM_Utils_File', 'findFiles'])) {
- return CRM_Utils_File::findFiles($dir, $pattern);
- }
-
- $todos = [$dir];
- $result = [];
- while (!empty($todos)) {
- $subdir = array_shift($todos);
- foreach (_mjwshared_civix_glob("$subdir/$pattern") as $match) {
- if (!is_dir($match)) {
- $result[] = $match;
- }
- }
- if ($dh = opendir($subdir)) {
- while (FALSE !== ($entry = readdir($dh))) {
- $path = $subdir . DIRECTORY_SEPARATOR . $entry;
- if ($entry[0] == '.') {
- }
- elseif (is_dir($path)) {
- $todos[] = $path;
- }
- }
- closedir($dh);
- }
- }
- return $result;
+ return CRM_Utils_File::findFiles($dir, $pattern);
}
/**
diff --git a/mjwshared.php b/mjwshared.php
index 7f0458a..97ae3eb 100644
--- a/mjwshared.php
+++ b/mjwshared.php
@@ -299,3 +299,33 @@ function mjwshared_symfony_preUpdateInsert(\Civi\Core\DAO\Event\PreUpdate $event
}
}
}
+/**
+ * Implements hook_civicrm_angularModules().
+ *
+ * Generate a list of Angular modules.
+ *
+ * Note: This hook only runs in CiviCRM 4.5+. It may
+ * use features only available in v4.6+.
+ *
+ * @link http://wiki.civicrm.org/confluence/display/CRMDOC/hook_civicrm_caseTypes
+ */
+function mjwshared_civicrm_angularModules(&$angularModules) {
+ _mjwshared_civix_civicrm_angularModules($angularModules);
+}
+
+/**
+ * Implements hook_civicrm_navigationMenu().
+ *
+ * @link http://wiki.civicrm.org/confluence/display/CRMDOC/hook_civicrm_navigationMenu
+ */
+function mjwshared_civicrm_navigationMenu(&$menu) {
+ _mjwshared_civix_insert_navigation_menu($menu, 'Administer/CiviContribute', array(
+ 'label' => E::ts('Payment processor webhooks', ['domain' => 'mjwshared']),
+ 'name' => 'mjwshared_paymentprocessor_webhooks',
+ 'url' => 'civicrm/a#/paymentprocessorWebhook',
+ 'permission' => 'administer payment processors',
+ 'operator' => 'OR',
+ 'separator' => 0,
+ ));
+ _mjwshared_civix_navigationMenu($menu);
+}
diff --git a/templates/CRM/mjwshared/PaymentprocessorWebhook.hlp b/templates/CRM/mjwshared/PaymentprocessorWebhook.hlp
new file mode 100644
index 0000000..ddea10c
--- /dev/null
+++ b/templates/CRM/mjwshared/PaymentprocessorWebhook.hlp
@@ -0,0 +1,3 @@
+{htxt id="full_name"}
+{ts}The contact name should be divided in two parts, the first name and last name.{/ts}
+{/htxt}
--
GitLab