fixing tags on survey creation

bower.json

@@ -54,7 +54,9 @@
     "textAngular": "~1.4.6",
     "angular-xeditable": "~0.5.0",
     "ng-js-tree": "~0.0.7",
-    "angular-ui-select": "^0.19.6"
+    "angular-ui-select": "^0.19.6",
+    "angular-upload": "^1.0.12",
+    "ng-tags-input": "^3.2.0"
   },
   "resolutions": {
     "angular": "~1.5.9",

package.json

@@ -44,5 +44,8 @@
   },
   "scripts": {
     "postinstall": "bower install"
+  },
+  "dependencies": {
+    "ng-tags-input": "^3.2.0"
   }
 }

src/app/pages/surveys/create/create.html

@@ -1,8 +1,8 @@
 <div id="surveys" class="widgets">
 
   <div class="row">
-    <div class="col-md-8 col-lg-8">
+    <div id="survey-builder" class="col-md-12 col-lg-12 {{ !display.survey ? 'slide-out-blurred-left' : '' }}">
-        <div id="survey-builder" class="panel panel-default bootstrap-panel">
+        <div class="panel panel-default bootstrap-panel">
           <div class="panel-heading"><h2 ng-model="survey.name" ng-attr-contenteditable="{{ editmode }}" class="panel-title pull-left">{{ survey.name }}</h2></div>
               <div class="panel-body">
                 <p ng-model="survey.description" ng-attr-contenteditable="{{ editmode }}"></p>
@@ -36,14 +36,14 @@
           </div>
         </div>
 
-        <div id="sidebar" class="col-md-4 col-lg-4" style="display:none;">
+        <div id="survey-sending" class="col-md-8 col-lg-8 {{ display.surveySending ? 'roll-in-blurred-left' : 'invisible' }}">
+          <div class="panel panel-default bootstrap-panel">
+            <div class="panel-heading"><h2 class="panel-title pull-left">Send your survey</h2></div>
+                <div class="panel-body">
 
-          <div id="survey-lists" class="panel panel-default bootstrap-panel">
+
-          <div class="panel-heading"><h2 class="panel-title pull-left">Send your survey</h2></div>
+                  <div>
-              <div class="panel-body">
+                    <ui-select multiple ng-model="lists.selected"
-          
-                <div class="form-group">
-                  <ui-select multiple ng-model="lists.selected"
                              ng-disabled="false"
                              search-enabled="true"
                              append-to-body="true"
@@ -55,32 +55,53 @@
                       {{multipleItem.name}}
                     </ui-select-choices>
                   </ui-select>
+                    <input type="text" class="form-control compose-input default-color"  placeholder="Subject" ng-model="boxCtrl.subject">
+
+                    <div class="control-group">
+                      <span class="control-label" style="display: block;float: left;margin: 7px;">360 Survey : </span>
+                      <div><ba-switcher switcher-style="primary" switcher-value="survey.s360"></ba-switcher></div>
+                      
+                    </div>
+
+                    <div class="compose-container">
+                      <text-angular-toolbar ta-toolbar-class="toolbarMain" name="toolbarMain" ta-toolbar="[['h1','h2','h3','bold','italics', 'underline', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],['userName', 'surveyLink']]"></text-angular-toolbar>
+                      <text-angular name="htmlcontent" ta-target-toolbars='toolbarMain,toolbarFooter' ng-model="boxCtrl.text"></text-angular>
+                    </div>
+                  </div>
+                  <div class="compose-footer clearfix">
+                    <button type="button" ng-click="sendSurvey()" class="btn btn-send">Send</button>
+                    <button type="button" ng-click="cancelSending()" class="btn btn-danger">Cancel</button>
+                    <text-angular-toolbar ta-toolbar-class="toolbarFooter" name="toolbarFooter" ta-toolbar="[['insertLink', 'insertImage', 'html', 'quote','insertVideo']]"></text-angular-toolbar>
+                    
+                  </div>
+
+
+
+
                 </div>
+          </div>
+        </div>
+
+        <div id="sidebar" class="col-md-4 col-lg-4 {{ display.sidebar ? 'roll-in-blurred-right' : 'invisible' }}">
+
+          <div id="survey-lists" class="panel panel-default bootstrap-panel">
+          <div class="panel-heading"><h2 class="panel-title pull-left">Memebrs this survey will be sent to</h2></div>
+              <div class="panel-body">
+          
+                
 
                 
                    
                    <div class="feed-messages-container" track-width="smallContainerWidth" min-width="360">
                     <div class="feed-message" ng-repeat="l in lists.selected">
-                        <!--<img class="photo-icon" ng-src="{{m.name.split(' ')[0] | profilePicture}}">-->
+                        <h3>{{l.name}}</h3>
                         <img class="photo-icon roll-in-blurred-right" ng-src="{{m | profilePicture}}" ng-repeat="m in l.members">
                     </div>
                   </div>
 
               
 
