From 6ba3bf815753b287850cd95bfb8a55b2379a52e7 Mon Sep 17 00:00:00 2001
From: Siddhant Rajagopalan <rajgo94@gmail.com>
Date: Sun, 29 Jun 2014 18:51:48 +0530
Subject: [PATCH] commented code, preview mailing

---
 js/angular-newMailing.js                      | 425 +++++++++---------
 partials/crmMailingType/attachments.html      |   2 +-
 partials/crmMailingType/content.html          |  40 +-
 partials/crmMailingType/headerandFooter.html  |   4 +
 partials/crmMailingType/ht.html               |   6 +
 partials/crmMailingType/mailingGroup.html     |  10 +-
 partials/crmMailingType/main.html             |  20 +-
 partials/crmMailingType/plainText.html        |   5 +
 partials/crmMailingType/previewMailing.html   |  19 +-
 partials/crmMailingType/preview_ht.html       |  10 +
 .../crmMailingType/preview_plaintext.html     |   9 +
 partials/crmMailingType/recipient.html        |  43 +-
 partials/crmMailingType/sched.html            |   5 +
 partials/crmMailingType/send.html             |   4 +
 partials/crmMailingType/test.html             |   7 +-
 partials/crmMailingType/trackandRespond.html  |   6 +-
 16 files changed, 317 insertions(+), 298 deletions(-)
 create mode 100644 partials/crmMailingType/preview_ht.html
 create mode 100644 partials/crmMailingType/preview_plaintext.html

diff --git a/js/angular-newMailing.js b/js/angular-newMailing.js
index 283a0a2353..50ed3c0cc2 100644
--- a/js/angular-newMailing.js
+++ b/js/angular-newMailing.js
@@ -1,14 +1,11 @@
 (function(angular, $, _) {
-
+//partials for the html pages
   var partialUrl = function(relPath) {
     return CRM.resourceUrls['civicrm'] + '/partials/crmMailingType/' + relPath;
   };
 
   var crmMailing = angular.module('crmMailing', ['ngRoute', 'ui.utils']);
   
-
- 
-
 //-------------------------------------------------------------------------------------------------------
  crmMailing.config(['$routeProvider',
     function($routeProvider) {
@@ -21,7 +18,7 @@
           }
 
         }
-      });    
+      });    //This route is used for generating the list of mails created.
 
     
  
@@ -34,234 +31,224 @@
               return crmApi('Mailing', 'getsingle', {id: $route.current.params.id}); 
             }
             else {
+            //created_id has been set to my id. Does not save without created_id. Needs to made generic based on the user
               return {name: "New Mail", visibility: "Public Pages", url_tracking:"1", forward_replies:"0", created_id: "202", auto_responder:"0", open_tracking:"1",
                  };
             }
           }
         }
-      }); 
+      }); //This route is used for creating new mails and editing the current mails
     }
   ]);  
 //-----------------------------------------
-  // Add a new record by name.
-  // Ex: <crmAddName crm-options="['Alpha','Beta','Gamma']" crm-var="newItem" crm-on-add="callMyCreateFunction(newItem)" />
- 
-
-
- 
  
