1
0
mirror of https://github.com/goharbor/harbor.git synced 2024-12-21 08:07:59 +01:00

updates for project and details of UI

This commit is contained in:
kunw 2016-05-04 18:42:05 +08:00
parent a4893bc2fb
commit 4ff902fa43
18 changed files with 214 additions and 103 deletions

View File

@ -6,56 +6,88 @@
.module('harbor.details') .module('harbor.details')
.directive('retrieveProjects', retrieveProjects); .directive('retrieveProjects', retrieveProjects);
RetrieveProjectsController.$inject = ['$scope', 'nameFilter', '$filter', 'ListProjectService', '$routeParams', '$location']; RetrieveProjectsController.$inject = ['$scope', 'nameFilter', '$filter', 'CurrentProjectMemberService', 'ListProjectService', '$routeParams', '$location'];
function RetrieveProjectsController($scope, nameFilter, $filter, ListProjectService, $routeParams, $location) { function RetrieveProjectsController($scope, nameFilter, $filter, CurrentProjectMemberService, ListProjectService, $routeParams, $location) {
var vm = this; var vm = this;
vm.projectName = ''; vm.projectName = '';
vm.isPublic = 0; vm.isPublic = 0;
vm.publicity = false;
ListProjectService(vm.projectName, vm.isPublic) vm.retrieve = retrieve;
.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.retrieve();
vm.resultCount = $filter('name')(vm.projects, vm.filterInput, 'Name').length;
}); vm.checkProjectMember = checkProjectMember;
}
function getProjectFailed(response) {
console.log('Failed to list projects:' + response);
}
$scope.$watch('vm.selectedProject', function(current, origin) { $scope.$watch('vm.selectedProject', function(current, origin) {
if(current) { if(current) {
vm.selectedId = current.ProjectId; vm.selectedId = current.ProjectId;
} }
}); });
vm.filterInput = ""; vm.filterInput = "";
vm.selectItem = selectItem; vm.selectItem = selectItem;
$scope.$watch('vm.publicity', function(current, origin) {
if(typeof current != "undefined") {
vm.isPublic = current ? 1 : 0;
vm.retrieve();
}
});
function retrieve() {
ListProjectService(vm.projectName, vm.isPublic)
.success(getProjectSuccess)
.error(getProjectFailed);
}
function getProjectSuccess(data, status) {
vm.projects = data;
vm.selectedProject = vm.projects[0];
if($routeParams.project_id){
angular.forEach(vm.projects, function(value, index) {
if(value['ProjectId'] == $routeParams.project_id) {
vm.selectedProject = value;
}
});
}
$location.search('project_id', vm.selectedProject.ProjectId);
vm.checkProjectMember(vm.selectedProject.ProjectId);
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);
}
function checkProjectMember(projectId) {
CurrentProjectMemberService(projectId)
.success(getCurrentProjectMemberSuccess)
.error(getCurrentProjectMemberFailed);
}
function getCurrentProjectMemberSuccess(data, status) {
console.log('Successful get current project member:' + status);
vm.isProjectMember = true;
}
function getCurrentProjectMemberFailed(data, status) {
console.log('Failed get current project member:' + status);
vm.isProjectMember = false;
}
function selectItem(item) { function selectItem(item) {
vm.selectedId = item.ProjectId; vm.selectedId = item.ProjectId;
vm.selectedProject = item; vm.selectedProject = item;
vm.checkProjectMember(vm.selectedProject.ProjectId);
vm.isOpen = false; vm.isOpen = false;
$location.search('project_id', vm.selectedProject.ProjectId); $location.search('project_id', vm.selectedProject.ProjectId);
} }
@ -67,7 +99,9 @@
templateUrl: '/static/ng/resources/js/components/details/retrieve-projects.directive.html', templateUrl: '/static/ng/resources/js/components/details/retrieve-projects.directive.html',
scope: { scope: {
'isOpen': '=', 'isOpen': '=',
'selectedProject': '=' 'selectedProject': '=',
'publicity': '=',
'isProjectMember': '='
}, },
link: link, link: link,
replace: true, replace: true,

View File

