From cfbb45ab721289a33c5178e60fb2f676ea22078f Mon Sep 17 00:00:00 2001
From: David Baldwynn <david.baldwin@alumni.ubc.ca>
Date: Fri, 3 Jul 2015 16:47:14 -0700
Subject: [PATCH] update UI for form editing

---
 app/controllers/forms.server.controller.js    |  21 +--
 app/models/form.server.model.js               |   3 +-
 public/modules/core/css/equal-height.css      | 114 ++++++++++++++
 .../create-form.client.controller.js          | 116 +--------------
 .../view-form.client.controller.js            |  26 +++-
 public/modules/forms/css/form.css             |  13 ++
 .../configure-form.client.directive.js        |  72 +++++++++
 .../directives/edit-form.client.directive.js  |  95 ++++++++++++
 .../services/form-fields.client.service.js    |   8 +-
 .../directiveViews/form/configure-form.html   |  80 ++++++++++
 .../views/directiveViews/form/edit-form.html  | 114 ++++++++++++++
 .../forms/views/view-form.client.view.html    | 139 +++++++++++-------
 12 files changed, 616 insertions(+), 185 deletions(-)
 create mode 100644 public/modules/core/css/equal-height.css
 create mode 100644 public/modules/forms/directives/configure-form.client.directive.js
 create mode 100644 public/modules/forms/directives/edit-form.client.directive.js
 create mode 100644 public/modules/forms/views/directiveViews/form/configure-form.html
 create mode 100644 public/modules/forms/views/directiveViews/form/edit-form.html

diff --git a/app/controllers/forms.server.controller.js b/app/controllers/forms.server.controller.js
index c9b9da03..3cd580f7 100644
--- a/app/controllers/forms.server.controller.js
+++ b/app/controllers/forms.server.controller.js
@@ -138,21 +138,22 @@ exports.createSubmission = function(req, res) {
 exports.listSubmissions = function(req, res) {
 	var _form = req.form;
 
-	if(_form.submissions.length){
-		res.json(_form.submissions);
-	}else{
-		FormSubmission.find({ form: req.form }).populate('admin', 'form').exec(function(err, submissions) {
+	// if(_form.submissions.length){
+		// res.json(_form.submissions);
+	// }else{
+		FormSubmission.find({ form: req.form }).populate('admin', 'form').exec(function(err, _submissions) {
 			if (err) {
 				console.log(err);
 				res.status(400).send({
 					message: errorHandler.getErrorMessage(err)
 				});
 			} else {
-				console.log('retrieved submissions for form');
-				res.json(submissions);
+				// _form.submissions = _submissions;
+				_form.update({ $set : { submissions: _submissions }});
+
 			}
 		});
-	}
+	// }
 };
 
 /**
@@ -185,7 +186,7 @@ exports.read = function(req, res) {
 /**
  * Update a form
  */
-exports.update = function(req, res) {
+exports.update = function(req, res) { 
 	console.log('in form.update()');
 
 	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) {
 			return next(err);
 		} 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
 			form.admin.password = null;
 			form.admin.created = null;
diff --git a/app/models/form.server.model.js b/app/models/form.server.model.js
index 2a346c3e..68f813bf 100644
--- a/app/models/form.server.model.js
+++ b/app/models/form.server.model.js
@@ -124,8 +124,7 @@ FormSchema.pre('save', function (next) {
 	if(this.isModified('form_fields')){
 		if(this.submissions.length){
 			for(var i=0; i<this.submissions.length; i++){
-				submission = submissions[i];
-				submission.form_fields = submission.form_fields.concat(_.difference(this.form_fields, this._previousFormFields));
+				this.submissions[i].form_fields = submission.form_fields.concat(_.difference(this.form_fields, this._previousFormFields));
 			}
 		}
 		this.form_fields = this._previousFormFields.concat(_.difference(this.form_fields, this._previousFormFields));
diff --git a/public/modules/core/css/equal-height.css b/public/modules/core/css/equal-height.css
new file mode 100644
index 00000000..bafa16e7
--- /dev/null
+++ b/public/modules/core/css/equal-height.css
@@ -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;
+  }
+}
\ No newline at end of file
diff --git a/public/modules/forms/controllers/create-form.client.controller.js b/public/modules/forms/controllers/create-form.client.controller.js
index 5b5b6ccc..e0e19325 100644
--- a/public/modules/forms/controllers/create-form.client.controller.js
+++ b/public/modules/forms/controllers/create-form.client.controller.js
@@ -2,12 +2,10 @@
 
 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) {
-
-        $scope.isNewForm = false;
-        $scope.pdfLoading = false;
-
         $scope.form = {};
+        $scope.isNewForm = false;
         $scope.log = '';
+        $scope.pdfLoading = false;
         var _current_upload = null;
 
         // 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;
             // });
         };
-
-        //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;
-        };
     }
 ]);
