js: continue merging pagesnew

This commit is contained in:
Jimmy Zelinskie 2015-02-23 15:22:41 -05:00
parent 3dbaafbd60
commit 6bff3449aa
3 changed files with 222 additions and 3 deletions

View file

@ -4,16 +4,161 @@
*/
angular.module('quayPages').config(['pages', function(pages) {
pages.create('repo-list', 'repo-list.html', RepoListCtrl, {
'newLayout': true,
'title': 'Repositories',
'description': 'View and manage Docker repositories'
});
}, ['layout'])
pages.create('repo-list', 'old-repo-list.html', OldRepoListCtrl, {
'title': 'Repositories',
'description': 'View and manage Docker repositories'
}, ['old-layout']);
}]);
function RepoListCtrl($scope, $sanitize, Restangular, UserService, ApiService) {
$scope.namespace = null;
$scope.page = 1;
$scope.publicPageCount = null;
// When loading the UserService, if the user is logged in, create a list of
// relevant namespaces for later collecting relevant repositories.
UserService.load(function() {
var user = UserService.currentUser();
if (!user.anonymous) {
$scope.namespaces = [user];
for (var i = 0; i < user.organizations.length; i++) {
$scope.namespaces.push(user.organizations[i]);
}
//loadStarredRepos();
//loadRepos();
}
});
// If someone signs in on this page, we have to watch the user and re-load
// their repositories after they've signed in to actually have any content
// on the page.
$scope.$watch(function(scope) { return scope.user },
function(user) {
if (!user.anonymous) {
$scope.namespaces = [user];
for (var i = 0; i < user.organizations.length; i++) {
$scope.namespaces.push(user.organizations[i]);
}
loadStarredRepos();
loadRepos();
}
});
$scope.toggleStar = function(repo) {
if (repo.is_starred) {
unstarRepo(repo);
} else {
starRepo(repo);
}
}
var starRepo = function(repo) {
var data = {
'namespace': repo.namespace,
'repository': repo.name
};
ApiService.createStar(data).then(function(result) {
updateReposAfterStar(repo);
}, ApiService.errorDisplay('Could not star repository'));
};
var unstarRepo = function(repo) {
var data = {
'repository': repo.namespace + '/' + repo.name
};
ApiService.deleteStar(null, data).then(function(result) {
updateReposAfterUnstar(repo);
}, ApiService.errorDisplay('Could not unstar repository'));
};
// Finds a repository within the list of namespaces attached to $scope.
var findRepoInList = function(repoNamespace, repoName) {
var namespaceIndex = $scope.namespaces.map(function (n) {
return n.username || n.name;
}).indexOf(repoNamespace);
var namespace = $scope.namespaces[namespaceIndex]
var repoIndex = namespace.repositories.value.map(function (r) {
return r.namespace + '/' + r.name;
}).indexOf(repoNamespace + '/' + repoName);
return repoIndex != -1 ? namespace.repositories.value[repoIndex] : null;
}
// Add a starred repository to the list starred repository list and make
// sure it appears starred elsewhere on the page.
var updateReposAfterStar = function(repository) {
$scope.starred_repositories.value.push(repository);
var repo = findRepoInList(repository.namespace, repository.name);
if (repo != null) {
repo.is_starred = true;
}
}
// Remove a repository from the starred repository list and make sure that
// it doesn't appear starred elsewhere on the page.
var updateReposAfterUnstar = function(repository) {
// Remove from the starred listings
var index = $scope.starred_repositories.value.map(function(r) {
return r.namespace + '/' + r.name;
}).indexOf(repository.namespace + '/' + repository.name);
$scope.starred_repositories.value.splice(index, 1);
// Set repo from the normal listings to unstarred.
var repo = findRepoInList(repository.namespace, repository.name);
if (repo != null) {
repo.is_starred = false;
}
};
var loadStarredRepos = function() {
if (!$scope.user || $scope.user.anonymous) {
return;
}
$scope.starred_repositories = ApiService.listStarredReposAsResource().get(function(resp) {
return resp.repositories.map(function(repo) {
repo.is_starred = true;
return repo;
});
});
};
// Iterate over all of the $scope.namespaces and collect their respective
// repositories.
var loadRepos = function() {
if ($scope.namespaces.length == 0 || $scope.user.anonymous) {
return;
}
for (var i = 0; i < $scope.namespaces.length; i++) {
var namespace = $scope.namespaces[i];
var namespaceName = namespace.username || namespace.name;
var options = {
'public': false,
'sort': true,
'namespace': namespaceName,
};
namespace.repositories = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
return resp.repositories;
});
}
};
}
function OldRepoListCtrl($scope, $sanitize, Restangular, UserService, ApiService) {
$scope.namespace = null;
$scope.page = 1;
$scope.publicPageCount = null;
// Monitor changes in the user.
UserService.updateUserIn($scope, function() {
loadMyRepos($scope.namespace);
@ -73,4 +218,4 @@
loadPublicRepos();
}
})();
})();