-crmMailing.controller('mailingCtrl', function($scope, crmApi, selectedMail) {
-	  
-//Making some dummy api to see if my from email, reply to email works. To see if all options come in select 
-//
-  $scope.cool_api= [
-    {'name': 'Nexus S',
-     'from_mail': 'rajgo94@gmail.com',
-     'reply_mail': 'rajgo94@gmail.com'  },
-    {'name': 'Motorola XOOM™ with Wi-Fi',
-     'from_mail': 'rajgo94@gmail2.com',
-     'reply_mail': 'rajgo94@gmail2.com'},
-    {'name': 'MOTOROLA XOOM™',
-     'from_mail': 'rajgo94@gmail3.com',
-     'reply_mail': 'rajgo94@gmail3.com'}
-  ];
 
-  $scope.partialUrl = partialUrl;
-	$scope.campaignList =  CRM.crmMailing.campNames;
-	$scope.mailNameList = _.pluck(CRM.crmCaseType.civiMails, 'name');
-	$scope.groupNamesList = CRM.crmMailing.groupNames;
-	$scope.headerfooter = CRM.crmMailing.headerfooterList;
-	$scope.tmpList = CRM.crmMailing.mesTemplate;
-	$scope.incGroup = [];
-	$scope.excGroup = [];
-	$scope.testGroup = [];
-  $scope.currentMailing = selectedMail;
-  window.ct = $scope.currentMailing;
-  $scope.acttab=0;
-	$scope.composeS="1";
-	$scope.trackreplies="0";
-	$scope.now="1";
-	$scope.scheddate={};
-  $scope.scheddate.date = ""; 
-  $scope.scheddate.time = ""; 
-  $scope.ans="";
-  $scope.mailAutoResponder="";
-	///changing upload on screen
-/*		if(selectedMail.scheduled_date != ""){
-			$scope.ans= selectedMail.scheduled_date.split(" ");
-			$scope.scheddate.date=$scope.ans[0];
-			$scope.scheddate.time=$scope.ans[1];
-		}*/
-
-	console.log(selectedMail); 
-	$scope.upldChange= function(composeS){
-		if(composeS=="1"){
-			return true;
+//This controller is used in creating new mail and editing current mails
+	crmMailing.controller('mailingCtrl', function($scope, crmApi, selectedMail) {
+			
+	//Making some dummy api to see if my from email, reply to email works. To see if all options come in select box
+		$scope.cool_api= [
+			{'name': 'rajgo94',
+			 'from_mail': 'rajgo94@gmail.com',
+			 'reply_mail': 'rajgo94@gmail.com'  },
+			{'name': 'rajgo94_2',
+			 'from_mail': 'rajgo94@gmail_2.com',
+			 'reply_mail': 'rajgo94@gmail_2.com'},
+			{'name': 'rajgo94_3',
+			 'from_mail': 'rajgo94@gmail_3.com',
+			 'reply_mail': 'rajgo94@gmail_3.com'}
+		];
+	//setting variables to the values we have got to the api
+		$scope.partialUrl = partialUrl;
+		$scope.campaignList =  CRM.crmMailing.campNames;
+		$scope.mailNameList = _.pluck(CRM.crmCaseType.civiMails, 'name');
+		$scope.groupNamesList = CRM.crmMailing.groupNames;
+		$scope.headerfooter = CRM.crmMailing.headerfooterList;
+		$scope.tmpList = CRM.crmMailing.mesTemplate;
+		$scope.currentMailing = selectedMail;
+		window.ct = $scope.currentMailing;
+		
+	//initializing variables we will use for checkboxes, or for purpose of ng-show
+		$scope.acttab=0;
+		$scope.composeS="1";
+		$scope.trackreplies="0";
+		$scope.now="1";
+
+	//to split the value of selectedMail.scheduled_date into the date and time separately	
+		$scope.scheddate={};
+		$scope.scheddate.date = ""; 
+		$scope.scheddate.time = ""; 
+		$scope.ans="";
+		
+		
+		$scope.mailAutoResponder="";
+	// To split the scheduled_date into date and time. The date format is not accepting 
+	/*		if(selectedMail.scheduled_date != ""){
+				$scope.ans= selectedMail.scheduled_date.split(" ");
+				$scope.scheddate.date=$scope.ans[0];
+				$scope.scheddate.time=$scope.ans[1];
+			}*/
+
+		console.log(selectedMail); 
+		
+	//changing the screen from compose on screen to upload content
+		$scope.upldChange= function(composeS){
+			if(composeS=="1"){
+				return true;
+			}
+			else 
+				return false;
 		}
-		else 
-			return false;
-	}
-	
-	$scope.isHeader= function(hf){
-		return hf.component_type == "Header";
-	};
-
-	$scope.isFooter= function(f){
-		return f.component_type == "Footer";
-	};
-	
-	$scope.isAuto= function(au){
-		return au.component_type == "Reply";
-	};
-	
-	$scope.isUserDriven= function(mstemp){
-		return (parseInt(mstemp.id)>58);
-	};	
-
-	$scope.trackr= function(trackreplies){
-		if(trackreplies=="1"){
-			return true;
+	//filter so we only get headers from mailing component 
+		$scope.isHeader= function(hf){
+			return hf.component_type == "Header";
+		};
+	//filter so we only get footers from mailing component 
+		$scope.isFooter= function(f){
+			return f.component_type == "Footer";
+		};
+	//filter so we only get auto-Responders from mailing component 	
+		$scope.isAuto= function(au){
+			return au.component_type == "Reply";
+		};
+	//filter so we only get userDriven message templates	
+		$scope.isUserDriven= function(mstemp){
+			return (parseInt(mstemp.id)>58);
+		};	
+	//used for ng-show when trackreplies is selected. Only then we show forward replies and auto-responders options
+		$scope.trackr= function(trackreplies){
+			if(trackreplies=="1"){
+				return true;
+			}
+			else 
+				return false;
 		}
-		else 
-			return false;
-	}
-	
-	/// Add a new group to mailing
- /*   $scope.addGroup = function(grp, groupName) {
-      var names = _.pluck(CRM.crmMailing.groupNames, 'name');
-      if (!_.contains(names, groupName)) {
-        grp.push({
-          name: groupName
-        });
-      }
-    }; */
-    
-    $scope.save = function() {
-	    $scope.currentMailing.scheduled_date= $scope.scheddate.date + " " + $scope.scheddate.time ;
-			if($scope.currentMailing.scheduled_date!=" "){
-					$scope.currentMailing.scheduled_id= "202";
-					$scope.currentMailing.scheduled_date= "";
-			  }
-      var result = crmApi('Mailing', 'create', $scope.currentMailing, true);
-      result.success(function(data) {
-        if (data.is_error == 0) {
-          $scope.currentMailing.id = data.id;
-          console.log("OK");
-        }
-        console.log("OK2");
-      });
-    };
-  });
- 
-
-
-  crmMailing.directive('nexttab', function() {
-        return {
-
-            restrict: 'A',
+		
+		$scope.isGrp= function(grp){
+			return grp.visibility == "Public Pages";
+		};
+		
+		
+		$scope.save = function() {
+				$scope.currentMailing.scheduled_date= $scope.scheddate.date + " " + $scope.scheddate.time ;
+				if($scope.currentMailing.scheduled_date!=" "){
+						$scope.currentMailing.scheduled_id= "202";
+					}
+				else {
+						$scope.currentMailing.scheduled_date= "";
+				}
+				var result = crmApi('Mailing', 'create', $scope.currentMailing, true);
+				result.success(function(data) {
+					if (data.is_error == 0) {
+						$scope.currentMailing.id = data.id;
+						console.log("OK");
+					}
+					console.log("OK2");
+				});
+		 };
+	});
+	 
+
+// Directive to go to the next tab    
+	crmMailing.directive('nexttab', function() {
+		return {
+			restrict: 'A',
 			link: function(scope, element, attrs) {
-
-                $(element).parent().parent().tabs();
-
-                $(element).on("click",function() {
-                    scope.acttab=scope.acttab +1;
-                    $(element).parent().parent().tabs({active:scope.acttab});
-                    console.log("sid");
-                });
-            }
-        };
-    });
-     
-  crmMailing.directive('prevtab', function() {
-        return {
-
-            restrict: 'A',
+				$(element).parent().parent().tabs();
+				$(element).on("click",function() {
+					scope.acttab=scope.acttab +1;
+					$(element).parent().parent().tabs({active:scope.acttab});
+					console.log("sid");
+				});
+			}
+		};
+	});
+
+	// Directive to go to the previous tab    
+	crmMailing.directive('prevtab', function() {
+		return {
+			restrict: 'A',
 			link: function(scope, element, attrs) {
-
-                $(element).parent().parent().tabs();
-
-                $(element).on("click",function() {
-                    scope.acttab=scope.acttab -1;
-                    $(element).parent().parent().tabs({active:scope.acttab});
-                    console.log("sid");
-                });
-            }
-        };
-    }); 
-
-    
-  crmMailing.directive('chsgroup',function(){
-       return {
-           restrict : 'AE',
-           link: function(scope,element, attrs){
-               $(element).select2(
-                 {width:"400px",
-			      placeholder: "Include Group",
-			     });
-           }
-       };
-
-    }); 
-  
-
-crmMailing.directive('chsdate',function(){
-        return {
-            scope :{
-                dat : '=send_date'
-            },
-          restrict: 'AE',
-          link: function(scope,element,attrs){
-                $(element).datepicker({
-									  dateFormat: 'yy-mm-dd',
-                    onSelect: function(date) {
-                        $(".ui-datepicker a").removeAttr("href");
-                        scope.dat =date;
-                    }
-                });
-            }
-        };
-    });
-
-
-
-crmMailing.controller('browse', function($scope){
-    $scope.fileList = [];
-    $('#fileupload').bind('fileuploadadd', function(e, data){
-        // Add the files to the list
-        numFiles = $scope.fileList.length
-        for (var i=0; i < data.files.length; ++i) {
-            var file = data.files[i];
-        // .$apply to update angular when something else makes changes
-        $scope.$apply(
-            $scope.fileList.push({name: file.name})
-            );
-        }
-        // Begin upload immediately
-        data.submit();
-    });
-});
-
-    
-  crmMailing.directive('add',function(){
-       return {
-           restrict : 'AE',
-           link: function(scope,element, attrs){
-               $(document).ready(function(){
-									$('#fileupload').fileupload({
-									dataType: 'json'
-									});
-								});
-
-			     
-          }
-       };
-		}); 
-    
-    
- crmMailing.controller('mailingListCtrl', function($scope, crmApi, mailingList) {
-    $scope.mailingList = mailingList.values;
-    $scope.mailStatus = _.pluck(CRM.crmMailing.mailStatus, 'status');
-  });
+				$(element).parent().parent().tabs();
+				$(element).on("click",function() {
+					scope.acttab=scope.acttab -1;
+					$(element).parent().parent().tabs({active:scope.acttab});
+					console.log("sid");
+				});
+			}
+		};
+	}); 
+
+	// Select 2 Widget for selecting the group 
+	crmMailing.directive('chsgroup',function(){
+		return {
+			restrict : 'AE',
+			link: function(scope,element, attrs){
+			$(element).select2({
+				width:"400px",
+				placeholder: "Include Group",
+				});
+			}
+		};
+	}); 
+		
+	// Used for the select date option. This is used for giving scheduled_date its date value
+	crmMailing.directive('chsdate',function(){
+		return {
+			scope :{
+				dat : '=send_date'
+				},
+			restrict: 'AE',
+			link: function(scope,element,attrs){
+					$(element).datepicker({
+						dateFormat: 'yy-mm-dd',
+						onSelect: function(date) {
+							$(".ui-datepicker a").removeAttr("href");
+							scope.dat =date;
+						}
+				});
+			}
+		};
+	});
+
+/*
+	//browsing controller. to add selected files. not working currently
+	crmMailing.controller('browse', function($scope){
+			$scope.fileList = [];
+			$('#fileupload').bind('fileuploadadd', function(e, data){
+					// Add the files to the list
+					numFiles = $scope.fileList.length
+					for (var i=0; i < data.files.length; ++i) {
+							var file = data.files[i];
+					// .$apply to update angular when something else makes changes
+					$scope.$apply(
+							$scope.fileList.push({name: file.name})
+							);
+					}
+					// Begin upload immediately
+					data.submit();
+			});
+	});
+
+	//adding directive. to add selected files. not working currently
+	crmMailing.directive('add',function(){
+		return {
+			restrict : 'AE',
+			link: function(scope,element, attrs){
+				$(document).ready(function(){
+					$('#fileupload').fileupload({
+						dataType: 'json'
+					});
+				});
+			}
+		};
+	}); 
+*/			
+	 //This controller is used for creating the mailing list. Simply gets all the mailing data from civiAPI   
+	crmMailing.controller('mailingListCtrl', function($scope, crmApi, mailingList) {
+		$scope.mailingList = mailingList.values;
+		$scope.mailStatus = _.pluck(CRM.crmMailing.mailStatus, 'status');
+	});
 
 })(angular, CRM.$, CRM._);
 
