CRM-15578 - crmMailing2 - Add "preview.html"

diff --git a/css/angular-crmMailing2.css b/css/angular-crmMailing2.css
index 04f02d936571b876310f66d18f262c659488b3ac..c672f83f67aff1545d5a5ce93e70be336f915bae 100644 (file)
--- a/css/angular-crmMailing2.css
+++ b/css/angular-crmMailing2.css
@@ -25,4 +25,36 @@ span.crmMailing2-include {
 span.crmMailing2-exclude {
   color: #600;
   text-decoration: line-through;
+}
+
+.crmMailing2 input[name=preview_test_email], .crmMailing2-preview select[name=preview_test_group] {
+  width: 80%;
+}
+
+.crmMailing2 .preview-popup, .crmMailing2 .preview-contact, .crmMailing2 .preview-group {
+  width: 30%;
+  height: 4.5em;
+  margin: 0.5em;
+  text-align: center;
+  vertical-align: middle;
+  float: left;
+}
+.crmMailing2 .preview-popup, .crmMailing2 .preview-contact {
+  border-right: 1px solid black;
+}
+.crmMailing2 .preview-group, .crmMailing2 .preview-contact {
+}
+
+/* Odd: These placeholder directives break if combined */
+input[name=preview_test_email]:-moz-placeholder {
+  text-align: center;
+}
+input[name=preview_test_email]::-moz-placeholder {
+  text-align: center;
+}
+input[name=preview_test_email]::-webkit-input-placeholder  {
+  text-align: center;
+}
+input[name=preview_test_email]:-ms-input-placeholder {
+  text-align: center;
 }
\ No newline at end of file

diff --git a/js/angular-crmMailing2-services.js b/js/angular-crmMailing2-services.js
index 20f7c93a9cdaf24094e580d6cf3797c647724003..616d522757a73de9d8071f8da948697fef3a48fa 100644 (file)
--- a/js/angular-crmMailing2-services.js
+++ b/js/angular-crmMailing2-services.js
@@ -63,6 +63,21 @@
         };
       },
 
+      // @param mailing Object (per APIv3)
+      // @return Promise an object with "subject", "body_text", "body_html"
+      preview: function preview(mailing) {
+        var params = _.extend({}, mailing, {
+          options:  {force_rollback: 1},
+          'api.Mailing.preview': {
+            id: '$value.id',
+          }
+        });
+        return crmApi('Mailing', 'create', params).then(function(result){
+          console.log('preview', params, result);
+          return result.values[result.id]['api.Mailing.preview'].values;
+        });
+      },
+
       // @param mailing Object (per APIv3)
       // @param int previewLimit
       // @return Promise for a list of recipients (mailing_id, contact_id, api.contact.getvalue, api.email.getvalue)

diff --git a/js/angular-crmMailing2.js b/js/angular-crmMailing2.js
index b671137c9f09968279ddbe42a247f67ac31af391..ed013e6d646a295bc6f9e55b9fa3b95de4140c52 100644 (file)
--- a/js/angular-crmMailing2.js
+++ b/js/angular-crmMailing2.js
@@ -143,4 +143,56 @@
   crmMailing2.controller('PreviewRecipCtrl', function ($scope) {
     $scope.ts = CRM.ts('CiviMail');
   });
+
+  // Controller for the "Preview Mailing" segment
+  // Note: Expects $scope.model to be an object with properties:
+  //   - mailing: object
+  crmMailing2.controller('PreviewMailingCtrl', function ($scope, dialogService, crmMailingMgr) {
+    $scope.ts = CRM.ts('CiviMail');
+    $scope.testContact = {email: ''};
+    $scope.testGroup = {gid: null};
+
+    $scope.previewHtml = function() {
+      $scope.previewDialog(partialUrl('dialog/previewHtml.html'));
+    };
+    $scope.previewText = function() {
+      $scope.previewDialog(partialUrl('dialog/previewText.html'));
+    };
+    $scope.previewFull = function() {
+      $scope.previewDialog(partialUrl('dialog/previewFull.html'));
+    };
+    // Open a dialog with a preview of the current mailing
+    // @param template string URL of the template to use in the preview dialog
+    $scope.previewDialog = function(template) {
+      CRM.status(ts('Previewing'));
+      crmMailingMgr
+        .preview($scope.mailing)
+        .then(function(content){
+          var options = {
+            autoOpen: false,
+            modal: true,
+            title: ts('Subject: %1', {
+              1: content.subject
+            }),
+          };
+          dialogService.open('previewDialog', template, content, options);
+        });
+    };
+    $scope.sendTestToContact = function() {
+      CRM.alert('Send test to contact, ' + $scope.testContact.email);
+    };
+    $scope.sendTestToGroup = function() {
+      CRM.alert('Send test to group, ' + $scope.testGroup.gid);
+    };
+  });
+
+  // Controller for the "Preview Mailing" dialog
+  // Note: Expects $scope.model to be an object with properties:
+  //   - "subject"
+  //   - "body_html"
+  //   - "body_text"
+  crmMailing2.controller('PreviewMailingDialogCtrl', function ($scope, crmMailingMgr) {
+    $scope.ts = CRM.ts('CiviMail');
+  });
+
 })(angular, CRM.$, CRM._);

