updated edit-form view
This commit is contained in:
parent
33d768de54
commit
de914abb90
|
@ -21,6 +21,17 @@
|
|||
padding-top: 3em;
|
||||
}
|
||||
|
||||
.admin-form .panel-heading {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
.admin-form .panel-heading:hover {
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.admin-form .panel-heading a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.current-fields .tool-panel > .panel-default:hover {
|
||||
border-color: #9d9d9d;
|
||||
cursor: pointer;
|
||||
|
|
|
@ -7,22 +7,33 @@ angular.module('forms').directive('editFormDirective', ['$http', '$timeout', 'ti
|
|||
//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;
|
||||
// $scope.addField.new = $scope.addField.types[0].name;
|
||||
$scope.addField.types.forEach(function(type){
|
||||
type.lastAddedID = 0;
|
||||
return type;
|
||||
});
|
||||
|
||||
// accordion settings
|
||||
$scope.accordion = {};
|
||||
$scope.accordion.oneAtATime = true;
|
||||
|
||||
// create new field button click
|
||||
$scope.addNewField = function(){
|
||||
$scope.addNewField = function(fieldType){
|
||||
|
||||
// incr field_id counter
|
||||
$scope.addField.lastAddedID++;
|
||||
|
||||
var fieldTitle;
|
||||
for(var i = 0; i < $scope.addField.types.length; i++){
|
||||
console.log($scope.addField.types[i].name === fieldType);
|
||||
if($scope.addField.types[i].name === fieldType){
|
||||
$scope.addField.types[i].lastAddedID++;
|
||||
fieldTitle = $scope.addField.types[i].value+$scope.addField.types[i].lastAddedID;
|
||||
break;
|
||||
}
|
||||
}
|
||||
var newField = {
|
||||
'title' : 'New field - ' + ($scope.addField.lastAddedID),
|
||||
'fieldType' : $scope.addField.new,
|
||||
'title' : fieldTitle,
|
||||
'fieldType' : fieldType,
|
||||
'fieldValue' : '',
|
||||
'required' : true,
|
||||
'disabled' : false
|
||||
|
@ -38,8 +49,7 @@ angular.module('forms').directive('editFormDirective', ['$http', '$timeout', 'ti
|
|||
for(var i = 0; i < $scope.form.form_fields.length; i++){
|
||||
console.log($scope.form.form_fields[i].$$hashKey === hashKey);
|
||||
if($scope.form.form_fields[i].$$hashKey === hashKey){
|
||||
$scope.form.form_fields.splice(i, 1);
|
||||
|
||||
$scope.form.form_fields.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('forms').directive('fieldIconDirective', function($http, $compile) {
|
||||
|
||||
return {
|
||||
templateUrl: './modules/forms/views/directiveViews/form/fieldIcon.html',
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
typeName: '@'
|
||||
},
|
||||
controller: function($scope){
|
||||
var iconTypeMap = {
|
||||
"textfield": "fa fa-pencil-square-o",
|
||||
"dropdown": "fa fa-th-list",
|
||||
"date": "fa fa-calendar",
|
||||
"checkbox": "fa fa-check-square-o",
|
||||
"radio": "fa fa-dot-circle-o",
|
||||
"email": "fa fa-envelope-o",
|
||||
"textarea": "fa fa-pencil-square",
|
||||
"legal": "fa fa-legal",
|
||||
"file": "fa fa-cloud-upload",
|
||||
"rating": "fa fa-star-half-o",
|
||||
"link": "fa fa-link",
|
||||
"scale": "fa fa-sliders",
|
||||
"stripe": "fa fa-credit-card",
|
||||
}
|
||||
$scope.typeIcon = iconTypeMap[$scope.typeName];
|
||||
},
|
||||
|
||||
};
|
||||
});
|
|
@ -9,11 +9,11 @@ angular.module('forms').service('FormFields', [
|
|||
},
|
||||
{
|
||||
name : 'email',
|
||||
value : 'E-mail'
|
||||
value : 'Email'
|
||||
},
|
||||
{
|
||||
name : 'radio',
|
||||
value : 'Radio Buttons'
|
||||
value : 'Multiple Choice'
|
||||
},
|
||||
{
|
||||
name : 'dropdown',
|
||||
|
@ -31,6 +31,30 @@ angular.module('forms').service('FormFields', [
|
|||
name : 'checkbox',
|
||||
value : 'Checkbox'
|
||||
},
|
||||
{
|
||||
name : 'legal',
|
||||
value : 'Legal'
|
||||
},
|
||||
{
|
||||
name : 'file',
|
||||
value : 'File Upload'
|
||||
},
|
||||
{
|
||||
name : 'rating',
|
||||
value : 'Rating'
|
||||
},
|
||||
{
|
||||
name : 'link',
|
||||
value : 'Link'
|
||||
},
|
||||
{
|
||||
name : 'scale',
|
||||
value : 'Opinion Scale'
|
||||
},
|
||||
{
|
||||
name : 'stripe',
|
||||
value : 'Payment'
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
@ -9,6 +9,8 @@
|
|||
<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">
|
||||
|
@ -40,6 +42,8 @@
|
|||
<div class="col-sm-12">
|
||||
<h5>Autogenerate Form?</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br><br>
|
||||
<div class="col-sm-4">
|
||||
|
||||
|
@ -62,6 +66,8 @@
|
|||
<h5>Save Submissions as PDFs?</h5>
|
||||
</div>
|
||||
<br><br>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
|
||||
<label>
|
||||
|
|
|
@ -1,133 +1,133 @@
|
|||
<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-o" 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" ng-switch-when="textarea"></i>
|
||||
</span>
|
||||
<span style="padding-left:1em;">{{type.value}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-field col-xs-5">
|
||||
<!-- <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="row add-field-title">
|
||||
<h3 class="col-xs-12">Add New Field</h3>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3 col-md-8 current-fields">
|
||||
<!-- <p ng-show="form.form_fields.length == 0">No fields added yet.</p> -->
|
||||
<div class="row">
|
||||
<div class="col-xs-10">
|
||||
<accordion close-others="accordion.oneAtATime">
|
||||
<accordion-group ng-repeat="field in form.form_fields" is-open="accordion[$index].isOpen" >
|
||||
|
||||
<accordion-heading>
|
||||
<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-o" 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" ng-switch-when="textarea"></i>
|
||||
</span>
|
||||
<span style="padding-left:1.2em;">{{field.title}}</span>
|
||||
|
||||
</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 class="panel-group row">
|
||||
<div class="col-xs-6" ng-repeat="type in addField.types">
|
||||
<div class="panel panel-default" style="background-color:#f5f5f5;">
|
||||
<div class="panel-heading" ng-click="addNewField(type.name)" style="cursor: pointer; font-size:14px;">
|
||||
<span class="pull-left">
|
||||
<field-icon-directive type-name="{{type.name}}"></field-icon-directive>
|
||||
</span>
|
||||
|
||||
<span style="padding-left:0.3em;">{{type.value}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1" style="padding:0 5px;" >
|
||||
<div class="panel-group tool-panel text-center">
|
||||
<div class="panel panel-default" ng-repeat="field in form.form_fields" ng-mouseenter="hover(field)" ng-mouseleave="hover(field)">
|
||||
<div class="panel-heading" style="padding: 10px 10px;" ng-click="deleteField(field.$$hashKey)">
|
||||
<span class="text-center">
|
||||
<a href="" class="fa fa-trash-o"></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-7 current-fields">
|
||||
<!-- <p ng-show="form.form_fields.length == 0">No fields added yet.</p> -->
|
||||
<div class="row">
|
||||
<div class="col-xs-10">
|
||||
<accordion close-others="accordion.oneAtATime">
|
||||
<accordion-group ng-repeat="field in form.form_fields" is-open="accordion[$index].isOpen" >
|
||||
|
||||
<accordion-heading>
|
||||
<span class="pull-left" ng-switch="field.fieldType">
|
||||
<field-icon-directive type-name="{{field.fieldType}}"></field-icon-directive>
|
||||
</span>
|
||||
<span style="padding-left:1.2em;">{{field.title}}</span>
|
||||
|
||||
</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>
|
||||
<div class="panel panel-default" style="border-style: dashed; border-color: #a9a9a9;">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title text-center" style="color: #a9a9a9;">
|
||||
Drag and Drop new fields here
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</accordion>
|
||||
</div>
|
||||
<div class="col-xs-1" style="padding:0 5px;" >
|
||||
<div class="panel-group tool-panel text-center">
|
||||
<div class="panel panel-default" ng-repeat="field in form.form_fields" ng-mouseenter="hover(field)" ng-mouseleave="hover(field)">
|
||||
<div class="panel-heading" style="padding: 10px 10px; height: 37px;" ng-click="deleteField(field.$$hashKey)">
|
||||
<span class="text-center">
|
||||
<a href="" class="fa fa-trash-o"></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1" style="padding:0 5px;">
|
||||
<div class="panel-group tool-panel text-center">
|
||||
<div class="panel panel-default" ng-repeat="field in form.form_fields" ng-mouseenter="hover(field)" ng-mouseleave="hover(field)">
|
||||
<div class="panel-heading" style="padding: 10px 10px;" ng-click="duplicateField(field, $index)">
|
||||
<span class="text-center">
|
||||
<a href="" class="fa fa-files-o"></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-1" style="padding:0 5px;">
|
||||
<div class="panel-group tool-panel text-center">
|
||||
<div class="panel panel-default" ng-repeat="field in form.form_fields" ng-mouseenter="hover(field)" ng-mouseleave="hover(field)">
|
||||
<div class="panel-heading" style="padding: 10px 10px; height: 37px;" ng-click="duplicateField(field, $index)">
|
||||
<span class="text-center">
|
||||
<a href="" class="fa fa-files-o"></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1 @@
|
|||
<i class="{{typeIcon}}"></i>
|
|
@ -24,8 +24,8 @@
|
|||
</tab-heading>
|
||||
<edit-form-directive form="form" user="user"></edit-form-directive>
|
||||
</tab>
|
||||
<tab>
|
||||
<tab-heading>
|
||||
<tab disabled="true">
|
||||
<tab-heading >
|
||||
Edit Design
|
||||
</tab-heading>
|
||||
<edit-form-directive form="form" user="user"></edit-form-directive>
|
||||
|
@ -124,7 +124,7 @@
|
|||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="row">
|
||||
<!-- <div class="row">
|
||||
<small class="col-xs-12">
|
||||
<em class="text-muted">
|
||||
Created on
|
||||
|
@ -133,6 +133,6 @@
|
|||
<span data-ng-bind="form.admin.displayName"></span>
|
||||
</em>
|
||||
</small>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <p class="lead" data-ng-bind="form.content"></p> -->
|
||||
</section>
|
Loading…
Reference in a new issue