@ -17,7 +17,6 @@
vm.cancel = cancel; vm.cancel = cancel;
function save() { function save() {
AddProjectMemberService(2, vm.optRole, vm.username) AddProjectMemberService(2, vm.optRole, vm.username)
.success(addProjectMemberComplete) .success(addProjectMemberComplete)
.error(addProjectMemberFailed); .error(addProjectMemberFailed);
@ -29,6 +28,8 @@
function cancel() { function cancel() {
vm.isOpen = false; vm.isOpen = false;
vm.username = "";
vm.optRole = 1;
} }
function addProjectMemberComplete(data, status, header) { function addProjectMemberComplete(data, status, header) {

View File

@ -1,9 +1,11 @@
<td style="padding: 15px;">//vm.username//</td> <td style="padding: 15px;">//vm.username//</td>
<td><switch-role roles="vm.roles" edit-mode="vm.editMode" user-id="vm.userId" role-name="vm.roleName"></switch-role></td> <td><switch-role roles="vm.roles" edit-mode="vm.editMode" user-id="vm.userId" role-name="vm.roleName"></switch-role></td>
<td> <td>
<a href="javascript:void(0);" ng-click="vm.updateProjectMember({projectId: vm.projectId, userId: vm.userId, roleId: vm.roleId})"> <a ng-show="vm.userId != vm.currentUserId" href="javascript:void(0);" ng-click="vm.updateProjectMember({projectId: vm.projectId, userId: vm.userId, roleId: vm.roleId})">
<span ng-if="!vm.editMode" class="glyphicon glyphicon-pencil"></span><span ng-if="vm.editMode" class="glyphicon glyphicon-ok"></span> <span ng-if="!vm.editMode" class="glyphicon glyphicon-pencil" title="Edit"></span><span ng-if="vm.editMode" class="glyphicon glyphicon-ok" title="Confirm">
</ng-switch>
</a> </a>
<a href="javascript:void(0);" ng-click="vm.deleteProjectMember({projectId: vm.projectId, userId: vm.userId})"><span class="glyphicon glyphicon-trash"></span></a> <a ng-show="vm.userId != vm.currentUserId" href="javascript:void(0);" ng-click="vm.cancelUpdate()" title="Cancel">
<span ng-if="vm.editMode" class="glyphicon glyphicon-repeat"></span>
</a>
<a ng-show="vm.userId != vm.currentUserId" href="javascript:void(0);" ng-click="vm.deleteProjectMember({projectId: vm.projectId, userId: vm.userId})" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
</td> </td>

View File

@ -10,32 +10,35 @@
function EditProjectMemberController($scope, roles, getRole, EditProjectMemberService, DeleteProjectMemberService) { function EditProjectMemberController($scope, roles, getRole, EditProjectMemberService, DeleteProjectMemberService) {
var vm = this; var vm = this;
$scope.$on('changedRoleId', function(e, val) {
vm.roleId = val;
});
vm.roles = roles(); vm.roles = roles();
vm.editMode = false; vm.editMode = false;
vm.lastRoleName = vm.roleName;
$scope.$watch('vm.roleName', function(current, origin) {
if(current) {
vm.currentRole = getRole({'key': 'roleName', 'value': current});
vm.roleId = vm.currentRole.id;
}
});
vm.updateProjectMember = updateProjectMember; vm.updateProjectMember = updateProjectMember;
vm.deleteProjectMember = deleteProjectMember; vm.deleteProjectMember = deleteProjectMember;
vm.cancelUpdate = cancelUpdate;
function updateProjectMember(e) { function updateProjectMember(e) {
if(vm.editMode) { if(vm.editMode) {
vm.editMode = false; vm.editMode = false;
console.log('update project member, roleId:' + e.roleId);
EditProjectMemberService(e.projectId, e.userId, e.roleId) EditProjectMemberService(e.projectId, e.userId, e.roleId)
.success(editProjectMemberComplete) .success(editProjectMemberComplete)
.error(editProjectMemberFailed); .error(editProjectMemberFailed);
}else { }else {
vm.editMode = true; vm.editMode = true;
} }
} }
function deleteProjectMember(e) { function deleteProjectMember(e) {
DeleteProjectMemberService(e.projectId, e.userId) DeleteProjectMemberService(e.projectId, e.userId)
.success(editProjectMemberComplete) .success(editProjectMemberComplete)
.error(editProjectMemberFailed); .error(editProjectMemberFailed);
@ -43,11 +46,18 @@
} }
function editProjectMemberComplete(data, status, headers) { function editProjectMemberComplete(data, status, headers) {
console.log('editProjectMemberComplete: ' + status); console.log('edit project member complete: ' + status);
vm.lastRoleName = vm.roleName;
} }
function editProjectMemberFailed(e) { function editProjectMemberFailed(e) {
console.log('editProjectMemberFailed:' + e); console.log('Failed to edit project member:' + e);
}
function cancelUpdate() {
vm.editMode = false;
console.log('lastRoleName:' + vm.lastRoleName);
vm.roleName = vm.lastRoleName;
} }
} }
@ -59,15 +69,21 @@
'scope': { 'scope': {
'username': '=', 'username': '=',
'userId': '=', 'userId': '=',
'currentUserId': '=',
'roleName': '=', 'roleName': '=',
'projectId': '=', 'projectId': '=',
'reload': '&' 'reload': '&'
}, },
'link': link,
'controller': EditProjectMemberController, 'controller': EditProjectMemberController,
'controllerAs': 'vm', 'controllerAs': 'vm',
'bindToController': true 'bindToController': true
}; };
return directive; return directive;
function link(scope, element, attrs, ctrl) {
}
} }
})(); })();