-                <div class="actions">
+              
-                  <div class="btn-group">
-                    <button ng-click="sendSurvey()" class="btn btn-success btn-lg">
-                      Send the Survey
-                      </button>
-                  </div>
-
-                  <div class="btn-group">
-                    <button ng-click="cancelSending()" class="btn btn-danger btn-lg">
-                      Cancel
-                      </button>
-                  </div>
-                </div>
               </div>
 
               </div> 

src/app/pages/surveys/create/create.module.js

@@ -5,15 +5,73 @@
 (function () {
   'use strict';
 
-  angular.module('BlurAdmin.pages.surveys.create',['BlurAdmin.pages.surveys', 'ui.select', 'ngSanitize'])
+  angular.module('BlurAdmin.pages.surveys.create',['BlurAdmin.pages.surveys', 'ui.select', 'ngSanitize', 'textAngular', 'ngTagsInput'])
-      .directive('tagInput', tagInput);
+      .directive('tagInput', tagInput)
+      .config(function($provide){
+        $provide.decorator('taOptions', ['taRegisterTool', '$delegate', function(taRegisterTool, taOptions){
+          // $delegate is the taOptions we are decorating
+          // register the tool with textAngular
+          function insertTextAtCursor(text) {
+                    var sel, range;
+                    if (window.getSelection) {
+                        sel = window.getSelection();
+                        if (sel.getRangeAt && sel.rangeCount) {
+                            range = sel.getRangeAt(0);
+                            range.deleteContents();
+                            range.insertNode(document.createTextNode(text));
+                        }
+                    } else if (document.selection && document.selection.createRange) {
+                        document.selection.createRange().text = text;
+                    }
+                }
+
+                function moveCaret(charCount) {
+                    var sel, range;
+                    if (window.getSelection) {
+                        sel = window.getSelection();
+                        if (sel.rangeCount > 0) {
+                            var textNode = sel.focusNode;
+                            sel.collapse(textNode.nextSibling, charCount);
+                        }
+                    } else if ((sel = window.document.selection)) {
+                        if (sel.type != "Control") {
+                            range = sel.createRange();
+                            range.move("character", charCount);
+                            range.select();
+                        }
+                    }
+                }
+
+          taRegisterTool('userName', {
+            iconclass: "fa fa-user",
+            tooltiptext: "Insert the member name",
+            action: function(){
+                insertTextAtCursor("{{MEMBER_NAME}}");
+                return moveCaret(1);
+            }
+          });
+          taRegisterTool('surveyLink', {
+            iconclass: "fa fa-external-link",
+            tooltiptext: "Insert the Survey link",
+            action: function(){
+                insertTextAtCursor("{{SURVEY_LINK}}");
+                return moveCaret(1);
+            }
+          });
+          // add the button to the default toolbar definition
+          taOptions.toolbar[1].push('colourRed');
+          return taOptions;
+        }]);
+      }); 
 
   function tagInput() {
     return {
       restrict: 'A',
       link: function( $scope, elem, attr) {
+        console.log("tagInput", $scope);
         $(elem).tagsinput({
-          tagClass:  'label label-' + attr.tagInput
+          tagClass:  'label label-' + attr.tagInput,
+          val: 'test'
         });
       }
     };

src/app/pages/surveys/create/createTabCtrl.js

@@ -46,6 +46,15 @@
   	$scope.survey.description = 'Page Description';
   	$scope.survey.elements = [];
 
+    $scope.display = {};
+    $scope.display.survey = true;
+    $scope.display.sidebar = false;
+    $scope.display.surveySending = false;
+
+    $scope.emailsTexts = []
+    $scope.emailsTexts["s_360"] = "<p>Dear {{MEMBER_NAME}},<br><br>You have been selected to participate in a 360 Feedback Survey.<br><br>The purpose of a 360 Feedback Survey is to provide feedback to our leaders that will enable them to develop and improve.<br><br>To gain access to the site, please click on the link below.<br><br>{{SURVEY_LINK}}<br><br>We appreciate your assistance in this process and request that you complete the 360 feedback by .<br><br>Please be sure to answer all questions as honestly and as accurately as you can - all information received is kept strictly confidential. Thank you for taking the time to participate in this survey.<br><br>If you have any questions regarding the survey process or experience any technical difficulties, please contact .<br><br>Thank you for your participation<br></p>"
+    $scope.emailsTexts["s_default"] = "Normal"
+
     $scope.progressFunction = function() {
       return $timeout(function() {}, 3000);
     };
@@ -89,6 +98,7 @@
                     comment: false,
                     commentLabel: '',
                     tags:[],
+                    tagsJoined:'',
                     items: (type == 'multiple') ? [item] : [],
                 };
             }
@@ -172,8 +182,9 @@
 
     $scope.submitSurvey=function(){
         $scope.saveSurvey();
-        $("#sidebar").fadeIn();
+        $scope.display.survey = false;
-        $("#survey-actions").fadeOut();
+        $scope.display.sidebar = true;
+        $scope.display.surveySending = true;
       };
 
       $scope.sendSurvey=function(){
@@ -183,8 +194,9 @@
       };
 
     $scope.cancelSending=function(){
-        $("#sidebar").fadeOut();
+        $scope.display.survey = true;
-        $("#survey-actions").fadeIn();
+        $scope.display.sidebar = false;
+        $scope.display.surveySending = false;
       };
 
     $scope.updateBuilder=function(){
@@ -204,6 +216,11 @@
       SurveyService
         .get(id)
         .then(function (data){
+          $log.info("data[0]",data[0].elements);
+          angular.forEach(data[0].elements, function(elem) {
+            elem.tagsJoined = elem.tags.join();
+          });
+          
           $scope.survey = data[0];
           $scope.updateBuilder();
           $log.info("Got the survey data",$scope.survey);

src/app/pages/surveys/create/widgets/multiple.html

@@ -82,7 +82,10 @@
 					  <div class="form-group">
 					  	<label class="col-md-12">Question Tags</label>
 							<div class="col-md-12">
-								    	<input type="text" tag-input="primary" ng-model="element.tags" ng-list data-role="tagsinput" placeholder="Add Tag">
+
+								    	<tags-input track-by-expr="$index" class="bootstrap" ng-model="element.tags" use-strings="true">
+        
+    									</tags-input>
 								  </div>
 					  </div>	
 					  <!-- End Tags -->

src/app/pages/surveys/surveys.module.js

@@ -8,8 +8,7 @@
   angular.module('BlurAdmin.pages.surveys', [
     'BlurAdmin.pages.surveys.create',
     'BlurAdmin.pages.surveys.list',
-  ])
+  ]).config(routeConfig);
-      .config(routeConfig);
 
   /** @ngInject */
   function routeConfig($stateProvider) {

src/app/pages/teams/lists/ListsTabCtrl.js

@@ -226,7 +226,7 @@
 
     }; 
 
-    vm.updateMembers = function (members, action, multi = false) {
+    vm.updateMembers = function (members, action, multi) {
       if (confirm("Are you sure?"))
            {
             console.log('updateMembers:members', members)

src/sass/theme/_layout.scss

@@ -248,13 +248,13 @@ a {
     margin-top: -25px;
 }
 
-#surveys [contenteditable='true']:hover{
+#surveys  #survey-builder [contenteditable='true']:hover{
   cursor:pointer;
   border: 1px dashed;
   padding: 5px;
   position:relative;
 }
-#surveys [contenteditable='true']:after{
+#surveys  #survey-builder [contenteditable='true']:after{
   content: "\f040";
   font-family: FontAwesome;
   opacity: 0;
@@ -262,6 +262,75 @@ a {
   right: 10px;
   top: 5px;
 }
-#surveys [contenteditable='true']:hover:after{
+#surveys  #survey-builder [contenteditable='true']:hover:after{
   opacity: 1;
+}
+
+#surveys  #survey-sending .compose-container .ta-text.ta-editor {
+    background-color: #F5F5F5;
+}
+
+#surveys  #survey-sending input {
+    margin : 10px 0;
+}
+
+#surveys  #survey-sending .btn-group, .btn-group-vertical {
+    margin-right: 20px;
+}
+
+
+
+
+
+
+.bootstrap .tags {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+.bootstrap .tags.focused {
+  border-color: #66afe9;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
+}
+
+.bootstrap .tags .tag-item {
+  background: #428bca;
+  border: 1px solid #357ebd;
+  border-radius: 4px;
+  color: #fff;
+}
+
+.bootstrap .tags .tag-item.selected {
+  background: #d9534f;
+  border: 1px solid #d43f3a;
+  border-radius: 4px;
+  color: #fff;
+}
+
+.bootstrap .tags .tag-item button {
+  background: transparent;
+  color: #000;
+  opacity: .4;
+}
+
+.bootstrap .autocomplete {
+  border-radius: 4px;
+}
+
+.bootstrap .autocomplete .suggestion-item.selected {
+  color: #262626;
+  background-color: #e9e9e9;
+}
+
+.bootstrap .autocomplete .suggestion-item em {
+  font-weight: normal;
+  background-color: #ffff00;
+}
+
+.bootstrap .autocomplete .suggestion-item.selected em {
+  color: #262626;
+  background-color: #ffff00;
 }