started working on configuration view

This commit is contained in:
David Baldwynn 2015-07-03 21:57:06 -07:00
parent de914abb90
commit 6b5eaddd3e
21 changed files with 358 additions and 134 deletions

View file

@ -42,7 +42,7 @@ var FormFieldSchema = new Schema({
type: Date,
default: Date.now
},
title: {
name: {
type: String,
default: '',
trim: true,
@ -65,7 +65,7 @@ var FormFieldSchema = new Schema({
required: 'Field type cannot be blank',
validate: [validateFormFieldType, 'Invalid field type']
},
fieldValue: Schema.Types.Mixed
value: Schema.Types.Mixed
});

View file

@ -1,3 +1,57 @@
/* Styles for form submission view (/forms/:formID) */
form .row.field {
padding: 1em 0 3em 0;
}
form .row.field > .field-title {
margin-top:0.5em;
font-size:1.5em;
}
form.submission-form .row.field.statement > .field-title {
font-size:1.7em;
}
form.submission-form .row.field.statement > .field-input {
font-size:1.2em;
color:#ddd;
}
form.submission-form .row.field > .field-input input {
width:500px;
}
form.submission-form .row.field .field-input > input:focus {
font-size:1em;
}
form .row.field.textfield > .field-input > input{
padding:0.45em 0.9em;
width:600px;
}
form.config-form > .row {
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
width: 90%;
}
form.config-form > .row > .container:nth-of-type(odd){
border-right: 1px #ddd solid;
/*padding-left: 1em;*/
}
form.config-form .row > .field-input {
padding-top:1.2em;
padding-left:0.1em;
}
form.config-form .row > .field-input label {
padding-left:1.3em;
display: block;
}
/* Styles for form admin view (/forms/:formID/admin) */
.admin-form > .page-header {
padding-bottom: 0px;
@ -54,11 +108,19 @@
}
/*Style for edit fields tab*/
.admin-form .tab-content .add-field {
border-right: 1px solid #ddd;
/*Styles for add fields tab*/
.admin-form .add-field {
background-color: #ddd;
}
.admin-form .add-field .col-xs-6 {
padding: 0.25em 0.4em;
}
.admin-form .add-field .col-xs-6 .panel-heading {
border-width: 1px;
border-style: solid;
border-color: #bbb;
border-radius: 4px;
}
.status-light {
padding-left:0.6em;

View file

@ -8,6 +8,14 @@ angular.module('forms').directive('configureFormDirective', ['$http', '$timeout'
$scope.pdfLoading = false;
var _current_upload = null;
var _unbindedPdfFields = $scope.pdfFields;
//DAVID: TODO: finish this so we can create a Form.pdfFieldMap
// $scope.getUnbindedPdfFields = function(fieldType){
// _unbindedPdfFields = $scope.pdfFields
// }
//PDF Functions
$scope.cancelUpload = function(){
_current_upload.abort();
@ -65,7 +73,9 @@ angular.module('forms').directive('configureFormDirective', ['$http', '$timeout'
restrict: 'E',
scope: {
form:'=',
user:'='
user:'=',
pdfFields:'@',
formFields:'@'
}
};
}

View file

@ -57,7 +57,8 @@ angular.module('forms').directive('editFormDirective', ['$http', '$timeout', 'ti
$scope.duplicateField = function (field, field_index){
for(var i = 0; i < $scope.form.form_fields.length; i++){
if($scope.form.form_fields[i].field_id === field.field_id){
$scope.form.form_fields.splice(field_index+1, 0, field);
// $scope.form.form_fields.splice(field_index+1, 0, field);
$scope.addNewField($scope.form.form_fields[i].fieldType);
break;
}
}

View file

@ -23,6 +23,7 @@ angular.module('forms').directive('fieldIconDirective', function($http, $compile
"link": "fa fa-link",
"scale": "fa fa-sliders",
"stripe": "fa fa-credit-card",
"statement": "fa fa-quote-left",
}
$scope.typeIcon = iconTypeMap[$scope.typeName];
},

View file

@ -55,6 +55,10 @@ angular.module('forms').service('FormFields', [
name : 'stripe',
value : 'Payment'
},
{
name : 'statement',
value : 'Statement'
},
];
}

View file

@ -44,27 +44,27 @@
<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="row">
<div class="span2">Field ID: </div>
<div class="span4">{{field.client_id}}</div>
<div class="col-xs-2">Field ID: </div>
<div class="col-xs-4">{{field.client_id}}</div>
</div>
<div class="row">
<div class="span2">Field Type:</div>
<div class="span4">{{field.fieldType}}</div>
<div class="col-xs-2">Field Type:</div>
<div class="col-xs-4">{{field.fieldType}}</div>
</div>
<div class="clear"></div> <hr>
<div class="row">
<div class="span2">Field Title:</div>
<div class="span4"><input type="text" ng-model="field.title" value="{{field.title}}"></div>
<div class="col-xs-2">Field Title:</div>
<div class="col-xs-4"><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 class="col-xs-2">Field Default Value:</div>
<div class="col-xs-4"><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 class="col-xs-2">Field Options:</div>
<div class="col-xs-6">
<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>
@ -77,8 +77,8 @@
<div class="clear"></div> <hr>
<div class="row">
<div class="span2">Required:</div>
<div class="span4">
<div class="col-xs-2">Required:</div>
<div class="col-xs-4">
<label>
<input type="radio" ng-value="true" ng-selected ng-model="field.required"/>
&nbsp; Yes
@ -93,8 +93,8 @@
<div class="clear"></div> <hr>
<div class="row">
<div class="span2">Disabled:</div>
<div class="span4">
<div class="col-xs-2">Disabled:</div>
<div class="col-xs-4">
<label>
<input type="radio" ng-value="true" ng-selected ng-model="field.disabled"/>
&nbsp; Yes

View file

@ -1,7 +1,8 @@
<div class="field row">
<br>
<input ng-model="field.fieldValue" id="{{field.client_id}}" type="checkbox" ng-init="field.fieldValue = false" ng-required="field.required" ng-disabled="field.disabled"/>
<label class="form-field-label" for="{{field.client_id}}" ng-cloak>{{field.title}}</label>
<span class="required-error" ng-show="field.required && field.fieldValue == 0">(* required)</span>
<div class="col-xs-2 field-title field-title">{{field.title}} </div>
<div class="col-xs-4 field-input field-input">
<input ng-model="field.fieldValue" id="{{field.client_id}}" type="checkbox" ng-init="field.fieldValue = false" ng-required="field.required" ng-disabled="field.disabled"/>
<span class="required-error" ng-show="field.required && field.fieldValue == 0">(* required)</span>
</div>
<div class="field row">

View file

@ -1,7 +1,7 @@
<div class="field row">
<div class="span2">{{field.title}}:</div>
<div class="col-xs-2 field-title">{{field.title}} </div>
<span class="required-error" ng-show="field.required && !field.fieldValue">* required </span>
<div class="span4">
<div class="col-xs-4 field-input">
<div class="control-group input-append">
<input type="text" ng-model="field.fieldValue" data-date-format="mm/dd/yyyy" bs-datepicker ng-required="field.required" ng-disabled="field.disabled">
<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>

View file

@ -1,6 +1,6 @@
<div class="field row">
<div class="span2">{{field.title}}:</div>
<div class="span4">
<div class="col-xs-2 field-title">{{field.title}} </div>
<div class="col-xs-4 field-input">
<select ng-model="field.fieldValue" ng-required="field.required" ng-disabled="field.disabled">
<option ng-repeat="option in field.field_options"
ng-selected="option.option_value == field.fieldValue"

View file

@ -1,6 +1,6 @@
<div class="field row">
<div class="span2">{{field.title}}:</div>
<div class="span4">
<div class="col-xs-2 field-title">{{field.title}} </div>
<div class="col-xs-4 field-input">
<input type="email" placeholder="Email" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-required="field.required" ng-disabled="field.disabled"/>
<span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
</div>

View file

@ -0,0 +1,31 @@
<div class="row field" ng-if="form.autofillPDFs">
<div class="col-sm-4 field-title">
<h5>{{field.title}}</h5>
</div>
<div class="col-sm-8 field-input">
<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">
{{field.file.originalname}}
</div>
</div>
<div class="input-group-btn">
<button type="button" ng-if="field.file" ng-click="removeFile(field);" 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="field.fileLoading" title="Abort ongoing upload" class="btn btn-default" ng-click="cancelFileUpload(field)">
<i class="glyphicon glyphicon-ban-circle"></i>
Cancel
</button>
<div class="btn btn-success btn-file" ngf-select ngf-change="uploadPDF($files)" ng-if="!field.file">
<i class="glyphicon glyphicon-upload"></i>
Upload your File
</div>
</div>
</div>
</div>
</div>

View file

@ -0,0 +1,7 @@
<div class="field row">
<div class="col-xs-2 field-title">{{field.title}} </div>
<div class="col-xs-4 field-input">
<input type="link" placeholder="link" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-required="field.required" ng-disabled="field.disabled"/>
<span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
</div>
</div>

View file

@ -1,6 +1,6 @@
<div class="field row">
<div class="span2">{{field.title}}:</div>
<div class="span4">
<div class="col-xs-2 field-title">{{field.title}} </div>
<div class="col-xs-4 field-input">
<input type="password" ng-model="field.fieldValue" value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled">
<span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
</div>

View file

@ -1,6 +1,6 @@
<div class="field row">
<div class="span2">{{field.title}}:</div>
<div class="span4">
<div class="col-xs-2 field-title">{{field.title}} </div>
<div class="col-xs-4 field-input">
<div ng-repeat="option in field.field_options" class="row-fluid">
<label>
<input type="radio" value="{{option.option_value}}" ng-model="field.fieldValue" ng-required="field.required" ng-disabled="field.disabled"/>

View file

@ -0,0 +1,10 @@
<div class="statement field row">
<div class="col-xs-12 field-title field-title">
<h3>{{field.title}} </h3>
</div>
<div class="col-xs-10 col-xs-offset-2 field-title field-input">
<i class="fa fa-quote-left fa-3"></i>
<p>{{field.fieldValue}} </p>
<i class="fa fa-quote-right fa-3"></i>
</div>
</div>

View file

@ -1,6 +1,6 @@
<div class="field row">
<div class="span2">{{field.title}}:</div>
<div class="span4">
<div class="col-xs-2 field-title">{{field.title}} </div>
<div class="col-xs-4 field-input">
<textarea type="text" ng-model="field.fieldValue" value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled"></textarea>
<span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
</div>

View file

@ -1,6 +1,6 @@
<li class="textfield required active visible field row">
<div class="span2">{{field.title}}:</div>
<div class="span4">
<div class="textfield field row">
<div class="col-xs-2 field-title">{{field.title}} </div>
<div class="col-xs-4 field-input">
<input type="text"
ng-model="field.fieldValue"
value="field.fieldValue"
@ -8,4 +8,4 @@
ng-disabled="field.disabled" changeFocus focus-up-id="focusUpButton" focus-down-id="focusDownButton">
<span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
</div>
</li>
</div>

View file

@ -1,86 +1,168 @@
<div>
<form class="config-form container">
<div class="row">
<div class="col-sm-12">
<h3>Form PDF</h3>
</div>
</div>
<div class="col-sm-6 container">
<div class="row">
<div class="col-sm-12">
<h2>PDF Generation</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h5>Upload your PDF</h5>
</div>
</div>
<div class="row">
<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 class="row field">
<div class="field-title col-sm-6">
<h5>Hide Form Footer?</h5>
</div>
<div class="field-input col-sm-6">
<label>
<input type="radio" data-ng-value="true" ng-model="form.hideFooter" ng-required="true" />
&nbsp;<span>Yes</span>
</label>
<label>
<input type="radio" data-ng-value="false" ng-model="form.hideFooter" ng-required="true" />
&nbsp;<span>No</span>
</label>
<!-- <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span> -->
</div>
</div>
<!-- autofillPDFs yes/no field -->
<div class="row field" ng-if="form.isGenerated">
<div class="field-title col-sm-6">
<h5>Save Submissions as PDFs?</h5>
</div>
<div class="field-input col-sm-6">
<label>
<input type="radio" data-ng-value="true" ng-model="form.autofillPDFs" ng-required="true" />
&nbsp;<span>Yes</span>
</label>
<label>
<input type="radio" data-ng-value="false" ng-model="form.autofillPDFs" ng-required="true" />
&nbsp;<span>No</span>
</label>
<!-- <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span> -->
</div>
</div>
<!-- Upload PDF Field -->
<div class="row field" ng-if="form.autofillPDFs">
<div class="col-sm-6 field-title">
<h5>Upload Your PDF Template</h5>
</div>
<div class="col-sm-6 field-input">
<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 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>
</div>
<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>
<!-- generate form from PDF yes/no field -->
<div class="row field" ng-if="form.pdf">
<div class="col-sm-6 field-title">
<h5>Autogenerate Form?</h5>
</div>
<div class="col-sm-6 field-input">
<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
<label>
<input type="radio" data-ng-value="true" ng-model="form.isGenerated" ng-required="true" />
&nbsp;<span>Yes</span>
</label>
<label>
<input type="radio" data-ng-value="false" ng-model="form.isGenerated" ng-required="true" />
&nbsp;<span>No</span>
</label>
</div>
</div>
<!-- !!!!!!DAVID: TODO: Finish this so we can upload pdfFieldMap!!!!!!!!! -->
<!-- Map form inputs to PDF inputs Field -->
<!-- <div class="textfield field row" ng-if="form.pdf">
<div class="col-xs-2 field-title field-title">Map Form Fields to PDF Fields </div>
<div class="col-xs-4 field-input field-input">
<div class="row" ng-repeat="field in formFields">
<div class="col-xs-4">
{{field.name}}
</div>
<div class="col-xs-8">
<label style="display:inline" ng-repeat="unbindedPdfField in getUnbindedPdfFields[{{field.fieldType}}]">
<input type="radio" value="unbindedPdfField._id" ng-model="field"/>
&nbsp;<span ng-bind="field.pdfField"></span>
</label>
</div>
</div>
</div>
</div> -->
</div>
<div class="col-sm-5 col-sm-offset-1 container">
<div class="row">
<div class="col-sm-12">
<h2>Advanced Settings</h2>
</div>
</div>
<div class="row field">
<div class="field-title col-sm-6">
<h5>Form Name</h5>
</div>
<div class="col-sm-6 field-input field-input">
<input type="text"
ng-model="form.title"
value="{{form.title}}">
<span class="required-error" ng-show="field.required && !field.fieldValue">* required</span>
</div>
</div>
<div class="row field">
<div class="field-title col-sm-6">
<h5>Publish Form?</h5>
</div>
<div class="field-input col-sm-6">
<label>
<input type="radio" data-ng-value="true" ng-model="form.isLive" ng-required="true" />
&nbsp;<span>Yes</span>
</label>
<label>
<input type="radio" data-ng-value="false" ng-model="form.isLive" ng-required="true" />
&nbsp;<span>No</span>
</label>
<!-- <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span> -->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h5>Autogenerate Form?</h5>
</div>
</div>
<div class="row">
<br><br>
<div class="col-sm-4">
<label>
<input type="radio" data-ng-value="true" ng-model="form.isGenerated" ng-required="true" />
&nbsp;<span>Yes</span>
</label>
<label>
<input type="radio" data-ng-value="false" ng-model="form.isGenerated" ng-required="true" />
&nbsp;<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>
<div class="row">
<div class="col-sm-4">
<label>
<input type="radio" data-ng-value="true" ng-model="form.autofillPDFs" ng-required="true" />
&nbsp;<span>Yes</span>
</label>
<label>
<input type="radio" data-ng-value="false" ng-model="form.autofillPDFs" ng-required="true" />
&nbsp;<span>No</span>
</label>
<!-- <span class="required-error" ng-show="field.required && !field.fieldValue">* required</span> -->
</div>
</div>
</div>

View file

@ -34,27 +34,42 @@
<field-icon-directive type-name="{{field.fieldType}}"></field-icon-directive>
</span>
<span style="padding-left:1.2em;">{{field.title}}</span>
<span class="pull-right">
<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>
</accordion-heading>
<div class="accordion-edit">
<div class="accordion-edit container">
<!-- <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="row">
<div class="col-xs-12">
<h5>Preview</h5>
</div>
</div>
<div class="row">
<ul class="col-xs-8 container" style="list-style:none;">
<field-directive field="field">
</field-directive>
</ul>
</div>
<div class="clear"></div> <hr>
<div class="row">
<div class="span2">Field Type:</div>
<div class="span4">{{field.fieldType}}</div>
<div class="col-xs-2">Field Type:</div>
<div class="col-xs-4">{{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 class="col-xs-2">Field Title:</div>
<div class="col-xs-4"><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 class="col-xs-2">Field Default Value:</div>
<div class="col-xs-4"><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 class="col-xs-2">Field Options:</div>
<div class="col-xs-6">
<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>
@ -67,8 +82,8 @@
<div class="clear"></div> <hr>
<div class="row">
<div class="span2">Required:</div>
<div class="span4">
<div class="col-xs-2">Required:</div>
<div class="col-xs-4">
<label>
<input type="radio" ng-value="true" ng-selected ng-model="field.required"/>
&nbsp; Yes
@ -83,8 +98,8 @@
<div class="clear"></div> <hr>
<div class="row">
<div class="span2">Disabled:</div>
<div class="span4">
<div class="col-xs-2">Disabled:</div>
<div class="col-xs-4">
<label>
<input type="radio" ng-value="true" ng-selected ng-model="field.disabled"/>
&nbsp; Yes
@ -95,6 +110,8 @@
</label>
</div>
</div>
<hr>
</div>
</accordion-group>
<div class="panel panel-default" style="border-style: dashed; border-color: #a9a9a9;">

View file

@ -10,11 +10,9 @@
<br>
<div class="row">
<form class="field col-sm-offset-1 col-sm-10" name="form" ng-model="form" ng-repeat="field in form.form_fields" >
<!-- <ul class=" col-sm-11 col-sm-offset-1" style="margin-top: 50px; margin-bottom: 50px;" ng-repeat="field in form.form_fields" > -->
<field-directive field="field" >
<form name="form" class="submission-form col-sm-offset-1 col-sm-10" name="form" ng-model="form" ng-repeat="field in form.form_fields" >
<field-directive field="field">
</field-directive>
<!-- </ul> -->
</form>
</div>