Moving group editing to angular modal template

Fixed bug in HTML preview for templates

static/js/app/app.js

@@ -52,7 +52,6 @@ app.directive('contenteditable', function() {
         element.on('blur keyup change', function() {
           scope.$apply(read);
         });
-        read(); // initialize
  
         // Write data to the model
         function read() {

static/js/app/controllers.js

@@ -156,7 +156,7 @@ app.controller('CampaignResultsCtrl', function($scope, CampaignService, GroupSer
     }
 });
 
-app.controller('GroupCtrl', function($scope, GroupService, ngTableParams) {
+app.controller('GroupCtrl', function($scope, $modal, GroupService, ngTableParams) {
     $scope.mainTableParams = new ngTableParams({
         page: 1, // show first page
         count: 10, // count per page
@@ -201,6 +201,12 @@ app.controller('GroupCtrl', function($scope, GroupService, ngTableParams) {
             $scope.group = group;
             $scope.editGroupTableParams.reload()
         }
+        $scope.newTarget = {};
+        var modalInstance = $modal.open({
+            templateUrl: '/js/app/partials/modals/userModal.html',
+            controller: GroupModalCtrl,
+            scope: $scope
+        });
     };
 
     $scope.addTarget = function() {
@@ -244,6 +250,12 @@ app.controller('GroupCtrl', function($scope, GroupService, ngTableParams) {
     }
 })
 
+var GroupModalCtrl = function($scope, $modalInstance) {
+    $scope.cancel = function() {
+        $modalInstance.dismiss('cancel');
+    };
+}
+
 app.controller('TemplateCtrl', function($scope, $modal, TemplateService, ngTableParams) {
     $scope.mainTableParams = new ngTableParams({
         page: 1, // show first page
@@ -317,12 +329,13 @@ app.controller('TemplateCtrl', function($scope, $modal, TemplateService, ngTable
 })
 
 var TemplateModalCtrl = function($scope, $modalInstance) {
+    console.log($scope.template)
     $scope.cancel = function() {
         $modalInstance.dismiss('cancel');
     };
 };
 
-app.controller('SettingsCtrl', function($scope, $http) {
+app.controller('SettingsCtrl', function($scope, $http, $window) {
     $scope.flashes = [];
     $scope.user = user;
     $scope.errorFlash = function(message) {
@@ -356,7 +369,7 @@ app.controller('SettingsCtrl', function($scope, $http) {
         })
             .success(function(data) {
                 $scope.user.api_key = data;
-                user.api_key = data;
+                $window.user.api_key = data;
                 $scope.successFlash("API Key Successfully Reset")
             })
     }

static/js/app/partials/modals/userModal.html

@@ -0,0 +1,43 @@
+<!-- New Group Modal -->
+<div class="modal-content">
+    <div class="modal-header">
+        <button type="button" class="close" ng-click="cancel()">&times;</button>
+        <h4 class="modal-title" ng-hide="newGroup" id="groupModalLabel">Edit Group: {{group.name}}</h4>
+        <h4 class="modal-title" ng-show="newGroup" id="groupModalLabel">New Group</h4>
+    </div>
+    <div class="modal-body">
+        <label class="control-label" for="name">Name:</label>
+        <div class="form-group">
+            <input type="text" class="form-control" ng-model="group.name" placeholder="Group name" id="name" autofocus/>
+        </div>
+        <fieldset disabled>
+            <div class="form-group">
+                <button class="btn btn-danger"><i class="fa fa-plus"></i> Bulk Import Users (Coming Soon!)</button>
+            </div>
+        </fieldset>
+        <label class="control-label" for="users">Users:</label>
+        <form ng:submit="addTarget()">
+            <div class="input-group">
+                <input type="email" class="form-control" placeholder="test@example.com" id="users" ng-model="newTarget.email" />
+                <span class="input-group-btn">
+                    <button class="btn btn-primary"><i class="fa fa-plus"></i> Add</button>
+                </span>
+            </div>
+        </form>
+        <br />
+        <table ng-table="editGroupTableParams" class="table table-hover table-striped table-condensed">
+            <tbody>
+                <tr ng-repeat="target in $data" class="editable-row">
+                    <td>{{target.email}}
+                        <span ng-click="removeTarget(target)" class="remove-row"><i class="fa fa-trash-o"></i>
+                        </span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
+        <button type="button" class="btn btn-primary" ng-click="saveGroup(group)" data-dismiss="modal">Save Group</button>
+    </div>
+</div>

static/js/app/partials/templates.html

@@ -36,7 +36,7 @@
                                 <span class="sr-only">Toggle Dropdown</span>
                             </button>
                             <ul class="dropdown-menu" style="left:auto; right:0;" role="menu">
-                                <li><a ng-click="editTemplate(template)" data-toggle="modal" ng-href="#" data-target="#newTemplateModal">Edit</a>
+                                <li><a ng-click="editTemplate(template)">Edit</a>
                                 </li>
                                 <li class="divider"></li>
                                 <li><a ng-click="deleteTemplate(template)" ng-href="#">Delete</a>

static/js/app/partials/users.html

@@ -57,51 +57,4 @@
             </tbody>
         </table>
     </div>
-    <!-- New Group Modal -->
-    <div class="modal" id="newGroupModal" role="dialog" aria-labelledby="groupModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                    <h4 class="modal-title" ng-hide="newGroup" id="groupModalLabel">Edit Group: {{group.name}}</h4>
-                    <h4 class="modal-title" ng-show="newGroup" id="groupModalLabel">New Group</h4>
-                </div>
-                <div class="modal-body">
-                    <label class="control-label" for="name">Name:</label>
-                    <div class="form-group">
-                        <input type="text" class="form-control" ng-model="group.name" placeholder="Group name" id="name" autofocus/>
-                    </div>
-                    <fieldset disabled>
-                        <div class="form-group">
-                            <button class="btn btn-danger"><i class="fa fa-plus"></i> Bulk Import Users (Coming Soon!)</button>
-                        </div>
-                    </fieldset>
-                    <label class="control-label" for="users">Users:</label>
-                    <form ng:submit="addTarget()">
-                        <div class="input-group">
-                            <input type="email" class="form-control" placeholder="test@example.com" id="users" ng-model="newTarget.email" />
-                            <span class="input-group-btn">
-                                <button class="btn btn-primary"><i class="fa fa-plus"></i> Add</button>
-                            </span>
-                        </div>
-                    </form>
-                    <br />
-                    <table ng-table="editGroupTableParams" class="table table-hover table-striped table-condensed">
-                        <tbody>
-                            <tr ng-repeat="target in $data" class="editable-row">
-                                <td>{{target.email}}
-                                    <span ng-click="removeTarget(target)" class="remove-row"><i class="fa fa-trash-o"></i>
-                                    </span>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-primary" ng-click="saveGroup(group)" data-dismiss="modal">Save Group</button>
-                </div>
-            </div>
-        </div>
-    </div>
 </div>