jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

fixing tags on survey creation

pull/339/head
Youssef ABIDI 2017-09-14 18:31:11 +01:00
parent fa869aa121
commit eacef1ca2f
9 changed files with 210 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
bower.json
View File

@ -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",

3
package.json
View File

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

67
src/app/pages/surveys/create/create.html
View File

@ -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="panel panel-default bootstrap-panel">
<div id="survey-builder" class="col-md-12 col-lg-12 {{ !display.survey ? 'slide-out-blurred-left' : '' }}">
<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 class="panel-body">
<div class="form-group">
<ui-select multiple ng-model="lists.selected"
<div>
<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>

64
src/app/pages/surveys/create/create.module.js
View File

@ -5,15 +5,73 @@
(function () {
'use strict';
angular.module('BlurAdmin.pages.surveys.create',['BlurAdmin.pages.surveys', 'ui.select', 'ngSanitize'])
.directive('tagInput', tagInput);
angular.module('BlurAdmin.pages.surveys.create',['BlurAdmin.pages.surveys', 'ui.select', 'ngSanitize', 'textAngular', 'ngTagsInput'])
.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'
});
}
};

25
src/app/pages/surveys/create/createTabCtrl.js
View File

@ -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();
$("#survey-actions").fadeOut();
$scope.display.survey = false;
$scope.display.sidebar = true;
$scope.display.surveySending = true;
};
$scope.sendSurvey=function(){
@ -183,8 +194,9 @@
};
$scope.cancelSending=function(){
$("#sidebar").fadeOut();
$("#survey-actions").fadeIn();
$scope.display.survey = true;
$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);

5
src/app/pages/surveys/create/widgets/multiple.html
View File

@ -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 -->

3
src/app/pages/surveys/surveys.module.js
View File

@ -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) {

2
src/app/pages/teams/lists/ListsTabCtrl.js
View File

@ -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)

75
src/sass/theme/_layout.scss
View File

@ -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;
}