View File

@ -7,7 +7,8 @@
<button class="btn btn-primary" type="button" ng-click="vm.search({projectId: vm.projectId, username: vm.username})"><span class="glyphicon glyphicon-search"></span></button> <button class="btn btn-primary" type="button" ng-click="vm.search({projectId: vm.projectId, username: vm.username})"><span class="glyphicon glyphicon-search"></span></button>
</span> </span>
</div> </div>
<button class="btn btn-success" type="button" ng-click="vm.addProjectMember()"><span class="glyphicon glyphicon-plus"></span>Add Member</button> <button ng-if="!vm.isOpen" class="btn btn-success" type="button" ng-click="vm.addProjectMember()"><span class="glyphicon glyphicon-plus"></span>Add Member</button>
<button ng-if="vm.isOpen" class="btn btn-default" disabled="disabled" type="button"><span class="glyphicon glyphicon-plus"></span>Add Member</button>
</div> </div>
<div class="pane"> <div class="pane">
<add-project-member ng-show="vm.isOpen" is-open="vm.isOpen" reload='vm.search({projectId: vm.projectId, username: vm.username})'></add-project-member> <add-project-member ng-show="vm.isOpen" is-open="vm.isOpen" reload='vm.search({projectId: vm.projectId, username: vm.username})'></add-project-member>
@ -17,7 +18,7 @@
<th width="30%">Username</th><th width="40%">Role</th><th width="30%">Operation</th> <th width="30%">Username</th><th width="40%">Role</th><th width="30%">Operation</th>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat="pr in vm.projectMembers" edit-project-member username="pr.username" project-id="vm.projectId" user-id="pr.UserId" role-name="pr.Rolename" reload='vm.search({projectId: vm.projectId, username: vm.username})'></tr> <tr ng-repeat="pr in vm.projectMembers" edit-project-member username="pr.username" project-id="vm.projectId" user-id="pr.UserId" current-user-id="vm.currentUser.UserId" role-name="pr.Rolename" reload='vm.search({projectId: vm.projectId, username: vm.username})'></tr>
</tbody> </tbody>
</table> </table>
</div> </div>

View File

@ -6,24 +6,27 @@
.module('harbor.project.member') .module('harbor.project.member')
.directive('listProjectMember', listProjectMember); .directive('listProjectMember', listProjectMember);
ListProjectMemberController.$inject = ['$scope', '$q', 'ListProjectMemberService', '$routeParams']; ListProjectMemberController.$inject = ['$scope', 'CurrentUserService', 'ListProjectMemberService', '$routeParams'];
function ListProjectMemberController($scope, $q, ListProjectMemberService, $routeParams) { function ListProjectMemberController($scope, CurrentUserService, ListProjectMemberService, $routeParams) {
var vm = this; var vm = this;
vm.isOpen = false; vm.isOpen = false;
vm.username = "";
vm.search = search; vm.search = search;
vm.addProjectMember = addProjectMember; vm.addProjectMember = addProjectMember;
vm.retrieve = retrieve; vm.retrieve = retrieve;
vm.projectId = $routeParams.project_id; vm.projectId = $routeParams.project_id;
vm.retrieve(vm.projectId, vm.username); vm.username = "";
vm.retrieve();
function search(e) { function search(e) {
vm.projectId = e.projectId;
vm.username = e.username;
console.log('project_id:' + e.projectId); console.log('project_id:' + e.projectId);
retrieve(e.projectId, e.username); retrieve();
} }
function addProjectMember() { function addProjectMember() {
@ -34,12 +37,27 @@
} }
} }
function retrieve(projectId, username) { function retrieve() {
ListProjectMemberService(projectId, {'username': username}) $.when(
.then(getProjectMemberComplete) CurrentUserService()
.catch(getProjectMemberFailed); .success(getCurrentUserSuccess)
.error(getCurrentUserFailed))
.then(function(){
ListProjectMemberService(vm.projectId, {'username': vm.username})
.then(getProjectMemberComplete)
.catch(getProjectMemberFailed);
});
} }
function getCurrentUserSuccess(data, status) {
vm.currentUser = data;
}
function getCurrentUserFailed(e) {
console.log('Failed in getCurrentUser:' + e);
}
function getProjectMemberComplete(response) { function getProjectMemberComplete(response) {
vm.projectMembers = response.data; vm.projectMembers = response.data;
} }
@ -64,7 +82,7 @@
return directive; return directive;
function link(scope, element, attrs, ctrl) { function link(scope, element, attrs, ctrl) {
} }
} }

