update UI for form editing
This commit is contained in:
parent
74de814ac9
commit
cfbb45ab72
|
@ -138,21 +138,22 @@ exports.createSubmission = function(req, res) {
|
||||||
exports.listSubmissions = function(req, res) {
|
exports.listSubmissions = function(req, res) {
|
||||||
var _form = req.form;
|
var _form = req.form;
|
||||||
|
|
||||||
if(_form.submissions.length){
|
// if(_form.submissions.length){
|
||||||
res.json(_form.submissions);
|
// res.json(_form.submissions);
|
||||||
}else{
|
// }else{
|
||||||
FormSubmission.find({ form: req.form }).populate('admin', 'form').exec(function(err, submissions) {
|
FormSubmission.find({ form: req.form }).populate('admin', 'form').exec(function(err, _submissions) {
|
||||||
if (err) {
|
if (err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
res.status(400).send({
|
res.status(400).send({
|
||||||
message: errorHandler.getErrorMessage(err)
|
message: errorHandler.getErrorMessage(err)
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
console.log('retrieved submissions for form');
|
// _form.submissions = _submissions;
|
||||||
res.json(submissions);
|
_form.update({ $set : { submissions: _submissions }});
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
// }
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -185,7 +186,7 @@ exports.read = function(req, res) {
|
||||||
/**
|
/**
|
||||||
* Update a form
|
* Update a form
|
||||||
*/
|
*/
|
||||||
exports.update = function(req, res) {
|
exports.update = function(req, res) {
|
||||||
console.log('in form.update()');
|
console.log('in form.update()');
|
||||||
|
|
||||||
var form = req.form;
|
var form = req.form;
|
||||||
|
@ -254,7 +255,7 @@ exports.formByID = function(req, res, next, id) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
Form.findById(id).populate('admin').exec(function(err, form) {
|
Form.findById(id).populate('admin', 'submissions').exec(function(err, form) {
|
||||||
if (err) {
|
if (err) {
|
||||||
return next(err);
|
return next(err);
|
||||||
} else if (!form || form === null) {
|
} else if (!form || form === null) {
|
||||||
|
@ -283,6 +284,8 @@ exports.formByID = function(req, res, next, id) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log(form.submissions);
|
||||||
|
|
||||||
//Remove sensitive information from User object
|
//Remove sensitive information from User object
|
||||||
form.admin.password = null;
|
form.admin.password = null;
|
||||||
form.admin.created = null;
|
form.admin.created = null;
|
||||||
|
|
|
@ -124,8 +124,7 @@ FormSchema.pre('save', function (next) {
|
||||||
if(this.isModified('form_fields')){
|
if(this.isModified('form_fields')){
|
||||||
if(this.submissions.length){
|
if(this.submissions.length){
|
||||||
for(var i=0; i<this.submissions.length; i++){
|
for(var i=0; i<this.submissions.length; i++){
|
||||||
submission = submissions[i];
|
this.submissions[i].form_fields = submission.form_fields.concat(_.difference(this.form_fields, this._previousFormFields));
|
||||||
submission.form_fields = submission.form_fields.concat(_.difference(this.form_fields, this._previousFormFields));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.form_fields = this._previousFormFields.concat(_.difference(this.form_fields, this._previousFormFields));
|
this.form_fields = this._previousFormFields.concat(_.difference(this.form_fields, this._previousFormFields));
|
||||||
|
|
114
public/modules/core/css/equal-height.css
Normal file
114
public/modules/core/css/equal-height.css
Normal file
|
@ -0,0 +1,114 @@
|
||||||
|
/* columns of same height styles */
|
||||||
|
|
||||||
|
.row-height {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.col-height {
|
||||||
|
display: table-cell;
|
||||||
|
float: none;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.col-top {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.col-middle {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.col-bottom {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 480px) {
|
||||||
|
.row-xs-height {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.col-xs-height {
|
||||||
|
display: table-cell;
|
||||||
|
float: none;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.col-xs-top {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.col-xs-middle {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.col-xs-bottom {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.row-sm-height {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.col-sm-height {
|
||||||
|
display: table-cell;
|
||||||
|
float: none;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.col-sm-top {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.col-sm-middle {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.col-sm-bottom {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.row-md-height {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.col-md-height {
|
||||||
|
display: table-cell;
|
||||||
|
float: none;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.col-md-top {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.col-md-middle {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.col-md-bottom {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.row-lg-height {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.col-lg-height {
|
||||||
|
display: table-cell;
|
||||||
|
float: none;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.col-lg-top {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.col-lg-middle {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.col-lg-bottom {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,12 +2,10 @@
|
||||||
|
|
||||||
angular.module('forms').controller('EditFormController', ['$scope', '$state', '$rootScope', 'Upload', '$stateParams', 'FormFields', 'Forms', 'CurrentForm', '$modal', '$location', '$http',
|
angular.module('forms').controller('EditFormController', ['$scope', '$state', '$rootScope', 'Upload', '$stateParams', 'FormFields', 'Forms', 'CurrentForm', '$modal', '$location', '$http',
|
||||||
function ($scope, $state, $rootScope, Upload, $stateParams, FormFields, Forms, CurrentForm, $modal, $location, $http) {
|
function ($scope, $state, $rootScope, Upload, $stateParams, FormFields, Forms, CurrentForm, $modal, $location, $http) {
|
||||||
|
|
||||||
$scope.isNewForm = false;
|
|
||||||
$scope.pdfLoading = false;
|
|
||||||
|
|
||||||
$scope.form = {};
|
$scope.form = {};
|
||||||
|
$scope.isNewForm = false;
|
||||||
$scope.log = '';
|
$scope.log = '';
|
||||||
|
$scope.pdfLoading = false;
|
||||||
var _current_upload = null;
|
var _current_upload = null;
|
||||||
|
|
||||||
// Get current form if it exists, or create new one
|
// Get current form if it exists, or create new one
|
||||||
|
@ -123,115 +121,5 @@ angular.module('forms').controller('EditFormController', ['$scope', '$state', '$
|
||||||
// $scope.error = errorResponse.data.message;
|
// $scope.error = errorResponse.data.message;
|
||||||
// });
|
// });
|
||||||
};
|
};
|
||||||
|
|
||||||
//Populate AddField with all available form field types
|
|
||||||
$scope.addField = {};
|
|
||||||
$scope.addField.types = FormFields.fields;
|
|
||||||
$scope.addField.new = $scope.addField.types[0].name;
|
|
||||||
$scope.addField.lastAddedID = 0;
|
|
||||||
|
|
||||||
// preview form mode
|
|
||||||
$scope.previewMode = false;
|
|
||||||
|
|
||||||
// previewForm - for preview purposes, form will be copied into this
|
|
||||||
// otherwise, actual form might get manipulated in preview mode
|
|
||||||
$scope.previewForm = {};
|
|
||||||
|
|
||||||
|
|
||||||
// accordion settings
|
|
||||||
$scope.accordion = {};
|
|
||||||
$scope.accordion.oneAtATime = true;
|
|
||||||
|
|
||||||
// create new field button click
|
|
||||||
$scope.addNewField = function(){
|
|
||||||
|
|
||||||
// incr field_id counter
|
|
||||||
$scope.addField.lastAddedID++;
|
|
||||||
|
|
||||||
var newField = {
|
|
||||||
'title' : 'New field - ' + ($scope.addField.lastAddedID),
|
|
||||||
'fieldType' : $scope.addField.new,
|
|
||||||
'fieldValue' : '',
|
|
||||||
'required' : true,
|
|
||||||
'disabled' : false
|
|
||||||
};
|
|
||||||
|
|
||||||
// put newField into fields array
|
|
||||||
$scope.form.form_fields.push(newField);
|
|
||||||
};
|
|
||||||
|
|
||||||
// deletes particular field on button click
|
|
||||||
$scope.deleteField = function (field_id){
|
|
||||||
for(var i = 0; i < $scope.form.form_fields.length; i++){
|
|
||||||
if($scope.form.form_fields[i].field_id === field_id){
|
|
||||||
$scope.form.form_fields.splice(i, 1);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// add new option to the field
|
|
||||||
$scope.addOption = function (field){
|
|
||||||
if(!field.field_options)
|
|
||||||
field.field_options = [];
|
|
||||||
|
|
||||||
var lastOptionID = 0;
|
|
||||||
|
|
||||||
if(field.field_options[field.field_options.length-1])
|
|
||||||
lastOptionID = field.field_options[field.field_options.length-1].option_id;
|
|
||||||
|
|
||||||
// new option's id
|
|
||||||
var option_id = lastOptionID + 1;
|
|
||||||
|
|
||||||
var newOption = {
|
|
||||||
'option_id' : option_id,
|
|
||||||
'option_title' : 'Option ' + option_id,
|
|
||||||
'option_value' : option_id
|
|
||||||
};
|
|
||||||
|
|
||||||
// put new option into field_options array
|
|
||||||
field.field_options.push(newOption);
|
|
||||||
};
|
|
||||||
|
|
||||||
// delete particular option
|
|
||||||
$scope.deleteOption = function (field, option){
|
|
||||||
for(var i = 0; i < field.field_options.length; i++){
|
|
||||||
if(field.field_options[i].option_id === option.option_id){
|
|
||||||
field.field_options.splice(i, 1);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// preview form
|
|
||||||
$scope.previewOn = function(){
|
|
||||||
if($scope.form.form_fields === null || $scope.form.form_fields.length === 0) {
|
|
||||||
var title = 'Error';
|
|
||||||
var msg = 'No fields added yet, please add fields to the form before preview.';
|
|
||||||
var btns = [{result:'ok', label: 'OK', cssClass: 'btn-primary'}];
|
|
||||||
|
|
||||||
// $dialog.messageBox(title, msg, btns).open();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$scope.previewMode = !$scope.previewMode;
|
|
||||||
$scope.form.submitted = false;
|
|
||||||
angular.copy($scope.form, $scope.previewForm);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// hide preview form, go back to create mode
|
|
||||||
$scope.previewOff = function(){
|
|
||||||
$scope.previewMode = !$scope.previewMode;
|
|
||||||
$scope.form.submitted = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// decides whether field options block will be shown (true for dropdown and radio fields)
|
|
||||||
$scope.showAddOptions = function (field){
|
|
||||||
if(field.field_type === 'radio' || field.field_type === 'dropdown')
|
|
||||||
return true;
|
|
||||||
else
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
|
@ -8,16 +8,38 @@ angular.module('forms').controller('ViewFormController', ['$scope', '$stateParam
|
||||||
$scope.form = CurrentForm.getForm();
|
$scope.form = CurrentForm.getForm();
|
||||||
$scope.submissions = undefined;
|
$scope.submissions = undefined;
|
||||||
$scope.viewSubmissions = false;
|
$scope.viewSubmissions = false;
|
||||||
|
$scope.table = {
|
||||||
|
masterChecker: true,
|
||||||
|
rows: []
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
//Table Functions
|
||||||
|
$scope.toggleAllCheckers = function(){
|
||||||
|
console.log('toggleAllCheckers');
|
||||||
|
for(var i=0; i<$scope.table.rows.length; i++){
|
||||||
|
table.rows[i].selected = $scope.table.masterChecker;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$scope.toggleObjSelection = function($event, description) {
|
||||||
|
$event.stopPropagation();
|
||||||
|
console.log('checkbox clicked');
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.rowClicked = function(obj) {
|
||||||
|
console.log('row clicked');
|
||||||
|
obj.selected = !obj.selected;
|
||||||
|
};
|
||||||
|
|
||||||
//show submissions of Form
|
//show submissions of Form
|
||||||
$scope.showSubmissions = function(){
|
$scope.showSubmissions = function(){
|
||||||
$scope.viewSubmissions = true;
|
$scope.viewSubmissions = true;
|
||||||
if(!$scope.submissions){
|
if(!$scope.table.rows.length){
|
||||||
$http.get('/forms/'+$scope.form._id+'/submissions')
|
$http.get('/forms/'+$scope.form._id+'/submissions')
|
||||||
.success(function(data, status, headers){
|
.success(function(data, status, headers){
|
||||||
console.log(data);
|
console.log(data);
|
||||||
$scope.submissions = data;
|
$scope.submissions = data;
|
||||||
|
$scope.table.rows = data;
|
||||||
console.log('form submissions successfully fetched');
|
console.log('form submissions successfully fetched');
|
||||||
})
|
})
|
||||||
.error(function(err){
|
.error(function(err){
|
||||||
|
@ -27,6 +49,8 @@ angular.module('forms').controller('ViewFormController', ['$scope', '$stateParam
|
||||||
$http.get('/forms/'+$scope.form._id+'/submissions')
|
$http.get('/forms/'+$scope.form._id+'/submissions')
|
||||||
.success(function(data, status, headers){
|
.success(function(data, status, headers){
|
||||||
$scope.submissions = data;
|
$scope.submissions = data;
|
||||||
|
$scope.table.rows = data;
|
||||||
|
console.log($scope.table.rows);
|
||||||
console.log('form submissions successfully fetched');
|
console.log('form submissions successfully fetched');
|
||||||
})
|
})
|
||||||
.error(function(err){
|
.error(function(err){
|
||||||
|
|
|
@ -12,7 +12,20 @@
|
||||||
.admin-form .form-controls .row {
|
.admin-form .form-controls .row {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
.admin-form .page-header {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Styles for admin view tabs */
|
||||||
|
.admin-form .tab-content {
|
||||||
|
padding-top: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Style for edit fields tab*/
|
||||||
|
.admin-form .tab-content .add-field {
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
.status-light {
|
.status-light {
|
||||||
padding-left:0.6em;
|
padding-left:0.6em;
|
||||||
|
|
|
@ -0,0 +1,72 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('forms').directive('configureFormDirective', ['$http', '$timeout', 'timeCounter', 'Auth', 'FormFields',
|
||||||
|
function ($http, $timeout, timeCounter, Auth, FormFields) {
|
||||||
|
return {
|
||||||
|
controller: function($scope){
|
||||||
|
$scope.log = '';
|
||||||
|
$scope.pdfLoading = false;
|
||||||
|
var _current_upload = null;
|
||||||
|
|
||||||
|
//PDF Functions
|
||||||
|
$scope.cancelUpload = function(){
|
||||||
|
_current_upload.abort();
|
||||||
|
$scope.pdfLoading = false;
|
||||||
|
$scope.removePDF();
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.removePDF = function(){
|
||||||
|
$scope.form.pdf = null;
|
||||||
|
$scope.form.isGenerated = false;
|
||||||
|
$scope.form.autofillPDFs = false;
|
||||||
|
|
||||||
|
console.log('form.pdf: '+$scope.form.pdf+' REMOVED');
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.uploadPDF = function(files) {
|
||||||
|
|
||||||
|
if (files && files.length) {
|
||||||
|
// for (var i = 0; i < files.length; i++) {
|
||||||
|
var file = files[0];
|
||||||
|
_current_upload = Upload.upload({
|
||||||
|
url: '/upload/pdf',
|
||||||
|
fields: {
|
||||||
|
'user': $scope.user,
|
||||||
|
'form': $scope.form
|
||||||
|
},
|
||||||
|
file: file
|
||||||
|
}).progress(function (evt) {
|
||||||
|
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
|
||||||
|
$scope.log = 'progress: ' + progressPercentage + '% ' +
|
||||||
|
evt.config.file.name + '\n' + $scope.log;
|
||||||
|
$scope.pdfLoading = true;
|
||||||
|
}).success(function (data, status, headers, config) {
|
||||||
|
$scope.log = 'file ' + data.originalname + ' uploaded as '+ data.name +'. JSON: ' + JSON.stringify(data) + '\n' + $scope.log;
|
||||||
|
console.log($scope.form.pdf);
|
||||||
|
$scope.form.pdf = angular.fromJson(angular.toJson(data));
|
||||||
|
$scope.pdfLoading = false;
|
||||||
|
|
||||||
|
console.log($scope.log);
|
||||||
|
console.log('$scope.pdf: '+$scope.form.pdf.name);
|
||||||
|
if(!$scope.$$phase){
|
||||||
|
$scope.$apply();
|
||||||
|
}
|
||||||
|
}).error(function(err){
|
||||||
|
$scope.pdfLoading = false;
|
||||||
|
console.log('Error occured during upload.\n');
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
},
|
||||||
|
templateUrl: './modules/forms/views/directiveViews/form/configure-form.html',
|
||||||
|
restrict: 'E',
|
||||||
|
scope: {
|
||||||
|
form:'=',
|
||||||
|
user:'='
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
]);
|
|
@ -0,0 +1,95 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('forms').directive('editFormDirective', ['$http', '$timeout', 'timeCounter', 'Auth', 'FormFields',
|
||||||
|
function ($http, $timeout, timeCounter, Auth, FormFields) {
|
||||||
|
return {
|
||||||
|
controller: function($scope){
|
||||||
|
//Populate AddField with all available form field types
|
||||||
|
$scope.addField = {};
|
||||||
|
$scope.addField.types = FormFields.fields;
|
||||||
|
$scope.addField.new = $scope.addField.types[0].name;
|
||||||
|
$scope.addField.lastAddedID = 0;
|
||||||
|
|
||||||
|
// accordion settings
|
||||||
|
$scope.accordion = {};
|
||||||
|
$scope.accordion.oneAtATime = true;
|
||||||
|
|
||||||
|
// create new field button click
|
||||||
|
$scope.addNewField = function(){
|
||||||
|
|
||||||
|
// incr field_id counter
|
||||||
|
$scope.addField.lastAddedID++;
|
||||||
|
|
||||||
|
var newField = {
|
||||||
|
'title' : 'New field - ' + ($scope.addField.lastAddedID),
|
||||||
|
'fieldType' : $scope.addField.new,
|
||||||
|
'fieldValue' : '',
|
||||||
|
'required' : true,
|
||||||
|
'disabled' : false
|
||||||
|
};
|
||||||
|
|
||||||
|
// put newField into fields array
|
||||||
|
$scope.form.form_fields.unshift(newField);
|
||||||
|
};
|
||||||
|
|
||||||
|
// deletes particular field on button click
|
||||||
|
$scope.deleteField = function (field_id){
|
||||||
|
for(var i = 0; i < $scope.form.form_fields.length; i++){
|
||||||
|
if($scope.form.form_fields[i].field_id === field_id){
|
||||||
|
$scope.form.form_fields.splice(i, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// add new option to the field
|
||||||
|
$scope.addOption = function (field){
|
||||||
|
if(!field.field_options)
|
||||||
|
field.field_options = [];
|
||||||
|
|
||||||
|
var lastOptionID = 0;
|
||||||
|
|
||||||
|
if(field.field_options[field.field_options.length-1])
|
||||||
|
lastOptionID = field.field_options[field.field_options.length-1].option_id;
|
||||||
|
|
||||||
|
// new option's id
|
||||||
|
var option_id = lastOptionID + 1;
|
||||||
|
|
||||||
|
var newOption = {
|
||||||
|
'option_id' : option_id,
|
||||||
|
'option_title' : 'Option ' + option_id,
|
||||||
|
'option_value' : option_id
|
||||||
|
};
|
||||||
|
|
||||||
|
// put new option into field_options array
|
||||||
|
field.field_options.push(newOption);
|
||||||
|
};
|
||||||
|
|
||||||
|
// delete particular option
|
||||||
|
$scope.deleteOption = function (field, option){
|
||||||
|
for(var i = 0; i < field.field_options.length; i++){
|
||||||
|
if(field.field_options[i].option_id === option.option_id){
|
||||||
|
field.field_options.splice(i, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// decides whether field options block will be shown (true for dropdown and radio fields)
|
||||||
|
$scope.showAddOptions = function (field){
|
||||||
|
if(field.field_type === 'radio' || field.field_type === 'dropdown')
|
||||||
|
return true;
|
||||||
|
else
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
},
|
||||||
|
templateUrl: './modules/forms/views/directiveViews/form/edit-form.html',
|
||||||
|
restrict: 'E',
|
||||||
|
scope: {
|
||||||
|
form:'=',
|
||||||
|
user:'='
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
]);
|
|
@ -5,16 +5,12 @@ angular.module('forms').service('FormFields', [
|
||||||
this.fields = [
|
this.fields = [
|
||||||
{
|
{
|
||||||
name : 'textfield',
|
name : 'textfield',
|
||||||
value : 'Textfield'
|
value : 'Short Text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name : 'email',
|
name : 'email',
|
||||||
value : 'E-mail'
|
value : 'E-mail'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name : 'password',
|
|
||||||
value : 'Password'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name : 'radio',
|
name : 'radio',
|
||||||
value : 'Radio Buttons'
|
value : 'Radio Buttons'
|
||||||
|
@ -29,7 +25,7 @@ angular.module('forms').service('FormFields', [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name : 'textarea',
|
name : 'textarea',
|
||||||
value : 'Text Area'
|
value : 'Long Text'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name : 'checkbox',
|
name : 'checkbox',
|
||||||
|
|
|
@ -0,0 +1,80 @@
|
||||||
|
<div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<h3>Form PDF</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<h5>Upload your PDF</h5>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="input-group ">
|
||||||
|
<div tabindex="-1" class="form-control file-caption">
|
||||||
|
<span class="file-caption-ellipsis" ng-if="!form.pdf">…</span>
|
||||||
|
<div class="file-caption-name" ng-if="form.pdf">
|
||||||
|
{{form.pdf.originalname}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" ng-if="form.pdf" ng-click="removePDF();" title="Clear selected files" class="btn btn-danger fileinput-remove fileinput-remove-button">
|
||||||
|
<i class="glyphicon glyphicon-trash" ></i>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" ng-if="pdfLoading" title="Abort ongoing upload" class="btn btn-default" ng-click="cancelUpload()">
|
||||||
|
<i class="glyphicon glyphicon-ban-circle"></i>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="btn btn-success btn-file" ngf-select ngf-change="uploadPDF($files)" ng-if="!form.pdf">
|
||||||
|
<i class="glyphicon glyphicon-upload"></i>
|
||||||
|
Upload your PDF
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<h5>Autogenerate Form?</h5>
|
||||||
|
</div>
|
||||||
|
<br><br>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type="radio" data-ng-value="true" ng-model="form.isGenerated" ng-required="true" />
|
||||||
|
<span>Yes</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type="radio" data-ng-value="false" ng-model="form.isGenerated" ng-required="true" />
|
||||||
|
<span>No</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row" ng-if="form.isGenerated">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<h5>Save Submissions as PDFs?</h5>
|
||||||
|
</div>
|
||||||
|
<br><br>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type="radio" data-ng-value="true" ng-model="form.autofillPDFs" ng-required="true" />
|
||||||
|
<span>Yes</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type="radio" data-ng-value="false" ng-model="form.autofillPDFs" ng-required="true" />
|
||||||
|
<span>No</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
114
public/modules/forms/views/directiveViews/form/edit-form.html
Normal file
114
public/modules/forms/views/directiveViews/form/edit-form.html
Normal file
|
@ -0,0 +1,114 @@
|
||||||
|
<div class="row">
|
||||||
|
<div class="add-field col-xs-3">
|
||||||
|
<select ng-model="addField.new" ng-options="type.name as type.value for type in addField.types"></select>
|
||||||
|
<button type="submit" class="btn" ng-click="addNewField()">
|
||||||
|
<i class="icon-plus"></i> Add Field
|
||||||
|
</button>
|
||||||
|
<div class="panel-group">
|
||||||
|
<div class="panel panel-default" ng-repeat="type in addField.types">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<span class="pull-left" ng-switch="type.name">
|
||||||
|
<i class="fa fa-pencil-square-o" ng-switch-when="textfield"></i>
|
||||||
|
<i class="fa fa-th-list" ng-switch-when="dropdown"></i>
|
||||||
|
<i class="fa fa-calendar" ng-switch-when="date"></i>
|
||||||
|
<i class="fa fa-check-square" ng-switch-when="checkbox"></i>
|
||||||
|
<i class="fa fa-dot-circle-o" ng-switch-when="radio"></i>
|
||||||
|
<i class="fa fa-envelope-o" ng-switch-when="email"></i>
|
||||||
|
<i class="fa fa-pencil-square-o" ng-switch-when="textarea"></i>
|
||||||
|
</span>
|
||||||
|
<span style="padding-left:1em;">{{type.value}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-sm-3 col-md-8 current-fields">
|
||||||
|
<div class="inside">
|
||||||
|
<p ng-show="form.form_fields.length == 0">No fields added yet.</p>
|
||||||
|
<accordion close-others="accordion.oneAtATime">
|
||||||
|
<accordion-group ng-repeat="field in form.form_fields" is-open="accordion[$index].isOpen">
|
||||||
|
<accordion-heading>
|
||||||
|
<div>
|
||||||
|
<span class="pull-left" ng-switch="field.fieldType">
|
||||||
|
<i class="fa fa-pencil-square-o" ng-switch-when="textfield"></i>
|
||||||
|
<i class="fa fa-th-list" ng-switch-when="dropdown"></i>
|
||||||
|
<i class="fa fa-calendar" ng-switch-when="date"></i>
|
||||||
|
<i class="fa fa-check-square" ng-switch-when="checkbox"></i>
|
||||||
|
<i class="fa fa-dot-circle-o" ng-switch-when="radio"></i>
|
||||||
|
<i class="fa fa-envelope-o" ng-switch-when="email"></i>
|
||||||
|
<i class="fa fa-pencil-square-o" ng-switch-when="textarea"></i>
|
||||||
|
</span>
|
||||||
|
<span style="padding-left:3em;">{{field.title}}</span>
|
||||||
|
<span class="pull-right">
|
||||||
|
<i class="fa fa-trash-o" ng-click="deleteField(field.client_id)"></i>
|
||||||
|
<!-- <i class="fa fa-chevron-right" ng-hide="accordion[$index].isOpen"></i>
|
||||||
|
<i class="fa fa-chevron-down" ng-show="accordion[$index].isOpen"></i -->
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</accordion-heading>
|
||||||
|
<div class="accordion-edit">
|
||||||
|
<!-- <button class="btn btn-danger pull-right" type="button" ng-click="deleteField(field.client_id)"><i class="icon-trash icon-white"></i> Delete</button> -->
|
||||||
|
|
||||||
|
<div class="clear"></div> <hr>
|
||||||
|
<div class="row">
|
||||||
|
<div class="span2">Field Type:</div>
|
||||||
|
<div class="span4">{{field.fieldType}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="span2">Field Title:</div>
|
||||||
|
<div class="span4"><input type="text" ng-model="field.title" value="{{field.title}}"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="span2">Field Default Value:</div>
|
||||||
|
<div class="span4"><input type="text" ng-model="field.fieldValue" value="{{field.fieldValue}}"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row" ng-show="showAddOptions(field)">
|
||||||
|
<div class="span2">Field Options:</div>
|
||||||
|
<div class="span6">
|
||||||
|
<div ng-repeat="option in field.field_options">
|
||||||
|
<input type="text" ng-model="option.option_title" value="{{option.option_title}}">
|
||||||
|
<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteOption(field, option)"><i class="icon-minus icon-white"></i></a>
|
||||||
|
<span class="label label-inverse">Value: {{ option.option_value }}</span>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary btn-small" type="button" ng-click="addOption(field)"><i class="icon-plus icon-white"></i> Add Option</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clear"></div> <hr>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="span2">Required:</div>
|
||||||
|
<div class="span4">
|
||||||
|
<label>
|
||||||
|
<input type="radio" ng-value="true" ng-selected ng-model="field.required"/>
|
||||||
|
Yes
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" ng-value="false" ng-model="field.required"/>
|
||||||
|
No
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clear"></div> <hr>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="span2">Disabled:</div>
|
||||||
|
<div class="span4">
|
||||||
|
<label>
|
||||||
|
<input type="radio" ng-value="true" ng-selected ng-model="field.disabled"/>
|
||||||
|
Yes
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" ng-value="false" ng-model="field.disabled"/>
|
||||||
|
No
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</accordion-group>
|
||||||
|
</accordion>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
|
@ -16,59 +16,91 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-8" ng-if="!viewSubmissions">
|
<!-- <div > -->
|
||||||
<p ng-show="form.form_fields.length == 0">No fields added yet.</p>
|
<tabset class="col-xs-12">
|
||||||
<accordion class="col-xs-10" close-others="accordion.oneAtATime">
|
<tab>
|
||||||
<accordion-group heading="{{field.title}} (is a {{field.fieldType}})" ng-repeat="field in form.form_fields">
|
<tab-heading>
|
||||||
</accordion-group>
|
Edit Form Fields
|
||||||
</accordion>
|
</tab-heading>
|
||||||
</p>
|
<edit-form-directive form="form" user="user"></edit-form-directive>
|
||||||
</div>
|
</tab>
|
||||||
<div class="submissions-table col-xs-8" ng-if="viewSubmissions">
|
<tab>
|
||||||
<table class="table table-striped table-hover table-condensed">
|
<tab-heading>
|
||||||
<thead>
|
Edit Design
|
||||||
<tr>
|
</tab-heading>
|
||||||
<th>
|
<edit-form-directive form="form" user="user"></edit-form-directive>
|
||||||
<input ng-checked="table.masterChecker" type="checkbox" ng-init="table.masterChecker = false"/>
|
</tab>
|
||||||
</th>
|
<tab>
|
||||||
<th>#</th>
|
<tab-heading>
|
||||||
<th data-ng-repeat="(key, value) in submissions[0].form_fields">
|
Configure
|
||||||
{{value.title}}
|
</tab-heading>
|
||||||
</th>
|
<configure-form-directive form="form" user="user"></configure-form-directive>
|
||||||
<th>
|
</tab>
|
||||||
Time Elapsed
|
<tab data-ng-click="showSubmissions()">
|
||||||
</th>
|
<tab-heading>
|
||||||
<th>
|
View Submissions
|
||||||
Date Submitted (UTC)
|
</tab-heading>
|
||||||
</th>
|
<div class="submissions-table" ng-show="viewSubmissions">
|
||||||
<th ng-if="form.autofillPDFs">
|
<table class="table table-striped table-hover table-condensed">
|
||||||
Generated PDF
|
<thead>
|
||||||
</th>
|
<tr>
|
||||||
</tr>
|
<th>
|
||||||
</thead>
|
<input ng-model="table.masterChecker" ng-change="toggleAllCheckers()" type="checkbox"/>
|
||||||
<tbody>
|
</th>
|
||||||
<tr data-ng-repeat="submission in submissions">
|
<th>#</th>
|
||||||
<td>
|
<th data-ng-repeat="(key, value) in submissions[0].form_fields">
|
||||||
<input ng-checked="table.rows[$index].selected" type="checkbox" ng-init="table.masterChecker = false"/>
|
{{value.title}}
|
||||||
</td>
|
</th>
|
||||||
<th class="scope">{{$index+1}}</th>
|
<th>
|
||||||
<td data-ng-repeat="(key, value) in submission.form_fields">
|
Time Elapsed
|
||||||
{{value.fieldValue}}
|
</th>
|
||||||
</td>
|
<th>
|
||||||
<td>
|
Date Submitted (UTC)
|
||||||
{{submission.timeElapsed}}
|
</th>
|
||||||
</th>
|
<th ng-if="form.autofillPDFs">
|
||||||
<td>
|
Generated PDF
|
||||||
{{submission.created | date:'yyyy-MM-dd HH:mm:ss'}}
|
</th>
|
||||||
</td>
|
</tr>
|
||||||
<td ng-if="submission.pdf">
|
</thead>
|
||||||
<a href="{{submission.pdf.path}}">Generated PDF</a>
|
<tbody>
|
||||||
</td>
|
<tr data-ng-repeat="row in table.rows" ng-click="rowClicked(row)">
|
||||||
</tr>
|
<td>
|
||||||
</tbody>
|
<!-- <input ng-model="row.selected" type="checkbox"/> -->
|
||||||
</table>
|
</td>
|
||||||
</div>
|
<th class="scope">{{$index+1}}</th>
|
||||||
|
<td data-ng-repeat="(key, value) in row.form_fields">
|
||||||
|
{{value.fieldValue}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{row.timeElapsed}}
|
||||||
|
</th>
|
||||||
|
<td>
|
||||||
|
{{row.created | date:'yyyy-MM-dd HH:mm:ss'}}
|
||||||
|
</td>
|
||||||
|
<td ng-if="row.pdf">
|
||||||
|
<a href="{{row.pdf.path}}">Generated PDF</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</tab>
|
||||||
|
</tabset>
|
||||||
|
<!-- </div> -->
|
||||||
|
</div>
|
||||||
|
<!-- <div class="row">
|
||||||
|
<div class="col-xs-8">
|
||||||
|
<div>
|
||||||
|
<edit-form-directive form="form" user="user"></edit-form-directive>
|
||||||
|
<p ng-show="form.form_fields.length == 0">No fields added yet.</p>
|
||||||
|
</p>
|
||||||
|
<accordion class="col-xs-10" close-others="accordion.oneAtATime">
|
||||||
|
<accordion-group heading="{{field.title}} (is a {{field.fieldType}})" ng-repeat="field in form.form_fields">
|
||||||
|
</accordion-group>
|
||||||
|
</accordion>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-xs-3 col-xs-offset-1 container text-right form-controls" data-ng-show="authentication.user._id == form.user._id">
|
<div class="col-xs-3 col-xs-offset-1 container text-right form-controls" data-ng-show="authentication.user._id == form.user._id">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
@ -90,7 +122,8 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<small class="col-xs-12">
|
<small class="col-xs-12">
|
||||||
<em class="text-muted">
|
<em class="text-muted">
|
||||||
|
|
Loading…
Reference in a new issue