From 1aac4625a4672753c68e72ecf2be69a722b4bfde Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Fri, 3 May 2019 23:30:07 -0700
Subject: [PATCH] afform_html - Skeletal page with Monaco (Angular-based; no
 saving)

Example URL: http://dmaster.bknix:8001/civicrm/admin/afform-html/#/?name=afformExamplepage
---
 ext/afform/html/ang/afMoncao.ang.php          | 22 +++++++++
 ext/afform/html/ang/afMoncao.css              |  1 +
 ext/afform/html/ang/afMoncao.js               | 45 +++++++++++++++++++
 ext/afform/html/ang/afformHtmlEditor.aff.html | 17 +++++++
 ext/afform/html/ang/afformHtmlEditor.aff.json |  4 ++
 5 files changed, 89 insertions(+)
 create mode 100644 ext/afform/html/ang/afMoncao.ang.php
 create mode 100644 ext/afform/html/ang/afMoncao.css
 create mode 100644 ext/afform/html/ang/afMoncao.js
 create mode 100644 ext/afform/html/ang/afformHtmlEditor.aff.html
 create mode 100644 ext/afform/html/ang/afformHtmlEditor.aff.json

diff --git a/ext/afform/html/ang/afMoncao.ang.php b/ext/afform/html/ang/afMoncao.ang.php
new file mode 100644
index 0000000000..a1c6c88687
--- /dev/null
+++ b/ext/afform/html/ang/afMoncao.ang.php
@@ -0,0 +1,22 @@
+<?php
+// This file declares an Angular module which can be autoloaded
+// in CiviCRM. See also:
+// http://wiki.civicrm.org/confluence/display/CRMDOC/hook_civicrm_angularModules
+
+return array(
+  'js' => [
+    'node_modules/monaco-editor/min/vs/loader.js',
+    'ang/afMoncao.js',
+    //    'ang/afMoncao/*.js',
+    //    'ang/afMoncao/*/*.js',
+  ],
+  'css' => ['ang/afMoncao.css'],
+  // 'partials' => ['ang/afMoncao'],
+  'requires' => ['crmUi', 'crmUtil'],
+  'settings' => [
+    'paths' => [
+      'vs' => CRM_AfformHtml_ExtensionUtil::url('node_modules/monaco-editor/min/vs'),
+    ],
+  ],
+  'basePages' => [],
+);
diff --git a/ext/afform/html/ang/afMoncao.css b/ext/afform/html/ang/afMoncao.css
new file mode 100644
index 0000000000..1abf4a2fed
--- /dev/null
+++ b/ext/afform/html/ang/afMoncao.css
@@ -0,0 +1 @@
+/* Add any CSS rules for Angular module "afMoncao" */
diff --git a/ext/afform/html/ang/afMoncao.js b/ext/afform/html/ang/afMoncao.js
new file mode 100644
index 0000000000..718980a231
--- /dev/null
+++ b/ext/afform/html/ang/afMoncao.js
@@ -0,0 +1,45 @@
+(function(angular, $, _) {
+  angular.module('afMoncao', CRM.angRequires('afMoncao'));
+
+  // "afMonaco" is a basic skeletal directive.
+  // Example usage: <div af-monaco ng-model="my.content"></div>
+  angular.module('afMoncao').directive('afMonaco', function() {
+    return {
+      restrict: 'AE',
+      require: 'ngModel',
+      template: '<div id="myContainer" style="width:800px;height:600px;border:1px solid grey"></div>',
+      link: function($scope, $el, $attr, ngModel) {
+        var editor;
+        require.config({paths: CRM.afMoncao.paths});
+        require(['vs/editor/editor.main'], function() {
+          editor = monaco.editor.create(document.getElementById('myContainer'), {
+            value: ngModel.$modelValue,
+            language: 'html',
+            theme: 'vs-dark',
+            minimap: {
+              enabled: false
+            }
+          });
+
+          editor.onDidChangeModelContent(_.debounce(function () {
+            $scope.$apply(function () {
+              ngModel.$setViewValue(editor.getValue());
+            });
+          }, 150));
+
+          ngModel.$render = function() {
+            if (editor) {
+              editor.setValue(ngModel.$modelValue);
+            }
+            // FIXME: else: retry?
+          };
+
+          $scope.$on('$destroy', function () {
+            if (editor) editor.dispose();
+          });
+        });
+      }
+    };
+  });
+
+})(angular, CRM.$, CRM._);
diff --git a/ext/afform/html/ang/afformHtmlEditor.aff.html b/ext/afform/html/ang/afformHtmlEditor.aff.html
new file mode 100644
index 0000000000..af9419920a
--- /dev/null
+++ b/ext/afform/html/ang/afformHtmlEditor.aff.html
@@ -0,0 +1,17 @@
+<div ng-if="!routeParams.name">
+  {{ts('Please provide the form "name" parameter.')}}
+</div>
+
+<div ng-if="routeParams.name"
+     aff-api4="['Afform', 'get', {layoutFormat: 'html', where: [['name', '=', routeParams.name]]}]"
+     aff-api4-ctrl="apiData">
+
+  <div ng-if="apiData.result.length == 0">
+    {{ts('Failed to find requested form.')}}
+  </div>
+
+  <div ng-repeat="resultForm in apiData.result" ng-if="apiData.result.length > 0">
+    <div crm-ui-debug="resultForm.layout"></div>
+    <div af-monaco ng-model="resultForm.layout"></div>
+  </div>
+</div>
diff --git a/ext/afform/html/ang/afformHtmlEditor.aff.json b/ext/afform/html/ang/afformHtmlEditor.aff.json
new file mode 100644
index 0000000000..231015f701
--- /dev/null
+++ b/ext/afform/html/ang/afformHtmlEditor.aff.json
@@ -0,0 +1,4 @@
+{
+  "server_route": "civicrm/admin/afform-html",
+  "requires":["afformCore", "afMoncao"]
+}
-- 
2.25.1