Merge pull request #1109 from coreos-inc/commonlistgrid

Create a common repo-list-view control and use it everywhere

static/css/directives/ui/repo-list-view.css

@@ -0,0 +1,4 @@
+.repo-list-view .btn-group {
+  float: right;
+  margin-bottom: 10px;
+}

static/directives/repo-list-grid.html

@@ -29,7 +29,7 @@
                     <span class="repo-icon repo-circle no-background" repo="repository"></span>
                     <a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}" class="repo-panel-repo-link"
                        data-repo="{{repository.namespace}}/{{ repository.name }}">
-                       {{ repository.namespace }}/{{ repository.name }}
+                       <span ng-show="!hideNamespaces">{{ repository.namespace }}/</span>{{ repository.name }}
                     </a>
                   </div>
                   <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">

static/directives/repo-list-table.html

@@ -1,7 +1,8 @@
 <div class="repo-list-table-element">
   <div class="cor-loader" ng-if="isLoading"></div>
   <div ng-if="orderedRepositories.length == 0 && !isLoading">
-    <div class="empty-primary-msg">You do not have any viewable repositories.</div>
+    <div class="empty-primary-msg" ng-if="namespaces.length != 1">You do not have any viewable repositories.</div>
+    <div class="empty-primary-msg" ng-if="namespaces.length == 1">This namespace doesn't have any viewable repositories.</div>
     <div class="empty-secondary-msg">Either no repositories exist yet or you may not have permission to view any. If you have permission, try <a href="/new">creating a new repository</a>.</div>
   </div>
 

static/directives/repo-list-view.html

