From d20d654099ed7388b9d4353eca2fc0d8c5945194 Mon Sep 17 00:00:00 2001
From: Rich Lott / Artful Robot <code.commits@artfulrobot.uk>
Date: Tue, 9 Aug 2022 16:20:41 +0100
Subject: [PATCH] Fix style issues with Greenwich; also nicer formatting of raw
 data

---
 ang/mjwshared.css                          | 14 ++++++++++++--
 ang/mjwshared/PaymentprocessorWebhook.html |  2 +-
 ang/mjwshared/PaymentprocessorWebhook.js   | 14 +++++++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/ang/mjwshared.css b/ang/mjwshared.css
index 71d0ccb..027b591 100644
--- a/ang/mjwshared.css
+++ b/ang/mjwshared.css
@@ -6,9 +6,19 @@
 
 #paymentprocessor-webhooks-table tbody>tr { position: relative; }
 #paymentprocessor-webhooks-table tbody>tr.selected { position: relative; background-color: white; }
+
+/* Hack for Greenwich theme which sets color white */
+#paymentprocessor-webhooks-table tbody>tr.selected td { color: inherit; background-color: inherit; }
+/*
+* the following fixes Greenwich but will break other themes...
+#paymentprocessor-webhooks-table tbody>tr.selected td a:link,
+#paymentprocessor-webhooks-table tbody>tr.selected td a:visited,
+#paymentprocessor-webhooks-table tbody>tr.selected td a:active { color: inherit; background-color: inherit; }
+*/
+
 #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-table div.details .message { padding: 1.6rem; background: #fafafa; white-space: pre-wrap; font-size: 0.875em;}
+#paymentprocessor-webhooks-table div.details .raw { padding: 1.6rem; background: #fafafa; white-space: pre-wrap;  font-size: 0.875em; color: #444; line-height: 1.3; overflow: auto; font-family: monospace, monospace; }
 
 #paymentprocessor-webhooks div.pager {
   display: flex;
diff --git a/ang/mjwshared/PaymentprocessorWebhook.html b/ang/mjwshared/PaymentprocessorWebhook.html
index c28c02e..ee0bb37 100644
--- a/ang/mjwshared/PaymentprocessorWebhook.html
+++ b/ang/mjwshared/PaymentprocessorWebhook.html
@@ -95,7 +95,7 @@
               Type: <code>{{row.trigger}}</code>
             </p>
             <p>Full message:</p>
-            <div class="message">{{row.message}}</div>
+            <div class="message">{{row.message || '(none)'}}</div>
             <p>
               Raw data:
             </p>
diff --git a/ang/mjwshared/PaymentprocessorWebhook.js b/ang/mjwshared/PaymentprocessorWebhook.js
index 5ed8ae6..494cc6b 100644
--- a/ang/mjwshared/PaymentprocessorWebhook.js
+++ b/ang/mjwshared/PaymentprocessorWebhook.js
@@ -91,7 +91,19 @@
         crmApi4('PaymentprocessorWebhook', 'get', params)
         .then(r => {
           ctrl.resultsCount = r.count;
-          ctrl.events = r;
+          ctrl.events = r.map(row => {
+            // See if we can pretty up the raw data.
+            if (row.data) {
+                try {
+                  const parsed = JSON.parse(row.data);
+                  if (parsed) {
+                    row.data = JSON.stringify(parsed, null, 2);
+                  }
+                }
+                catch (e) { }
+              }
+              return row;
+            });
         })
       );
     };
-- 
GitLab