From 947ee009a41632289ea9775a747449860e314cba Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Sun, 20 Jun 2021 15:09:38 -0700
Subject: [PATCH] msgtplui - EditContent - Add controller. Basic tokens.
 Skeletal buttons.

---
 ext/msgtplui/ang/msgtplui.ang.php             |  3 +-
 ext/msgtplui/ang/msgtplui/Edit.html           |  3 +-
 ext/msgtplui/ang/msgtplui/EditContent.html    | 50 +++++++++++++++++++
 ext/msgtplui/ang/msgtplui/EditContent.js      | 34 +++++++++++++
 ext/msgtplui/ang/msgtpluiEditContent.aff.html | 20 --------
 5 files changed, 88 insertions(+), 22 deletions(-)
 create mode 100644 ext/msgtplui/ang/msgtplui/EditContent.html
 create mode 100644 ext/msgtplui/ang/msgtplui/EditContent.js
 delete mode 100644 ext/msgtplui/ang/msgtpluiEditContent.aff.html

diff --git a/ext/msgtplui/ang/msgtplui.ang.php b/ext/msgtplui/ang/msgtplui.ang.php
index 4d9eaa8103..4d05f3e911 100644
--- a/ext/msgtplui/ang/msgtplui.ang.php
+++ b/ext/msgtplui/ang/msgtplui.ang.php
@@ -22,7 +22,8 @@ return [
     'crmUi',
     'crmUtil',
     'crmDialog',
-    'msgtpluiEditContent',
+    'crmMailing',
+    'crmMonaco',
     'ngRoute',
     'ngSanitize',
     'api4',
diff --git a/ext/msgtplui/ang/msgtplui/Edit.html b/ext/msgtplui/ang/msgtplui/Edit.html
index 18a8915b20..047031c3f4 100644
--- a/ext/msgtplui/ang/msgtplui/Edit.html
+++ b/ext/msgtplui/ang/msgtplui/Edit.html
@@ -37,7 +37,8 @@
         </li>
       </ul>
       <div class="panel-body">
-        <msgtplui-edit-content options="{record: $ctrl.records[$ctrl.tab], disabled: $ctrl.tab==='original'}"></msgtplui-edit-content>
+        <msgtplui-edit-content options="{record: $ctrl.records[$ctrl.tab], disabled: true}" ng-if="$ctrl.tab==='original'"></msgtplui-edit-content>
+        <msgtplui-edit-content options="{record: $ctrl.records[$ctrl.tab]}" ng-if="$ctrl.tab!=='original'"></msgtplui-edit-content>
         <div class="text-center">
           <div class="btn-group">
             <button type="button" class="btn btn-success" ng-if="$ctrl.tab.match('txActive|original') && !$ctrl.hasDraft()" ng-click="$ctrl.createDraft($ctrl.records[$ctrl.tab])"><i class="fa fa-clone"/> {{ts('Create draft')}}</button>
diff --git a/ext/msgtplui/ang/msgtplui/EditContent.html b/ext/msgtplui/ang/msgtplui/EditContent.html
new file mode 100644
index 0000000000..bc0dedba3e
--- /dev/null
+++ b/ext/msgtplui/ang/msgtplui/EditContent.html
@@ -0,0 +1,50 @@
+<div crm-ui-debug="options"></div>
+
+<ng-form name="contentForm" crm-ui-id-scope>
+
+  <div crm-ui-accordion="{title: ts('Subject'), collapsed: false}">
+    <input crm-mailing-token on-select="$emit('insert:msg_subject', token.name)" tabindex="-1" style="z-index:1">
+    <div
+      ng-model="options.record.msg_subject"
+      crm-monaco="$ctrl.monacoOptions({language: 'smarty', crmHeightPct: 0.15})"
+      crm-monaco-insert-rx="insert:msg_subject"
+    ></div>
+    <p class="help-block">{{::ts('The email subject is a single line. However, template codes may use multiple lines.')}}</p>
+  </div>
+
+  <div crm-ui-accordion="{title: ts('HTML Content'), collapsed: false}">
+    <div class="btn-toolbar" role="toolbar" aria-label="...">
+      <div class="btn-group-sm" role="group" aria-label="...">
+        <button type="button" class="btn btn-default" ng-click="$ctrl.openFull('msg_html')">{{ts('Full Window')}}</button>
+        <button type="button" class="btn btn-default" ng-click="$ctrl.openPreview('msg_html')">{{ts('Preview')}}</button>
+      </div>
+      <div class="btn-group-sm" role="group" aria-label="...">
+        <input crm-mailing-token on-select="$emit('insert:msg_html', token.name)" tabindex="-1" style="z-index:1">
+      </div>
+    </div>
+    <div
+      ng-model="options.record.msg_html"
+      crm-monaco="$ctrl.monacoOptions({language: 'html', crmHeightPct: 0.5})"
+      crm-monaco-insert-rx="insert:msg_html"
+    ></div>
+  </div>
+
+  <div crm-ui-accordion="{title: ts('Text Content'), collapsed: true}">
+    <div class="btn-toolbar" role="toolbar" aria-label="...">
+      <div class="btn-group" role="group" aria-label="...">
+        <button type="button" class="btn btn-default" ng-click="$ctrl.openFull('msg_text')">{{ts('Full Window')}}</button>
+        <button type="button" class="btn btn-default" ng-click="$ctrl.openPreview('msg_text')">{{ts('Preview')}}</button>
+      </div>
+      <div class="btn-group" role="group" aria-label="...">
+        <input crm-mailing-token on-select="$emit('insert:msg_text', token.name)" tabindex="-1" style="z-index:1">
+      </div>
+    </div>
+
+    <div
+      ng-model="options.record.msg_text"
+      crm-monaco="$ctrl.monacoOptions({language: 'smarty', crmHeightPct: 0.5})"
+      crm-monaco-insert-rx="insert:msg_text"
+    ></div>
+  </div>
+
+</ng-form>
diff --git a/ext/msgtplui/ang/msgtplui/EditContent.js b/ext/msgtplui/ang/msgtplui/EditContent.js
new file mode 100644
index 0000000000..71797e43db
--- /dev/null
+++ b/ext/msgtplui/ang/msgtplui/EditContent.js
@@ -0,0 +1,34 @@
+(function (angular, $, _) {
+  angular.module('msgtplui').component('msgtpluiEditContent', {
+    bindings: {
+      options: '='
+    },
+    templateUrl: '~/msgtplui/EditContent.html',
+    controller: function ($scope, $element, crmStatus, crmUiAlert) {
+      var ts = $scope.ts = CRM.ts('msgtplui');
+      var $ctrl = this;
+      $ctrl.$onInit = function () {
+        $scope.options = $ctrl.options;
+      };
+
+      $ctrl.monacoOptions = function (opts) {
+        return angular.extend({}, {
+          readOnly: $ctrl.options.disabled,
+          wordWrap: 'wordWrapColumn',
+          wordWrapColumn: 100,
+          wordWrapMinified: false,
+          wrappingIndent: 'indent'
+        }, opts);
+      };
+
+      $ctrl.openFull = function(fld) {
+        crmUiAlert({type: 'error', title: ts('TODO'), text: ts('Not yet implemented')});
+      };
+
+      $ctrl.openPreview = function(fld) {
+        crmUiAlert({type: 'error', title: ts('TODO'), text: ts('Not yet implemented')});
+      };
+
+    }
+  });
+})(angular, CRM.$, CRM._);
diff --git a/ext/msgtplui/ang/msgtpluiEditContent.aff.html b/ext/msgtplui/ang/msgtpluiEditContent.aff.html
deleted file mode 100644
index 8d7bc13aa2..0000000000
--- a/ext/msgtplui/ang/msgtpluiEditContent.aff.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div crm-ui-debug="options"></div>
-
-<ng-form name="content_form">
-
-  <div crm-ui-accordion="{title: ts('Subject'), collapsed: false}">
-    <msgtplui-monaco
-      options="{disabled: options.disabled, record: options.record, field: 'msg_subject', language: 'smarty', crmHeightPct: 0.15}">
-    </msgtplui-monaco>
-    <p class="help-block">{{::ts('The email subject is a single line. However, template codes may use multiple lines.')}}</p>
-  </div>
-
-  <div crm-ui-accordion="{title: ts('HTML Content'), collapsed: false}">
-    <msgtplui-monaco options="{disabled: options.disabled, record: options.record, field: 'msg_html', language: 'html', crmHeightPct: 0.5}"></msgtplui-monaco>
-  </div>
-
-  <div crm-ui-accordion="{title: ts('Text Content'), collapsed: true}">
-    <msgtplui-monaco options="{disabled: options.disabled, record: options.record, field: 'msg_text', language: 'smarty', crmHeightPct: 0.5}"></msgtplui-monaco>
-  </div>
-
-</ng-form>
-- 
2.25.1