@@ -0,0 +1,38 @@
+<div class="repo-list-view-element">
+  <!-- Toggle -->
+  <div class="repo-list-toggleb btn-group">
+    <i class="btn btn-default fa fa-th-large" ng-class="!showAsList ? 'active' : ''"
+       ng-click="setShowAsList(false)" title="Grid View" data-container="body" bs-tooltip></i>
+    <i class="btn btn-default fa fa-th-list" ng-class="showAsList ? 'active' : ''"
+       ng-click="setShowAsList(true)" title="List View" data-container="body" bs-tooltip></i>
+  </div>
+
+  <div ng-transclude/>
+
+  <!-- Table View -->
+  <div ng-if="showAsList">
+    <div class="repo-list-table" repositories-resources="resources" namespaces="namespaces"
+               star-toggled="starToggled({'repository': repository})">
+    </div>
+  </div>
+
+  <!-- Grid View -->
+  <div ng-if="!showAsList">
+    <!-- Starred Repository Listing -->
+    <div class="repo-list-grid" repositories-resource="starredRepositories"
+         starred="true"
+         star-toggled="starToggled({'repository': repository})"
+         ng-if="starredRepositories">
+    </div>
+
+    <!-- User and Org Repository Listings -->
+    <div ng-repeat="namespace in namespaces">
+      <div class="repo-list-grid" repositories-resource="namespace.repositories"
+           starred="false" namespace="namespace"
+           star-toggled="starToggled({'repository': repository})"
+           hide-title="namespaces.length == 1"
+           hide-namespaces="namespaces.length == 1">
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -13,7 +13,8 @@ angular.module('quay').directive('repoListGrid', function () {
       starred: '=starred',
       namespace: '=namespace',
       starToggled: '&starToggled',
-      hideTitle: '=hideTitle'
+      hideTitle: '=hideTitle',
+      hideNamespaces: '=hideNamespaces'
     },
     controller: function($scope, $element, UserService) {
       $scope.isOrganization = function(namespace) {

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

@@ -10,7 +10,8 @@ angular.module('quay').directive('repoListTable', function () {
     restrict: 'C',
     scope: {
       'repositoriesResources': '=repositoriesResources',
-      'namespaces': '=namespaces'
+      'namespaces': '=namespaces',
+      'starToggled': '&starToggled'
     },
     controller: function($scope, $element, $filter) {
       var orderBy = $filter('orderBy');
@@ -59,7 +60,7 @@ angular.module('quay').directive('repoListTable', function () {
       $scope.getAvatarData = function(namespace) {
         var found = {};
         $scope.namespaces.forEach(function(current) {
-          if (current.name == namespace) {
+          if (current.name == namespace || current.username == namespace) {
             found = current.avatar;
           }
         });

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

@@ -0,0 +1,38 @@
+/**
+ * An element that displays a list (grid or table) of repositories.
+ */
+angular.module('quay').directive('repoListView', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/repo-list-view.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      namespaces: '=namespaces',
+      starredRepositories: '=starredRepositories',
+      starToggled: '&starToggled',
+    },
+    controller: function($scope, $element, CookieService) {
+      $scope.resources = [];
+      $scope.showAsList = CookieService.get('quay.repoview') == 'list';
+
+      $scope.$watch('namespaces', function(namespaces) {
+        if (!namespaces) { return; }
+
+        $scope.resources = [];
+        namespaces.forEach(function(namespace) {
+          if (namespace && namespace.repositories) {
+            $scope.resources.push(namespace.repositories);
+          }
+        });
+      }, true);
+
+      $scope.setShowAsList = function(value) {
+        $scope.showAsList = value;
+        CookieService.putPermanent('quay.repoview', value ? 'list' : 'grid');
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/pages/org-view.js

@@ -13,6 +13,7 @@
   function OrgViewCtrl($scope, $routeParams, $timeout, ApiService, UIService, AvatarService) {
     var orgname = $routeParams.orgname;
 
+    $scope.namespace = orgname;
     $scope.showLogsCounter = 0;
     $scope.showApplicationsCounter = 0;
     $scope.showInvoicesCounter = 0;
@@ -31,10 +32,12 @@
     var loadRepositories = function() {
       var options = {
         'namespace': orgname,
-        'public': true
+        'public': true,
+        'last_modified': true,
+        'popularity': true
       };
 
-      $scope.repositoriesResource = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
+      $scope.organization.repositories = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
         return resp.repositories;
       });
     };

static/js/pages/repo-list.js

@@ -11,14 +11,13 @@
   }]);
 
 
-  function RepoListCtrl($scope, $sanitize, $q, Restangular, UserService, ApiService, CookieService, Features) {
+  function RepoListCtrl($scope, $sanitize, $q, Restangular, UserService, ApiService, Features) {
     $scope.namespace = null;
     $scope.page = 1;
     $scope.publicPageCount = null;
     $scope.allRepositories = {};
     $scope.loading = true;
     $scope.resources = [];
-    $scope.showAsList = CookieService.get('quay.repoview') == 'list';
     $scope.Features = Features;
 
     // When loading the UserService, if the user is logged in, create a list of
@@ -46,11 +45,6 @@
       }
     });
 
-    $scope.setShowAsList = function(value) {
-      $scope.showAsList = value;
-      CookieService.putPermanent('quay.repoview', value ? 'list' : 'grid');
-    };
-
     $scope.isOrganization = function(namespace) {
       return !!UserService.getOrganization(namespace);
     };

static/js/pages/user-view.js

@@ -19,6 +19,7 @@
     $scope.changeEmailInfo = {};
     $scope.changePasswordInfo = {};
     $scope.hasSingleSignin = ExternalLoginService.hasSingleSignin();
+    $scope.context = {};
 
     UserService.updateUserIn($scope);
 
@@ -26,16 +27,18 @@
       var options = {
         'public': true,
         'namespace': username,
+        'last_modified': true,
+        'popularity': true
       };
 
-      $scope.repositoriesResource = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
+      $scope.context.viewuser.repositories = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
         return resp.repositories;
       });
     };
 
     var loadUser = function() {
       $scope.userResource = ApiService.getUserInformationAsResource({'username': username}).get(function(user) {
-        $scope.viewuser = user;
+        $scope.context.viewuser = user;
 
         // Load the repositories.
         $timeout(function() {

static/partials/org-view.html

@@ -17,12 +17,7 @@
     </div>
 
     <div class="co-main-content-panel" ng-if="user.anonymous || !isMember">
-      <div class="repo-list-grid"
+      <div class="repo-list-view" namespaces="[organization]"></div>
-           repositories-resource="repositoriesResource"
-           starred="false"
-           namespace="namespace"
-           hide-title="true">
-      </div>
     </div>
 
     <div class="cor-tab-panel" ng-if="!user.anonymous && isMember">
@@ -65,13 +60,7 @@
       <div class="cor-tab-content">
         <!-- Repositories -->
         <div id="repos" class="tab-pane active">
-          <h3>Repositories</h3>
+          <div class="repo-list-view" namespaces="[organization]"><h3>Repositories</h3></div>
-          <div class="repo-list-grid"
-               repositories-resource="repositoriesResource"
-               starred="false"
-               namespace="namespace"
-               hide-title="true">
-          </div>
         </div>
 
         <!-- Teams -->

static/partials/repo-list.html

@@ -59,33 +59,9 @@
 
     <div class="col-lg-9 col-lg-pull-3 col-md-9 col-md-pull-3 col-sm-12">
       <div class="repo-list-panel co-main-content-panel">
-        <div class="repo-list-toggleb btn-group">
+        <div class="repo-list-view" namespaces="namespaces"
-          <i class="btn btn-default fa fa-th-large" ng-class="!showAsList ? 'active' : ''"
+             star-toggled="starToggled(repository)"
-             ng-click="setShowAsList(false)" title="Grid View" data-container="body" bs-tooltip></i>
+             starred-repositories="starred_repositories">
-          <i class="btn btn-default fa fa-th-list" ng-class="showAsList ? 'active' : ''"
-             ng-click="setShowAsList(true)" title="List View" data-container="body" bs-tooltip></i>
-        </div>
-
-        <!-- Table View -->
-        <div ng-if="showAsList">
-          <div class="repo-list-table" repositories-resources="resources" namespaces="namespaces"></div>
-        </div>
-
-        <!-- Grid View -->
-        <div ng-if="!showAsList">
-          <!-- Starred Repository Listing -->
-          <div class="repo-list-grid" repositories-resource="starred_repositories"
-               starred="true"
-               star-toggled="starToggled(repository)">
-          </div>
-
-          <!-- User and Org Repository Listings -->
-          <div ng-repeat="namespace in namespaces">
-            <div class="repo-list-grid" repositories-resource="namespace.repositories"
-                 starred="false" user="user" namespace="namespace"
-                 star-toggled="starToggled(repository)">
-            </div>
-          </div>
         </div>
       </div>
     </div>

static/partials/user-view.html

@@ -5,27 +5,23 @@
     <div class="cor-title">
       <span class="cor-title-link"></span>
       <span class="cor-title-content">
-        <span class="avatar" size="32" data="viewuser.avatar"></span>
+        <span class="avatar" size="32" data="context.viewuser.avatar"></span>
-        <span class="user-name">{{ viewuser.username }}</span>
+        <span class="user-name">{{ context.viewuser.username }}</span>
       </span>
-      <span class="cor-title-action" ng-if="viewuser.is_me">
+      <span class="cor-title-action" ng-if="context.viewuser.is_me">
-        <a href="/new/?namespace={{ viewuser.username }}">
+        <a href="/new/?namespace={{ context.viewuser.username }}">
             <i class="fa fa-plus" data-title="Create new repository"></i>
             Create New Repository
         </a>
       </span>
     </div>
 
-    <div class="co-main-content-panel user-repo-list" ng-if="!viewuser.is_me">
+    <div class="co-main-content-panel user-repo-list" ng-if="!context.viewuser.is_me">
-      <div class="repo-list-grid"
+      <div class="repo-list-view" namespaces="[context.viewuser]"></div>
-           repositories-resource="repositoriesResource"
-           starred="false"
-           namespace="namespace"
-           hide-title="true"></div>
     </div>
 
-    <div class="cor-tab-panel" ng-if="viewuser.is_me">
+    <div class="cor-tab-panel" ng-if="context.viewuser.is_me">
-      <div class="cor-tabs" quay-show="viewuser.is_me">
+      <div class="cor-tabs" quay-show="context.viewuser.is_me">
         <span class="cor-tab" tab-active="true" tab-title="Repositories" tab-target="#repos">
           <i class="fa fa-hdd-o"></i>
         </span>
@@ -56,13 +52,7 @@
       <div class="cor-tab-content">
         <!-- Repositories -->
         <div id="repos" class="tab-pane active">
-          <h3>Repositories</h3>
+          <div class="repo-list-view" namespaces="[context.viewuser]"><h3>Repositories</h3></div>
-          <div class="repo-list-grid"
-               repositories-resource="repositoriesResource"
-               starred="false"
-               namespace="namespace"
-               hide-title="true">
-          </div>
         </div>
 
         <!-- Robot Accounts -->
@@ -119,7 +109,7 @@
                     <table class="col-md-6">
                       <tr>
                         <td>Current E-mail Address:</td>
-                        <td>{{ viewuser.email }}</td>
+                        <td>{{ context.viewuser.email }}</td>
                       </tr>
                       <tr>
                         <td>New E-mail Address:</td>
@@ -133,7 +123,7 @@
                   </div>
 
                   <button class="btn btn-primary"
-                        ng-disabled="changeEmailForm.$invalid || changeEmail.email == viewuser.email"
+                        ng-disabled="changeEmailForm.$invalid || changeEmail.email == context.viewuser.email"
                         type="submit">
                     Change E-mail Address
                  </button>