Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-12-18 06:38:19 +01:00
Code Issues Projects Releases Wiki Activity

updates for project and details of UI

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,56 +6,88 @@
.module('harbor.details')
.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;
vm.projectName = '';
vm.isPublic = 0;
vm.publicity = false;
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;
vm.retrieve = retrieve;
$scope.$watch('vm.filterInput', function(current, origin) {
vm.resultCount = $filter('name')(vm.projects, vm.filterInput, 'Name').length;
});
}
vm.retrieve();
vm.checkProjectMember = checkProjectMember;
function getProjectFailed(response) {
console.log('Failed to list projects:' + response);
}
$scope.$watch('vm.selectedProject', function(current, origin) {
if(current) {
vm.selectedId = current.ProjectId;
}
});
vm.filterInput = "";
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) {
vm.selectedId = item.ProjectId;
vm.selectedProject = item;
vm.checkProjectMember(vm.selectedProject.ProjectId);
vm.isOpen = false;
$location.search('project_id', vm.selectedProject.ProjectId);
}
@ -67,7 +99,9 @@
templateUrl: '/static/ng/resources/js/components/details/retrieve-projects.directive.html',
scope: {
'isOpen': '=',
'selectedProject': '='
'selectedProject': '=',
'publicity': '=',
'isProjectMember': '='
},
link: link,
replace: true,

3
static/ng/resources/js/components/project-member/add-project-member.directive.js
View File

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

10
static/ng/resources/js/components/project-member/edit-project-member.directive.html
View File

@ -1,9 +1,11 @@
<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>
<a 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>
</ng-switch>
<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" title="Edit"></span><span ng-if="vm.editMode" class="glyphicon glyphicon-ok" title="Confirm">
</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>

38
static/ng/resources/js/components/project-member/edit-project-member.directive.js
View File

@ -10,32 +10,35 @@
function EditProjectMemberController($scope, roles, getRole, EditProjectMemberService, DeleteProjectMemberService) {
var vm = this;
$scope.$on('changedRoleId', function(e, val) {
vm.roleId = val;
});
vm.roles = roles();
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.deleteProjectMember = deleteProjectMember;
vm.cancelUpdate = cancelUpdate;
function updateProjectMember(e) {
if(vm.editMode) {
vm.editMode = false;
console.log('update project member, roleId:' + e.roleId);
EditProjectMemberService(e.projectId, e.userId, e.roleId)
.success(editProjectMemberComplete)
.error(editProjectMemberFailed);
}else {
vm.editMode = true;
}
}
function deleteProjectMember(e) {
DeleteProjectMemberService(e.projectId, e.userId)
.success(editProjectMemberComplete)
.error(editProjectMemberFailed);
@ -43,11 +46,18 @@
}
function editProjectMemberComplete(data, status, headers) {
console.log('editProjectMemberComplete: ' + status);
console.log('edit project member complete: ' + status);
vm.lastRoleName = vm.roleName;
}
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': {
'username': '=',
'userId': '=',
'currentUserId': '=',
'roleName': '=',
'projectId': '=',
'reload': '&'
},
'link': link,
'controller': EditProjectMemberController,
'controllerAs': 'vm',
'bindToController': true
};
return directive;
function link(scope, element, attrs, ctrl) {
}
}
})();

5
static/ng/resources/js/components/project-member/list-project-member.directive.html
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>
</span>
</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 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>
@ -17,7 +18,7 @@
<th width="30%">Username</th><th width="40%">Role</th><th width="30%">Operation</th>
</thead>
<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>
</table>
</div>

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

@ -6,24 +6,27 @@
.module('harbor.project.member')
.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;
vm.isOpen = false;
vm.username = "";
vm.search = search;
vm.addProjectMember = addProjectMember;
vm.retrieve = retrieve;
vm.projectId = $routeParams.project_id;
vm.retrieve(vm.projectId, vm.username);
vm.username = "";
vm.retrieve();
function search(e) {
vm.projectId = e.projectId;
vm.username = e.username;
console.log('project_id:' + e.projectId);
retrieve(e.projectId, e.username);
retrieve();
}
function addProjectMember() {
@ -34,12 +37,27 @@
}
}
function retrieve(projectId, username) {
ListProjectMemberService(projectId, {'username': username})
.then(getProjectMemberComplete)
.catch(getProjectMemberFailed);
function retrieve() {
$.when(
CurrentUserService()
.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) {
vm.projectMembers = response.data;
}
@ -64,7 +82,7 @@
return directive;
function link(scope, element, attrs, ctrl) {
}
}

4
static/ng/resources/js/components/project-member/project-member.module.js
View File

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

8
static/ng/resources/js/components/project-member/switch-role.directive.js
View File

@ -11,12 +11,16 @@
function SwitchRoleController(getRole, $scope) {
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;
function selectRole(role) {
vm.currentRole = getRole({'key': 'roleName', 'value': role.roleName});
$scope.$emit('changedRoleId', vm.currentRole.id);
vm.roleName = role.roleName;
}
}

5
static/ng/resources/js/components/project/add-project.directive.js
View File

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

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

@ -8,16 +8,16 @@
</span>
</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-heading" role="tab" id="heading//$index + 1//" >
<div class="panel-heading" role="tab" id="heading//$index + 1//">
<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//
</a>
</h4>
</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>

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

@ -12,9 +12,8 @@
vm.filterInput = "";
vm.retrieve = retrieve;
vm.expand = expand;
vm.projectId = $routeParams.project_id;
vm.retrieve();
function retrieve(){
@ -30,21 +29,8 @@
function getRepositoryFailed(repsonse) {
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() {

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

@ -6,10 +6,28 @@
.module('harbor.repository')
.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() {
@ -18,8 +36,7 @@
'templateUrl': '/static/ng/resources/js/components/repository/list-tag.directive.html',
'scope': {
'associateId': '=',
'repoName': '=',
'tags': '='
'repoName': '='
},
'replace': true,
'controller': ListTagController,

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

@ -6,16 +6,23 @@
.module('harbor.details')
.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;
vm.isOpen = false;
vm.publicity = false;
vm.isProjectMember = true;
vm.closeRetrievePane = closeRetrievePane;
vm.togglePublicity = togglePublicity;
function closeRetrievePane() {
$scope.$broadcast('isOpen', false);
}
function togglePublicity(e) {
vm.publicity = e.publicity;
console.log('current project publicity:' + vm.publicity);
}
}
})();

3
static/ng/resources/js/layout/details/details.module.js
View File

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

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

@ -47,7 +47,10 @@
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.on('click', click);

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

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

5
static/ng/resources/js/layout/project/project.module.js
View File

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

20
static/ng/resources/js/services/project-member/services.current-project-member.js Normal file
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');
}
}
})();