CRM-15578 - crmMailing2 - Implement "review.html"

diff --git a/css/angular-crmMailing2.css b/css/angular-crmMailing2.css
index c672f83f67aff1545d5a5ce93e70be336f915bae..6d5d98ee9e30cdfbee8932c101433604638a45d6 100644 (file)
--- a/css/angular-crmMailing2.css
+++ b/css/angular-crmMailing2.css
@@ -57,4 +57,9 @@ input[name=preview_test_email]::-webkit-input-placeholder  {
 }
 input[name=preview_test_email]:-ms-input-placeholder {
   text-align: center;
-}
\ No newline at end of file
+}
+.crmMailing2-active {
+}
+.crmMailing2-inactive {
+  text-decoration: line-through;
+}

diff --git a/js/angular-crmMailing2-directives.js b/js/angular-crmMailing2-directives.js
index d3e80892698ed374beb8bf7db21e6e36ed73cea5..3ca02671e4aec4aecfa017adc7e2e647129134d2 100644 (file)
--- a/js/angular-crmMailing2-directives.js
+++ b/js/angular-crmMailing2-directives.js
@@ -5,6 +5,31 @@
 
   var crmMailing2 = angular.module('crmMailing2');
 
+  crmMailing2.directive('crmMailingReviewBool', function(){
+    return {
+      scope: {
+        crmOn: '@',
+        crmTitle: '@'
+      },
+      template: '<span ng-class="spanClasses"><span class="icon" ng-class="iconClasses"></span>{{crmTitle}} </span>',
+      link: function(scope, element, attrs){
+        function refresh() {
+          if (scope.$parent.$eval(attrs.crmOn)) {
+            scope.spanClasses = {'crmMailing2-active': true};
+            scope.iconClasses = {'ui-icon-check': true};
+          } else {
+            scope.spanClasses = {'crmMailing2-inactive': true};
+            scope.iconClasses = {'ui-icon-close': true};
+          }
+          scope.crmTitle = scope.$parent.$eval(attrs.crmTitle);
+        }
+        refresh();
+        scope.$parent.$watch(attrs.crmOn, refresh);
+        scope.$parent.$watch(attrs.crmTitle, refresh);
+      }
+    };
+  });
+
   // example: <input name="subject" /> <input crm-mailing-token crm-for="subject"/>
   // WISHLIST: Instead of global CRM.crmMailing.mailTokens, accept token list as an input
   crmMailing2.directive('crmMailingToken', function () {

diff --git a/js/angular-crmMailing2.js b/js/angular-crmMailing2.js
index afc2a4270560ddb025ed083fe7e5e92906d4eff0..ceabf5a2e52b6133760c064c35807ec830aa672c 100644 (file)
--- a/js/angular-crmMailing2.js
+++ b/js/angular-crmMailing2.js
@@ -132,6 +132,41 @@
         return ts('>%1 recipients', {1: RECIPIENTS_PREVIEW_LIMIT});
       return ts('~%1 recipients', {1: $scope.recipients.length});
     };
+    $scope.getIncludesAsString = function() {
+      var first = true;
+      var names = '';
+      _.each($scope.mailing.groups.include, function(id){
+        if (!first) names = names + ', ';
+        var group = _.where(CRM.crmMailing.groupNames, {id: ''+id});
+        names = names + group[0].title;
+        first = false;
+      });
+      _.each($scope.mailing.mailings.include, function(id){
+        if (!first) names = names + ', ';
+        var oldMailing = _.where(CRM.crmMailing.civiMails, {id: ''+id});
+        names = names + oldMailing[0].name;
+        first = false;
+      });
+      return names;
+    };
+    $scope.getExcludesAsString = function() {
+      var first = true;
+      var names = '';
+      _.each($scope.mailing.groups.exclude, function(id){
+        if (!first) names = names + ', ';
+        var group = _.where(CRM.crmMailing.groupNames, {id: ''+id});
+        names = names + group[0].title;
+        first = false;
+      });
+      _.each($scope.mailing.mailings.exclude, function(id){
+        if (!first) names = names + ', ';
+        var oldMailing = _.where(CRM.crmMailing.civiMails, {id: ''+id});
+        names = names + oldMailing[0].name;
+        first = false;
+      });
+      return names;
+    };
+
     // We monitor four fields -- use debounce so that changes across the
     // four fields can settle-down before AJAX.
     var refreshRecipients = _.debounce(function () {
@@ -232,4 +267,35 @@
     $scope.ts = CRM.ts('CiviMail');
   });
 
+  // Controller for the "Preview Mailing Component" segment
+  // which displays header/footer/auto-responder
+  crmMailing2.controller('PreviewComponentCtrl', function PreviewMailingDialogCtrl($scope, dialogService) {
+    $scope.ts = CRM.ts('CiviMail');
+    $scope.previewComponent = function previewComponent(title, componentId) {
+      var component = _.where(CRM.crmMailing.headerfooterList, {id: ""+componentId});
+      if (!component || !component[0]) {
+        CRM.alert(ts('Invalid component ID (%1)', {
+          1: componentId
+        }));
+        return;
+      }
+      var options = {
+        autoOpen: false,
+        modal: true,
+        title: title // component[0].name
+      };
+      dialogService.open('previewComponentDialog', partialUrl('dialog/previewComponent.html'), component[0], options);
+    };
+  });
+
+  // Controller for the "Preview Mailing" dialog
+  // Note: Expects $scope.model to be an object with properties:
+  //   - "name"
+  //   - "subject"
+  //   - "body_html"
+  //   - "body_text"
+  crmMailing2.controller('PreviewComponentDialogCtrl', function PreviewMailingDialogCtrl($scope) {
+    $scope.ts = CRM.ts('CiviMail');
+  });
+
 })(angular, CRM.$, CRM._);

