afGuiEditor - Add optional preview of HTML output

diff --git a/ext/afform/gui/ang/afGuiEditor.ang.php b/ext/afform/gui/ang/afGuiEditor.ang.php
index cea47a8d19f268a8165632029330429278453482..09e0a2c95bcab9ba4003ea25087871deb21d98fe 100644 (file)
--- 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 546fe8a76683fa3c8bcbfd722137dc26d6e80174..cf67d84e85820740e275e776dc69dc7a9c1795cc 100644 (file)
--- 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 6f7a9b1de01a3add9b2c8f7433af1df625bed66f..484a543cc8c3ea82e75261135adadb825408c3a9 100644 (file)
--- 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>