diff --git a/partials/crmMailingType/attachments.html b/partials/crmMailingType/attachments.html
index 7d538acf94..e3ecc093bd 100644
--- a/partials/crmMailingType/attachments.html
+++ b/partials/crmMailingType/attachments.html
@@ -1,4 +1,4 @@
-<!-- based on: http://www.matlus.com/html5-file-upload-with-progress/ -->
+<!-- will use Controller: browse -->
 <body>
 	<table>
 	  <tr>
diff --git a/partials/crmMailingType/content.html b/partials/crmMailingType/content.html
index c33a9dd538..e48a082853 100644
--- a/partials/crmMailingType/content.html
+++ b/partials/crmMailingType/content.html
@@ -1,22 +1,30 @@
 <!--
-Controller: CaseTypeCtrl
-Required vars: caseType
+Controller: MailCtrl
+Required Variables: cool_api and currentMailing
 
-The original form used table layout; don't know if we have an alternative, CSS-based layout
+Comment lines 8-72 and uncomment from 74 if you want to use the from_email from civiApi
+However this will not be a select option because I could not find the Api to get all the stored from_email addresses
 -->
-<!--<br>
+
+<br>
 <table class="form-layout-compressed">
   <tbody>
   <tr>
     <td class="label">From E-mail Address</td>
     <td>
