From 07b40e19c5c14861405f262dbc13eda416c722a6 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Tue, 5 Oct 2021 15:40:24 -0700
Subject: [PATCH] message_admin (Preview) - Add drill-down for example data

---
 ext/message_admin/ang/crmMsgadm.ang.php       |  1 +
 .../ang/crmMsgadm/InspectExample.html         | 24 ++++++++++++
 ext/message_admin/ang/crmMsgadm/Preview.html  |  1 +
 ext/message_admin/ang/crmMsgadm/Preview.js    | 37 ++++++++++++++++++-
 4 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 ext/message_admin/ang/crmMsgadm/InspectExample.html

diff --git a/ext/message_admin/ang/crmMsgadm.ang.php b/ext/message_admin/ang/crmMsgadm.ang.php
index c7d9c84659..22bcbe64fe 100644
--- a/ext/message_admin/ang/crmMsgadm.ang.php
+++ b/ext/message_admin/ang/crmMsgadm.ang.php
@@ -24,6 +24,7 @@ return [
     'crmDialog',
     'crmMailing',
     'crmMonaco',
+    'jsonFormatter',
     'ngRoute',
     'ngSanitize',
     'api4',
diff --git a/ext/message_admin/ang/crmMsgadm/InspectExample.html b/ext/message_admin/ang/crmMsgadm/InspectExample.html
new file mode 100644
index 0000000000..c7a8a3fe56
--- /dev/null
+++ b/ext/message_admin/ang/crmMsgadm/InspectExample.html
@@ -0,0 +1,24 @@
+<div id="bootstrap-theme" crm-dialog="inspectExampleDlg">
+
+  <nav class="navbar navbar-default">
+    <div class="container-fluid">
+      <div class="navbar-header">
+        <div class="navbar-brand">
+          {{::model.title}}
+        </div>
+      </div>
+      <div class="navbar-form navbar-right">
+        <div class="form-group">
+          <button crm-icon="fa-refresh" type="button" class="btn btn-default" ng-click="model.refresh()"></button>
+          <button crm-icon="fa-times" type="button" class="btn btn-default" ng-click="inspectExampleDlg.close()">
+            {{::ts('Close')}}
+          </button>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+
+  <json-formatter json="model.data" open="1"></json-formatter>
+
+</div>
diff --git a/ext/message_admin/ang/crmMsgadm/Preview.html b/ext/message_admin/ang/crmMsgadm/Preview.html
index 925f8ee08b..bd09af3fd1 100644
--- a/ext/message_admin/ang/crmMsgadm/Preview.html
+++ b/ext/message_admin/ang/crmMsgadm/Preview.html
@@ -40,6 +40,7 @@
             <select class="form-control" ng-options="item.id as item.title for item in model.examples" ng-model="$ctrl.exampleId"></select>
             <div class="input-group-btn">
               <!-- <button class="btn btn-default" ng-click="$ctrl.toggleAdhoc()" crm-icon="fa-pencil"></button> -->
+              <button class="btn btn-default" ng-disabled="model.examples.length <= 1" ng-click="$ctrl.inspectExample()" title="{{::ts('Inspect example data')}}"><i class="crm-i fa-file-code-o"></i></button>
               <button class="btn btn-default" ng-disabled="model.examples.length <= 1" ng-click="$ctrl.cycle('exampleId', 'examples', -1)">&#xab;</button>
               <button class="btn btn-default" ng-disabled="model.examples.length <= 1" ng-click="$ctrl.cycle('exampleId', 'examples', +1)">&#xbb;</button>
             </div>
diff --git a/ext/message_admin/ang/crmMsgadm/Preview.js b/ext/message_admin/ang/crmMsgadm/Preview.js
index f2f5e1e21a..bf4a32ff9c 100644
--- a/ext/message_admin/ang/crmMsgadm/Preview.js
+++ b/ext/message_admin/ang/crmMsgadm/Preview.js
@@ -1,6 +1,6 @@
 (function(angular, $, _) {
 
-  angular.module('crmMsgadm').controller('MsgtpluiPreviewCtrl', function($scope, crmUiHelp, crmStatus, crmApi4, crmUiAlert, $timeout, $q) {
+  angular.module('crmMsgadm').controller('MsgtpluiPreviewCtrl', function($scope, crmUiHelp, crmStatus, crmApi4, crmUiAlert, $timeout, $q, dialogService) {
     var ts = $scope.ts = CRM.ts('crmMsgadm');
     var hs = $scope.hs = crmUiHelp({file: 'CRM/MessageAdmin/crmMsgadm'}); // See: templates/CRM/MessageAdmin/crmMsgadm.hlp
 
@@ -20,6 +20,35 @@
       $ctrl.adhocExampleJson = angular.toJson(model.examples[$ctrl.exampleId], 2);
     };
 
+    $ctrl.inspectExample = function() {
+      var dlgModel = {
+        title: '',
+        data: {}
+      };
+      var dlgOptions = CRM.utils.adjustDialogDefaults({
+        dialogClass: 'crm-msgadm-dialog',
+        autoOpen: false,
+        height: '80%',
+        width: '80%'
+      });
+
+      dlgModel.refresh = function(){
+        return crmApi4('ExampleData', 'get', {
+          where: [["name", "=", model.examples[$ctrl.exampleId].name]],
+          select: ['name', 'file', 'title', 'data']
+        }).then(function(response){
+          dlgModel.title = ts('Example: %1', {1: response[0].title || response[0].name});
+          dlgModel.data = response[0];
+        });
+      };
+
+      dlgModel.refresh().then(function(){
+        return dialogService.open('inspectExampleDlg', '~/crmMsgadm/InspectExample.html', dlgModel, dlgOptions)
+          // Nothing to do but hide warnings.
+          .then(forceUpdate, forceUpdate);
+      });
+    };
+
     function requestAdhocExample() {
       var adhocExample;
       try {
@@ -41,7 +70,7 @@
       // For a dev working on example, it's easier if the example is always loaded fresh.
       return crmApi4('ExampleData', 'get', {
         where: [["name", "=", model.examples[$ctrl.exampleId].name]],
-        select: ['data'],
+        select: ['name', 'file', 'title', 'data'],
         chain: {
           "render": ["WorkflowMessage", "render", {
             "workflow": "$data.workflow",
@@ -71,6 +100,10 @@
       });
       return crmStatus({start: ts('Rendering...'), success: ''}, rendering);
     };
+    function forceUpdate() {
+      lastId = null;
+      return update();
+    }
 
     $scope.$watch('$ctrl.revisionId', update);
     $scope.$watch('$ctrl.formatId', update);
-- 
2.25.1