diff --git a/public/modules/forms/controllers/view-form.client.controller.js b/public/modules/forms/controllers/view-form.client.controller.js
index 46108a08..3d15c45e 100644
--- a/public/modules/forms/controllers/view-form.client.controller.js
+++ b/public/modules/forms/controllers/view-form.client.controller.js
@@ -8,16 +8,38 @@ angular.module('forms').controller('ViewFormController', ['$scope', '$stateParam
         $scope.form = CurrentForm.getForm();
         $scope.submissions = undefined;
         $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
         $scope.showSubmissions = function(){
         	$scope.viewSubmissions = true;
-            if(!$scope.submissions){
+            if(!$scope.table.rows.length){
                 $http.get('/forms/'+$scope.form._id+'/submissions')
                     .success(function(data, status, headers){
                         console.log(data);
                         $scope.submissions = data;
+                        $scope.table.rows = data; 
                         console.log('form submissions successfully fetched');
                     })
                     .error(function(err){
@@ -27,6 +49,8 @@ angular.module('forms').controller('ViewFormController', ['$scope', '$stateParam
                 $http.get('/forms/'+$scope.form._id+'/submissions')
                     .success(function(data, status, headers){
                         $scope.submissions = data;
+                        $scope.table.rows = data;
+                        console.log($scope.table.rows);
                         console.log('form submissions successfully fetched');
                     })
                     .error(function(err){
diff --git a/public/modules/forms/css/form.css b/public/modules/forms/css/form.css
index ecfb28fb..a86df517 100644
--- a/public/modules/forms/css/form.css
+++ b/public/modules/forms/css/form.css
@@ -12,7 +12,20 @@
 .admin-form .form-controls .row {
     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 {
     padding-left:0.6em;
diff --git a/public/modules/forms/directives/configure-form.client.directive.js b/public/modules/forms/directives/configure-form.client.directive.js
new file mode 100644
index 00000000..8a55488f
--- /dev/null
+++ b/public/modules/forms/directives/configure-form.client.directive.js
@@ -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:'='
+            }
+        };
+    }
+]);
\ No newline at end of file
diff --git a/public/modules/forms/directives/edit-form.client.directive.js b/public/modules/forms/directives/edit-form.client.directive.js
new file mode 100644
index 00000000..19d94f32
--- /dev/null
+++ b/public/modules/forms/directives/edit-form.client.directive.js
@@ -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:'='
+            }
+        };
+    }
+]);
\ No newline at end of file
diff --git a/public/modules/forms/services/form-fields.client.service.js b/public/modules/forms/services/form-fields.client.service.js
index 3310b022..8cbea794 100644
--- a/public/modules/forms/services/form-fields.client.service.js
+++ b/public/modules/forms/services/form-fields.client.service.js
@@ -5,16 +5,12 @@ angular.module('forms').service('FormFields', [
 		this.fields = [
 		    {
 		        name : 'textfield',
-		        value : 'Textfield'
+		        value : 'Short Text'
 		    },
 		    {
 		        name : 'email',
 		        value : 'E-mail'
 		    },
-		    {
-		        name : 'password',
-		        value : 'Password'
-		    },
 		    {
 		        name : 'radio',
 		        value : 'Radio Buttons'
@@ -29,7 +25,7 @@ angular.module('forms').service('FormFields', [
 		    },
 		    {
 		        name : 'textarea',
-		        value : 'Text Area'
+		        value : 'Long Text'
 		    },
 		    {
 		        name : 'checkbox',
diff --git a/public/modules/forms/views/directiveViews/form/configure-form.html b/public/modules/forms/views/directiveViews/form/configure-form.html
new file mode 100644
index 00000000..f8de7857
--- /dev/null
+++ b/public/modules/forms/views/directiveViews/form/configure-form.html
@@ -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" />
+                &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 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>
\ No newline at end of file
diff --git a/public/modules/forms/views/directiveViews/form/edit-form.html b/public/modules/forms/views/directiveViews/form/edit-form.html
new file mode 100644
index 00000000..4556c6da
--- /dev/null
+++ b/public/modules/forms/views/directiveViews/form/edit-form.html
@@ -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"/>
+                                    &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>
+                    </div>
+                </accordion-group>
+            </accordion>
+            </div>
+        </div>
+
+</div>
\ No newline at end of file
diff --git a/public/modules/forms/views/view-form.client.view.html b/public/modules/forms/views/view-form.client.view.html
index 5e0a4cd8..515cffa8 100644
--- a/public/modules/forms/views/view-form.client.view.html
+++ b/public/modules/forms/views/view-form.client.view.html
@@ -16,59 +16,91 @@
 	</div>
 
 	<div class="row">
-		<div class="col-xs-8" ng-if="!viewSubmissions">
-			<p ng-show="form.form_fields.length == 0">No fields added yet.</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>
-			</p>
-		</div>
-		<div class="submissions-table col-xs-8" ng-if="viewSubmissions">
-			<table class="table table-striped table-hover table-condensed">
-				<thead>
-					<tr>
-						<th>
-							<input ng-checked="table.masterChecker" type="checkbox" ng-init="table.masterChecker = false"/>
-						</th>
-						<th>#</th>
-						<th data-ng-repeat="(key, value) in submissions[0].form_fields">
-							{{value.title}}
-						</th>
-						<th>
-							Time Elapsed
-						</th>
-						<th>
-							Date Submitted (UTC)
-						</th>
-						<th ng-if="form.autofillPDFs">
-							Generated PDF
-						</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr data-ng-repeat="submission in submissions">
-						<td>
-							<input ng-checked="table.rows[$index].selected" type="checkbox" ng-init="table.masterChecker = false"/>
-						</td>
-						<th class="scope">{{$index+1}}</th>
-						<td data-ng-repeat="(key, value) in submission.form_fields">
-							{{value.fieldValue}}
-						</td>
-						<td>
-							{{submission.timeElapsed}}
-						</th>
-						<td>
-							{{submission.created | date:'yyyy-MM-dd HH:mm:ss'}}
-						</td>
-						<td ng-if="submission.pdf">
-							<a href="{{submission.pdf.path}}">Generated PDF</a>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
+	<!-- <div > -->
+		<tabset class="col-xs-12">
+			<tab>
+				<tab-heading>
+					Edit Form Fields
+				</tab-heading>
+				<edit-form-directive form="form" user="user"></edit-form-directive>
+			</tab>
+			<tab>
+				<tab-heading>
+					Edit Design
+				</tab-heading>
+				<edit-form-directive form="form" user="user"></edit-form-directive>
+			</tab>
+			<tab>
+				<tab-heading>
+					Configure
+				</tab-heading>
+				<configure-form-directive form="form" user="user"></configure-form-directive>
+			</tab>
+			<tab data-ng-click="showSubmissions()">
+				<tab-heading>
+					View Submissions
+				</tab-heading>
+				<div class="submissions-table" ng-show="viewSubmissions">
+					<table class="table table-striped table-hover table-condensed">
+						<thead>
+							<tr>
+								<th>
+									<input ng-model="table.masterChecker" ng-change="toggleAllCheckers()" type="checkbox"/>
+								</th>
+								<th>#</th>
+								<th data-ng-repeat="(key, value) in submissions[0].form_fields">
+									{{value.title}}
+								</th>
+								<th>
+									Time Elapsed
+								</th>
+								<th>
+									Date Submitted (UTC)
+								</th>
+								<th ng-if="form.autofillPDFs">
+									Generated PDF
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr data-ng-repeat="row in table.rows" ng-click="rowClicked(row)">
+								<td>
+									<!-- <input ng-model="row.selected" type="checkbox"/> -->
+								</td>
+								<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="row">
@@ -90,7 +122,8 @@
 				</a>
 			</div>
 		</div>
-	</div>
+	</div> 
+	-->
 	<div class="row">
 		<small class="col-xs-12">
 			<em class="text-muted">