Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-23 10:45:45 +01:00
Code Issues Projects Releases Wiki Activity

updates on project and details page of UI

Browse Source
This commit is contained in:
kunw 2016-05-03 18:29:58 +08:00
parent aa3b1b3cbe
commit a4893bc2fb
17 changed files with 137 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/ng/resources/css/footer.css
View File

@ -8,6 +8,7 @@
clear: both;
background-color: #A8A8A8;
height: 35px;
z-index: 2;
}
.footer p {
margin-top: 8px;

7
static/ng/resources/css/repository.css
View File

@ -96,3 +96,10 @@
line-height: 2.5em;
margin: 0 0.5em 0 0;
}
.input-group .form-control {
z-index: 1;
}
.well {
padding: 12px;
}

2
static/ng/resources/js/components/details/retrieve-projects.directive.html
View File

@ -7,7 +7,7 @@
<input type="text" class="form-control search-icon" placeholder="" ng-model="vm.filterInput" size="30">
</div>
</div>
<h5 class="page-header">My Projects: <span class="badge">//vm.projects.length//</span></h5>
<h5 class="page-header">My Projects: <span class="badge">//vm.resultCount//</span></h5>
<div class="project-list pane-container">
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in vm.projects | name: vm.filterInput: 'Name'" ng-click="vm.selectItem(item)">

40
static/ng/resources/js/components/details/retrieve-projects.directive.js
View File