-      <input type="text" ng-model="currentMailing.from_email"/>
+      <select  style="width: 100px" >
+				<option value="">-none-</option>
+				<option ng-repeat="s in cool_api" value={{s.from_mail}} >{{s.from_mail}}</option>
+			</select>
     </td>
   </tr>
   <tr>
     <td class="label">Reply to E-mail Address</td>
      <td>
-      <input type="text" ng-model="currentMailing.replyto_email"/>
+      <select  style="width: 100px" >
+				<option value="">-none-</option>
+				<option ng-repeat="s in cool_api" value={{s.reply_mail}} >{{s.reply_mail}}</option>
+			</select>     
     </td>
   </tr>   
   <tr>
@@ -28,7 +36,7 @@ The original form used table layout; don't know if we have an alternative, CSS-b
   <tr>
     <td class="label">Use Template</td>
      <td>
-      <select  style="width: 100px" ng-model="currentMailing.msg_template_id" ng-options="mstemp.id as mstemp.msg_title for mstemp in tmpList| filter:isUserDriven">
+      <select  style="width: 100px" ng-model="currentMailing.msg_template_id" ng-options="mstemp.id as mstemp.msg_title for mstemp in tmpList">
 				<option value="">-none-</option>
 			</select>
     </td>
@@ -62,27 +70,21 @@ The original form used table layout; don't know if we have an alternative, CSS-b
 <div class="crm-accordion-wrapper collapsed">
   <div class="crm-accordion-header">Track and Respond</div>
   <div class="crm-accordion-body" ng-include="partialUrl('trackandRespond.html')"></div>
