Feature to change user status (includes deactivation)

src/app/users/status-update-dialog.html

@@ -0,0 +1,35 @@
+<div class="inmodal">
+  <div class="modal-header" style="padding:14px"></div>
+  <div class="modal-body">
+    <div class="row">
+      <form role="form" name="statusForm">
+        <div class="col-md-12" ng-include src="'components/alert/alert.html'"></div>
+        <div class="form-group">
+          <label>New status {{form.status}}</label>
+          <select class="form-control m-b" ng-model="form.status" ng-disabled="form.isLoading">
+            <option value="A">Active</option>
+            <option value="5">Inactive - Duplicate account</option>
+            <option value="4">Inactive - Member wanted account removed</option>
+            <option value="6">Inactive - Deactivated for cheating</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Comment (optional)</label>
+          <input ng-model="form.comment" type="text" class="form-control" ng-disabed="form.isLoading">
+        </div>
+      </form>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-white" ng-click="cancel()" ng-disabed="form.isLoading">
+      Close
+    </button>
+    <button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="!statusForm.$dirty || form.isLoading">
+      Save
+    </button>
+  </div>
+  <div style="text-align:center;position:absolute;top:65px;left:0;width:100%;height:100%;zIndex:1;"
+      ng-show="form.isLoading">
+    <img src="assets/images/loading.gif"/>
+  </div>
+</div>

src/app/users/users.controller.js

