From 37402d2e60af3f516625a1a832557511cf7232a0 Mon Sep 17 00:00:00 2001
From: Seamus Lee <seamuslee001@gmail.com>
Date: Thu, 24 Aug 2017 20:15:22 +1000
Subject: [PATCH] CRM-201100 Convert list of test groups into AJAX based
 select2 like receipients box

---
 ang/crmMailing/BlockPreview.html | 10 ++--
 ang/crmMailing/BlockPreview.js   | 93 +++++++++++++++++++++++---------
 2 files changed, 72 insertions(+), 31 deletions(-)

diff --git a/ang/crmMailing/BlockPreview.html b/ang/crmMailing/BlockPreview.html
index 823ea8548d92..6bb114d80702 100644
--- a/ang/crmMailing/BlockPreview.html
+++ b/ang/crmMailing/BlockPreview.html
@@ -45,16 +45,12 @@
       <a crm-ui-help="hs({id: 'test', title: ts('Test Email')})"></a>
     </div>
     <div>
-      <select
+      <input
         name="preview_test_group"
-        ui-jq="crmSelect2"
-        ui-options="{dropdownAutoWidth : true, allowClear: true, placeholder: ts('Select Group')}"
         ng-model="testGroup.gid"
-        ng-options="group.id as group.title for group in crmMailingConst.testGroupNames|orderBy:'title'"
         class="crm-action-menu fa-envelope-o"
-        >
-        <option value=""></option>
-      </select>
+        id = "preview_test_group"
+        />
     </div>
     <button crm-icon="fa-paper-plane" title="{{crmMailing.$invalid || !testGroup.gid ? ts('Complete all required fields first') : ts('Send test message to group')}}" ng-disabled="crmMailing.$invalid || !testGroup.gid" crm-confirm="{resizable: true, width: '40%', height: '40%', open: previewTestGroup}" on-yes="doSend({gid: testGroup.gid})">{{ts('Send test')}}</button>
   </div>
diff --git a/ang/crmMailing/BlockPreview.js b/ang/crmMailing/BlockPreview.js
index 36b72ea981df..6ff8cc0e01e5 100644
--- a/ang/crmMailing/BlockPreview.js
+++ b/ang/crmMailing/BlockPreview.js
@@ -26,36 +26,81 @@
           });
         };
 
+        var rcpAjaxState = {
+         input: '',
+         page_n: 0,
+         page_i: 0,
+        };
+
+        $('#preview_test_group').addClass('crm-action-menu fa-code').crmSelect2({
+          width: '240px',
+          placeholder: scope.ts("Select Group"),
+          ajax: {
+            url: CRM.url('civicrm/ajax/rest'),
+            quietMillis: 300,
+            data: function(input, page_num) {
+              if (page_num <= 1) {
+                rcpAjaxState = {
+                  input: input,
+                  page_n: 0,
+                };
+              }
+              rcpAjaxState.page_i = page_num - rcpAjaxState.page_n;
+              var filterParams = { is_hidden: 0, is_active: 1, group_type: {"LIKE": "%2%"} };
+
+              var params = {
+                input: input,
+                page_num: rcpAjaxState.page_i,
+                params: filterParams,
+              };
+              return params;
+            },
+            transport: function(params) {
+              CRM.api3('Group', '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 };
+                })
+              };
+              var more = data.mode_results;
+              return { more: more, results: [ results ] };
+            },
+          },
+        });
         scope.previewTestGroup = function(e) {
           var $dialog = $(this);
           $dialog.html('<div class="crm-loading-element"></div>').parent().find('button[data-op=yes]').prop('disabled', true);
-          $dialog.dialog('option', 'title', ts('Send to %1', {1: _.pluck(_.where(scope.crmMailingConst.testGroupNames, {id: scope.testGroup.gid}), 'title')[0]}));
-          CRM.api3('contact', 'get', {
-            group: scope.testGroup.gid,
-            options: {limit: 0},
-            return: 'display_name,email'
-          }).done(function(data) {
-            var count = 0,
-            // Fixme: should this be in a template?
+          CRM.api3('group', 'getsingle', {id: scope.testGroup.gid, return: 'title'}).done(function(group) {
+            $dialog.dialog('option', 'title', ts('Send to %1', {1: group.title}));
+            CRM.api3('contact', 'get', {
+              group: scope.testGroup.gid,
+              options: {limit: 0},
+              return: 'display_name,email'
+            }).done(function(data) {
+              var count = 0,
+              // Fixme: should this be in a template?
               markup = '<ol>';
-            _.each(data.values, function(row) {
-              // Fixme: contact api doesn't seem capable of filtering out contacts with no email, so we're doing it client-side
-              if (row.email) {
-                count++;
-                markup += '<li>' + row.display_name + ' - ' + row.email + '</li>';
+              _.each(data.values, function(row) {
+                // Fixme: contact api doesn't seem capable of filtering out contacts with no email, so we're doing it client-side
+                if (row.email) {
+                  count++;
+                  markup += '<li>' + row.display_name + ' - ' + row.email + '</li>';
+                }
+              });
+              markup += '</ol>';
+              markup = '<h4>' + ts('A test message will be sent to %1 people:', {1: count}) + '</h4>' + markup;
+              if (!count) {
+                markup = '<div class="messages status"><i class="crm-i fa-exclamation-triangle"></i> ' +
+                (data.count ? ts('None of the contacts in this group have an email address.') : ts('Group is empty.')) +
+                '</div>';
               }
+              $dialog
+                .html(markup)
+                .trigger('crmLoad')
+                .parent().find('button[data-op=yes]').prop('disabled', !count);
             });
-            markup += '</ol>';
-            markup = '<h4>' + ts('A test message will be sent to %1 people:', {1: count}) + '</h4>' + markup;
-            if (!count) {
-              markup = '<div class="messages status"><i class="crm-i fa-exclamation-triangle"></i> ' +
-              (data.count ? ts('None of the contacts in this group have an email address.') : ts('Group is empty.')) +
-              '</div>';
-            }
-            $dialog
-              .html(markup)
-              .trigger('crmLoad')
-              .parent().find('button[data-op=yes]').prop('disabled', !count);
           });
         };
       }