Merge pull request civicrm#11267 from nbrettell/CRM-21383-master

CRM-21383 - Inclusion of a directive to replace the existing select f…

ang/crmMailing/BlockMailing.html

@@ -7,20 +7,7 @@
 <div class="crm-block" ng-form="subform" crm-ui-id-scope>
   <div class="crm-group">
     <div crm-ui-field="{name: 'subform.msg_template_id', title: ts('Template')}">
-      <div ng-controller="MsgTemplateCtrl">
-        <select
-          crm-ui-id="subform.msg_template_id"
-          name="msg_template_id"
-          class="fa-clipboard"
-          crm-ui-select="{dropdownAutoWidth : true, allowClear: true, placeholder: ts('Message Template')}"
-          ng-model="mailing.msg_template_id"
-          ng-change="loadTemplate(mailing, mailing.msg_template_id)"
-          >
-          <option value=""></option>
-          <option ng-repeat="frm in crmMsgTemplates.getAll() | orderBy:'msg_title'" ng-value="frm.id">{{frm.msg_title}}</option>
-        </select>
-        <a crm-icon="fa-floppy-o" ng-if="checkPerm('edit message templates')" ng-click="saveTemplate(mailing)" class="crm-hover-button" title="{{ts('Save As')}}"></a>
-      </div>
+      <div crm-mailing-block-templates="{name: 'templates', id: 'subform.msg_template_id'}" crm-mailing="mailing"></div>
     </div>
     <div crm-ui-field="{name: 'subform.fromAddress', title: ts('From'), help: hs('from_email')}">
       <div ng-controller="EmailAddrCtrl" crm-mailing-from-address="fromPlaceholder" crm-mailing="mailing">

ang/crmMailing/BlockTemplates.html

@@ -0,0 +1,9 @@
+<div ng-controller="MsgTemplateCtrl" class="crm-mailing-templates-row">
+    <input 
+      type="hidden"
+      crm-mailing-templates
+      ng-model="mailing.msg_template_id"
+      crm-ui-id="{{crmMailingBlockTemplates.id}}"
+      name="{{crmMailingBlockTemplates.name}}" />
+  <a crm-icon="fa-floppy-o" ng-if="checkPerm('edit message templates')" ng-click="saveTemplate(mailing)" class="crm-hover-button" title="{{ts('Save As')}}"></a>
+</div>

ang/crmMailing/BlockTemplates.js

@@ -0,0 +1,5 @@
+(function(angular, $, _) {
+  angular.module('crmMailing').directive('crmMailingBlockTemplates', function(crmMailingSimpleDirective) {
+    return crmMailingSimpleDirective('crmMailingBlockTemplates', '~/crmMailing/BlockTemplates.html');
+  });
+})(angular, CRM.$, CRM._);

ang/crmMailing/MsgTemplateCtrl.js

@@ -33,6 +33,7 @@
     // @return Promise
     $scope.loadTemplate = function loadTemplate(mailing, id) {
       return crmMsgTemplates.get(id).then(function(tpl) {
+        mailing.msg_template_id = tpl.id;
         mailing.subject = tpl.msg_subject;
         mailing.body_text = tpl.msg_text;
         mailing.body_html = tpl.msg_html;

ang/crmMailing/Templates.js

@@ -0,0 +1,132 @@
+(function(angular, $, _) {
+  // example <select crm-mailing-templates crm-mailing="mymailing"></select>
+  angular.module('crmMailing').directive('crmMailingTemplates', function(crmUiAlert) {
+      return {
+          restrict: 'AE',
+          require: 'ngModel',
+          scope: {
+            ngRequired: '@'
+          },
+          templateUrl: '~/crmMailing/Templates.html',
+          link: function(scope, element, attrs, ngModel) {
+            scope.template = ngModel.$viewValue;
+
+            var refreshUI = ngModel.$render = function refresuhUI() {
+              scope.template = ngModel.$viewValue;
+              if (ngModel.$viewValue) {
+                $(element).select2('val', ngModel.$viewValue);
+              }
+            };
+
+            // @return string HTML representing an option
+            function formatItem(item) {
+              if (!item.id) {
+                // return `text` for optgroup
+                return item.text;
+              }
+              return '<span class="crmMailing-template">' + item.text + '</span>';
+            }
+
+            var rcpAjaxState = {
+              input: '',
+              entity: 'civicrm_msg_templates',
+              page_n: 0,
+              page_i: 0,
+            };
+
+            $(element).select2({
+              width: '36em',
+              placeholder: "<i class='fa fa-clipboard'></i> Mailing Templates",
+              formatResult: formatItem,
+              escapeMarkup: function(m) {
+                return m;
+              },
+              multiple: false,
+              initSelection: function(el, cb) {
+
+                  var value = el.val();
+
+                  CRM.api3('MessageTemplate', 'getlist', { params: { id: value }, label_field: 'msg_title' }).then(function(tlist) {
+
+                      var template = {};
+
+                      if (tlist.count) {
+                        $(tlist.values).each(function(id, val) {
+                          template.id = val.id;
+                          template.text = val.label;
+                        });
+                      }
+
+                      cb(template);
+                  });
+              },
+              ajax: {
+                  url: CRM.url('civicrm/ajax/rest'),
+                  quietMillis: 300,
+                  data: function(input, page_num) {
+                    if (page_num <= 1) {
+                      rcpAjaxState = {
+                        input: input,
+                        entity: 'civicrm_msg_templates',
+                        page_n: 0,
+                      };
+                    }
+
+                    rcpAjaxState.page_i = page_num - rcpAjaxState.page_n;
+                    var filterParams = { is_active: 1, workflow_id: { "IS NULL": 1 } };
+
+                    var params = {
+                      input: input,
+                      page_num: rcpAjaxState.page_i,
+                      label_field: 'msg_title',
+                      search_field: 'msg_title',
+                      params: filterParams,
+                    };
+                    return params;
+                  },
+                  transport: function(params) {
+                    CRM.api3('MessageTemplate', 'getlist', params.data).then(params.success, params.error);
+                  },
+                  results: function(data) {
+
+                    results = {
+                      children: $.map(data.values, function(obj) {
+                        return { id: obj.id, text: obj.label };
+                      })
+                    };
+
+                    if (rcpAjaxState.page_i == 1 && data.count) {
+                      results.text = ts('Message Templates');
+                    }
+
+                    more = data.more_results;
+
+                    if (more && !data.more_results) {
+                      rcpAjaxState.page_n += rcpAjaxState.page_i;
+                    }
+
+                    return { more: more, results: [ results ] };
+                  },
+                }
+            });
+
+            $(element).on('select2-selecting', function(e) {
+              // in here is where the template HTML should be loaded
+              var entity_id = parseInt(e.val);
+              ngModel.$viewValue = entity_id;
+
+              scope.$parent.loadTemplate(scope.$parent.$parent.mailing, entity_id);
+              scope.$apply();
+              $(element).select2('close');
+              e.preventDefault();
+            });
+
+
+            scope.$watchCollection("template", refreshUI);
+            setTimeout(refreshUI, 50);
+          }
+      };
+
+
+  });
+})(angular, CRM.$, CRM._);