2015-07-03 23:47:14 +00:00
|
|
|
'use strict';
|
|
|
|
|
2017-03-10 18:25:35 +00:00
|
|
|
angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormFields', '$uibModal',
|
|
|
|
function ($rootScope, FormFields, $uibModal) {
|
2015-07-03 23:47:14 +00:00
|
|
|
return {
|
2016-05-05 19:12:40 +00:00
|
|
|
templateUrl: 'modules/forms/admin/views/directiveViews/form/edit-form.client.view.html',
|
2015-07-06 04:29:05 +00:00
|
|
|
restrict: 'E',
|
2016-11-02 20:32:08 +00:00
|
|
|
transclude: true,
|
2015-07-06 04:29:05 +00:00
|
|
|
scope: {
|
2016-11-02 20:32:08 +00:00
|
|
|
myform:'='
|
2015-07-06 04:29:05 +00:00
|
|
|
},
|
2015-07-03 23:47:14 +00:00
|
|
|
controller: function($scope){
|
2016-06-08 23:12:48 +00:00
|
|
|
|
2015-08-05 22:24:24 +00:00
|
|
|
/*
|
|
|
|
** Initialize scope with variables
|
|
|
|
*/
|
2017-07-28 21:47:09 +00:00
|
|
|
var newField;
|
2017-06-23 17:54:28 +00:00
|
|
|
|
2016-05-17 01:27:37 +00:00
|
|
|
//Setup UI-Sortable
|
|
|
|
$scope.sortableOptions = {
|
|
|
|
appendTo: '.dropzone',
|
2017-08-02 20:05:17 +00:00
|
|
|
//helper: 'clone',
|
2017-03-10 20:16:53 +00:00
|
|
|
forceHelperSize: true,
|
|
|
|
forcePlaceholderSize: true,
|
2017-03-10 19:55:30 +00:00
|
|
|
update: function(e, ui) {
|
2017-10-07 07:35:41 +00:00
|
|
|
$scope.update(false, $scope.myform, true, false, function(err){
|
2017-03-10 20:50:17 +00:00
|
|
|
});
|
2017-03-10 20:16:53 +00:00
|
|
|
},
|
2016-05-17 01:27:37 +00:00
|
|
|
};
|
|
|
|
|
2017-03-10 18:25:35 +00:00
|
|
|
/*
|
|
|
|
** EditModal Functions
|
|
|
|
*/
|
2017-10-19 00:18:18 +00:00
|
|
|
$scope.openEditModal = function(curr_field, isEdit, field_index){
|
2017-03-10 18:25:35 +00:00
|
|
|
$scope.editFieldModal = $uibModal.open({
|
|
|
|
animation: true,
|
|
|
|
templateUrl: 'editFieldModal.html',
|
2017-03-13 19:08:21 +00:00
|
|
|
windowClass: 'edit-modal-window',
|
2017-03-10 18:25:35 +00:00
|
|
|
controller: function($uibModalInstance, $scope) {
|
|
|
|
$scope.field = curr_field;
|
|
|
|
$scope.showLogicJump = false;
|
|
|
|
|
2017-10-19 00:18:18 +00:00
|
|
|
$scope.isEdit = isEdit;
|
|
|
|
|
2017-03-13 04:18:55 +00:00
|
|
|
// decides whether field options block will be shown (true for dropdown and radio fields)
|
|
|
|
$scope.showAddOptions = function (field){
|
2017-10-19 00:44:48 +00:00
|
|
|
if($scope.field.fieldType === 'dropdown' || $scope.field.fieldType === 'checkbox' || $scope.field.fieldType === 'radio'){
|
2017-03-13 04:18:55 +00:00
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2017-03-13 05:09:47 +00:00
|
|
|
$scope.validShapes = [
|
|
|
|
'Heart',
|
|
|
|
'Star',
|
|
|
|
'thumbs-up',
|
|
|
|
'thumbs-down',
|
|
|
|
'Circle',
|
|
|
|
'Square',
|
|
|
|
'Check Circle',
|
|
|
|
'Smile Outlined',
|
|
|
|
'Hourglass',
|
|
|
|
'bell',
|
|
|
|
'Paper Plane',
|
|
|
|
'Comment',
|
|
|
|
'Trash'
|
|
|
|
];
|
|
|
|
|
|
|
|
// add new option to the field
|
2017-10-19 00:18:18 +00:00
|
|
|
$scope.addOption = function(){
|
|
|
|
if($scope.field.fieldType === 'checkbox' || $scope.field.fieldType === 'dropdown' || $scope.field.fieldType === 'radio'){
|
|
|
|
if(!$scope.field.fieldOptions){
|
|
|
|
$scope.field.fieldOptions = [];
|
2017-03-13 05:09:47 +00:00
|
|
|
}
|
|
|
|
|
2017-10-19 00:18:18 +00:00
|
|
|
var lastOptionID = $scope.field.fieldOptions.length+1;
|
2017-03-13 05:09:47 +00:00
|
|
|
|
|
|
|
// new option's id
|
|
|
|
|
|
|
|
var newOption = {
|
|
|
|
'option_id' : Math.floor(100000*Math.random()),
|
|
|
|
'option_title' : 'Option '+lastOptionID,
|
|
|
|
'option_value' : 'Option ' +lastOptionID
|
|
|
|
};
|
|
|
|
|
|
|
|
// put new option into fieldOptions array
|
2017-10-19 00:18:18 +00:00
|
|
|
$scope.field.fieldOptions.push(newOption);
|
2017-03-13 05:09:47 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// delete particular option
|
2017-10-19 00:18:18 +00:00
|
|
|
$scope.deleteOption = function (option){
|
|
|
|
if($scope.field.fieldType === 'checkbox' || $scope.field.fieldType === 'dropdown' || $scope.field.fieldType === 'radio'){
|
|
|
|
for(var i = 0; i < $scope.field.fieldOptions.length; i++){
|
|
|
|
if($scope.field.fieldOptions[i].option_id === option.option_id){
|
2017-03-13 05:09:47 +00:00
|
|
|
|
2017-10-19 00:18:18 +00:00
|
|
|
$scope.field.fieldOptions.splice(i, 1);
|
2017-03-13 05:09:47 +00:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
//Populate Name to Font-awesomeName Conversion Map
|
|
|
|
$scope.select2FA = {
|
|
|
|
'Heart': 'Heart',
|
|
|
|
'Star': 'Star',
|
|
|
|
'thumbs-up': 'Thumbs Up',
|
|
|
|
'thumbs-down':'Thumbs Down',
|
|
|
|
'Circle': 'Circle',
|
|
|
|
'Square':'Square',
|
|
|
|
'Check Circle': 'Checkmark',
|
|
|
|
'Smile Outlined': 'Smile',
|
|
|
|
'Hourglass': 'Hourglass',
|
|
|
|
'bell': 'Bell',
|
|
|
|
'Paper Plane': 'Paper Plane',
|
|
|
|
'Comment': 'Chat Bubble',
|
|
|
|
'Trash': 'Trash Can'
|
|
|
|
};
|
|
|
|
|
2017-03-13 04:18:55 +00:00
|
|
|
// decides whether field options block will be shown (true for dropdown and radio fields)
|
2017-10-19 00:18:18 +00:00
|
|
|
$scope.showRatingOptions = function (){
|
|
|
|
if($scope.field.fieldType === 'rating'){
|
2017-03-13 04:18:55 +00:00
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2017-03-10 19:26:07 +00:00
|
|
|
$scope.saveField = function(){
|
2017-10-19 00:18:18 +00:00
|
|
|
if($scope.isEdit){
|
|
|
|
$scope.myform.form_fields[field_index] = $scope.field;
|
|
|
|
} else {
|
|
|
|
$scope.myform.form_fields.push(curr_field);
|
|
|
|
}
|
2017-03-10 18:25:35 +00:00
|
|
|
|
2017-10-07 07:27:03 +00:00
|
|
|
$scope.$parent.update(false, $scope.$parent.myform, true, true, function(){
|
2017-03-10 19:26:07 +00:00
|
|
|
$uibModalInstance.close();
|
|
|
|
});
|
2017-10-19 00:18:18 +00:00
|
|
|
|
2017-03-10 19:26:07 +00:00
|
|
|
};
|
2017-03-10 18:25:35 +00:00
|
|
|
$scope.cancel = function(){
|
2017-03-10 19:26:07 +00:00
|
|
|
$uibModalInstance.close();
|
2017-03-10 18:25:35 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2016-06-01 01:06:45 +00:00
|
|
|
/*
|
2017-03-13 19:08:21 +00:00
|
|
|
** EditStartPageModal Functions
|
2016-06-01 01:06:45 +00:00
|
|
|
*/
|
2017-03-13 19:08:21 +00:00
|
|
|
$scope.openEditStartPageModal = function(){
|
|
|
|
$scope.editStartPageModal = $uibModal.open({
|
|
|
|
animation: true,
|
|
|
|
templateUrl: 'editStartPageModal.html',
|
|
|
|
windowClass: 'edit-modal-window',
|
|
|
|
controller: function($uibModalInstance, $scope) {
|
|
|
|
|
|
|
|
/*
|
|
|
|
** startPage Button Methods
|
|
|
|
*/
|
|
|
|
|
|
|
|
$scope.showButtons = false;
|
|
|
|
$scope.lastButtonID = 0;
|
|
|
|
|
|
|
|
// add new Button to the startPage
|
|
|
|
$scope.addButton = function(){
|
|
|
|
|
|
|
|
var newButton = {};
|
|
|
|
newButton.bgColor = '#ddd';
|
|
|
|
newButton.color = '#ffffff';
|
|
|
|
newButton.text = 'Button';
|
|
|
|
newButton._id = Math.floor(100000*Math.random());
|
|
|
|
|
|
|
|
$scope.myform.startPage.buttons.push(newButton);
|
|
|
|
};
|
|
|
|
|
|
|
|
// delete particular Button from startPage
|
|
|
|
$scope.deleteButton = function(button){
|
|
|
|
var currID;
|
|
|
|
for(var i = 0; i < $scope.myform.startPage.buttons.length; i++){
|
|
|
|
|
|
|
|
currID = $scope.myform.startPage.buttons[i]._id;
|
|
|
|
|
|
|
|
if(currID === button._id){
|
|
|
|
$scope.myform.startPage.buttons.splice(i, 1);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
$scope.saveStartPage = function(){
|
2017-10-07 07:27:03 +00:00
|
|
|
$scope.$parent.update(false, $scope.$parent.myform, true, true, function(){
|
2017-03-13 19:08:21 +00:00
|
|
|
$uibModalInstance.close();
|
|
|
|
});
|
|
|
|
};
|
|
|
|
$scope.cancel = function(){
|
|
|
|
$uibModalInstance.close();
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
2017-10-07 07:27:03 +00:00
|
|
|
** EditEndPageModal Functions
|
2017-03-13 19:08:21 +00:00
|
|
|
*/
|
|
|
|
$scope.openEditEndPageModal = function(){
|
|
|
|
$scope.editEndPageModal = $uibModal.open({
|
|
|
|
animation: true,
|
|
|
|
templateUrl: 'editEndPageModal.html',
|
|
|
|
windowClass: 'edit-modal-window',
|
|
|
|
controller: function($uibModalInstance, $scope) {
|
|
|
|
|
|
|
|
/*
|
|
|
|
** startPage Button Methods
|
|
|
|
*/
|
2016-05-17 01:27:37 +00:00
|
|
|
|
2017-03-13 19:08:21 +00:00
|
|
|
$scope.showButtons = false;
|
|
|
|
$scope.lastButtonID = 0;
|
2015-08-05 22:24:24 +00:00
|
|
|
|
2017-03-13 19:08:21 +00:00
|
|
|
// add new Button to the startPage
|
|
|
|
$scope.addButton = function(){
|
2015-08-05 22:24:24 +00:00
|
|
|
|
2017-03-13 19:08:21 +00:00
|
|
|
var newButton = {};
|
|
|
|
newButton.bgColor = '#ddd';
|
|
|
|
newButton.color = '#ffffff';
|
|
|
|
newButton.text = 'Button';
|
|
|
|
newButton._id = Math.floor(100000*Math.random());
|
|
|
|
|
|
|
|
$scope.myform.endPage.buttons.push(newButton);
|
|
|
|
};
|
|
|
|
|
|
|
|
// delete particular Button from startPage
|
|
|
|
$scope.deleteButton = function(button){
|
|
|
|
var currID;
|
|
|
|
for(var i = 0; i < $scope.myform.endPage.buttons.length; i++){
|
|
|
|
|
|
|
|
currID = $scope.myform.endPage.buttons[i]._id;
|
|
|
|
|
|
|
|
if(currID === button._id){
|
|
|
|
$scope.myform.endPage.buttons.splice(i, 1);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
$scope.saveEndPage = function(){
|
2017-10-07 07:27:03 +00:00
|
|
|
$scope.$parent.update(false, $scope.$parent.myform, true, true, function(){
|
2017-03-13 19:08:21 +00:00
|
|
|
$uibModalInstance.close();
|
|
|
|
});
|
|
|
|
};
|
|
|
|
$scope.cancel = function(){
|
|
|
|
$uibModalInstance.close();
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
2015-08-25 21:33:52 +00:00
|
|
|
|
2015-08-05 22:24:24 +00:00
|
|
|
|
2015-07-06 04:29:05 +00:00
|
|
|
//Populate local scope with rootScope methods/variables
|
|
|
|
$scope.update = $rootScope.update;
|
|
|
|
|
2015-07-21 23:25:45 +00:00
|
|
|
/*
|
|
|
|
** FormFields (ui-sortable) drag-and-drop configuration
|
|
|
|
*/
|
2016-06-05 02:01:39 +00:00
|
|
|
$scope.dropzone = {
|
|
|
|
handle: '.handle',
|
|
|
|
containment: '.dropzoneContainer',
|
|
|
|
cursor: 'grabbing'
|
|
|
|
};
|
2015-07-21 23:25:45 +00:00
|
|
|
|
2015-08-05 22:24:24 +00:00
|
|
|
/*
|
|
|
|
** Field CRUD Methods
|
|
|
|
*/
|
2015-07-09 22:21:29 +00:00
|
|
|
// Add a new field
|
2017-10-19 00:18:18 +00:00
|
|
|
$scope.addNewField = function(fieldType){
|
2016-06-04 07:00:31 +00:00
|
|
|
// increment lastAddedID counter
|
2015-07-03 23:47:14 +00:00
|
|
|
$scope.addField.lastAddedID++;
|
2017-03-07 00:38:37 +00:00
|
|
|
var fieldTitle = fieldType;
|
2015-07-09 22:15:34 +00:00
|
|
|
|
2015-07-04 03:25:25 +00:00
|
|
|
for(var i = 0; i < $scope.addField.types.length; i++){
|
2016-04-29 06:00:41 +00:00
|
|
|
if($scope.addField.types[i].name === fieldType){
|
2015-07-04 03:25:25 +00:00
|
|
|
$scope.addField.types[i].lastAddedID++;
|
2016-04-29 06:00:41 +00:00
|
|
|
fieldTitle = $scope.addField.types[i].value+$scope.addField.types[i].lastAddedID;
|
2015-07-04 03:25:25 +00:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2017-06-23 17:54:28 +00:00
|
|
|
newField = {
|
2017-03-27 20:32:06 +00:00
|
|
|
title: fieldTitle,
|
2015-08-21 00:17:14 +00:00
|
|
|
fieldType: fieldType,
|
2017-03-27 20:32:06 +00:00
|
|
|
fieldValue: '',
|
2015-08-21 00:17:14 +00:00
|
|
|
required: true,
|
|
|
|
disabled: false,
|
2016-08-23 21:45:59 +00:00
|
|
|
deletePreserved: false,
|
|
|
|
logicJump: {}
|
2015-07-03 23:47:14 +00:00
|
|
|
};
|
2016-04-29 06:00:41 +00:00
|
|
|
|
2017-03-07 00:38:37 +00:00
|
|
|
if(fieldType === 'rating'){
|
|
|
|
newField.ratingOptions = {
|
2017-08-02 21:13:10 +00:00
|
|
|
steps: 5,
|
2017-03-07 00:38:37 +00:00
|
|
|
shape: 'Heart'
|
2017-03-27 20:32:06 +00:00
|
|
|
};
|
2017-08-02 21:13:10 +00:00
|
|
|
newField.fieldValue = 0;
|
2017-03-07 00:38:37 +00:00
|
|
|
}
|
2017-03-10 18:25:35 +00:00
|
|
|
|
2016-06-01 01:06:45 +00:00
|
|
|
if($scope.showAddOptions(newField)){
|
|
|
|
newField.fieldOptions = [];
|
|
|
|
newField.fieldOptions.push({
|
2016-06-05 00:48:49 +00:00
|
|
|
'option_id' : Math.floor(100000*Math.random()), //Generate pseudo-random option id
|
2016-06-01 01:06:45 +00:00
|
|
|
'option_title' : 'Option 0',
|
|
|
|
'option_value' : 'Option 0'
|
|
|
|
});
|
|
|
|
}
|
2016-06-04 07:00:31 +00:00
|
|
|
|
2017-10-19 00:18:18 +00:00
|
|
|
$scope.openEditModal(newField, false, $scope.myform.form_fields.length);
|
2015-07-03 23:47:14 +00:00
|
|
|
};
|
|
|
|
|
2017-03-13 04:18:55 +00:00
|
|
|
// decides whether field options block will be shown (true for dropdown and radio fields)
|
|
|
|
$scope.showAddOptions = function (field){
|
|
|
|
if(field.fieldType === 'dropdown' || field.fieldType === 'checkbox' || field.fieldType === 'radio'){
|
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// decides whether field options block will be shown (true for dropdown and radio fields)
|
|
|
|
$scope.showRatingOptions = function (field){
|
|
|
|
if(field.fieldType === 'rating'){
|
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2015-08-25 21:33:52 +00:00
|
|
|
// Delete particular field on button click
|
2016-11-02 20:32:08 +00:00
|
|
|
$scope.deleteField = function (field_index) {
|
2015-08-25 21:33:52 +00:00
|
|
|
$scope.myform.form_fields.splice(field_index, 1);
|
2017-10-07 07:35:41 +00:00
|
|
|
$scope.update(false, $scope.myform, false, true, null);
|
2015-07-03 23:47:14 +00:00
|
|
|
};
|
2016-11-02 20:32:08 +00:00
|
|
|
|
2017-03-27 20:32:06 +00:00
|
|
|
$scope.duplicateField = function(field_index){
|
2017-09-20 23:57:05 +00:00
|
|
|
var currField = angular.copy($scope.myform.form_fields[field_index]);
|
2015-11-13 00:52:14 +00:00
|
|
|
currField._id = 'cloned'+_.uniqueId();
|
|
|
|
currField.title += ' copy';
|
2015-08-05 22:46:33 +00:00
|
|
|
|
|
|
|
//Insert field at selected index
|
2017-09-20 23:57:05 +00:00
|
|
|
$scope.myform.form_fields.push(currField);
|
2017-10-07 07:35:41 +00:00
|
|
|
$scope.update(false, $scope.myform, false, true, null);
|
2015-07-04 01:04:39 +00:00
|
|
|
};
|
|
|
|
|
2017-03-13 19:08:21 +00:00
|
|
|
//Populate AddField with all available form field types
|
|
|
|
$scope.addField = {};
|
|
|
|
$scope.addField.types = FormFields.types;
|
2015-08-07 22:30:41 +00:00
|
|
|
|
2017-03-13 19:08:21 +00:00
|
|
|
$scope.addField.types.forEach(function(type){
|
|
|
|
type.lastAddedID = 1;
|
|
|
|
return type;
|
|
|
|
});
|
2015-08-07 22:30:41 +00:00
|
|
|
|
2016-06-01 01:06:45 +00:00
|
|
|
}
|
2015-07-03 23:47:14 +00:00
|
|
|
};
|
|
|
|
}
|
2016-04-16 21:56:01 +00:00
|
|
|
]);
|