View File

@ -4,6 +4,8 @@
angular angular
.module('harbor.project.member', [ .module('harbor.project.member', [
'harbor.services.project.member']); 'harbor.services.project.member',
'harbor.services.user'
]);
})(); })();

View File

@ -11,12 +11,16 @@
function SwitchRoleController(getRole, $scope) { function SwitchRoleController(getRole, $scope) {
var vm = this; var vm = this;
vm.currentRole = getRole({'key': 'roleName', 'value': vm.roleName}); $scope.$watch('vm.roleName', function(current,origin) {
if(current) {
vm.currentRole = getRole({'key': 'roleName', 'value': current});
}
});
vm.selectRole = selectRole; vm.selectRole = selectRole;
function selectRole(role) { function selectRole(role) {
vm.currentRole = getRole({'key': 'roleName', 'value': role.roleName}); vm.currentRole = getRole({'key': 'roleName', 'value': role.roleName});
$scope.$emit('changedRoleId', vm.currentRole.id); vm.roleName = role.roleName;
} }
} }

View File

@ -26,11 +26,12 @@
AddProjectService(vm.projectName, vm.isPublic) AddProjectService(vm.projectName, vm.isPublic)
.success(addProjectSuccess) .success(addProjectSuccess)
.error(addProjectFailed); .error(addProjectFailed);
} }
function addProjectSuccess(data, status) { function addProjectSuccess(data, status) {
vm.isOpen = false; vm.isOpen = false;
vm.projectName = "";
vm.isPublic = false;
$scope.$emit('addedSuccess', true); $scope.$emit('addedSuccess', true);
} }
@ -40,6 +41,8 @@
function cancel(){ function cancel(){
vm.isOpen = false; vm.isOpen = false;
vm.projectName = "";
vm.isPublic = false;
} }
} }

View File

@ -8,16 +8,16 @@
</span> </span>
</div> </div>
</div> </div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" ng-repeat="repo in vm.repositories"> <div class="panel panel-default" ng-repeat="repo in vm.repositories">
<div class="panel-heading" role="tab" id="heading//$index + 1//" > <div class="panel-heading" role="tab" id="heading//$index + 1//">
<h4 class="panel-title"> <h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="ng/repository#/repositories#collapse//$index + 1//" aria-expanded="true" aria-controls="collapse//$index + 1//" ng-click="vm.expand({repoName: repo})"> <a role="button" data-toggle="collapse" data-parent="" href="?project_id=//vm.projectId//#collapse//$index + 1//" aria-expanded="true" aria-controls="collapse//$index+1//">
<span class="glyphicon glyphicon-book"></span> //repo// <span class="glyphicon glyphicon-book"></span> //repo//
</a> </a>
</h4> </h4>
</div> </div>
<list-tag associate-id="$index + 1" repo-name="repo" tags="vm.tags"></list-tag> <list-tag associate-id="$index + 1" repo-name="repo"></list-tag>
</div> </div>
</div> </div>
</div> </div>

View File

