Updated campaigns view to support ng-table pagination

Updated Edit Group modal to support ng-table pagination

static/js/app/gophish.js

@@ -1,9 +1,7 @@
 var app = angular.module('gophish', ['ngTable', 'ngResource']);
 
 app.factory('CampaignService', function($resource) {
-    return $resource('/api/campaigns/:id?api_key=' + API_KEY, {
+    return $resource('/api/campaigns/:id?api_key=' + API_KEY, {}, {
-        id: "@id"
-    }, {
         update: {
             method: 'PUT'
         }
@@ -18,20 +16,31 @@ app.factory('GroupService', function($resource) {
     });
 });
 
-app.controller('CampaignCtrl', function($scope, CampaignService) {
+app.controller('CampaignCtrl', function($scope, CampaignService, ngTableParams) {
-    CampaignService.query(function(campaigns) {
-        $scope.campaigns = campaigns
-    })
-});
-
-app.controller('GroupCtrl', function($scope, GroupService, ngTableParams) {
-
-
     $scope.tableParams = new ngTableParams({
         page: 1, // show first page
         count: 10, // count per page
         sorting: {
-            name: 'asc'     // initial sorting
+            name: 'asc' // initial sorting
+        }
+    }, {
+        total: 0, // length of data
+        getData: function($defer, params) {
+            CampaignService.query(function(campaigns) {
+                $scope.campaigns = campaigns
+                params.total(campaigns.length)
+                $defer.resolve(campaigns.slice((params.page() - 1) * params.count(), params.page() * params.count()));
+            })
+        }
+    });
+});
+
+app.controller('GroupCtrl', function($scope, GroupService, ngTableParams) {
+    $scope.mainTableParams = new ngTableParams({
+        page: 1, // show first page
+        count: 10, // count per page
+        sorting: {
+            name: 'asc' // initial sorting
         }
     }, {
         total: 0, // length of data
@@ -44,6 +53,20 @@ app.controller('GroupCtrl', function($scope, GroupService, ngTableParams) {
         }
     });
 
+    $scope.editGroupTableParams = new ngTableParams({
+        page: 1, // show first page
+        count: 10, // count per page
+        sorting: {
+            name: 'asc' // initial sorting
+        }
+    }, {
+        total: 0, // length of data
+        getData: function($defer, params) {
+            params.total($scope.group.targets.length)
+            $defer.resolve($scope.group.targets.slice((params.page() - 1) * params.count(), params.page() * params.count()));
+        }
+    });
+
     $scope.editGroup = function(group) {
         if (group === 'new') {
             $scope.newGroup = true;
@@ -56,6 +79,7 @@ app.controller('GroupCtrl', function($scope, GroupService, ngTableParams) {
         } else {
             $scope.newGroup = false;
             $scope.group = group;
+            $scope.editGroupTableParams.reload()
         }
     };
 
@@ -65,10 +89,12 @@ app.controller('GroupCtrl', function($scope, GroupService, ngTableParams) {
                 email: $scope.newTarget.email
             });
             $scope.newTarget.email = ""
+            $scope.editGroupTableParams.reload()
         }
     };
     $scope.removeTarget = function(target) {
         $scope.group.targets.splice($scope.group.targets.indexOf(target), 1);
+        $scope.editGroupTableParams.reload()
     };
     $scope.saveGroup = function(group) {
         var newGroup = new GroupService($scope.group);

templates/dashboard.html

@@ -25,18 +25,11 @@
         </div>
         &nbsp;
         <div class="row">
-            <table ng-table class="table table-hover table-striped table-bordered">
+            <table ng-table="tableParams" class="table table-hover table-striped table-bordered">
-                <thead>
-                    <tr>
-                        <th class="col-sm-1">Date</th>
-                        <th class="col-sm-2">Name</th>
-                        <th class="col-sm-1">Status</th>
-                    </tr>
-                </thead>
                 <tbody>
-                    <tr ng-repeat="campaign in campaigns" class="editable-row">
+                    <tr ng-repeat="campaign in $data" class="editable-row">
-                        <td>{{campaign.created_date | date:'medium'}}</td>
+                        <td data-title="'Created Date'" class="col-sm-1">{{campaign.created_date | date:'medium'}}</td>
-                        <td>{{campaign.name}}
+                        <td data-title="'Name'" class="col-sm-2">{{campaign.name}}
                             <div class="btn-group" style="float: right;">
                                 <button type="button" class="btn btn-primary dropdown-toggle edit-button" data-toggle="dropdown">
                                     <span class="caret" style="border-top-color:#FFFFFF"></span>
@@ -53,7 +46,7 @@
                                 </ul>
                             </div>
                         </td>
-                        <td>{{campaign.status}}</td>
+                        <td data-title="'Status'" class="col-sm-1">{{campaign.status}}</td>
                     </tr>
                 </tbody>
             </table>

templates/users.html

@@ -25,7 +25,7 @@
         </div>
         &nbsp;
         <div class="row">
-            <table ng-table="tableParams" class="table table-hover table-striped table-bordered">
+            <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
                 <tbody>
                     <tr ng-repeat="group in $data" class="editable-row">
                         <td data-title="'Name'" class="col-sm-1">{{group.name}}</td>
@@ -82,9 +82,9 @@
                         </div>
                     </form>
                     <br />
-                    <table ng-table class="table table-hover table-striped table-condensed">
+                    <table ng-table="editGroupTableParams" class="table table-hover table-striped table-condensed">
                         <tbody>
-                            <tr ng-repeat="target in group.targets" class="editable-row">
+                            <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>