diff --git a/partials/crmMailing2/dialog/previewComponent.html b/partials/crmMailing2/dialog/previewComponent.html
new file mode 100644 (file)
index 0000000..71db702
--- /dev/null
+++ b/partials/crmMailing2/dialog/previewComponent.html
@@ -0,0 +1,28 @@
+<div ng-controller="PreviewComponentDialogCtrl">
+  <div class="crm-block">
+    <div class="crm-group">
+      <div class="crm-section" ng-show="model.name">
+        <div class="label">{{ts('Name')}}</div>
+        <div class="content">
+          {{model.name}}
+        </div>
+        <div class="clear"></div>
+      </div>
+      <div class="crm-section" ng-show="model.subject">
+        <div class="label">{{ts('Subject')}}</div>
+        <div class="content">
+          {{model.subject}}
+        </div>
+        <div class="clear"></div>
+      </div>
+    </div>
+  </div>
+  <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>

diff --git a/partials/crmMailing2/review.html b/partials/crmMailing2/review.html
index f31aa79af1cad1b776078374886906ba0e5200af..e5fb27bb3f0773d63b546e15c00fa5746d453605 100644 (file)
--- a/partials/crmMailing2/review.html
+++ b/partials/crmMailing2/review.html
@@ -1 +1,50 @@
-review.html
+<!--
+Controller: EditMailingCtrl
+Required vars: mailing
+-->
+<div>
+  <div class="crm-block">
+    <div class="crm-group">
+      <div crm-ui-field crm-title="ts('Mailing Name')">
+        {{mailing.name}}
+      </div>
+      <div crm-ui-field crm-title="ts('Recipients')">
+        <div ng-controller="EditRecipCtrl">
+          <div><a class="crm-hover-button action-item" ng-click="previewRecipients()">{{getRecipientsEstimate()}} <span class="icon ui-icon-newwin"></span></a></div>
+          <div ng-show="getIncludesAsString()">
+            (<strong>{{ts('Include:')}}</strong> {{getIncludesAsString()}})
+          </div>
+          <div ng-show="getExcludesAsString()">
+            (<strong>{{ts('Exclude:')}}</strong> <s>{{getExcludesAsString()}}</s>)
+          </div>
+        </div>
+      </div>
+      <div crm-ui-field crm-title="ts('Content')">
+        <div ng-controller="PreviewMailingCtrl">
+          <span ng-show="mailing.body_html"><a class="crm-hover-button action-item" ng-click="previewHtml()">{{ts('HTML')}} <span class="icon ui-icon-newwin"></span></a></span>
+          <span ng-show="mailing.body_text"><a class="crm-hover-button action-item" ng-click="previewText()">{{ts('Plain Text')}} <span class="icon ui-icon-newwin"></span></a></span>
+          <!-- TODO: attachments -->
+        </div>
+      </div>
+      <div crm-ui-field crm-title="ts('Tracking')">
+        <span crm-mailing-review-bool crm-on="mailing.url_tracking=='1'" crm-title="ts('Click Throughs')"></span>
+        <span crm-mailing-review-bool crm-on="mailing.open_tracking=='1'" crm-title="ts('Opens')"></span>
+      </div>
+      <div crm-ui-field crm-title="ts('Responding')">
+        <div>
+          <span crm-mailing-review-bool crm-on="mailing.override_verp=='0'" crm-title="ts('Track Replies')"></span>
+          <span crm-mailing-review-bool crm-on="mailing.override_verp=='0' && mailing.forward_replies=='1'" crm-title="ts('Forward Replies')"></span>
+        </div>
+        <div ng-controller="PreviewComponentCtrl">
+          <span ng-show="mailing.override_verp == '0' && mailing.auto_responder"><a class="crm-hover-button action-item" ng-click="previewComponent(ts('Auto-Respond'), mailing.reply_id)">{{ts('Auto-Respond')}} <span class="icon ui-icon-newwin"></span></a></span>
+          <span><a class="crm-hover-button action-item" ng-click="previewComponent(ts('Opt-out'), mailing.optout_id)">{{ts('Opt-out')}} <span class="icon ui-icon-newwin"></span></a></span>
+          <span><a class="crm-hover-button action-item" ng-click="previewComponent(ts('Resubscribe'), mailing.resubscribe_id)">{{ts('Resubscribe')}} <span class="icon ui-icon-newwin"></span></a></span>
+          <span><a class="crm-hover-button action-item" ng-click="previewComponent(ts('Unsubscribe'), mailing.unsubscribe_id)">{{ts('Unsubscribe')}} <span class="icon ui-icon-newwin"></span></a></span>
+        </div>
+      </div>
+      <div crm-ui-field crm-title="ts('Publication')">
+        {{mailing.visibility}}
+      </div>
+    </div>
+  </div>
+</div>