#18: Add/update/delete groups

docs-web/src/main/webapp/src/app/docs/app.js

@@ -106,6 +106,33 @@ angular.module('docs',
           }
         }
       })
+    .state('settings.group', {
+        url: '/group',
+        views: {
+          'settings': {
+            templateUrl: 'partial/docs/settings.group.html',
+            controller: 'SettingsGroup'
+          }
+        }
+      })
+      .state('settings.group.edit', {
+        url: '/edit/:name',
+        views: {
+          'group': {
+            templateUrl: 'partial/docs/settings.group.edit.html',
+            controller: 'SettingsGroupEdit'
+          }
+        }
+      })
+      .state('settings.group.add', {
+        url: '/add',
+        views: {
+          'group': {
+            templateUrl: 'partial/docs/settings.group.edit.html',
+            controller: 'SettingsGroupEdit'
+          }
+        }
+      })
   .state('settings.vocabulary', {
     url: '/vocabulary',
     views: {

docs-web/src/main/webapp/src/app/docs/controller/SettingsGroup.js

@@ -0,0 +1,24 @@
+'use strict';
+
+/**
+ * Settings group page controller.
+ */
+angular.module('docs').controller('SettingsGroup', function($scope, $state, Restangular) {
+  /**
+   * Load groups from server.
+   */
+  $scope.loadGroups = function() {
+    Restangular.one('group').get().then(function(data) {
+      $scope.groups = data.groups;
+    });
+  };
+  
+  $scope.loadGroups();
+  
+  /**
+   * Edit a group.
+   */
+  $scope.editGroup = function(group) {
+    $state.go('settings.group.edit', { name: group.name });
+  };
+});

docs-web/src/main/webapp/src/app/docs/controller/SettingsGroupEdit.js

@@ -0,0 +1,87 @@
+'use strict';
+
+/**
+ * Settings group edition page controller.
+ */
+angular.module('docs').controller('SettingsGroupEdit', function($scope, $dialog, $state, $stateParams, Restangular, $q) {
+  /**
+   * Returns true if in edit mode (false in add mode).
+   */
+  $scope.isEdit = function() {
+    return $stateParams.name;
+  };
+  
+  /**
+   * In edit mode, load the current group.
+   */
+  if ($scope.isEdit()) {
+    Restangular.one('group', $stateParams.name).get().then(function(data) {
+      $scope.group = data;
+    });
+  }
+
+  /**
+   * Update the current group.
+   */
+  $scope.edit = function() {
+    var promise = null;
+    var group = angular.copy($scope.group);
+
+    if ($scope.isEdit()) {
+      promise = Restangular
+        .one('group', $stateParams.name)
+        .post('', group);
+    } else {
+      promise = Restangular
+        .one('group')
+        .put(group);
+    }
+    
+    promise.then(function() {
+      $scope.loadGroups();
+      if ($scope.isEdit()) {
+        $state.go('settings.group');
+      } else {
+        // Go to edit this group to add members
+        $state.go('settings.group.edit', { name: group.name });
+      }
+    });
+  };
+
+  /**
+   * Delete the current group.
+   */
+  $scope.remove = function () {
+    var title = 'Delete group';
+    var msg = 'Do you really want to delete this group?';
+    var btns = [{result:'cancel', label: 'Cancel'}, {result:'ok', label: 'OK', cssClass: 'btn-primary'}];
+
+    $dialog.messageBox(title, msg, btns, function(result) {
+      if (result == 'ok') {
+        Restangular.one('group', $stateParams.name).remove().then(function() {
+          $scope.loadGroups();
+          $state.go('settings.group');
+        }, function () {
+          $state.go('settings.group');
+        });
+      }
+    });
+  };
+
+  /**
+   * Returns a promise for typeahead group.
+   */
+  $scope.getGroupTypeahead = function($viewValue) {
+    var deferred = $q.defer();
+    Restangular.one('group')
+        .getList('', {
+          sort_column: 1,
+          asc: true
+        }).then(function(data) {
+      deferred.resolve(_.pluck(_.filter(data.groups, function(group) {
+        return group.name.indexOf($viewValue) !== -1;
+      }), 'name'));
+    });
+    return deferred.promise;
+  };
+});

docs-web/src/main/webapp/src/app/docs/controller/SettingsUserEdit.js

@@ -31,12 +31,12 @@ angular.module('docs').controller('SettingsUserEdit', function($scope, $dialog,
     
     if ($scope.isEdit()) {
       promise = Restangular
-      .one('user', $stateParams.username)
-      .post('', user);
+        .one('user', $stateParams.username)
+        .post('', user);
     } else {
       promise = Restangular
-      .one('user')
-      .put(user);
+        .one('user')
+        .put(user);
     }
     
     promise.then(function() {

docs-web/src/main/webapp/src/index.html

@@ -60,6 +60,8 @@
     <script src="app/docs/controller/SettingsLog.js" type="text/javascript"></script>
     <script src="app/docs/controller/SettingsUser.js" type="text/javascript"></script>
     <script src="app/docs/controller/SettingsUserEdit.js" type="text/javascript"></script>
+    <script src="app/docs/controller/SettingsGroup.js" type="text/javascript"></script>
+    <script src="app/docs/controller/SettingsGroupEdit.js" type="text/javascript"></script>
     <script src="app/docs/controller/SettingsVocabulary.js" type="text/javascript"></script>
     <script src="app/docs/controller/User.js" type="text/javascript"></script>
     <script src="app/docs/controller/UserProfile.js" type="text/javascript"></script>
@@ -109,7 +111,7 @@
             <a href="#/tag"><span class="glyphicon glyphicon-tags"></span> Tags</a>
           </li>
           <li ng-class="{active: $uiRoute}" ui-route="/user.*">
-            <a href="#/user"><span class="glyphicon glyphicon-user"></span> Users</a>
+            <a href="#/user"><span class="glyphicon glyphicon-user"></span> Users &amp; Groups</a>
           </li>
         </ul>
 

docs-web/src/main/webapp/src/partial/docs/settings.group.edit.html

@@ -0,0 +1,49 @@
+<img src="img/loader.gif" ng-show="!group && isEdit()" />
+
+<div ng-show="group || !isEdit()">
+  <h2 ng-show="isEdit()">Edit
+    <small>"{{ group.name }}"</small>
+  </h2>
+  <h2 ng-show="!isEdit()">Add
+    <small>group</small>
+  </h2>
+  <form class="form-horizontal" name="editGroupForm" novalidate>
+    <div class="form-group" ng-class="{ 'has-error': !editGroupForm.name.$valid, success: editGroupForm.name.$valid }">
+      <label class="col-sm-2 control-label" for="inputName">Name</label>
+  
+      <div class="col-sm-7">
+        <input name="name" type="text" id="inputName" required class="form-control"
+               ng-minlength="3" ng-maxlength="50" placeholder="Name" ng-model="group.name"/>
+      </div>
+
+      <div class="col-sm-3">
+        <span class="help-block" ng-show="editGroupForm.name.$error.required">Required</span>
+        <span class="help-block" ng-show="editGroupForm.name.$error.minlength">Too short</span>
+        <span class="help-block" ng-show="editGroupForm.name.$error.maxlength">Too long</span>
+      </div>
+    </div>
+    <div class="form-group">
+      <label class="col-sm-2 control-label" for="inputName">Parent group</label>
+
+      <div class="col-sm-7">
+        <input name="name" type="text" id="inputParent" class="form-control" autocomplete="off"
+               placeholder="Type a group name" ng-model="group.parent"
+               typeahead="group for group in getGroupTypeahead($viewValue) | filter: $viewValue"
+               typeahead-wait-ms="200" typeahead-editable="false" />
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-sm-offset-2 col-sm-10">
+        <button type="submit" class="btn btn-primary" ng-click="edit()" ng-disabled="!editGroupForm.$valid">
+          <span class="glyphicon glyphicon-pencil"></span> {{ isEdit() ? 'Edit' : 'Add' }}
+        </button>
+        <button type="button" class="btn btn-danger" ng-click="remove()" ng-show="isEdit()">
+          <span class="glyphicon glyphicon-trash"></span> Delete
+        </button>
+      </div>
+    </div>
+  </form>
+
+  <h3>Members</h3>
+  
+</div>

docs-web/src/main/webapp/src/partial/docs/settings.group.html

@@ -0,0 +1,23 @@
+<h1>Groups <small>management</small> <a class="btn btn-primary" href="#/settings/group/add">Add</a></h1>
+
+<div class="row">
+  <div class="col-md-4 well">
+    <table class="table table-striped table-hover table-users">
+      <thead>
+        <tr>
+          <th>Name</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr ng-repeat="group in groups | orderBy: 'name'" ng-click="editGroup(group)"
+            ng-class="{ active: $stateParams.name == group.name }">
+          <td>{{ group.name }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="col-md-8">
+    <div ui-view="group"></div>
+  </div>
+</div>

docs-web/src/main/webapp/src/partial/docs/settings.html

@@ -12,6 +12,7 @@
       <div class="panel-heading" ng-show="isAdmin"><strong>General settings</strong></div>
       <ul class="list-group">
         <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/user.*" href="#/settings/user">Users</a>
+        <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/group.*" href="#/settings/group">Groups</a>
         <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/vocabulary.*" href="#/settings/vocabulary">Vocabularies</a>
         <a class="list-group-item" ng-show="isAdmin" ng-class="{active: $uiRoute}" ui-route="/settings/log" href="#/settings/log">Server logs</a>
       </ul>

docs-web/src/main/webapp/src/partial/docs/settings.user.edit.html

@@ -37,6 +37,15 @@
         <span class="help-block" ng-show="editUserForm.email.$error.maxlength">Too long</span>
       </div>
     </div>
+    <div class="form-group" ng-if="user.groups.length > 0">
+      <label class="col-sm-2 control-label">Groups</label>
+
+      <div class="col-sm-7">
+        <a class="btn btn-default"
+           ng-repeat="group in user.groups"
+           href="#/settings/group/edit/{{ group }}">{{ group }}</a>
+      </div>
+    </div>
     <div class="form-group" ng-class="{ 'has-error': !editUserForm.storage_quota.$valid, success: editUserForm.storage_quota.$valid }">
       <label class="col-sm-2 control-label" for="inputQuota">Storage quota</label>
 
@@ -90,5 +99,4 @@
       </div>
     </div>
   </form>
-  <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{ alert.msg }}</alert>
 </div>

docs-web/src/main/webapp/src/partial/docs/settings.user.html

@@ -10,7 +10,8 @@
         </tr>
       </thead>
       <tbody>
-        <tr ng-repeat="user in users | orderBy: 'username'" ng-click="editUser(user)">
+        <tr ng-repeat="user in users | orderBy: 'username'" ng-click="editUser(user)"
+            ng-class="{ active: $stateParams.username == user.username }">
           <td>{{ user.username }}</td>
           <td>{{ user.create_date | date: 'yyyy-MM-dd' }}</td>
         </tr>

docs-web/src/main/webapp/src/partial/docs/user.profile.html

@@ -2,6 +2,13 @@
   <h1>{{ user.username }} <small>{{ user.email }}</small></h1>
 </div>
 
+<h4 ng-if="user.groups.length > 0">Groups</h4>
+<ul ng-if="user.groups.length > 0">
+  <li ng-repeat="group in user.groups">
+    <a href="#/group/{{ group }}">{{ group }}</a>
+  </li>
+</ul>
+
 <h4>Quota used</h4>
 <div class="row">
   <div class="col-md-6">

docs-web/src/main/webapp/src/style/main.less

@@ -71,6 +71,12 @@
 .table-users {
 	tbody tr {
     cursor: pointer;
+
+    &.active {
+      td {
+        background-color: #e8e8e8;
+      }
+    }
   }
 }