-</div> -->
+</div>
 
-<br>
+<!--<br>
 <table class="form-layout-compressed">
   <tbody>
   <tr>
     <td class="label">From E-mail Address</td>
     <td>
-      <select  style="width: 100px" >
-				<option value="">-none-</option>
-				<option ng-repeat="s in cool_api" value={{s.from_mail}} >{{s.from_mail}}</option>
-			</select>
+      <input type="text" ng-model="currentMailing.from_email"/>
     </td>
   </tr>
   <tr>
     <td class="label">Reply to E-mail Address</td>
      <td>
-      <select  style="width: 100px" >
-				<option value="">-none-</option>
-				<option ng-repeat="s in cool_api" value={{s.reply_mail}} >{{s.reply_mail}}</option>
-			</select>     
+      <input type="text" ng-model="currentMailing.replyto_email"/>
     </td>
   </tr>   
   <tr>
@@ -94,7 +96,7 @@ The original form used table layout; don't know if we have an alternative, CSS-b
   <tr>
     <td class="label">Use Template</td>
      <td>
-      <select  style="width: 100px" ng-model="currentMailing.msg_template_id" ng-options="mstemp.id as mstemp.msg_title for mstemp in tmpList">
+      <select  style="width: 100px" ng-model="currentMailing.msg_template_id" ng-options="mstemp.id as mstemp.msg_title for mstemp in tmpList| filter:isUserDriven">
 				<option value="">-none-</option>
 			</select>
     </td>
