From 978881c2b372436876ff8bf4c4809c906e7232bf Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Thu, 29 Jul 2021 13:26:01 -0700
Subject: [PATCH] msgtplui - (WIP) Add icon to edit example data

This converts the example to JSON and puts up an edit blob. Issue:

- Edit block is too big (*should only be 15%...*)
- Need to regen JSON when navigating between examples
- Need to periodically refresh example
---
 ext/msgtplui/ang/msgtplui/Preview.html | 12 ++++++++++++
 ext/msgtplui/ang/msgtplui/Preview.js   |  7 +++++++
 2 files changed, 19 insertions(+)

diff --git a/ext/msgtplui/ang/msgtplui/Preview.html b/ext/msgtplui/ang/msgtplui/Preview.html
index a3ddd17782..e3c6b28fee 100644
--- a/ext/msgtplui/ang/msgtplui/Preview.html
+++ b/ext/msgtplui/ang/msgtplui/Preview.html
@@ -1,5 +1,7 @@
 <div id="bootstrap-theme" crm-dialog="previewMsgDlg" ng-controller="MsgtpluiPreviewCtrl as $ctrl">
 
+  <div crm-ui-debug="$ctrl"></div>
+
   <form name="previewMsgForm">
 
     <nav class="navbar navbar-default">
@@ -37,12 +39,22 @@
           <div class="input-group col-sm-9">
             <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-click="$ctrl.cycle('exampleId', 'examples', -1)">&#xab;</button>
               <button class="btn btn-default" ng-click="$ctrl.cycle('exampleId', 'examples', +1)">&#xbb;</button>
             </div>
           </div>
         </div>
 
+        <div class="form-group" ng-if="$ctrl.isAdhocExample">
+          <label class="control-label col-sm-2"></label>
+          <div class="input-group col-sm-9"></div>
+          <div ng-model="$ctrl.adhocExampleJson"
+               crm-monaco="$ctrl.monacoOptions({language: 'javascript', crmHeightPct: 0.15})"
+          ></div>
+          <p><em>{{ts('Changes to this data are temporary.')}}</em></p>
+        </div>
+
         <div class="form-group">
           <label class="control-label col-sm-2">{{::ts('Format')}}</label>
           <div class="input-group col-sm-9">
diff --git a/ext/msgtplui/ang/msgtplui/Preview.js b/ext/msgtplui/ang/msgtplui/Preview.js
index d153d469e5..91684634cd 100644
--- a/ext/msgtplui/ang/msgtplui/Preview.js
+++ b/ext/msgtplui/ang/msgtplui/Preview.js
@@ -13,6 +13,13 @@
       $ctrl[idFld] = ($ctrl[idFld] + delta) % model[listFld].length;
     };
 
+    $ctrl.adhocExample = {};
+    $ctrl.isAdhocExample = false;
+    $ctrl.toggleAdhoc = function(value){
+      $ctrl.isAdhocExample = !$ctrl.isAdhocExample;
+      $ctrl.adhocExampleJson = angular.toJson(model.examples[$ctrl.exampleId], 2);
+    };
+
     var lastId = null;
     var update = function update() {
       var id = $ctrl.revisionId + ':' + $ctrl.exampleId;
-- 
2.25.1