diff --git a/partials/crmMailing2/dialog/previewFull.html b/partials/crmMailing2/dialog/previewFull.html
new file mode 100644 (file)
index 0000000..0e257a1
--- /dev/null
+++ b/partials/crmMailing2/dialog/previewFull.html
@@ -0,0 +1,10 @@
+<div ng-controller="PreviewMailingDialogCtrl">
+  <div crm-ui-tab-set>
+    <div crm-ui-tab id="preview-html" crm-title="ts('HTML')">
+      <iframe crm-ui-iframe="model.body_html"></iframe>
+    </div>
+    <div crm-ui-tab id="preview-text" crm-title="ts('Plain Text')">
+      <pre>{{model.body_text}}</pre>
+    </div>
+  </div>
+</div>
\ No newline at end of file

diff --git a/partials/crmMailing2/dialog/previewHtml.html b/partials/crmMailing2/dialog/previewHtml.html
new file mode 100644 (file)
index 0000000..c47b1c0
--- /dev/null
+++ b/partials/crmMailing2/dialog/previewHtml.html
@@ -0,0 +1,3 @@
+<div ng-controller="PreviewMailingDialogCtrl">
+  <iframe crm-ui-iframe="model.body_html"></iframe>
+</div>
\ No newline at end of file

diff --git a/partials/crmMailing2/dialog/previewText.html b/partials/crmMailing2/dialog/previewText.html
new file mode 100644 (file)
index 0000000..246add4
--- /dev/null
+++ b/partials/crmMailing2/dialog/previewText.html
@@ -0,0 +1,3 @@
+<div ng-controller="PreviewMailingDialogCtrl">
+  <pre>{{model.body_text}}</pre>
+</div>
\ No newline at end of file

diff --git a/partials/crmMailing2/preview.html b/partials/crmMailing2/preview.html
index 64d9145c773b8c7d3087713411ec715e9e14f28c..61e2b59e961fcb5156328bfc1e5fc56cc6781085 100644 (file)
--- a/partials/crmMailing2/preview.html
+++ b/partials/crmMailing2/preview.html
@@ -1 +1,55 @@
-preview.html
+<div ng-controller="PreviewMailingCtrl" class="crmMailing2-preview">
+  <!-- Note:
+  In Firefox (at least), clicking the preview buttons causes the browser to display validation warnings
+  for unrelated fields *and* display preview. To avoid this weird UX, we disable preview buttons when the form is incomplete/invalid.
+  -->
+  <div class="preview-popup">
+    <div ng-show="!mailing.body_html && !mailing.body_text">
+      <em>({{ts('No content to preview')}})</em>
+    </div>
+    <div ng-hide="!mailing.body_html">
+      <button ng-disabled="crmMailing2.$invalid" ng-click="previewHtml()">{{ts('Preview as HTML')}}</button>
+    </div>
+    <div ng-hide="!mailing.body_text">
+      <button ng-disabled="crmMailing2.$invalid" ng-click="previewText()">{{ts('Preview as Plain Text')}}</button>
+    </div>
+    <!--
+    <div ng-hide="!mailing.body_html && !mailing.body_text">
+      <button ng-disabled="crmMailing2.$invalid" ng-click="previewFull()">{{ts('Preview')}}</button>
+    </div>
+    -->
+  </div>
+  <div class="preview-contact" ng-form>
+    <div>
+      {{ts('Send test email to:')}}
+    </div>
+    <div>
+      <input
+        name="preview_test_email"
+        type="email"
+        class="crm-form-text"
+        ng-model="testContact.email"
+        placeholder="example@example.org"
+        />
+    </div>
+    <button ng-disabled="crmMailing2.$invalid || !testContact.email" ng-click="sendTestToContact()">{{ts('Send test')}}</button>
+  </div>
+  <div class="preview-group" ng-form>
+    <div>
+      {{ts('Send test email to group:')}}
+    </div>
+    <div>
+      <select
+        name="preview_test_group"
+        ui-jq="select2"
+        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.groupNames|orderBy:'title'"
+        >
+        <option value=""></option>
+      </select>
+    </div>
+    <button ng-disabled="crmMailing2.$invalid || !testGroup.gid" ng-click="sendTestToGroup()">{{ts('Send test')}}</button>
+  </div>
+  <div class="clear"></div>
+</div>