From 374135597f096caccdabf617d655a46e35fff1f3 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Wed, 25 Nov 2020 11:13:02 -0800
Subject: [PATCH] afGuiEditor - Add optional preview of HTML output

---
 ext/afform/gui/ang/afGuiEditor.ang.php     |  2 +-
 ext/afform/gui/ang/afGuiEditor.js          | 12 ++++++++++++
 ext/afform/gui/ang/afGuiEditor/canvas.html | 11 +++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/ext/afform/gui/ang/afGuiEditor.ang.php b/ext/afform/gui/ang/afGuiEditor.ang.php
index cea47a8d19..09e0a2c95b 100644
--- a/ext/afform/gui/ang/afGuiEditor.ang.php
+++ b/ext/afform/gui/ang/afGuiEditor.ang.php
@@ -7,7 +7,7 @@ return [
   ],
   'css' => ['ang/afGuiEditor.css'],
   'partials' => ['ang/afGuiEditor'],
-  'requires' => ['crmUi', 'crmUtil', 'dialogService', 'api4'],
+  'requires' => ['crmUi', 'crmUtil', 'dialogService', 'api4', 'crmMonaco'],
   'settings' => [],
   'basePages' => [],
   'exports' => [
diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js
index 546fe8a766..cf67d84e85 100644
--- a/ext/afform/gui/ang/afGuiEditor.js
+++ b/ext/afform/gui/ang/afGuiEditor.js
@@ -63,6 +63,7 @@
             }
           }
           $scope.canvasTab = 'layout';
+          $scope.layoutHtml = '';
           $scope.layout = findRecursive($scope.afform.layout, {'#tag': 'af-form'})[0];
           $scope.entities = findRecursive($scope.layout['#children'], {'#tag': 'af-entity'}, 'name');
 
@@ -78,6 +79,17 @@
           }, true);
         }
 
+        $scope.updateLayoutHtml = function() {
+          $scope.layoutHtml = '...Loading...';
+          crmApi4('Afform', 'convert', {layout: [$scope.layout], from: 'deep', to: 'html', formatWhitespace: true})
+            .then(function(r){
+              $scope.layoutHtml = r[0].layout || '(Error)';
+            })
+            .catch(function(r){
+              $scope.layoutHtml = '(Error)';
+            });
+        };
+
         this.addEntity = function(type) {
           var meta = editor.meta.entities[type],
             num = 1;
diff --git a/ext/afform/gui/ang/afGuiEditor/canvas.html b/ext/afform/gui/ang/afGuiEditor/canvas.html
index 6f7a9b1de0..484a543cc8 100644
--- a/ext/afform/gui/ang/afGuiEditor/canvas.html
+++ b/ext/afform/gui/ang/afGuiEditor/canvas.html
@@ -16,10 +16,21 @@
           <span>{{ ts('Form Layout') }}</span>
         </a>
       </li>
+      <li role="presentation" ng-class="{active: canvasTab === 'markup'}">
+        <a ng-click="canvasTab = 'markup'; updateLayoutHtml()">
+          <span>{{ ts('Markup') }}</span>
+        </a>
+      </li>
     </ul>
 
   </div>
   <div id="afGuiEditor-canvas-body" class="panel-body" ng-if="canvasTab === 'layout'">
     <div ng-if="layout" af-gui-container="layout" entity-name="" />
   </div>
+  <div class="panel-body" ng-if="canvasTab === 'markup'">
+    <p class="help-block">{{ts('This is a read-only preview of the auto-generated markup.')}}</p>
+    <!-- Wiring up edit mode wouldn't be super-hard in itself, but it's not worthwhile until we have validation to ensure that GUI+raw content are exchangeable  -->
+    <div crm-monaco="{readOnly: true}" ng-model="layoutHtml"></div>
+  </div>
+
 </div>
-- 
2.25.1