got subject field to support variables

app/models/form.server.model.js

@@ -154,6 +154,9 @@ var FormSchema = new Schema({
 		fromField: {
 			type: Schema.Types.ObjectId,
 		},
+		toEmails: {
+			type: String
+		},
 		subject: {
 			type: String
 		},
@@ -163,11 +166,31 @@ var FormSchema = new Schema({
 		enabled: {
 			type: Boolean,
 			default: false
-		},
-		recipients: {
-			type: String
 		}
 	},
+
+	respondentNotifications: {
+		toField: {
+			type: Schema.Types.ObjectId,
+		},
+		fromEmail: {
+			type: String,
+			match: [/.+\@.+\..+/, 'Please fill a valid email address']
+		},
+		subject: {
+			type: String,
+			default: 'Tellform: Thank you for filling out <var class="tag" id="tellform-title">Tellform name</var>'
+		},
+		htmlTemplate: {
+			type: String,
+			default: 'Hello, <br><br> We’ve received your submission. <br><br> Thank you & have a nice day!',
+		},
+		enabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+
 	hideFooter: {
 		type: Boolean,
 		default: false

app/views/index.server.view.pug

@@ -35,9 +35,6 @@ block content
 	//Socket.io Client Dependency
 	script(src='https://cdn.socket.io/socket.io-1.4.5.js')
 
-	//TinyMCE
-	script(src='https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.1/tinymce.min.js')
-
 	//Bower JS dependencies
 	each bowerJSFile in bowerJSFiles
 		script(type='text/javascript', src=bowerJSFile)

app/views/layout.server.view.pug

@@ -31,8 +31,8 @@ html(lang='en', xmlns='http://www.w3.org/1999/xhtml')
 
     // Fav Icon 
     link(href='/static/modules/core/img/brand/favicon.ico', rel='shortcut icon', type='image/x-icon')
-    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css')
+    link(rel='stylesheet', href='/static/lib/font-awesome/css/font-awesome.min.css')
-    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u', crossorigin='anonymous')
+    link(rel='stylesheet', href='/static/lib/bootstrap/dist/css/bootstrap.min.css')
     link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900')
 
     //Bower CSS dependencies  

public/modules/forms/admin/css/edit-form-configure.css

@@ -12,3 +12,18 @@
     vertical-align: middle;
     cursor: pointer !important;
 }
+
+.email-subject.ta-root .ta-editor.ta-html, .email-subject .ta-scroll-window.form-control {
+    min-height: 0;
+    overflow: hidden; 
+    height: auto;
+    border-radius: 4px;
+    box-shadow: none;
+    font-size: 18px;
+    padding-top: 10px;
+}
+
+.email-subject.ta-root .ta-scroll-window > .ta-bind {
+    min-height: 0;
+    outline: 0;
+}

public/modules/forms/admin/directives/configure-form.client.directive.js

@@ -32,6 +32,10 @@ angular.module('forms').directive('configureFormDirective', ['$rootScope', '$fil
                     }
                 ];
 
+                $scope.emailFields = $scope.myform.form_fields.filter(function(field){
+                    return field.fieldType === 'email';
+                });
+
                 $scope.go = function(tab){
                     tab.active = true;
                     $state.go(tab.route);

public/modules/forms/admin/views/adminTabs/configureTabs/respondent-notifications.html

@@ -2,88 +2,77 @@
     <div class="col-sm-offset-2">
         <div class="row field">
             <div class="field-title col-sm-12">
-                <h5>{{ 'FORM_NAME' | translate }}</h5>
+                <h5>{{ 'SEND_NOTIFICATION_TO' | translate }}</h5>
             </div>
 
-            <div class="col-sm-12">
+            <div class="col-xs-12 field-input">
+                <ui-select ng-model="myform.respondentNotifications.toField"
+                        theme="selectize"
+                        search-enabled="true"
+                        search-by="title"
+                        set-search-to-answer="true"
+                        ng-required="true">
+                    <ui-select-match placeholder="{{ 'OPTION_PLACEHOLDER' | translate }}">
+                    </ui-select-match>
+                    <ui-select-choices repeat="field in emailFields | filter: $select.search" ng-class="{'active': field._id === myform.respondentNotifications.toField }">
+                        <span ng-bind-html="field.title | highlight: $select.search">
+                        </span>
+                    </ui-select-choices>
+                </ui-select>
+            </div>
+        
+        </div>
+
+        <div class="row field">
+            <div class="field-title col-xs-12">
+                <h5>{{ 'REPLY_TO' | translate }}</h5>
+            </div>
+
+            <div class="col-xs-12 field-input">
                 <input class="form-control"
-				    type="text"
+                       type="text"
-                    ng-model="myform.title"
+                       ng-model="myform.respondentNotifications.replyEmail"
-                    value="{{myform.title}}"
+                       placeholder="noreply@tellform.com">
-                    style="width: 100%;"
-                    ng-minlength="4"
-                    ng-pattern="/^[a-zA-Z0-9 \-.]*$/">
             </div>
         </div>
 
         <div class="row field">
             <div class="field-title col-sm-12">
-                <h5>{{ 'FORM_STATUS' | translate }}</h5>
+                <h5>{{ 'EMAIL_SUBJECT' | translate }}</h5>
+            </div>
+            <div class="col-sm-12">
+                <text-angular ng-model="myform.respondentNotifications.subject" ta-toolbar="[['addFieldVariable']]" ta-default-wrap="n"></text-angular>
+            </div>
+        </div>
+
+        <div class="row field">
+            <div class="field-title col-sm-12">
+                <h5>{{ 'EMAIL_MESSAGE' | translate }}</h5>
             </div>
 
-            <div class="field-input col-sm-12">
+            <div class="col-sm-12">
-
+                <text-angular class="email-subject" ng-model="myform.respondentNotifications.htmlTemplate" ta-toolbar="[['bold','italics', 'addFieldVariable']]"></text-angular>
-                <label style="display: inline-block;">
-                    <input type="radio" data-ng-value="true" ng-model="myform.isLive"  ng-required="true" style="background-color:#33CC00;"/>
-                    &nbsp;<span>{{ 'PUBLIC' | translate }}</span>
-                </label>
-
-                <label style="display: inline-block;">
-                    <input type="radio" data-ng-value="false" ng-model="myform.isLive"  ng-required="true" />
-                    &nbsp;<span>{{ 'PRIVATE' | translate }}</span>
-                </label>
-
             </div>
         </div>
 
          <div class="row field">
             <div class="field-title col-sm-12">
-                <h5>{{ 'ENABLE_EMAIL_NOTIFICATIONS' | translate }}</h5>
+                <h5>{{ 'ENABLE_RESPONDENT_NOTIFICATIONS' | translate }}</h5>
             </div>
 
             <div class="field-input col-sm-12">
 
                 <label style="display: inline-block;">
-                    <input type="radio" data-ng-value="true" ng-model="myform.emailNotifications.enabled"  ng-required="true" style="background-color:#33CC00;"/>
+                    <input type="radio" data-ng-value="true" ng-model="myform.respondentNotifications.enabled"  ng-required="true" style="background-color:#33CC00;"/>
                     &nbsp;<span>{{ 'YES' | translate }}</span>
                 </label>
 
                 <label style="display: inline-block;">
-                    <input type="radio" data-ng-value="false" ng-model="myform.emailNotifications.enabled"  ng-required="true" />
+                    <input type="radio" data-ng-value="false" ng-model="myform.respondentNotifications.enabled"  ng-required="true" />
                     &nbsp;<span>{{ 'NO' | translate }}</span>
                 </label>
                 
             </div>
         </div>
-
-        <div class="row field" ng-if="myform.emailNotifications.enabled">
-			<div class="field-title col-sm-12">
-				<h5>{{ 'EMAIL_NOTIFICATION_RECIPIENTS' | translate }}</h5>
-			</div>
-
-			<div class="col-sm-12">
-				<input class="form-control"
-					   type="text"
-					   ng-model="myform.emailNotifications.recipients"
-					   value="{{myform.emailNotifications.recipients}}"
-					   style="width: 100%;"
-					   placeholder="email@domain.com,email2@domain2.com,etc">
-			</div>
-		</div>
-
-
-        <div class="row field">
-            <div class="col-sm-12 field-title">{{ 'LANGUAGE' | translate }}</div>
-            <div class="col-sm-12 field-input">
-                <select ng-model="myform.language">
-                    <option ng-repeat="language in languages"
-                            ng-selected="language == myform.language"
-                            value="{{language}}">
-                        {{language}}
-                    </option>
-                </select>
-                <span class="required-error" ng-show="field.required && !field.fieldValue">* {{ 'REQUIRED_FIELD' | translate }}</span>
-            </div>
-        </div>
     </div>
 </div>

public/modules/forms/admin/views/adminTabs/configureTabs/self-notifications.html

@@ -8,8 +8,7 @@
             <div class="col-sm-12">
                 <input class="form-control"
                        type="text"
-                       ng-model="myform.emailNotifications.recipients"
+                       ng-model="myform.selfNotifications.toEmails"
-                       value="{{myform.emailNotifications.recipients}}"
                        placeholder="email@domain.com,email2@domain2.com,etc">
             </div>
         </div>
@@ -28,9 +27,9 @@
                         ng-required="true">
                     <ui-select-match placeholder="{{ 'OPTION_PLACEHOLDER' | translate }}">
                     </ui-select-match>
-                    <ui-select-choices repeat="field in myform.form_fields | filter: $select.search"
+                    <ui-select-choices repeat="field in emailFields | filter: $select.search" ng-class="{'active': field._id === myform.selfNotifications.fromField }">
-                                       ng-class="{'active': field._id === myform.selfNotifications.fromField }">
+                        <span ng-bind-html="field.title | highlight: $select.search">
-                        <span ng-bind-html="field.title | highlight: $select.search"></span>
+                        </span>
                     </ui-select-choices>
                 </ui-select>
             </div>
@@ -42,44 +41,39 @@
             </div>
 
             <div class="col-sm-12">
-                <text-angular ng-model="htmlVariable" ta-toolbar="[['bold','italics', 'test']]"></text-angular>
+                <text-angular class="email-subject" ng-model="myform.selfNotifications.subject" ta-toolbar="[['addFieldVariable']]" ta-default-wrap="n"></text-angular>
+                <div ng-bind="myform.selfNotifications.subject"></div>
+            </div>
+        </div>
 
-                <div ng-bind="htmlVariable"></div>
+        <div class="row field">
+            <div class="field-title col-sm-12">
+                <h5>{{ 'EMAIL_MESSAGE' | translate }}</h5>
+            </div>
+
+            <div class="col-sm-12">
+                <text-angular ng-model="myform.selfNotifications.htmlTemplate" ta-toolbar="[['bold','italics', 'addFieldVariable']]"></text-angular>
             </div>
         </div>
 
          <div class="row field">
             <div class="field-title col-sm-12">
-                <h5>{{ 'ENABLE_EMAIL_NOTIFICATIONS' | translate }}</h5>
+                <h5>{{ 'ENABLE_SELF_NOTIFICATIONS' | translate }}</h5>
             </div>
 
             <div class="field-input col-sm-12">
 
                 <label style="display: inline-block;">
-                    <input type="radio" data-ng-value="true" ng-model="myform.emailNotifications.enabled"  ng-required="true" style="background-color:#33CC00;"/>
+                    <input type="radio" data-ng-value="true" ng-model="myform.selfNotifications.enabled"  ng-required="true" style="background-color:#33CC00;"/>
                     &nbsp;<span>{{ 'YES' | translate }}</span>
                 </label>
 
                 <label style="display: inline-block;">
-                    <input type="radio" data-ng-value="false" ng-model="myform.emailNotifications.enabled"  ng-required="true" />
+                    <input type="radio" data-ng-value="false" ng-model="myform.selfNotifications.enabled"  ng-required="true" />
                     &nbsp;<span>{{ 'NO' | translate }}</span>
                 </label>
                 
             </div>
         </div>
-
-        <div class="row field">
-            <div class="col-sm-12 field-title">{{ 'LANGUAGE' | translate }}</div>
-            <div class="col-sm-12 field-input">
-                <select ng-model="myform.language">
-                    <option ng-repeat="language in languages"
-                            ng-selected="language == myform.language"
-                            value="{{language}}">
-                        {{language}}
-                    </option>
-                </select>
-                <span class="required-error" ng-show="field.required && !field.fieldValue">* {{ 'REQUIRED_FIELD' | translate }}</span>
-            </div>
-        </div>
     </div>
 </div>

public/modules/forms/config/forms.client.config.js

@@ -48,7 +48,7 @@ angular.module('forms').run(['Menus',
     });
 }]).config(['$provide', function ($provide){
     $provide.decorator('taOptions', ['$delegate', 'taRegisterTool', '$translate', '$window', function(taOptions, taRegisterTool, $translate, $window) {
-        taRegisterTool('test', {
+        taRegisterTool('addFieldVariable', {
             display: '<div class="dropdown" uib-dropdown is-open="isopen">\
 					<div class="dropdown-toggle" ng-disabled="isDisabled()" uib-dropdown-toggle>\
 						<span>{{ "ADD_A_VARIABLE" | translate }}</span>\
@@ -66,7 +66,6 @@ angular.module('forms').run(['Menus',
             action: function(){
             }
         });
-        taOptions.toolbar[1].push('test');
 
 		return taOptions;
     }]);