added deletion and duplication buttons to EditForm
This commit is contained in:
parent
cfbb45ab72
commit
33d768de54
|
@ -21,6 +21,28 @@
|
||||||
padding-top: 3em;
|
padding-top: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.current-fields .tool-panel > .panel-default:hover {
|
||||||
|
border-color: #9d9d9d;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-fields .tool-panel > .panel-default .panel-heading {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #9d9d9d!important;
|
||||||
|
}
|
||||||
|
.current-fields .tool-panel > .panel-default .panel-heading:hover {
|
||||||
|
background-color: #eee;
|
||||||
|
color: #000!important;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.current-fields .tool-panel > .panel-default .panel-heading a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.current-fields .tool-panel > .panel-default .panel-heading a:hover{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*Style for edit fields tab*/
|
/*Style for edit fields tab*/
|
||||||
.admin-form .tab-content .add-field {
|
.admin-form .tab-content .add-field {
|
||||||
border-right: 1px solid #ddd;
|
border-right: 1px solid #ddd;
|
||||||
|
|
|
@ -33,14 +33,30 @@ angular.module('forms').directive('editFormDirective', ['$http', '$timeout', 'ti
|
||||||
};
|
};
|
||||||
|
|
||||||
// deletes particular field on button click
|
// deletes particular field on button click
|
||||||
$scope.deleteField = function (field_id){
|
$scope.deleteField = function (hashKey){
|
||||||
|
console.log($scope.form.form_fields);
|
||||||
for(var i = 0; i < $scope.form.form_fields.length; i++){
|
for(var i = 0; i < $scope.form.form_fields.length; i++){
|
||||||
if($scope.form.form_fields[i].field_id === field_id){
|
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;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
$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);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$scope.hover = function(field) {
|
||||||
|
// Shows/hides the delete button on hover
|
||||||
|
return field.showTools = !field.showTools;
|
||||||
|
};
|
||||||
|
|
||||||
// add new option to the field
|
// add new option to the field
|
||||||
$scope.addOption = function (field){
|
$scope.addOption = function (field){
|
||||||
|
|
|
@ -31,10 +31,6 @@ angular.module('forms').service('FormFields', [
|
||||||
name : 'checkbox',
|
name : 'checkbox',
|
||||||
value : 'Checkbox'
|
value : 'Checkbox'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name : 'hidden',
|
|
||||||
value : 'Hidden'
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -11,10 +11,10 @@
|
||||||
<i class="fa fa-pencil-square-o" ng-switch-when="textfield"></i>
|
<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-th-list" ng-switch-when="dropdown"></i>
|
||||||
<i class="fa fa-calendar" ng-switch-when="date"></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-check-square-o" ng-switch-when="checkbox"></i>
|
||||||
<i class="fa fa-dot-circle-o" ng-switch-when="radio"></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-envelope-o" ng-switch-when="email"></i>
|
||||||
<i class="fa fa-pencil-square-o" ng-switch-when="textarea"></i>
|
<i class="fa fa-pencil-square" ng-switch-when="textarea"></i>
|
||||||
</span>
|
</span>
|
||||||
<span style="padding-left:1em;">{{type.value}}</span>
|
<span style="padding-left:1em;">{{type.value}}</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -23,91 +23,110 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-sm-3 col-md-8 current-fields">
|
<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> -->
|
||||||
<p ng-show="form.form_fields.length == 0">No fields added yet.</p>
|
<div class="row">
|
||||||
<accordion close-others="accordion.oneAtATime">
|
<div class="col-xs-10">
|
||||||
<accordion-group ng-repeat="field in form.form_fields" is-open="accordion[$index].isOpen">
|
<accordion close-others="accordion.oneAtATime">
|
||||||
<accordion-heading>
|
<accordion-group ng-repeat="field in form.form_fields" is-open="accordion[$index].isOpen" >
|
||||||
<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>
|
<accordion-heading>
|
||||||
<div class="row">
|
<span class="pull-left" ng-switch="field.fieldType">
|
||||||
<div class="span2">Field Type:</div>
|
<i class="fa fa-pencil-square-o" ng-switch-when="textfield"></i>
|
||||||
<div class="span4">{{field.fieldType}}</div>
|
<i class="fa fa-th-list" ng-switch-when="dropdown"></i>
|
||||||
</div>
|
<i class="fa fa-calendar" ng-switch-when="date"></i>
|
||||||
<div class="row">
|
<i class="fa fa-check-square-o" ng-switch-when="checkbox"></i>
|
||||||
<div class="span2">Field Title:</div>
|
<i class="fa fa-dot-circle-o" ng-switch-when="radio"></i>
|
||||||
<div class="span4"><input type="text" ng-model="field.title" value="{{field.title}}"></div>
|
<i class="fa fa-envelope-o" ng-switch-when="email"></i>
|
||||||
</div>
|
<i class="fa fa-pencil-square" ng-switch-when="textarea"></i>
|
||||||
<div class="row">
|
</span>
|
||||||
<div class="span2">Field Default Value:</div>
|
<span style="padding-left:1.2em;">{{field.title}}</span>
|
||||||
<div class="span4"><input type="text" ng-model="field.fieldValue" value="{{field.fieldValue}}"></div>
|
|
||||||
</div>
|
</accordion-heading>
|
||||||
<div class="row" ng-show="showAddOptions(field)">
|
<div class="accordion-edit">
|
||||||
<div class="span2">Field Options:</div>
|
<!-- <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="span6">
|
|
||||||
<div ng-repeat="option in field.field_options">
|
<div class="clear"></div> <hr>
|
||||||
<input type="text" ng-model="option.option_title" value="{{option.option_title}}">
|
<div class="row">
|
||||||
<a class="btn btn-danger btn-mini right" type="button" ng-click="deleteOption(field, option)"><i class="icon-minus icon-white"></i></a>
|
<div class="span2">Field Type:</div>
|
||||||
<span class="label label-inverse">Value: {{ option.option_value }}</span>
|
<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>
|
||||||
<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>
|
</accordion-group>
|
||||||
|
</accordion>
|
||||||
<div class="clear"></div> <hr>
|
</div>
|
||||||
|
<div class="col-xs-1" style="padding:0 5px;" >
|
||||||
<div class="row">
|
<div class="panel-group tool-panel text-center">
|
||||||
<div class="span2">Required:</div>
|
<div class="panel panel-default" ng-repeat="field in form.form_fields" ng-mouseenter="hover(field)" ng-mouseleave="hover(field)">
|
||||||
<div class="span4">
|
<div class="panel-heading" style="padding: 10px 10px;" ng-click="deleteField(field.$$hashKey)">
|
||||||
<label>
|
<span class="text-center">
|
||||||
<input type="radio" ng-value="true" ng-selected ng-model="field.required"/>
|
<a href="" class="fa fa-trash-o"></a>
|
||||||
Yes
|
</span>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</accordion-group>
|
</div>
|
||||||
</accordion>
|
<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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue