Start on new org view

static/js/directives/ui/repo-list-grid.js

@@ -11,9 +11,9 @@ angular.module('quay').directive('repoListGrid', function () {
     scope: {
       repositoriesResource: '=repositoriesResource',
       starred: '=starred',
-      user: "=user",
       namespace: '=namespace',
-      starToggled: '&starToggled'
+      starToggled: '&starToggled',
+      hideTitle: '=hideTitle'
     },
     controller: function($scope, $element, UserService) {
       $scope.isOrganization = function(namespace) {

static/js/directives/ui/teams-manager.js

@@ -0,0 +1,82 @@
+/**
+ * Element for managing the teams of an organization.
+ */
+angular.module('quay').directive('teamsManager', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/teams-manager.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'organization': '=organization'
+    },
+    controller: function($scope, $element, ApiService, CreateService) {
+      $scope.TEAM_PATTERN = TEAM_PATTERN;
+      $scope.teamRoles = [
+          { 'id': 'member', 'title': 'Member', 'kind': 'default' },
+          { 'id': 'creator', 'title': 'Creator', 'kind': 'success' },
+          { 'id': 'admin', 'title': 'Admin', 'kind': 'primary' }
+      ];
+
+      $scope.setRole = function(role, teamname) {
+        var previousRole = $scope.organization.teams[teamname].role;
+        $scope.organization.teams[teamname].role = role;
+
+        var params = {
+          'orgname': $scope.organization.name,
+          'teamname': teamname
+        };
+
+        var data = $scope.organization.teams[teamname];
+
+        var errorHandler = ApiService.errorDisplay('Cannot update team', function(resp) {
+          $scope.organization.teams[teamname].role = previousRole;
+        });
+
+        ApiService.updateOrganizationTeam(data, params).then(function(resp) {
+        }, errorHandler);
+      };
+
+      $scope.createTeam = function(teamname) {
+        if (!teamname) {
+          return;
+        }
+
+        if ($scope.organization.teams[teamname]) {
+          $('#team-' + teamname).removeClass('highlight');
+          setTimeout(function() {
+            $('#team-' + teamname).addClass('highlight');
+          }, 10);
+          return;
+        }
+
+        var orgname = $scope.organization.name;
+        CreateService.createOrganizationTeam(ApiService, orgname, teamname, function(created) {
+          $scope.organization.teams[teamname] = created;
+        });
+      };
+
+      $scope.askDeleteTeam = function(teamname) {
+        bootbox.confirm('Are you sure you want to delete team ' + teamname + '?', function(resp) {
+          if (resp) {
+            $scope.deleteTeam(teamname);
+          }
+        });
+      };
+
+      $scope.deleteTeam = function(teamname) {
+        var params = {
+          'orgname': $scope.organization.name,
+          'teamname': teamname
+        };
+
+        ApiService.deleteOrganizationTeam(null, params).then(function() {
+          delete $scope.organization.teams[teamname];
+        }, ApiService.errorDisplay('Cannot delete team'));
+      };
+    }
+  };
+
+  return directiveDefinitionObject;
+});

static/js/pages/org-admin.js

@@ -1,6 +1,6 @@
 (function() {
   /**
-   * Organization admin/settings page.
+   * DEPRECATED: Organization admin/settings page.
    */
   angular.module('quayPages').config(['pages', function(pages) {
     pages.create('org-admin', 'org-admin.html', OrgAdminCtrl);

static/js/pages/org-view.js

@@ -3,10 +3,94 @@
    * Page that displays details about an organization, such as its teams.
    */
   angular.module('quayPages').config(['pages', function(pages) {
-    pages.create('org-view', 'org-view.html', OrgViewCtrl);
+    pages.create('org-view', 'org-view.html', OrgViewCtrl, {
+      'newLayout': true,
+      'title': 'Organization {{ organization.name }}',
+      'description': 'Organization {{ organization.name }}'
+    }, ['layout'])
+
+    pages.create('org-view', 'old-org-view.html', OldOrgViewCtrl, {
+    }, ['old-layout']);
   }]);
 
-  function OrgViewCtrl($rootScope, $scope, ApiService, $routeParams, CreateService) {
+  function OrgViewCtrl($scope, $routeParams, $timeout, ApiService, UIService) {
+    var orgname = $routeParams.orgname;
+
+    $scope.showLogsCounter = 0;
+    $scope.showApplicationsCounter = 0;
+    $scope.showInvoicesCounter = 0;
+    $scope.changingOrganization = false;
+
+    $scope.$watch('organizationEmail', function(e) {
+      UIService.hidePopover('#changeEmailForm');
+    });
+
+    var loadRepositories = function() {
+      var options = {
+        'public': false,
+        'private': true,
+        'sort': true,
+        'namespace': orgname,
+      };
+
+      $scope.repositoriesResource = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
+        return resp.repositories;
+      });
+    };
+
+    var loadOrganization = function() {
+      $scope.orgResource = ApiService.getOrganizationAsResource({'orgname': orgname}).get(function(org) {
+        $scope.organization = org;
+        $scope.organizationEmail = org.email;
+        $scope.isAdmin = org.is_admin;
+        $scope.isMember = org.is_member;
+
+        // Load the repositories.
+        $timeout(function() {
+          loadRepositories();
+        }, 10);
+      });
+    };
+
+    // Load the organization.
+    loadOrganization();
+
+    $scope.showInvoices = function() {
+      $scope.showInvoicesCounter++;
+    };
+
+    $scope.showApplications = function() {
+      $scope.showApplicationsCounter++;
+    };
+
+    $scope.showLogs = function() {
+      $scope.showLogsCounter++;
+    };
+
+    $scope.changeEmail = function() {
+      UIService.hidePopover('#changeEmailForm');
+
+      $scope.changingOrganization = true;
+      var params = {
+        'orgname': orgname
+      };
+
+      var data = {
+        'email': $scope.organizationEmail
+      };
+
+      ApiService.changeOrganizationDetails(data, params).then(function(org) {
+        $scope.changingOrganization = false;
+        $scope.changeEmailForm.$setPristine();
+        $scope.organization = org;
+      }, function(result) {
+        $scope.changingOrganization = false;
+        UIService.showFormError('#changeEmailForm', result);
+      });
+    };
+  }
+
+  function OldOrgViewCtrl($rootScope, $scope, ApiService, $routeParams, CreateService) {
     var orgname = $routeParams.orgname;
 
     $scope.TEAM_PATTERN = TEAM_PATTERN;