Work in progress: Add the team management page

static/css/quay.css

@@ -2,6 +2,31 @@
   font-family: 'Droid Sans', sans-serif;
 }
 
+.organization-header-element {
+  padding: 10px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #eee;
+
+  font-size: 20px;
+}
+
+.organization-header-element .organization-name {
+  display: inline-block;
+  margin-left: 10px;
+}
+
+.organization-header-element .divider {
+  color: #aaa;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.organization-header-element .organization-name {
+  display: inline-block;
+  font-size: 20px;
+  margin-left: 10px;
+}
+
 .namespace-selector-dropdown .namespace {
   padding: 6px;
   padding-left: 10px;
@@ -1329,6 +1354,22 @@ p.editable:hover i {
   min-height: 50px;
 }
 
+.team-view .panel {
+  display: inline-block;
+  width: 620px;
+}
+
+.team-view .entity {
+  font-size: 1.2em;
+  min-width: 300px;
+}
+
+.team-view .entity i {
+  margin-right: 6px;
+}
+
+
+
 /* Overrides for typeahead to work with bootstrap 3. */
 
 .twitter-typeahead .tt-query,

static/directives/organization-header.html

@@ -0,0 +1,17 @@
+<div class="organization-header-element">
+  <img src="//www.gravatar.com/avatar/{{ organization.gravatar }}?s=24&amp;d=identicon">
+  <span class="organization-name" ng-show="teamName">
+    <a href="/organization/{{ organization.name }}">{{ organization.name }}</a>
+  </span>
+  <span class="organization-name" ng-show="!teamName">
+    {{ organization.name }}
+  </span>
+
+  <span ng-show="teamName">
+    <span class="divider">/</span>
+    <i class="fa fa-group"></i>
+    <span class="team-name">
+      {{ teamName }}
+    </span>
+  </span>
+</div>

static/js/app.js

@@ -233,6 +233,24 @@ quayApp.directive('repoCircle', function () {
 });
 
 
+quayApp.directive('organizationHeader', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/organization-header.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'organization': '=organization',
+      'teamName': '=teamName'
+    },
+    controller: function($scope, $element) {
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
 quayApp.directive('entitySearch', function () {
   var number = 0;
   var directiveDefinitionObject = {
@@ -244,7 +262,7 @@ quayApp.directive('entitySearch', function () {
     scope: {
       'organization': '=organization',
       'inputTitle': '=inputTitle',
-      'entitySelected': '=entitySelected'
+      'entitySelected': '=entitySelected'      
     },
     controller: function($scope, $element) {
       if (!$scope.entitySelected) { return; }

static/js/controllers.js

@@ -1173,7 +1173,40 @@ function OrgTeamsCtrl($scope, Restangular, $routeParams) {
   var orgname = $routeParams.orgname;
 }
 
-function TeamViewCtrl($scope, Restangular, $routeParams) {
+function TeamViewCtrl($rootScope, $scope, Restangular, $routeParams) {
+  $('.info-icon').popover({
+      'trigger': 'hover',
+      'html': true
+  });
+
   var orgname = $routeParams.orgname;
   var teamname = $routeParams.teamname;
+
+  $rootScope.title = 'Loading...';
+  $scope.loading = true;
+  $scope.teamname = teamname;
+
+  var loadOrganization = function() {
+    var getOrganization = Restangular.one('organization/' + orgname);
+    getOrganization.get().then(function(resp) {
+      $scope.organization = resp;
+      $scope.loading = !$scope.organization || !$scope.members;
+    }, function() {
+      $scope.loading = false;
+    });
+  };
+
+  var loadMembers = function() {
+    var getMembers = Restangular.one('organization/' + orgname + '/team/' + teamname + '/members');
+    getMembers.get().then(function(resp) {
+      $scope.members = resp.members;
+      $scope.loading = !$scope.organization || !$scope.members;
+      $rootScope.title = teamname + ' (' + orgname + ')';
+    }, function() {
+      $scope.loading = false;
+    });
+  };
+
+  loadOrganization();
+  loadMembers();
 }

static/partials/repo-admin.html

@@ -39,7 +39,7 @@
         <tr ng-repeat="(name, permission) in permissions['team']">
           <td class="team entity">
             <i class="fa fa-group"></i> 
-            <span>{{name}}</span>
+            <span><a href="/organization/{{ repo.namespace }}/teams/{{ name }}">{{name}}</a></span>
           </td>
           <td class="user-permissions">
             <div class="btn-group btn-group-sm">

static/partials/team-view.html

@@ -0,0 +1,49 @@
+<div class="loading" ng-show="loading">
+  <i class="fa fa-spinner fa-spin fa-3x"></i>
+</div>
+
+<div class="loading" ng-show="!loading && !organization">
+  No matching team found
+</div>
+
+<div class="team-view container" ng-show="!loading && organization">
+  <div class="organization-header" organization="organization" team-name="teamname"></div>
+  
+  <div class="panel panel-default">
+    <div class="panel-heading">Team Members
+      <i class="info-icon fa fa-info-circle" data-placement="left" data-content="Users that inherit all permissions delegated to this team"></i>
+    </div>
+    <div class="panel-body">
+        
+      <table class="permissions">
+        <thead>
+          <tr>
+            <td>Member</td>
+            <td></td>
+          </tr>
+        </thead>
+        
+        <tr ng-repeat="member in members">
+          <td class="user entity">
+            <i class="fa fa-user"></i> 
+            <span>{{ member.username }}</span>
+          </td>
+          <td>
+            <span class="delete-ui" tabindex="0" title="Remove User">
+              <span class="delete-ui-button" ng-click="removeMember(member.username)"><button class="btn btn-danger">Remove</button></span>
+              <i class="fa fa-remove"></i>
+            </span>
+          </td>
+        </tr>
+        
+        <tr>
+          <td colspan="2">
+            <span class="entity-search" input-title="'Add a user...'" entity-selected="addNewMember"></span>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+
+
+</div>