From b48aae2da9f57f8e1e118ab2c87203692767829b Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Mon, 21 Jun 2021 23:30:59 -0700
Subject: [PATCH] msgtplui - Preview dialog - Add placeholder

---
 ext/msgtplui/ang/msgtplui/Edit.js           | 51 ++++++++++++++++++++-
 ext/msgtplui/ang/msgtplui/EditContent.html  |  4 +-
 ext/msgtplui/ang/msgtplui/EditContent.js    | 11 +++--
 ext/msgtplui/ang/msgtplui/ExpandedEdit.html |  2 +-
 ext/msgtplui/ang/msgtplui/Preview.html      | 44 ++++++++++++++++++
 5 files changed, 104 insertions(+), 8 deletions(-)
 create mode 100644 ext/msgtplui/ang/msgtplui/Preview.html

diff --git a/ext/msgtplui/ang/msgtplui/Edit.js b/ext/msgtplui/ang/msgtplui/Edit.js
index 8be09712ee..cf923252bf 100644
--- a/ext/msgtplui/ang/msgtplui/Edit.js
+++ b/ext/msgtplui/ang/msgtplui/Edit.js
@@ -150,13 +150,20 @@
     }
   );
 
-  angular.module('msgtplui').controller('MsgtpluiEdit', function($q, $scope, crmApi4, crmBlocker, crmStatus, crmUiAlert, crmUiHelp, $location, prefetch, tokenList) {
+  angular.module('msgtplui').controller('MsgtpluiEdit', function($q, $scope, crmApi4, crmBlocker, crmStatus, crmUiAlert, crmUiHelp, $location, prefetch, tokenList, $rootScope, dialogService) {
     var block = $scope.block = crmBlocker();
     var ts = $scope.ts = CRM.ts('msgtplui');
     var hs = $scope.hs = crmUiHelp({file: 'CRM/Msgtplui/Edit'}); // See: templates/CRM/Msgtplui/Edit.hlp
     var $ctrl = this;
     var args = $location.search();
 
+    var revisionTypes = {
+      main: {name: 'main', label: ts('Main')},
+      txActive: {name: 'txActive', label: ts('Current translation')},
+      txDraft: {name: 'txDraft', label: ts('Draft translation')},
+      original: {name: 'original', label: ts('Original')}
+    };
+
     $ctrl.locales = CRM.msgtplui.uiLanguages;
     $ctrl.records = prefetch;
     $ctrl.tokenList = tokenList;
@@ -223,6 +230,48 @@
       return block(crmStatus({start: ts('Deleting...'), success: ts('Deleted')}, crmApi4(requests)))
         .then($ctrl.cancel);
     };
+
+    // Ex: $rootScope.$emit('previewMsgTpl', {revisionName: 'txDraft', formatName: 'msg_text'})
+    function onPreview(event, args) {
+
+      var defaults = {
+        exampleName: 'fix-this-example',
+        examples: [{id: 0, name: 'fix-this-example', label: ts('Fix this example')}],
+        formatName: 'msg_html',
+        formats: [
+          {id: 0, name: 'msg_html', label: ts('HTML')},
+          {id: 1, name: 'msg_text', label: ts('Text')}
+        ],
+        revisionName: $ctrl.tab,
+        revisions: _.reduce($ctrl.records, function(acc, rec, key){
+          acc.push(angular.extend({id: acc.length, rec: rec}, revisionTypes[key]));
+          return acc;
+        }, []),
+        title: ts('Preview')
+      };
+      var model = angular.extend({}, defaults, args);
+      model.exampleId = parseInt(_.findKey(model.examples, {name: model.exampleName}));
+      model.revisionId = parseInt(_.findKey(model.revisions, {name: model.revisionName}));
+      model.formatId = parseInt(_.findKey(model.formats, {name: model.formatName}));
+      delete model.exampleName;
+      delete model.revisionName;
+      delete model.formatName;
+
+      var options = CRM.utils.adjustDialogDefaults({
+        dialogClass: 'msgtplui-dialog',
+        autoOpen: false,
+        height: '90%',
+        width: '90%'
+      });
+      return dialogService.open('previewMsgDlg', '~/msgtplui/Preview.html', model, options)
+        // Nothing to do but hide warnings. The field was edited live.
+        .then(function(){}, function(){});
+
+    }
+    $rootScope.$on('previewMsgTpl', onPreview);
+    $rootScope.$on('$destroy', function (){
+      $rootScope.$off('previewMsgTpl', onPreview);
+    });
   });
 
 })(angular, CRM.$, CRM._);
diff --git a/ext/msgtplui/ang/msgtplui/EditContent.html b/ext/msgtplui/ang/msgtplui/EditContent.html
index 7c34efe3c6..14fedf2fd4 100644
--- a/ext/msgtplui/ang/msgtplui/EditContent.html
+++ b/ext/msgtplui/ang/msgtplui/EditContent.html
@@ -38,7 +38,7 @@
         <button type="button" class="btn btn-default" title="{{::ts('Open large editor')}}" ng-click="$ctrl.openFull(ts('HTML Content'), 'msg_html', {language: 'html'})">
           <span class="fa fa-expand" aria-hidden="true"></span>
         </button>