@@ -6,6 +6,13 @@ module.controller('users.UserSearchController', [
   '$scope', '$rootScope', '$timeout', '$state', '$modal', 'AuthService','UserService',
     function ($scope, $rootScope, $timeout, $state, $modal, $authService, $userService) {
 
+      // footable
+      angular.element(document).ready(function () {
+        $('.footable').footable({
+            addRowToggle: true
+        });
+      });
+
       // auth
       $scope.authorized = function() {
         return $authService.isLoggedIn();
@@ -29,6 +36,8 @@ module.controller('users.UserSearchController', [
 
       $scope.search = function() {
 
+        $scope.$broadcast('alert.ClearAll', {});
+
         var handle = $scope.formSearch.handle,
             email  = $scope.formSearch.email,
             active = $scope.formSearch.getActive(),
@@ -61,9 +70,12 @@ module.controller('users.UserSearchController', [
           function(users) {
             $scope.users = users;
             $scope.formSearch.setLoading(false);
+            $timeout(function(){
+              $('.footable').trigger('footable_redraw');
+              }, 100);
           },
           function(error) {
-            $scope.$broadcast('AlertIssued', {type:'danger', message:error.error});
+            $scope.$broadcast('alert.AlertIssued', {type:'danger', message:error.error});
             $scope.formSearch.setLoading(false);
           }
         );
@@ -76,10 +88,22 @@ module.controller('users.UserSearchController', [
         return isoDateText && isoDateText.replace("T"," ").replace(".000Z","");
       };
 
+      var statusLabels = {
+        'A': 'Active',
+        'U': 'Unverified',
+        '4': 'Deactivated(User request)',
+        '5': 'Deactivated(Duplicate account)',
+        '6': 'Deactivated(Cheating account)'
+      };
+      $scope.statusLabel = function(status) {
+        return statusLabels[status] || 'Unknown';
+      };
+
       $scope.activate = function(index) {
+        $scope.$broadcast('alert.ClearAll', {});
         var user = $scope.users[index];
         if(!user.credential || !user.credential.activationCode) {
-          $scope.$broadcast('AlertIssued',
+          $scope.$broadcast('alert.AlertIssued',
             {type:'danger', message:'The user \'' + user.handle + '\' is invalid. Unable to activate it.'});
           return;
         };
@@ -88,34 +112,40 @@ module.controller('users.UserSearchController', [
           $userService.activate(user.credential.activationCode).then(
             function(responseUser) {
               user.active = responseUser.active;
+              user.status = responseUser.status;
               $scope.formSearch.setLoading(false);
             },
             function(error) {
-              $scope.$broadcast('AlertIssued', {type:'danger', message:error.error});
+              $scope.$broadcast('alert.AlertIssued', {type:'danger', message:error.error});
               $scope.formSearch.setLoading(false);
             }
           );
         }
       };
 
-      $scope.deactivate = function(index) {
+      $scope.openDeactivateDialog = function(index) {
         var user = $scope.users[index];
 
-        if(window.confirm('Are you sure you want to deactivate user \'' + user.handle + '\'?')) {
-          // dummy
-          user.active = false;
-        }
+        //if(window.confirm('Are you sure you want to deactivate user \'' + user.handle + '\'?')) {
+        var modalInstance = $modal.open({
+          size: 'sm',
+          templateUrl: 'app/users/status-update-dialog.html',
+          controller: 'users.StatusUpdateDialogController',
+          resolve: {
+						user: function(){ return $scope.users[index]; }
+					}
+        });
       };
 
-      $scope.openDialog = function(index) {
-          var modalInstance = $modal.open({
-              size: 'sm',
-              templateUrl: 'app/users/user-edit-dialog.html',
-              controller: 'users.UserEditDialogController',
-              resolve: {
-						    user: function(){ return $scope.users[index]; }
-					    }
-          });
+      $scope.openEditDialog = function(index) {
+        var modalInstance = $modal.open({
+          size: 'sm',
+          templateUrl: 'app/users/user-edit-dialog.html',
+          controller: 'users.UserEditDialogController',
+          resolve: {
+				    user: function(){ return $scope.users[index]; }
+			    }
+        });
       };
     }
 ]);
@@ -142,6 +172,7 @@ module.controller('users.UserEditDialogController', [
       };
 
       $scope.save = function() {
+        $scope.$broadcast('alert.ClearAll', {});
         if(window.confirm('Are you sure you want to save changes?')) {
           $scope.form.setLoading(true);
           // dummy
@@ -155,11 +186,48 @@ module.controller('users.UserEditDialogController', [
           }, 1200);
         }
       }
+    }
+]);
 
-      $scope.addAlert = function(index) {
-        //$scope.alerts.push({message: 'Another alert!'});
-        $scope.$broadcast('AlertIssued', {type:'danger', message:'TEST!!!'});
-      }
+module.controller('users.StatusUpdateDialogController', [
+  '$scope', '$rootScope', '$timeout', '$state', '$modalInstance', 'AuthService', 'UserService', 'user',
+    function ($scope, $rootScope, $timeout, $state, $modalInstance, $authService, $userService, user) {
+
+      $scope.form = {
+        status  : user.status,
+        comment : null,
+        isLoading : false,
+        setLoading: function(loading) {
+          this.isLoading = loading;
+        }
+      };
 
+      $scope.cancel = function() {
+        $modalInstance.close();
+      };
+
+      $scope.save = function() {
+        $scope.$broadcast('alert.ClearAll', {});
+        if(user.status === $scope.form.status) {
+          $scope.$broadcast('alert.AlertIssued', {type:'danger', message:'Status not changed.'});
+          return;
+        }
+        if(window.confirm('Are you sure you want to save changes?')) {
+          $scope.form.setLoading(true);
+          $userService.updateStatus(user.id, $scope.form.status, $scope.form.comment).then(
+            function(responseUser) {
+              user.active = responseUser.active;
+              user.status = responseUser.status;
+              $scope.form.setLoading(false);
+              $modalInstance.close();
+            },
+            function(error) {
+              $scope.$broadcast('alert.AlertIssued', {type:'danger', message:error.error});
+              $scope.form.setLoading(false);
+            }
+          );
+
+        }
+      }
     }
 ]);

src/app/users/users.html

@@ -69,11 +69,14 @@ <h2>Members</h2>
           <table class="footable table table-stripped toggle-arrow-tiny" data-page-size="50">
               <thead>
               <tr>
-                  <th data-type="numeric" data-toggle="true">User ID</th>
+                  <th data-toggle="true" data-type="numeric">User ID</th>
                   <th>Handle</th>
                   <th>Email</th>
-                  <th>Registred at</th>
-                  <th>Activation Code</th>
+                  <th data-hide="all">Name</th>
+                  <th data-hide="all">Status</th>
+                  <th data-hide="all">Created at</th>
+                  <th data-hide="all">Modified at</th>
+                  <th data-hide="all">Activation Code</th>
                   <th>Active</th>
                   <th data-sort-ignore="true">Action</th>
               </tr>
@@ -84,19 +87,22 @@ <h2>Members</h2>
                   <td>{{user.id}}</td>
                   <td>{{user.handle}}</td>
                   <td>{{user.email}}</td>
+                  <td>{{user.firstName}} {{user.lastName}}</td>
+                  <td>{{statusLabel(user.status)}}</td>
                   <td>{{format(user.createdAt)}}</td>
+                  <td>{{format(user.modifiedAt)}}</td>
                   <td>{{user.credential.activationCode}}</td>
                   <td data-value="{{user.active}}">
                     <a href="#" ng-show="user.active"><i class="fa fa-check text-navy"></i></a>
                   </td>
                   <td>
-                    <a data-toggle="modal" class="btn btn-sm btn-primary" ng-click="openDialog($index)">
+                    <a data-toggle="modal" class="btn btn-sm btn-primary" ng-click="openEditDialog($index)">
                       EDIT
                     </a>
                     <a class="btn btn-sm btn-success" ng-show="!user.active" ng-click="activate($index)">
                       Activate
                     </a>
-                    <a class="btn btn-sm btn-danger" ng-show="user.active" disabled="disabled"> <!-- ng-click="deactivate($index)" -->
+                    <a class="btn btn-sm btn-danger" ng-show="user.active" ng-click="openDeactivateDialog($index)">
                       Deactivate
                     </a>
                   </td>

src/app/users/users.service.js

@@ -4,6 +4,7 @@ angular.module('supportAdminApp')
   .factory('UserService', ['$q','$http', 'API_URL',
     function ($q, $http, API_URL) {
       // local dev
+      //var API_URL = 'http://local.topcoder-dev.com:8080';
       return ({
 
         /** find user by ID */
@@ -51,7 +52,7 @@ angular.module('supportAdminApp')
           var opts = options || {};
           var query = "";
           angular.forEach({
-            "fields": opts.fields || "id,handle,email,active,credential,firstName,lastName,createdAt,modifiedAt",
+            "fields": opts.fields || "id,handle,email,active,status,credential,firstName,lastName,createdAt,modifiedAt",
             "filter": opts.filter
           //"limit" : null,
           //"offset": null,
@@ -127,6 +128,43 @@ angular.module('supportAdminApp')
               return $q.reject(err);
             }
           );
-        } // activate()
+        }, // activate()
+
+        updateStatus: function(userId, status, comment) {
+
+          var param = comment ? '?comment=' + encodeURIComponent(comment) : '';
+          var request = $http({
+            method: 'PATCH',
+            url: API_URL + '/v3/users/'+userId+'/status/'+status+param,
+            headers: {
+              "Content-Type":"application/json"
+            },
+            data: {}
+          });
+
+          return request.then(
+            function(response) {
+              console.log(response);
+              return response.data.result.content;
+            },
+            function(error) {
+              console.log(error);
+              var err;
+              if(error && error.data && error.data.result) {
+                err = {
+                  status: error.status,
+                  error : error.data.result.content
+                };
+              }
+              if(!err) {
+                err = {
+                  status: error.status,
+                  error : error.statusText
+                };
+              }
+              return $q.reject(err);
+            }
+          );
+        } // updateStatus()
       });
     }]);

src/components/alert/alert.controller.js

@@ -7,14 +7,18 @@ module.controller('AlertController', ['$scope', '$rootScope',
 
       $scope.closeAlert = function(index) {
         $scope.alerts.splice(index, 1);
-      }
+      };
 
       $scope.addAlert = function(alert) {
         $scope.alerts.push(alert);
-      }
+      };
 
-      $scope.$on('AlertIssued', function(event, alert){
+      $scope.$on('alert.AlertIssued', function(event, alert){
         $scope.addAlert(alert);
 			});
+
+      $scope.$on('alert.ClearAll', function(event, alert){
+        $scope.alerts.length = 0;
+      });
     }
   ]);