#18: Groups profile (web)

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

@@ -248,19 +248,37 @@ angular.module('docs',
     url: '/user',
     views: {
       'page': {
-        templateUrl: 'partial/docs/user.html',
+        templateUrl: 'partial/docs/usergroup.html',
-        controller: 'User'
+        controller: 'UserGroup'
       }
     }
   })
     .state('user.profile', {
       url: '/:username',
       views: {
-        'user': {
+        'sub': {
           templateUrl: 'partial/docs/user.profile.html',
           controller: 'UserProfile'
         }
       }
+    })
+  .state('group', {
+    url: '/group',
+    views: {
+      'page': {
+        templateUrl: 'partial/docs/usergroup.html',
+        controller: 'UserGroup'
+      }
+    }
+  })
+    .state('group.profile', {
+      url: '/:name',
+      views: {
+        'sub': {
+          templateUrl: 'partial/docs/group.profile.html',
+          controller: 'GroupProfile'
+        }
+      }
     });
   
   // Configuring Restangular

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

@@ -0,0 +1,11 @@
+'use strict';
+
+/**
+ * Group profile controller.
+ */
+angular.module('docs').controller('GroupProfile', function($stateParams, Restangular, $scope) {
+  // Load user
+  Restangular.one('group', $stateParams.name).get().then(function(data) {
+    $scope.group = data;
+  });
+});

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

@@ -96,7 +96,9 @@ angular.module('docs').controller('SettingsGroupEdit', function($scope, $dialog,
           sort_column: 1,
           asc: true
         }).then(function(data) {
-      deferred.resolve(_.pluck(data.users, 'username'));
+      deferred.resolve(_.pluck(_.filter(data.users, function(user) {
+        return user.username.indexOf($viewValue) !== -1;
+      }), 'username'));
     });
     return deferred.promise;
   };

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

@@ -1,19 +0,0 @@
-'use strict';
-
-/**
- * User controller.
- */
-angular.module('docs').controller('User', function(Restangular, $scope, $state) {
-  // Load users
-  Restangular.one('user/list').get({
-    sort_column: 1,
-    asc: true
-  }).then(function(data) {
-    $scope.users = data.users;
-  });
-
-  // Open a user
-  $scope.openUser = function(user) {
-    $state.go('user.profile', { username: user.username });
-  };
-});

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

@@ -0,0 +1,32 @@
+'use strict';
+
+/**
+ * User/group controller.
+ */
+angular.module('docs').controller('UserGroup', function(Restangular, $scope, $state) {
+  // Load users
+  Restangular.one('user/list').get({
+    sort_column: 1,
+    asc: true
+  }).then(function(data) {
+    $scope.users = data.users;
+  });
+
+  // Load groups
+  Restangular.one('group').get({
+    sort_column: 1,
+    asc: true
+  }).then(function(data) {
+    $scope.groups = data.groups;
+  });
+
+  // Open a user
+  $scope.openUser = function(user) {
+    $state.go('user.profile', { username: user.username });
+  };
+
+  // Open a group
+  $scope.openGroup = function(group) {
+    $state.go('group.profile', { name: group.name });
+  };
+});

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

@@ -63,8 +63,9 @@
     <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/UserGroup.js" type="text/javascript"></script>
     <script src="app/docs/controller/UserProfile.js" type="text/javascript"></script>
+    <script src="app/docs/controller/GroupProfile.js" type="text/javascript"></script>
     <script src="app/docs/service/User.js" type="text/javascript"></script>
     <script src="app/docs/service/Tag.js" type="text/javascript"></script>
     <script src="app/docs/filter/Newline.js" type="text/javascript"></script>

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

@@ -0,0 +1,22 @@
+<div class="page-header">
+  <h1>{{ group.name }}</h1>
+</div>
+
+<h4>Members</h4>
+<ul>
+  <li ng-repeat="member in group.members">
+    <a href="#/user/{{ member }}">{{ member }}</a>
+  </li>
+  <li ng-if="group.members.length == 0">No member</li>
+</ul>
+
+<div ng-if="userInfo.base_functions.indexOf('ADMIN') != -1">
+  <h4>Related links</h4>
+  <ul>
+    <li>
+      <a ng-href="#/settings/group/edit/{{ group.name }}">
+        Edit {{ group.name }} group
+      </a>
+    </li>
+  </ul>
+</div>

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

@@ -52,7 +52,7 @@
         <div class="col-sm-7">
           <input name="member" type="text" id="inputMember" class="form-control" ng-model="member" placeholder="Search a user"
                  typeahead="user for user in getUserTypeahead($viewValue)" typeahead-on-select="addMember($item)"
-                 typeahead-wait-ms="200" typeahead-editable="false"/>
+                 typeahead-wait-ms="200" typeahead-editable="false" autocomplete="off" />
         </div>
       </div>
 

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

@@ -29,7 +29,7 @@
   </li>
   <li ng-if="userInfo.base_functions.indexOf('ADMIN') != -1">
     <a ng-href="#/settings/user/edit/{{ user.username }}">
-      Edit {{ user.username}} user
+      Edit {{ user.username }} user
     </a>
   </li>
 </ul>

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

@@ -3,12 +3,30 @@
     <div class="well">
       <p class="input-group">
         <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
-        <input type="search" class="form-control" placeholder="Search" ng-model="search">
+        <input type="search" class="form-control" placeholder="Search in groups" ng-model="searchGroup">
       </p>
 
       <table class="row table table-striped table-hover">
         <tbody>
-        <tr class="pointer" ng-repeat="user in users | filter: search"
+        <tr class="pointer" ng-repeat="group in groups | filter: searchGroup"
+            ng-click="openGroup(group)" ng-class="{ active: $stateParams.name == group.name }">
+          <td class="col-xs-4">
+            {{ group.name }}
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="well">
+      <p class="input-group">
+        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
+        <input type="search" class="form-control" placeholder="Search in users" ng-model="searchUser">
+      </p>
+
+      <table class="row table table-striped table-hover">
+        <tbody>
+        <tr class="pointer" ng-repeat="user in users | filter: searchUser"
             ng-click="openUser(user)" ng-class="{ active: $stateParams.username == user.username }">
           <td class="col-xs-4">
             <span class="glyphicon glyphicon-user"></span>
@@ -22,6 +40,6 @@
   </div>
 
   <div class="col-md-8">
-    <div ui-view="user"></div>
+    <div ui-view="sub"></div>
   </div>
 </div>

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

@@ -12,6 +12,15 @@
   background-color: #263238;
 }
 
+// Selected table line
+.table tr {
+  &.active {
+    td {
+      background-color: #e8e8e8 !important;
+    }
+  }
+}
+
 // Documents list
 .table-documents {
 	thead th {
@@ -20,12 +29,6 @@
 	
 	tbody tr {
     cursor: pointer;
-
-    &.active {
-      td {
-        background-color: #e8e8e8;
-      }
-    }
 	}
 	
 	.cell-tags {
@@ -71,12 +74,6 @@
 .table-users {
 	tbody tr {
     cursor: pointer;
-
-    &.active {
-      td {
-        background-color: #e8e8e8;
-      }
-    }
   }
 }