-        <button type="button" class="btn btn-default" title="{{::ts('Open preview')}}" ng-click="$ctrl.openPreview('msg_html')">
+        <button type="button" class="btn btn-default" title="{{::ts('Open preview')}}" ng-click="$ctrl.openPreview({formatName: 'msg_html'})">
           <span class="fa fa-eye" aria-hidden="true"></span>
         </button>
         <!--<button type="button" class="btn btn-default" title="{{::ts('Insert token')}}" ng-click="$ctrl.insertToken('msg_html')" crm-icon="fa-plus">-->
@@ -70,7 +70,7 @@
         <button type="button" class="btn btn-default" title="{{::ts('Open large editor')}}" ng-click="$ctrl.openFull(ts('Text Content'), 'msg_text', {language: 'smarty'})">
           <span class="fa fa-expand" aria-hidden="true"></span>
         </button>
-        <button type="button" class="btn btn-default" title="{{::ts('Open preview')}}" ng-click="$ctrl.openPreview('msg_text')">
+        <button type="button" class="btn btn-default" title="{{::ts('Open preview')}}" ng-click="$ctrl.openPreview({formatName: 'msg_text'})">
           <span class="fa fa-eye" aria-hidden="true"></span>
         </button>
         <!--<button type="button" class="btn btn-default" title="{{::ts('Insert token')}}" ng-click="$ctrl.insertToken('msg_text')" crm-icon="fa-plus">-->
diff --git a/ext/msgtplui/ang/msgtplui/EditContent.js b/ext/msgtplui/ang/msgtplui/EditContent.js
index 3bd3a46077..b4d38f976b 100644
--- a/ext/msgtplui/ang/msgtplui/EditContent.js
+++ b/ext/msgtplui/ang/msgtplui/EditContent.js
@@ -1,10 +1,11 @@
 (function (angular, $, _) {
   angular.module('msgtplui').component('msgtpluiEditContent', {
     bindings: {
+      onPreview: '&',
       options: '='
     },
     templateUrl: '~/msgtplui/EditContent.html',
-    controller: function ($scope, $element, crmStatus, crmUiAlert, dialogService) {
+    controller: function ($scope, $element, crmStatus, crmUiAlert, dialogService, $rootScope) {
       var ts = $scope.ts = CRM.ts('msgtplui');
       var $ctrl = this;
 
@@ -22,7 +23,9 @@
         var model = {
           title: title,
           monacoOptions: $ctrl.monacoOptions(angular.extend({crmHeightPct: 0.80}, monacoOptions)),
-          openPreview: function() { return $ctrl.openPreview(model.field); },
+          openPreview: function(options) {
+            return $ctrl.openPreview(options);
+          },
           record: $ctrl.options.record,
           field: fld,
           tokenList: $ctrl.options.tokenList
@@ -39,8 +42,8 @@
           .then(function(){}, function(){});
       };
 
-      $ctrl.openPreview = function(fld) {
-        crmUiAlert({type: 'error', title: ts('TODO: openPreview'), text: ts('Not yet implemented')});
+      $ctrl.openPreview = function(options) {
+        $rootScope.$emit('previewMsgTpl', options);
       };
 
     }
diff --git a/ext/msgtplui/ang/msgtplui/ExpandedEdit.html b/ext/msgtplui/ang/msgtplui/ExpandedEdit.html
index d2258e6695..204cc21ac0 100644
--- a/ext/msgtplui/ang/msgtplui/ExpandedEdit.html
+++ b/ext/msgtplui/ang/msgtplui/ExpandedEdit.html
@@ -11,7 +11,7 @@
         </div>
         <div class="navbar-form navbar-right">
           <div class="form-group">
-            <button type="button" class="btn btn-default" ng-click="model.openPreview()">
+            <button type="button" class="btn btn-default" ng-click="model.openPreview({formatName: model.field})">
               <span class="fa fa-eye" aria-hidden="true"></span>
               {{::ts('Preview')}}
             </button>
diff --git a/ext/msgtplui/ang/msgtplui/Preview.html b/ext/msgtplui/ang/msgtplui/Preview.html
new file mode 100644
index 0000000000..a4312c1195
--- /dev/null
+++ b/ext/msgtplui/ang/msgtplui/Preview.html
@@ -0,0 +1,44 @@
+<div id="bootstrap-theme" crm-dialog="previewMsgDlg" ng-controller="MsgtpluiGenericCtrl">
+
+  <form name="previewMsgForm">
+
+    <nav class="navbar navbar-default">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <div class="navbar-brand">
+            {{::model.title}}
+          </div>
+        </div>
+        <div class="navbar-form navbar-right">
+          <div class="form-group">
+            <button type="button" class="btn btn-default" ng-click="previewMsgDlg.close()">
+              <span class="fa fa-times" aria-hidden="true"></span>
+              {{::ts('Close')}}
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <div class="well-sm">
+      <div class="form-horizontal">
+        <div class="form-group">
+          <label class="control-label">{{::ts('Revision')}}</label>
+          <select class="form-control" ng-options="item.id as item.label for item in model.revisions" ng-model="model.revisionId"></select>
+        </div>
+        <div class="form-group">
+          <label class="control-label">{{::ts('Example')}}</label>
+          <select class="form-control" ng-options="item.id as item.label for item in model.examples" ng-model="model.exampleId"></select>
+        </div>
+        <div class="form-group">
+          <label class="control-label">{{::ts('Format')}}</label>
+          <select class="form-control" ng-options="item.id as item.label for item in model.formats" ng-model="model.formatId"></select>
+        </div>
+      </div>
+
+      <pre>{{model|json}}</pre>
+
+    </div>
+  </form>
+
+</div>
-- 
2.25.1