@ -12,9 +12,8 @@
vm.filterInput = ""; vm.filterInput = "";
vm.retrieve = retrieve; vm.retrieve = retrieve;
vm.expand = expand;
vm.projectId = $routeParams.project_id; vm.projectId = $routeParams.project_id;
vm.retrieve(); vm.retrieve();
function retrieve(){ function retrieve(){
@ -30,21 +29,8 @@
function getRepositoryFailed(repsonse) { function getRepositoryFailed(repsonse) {
console.log('failed to list repositories:' + response); console.log('failed to list repositories:' + response);
} }
function expand(e) {
vm.tags = [];
ListTagService(e.repoName)
.then(getTagComplete)
.catch(getTagFailed);
function getTagComplete(response) {
vm.tags = response.data;
}
function getTagFailed(response) {
}
}
} }
function listRepository() { function listRepository() {

View File

@ -6,10 +6,28 @@
.module('harbor.repository') .module('harbor.repository')
.directive('listTag', listTag); .directive('listTag', listTag);
ListTagController.$inject = ['ListTagService']; ListTagController.$inject = ['$scope', 'ListTagService'];
function ListTagController(ListTagService) { function ListTagController($scope, ListTagService) {
var vm = this;
vm.tags = [];
$scope.$watch('vm.repoName', function(current, origin) {
if(current) {
console.log('vm.repoName in tags:' + current);
ListTagService(current)
.then(getTagComplete)
.catch(getTagFailed);
}
});
function getTagComplete(response) {
vm.tags = response.data;
}
function getTagFailed(response) {
}
} }
function listTag() { function listTag() {
@ -18,8 +36,7 @@
'templateUrl': '/static/ng/resources/js/components/repository/list-tag.directive.html', 'templateUrl': '/static/ng/resources/js/components/repository/list-tag.directive.html',
'scope': { 'scope': {
'associateId': '=', 'associateId': '=',
'repoName': '=', 'repoName': '='
'tags': '='
}, },
'replace': true, 'replace': true,
'controller': ListTagController, 'controller': ListTagController,

View File

@ -6,16 +6,23 @@
.module('harbor.details') .module('harbor.details')
.controller('DetailsController', DetailsController); .controller('DetailsController', DetailsController);
DetailsController.$inject = ['ListProjectService', '$scope', '$location', '$routeParams']; DetailsController.$inject = ['$scope', '$location', '$routeParams'];
function DetailsController(ListProjectService, $scope, $location, $routeParams) { function DetailsController($scope, $location, $routeParams) {
var vm = this; var vm = this;
vm.isOpen = false; vm.isOpen = false;
vm.publicity = false;
vm.isProjectMember = true;
vm.closeRetrievePane = closeRetrievePane; vm.closeRetrievePane = closeRetrievePane;
vm.togglePublicity = togglePublicity;
function closeRetrievePane() { function closeRetrievePane() {
$scope.$broadcast('isOpen', false); $scope.$broadcast('isOpen', false);
} }
function togglePublicity(e) {
vm.publicity = e.publicity;
console.log('current project publicity:' + vm.publicity);
}
} }
})(); })();

View File

@ -4,7 +4,8 @@
angular angular
.module('harbor.details', [ .module('harbor.details', [
'harbor.services.project' 'harbor.services.project',
'harbor.services.project.member'
]); ]);
})(); })();

View File

@ -47,7 +47,10 @@
function link(scope, element, attrs, ctrl) { function link(scope, element, attrs, ctrl) {
var visited = ctrl.url.substring(1, ctrl.url.indexOf('?') - 1); var visited = ctrl.url.substring(1);
if(visited.indexOf('?') >= 0) {
visited = ctrl.url.substring(1, ctrl.url.indexOf('?') - 1);
}
element.find('a[tag^="' + visited + '"]').addClass('active'); element.find('a[tag^="' + visited + '"]').addClass('active');
element.on('click', click); element.on('click', click);

View File

@ -14,9 +14,8 @@
vm.isOpen = false; vm.isOpen = false;
vm.projectName = ''; vm.projectName = '';
vm.publicity = 0; vm.publicity = 0;
vm.retrieve = retrieve; vm.retrieve = retrieve;
vm.getCurrentUser = getCurrentUser;
vm.showAddProject = showAddProject; vm.showAddProject = showAddProject;
vm.searchProject = searchProject; vm.searchProject = searchProject;
vm.showAddButton = showAddButton; vm.showAddButton = showAddButton;
@ -43,13 +42,7 @@
function listProjectFailed(e) { function listProjectFailed(e) {
console.log('Failed to list Project:' + e); console.log('Failed to list Project:' + e);
} }
function getCurrentUser() {
CurrentUserService()
.success(getCurrentUserSuccess)
.error(getCurrentUserFailed);
}
function getCurrentUserSuccess(data, status) { function getCurrentUserSuccess(data, status) {
vm.currentUser = data; vm.currentUser = data;
} }

View File

@ -3,6 +3,9 @@
'use strict'; 'use strict';
angular angular
.module('harbor.layout.project', []); .module('harbor.layout.project', [
'harbor.services.project',
'harbor.services.user'
]);
})(); })();

View File

@ -0,0 +1,20 @@
(function() {
'use strict';
angular
.module('harbor.services.project.member')
.factory('CurrentProjectMemberService', CurrentProjectMemberService);
CurrentProjectMemberService.$inject = ['$http', '$log'];
function CurrentProjectMemberService($http, $log) {
return currentProjectMember;
function currentProjectMember(projectId) {
return $http
.get('/api/projects/' + projectId + '/members/current');
}
}
})();