From 28e111b72abb45f7be3a8e7dd9b5a2e55df90eeb Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Tue, 22 Jun 2021 17:06:13 -0700
Subject: [PATCH] msgtplui - Preview - Extract separate ctrl. Prepare for AJAX
 loading.

---
 ext/msgtplui/ang/msgtplui/Edit.js      | 12 ---------
 ext/msgtplui/ang/msgtplui/Preview.html | 36 ++++++++++++++-----------
 ext/msgtplui/ang/msgtplui/Preview.js   | 37 ++++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 28 deletions(-)
 create mode 100644 ext/msgtplui/ang/msgtplui/Preview.js

diff --git a/ext/msgtplui/ang/msgtplui/Edit.js b/ext/msgtplui/ang/msgtplui/Edit.js
index 9d5988bf75..85bfb9b340 100644
--- a/ext/msgtplui/ang/msgtplui/Edit.js
+++ b/ext/msgtplui/ang/msgtplui/Edit.js
@@ -242,7 +242,6 @@
 
     // 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')}],
@@ -261,16 +260,6 @@
         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}));
-      model.cycle = function(idFld, listFld, delta){
-        model[idFld] = (model[idFld] + delta) % model[listFld].length;
-      };
-      delete model.exampleName;
-      delete model.revisionName;
-      delete model.formatName;
-
       var options = CRM.utils.adjustDialogDefaults({
         dialogClass: 'msgtplui-dialog',
         autoOpen: false,
@@ -280,7 +269,6 @@
       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 (){
diff --git a/ext/msgtplui/ang/msgtplui/Preview.html b/ext/msgtplui/ang/msgtplui/Preview.html
index c7c81071c2..e0e66ea8ff 100644
--- a/ext/msgtplui/ang/msgtplui/Preview.html
+++ b/ext/msgtplui/ang/msgtplui/Preview.html
@@ -1,4 +1,4 @@
-<div id="bootstrap-theme" crm-dialog="previewMsgDlg" ng-controller="MsgtpluiGenericCtrl">
+<div id="bootstrap-theme" crm-dialog="previewMsgDlg" ng-controller="MsgtpluiPreviewCtrl as $ctrl">
 
   <form name="previewMsgForm">
 
@@ -24,10 +24,10 @@
         <div class="form-group">
           <label class="control-label col-sm-2">{{::ts('Revision')}}</label>
           <div class="input-group col-sm-9">
-            <select class="form-control" ng-options="item.id as item.label for item in model.revisions" ng-model="model.revisionId"></select>
+            <select class="form-control" ng-options="item.id as item.label for item in model.revisions" ng-model="$ctrl.revisionId"></select>
             <div class="input-group-btn">
-              <button class="btn btn-default" ng-click="model.cycle('revisionId', 'revisions', -1)">&#xab;</button>
-              <button class="btn btn-default" ng-click="model.cycle('revisionId', 'revisions', +1)">&#xbb;</button>
+              <button class="btn btn-default" ng-click="$ctrl.cycle('revisionId', 'revisions', -1)">&#xab;</button>
+              <button class="btn btn-default" ng-click="$ctrl.cycle('revisionId', 'revisions', +1)">&#xbb;</button>
             </div>
           </div>
         </div>
@@ -35,10 +35,10 @@
         <div class="form-group">
           <label class="control-label col-sm-2">{{::ts('Example')}}</label>
           <div class="input-group col-sm-9">
-            <select class="form-control" ng-options="item.id as item.label for item in model.examples" ng-model="model.exampleId"></select>
+            <select class="form-control" ng-options="item.id as item.label for item in model.examples" ng-model="$ctrl.exampleId"></select>
             <div class="input-group-btn">
-              <button class="btn btn-default" ng-click="model.cycle('exampleId', 'examples', -1)">&#xab;</button>
-              <button class="btn btn-default" ng-click="model.cycle('exampleId', 'examples', +1)">&#xbb;</button>
+              <button class="btn btn-default" ng-click="$ctrl.cycle('exampleId', 'examples', -1)">&#xab;</button>
+              <button class="btn btn-default" ng-click="$ctrl.cycle('exampleId', 'examples', +1)">&#xbb;</button>
             </div>
           </div>
         </div>
@@ -46,28 +46,32 @@
         <div class="form-group">
           <label class="control-label col-sm-2">{{::ts('Format')}}</label>
           <div class="input-group col-sm-9">
-            <select class="form-control" ng-options="item.id as item.label for item in model.formats" ng-model="model.formatId"></select>
+            <select class="form-control" ng-options="item.id as item.label for item in model.formats" ng-model="$ctrl.formatId"></select>
             <div class="input-group-btn">
-              <button class="btn btn-default" ng-click="model.cycle('formatId', 'formats', -1)">&#xab;</button>
-              <button class="btn btn-default" ng-click="model.cycle('formatId', 'formats', +1)">&#xbb;</button>
+              <button class="btn btn-default" ng-click="$ctrl.cycle('formatId', 'formats', -1)">&#xab;</button>
+              <button class="btn btn-default" ng-click="$ctrl.cycle('formatId', 'formats', +1)">&#xbb;</button>
             </div>
           </div>
         </div>
 
         <hr/>
 
-        <div class="form-group">
+        <div class="form-group text-center" ng-if="!!$ctrl.preview.loading">
+          {{::ts('Loading...')}}
+        </div>
+
+        <div class="form-group" ng-if="!$ctrl.preview.loading">
           <label class="control-label col-sm-2">{{::ts('Subject')}}</label>
-          <p class="col-sm-9">{{model.revisions[model.revisionId].rec.msg_subject}}</p>
+          <p class="col-sm-9">{{$ctrl.preview.msg_subject}}</p>
         </div>
 
-        <div class="form-group" ng-if="model.formats[model.formatId].name === 'msg_text'">
-          <pre class="col-sm-12">{{model.revisions[model.revisionId].rec.msg_text}}</pre>
+        <div class="form-group" ng-if="!$ctrl.preview.loading && model.formats[$ctrl.formatId].name === 'msg_text'">
+          <pre class="col-sm-12">{{$ctrl.preview.msg_text}}</pre>
         </div>
 
-        <div class="form-group" ng-if="model.formats[model.formatId].name === 'msg_html'">
+        <div class="form-group" ng-if="!$ctrl.preview.loading && model.formats[$ctrl.formatId].name === 'msg_html'">
           <div class="jumbotron well col-sm-12">
-            <iframe crm-ui-iframe="model.revisions[model.revisionId].rec.msg_html"></iframe>
+            <iframe crm-ui-iframe="$ctrl.preview.msg_html"></iframe>
           </div>
         </div>
 
diff --git a/ext/msgtplui/ang/msgtplui/Preview.js b/ext/msgtplui/ang/msgtplui/Preview.js
new file mode 100644
index 0000000000..895de19696
--- /dev/null
+++ b/ext/msgtplui/ang/msgtplui/Preview.js
@@ -0,0 +1,37 @@
+(function(angular, $, _) {
+
+  angular.module('msgtplui').controller('MsgtpluiPreviewCtrl', function($scope, crmUiHelp, $timeout, $q) {
+    var ts = $scope.ts = CRM.ts('msgtplui');
+    var hs = $scope.hs = crmUiHelp({file: 'CRM/Msgtplui/msgtplui'}); // See: templates/CRM/Msgtplui/msgtplui.hlp
+
+    var $ctrl = this, model = $scope.model;
+
+    $ctrl.exampleId = parseInt(_.findKey(model.examples, {name: model.exampleName}));
+    $ctrl.revisionId = parseInt(_.findKey(model.revisions, {name: model.revisionName}));
+    $ctrl.formatId = parseInt(_.findKey(model.formats, {name: model.formatName}));
+    $ctrl.cycle = function(idFld, listFld, delta){
+      $ctrl[idFld] = ($ctrl[idFld] + delta) % model[listFld].length;
+    };
+
+    var lastId = null;
+    var update = function update() {
+      var id = $ctrl.revisionId + ':' + $ctrl.exampleId;
+      if (lastId === id) return;
+      lastId = id;
+
+      $ctrl.preview = {loading: true};
+      var dfr = $q.defer();
+      $timeout(function(){
+        $ctrl.preview = model.revisions[$ctrl.revisionId].rec;
+        dfr.resolve($ctrl.preview);
+      }, 333);
+      return dfr.promise;
+    }
+
+    $scope.$watch('$ctrl.revisionId', update);
+    $scope.$watch('$ctrl.formatId', update);
+    $scope.$watch('$ctrl.exampleId', update);
+    update();
+  });
+
+})(angular, CRM.$, CRM._);
-- 
2.25.1