@ -6,11 +6,42 @@
.module('harbor.details')
.directive('retrieveProjects', retrieveProjects);
RetrieveProjectsController.$inject = ['$scope', 'nameFilter'];
RetrieveProjectsController.$inject = ['$scope', 'nameFilter', '$filter', 'ListProjectService', '$routeParams', '$location'];
function RetrieveProjectsController($scope, nameFilter) {
function RetrieveProjectsController($scope, nameFilter, $filter, ListProjectService, $routeParams, $location) {
var vm = this;
vm.projectName = '';
vm.isPublic = 0;
ListProjectService(vm.projectName, vm.isPublic)
.success(getProjectSuccess)
.error(getProjectFailed);
function getProjectSuccess(data, status) {
vm.projects = data;
if($routeParams.project_id){
angular.forEach(vm.projects, function(value, index) {
if(value['ProjectId'] == $routeParams.project_id) {
vm.selectedProject = value;
}
});
}else{
vm.selectedProject = vm.projects[0];
}
vm.resultCount = vm.projects.length;
$scope.$watch('vm.filterInput', function(current, origin) {
vm.resultCount = $filter('name')(vm.projects, vm.filterInput, 'Name').length;
});
}
function getProjectFailed(response) {
console.log('Failed to list projects:' + response);
}
$scope.$watch('vm.selectedProject', function(current, origin) {
if(current) {
vm.selectedId = current.ProjectId;
@ -18,12 +49,14 @@
});
vm.filterInput = "";
vm.selectItem = selectItem;
vm.selectItem = selectItem;
function selectItem(item) {
vm.selectedId = item.ProjectId;
vm.selectedProject = item;
vm.isOpen = false;
$location.search('project_id', vm.selectedProject.ProjectId);
}
}
@ -33,7 +66,6 @@
restrict: 'E',
templateUrl: '/static/ng/resources/js/components/details/retrieve-projects.directive.html',
scope: {
'projects': '=',
'isOpen': '=',
'selectedProject': '='
},

4
static/ng/resources/js/components/log/advanced-search.directive.html
View File

@ -25,7 +25,7 @@
<div class="input-group datetimepicker">
<input id="fromDatePicker" class="form-control" type="text" readonly="readonly" ng-model="vm.fromDate" ng-change="vm.pickUp({key:'fromDate', value: vm.fromDate})">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
<a href="javascript:void(0);"><span class="glyphicon glyphicon-calendar"></span></a>
</span>
</div>
</div>
@ -35,7 +35,7 @@
<div class="input-group datetimepicker">
<input id="toDatePicker" class="form-control" type="text" readonly="readonly" ng-model="vm.toDate" ng-change="vm.pickUp({key:'toDate', value: vm.toDate})">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
<a href="javascript:void(0);"><span class="glyphicon glyphicon-calendar"></span></a>
</span>
</div>
</div>

14
static/ng/resources/js/components/project/list-project.directive.html
View File

@ -1,14 +0,0 @@
<table class="table">
<thead>
<th>Project Name</th><th>Repositories</th><th>Role</th><th>Creation Time</th><th>Publicity</th>
</thead>
<tbody>
<tr ng-repeat="p in vm.projects">
<td><a href="/ng/repository#/repositories?project_id=//p.ProjectId//">//p.Name//</a></td>
<td>N/A</td>
<td>N/A</td>
<td>//p.CreationTime | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
<td><publicity-button is-public="p.Public" owned="p.OwnerId == vm.currentUser.UserId" project-id="p.ProjectId"></publicity-button></td>
</tr>
</tbody>
</table>

84
static/ng/resources/js/components/project/list-project.directive.js
View File

@ -1,84 +0,0 @@
(function() {
'use strict';
angular
.module('harbor.project')
.directive('listProject', listProject);
ListProjectController.$inject = ['ListProjectService', 'CurrentUserService', '$scope'];
function ListProjectController(ListProjectService, CurrentUserService, $scope) {
var vm = this;
vm.retrieve = retrieve;
vm.reload = reload;
vm.getCurrentUser = getCurrentUser;
vm.resultCount = 0;
vm.publicity = 0;
function reload() {
$.when(vm.getCurrentUser())
.done(function(e) {
vm.retrieve();
});
}
vm.reload();
$scope.$on('needToReload', function(e, val) {
if(val) {
vm.reload();
}
});
function retrieve() {
ListProjectService(vm.projectName, vm.publicity)
.success(listProjectSuccess)
.error(listProjectFailed);
}
function listProjectSuccess(data, status) {
vm.projects = data;
if(data) {
vm.resultCount = vm.projects.length;
}
}
function listProjectFailed(e) {
console.log('Failed in listProject:' + e);
}
function getCurrentUser() {
CurrentUserService()
.success(getCurrentUserSuccess)
.error(getCurrentUserFailed);
}
function getCurrentUserSuccess(data, status) {
vm.currentUser = data;
}
function getCurrentUserFailed(e) {
console.log('Failed in getCurrentUser:' + e);
}
}
function listProject() {
var directive = {
'restrict': 'E',
'templateUrl': '/static/ng/resources/js/components/project/list-project.directive.html',
'scope': {
'projectName': '=',
'publicity': '=',
'resultCount': '='
},
'controller': ListProjectController,
'controllerAs': 'vm',
'bindToController': true
};
return directive;
}
})();

2
static/ng/resources/js/components/repository/list-repository.directive.html
View File

@ -4,7 +4,7 @@
<div class="input-group">
<input type="text" class="form-control" placeholder="" ng-model="vm.filterInput" value="" size="30">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span></button>
<button class="btn btn-primary" type="button" ng-click="vm.retrieve()"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>

19
static/ng/resources/js/components/repository/list-repository.directive.js
View File

@ -5,33 +5,30 @@
.module('harbor.repository')
.directive('listRepository', listRepository);
ListRepositoryController.$inject = ['$scope', '$q', 'ListRepositoryService', 'ListTagService', 'nameFilter', '$routeParams'];
ListRepositoryController.$inject = ['$scope', 'ListRepositoryService', 'ListTagService', 'nameFilter', '$routeParams'];
function ListRepositoryController($scope, $q, ListRepositoryService, ListTagService, nameFilter, $routeParams) {
function ListRepositoryController($scope, ListRepositoryService, ListTagService, nameFilter, $routeParams) {
var vm = this;
vm.filterInput = "";
vm.expand = expand;
vm.retrieve = retrieve;
vm.expand = expand;
vm.projectId = $routeParams.project_id;
vm.retrieve(vm.projectId, vm.filterInput);
function retrieve(projectId, filterInput) {
ListRepositoryService({'projectId': projectId, 'q': filterInput})
vm.retrieve();
function retrieve(){
ListRepositoryService(vm.projectId, vm.filterInput)
.success(getRepositoryComplete)
.error(getRepositoryFailed);
}
function getRepositoryComplete(data, status) {
console.log(data);
vm.repositories = data;
}
function getRepositoryFailed(repsonse) {
console.log('failed to list repositories:' + response);
}
function expand(e) {

4
static/ng/resources/js/layout/details/details.config.js
View File

@ -32,7 +32,7 @@
return filter;
function filter(input, filterInput, key) {
input = input || '';
input = input || [];
var filteredResults = [];
if (filterInput != '') {
@ -41,7 +41,7 @@
if((key == "" && item.indexOf(filterInput) >= 0) || (key != "" && item[key].indexOf(filterInput) >= 0)) {
filteredResults.push(item);
continue;
}
}
}
input = filteredResults;
}

23
static/ng/resources/js/layout/details/details.controller.js
View File

@ -6,30 +6,13 @@
.module('harbor.details')
.controller('DetailsController', DetailsController);
DetailsController.$inject = ['ListProjectService', '$scope', '$location'];
DetailsController.$inject = ['ListProjectService', '$scope', '$location', '$routeParams'];
function DetailsController(ListProjectService, $scope, $location) {
function DetailsController(ListProjectService, $scope, $location, $routeParams) {
var vm = this;
vm.isOpen = false;
vm.closeRetrievePane = closeRetrievePane;
vm.projectName = '';
vm.isPublic = 0;
ListProjectService(vm.projectName, vm.isPublic)
.then(getProjectComplete)
.catch(getProjectFailed);
function getProjectComplete(response) {
vm.projects = response.data;
vm.selectedProject = vm.projects[0];
$location.url('repositories').search('project_id', vm.selectedProject.ProjectId);
}
function getProjectFailed(response) {
}
function closeRetrievePane() {
$scope.$broadcast('isOpen', false);
}

11
static/ng/resources/js/layout/navigation/navigation-details.directive.js
View File

@ -47,14 +47,9 @@
function link(scope, element, attrs, ctrl) {
var visited = ctrl.url;
if(visited == "/") {
element.find('a:first').addClass('active');
}else{
element.find('a[href$="' + visited + '"]').addClass('active');
}
var visited = ctrl.url.substring(1, ctrl.url.indexOf('?') - 1);
element.find('a[tag^="' + visited + '"]').addClass('active');
element.on('click', click);
function click(event) {

65
static/ng/resources/js/layout/project/project.controller.js
View File

@ -6,21 +6,60 @@
.module('harbor.layout.project')
.controller('ProjectController', ProjectController);
ProjectController.$inject = ['$scope'];
ProjectController.$inject = ['$scope', 'ListProjectService', 'CurrentUserService'];
function ProjectController($scope) {
function ProjectController($scope, ListProjectService, CurrentUserService) {
var vm = this;
vm.showAddProject = showAddProject;
vm.isOpen = false;
vm.searchProject = searchProject;
vm.inputProjectName = "";
vm.inputPublicity = 0;
vm.isOpen = false;
vm.projectName = '';
vm.publicity = 0;
vm.retrieve = retrieve;
vm.getCurrentUser = getCurrentUser;
vm.showAddProject = showAddProject;
vm.searchProject = searchProject;
vm.showAddButton = showAddButton;
vm.togglePublicity = togglePublicity;
vm.retrieve();
function retrieve() {
$.when(
CurrentUserService()
.success(getCurrentUserSuccess)
.error(getCurrentUserFailed))
.then(function(){
ListProjectService(vm.projectName, vm.publicity)
.success(listProjectSuccess)
.error(listProjectFailed);
});
}
function listProjectSuccess(data, status) {
vm.projects = data;
}
function listProjectFailed(e) {
console.log('Failed to list Project:' + e);
}
function getCurrentUser() {
CurrentUserService()
.success(getCurrentUserSuccess)
.error(getCurrentUserFailed);
}
function getCurrentUserSuccess(data, status) {
vm.currentUser = data;
}
function getCurrentUserFailed(e) {
console.log('Failed in getCurrentUser:' + e);
}
$scope.$on('addedSuccess', function(e, val) {
$scope.$broadcast('needToReload', true);
vm.retrieve();
});
function showAddProject() {
@ -32,11 +71,11 @@
}
function searchProject() {
$scope.$broadcast('needToReload', true);
vm.retrieve();
}
function showAddButton() {
if(vm.inputPublicity == 0) {
if(vm.publicity == 0) {
return true;
}else{
return false;
@ -44,9 +83,9 @@
}
function togglePublicity(e) {
vm.inputPublicity = e.publicity;
$scope.$broadcast('needToReload', true);
console.log('vm.inputPublicity:' + vm.inputPublicity);
vm.publicity = e.publicity;
vm.retrieve();
console.log('vm.publicity:' + vm.publicity);
}
}

11
static/ng/resources/js/services/repository/services.list-repository.js
View File

@ -9,14 +9,11 @@
function ListRepositoryService($http, $log) {
return RepositoryResult;
return ListRepository;
function RepositoryResult(queryParams) {
$log.info(queryParams);
var projectId = queryParams.projectId;
var q = queryParams.q;
function ListRepository(projectId, q) {
$log.info('list repositories:' + projectId + ', q:' + q);
return $http
.get('/api/repositories', {
'params':{

19
views/ng/project.htm
View File

@ -7,7 +7,7 @@
<div class="search-pane">
<div class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="" ng-model="vm.inputProjectName" size="30">
<input type="text" class="form-control" placeholder="" ng-model="vm.projectName" size="30">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-click="vm.searchProject()"><span class="glyphicon glyphicon-search"></span></button>
</span>
@ -18,9 +18,22 @@
<div class="pane project-pane">
<add-project ng-show="vm.isOpen" is-open="vm.isOpen"></add-project>
<div class="sub-pane">
<list-project project-name="vm.inputProjectName" publicity="vm.inputPublicity" result-count="vm.resultCount"></list-project>
<table class="table">
<thead>
<th>Project Name</th><th>Repositories</th><th>Role</th><th>Creation Time</th><th>Publicity</th>
</thead>
<tbody>
<tr ng-repeat="p in vm.projects">
<td><a href="/ng/repository#/repositories?project_id=//p.ProjectId//">//p.Name//</a></td>
<td>N/A</td>
<td>N/A</td>
<td>//p.CreationTime | dateL : 'YYYY-MM-DD HH:mm:ss'//</td>
<td><publicity-button is-public="p.Public" owned="p.OwnerId == vm.currentUser.UserId" project-id="p.ProjectId"></publicity-button></td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-4 col-md-12 well well-sm well-custom"><div class="col-md-offset-10">//vm.resultCount// items</div></div>
<div class="col-xs-4 col-md-12 well well-sm well-custom"><div class="col-md-offset-10">//vm.projects ? vm.projects.length : 0// items</div></div>
</div>
</div>
</div>

2
views/ng/repository.htm
View File

@ -10,7 +10,7 @@
<navigation-details is-open="vm.open" selected-project="vm.selectedProject"></navigation-details>
</span>
</div>
<retrieve-projects is-open="vm.open" projects="vm.projects" selected-project="vm.selectedProject"></retrieve-projects>
<retrieve-projects is-open="vm.open" selected-project="vm.selectedProject"></retrieve-projects>
<!-- Tab panes -->
<div class="tab-content" ng-click="vm.closeRetrievePane()">
<ng-view></ng-view>

1
views/ng/sections/headerInclude.htm
View File

@ -101,7 +101,6 @@
<script src="/static/ng/resources/js/components/project/project.module.js"></script>
<script src="/static/ng/resources/js/components/project/add-project.directive.js"></script>
<script src="/static/ng/resources/js/components/project/list-project.directive.js"></script>
<script src="/static/ng/resources/js/components/project/publicity-button.directive.js"></script>
<script src="/static/ng/resources/js/components/details/switch-pane-projects.directive.js"></script>