From 33d768de54a4f73b4412d80932e9c315dab57b72 Mon Sep 17 00:00:00 2001
From: David Baldwynn <david.baldwin@alumni.ubc.ca>
Date: Fri, 3 Jul 2015 18:04:39 -0700
Subject: [PATCH] added deletion and duplication buttons to EditForm

---
 public/modules/forms/css/form.css             |  22 +++
 .../directives/edit-form.client.directive.js  |  20 +-
 .../services/form-fields.client.service.js    |   4 -
 .../views/directiveViews/form/edit-form.html  | 181 ++++++++++--------
 4 files changed, 140 insertions(+), 87 deletions(-)

diff --git a/public/modules/forms/css/form.css b/public/modules/forms/css/form.css
index a86df517..3855e210 100644
--- a/public/modules/forms/css/form.css
+++ b/public/modules/forms/css/form.css
@@ -21,6 +21,28 @@
     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*/
 .admin-form .tab-content .add-field {
     border-right: 1px solid #ddd;
diff --git a/public/modules/forms/directives/edit-form.client.directive.js b/public/modules/forms/directives/edit-form.client.directive.js
index 19d94f32..0c4e4ab1 100644
--- a/public/modules/forms/directives/edit-form.client.directive.js
+++ b/public/modules/forms/directives/edit-form.client.directive.js
@@ -33,14 +33,30 @@ angular.module('forms').directive('editFormDirective', ['$http', '$timeout', 'ti
                 };
 
                 // 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++){
-                        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);
+                                                
                             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
                 $scope.addOption = function (field){
diff --git a/public/modules/forms/services/form-fields.client.service.js b/public/modules/forms/services/form-fields.client.service.js
index 8cbea794..de101195 100644
--- a/public/modules/forms/services/form-fields.client.service.js
+++ b/public/modules/forms/services/form-fields.client.service.js
@@ -31,10 +31,6 @@ angular.module('forms').service('FormFields', [
 		        name : 'checkbox',
 		        value : 'Checkbox'
 		    },
-		    {
-		        name : 'hidden',
-		        value : 'Hidden'
-		    }
 		];
 	}
 		
diff --git a/public/modules/forms/views/directiveViews/form/edit-form.html b/public/modules/forms/views/directiveViews/form/edit-form.html
index 4556c6da..0c422bc9 100644
--- a/public/modules/forms/views/directiveViews/form/edit-form.html
+++ b/public/modules/forms/views/directiveViews/form/edit-form.html
@@ -11,10 +11,10 @@
                                 <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-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-o" ng-switch-when="textarea"></i>
+                                <i class="fa fa-pencil-square" ng-switch-when="textarea"></i>
                             </span>
                             <span style="padding-left:1em;">{{type.value}}</span>
                         </div>
@@ -23,91 +23,110 @@
         </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> -->
+            <!-- <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" >
 
-                        <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>
+                            <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"/>
+                                            &nbsp; Yes
+                                        </label>
+                                        <label>
+                                            <input type="radio" ng-value="false" ng-model="field.required"/>
+                                            &nbsp; 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"/>
+                                            &nbsp; Yes
+                                        </label>
+                                        <label>
+                                            <input type="radio" ng-value="false" ng-model="field.disabled"/>
+                                            &nbsp; No
+                                        </label>
+                                    </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 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"/>
-                                    &nbsp; Yes
-                                </label>
-                                <label>
-                                    <input type="radio" ng-value="false" ng-model="field.required"/>
-                                    &nbsp; 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"/>
-                                    &nbsp; Yes
-                                </label>
-                                <label>
-                                    <input type="radio" ng-value="false" ng-model="field.disabled"/>
-                                    &nbsp; No
-                                </label>
+                        </accordion-group>
+                    </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;" ng-click="deleteField(field.$$hashKey)">
+                                <span class="text-center">
+                                    <a href="" class="fa fa-trash-o"></a>
+                                </span>
                             </div>
                         </div>
                     </div>
-                </accordion-group>
-            </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;" ng-click="duplicateField(field, $index)">
+                                <span class="text-center">
+                                    <a href="" class="fa fa-files-o"></a>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>