@@ -128,4 +130,4 @@ The original form used table layout; don't know if we have an alternative, CSS-b
 <div class="crm-accordion-wrapper collapsed">
   <div class="crm-accordion-header">Track and Respond</div>
   <div class="crm-accordion-body" ng-include="partialUrl('trackandRespond.html')"></div>
-</div>
+</div> -->
diff --git a/partials/crmMailingType/headerandFooter.html b/partials/crmMailingType/headerandFooter.html
index 6275434549..1730c1a5c3 100644
--- a/partials/crmMailingType/headerandFooter.html
+++ b/partials/crmMailingType/headerandFooter.html
@@ -1,3 +1,7 @@
+<!--
+Controller: MailCtrl
+Required vars: currentMailing and headerfooter
+-->
 <br>
 <body>
 	<table>
diff --git a/partials/crmMailingType/ht.html b/partials/crmMailingType/ht.html
index 951f638722..ee84fdd054 100644
--- a/partials/crmMailingType/ht.html
+++ b/partials/crmMailingType/ht.html
@@ -1,3 +1,9 @@
+<!--
+Controller: MailCtrl
+Required vars: currentMailing 
+The editor has to be added. Currently just a simple text editor
+-->
+
 <br>
 &nbsp &nbsp &nbsp &nbsp
 <textarea ng-model="currentMailing.body_html" style="width: 600px; height: 300px;"></textarea> 
diff --git a/partials/crmMailingType/mailingGroup.html b/partials/crmMailingType/mailingGroup.html
index 19ae7c99b4..a477d68be1 100644
--- a/partials/crmMailingType/mailingGroup.html
+++ b/partials/crmMailingType/mailingGroup.html
@@ -1,14 +1,16 @@
 <!--
-Controller: CaseTypeCtrl
-Required vars: activitySet
+Controller: MailCtrl
+Required vars: groupNamesList 
+MailingGroup api needs to be improved to bind the chosen groups
 -->
+
 <br>
-<select multiple chsgroup ng-model="incGroup" ng-options="grp.name as grp.title for grp in groupNamesList">
+<select multiple chsgroup ng-model="incGroup" ng-options="grp.name as grp.title for grp in groupNamesList| filter: isGrp ">
   <option value=""></option>
 </select>
 <br> <br>
 
-<select multiple chsgroup placeholder="Exclude Group" ng-model="excGroup" ng-options="grp.name as grp.title for grp in groupNamesList">
+<select multiple chsgroup placeholder="Exclude Group" ng-model="excGroup" ng-options="grp.name as grp.title for grp in groupNamesList| filter: isGrp">
   <option value=""></option>
 </select>
 <br> <br>
diff --git a/partials/crmMailingType/main.html b/partials/crmMailingType/main.html
index a8832e9af3..ebf71f39d4 100644
--- a/partials/crmMailingType/main.html
+++ b/partials/crmMailingType/main.html
@@ -1,9 +1,10 @@
 <!--
 Controller: MailCtrl
+Submit Mailing is not functional yet
 -->
+
+
 <div class="crm-block crm-form-block "> 
-<!-- what should you replace crmCaseType with?
--->
   <div ui-jq="tabs" id="alltabs">
     <ul>
       <li><a href="#acttab-0">Recipients</a></li>
@@ -35,20 +36,9 @@ Controller: MailCtrl
       <br>
       <a prevtab class="button" ><span>Previous</span></a>  
       <a ng-click="save()" class="button"><span>Save and Continue Later</span></a>
+      <a class="button"><span>Submit Mailing</span></a>      
       <a ng-href="#/mailing" class="button"><span>Cancel</span></a>   
-      <br><br>
+			<br><br>
     </div>
-   
- <!--  <a class="nexttab" href="#">Next Tab</a>
-   <button type="submit" class="btn btn-primary" value=">> Compose" id="campaignbutton" nexttab={{adi}} >Next</button> <br> -->
-   	
-
   </div>   
 </div>
-  <!--<button ng-click="dump()">Log</button>-->
-<!--  <div class="action-link">
-    <a ng-click="save()" class="button"><span>Save and Continue Later</span></a>
-    <a ng-href="#/newMail" class="button"><span>Cancel</span></a>
-  </div>
-</div>
--->
diff --git a/partials/crmMailingType/plainText.html b/partials/crmMailingType/plainText.html
index c587bef07f..0fc4087116 100644
--- a/partials/crmMailingType/plainText.html
+++ b/partials/crmMailingType/plainText.html
@@ -1,3 +1,8 @@
+<!--
+Controller: MailCtrl
+Required vars: currentMailing
+-->
+
 <br>
 &nbsp &nbsp &nbsp &nbsp
 <textarea ng-model="currentMailing.body_text" style="width: 600px; height: 300px;"></textarea> 
diff --git a/partials/crmMailingType/previewMailing.html b/partials/crmMailingType/previewMailing.html
index a076f5777a..1da937dfbd 100644
--- a/partials/crmMailingType/previewMailing.html
+++ b/partials/crmMailingType/previewMailing.html
@@ -1 +1,18 @@
-TO BE DONE LATER
+<!--
+Controller: MailCtrl
+Required vars: currentMailing 
+The editor has to be added. Currently just a simple text editor
+-->
+<br>
+<div class="crm-accordion-wrapper collapsed">
+  <div class="crm-accordion-header">HTML Preview</div>
+  <div class="crm-accordion-body" ng-include="partialUrl('preview_ht.html')"></div>
+</div>
+
+<div class="crm-accordion-wrapper collapsed">
+  <div class="crm-accordion-header">Plain Text Preview</div>
+  <div class="crm-accordion-body" ng-include="partialUrl('preview_plaintext.html')"></div>
+</div>
+<br>
+
+
diff --git a/partials/crmMailingType/preview_ht.html b/partials/crmMailingType/preview_ht.html
new file mode 100644
index 0000000000..f84dc26cbd
--- /dev/null
+++ b/partials/crmMailingType/preview_ht.html
@@ -0,0 +1,10 @@
+<!--
+Controller: MailCtrl
+Required vars: currentMailing 
+The editor has to be added. Currently just a simple text editor
+-->
+
+<br>
+&nbsp &nbsp &nbsp &nbsp
+<textarea readonly ng-model="currentMailing.body_html" style="width: 600px; height: 300px;"></textarea> 
+<br> <br>
diff --git a/partials/crmMailingType/preview_plaintext.html b/partials/crmMailingType/preview_plaintext.html
new file mode 100644
index 0000000000..f50b9321d0
--- /dev/null
+++ b/partials/crmMailingType/preview_plaintext.html
@@ -0,0 +1,9 @@
+<!--
+Controller: MailCtrl
+Required vars: currentMailing
+-->
+
+<br>
+&nbsp &nbsp &nbsp &nbsp
+<textarea readonly ng-model="currentMailing.body_text" style="width: 600px; height: 300px;"></textarea> 
+<br> <br>
diff --git a/partials/crmMailingType/recipient.html b/partials/crmMailingType/recipient.html
index 7be2112f98..dace667c74 100644
--- a/partials/crmMailingType/recipient.html
+++ b/partials/crmMailingType/recipient.html
@@ -1,9 +1,9 @@
 <!--
-Controller: CaseTypeCtrl
-Required vars: caseType
-
-The original form used table layout; don't know if we have an alternative, CSS-based layout
+Controller: MailCtrl
+Required vars: currentMailing
+Remove duplicates not functional
 -->
+
 <br>
 <table class="form-layout-compressed">
   <tbody>
@@ -16,7 +16,6 @@ The original form used table layout; don't know if we have an alternative, CSS-b
   <tr>
     <td class="label">Campaign</td>
     <td class="addRow">
-      <!-- <select ng-model="activity.status" ng-options="value for (key,value) in activityStatuses|orderBy:'value'"> -->
       <select ng-model="currentMailing.campaign_id" ng-options="camp.id as camp.name for camp in campaignList|orderBy:'name'">
         <option value="">Please select a campaign</option>
       </select>
