Update repo list and landing page to support choosing the list of repos to see (org or personal)

This commit is contained in:
Joseph Schorr 2013-11-06 21:52:31 -05:00
parent ce91190a7e
commit 4b460be4dd
4 changed files with 71 additions and 34 deletions

View file

@ -1,5 +1,8 @@
<span class="namespace-selector-dropdown"> <span class="namespace-selector-dropdown">
<span ng-show="user.organizations.length == 0">{{user.username}}</span> <span ng-show="user.organizations.length == 0">
<img src="//www.gravatar.com/avatar/{{ user.gravatar }}?s=24&d=identicon" />
<span class="namespace-name">{{user.username}}</span>
</span>
<div class="btn-group" ng-show="user.organizations.length > 0"> <div class="btn-group" ng-show="user.organizations.length > 0">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

View file

@ -143,38 +143,61 @@ function GuideCtrl($scope) {
} }
function RepoListCtrl($scope, Restangular, UserService) { function RepoListCtrl($scope, Restangular, UserService) {
$scope.namespace = null;
$scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) { $scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) {
$scope.user = currentUser; $scope.user = currentUser;
}, true); }, true);
$scope.$watch('namespace', function(namespace) {
loadMyRepos(namespace);
});
$scope.loading = true; $scope.loading = true;
$scope.public_repositories = null; $scope.public_repositories = null;
$scope.private_repositories = null; $scope.user_repositories = null;
// Load the list of personal repositories. var loadMyRepos = function(namespace) {
var repositoryPrivateFetch = Restangular.all('repository/'); if (!$scope.user || $scope.user.anonymous || !namespace) {
repositoryPrivateFetch.getList({'public': false, 'sort': true}).then(function(resp) { return;
$scope.private_repositories = resp.repositories; }
$scope.loading = !($scope.public_repositories && $scope.private_repositories);
}); $scope.loadingmyrepos = true;
// Load the list of repositories.
var params = {
'limit': 10,
'public': true,
'sort': true,
'namespace': namespace
};
var repositoryFetch = Restangular.all('repository/');
repositoryFetch.getList(params).then(function(resp) {
$scope.user_repositories = resp.repositories;
$scope.loading = !($scope.public_repositories && $scope.user_repositories);
});
};
// Load the list of public repositories. // Load the list of public repositories.
var options = {'public': true, 'private': false, 'sort': true, 'limit': 10}; var options = {'public': true, 'private': false, 'sort': true, 'limit': 10};
var repositoryPublicFetch = Restangular.all('repository/'); var repositoryPublicFetch = Restangular.all('repository/');
repositoryPublicFetch.getList(options).then(function(resp) { repositoryPublicFetch.getList(options).then(function(resp) {
$scope.public_repositories = resp.repositories; $scope.public_repositories = resp.repositories;
$scope.loading = !($scope.public_repositories && $scope.private_repositories); $scope.loading = !($scope.public_repositories && $scope.user_repositories);
}); });
} }
function LandingCtrl($scope, $timeout, $location, Restangular, UserService, KeyService) { function LandingCtrl($scope, $timeout, $location, Restangular, UserService, KeyService) {
$('.form-signup').popover(); $('.form-signup').popover();
$scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) { $scope.namespace = null;
if (!currentUser.anonymous) {
$scope.loadMyRepos();
}
$scope.$watch('namespace', function(namespace) {
loadMyRepos(namespace);
});
$scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) {
$scope.user = currentUser; $scope.user = currentUser;
}, true); }, true);
@ -207,18 +230,23 @@ function LandingCtrl($scope, $timeout, $location, Restangular, UserService, KeyS
}); });
}; };
$scope.loadMyRepos = function() { var loadMyRepos = function(namespace) {
$scope.loadingmyrepos = true; if (!$scope.user || $scope.user.anonymous || !namespace) {
return;
}
// Load the list of repositories. $scope.loadingmyrepos = true;
var params = {
'limit': 5,
'public': false,
'sort': true
};
var repositoryFetch = Restangular.all('repository/'); // Load the list of repositories.
repositoryFetch.getList(params).then(function(resp) { var params = {
'limit': 4,
'public': true,
'sort': true,
'namespace': namespace
};
var repositoryFetch = Restangular.all('repository/');
repositoryFetch.getList(params).then(function(resp) {
$scope.myrepos = resp.repositories; $scope.myrepos = resp.repositories;
$scope.loadingmyrepos = false; $scope.loadingmyrepos = false;
}); });

View file

@ -12,8 +12,9 @@
<div ng-show="loadingmyrepos"> <div ng-show="loadingmyrepos">
<i class="fa fa-spinner fa-spin fa-3x"></i> <i class="fa fa-spinner fa-spin fa-3x"></i>
</div> </div>
<span class="namespace-selector" user="user" namespace="namespace" ng-show="!loadingmyrepos && user.organizations"></span>
<div ng-show="!loadingmyrepos && myrepos.length > 0"> <div ng-show="!loadingmyrepos && myrepos.length > 0">
<h2>Your Top Repositories</h2> <h2>Top Repositories</h2>
<div class="repo-listing" ng-repeat="repository in myrepos"> <div class="repo-listing" ng-repeat="repository in myrepos">
<span class="repo-circle no-background" repo="repository"></span> <span class="repo-circle no-background" repo="repository"></span>
<a ng-href="/repository/{{ repository.namespace }}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a> <a ng-href="/repository/{{ repository.namespace }}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
@ -21,13 +22,14 @@
</div> </div>
</div> </div>
<div ng-show="!loadingmyrepos && myrepos.length == 0"> <div ng-show="!loadingmyrepos && myrepos.length == 0">
<div class="sub-message"> <div class="sub-message" style="margin-top: 20px">
You don't have any <b>private</b> repositories yet! <span ng-show="namespace != user.username">This organization doesn't</span>
<span ng-show="namespace == user.username">You don't</span>
have any repositories yet!
<div class="options"> <div class="options">
<div class="option"><a href="/guide">Learn how to create a repository</a></div> <a class="btn btn-primary" href="/repository/">Browse all repositories</a>
<div class="or"><span>or</span></div> <a class="btn btn-success" href="/new/">Create a new repository</a>
<div class="option"><a href="/repository">Browse the public repositories</a></div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -11,18 +11,22 @@
</button> </button>
</a> </a>
<h3>Your Repositories</h3> <span class="namespace-selector" user="user" namespace="namespace" ng-show="user.organizations"></span>
<div ng-show="private_repositories.length > 0"> <h3 ng-show="namespace == user.username">Your Repositories</h3>
<div class="repo-listing" ng-repeat="repository in private_repositories"> <h3 ng-show="namespace != user.username">Repositories</h3>
<div ng-show="user_repositories.length > 0">
<div class="repo-listing" ng-repeat="repository in user_repositories">
<span class="repo-circle no-background" repo="repository"></span> <span class="repo-circle no-background" repo="repository"></span>
<a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a> <a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}">{{repository.namespace}}/{{repository.name}}</a>
<div class="description markdown-view" content="repository.description" first-line-only="true"></div> <div class="description markdown-view" content="repository.description" first-line-only="true"></div>
</div> </div>
</div> </div>
<div ng-show="private_repositories.length == 0" style="padding:20px;"> <div ng-show="user_repositories.length == 0" style="padding:20px;">
<div class="alert alert-info"> <div class="alert alert-info">
<h4>You don't have any repositories yet!</h4> <h4 ng-show="namespace == user.username">You don't have any repositories yet!</h4>
<h4 ng-show="namespace != user.username">This organization does not have any repositories yet!</h4>
<a href="/guide"><b>Click here</b> to learn how to create a repository</a> <a href="/guide"><b>Click here</b> to learn how to create a repository</a>
</div> </div>