updates for project and details of UI

2024-12-18 14:47:38 +01:00 · 2016-05-04 18:42:05 +08:00 · 2016-05-04 18:42:05 +08:00 · 4ff902fa43
commit 4ff902fa43
parent a4893bc2fb
18 changed files with 214 additions and 103 deletions
--- a/static/ng/resources/js/components/details/retrieve-projects.directive.js
+++ b/static/ng/resources/js/components/details/retrieve-projects.directive.js
@ -6,41 +6,20 @@
    .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);
+    vm.retrieve = retrieve;
    
-    function getProjectSuccess(data, status) {
-      vm.projects = data;
+    vm.retrieve();
    
-      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);
-    }
+    vm.checkProjectMember = checkProjectMember;
    
    $scope.$watch('vm.selectedProject', function(current, origin) {
      if(current) {        
@ -51,11 +30,64 @@
    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,
--- a/static/ng/resources/js/components/project-member/add-project-member.directive.js
+++ b/static/ng/resources/js/components/project-member/add-project-member.directive.js
@ -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) {
--- a/static/ng/resources/js/components/project-member/edit-project-member.directive.html
+++ b/static/ng/resources/js/components/project-member/edit-project-member.directive.html
@ -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>
--- a/static/ng/resources/js/components/project-member/edit-project-member.directive.js
+++ b/static/ng/resources/js/components/project-member/edit-project-member.directive.js
@ -11,31 +11,34 @@
  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) {
+    
+    }
  }

 })();
--- a/static/ng/resources/js/components/project-member/list-project-member.directive.html
+++ b/static/ng/resources/js/components/project-member/list-project-member.directive.html
@ -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>
--- a/static/ng/resources/js/components/project-member/list-project-member.directive.js
+++ b/static/ng/resources/js/components/project-member/list-project-member.directive.js
@ -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})
+    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;  
    } 
--- a/static/ng/resources/js/components/project-member/project-member.module.js
+++ b/static/ng/resources/js/components/project-member/project-member.module.js
@ -4,6 +4,8 @@
  
  angular
    .module('harbor.project.member', [
-      'harbor.services.project.member']);
+      'harbor.services.project.member',
+      'harbor.services.user'
+    ]);

 })();
--- a/static/ng/resources/js/components/project-member/switch-role.directive.js
+++ b/static/ng/resources/js/components/project-member/switch-role.directive.js
@ -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;
    }
    
  }
--- a/static/ng/resources/js/components/project/add-project.directive.js
+++ b/static/ng/resources/js/components/project/add-project.directive.js
@ -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;
    }
  }
  
--- a/static/ng/resources/js/components/repository/list-repository.directive.html
+++ b/static/ng/resources/js/components/repository/list-repository.directive.html
@ -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//">
          <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>
--- a/static/ng/resources/js/components/repository/list-repository.directive.js
+++ b/static/ng/resources/js/components/repository/list-repository.directive.js
@ -12,7 +12,6 @@
        
    vm.filterInput = "";
    vm.retrieve = retrieve;
-    vm.expand = expand;
    vm.projectId = $routeParams.project_id;
    
    vm.retrieve();
@ -31,20 +30,7 @@
      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() {
--- a/static/ng/resources/js/components/repository/list-tag.directive.js
+++ b/static/ng/resources/js/components/repository/list-tag.directive.js
@ -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,
--- a/static/ng/resources/js/layout/details/details.controller.js
+++ b/static/ng/resources/js/layout/details/details.controller.js
@ -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);
+    }
  }
  
 })();
--- a/static/ng/resources/js/layout/details/details.module.js
+++ b/static/ng/resources/js/layout/details/details.module.js
@ -4,7 +4,8 @@
  
  angular
    .module('harbor.details', [
-    'harbor.services.project'
+    'harbor.services.project',
+    'harbor.services.project.member'
    ]);
  
 })();
--- a/static/ng/resources/js/layout/navigation/navigation-details.directive.js
+++ b/static/ng/resources/js/layout/navigation/navigation-details.directive.js
@ -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);
--- a/static/ng/resources/js/layout/project/project.controller.js
+++ b/static/ng/resources/js/layout/project/project.controller.js
@ -16,7 +16,6 @@
    vm.publicity = 0;
     
    vm.retrieve = retrieve;
-    vm.getCurrentUser = getCurrentUser;
    vm.showAddProject = showAddProject;
    vm.searchProject = searchProject;    
    vm.showAddButton = showAddButton;
@ -44,12 +43,6 @@
      console.log('Failed to list Project:' + e);
    }
      
-    function getCurrentUser() {
-      CurrentUserService()
-        .success(getCurrentUserSuccess)
-        .error(getCurrentUserFailed);
-    }
-    
    function getCurrentUserSuccess(data, status) {
      vm.currentUser = data;
    }
--- a/static/ng/resources/js/layout/project/project.module.js
+++ b/static/ng/resources/js/layout/project/project.module.js
@ -3,6 +3,9 @@
  'use strict';
  
  angular
-    .module('harbor.layout.project', []);
+    .module('harbor.layout.project', [
+      'harbor.services.project',
+      'harbor.services.user'
+    ]);
  
 })();
--- a/static/ng/resources/js/services/project-member/services.current-project-member.js
+++ b/static/ng/resources/js/services/project-member/services.current-project-member.js
@ -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');
+    }
+  }
+  
+})();