View file

@ -0,0 +1,74 @@
<div class="cor-container">
<div class="repo-list" ng-show="!user.anonymous">
<div ng-class="user.organizations.length ? 'section-header' : ''">
<div class="button-bar-right">
<a href="/new/">
<button class="btn btn-success">
<i class="fa fa-upload user-tool" data-title="Create new repository"></i>
Create Repository
</button>
</a>
<a href="/organization/{{ namespace }}" ng-show="namespace != user.username">
<button class="btn btn-default">
<i class="fa fa-group user-tool"></i>
View Organization
</button>
</a>
</div>
<span class="namespace-selector" user="user" namespace="namespace" ng-show="user.organizations"></span>
</div>
<h3 ng-show="namespace == user.username">Your Repositories</h3>
<h3 ng-show="namespace != user.username">Repositories</h3>
<div class="resource-view" resource="user_repositories">
<!-- User/Org has repositories -->
<div ng-show="user_repositories.value.length > 0">
<div class="repo-listing" ng-repeat="repository in user_repositories.value">
<span class="repo-circle no-background" repo="repository"></span>
<a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}"
data-repo="{{repository.namespace}}/{{ repository.name }}">
{{repository.namespace}}/{{repository.name}}
</a>
<div class="description markdown-view" content="repository.description" first-line-only="true"></div>
</div>
</div>
<!-- User/Org has no repositories -->
<div ng-show="user_repositories.value.length == 0" style="padding:20px;">
<div class="alert alert-info">
<h4 ng-show="namespace == user.username">You don't have any repositories yet!</h4>
<h4 ng-show="namespace != user.username">This organization doesn't have any repositories, or you have not been provided access.</h4>
<a href="http://docs.quay.io/solution/getting-started.html"><b>Click here</b> to learn how to create a repository</a>
</div>
</div>
</div>
</div>
<div class="repo-list">
<h3>Top Public Repositories</h3>
<div class="resource-view" resource="public_repositories">
<div class="repo-listing" ng-repeat="repository in public_repositories.value">
<span class="repo-circle no-background" repo="repository"></span>
<a ng-href="/repository/{{repository.namespace}}/{{ repository.name }}"
data-repo="{{repository.namespace}}/{{ repository.name }}">
{{repository.namespace}}/{{repository.name}}
</a>
<div class="description markdown-view" content="repository.description" first-line-only="true"></div>
</div>
<div class="page-controls">
<button class="btn btn-default" data-title="Previous Page" bs-tooltip="title" ng-show="page > 1"
ng-click="movePublicPage(-1)">
<i class="fa fa-chevron-left"></i>
</button>
<button class="btn btn-default" data-title="Next Page" bs-tooltip="title" ng-show="page < publicPageCount"
ng-click="movePublicPage(1)">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>

View file

@ -1,5 +1,5 @@
<!-- The user is not logged in -->
<div ng-if="user.anonymous" class="container signin-container">
<div ng-if="user.anonymous" class="cor-container signin-container">
<!-- Sign In -->
<div class="row">