@@ -28,45 +27,15 @@ The original form used table layout; don't know if we have an alternative, CSS-b
       <input type="checkbox" />
     </td>
   </tr>
-<!--  <tr>
-    <td class="label">Remove Duplicates?</td>
-    <td>
-      <input type="checkbox" ng-model="caseType.is_active" ng-true-value="1" ng-false-value="0"/>
-    </td>
-  </tr>-->
-  
   </tbody>
 </table>
 <br>  
     
-<div class="crm-accordion-wrapper collapsed">
+<div class="crm-accordion-wrapper">
   <div class="crm-accordion-header">Mailing Recipients</div>
   <div class="crm-accordion-body" ng-include="partialUrl('mailingGroup.html')"></div>
 </div>
 
 
 <br> 
- <!--   
-	<td class="label">Include Group</td>
-    <td class="addRow">
-     
-      <select ng-model="campaign.name" ng-options="camp.name as camp.name for camp in campNames|orderBy:'name'">
-        <option value=""></option>
-      </select>
-    </td>
-    
-    <td class="label">Exclude Group</td>
-    <td class="addRow">
-    
-      <select ng-model="campaign.name" ng-options="camp.name as camp.name for camp in campNames|orderBy:'name'">
-        <option value=""></option>
-      </select>
-    </td>
-    
-    <td class="label">Campaign</td>
-    <td class="addRow">
-     
-      <select ng-model="campaign.name" ng-options="camp.name as camp.name for camp in campNames|orderBy:'name'">
-        <option value=""></option>
-      </select>
-    </td>    -->
+ 
diff --git a/partials/crmMailingType/sched.html b/partials/crmMailingType/sched.html
index 113c1d4de3..f0e39744bf 100644
--- a/partials/crmMailingType/sched.html
+++ b/partials/crmMailingType/sched.html
@@ -1,3 +1,8 @@
+<!--
+Controller: MailCtrl
+Required vars: currentMailing
+-->
+
 <br>
 <table class="form-layout-compressed">
   <tbody>
diff --git a/partials/crmMailingType/send.html b/partials/crmMailingType/send.html
index 3422770d28..54ecb1042c 100644
--- a/partials/crmMailingType/send.html
+++ b/partials/crmMailingType/send.html
@@ -1,3 +1,7 @@
+<!--
+Controller: MailCtrl
+-->
+
 <br>
 
 <div class="crm-accordion-wrapper collapsed" >
diff --git a/partials/crmMailingType/test.html b/partials/crmMailingType/test.html
index 54167adb01..eb80022b56 100644
--- a/partials/crmMailingType/test.html
+++ b/partials/crmMailingType/test.html
@@ -1,3 +1,8 @@
+<!--
+Controller: MailCtrl
+Required vars: groupNamesList
+-->
+
 <table class="form-layout-compressed">
   <tbody>
   <tr>
@@ -9,7 +14,7 @@
   <tr>
     <td class="label">Send to this Group</td>
     <td>
-      <select ng-model="testGroup" ng-options="grp.name as grp.title for grp in groupNamesList">
+      <select ng-model="testGroup" ng-options="grp.name as grp.title for grp in groupNamesList| filter: isGrp">
 			  <option value="">-none-</option>
 		  </select>
     </td>
diff --git a/partials/crmMailingType/trackandRespond.html b/partials/crmMailingType/trackandRespond.html
index 1183510a15..66c1b42d3e 100644
--- a/partials/crmMailingType/trackandRespond.html
+++ b/partials/crmMailingType/trackandRespond.html
@@ -1,3 +1,8 @@
+<!--
+Controller: MailCtrl
+Required vars: currentMailing
+-->
+
 <table class="form-layout-compressed">
   <tbody>
   <tr>
@@ -18,7 +23,6 @@
     </td>      
   </tr>
   <tr>
- <!--   <td class="label">Track Opens</td> -->
     <td>
       <input type="checkbox" ng-model="currentMailing.open_tracking" ng-true-value="1" ng-false-value="0">&nbsp Track Opens</input>
     </td>
-- 
2.25.1