Merge pull request #260 from tellform/improvedAddOptionUX
Improved UX of Adding an Option
This commit is contained in:
commit
421d3b53b8
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -21,7 +21,7 @@ Oscar_Credentials.*
|
|||
npm-debug.log
|
||||
node_modules/
|
||||
public/lib/
|
||||
public/dist
|
||||
public/dist/
|
||||
app/tests/coverage/
|
||||
.bower-*/
|
||||
.idea/
|
||||
|
|
|
@ -49,6 +49,10 @@ function BaseFieldSchema(){
|
|||
Schema.apply(this, arguments);
|
||||
|
||||
this.add({
|
||||
newOptionSchema: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
globalId: {
|
||||
type: String,
|
||||
},
|
||||
|
@ -72,6 +76,7 @@ function BaseFieldSchema(){
|
|||
|
||||
ratingOptions: RatingFieldSchema,
|
||||
fieldOptions: [FieldOptionSchema],
|
||||
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
|
@ -168,7 +173,6 @@ FormFieldSchema.pre('save', function(next) {
|
|||
if(this.fieldType === 'dropdown' && this.isSubmission){
|
||||
this.fieldValue = this.fieldValue.option_value;
|
||||
}
|
||||
|
||||
return next();
|
||||
});
|
||||
|
||||
|
|
1336
public/dist/application.js
vendored
1336
public/dist/application.js
vendored
File diff suppressed because it is too large
Load diff
4
public/dist/application.min.css
vendored
4
public/dist/application.min.css
vendored
File diff suppressed because one or more lines are too long
1
public/dist/application.min.js
vendored
1
public/dist/application.min.js
vendored
File diff suppressed because one or more lines are too long
35
public/dist/form_populate_template_cache.js
vendored
35
public/dist/form_populate_template_cache.js
vendored
File diff suppressed because one or more lines are too long
20
public/dist/vendor.min.js
vendored
20
public/dist/vendor.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -49,6 +49,7 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
|
|||
LOGIC_JUMP: 'Logic Jump',
|
||||
SHOW_BUTTONS: 'Additional Buttons',
|
||||
SAVE_START_PAGE: 'Save',
|
||||
ADD_OPTIONS_PLACEHOLDER: 'Add one choice per line. Minumum of one choice is required',
|
||||
|
||||
//Admin Form View
|
||||
ARE_YOU_SURE: 'Are you ABSOLUTELY sure?',
|
||||
|
|
|
@ -49,6 +49,7 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
|
|||
LOGIC_JUMP: 'Saut logique',
|
||||
SHOW_BUTTONS: 'Boutons supplémentaires',
|
||||
SAVE_START_PAGE: "Enregistrer",
|
||||
ADD_OPTIONS_PLACEHOLDER: "Ajouter un choix par ligne. Un minimum d'un choix est requis",
|
||||
|
||||
// Affichage du formulaire d'administration
|
||||
ARE_YOU_SURE: 'Es-tu ABSOLUMENT sûr?',
|
||||
|
|
|
@ -49,6 +49,7 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
|
|||
LOGIC_JUMP: 'Logischer Sprung',
|
||||
SHOW_BUTTONS: 'Zusätzliche Schaltflächen',
|
||||
SAVE_START_PAGE: 'Speichern',
|
||||
ADD_OPTIONS_PLACEHOLDER: 'Fügen Sie eine Auswahl pro Zeile hinzu. Mindestens eine Wahl ist erforderlich.',
|
||||
|
||||
// Admin-Formularansicht
|
||||
ARE_YOU_SURE: "Bist du ABSOLUT sicher?",
|
||||
|
|
|
@ -49,6 +49,7 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
|
|||
LOGIC_JUMP: 'Jump Logic',
|
||||
SHOW_BUTTONS: 'Pulsanti aggiuntivi',
|
||||
SAVE_START_PAGE: 'Salva',
|
||||
ADD_OPTIONS_PLACEHOLDER: "Aggiungi una scelta per riga. È necessario un minimo di una scelta.",
|
||||
|
||||
// Visualizzazione modulo di amministrazione
|
||||
ARE_YOU_SURE: 'Sei ASSOLUTAMENTE sicuro?',
|
||||
|
|
|
@ -49,6 +49,7 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
|
|||
LOGIC_JUMP: 'Salto lógico',
|
||||
SHOW_BUTTONS: 'Botones adicionales',
|
||||
SAVE_START_PAGE: 'Grabar',
|
||||
ADD_OPTIONS_PLACEHOLDER: 'Agregue una opción por línea. Se requiere un mínimo de una opción',
|
||||
|
||||
//Admin Form View
|
||||
ARE_YOU_SURE: '¿Estás absolutamente seguro?',
|
||||
|
|
|
@ -36,22 +36,60 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
|
|||
animation: true,
|
||||
templateUrl: 'editFieldModal.html',
|
||||
windowClass: 'edit-modal-window',
|
||||
scope: $scope,
|
||||
controller: function($uibModalInstance, $scope) {
|
||||
$scope.field = curr_field;
|
||||
$scope.showLogicJump = false;
|
||||
var fieldOptionsToString = function(){
|
||||
if(!$scope.field.fieldOptions){
|
||||
return '';
|
||||
}
|
||||
|
||||
return $scope.field.fieldOptions.map(function(fieldOption){
|
||||
return fieldOption.option_value;
|
||||
}).join('\n');
|
||||
}
|
||||
|
||||
$scope.field = curr_field;
|
||||
$scope.isEdit = isEdit;
|
||||
$scope.options = {
|
||||
isEdit: isEdit,
|
||||
fieldOptionsString: fieldOptionsToString()
|
||||
}
|
||||
|
||||
var stringToFieldOptions = function(fieldOptionsString){
|
||||
var values = fieldOptionsString.split('\n');
|
||||
var fieldOptions = [];
|
||||
for(var i=0; i < values.length; i++){
|
||||
fieldOptions.push({
|
||||
option_value: values[i]
|
||||
});
|
||||
}
|
||||
|
||||
return fieldOptions;
|
||||
}
|
||||
|
||||
$scope.$watch('options.fieldOptionsString', function(newVal, oldVal){
|
||||
if(newVal !== oldVal){
|
||||
$scope.field.fieldOptions = stringToFieldOptions(newVal);
|
||||
}
|
||||
});
|
||||
|
||||
// decides whether field options block will be shown (true for dropdown and radio fields)
|
||||
$scope.showAddOptions = function (field){
|
||||
if($scope.field.fieldType === 'dropdown' || $scope.field.fieldType === 'checkbox' || $scope.field.fieldType === 'radio'){
|
||||
$scope.showListOptions = function () {
|
||||
if($scope.field.fieldType === 'dropdown' || $scope.field.fieldType === 'radio'){
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
$scope.validShapes = [
|
||||
// decides whether field options block will be shown (true for rating fields)
|
||||
$scope.showRatingOptions = function (){
|
||||
if($scope.field.fieldType === 'rating'){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
$scope.validShapes = [
|
||||
'Heart',
|
||||
'Star',
|
||||
'thumbs-up',
|
||||
|
@ -67,42 +105,7 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
|
|||
'Trash'
|
||||
];
|
||||
|
||||
// add new option to the field
|
||||
$scope.addOption = function(){
|
||||
if($scope.field.fieldType === 'checkbox' || $scope.field.fieldType === 'dropdown' || $scope.field.fieldType === 'radio'){
|
||||
if(!$scope.field.fieldOptions){
|
||||
$scope.field.fieldOptions = [];
|
||||
}
|
||||
|
||||
var lastOptionID = $scope.field.fieldOptions.length+1;
|
||||
|
||||
// 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
|
||||
$scope.field.fieldOptions.push(newOption);
|
||||
}
|
||||
};
|
||||
|
||||
// delete particular option
|
||||
$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){
|
||||
|
||||
$scope.field.fieldOptions.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//Populate Name to Font-awesomeName Conversion Map
|
||||
//Name to Font-Awesome Conversion Map
|
||||
$scope.select2FA = {
|
||||
'Heart': 'Heart',
|
||||
'Star': 'Star',
|
||||
|
@ -119,17 +122,12 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
|
|||
'Trash': 'Trash Can'
|
||||
};
|
||||
|
||||
// decides whether field options block will be shown (true for dropdown and radio fields)
|
||||
$scope.showRatingOptions = function (){
|
||||
if($scope.field.fieldType === 'rating'){
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
if($scope.field.fieldType === 'dropdown' || $scope.field.fieldType === 'radio'){
|
||||
|
||||
}
|
||||
|
||||
$scope.saveField = function(){
|
||||
if($scope.isEdit){
|
||||
if($scope.options.isEdit){
|
||||
$scope.myform.form_fields[field_index] = $scope.field;
|
||||
} else {
|
||||
$scope.myform.form_fields.push(curr_field);
|
||||
|
@ -293,7 +291,7 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
|
|||
required: true,
|
||||
disabled: false,
|
||||
deletePreserved: false,
|
||||
logicJump: {}
|
||||
logicJump: {},
|
||||
};
|
||||
|
||||
if(fieldType === 'rating'){
|
||||
|
@ -304,36 +302,15 @@ angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormField
|
|||
newField.fieldValue = 0;
|
||||
}
|
||||
|
||||
if($scope.showAddOptions(newField)){
|
||||
newField.fieldOptions = [];
|
||||
newField.fieldOptions.push({
|
||||
'option_id' : Math.floor(100000*Math.random()), //Generate pseudo-random option id
|
||||
'option_title' : 'Option 0',
|
||||
'option_value' : 'Option 0'
|
||||
});
|
||||
if(fieldType === 'dropdown' || fieldType === 'radio'){
|
||||
newField.fieldOptions = [{
|
||||
option_value: 'Option1'
|
||||
}];
|
||||
}
|
||||
|
||||
$scope.openEditModal(newField, false, $scope.myform.form_fields.length);
|
||||
$scope.openEditModal(newField, false, $scope.myform.form_fields.length);
|
||||
};
|
||||
|
||||
// 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;
|
||||
}
|
||||
};
|
||||
|
||||
// Delete particular field on button click
|
||||
$scope.deleteField = function (field_index) {
|
||||
$scope.myform.form_fields.splice(field_index, 1);
|
||||
|
|
|
@ -1,296 +1,5 @@
|
|||
<form class="row" name="editForm" >
|
||||
|
||||
<!-- Edit EndPage Modal Dialog Template -->
|
||||
<script type="text/ng-template" id="editEndPageModal.html" class="edit-endpage-modal">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="edit-panel col-md-6 col-xs-12 col-sm-12">
|
||||
<div class="row modal-header">
|
||||
<h2 class="modal-title hidden-md hidden-lg">{{ 'EDIT_END_PAGE' | translate }}</h2>
|
||||
<h3 class="modal-title hidden-xs hidden-sm">{{ 'EDIT_END_PAGE' | translate }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="row question">
|
||||
<div class="col-md-4 col-sm-12">{{ 'TITLE' | translate }}:</div>
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<input class="form-control" type="text"
|
||||
ng-model="myform.endPage.title" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row question">
|
||||
<div class="col-md-4 col-sm-12">{{ 'PARAGRAPH' | translate }}:</div>
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<textarea class="form-control" type="text"
|
||||
ng-model="myform.endPage.paragraph"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row question">
|
||||
<div class="col-md-4 col-sm-12">{{ 'BTN_TEXT' | translate }}:</div>
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<input class="form-control" type="text"
|
||||
ng-model="myform.endPage.buttonText" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-xs-12 field-input">{{ 'SHOW_BUTTONS' | translate }}</div>
|
||||
<div class="col-md-8 col-xs-12 field-input">
|
||||
<label class="switch-light switch-holo" onclick="">
|
||||
<input type="checkbox" ng-model="showButtons">
|
||||
<span>
|
||||
<span> {{ 'OFF' | translate }}</span>
|
||||
<span> {{ 'ON' | translate }}</span>
|
||||
<a></a>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row options buttons" ng-if="showButtons">
|
||||
<div class="col-md-3 col-xs-12">{{ 'BUTTONS' | translate }}:</div>
|
||||
<div class="col-md-9 col-xs-12">
|
||||
<div ng-repeat="button in myform.endPage.buttons track by button._id" class="row" style="padding-bottom:1em;">
|
||||
|
||||
<div class="col-xs-5">
|
||||
<span>{{ 'BUTTON_TEXT' | translate }}</span>
|
||||
<input type="text"
|
||||
name="{{button.text}}_buttonText_startPage"
|
||||
ng-model="button.text"
|
||||
value="{{button.text}}"
|
||||
placeholder="{{ 'BUTTON_TEXT' | translate }}">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-xs-5">
|
||||
<span>{{ 'BUTTON_LINK' | translate }}</span>
|
||||
<input type="text"
|
||||
name="{{button.url}}_url_startPage"
|
||||
ng-model="button.url"
|
||||
value="{{button.url}}"
|
||||
placeholder="http://aeouaou.com/aoeuoa">
|
||||
</div>
|
||||
|
||||
<div class="col-xs-2">
|
||||
<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteButton(button)">
|
||||
<i class="fa fa-trash-o"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
<div class="row">
|
||||
<button class="btn btn-primary btn-small col-md-offset-6 col-md-6 col-sm-4 col-sm-offset-8 col-xs-4 col-xs-offset-8" type="button" ng-click="addButton()">
|
||||
<i class="icon-plus icon-white"></i> {{ 'ADD_BUTTON' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer row">
|
||||
<button type="submit" ng-click="saveEndPage()" class="btn btn-signup btn-rounded">
|
||||
{{ 'SAVE_START_PAGE' | translate }}
|
||||
</button>
|
||||
|
||||
<button ng-click="cancel()" class="btn btn-secondary btn-rounded">
|
||||
{{ 'CANCEL' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-field-panel col-md-6 hidden-sm hidden-xs">
|
||||
<form class="public-form">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
|
||||
<h1 style="font-weight: 400; font-size: 25px;">
|
||||
{{myform.endPage.title}}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="col-xs-10 col-xs-offset-1 text-center" style="overflow-wrap: break-word;">
|
||||
<p style="color: grey; font-weight: 100; font-size: 16px;">
|
||||
{{myform.endPage.paragraph}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row form-actions text-center" style="padding: 5px 25px 5px 25px;">
|
||||
<button ng-click="reloadForm()" class="btn" type="button"
|
||||
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
|
||||
<span style="font-size: 1.6em;">
|
||||
{{myform.endPage.buttonText}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
|
||||
<p ng-repeat="button in myform.endPage.buttons" class="text-center" style="display:inline;">
|
||||
<button class="btn" style="background-color:rgb(156, 226, 235)" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
|
||||
<a href="{{button.url}}"
|
||||
style="font-size: 1.6em; text-decoration: none;"
|
||||
ng-style="{'color':button.color}">
|
||||
{{button.text}}
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Edit StartPage Modal Dialog Template -->
|
||||
<script type="text/ng-template" id="editStartPageModal.html" class="edit-startpage-modal">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="edit-panel col-md-6 col-xs-12 col-sm-12">
|
||||
<div class="row modal-header">
|
||||
<h2 class="modal-title hidden-md hidden-lg">{{ 'EDIT_START_PAGE' | translate }}</h2>
|
||||
<h3 class="modal-title hidden-xs hidden-sm">{{ 'EDIT_START_PAGE' | translate }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="row question">
|
||||
<div class="col-md-4 col-sm-12">{{ 'INTRO_TITLE' | translate }}:</div>
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<input class="form-control" type="text"
|
||||
ng-model="myform.startPage.introTitle"
|
||||
name="introTitleStartPage" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row question">
|
||||
<div class="col-md-4 col-sm-12">{{ 'INTRO_PARAGRAPH' | translate }}:</div>
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<textarea class="form-control" type="text"
|
||||
ng-model="myform.startPage.introParagraph"
|
||||
name="introParagraphStartPage"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row question">
|
||||
<div class="col-md-4 col-sm-12">{{ 'INTRO_BTN' | translate }}:</div>
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<input class="form-control" type="text"
|
||||
ng-model="myform.startPage.introButtonText"
|
||||
name="introButtonText" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-xs-12 field-input">{{ 'SHOW_BUTTONS' | translate }}</div>
|
||||
<div class="col-md-8 col-xs-12 field-input">
|
||||
<label class="switch-light switch-holo" onclick="">
|
||||
<input type="checkbox" ng-model="showButtons">
|
||||
<span>
|
||||
<span> {{ 'OFF' | translate }}</span>
|
||||
<span> {{ 'ON' | translate }}</span>
|
||||
<a></a>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row options buttons" ng-if="showButtons">
|
||||
<div class="col-md-3 col-xs-12">{{ 'BUTTONS' | translate }}:</div>
|
||||
<div class="col-md-9 col-xs-12">
|
||||
<div ng-repeat="button in myform.startPage.buttons track by button._id" class="row" style="padding-bottom:1em;">
|
||||
|
||||
<div class="col-xs-5">
|
||||
<span>{{ 'BUTTON_TEXT' | translate }}</span>
|
||||
<input type="text"
|
||||
name="{{button.text}}_buttonText_startPage"
|
||||
ng-model="button.text"
|
||||
value="{{button.text}}"
|
||||
placeholder="{{ 'BUTTON_TEXT' | translate }}">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-xs-5">
|
||||
<span>{{ 'BUTTON_LINK' | translate }}</span>
|
||||
<input type="text"
|
||||
name="{{button.url}}_url_startPage"
|
||||
ng-model="button.url"
|
||||
value="{{button.url}}"
|
||||
placeholder="http://aeouaou.com/aoeuoa">
|
||||
</div>
|
||||
|
||||
<div class="col-xs-2">
|
||||
<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteButton(button)">
|
||||
<i class="fa fa-trash-o"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
<div class="row">
|
||||
<button class="btn btn-primary btn-small col-md-offset-6 col-md-6 col-sm-4 col-sm-offset-8 col-xs-4 col-xs-offset-8" type="button" ng-click="addButton()">
|
||||
<i class="icon-plus icon-white"></i> {{ 'ADD_BUTTON' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer row">
|
||||
<button type="submit" ng-click="saveStartPage()" class="btn btn-signup btn-rounded">
|
||||
{{ 'SAVE_START_PAGE' | translate }}
|
||||
</button>
|
||||
|
||||
<button ng-click="cancel()" class="btn btn-secondary btn-rounded">
|
||||
{{ 'CANCEL' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-field-panel col-md-6 hidden-sm hidden-xs">
|
||||
<form class="public-form">
|
||||
|
||||
<div class="field row">
|
||||
<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
|
||||
<h1>{{myform.startPage.introTitle}}</h1>
|
||||
</div>
|
||||
<div class="col-xs-10 col-xs-offset-1 text-left" style="overflow-wrap: break-word;">
|
||||
<p style="color:#ddd;">{{myform.startPage.introParagraph}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
|
||||
<p ng-repeat="button in myform.startPage.buttons" class="text-center" style="display:inline;">
|
||||
<button class="btn btn-info" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
|
||||
<a href="{{button.url}}" style="font-size: 1.6em; text-decoration: none; color: inherit;" >
|
||||
{{button.text}}
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row form-actions">
|
||||
<button class="btn btn-info btn btn-info col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3" type="button">
|
||||
<span style="color:white; font-size: 1.6em; text-decoration: none;">
|
||||
{{myform.startPage.introButtonText}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Edit Field Modal Dialog Template -->
|
||||
<script type="text/ng-template" id="editFieldModal.html" class="edit-field-modal">
|
||||
<div class="modal-body">
|
||||
|
@ -308,33 +17,22 @@
|
|||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row description" ng-hide="showRatingOptions()">
|
||||
<div class="row description question" ng-hide="showRatingOptions(field)">
|
||||
<div class="col-md-12 bold">{{ 'QUESTION_DESCRIPTION' | translate }}</div>
|
||||
<div class="col-md-12">
|
||||
<textarea type="text" class="form-control" ng-model="field.description" name="description{{field._id}}"value="{{field.description}}"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-show="showAddOptions()"><br></div>
|
||||
<div class="row options" ng-if="showAddOptions()">
|
||||
<div class="row" ng-if="showListOptions()"><br></div>
|
||||
<div class="row options question" ng-if="showListOptions()">
|
||||
<div class="col-md-4 col-xs-12">{{ 'OPTIONS' | translate }}</div>
|
||||
<div class="col-md-8 col-xs-12">
|
||||
<div ng-repeat="option in field.fieldOptions track by option.option_id" class="row">
|
||||
<input type="text" name="{{option.option_value}}{{field._id}}" ng-model="option.option_value" class="col-xs-5">
|
||||
|
||||
<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteOption(option)" class="col-xs-3">
|
||||
<i class="fa fa-trash-o"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="btn btn-primary btn-small col-md-offset-0 col-md-6 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-6" type="button" ng-click="addOption()">
|
||||
<i class="icon-plus icon-white"></i> {{ 'ADD_OPTION' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<textarea type="text" class="form-control" ng-model="options.fieldOptionsString" ng-value="fieldOptionsString" name="options{{field._id}}" placeholder="{{ 'ADD_OPTIONS_PLACEHOLDER' | translate }}" required="true"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-show="showRatingOptions()"><br></div>
|
||||
<div class="row" ng-if="showRatingOptions()"><br></div>
|
||||
<div class="row" ng-if="showRatingOptions()">
|
||||
<div class="col-md-9 col-sm-9">{{ 'NUM_OF_STEPS' | translate }}</div>
|
||||
<div class="col-md-3 col-sm-3">
|
||||
|
@ -342,17 +40,17 @@
|
|||
min="1" max="10"
|
||||
ng-model="field.ratingOptions.steps"
|
||||
name="ratingOptions_steps{{field._id}}"
|
||||
ng-value="{{field.ratingOptions.steps}}"
|
||||
ng-value="field.ratingOptions.steps"
|
||||
required>
|
||||
</div>
|
||||
<br>
|
||||
<div class="col-md-5 col-sm-9">{{ 'SHAPE' | translate }}:</div>
|
||||
<div class="col-md-7 col-sm-3">
|
||||
<select style="width:100%" ng-model="field.ratingOptions.shape"
|
||||
value="{{field.ratingOptions.steps}}"
|
||||
ng-value="field.ratingOptions.steps"
|
||||
name="ratingOptions_shape{{field._id}}" required>
|
||||
<option ng-repeat="shapeType in validShapes"
|
||||
value="{{shapeType}}">
|
||||
ng-value="shapeType">
|
||||
{{select2FA[shapeType]}}
|
||||
</option>
|
||||
</select>
|
||||
|
@ -489,6 +187,298 @@
|
|||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Edit EndPage Modal Dialog Template -->
|
||||
<script type="text/ng-template" id="editEndPageModal.html" class="edit-endpage-modal">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="edit-panel col-md-6 col-xs-12 col-sm-12">
|
||||
<div class="row modal-header">
|
||||
<h2 class="modal-title hidden-md hidden-lg">{{ 'EDIT_END_PAGE' | translate }}</h2>
|
||||
<h3 class="modal-title hidden-xs hidden-sm">{{ 'EDIT_END_PAGE' | translate }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="row question">
|
||||
<div class="col-md-4 col-sm-12">{{ 'TITLE' | translate }}:</div>
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<input class="form-control" type="text"
|
||||
ng-model="myform.endPage.title" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row question">
|
||||
<div class="col-md-4 col-sm-12">{{ 'PARAGRAPH' | translate }}:</div>
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<textarea class="form-control" type="text"
|
||||
ng-model="myform.endPage.paragraph"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row question">
|
||||
<div class="col-md-4 col-sm-12">{{ 'BTN_TEXT' | translate }}:</div>
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<input class="form-control" type="text"
|
||||
ng-model="myform.endPage.buttonText" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-xs-12 field-input">{{ 'SHOW_BUTTONS' | translate }}</div>
|
||||
<div class="col-md-8 col-xs-12 field-input">
|
||||
<label class="switch-light switch-holo" onclick="">
|
||||
<input type="checkbox" ng-model="showButtons">
|
||||
<span>
|
||||
<span> {{ 'OFF' | translate }}</span>
|
||||
<span> {{ 'ON' | translate }}</span>
|
||||
<a></a>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row options buttons" ng-if="showButtons">
|
||||
<div class="col-md-3 col-xs-12">{{ 'BUTTONS' | translate }}:</div>
|
||||
<div class="col-md-9 col-xs-12">
|
||||
<div ng-repeat="button in myform.endPage.buttons track by button._id" class="row" style="padding-bottom:1em;">
|
||||
|
||||
<div class="col-xs-5">
|
||||
<span>{{ 'BUTTON_TEXT' | translate }}</span>
|
||||
<input type="text"
|
||||
name="{{button.text}}_buttonText_startPage"
|
||||
ng-model="button.text"
|
||||
value="{{button.text}}"
|
||||
placeholder="{{ 'BUTTON_TEXT' | translate }}">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-xs-5">
|
||||
<span>{{ 'BUTTON_LINK' | translate }}</span>
|
||||
<input type="text"
|
||||
name="{{button.url}}_url_startPage"
|
||||
ng-model="button.url"
|
||||
value="{{button.url}}"
|
||||
placeholder="http://aeouaou.com/aoeuoa">
|
||||
</div>
|
||||
|
||||
<div class="col-xs-2">
|
||||
<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteButton(button)">
|
||||
<i class="fa fa-trash-o"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
<div class="row">
|
||||
<button class="btn btn-primary btn-small col-md-offset-6 col-md-6 col-sm-4 col-sm-offset-8 col-xs-4 col-xs-offset-8" type="button" ng-click="addButton()">
|
||||
<i class="icon-plus icon-white"></i> {{ 'ADD_BUTTON' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer row">
|
||||
<button type="submit" ng-click="saveEndPage()" class="btn btn-signup btn-rounded">
|
||||
{{ 'SAVE_START_PAGE' | translate }}
|
||||
</button>
|
||||
|
||||
<button ng-click="cancel()" class="btn btn-secondary btn-rounded">
|
||||
{{ 'CANCEL' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-field-panel col-md-6 hidden-sm hidden-xs">
|
||||
<form class="public-form">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
|
||||
<h1 style="font-weight: 400; font-size: 25px;">
|
||||
{{myform.endPage.title}}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="col-xs-10 col-xs-offset-1 text-center" style="overflow-wrap: break-word;">
|
||||
<p style="color: grey; font-weight: 100; font-size: 16px;">
|
||||
{{myform.endPage.paragraph}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row form-actions text-center" style="padding: 5px 25px 5px 25px;">
|
||||
<button ng-click="reloadForm()" class="btn" type="button"
|
||||
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}">
|
||||
<span style="font-size: 1.6em;">
|
||||
{{myform.endPage.buttonText}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
|
||||
<p ng-repeat="button in myform.endPage.buttons" class="text-center" style="display:inline;">
|
||||
<button class="btn" style="background-color:rgb(156, 226, 235)" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
|
||||
<a href="{{button.url}}"
|
||||
style="font-size: 1.6em; text-decoration: none;"
|
||||
ng-style="{'color':button.color}">
|
||||
{{button.text}}
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Edit StartPage Modal Dialog Template -->
|
||||
<script type="text/ng-template" id="editStartPageModal.html" class="edit-startpage-modal">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="edit-panel col-md-6 col-xs-12 col-sm-12">
|
||||
<div class="row modal-header">
|
||||
<h2 class="modal-title hidden-md hidden-lg">{{ 'EDIT_START_PAGE' | translate }}</h2>
|
||||
<h3 class="modal-title hidden-xs hidden-sm">{{ 'EDIT_START_PAGE' | translate }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="row question">
|
||||
<div class="col-md-4 col-sm-12">{{ 'INTRO_TITLE' | translate }}:</div>
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<input class="form-control" type="text"
|
||||
ng-model="myform.startPage.introTitle"
|
||||
name="introTitleStartPage" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row question">
|
||||
<div class="col-md-4 col-sm-12">{{ 'INTRO_PARAGRAPH' | translate }}:</div>
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<textarea class="form-control" type="text"
|
||||
ng-model="myform.startPage.introParagraph"
|
||||
name="introParagraphStartPage"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row question">
|
||||
<div class="col-md-4 col-sm-12">{{ 'INTRO_BTN' | translate }}:</div>
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<input class="form-control" type="text"
|
||||
ng-model="myform.startPage.introButtonText"
|
||||
name="introButtonText" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-xs-12 field-input">{{ 'SHOW_BUTTONS' | translate }}</div>
|
||||
<div class="col-md-8 col-xs-12 field-input">
|
||||
<label class="switch-light switch-holo" onclick="">
|
||||
<input type="checkbox" ng-model="showButtons">
|
||||
<span>
|
||||
<span> {{ 'OFF' | translate }}</span>
|
||||
<span> {{ 'ON' | translate }}</span>
|
||||
<a></a>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row options buttons" ng-if="showButtons">
|
||||
<div class="col-md-3 col-xs-12">{{ 'BUTTONS' | translate }}:</div>
|
||||
<div class="col-md-9 col-xs-12">
|
||||
<div ng-repeat="button in myform.startPage.buttons track by button._id" class="row" style="padding-bottom:1em;">
|
||||
|
||||
<div class="col-xs-5">
|
||||
<span>{{ 'BUTTON_TEXT' | translate }}</span>
|
||||
<input type="text"
|
||||
name="{{button.text}}_buttonText_startPage"
|
||||
ng-model="button.text"
|
||||
value="{{button.text}}"
|
||||
placeholder="{{ 'BUTTON_TEXT' | translate }}">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-xs-5">
|
||||
<span>{{ 'BUTTON_LINK' | translate }}</span>
|
||||
<input type="text"
|
||||
name="{{button.url}}_url_startPage"
|
||||
ng-model="button.url"
|
||||
value="{{button.url}}"
|
||||
placeholder="http://aeouaou.com/aoeuoa">
|
||||
</div>
|
||||
|
||||
<div class="col-xs-2">
|
||||
<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteButton(button)">
|
||||
<i class="fa fa-trash-o"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row"><br></div>
|
||||
<div class="row">
|
||||
<button class="btn btn-primary btn-small col-md-offset-6 col-md-6 col-sm-4 col-sm-offset-8 col-xs-4 col-xs-offset-8" type="button" ng-click="addButton()">
|
||||
<i class="icon-plus icon-white"></i> {{ 'ADD_BUTTON' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer row">
|
||||
<button type="submit" ng-click="saveStartPage()" class="btn btn-signup btn-rounded">
|
||||
{{ 'SAVE_START_PAGE' | translate }}
|
||||
</button>
|
||||
|
||||
<button ng-click="cancel()" class="btn btn-secondary btn-rounded">
|
||||
{{ 'CANCEL' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-field-panel col-md-6 hidden-sm hidden-xs">
|
||||
<form class="public-form">
|
||||
|
||||
<div class="field row">
|
||||
<div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
|
||||
<h1>{{myform.startPage.introTitle}}</h1>
|
||||
</div>
|
||||
<div class="col-xs-10 col-xs-offset-1 text-left" style="overflow-wrap: break-word;">
|
||||
<p style="color:#ddd;">{{myform.startPage.introParagraph}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row form-actions" style="padding-bottom:3em; padding-left: 1em; padding-right: 1em;">
|
||||
<p ng-repeat="button in myform.startPage.buttons" class="text-center" style="display:inline;">
|
||||
<button class="btn btn-info" type="button" ng-style="{'background-color':button.bgColor, 'color':button.color}">
|
||||
<a href="{{button.url}}" style="font-size: 1.6em; text-decoration: none; color: inherit;" >
|
||||
{{button.text}}
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row form-actions">
|
||||
<button class="btn btn-info btn btn-info col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3" type="button">
|
||||
<span style="color:white; font-size: 1.6em; text-decoration: none;">
|
||||
{{myform.startPage.introButtonText}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- Add Fields Element -->
|
||||
<div class="col-xs-2 col-sm-4 add-field">
|
||||
|
||||
|
|
Loading…
Reference in a new issue