Merge pull request #5047 from colemanw/CRM-15898

[civicrm-core.git] / js / angular-crmMailing / directives.js

diff --git a/js/angular-crmMailing/directives.js b/js/angular-crmMailing/directives.js
index bf1845fe209b8874bef9acdde402cd28b3214f43..f88d1afc44aa1057cf8f59f3fe7b522809751b69 100644 (file)
--- a/js/angular-crmMailing/directives.js
+++ b/js/angular-crmMailing/directives.js
@@ -1,23 +1,18 @@
 (function (angular, $, _) {
-  var partialUrl = function (relPath) {
-    return CRM.resourceUrls['civicrm'] + '/partials/crmMailing/' + relPath;
-  };
 
   // The following directives have the same simple implementation -- load
   // a template and export a "mailing" object into scope.
   var simpleBlocks = {
-    crmMailingBlockHeaderFooter: partialUrl('headerFooter.html'),
-    crmMailingBlockMailing: partialUrl('mailing.html'),
-    crmMailingBlockPreview: partialUrl('preview.html'),
-    crmMailingBlockPublication: partialUrl('publication.html'),
-    crmMailingBlockResponses: partialUrl('responses.html'),
-    crmMailingBlockRecipients: partialUrl('recipients.html'),
-    crmMailingBlockReview: partialUrl('review.html'),
-    crmMailingBlockSchedule: partialUrl('schedule.html'),
-    crmMailingBlockSummary: partialUrl('summary.html'),
-    crmMailingBlockTracking: partialUrl('tracking.html'),
-    crmMailingBodyHtml: partialUrl('body_html.html'),
-    crmMailingBodyText: partialUrl('body_text.html')
+    crmMailingBlockHeaderFooter: '~/crmMailing/headerFooter.html',
+    crmMailingBlockMailing: '~/crmMailing/mailing.html',
+    crmMailingBlockPublication: '~/crmMailing/publication.html',
+    crmMailingBlockResponses: '~/crmMailing/responses.html',
+    crmMailingBlockRecipients: '~/crmMailing/recipients.html',
+    crmMailingBlockSchedule: '~/crmMailing/schedule.html',
+    crmMailingBlockSummary: '~/crmMailing/summary.html',
+    crmMailingBlockTracking: '~/crmMailing/tracking.html',
+    crmMailingBodyHtml: '~/crmMailing/body_html.html',
+    crmMailingBodyText: '~/crmMailing/body_text.html'
   };
   _.each(simpleBlocks, function(templateUrl, directiveName){
     angular.module('crmMailing').directive(directiveName, function ($parse) {
@@ -30,13 +25,58 @@
           var model = $parse(attr.crmMailing);
           scope.mailing = model(scope.$parent);
           scope.crmMailingConst = CRM.crmMailing;
-          scope.ts = CRM.ts('CiviMail');
+          scope.ts = CRM.ts(null);
           scope[directiveName] = attr[directiveName] ? scope.$parent.$eval(attr[directiveName]) : {};
         }
       };
     });
   });
 
+  // example: <div crm-mailing-block-preview crm-mailing="myMailing" on-preview="openPreview(myMailing, preview.mode)" on-send="sendEmail(myMailing,preview.recipient)">
+  // note: the directive defines a variable called "preview" with any inputs supplied by the user (e.g. the target recipient for an example mailing)
+  angular.module('crmMailing').directive('crmMailingBlockPreview', function ($parse) {
+    return {
+      templateUrl: '~/crmMailing/preview.html',
+      link: function (scope, elm, attr) {
+        var mailingModel = $parse(attr.crmMailing);
+        scope.mailing = mailingModel(scope);
+        scope.crmMailingConst = CRM.crmMailing;
+        scope.ts = CRM.ts(null);
+        scope.testContact = {email: CRM.crmMailing.defaultTestEmail};
+        scope.testGroup = {gid: null};
+
+        scope.doPreview = function(mode) {
+          scope.$eval(attr.onPreview, {
+            preview: {mode: mode}
+          });
+        };
+        scope.doSend = function doSend(recipient) {
+          scope.$eval(attr.onSend, {
+            preview: {recipient: recipient}
+          });
+        };
+      }
+    };
+  });
+
+  angular.module('crmMailing').directive('crmMailingBlockReview', function ($parse, crmMailingPreviewMgr) {
+    return {
+      scope: {
+        crmMailing: '@'
+      },
+      templateUrl: '~/crmMailing/review.html',
+      link: function (scope, elm, attr) {
+        var mailingModel = $parse(attr.crmMailing);
+        scope.mailing = mailingModel(scope.$parent);
+        scope.crmMailingConst = CRM.crmMailing;
+        scope.ts = CRM.ts(null);
+        scope.previewMailing = function previewMailing(mailing, mode) {
+          return crmMailingPreviewMgr.preview(mailing, mode);
+        };
+      }
+    };
+  });
+
   // Convert between a mailing "From Address" (mailing.from_name,mailing.from_email) and a unified label ("Name" <e@ma.il>)
   // example: <span crm-mailing-from-address="myPlaceholder" crm-mailing="myMailing"><select ng-model="myPlaceholder.label"></select></span>
   // NOTE: This really doesn't belong in a directive. I've tried (and failed) to make this work with a getterSetter binding, eg
@@ -150,11 +190,11 @@
       },
       template: '<input type="text" class="crmMailingToken" />',
       link: function (scope, element, attrs, crmUiIdCtrl) {
-        $(element).select2({
-          width: "10em",
+        $(element).addClass('crm-action-menu action-icon-token').select2({
+          width: "12em",
           dropdownAutoWidth: true,
           data: CRM.crmMailing.mailTokens,
-          placeholder: ts('Insert')
+          placeholder: ts('Tokens')
         });
         $(element).on('select2-selecting', function (e) {
           var id = crmUiIdCtrl.get(attrs.crmFor);
@@ -194,13 +234,13 @@
         crmAvailMailings: '@', // available mailings
         crmMailing: '@' // the mailing for which we are choosing recipients
       },
-      templateUrl: partialUrl('directive/recipients.html'),
+      templateUrl: '~/crmMailing/directive/recipients.html',
       link: function (scope, element, attrs) {
         scope.mailing = scope.$parent.$eval(attrs.crmMailing);
         scope.groups = scope.$parent.$eval(attrs.crmAvailGroups);
         scope.mailings = scope.$parent.$eval(attrs.crmAvailMailings);
 
-        scope.ts = CRM.ts('CiviMail');
+        scope.ts = CRM.ts(null);
 
         /// Convert MySQL date ("yyyy-mm-dd hh:mm:ss") to JS date object
         scope.parseDate = function (date) {
@@ -208,7 +248,7 @@
             return date;
           }
           var p = date.split(/[\- :]/);
-          return new Date(p[0], p[1], p[2], p[3], p[4], p[5]);
+          return new Date(parseInt(p[0]), parseInt(p[1])-1, parseInt(p[2]), parseInt(p[3]), parseInt(p[4]), parseInt(p[5]));
         };
 
         /// Remove {value} from {array}
@@ -247,7 +287,9 @@
 
         // Update $(element) view based on latest data
         function refreshUI() {
-          $(element).select2('val', convertMailingToValues(scope.mailing));
+          if (scope.mailing) {
+            $(element).select2('val', convertMailingToValues(scope.mailing));
+          }
         }
 
         /// @return string HTML representingn an option