From 601a9302192ede6d9ac72e0054edf52657476101 Mon Sep 17 00:00:00 2001 From: kunw Date: Wed, 11 May 2016 18:42:28 +0800 Subject: [PATCH] updates on modal-dialog and its application for UI. --- .../modal-dialog/modal-dialog.directive.html | 5 +- .../modal-dialog/modal-dialog.directive.js | 28 ++++++++++- .../repository/list-repository.directive.html | 7 +-- .../repository/list-repository.directive.js | 47 ++++++++++++++++--- .../repository/list-tag.directive.html | 2 +- .../repository/list-tag.directive.js | 19 +++++++- .../repository/services.delete-repository.js | 10 ++-- views/ng/sections/header-include.htm | 1 + 8 files changed, 98 insertions(+), 21 deletions(-) diff --git a/static/ng/resources/js/components/modal-dialog/modal-dialog.directive.html b/static/ng/resources/js/components/modal-dialog/modal-dialog.directive.html index 202525179..685773e50 100644 --- a/static/ng/resources/js/components/modal-dialog/modal-dialog.directive.html +++ b/static/ng/resources/js/components/modal-dialog/modal-dialog.directive.html @@ -3,14 +3,13 @@ diff --git a/static/ng/resources/js/components/modal-dialog/modal-dialog.directive.js b/static/ng/resources/js/components/modal-dialog/modal-dialog.directive.js index 3d952790e..7884b23c0 100644 --- a/static/ng/resources/js/components/modal-dialog/modal-dialog.directive.js +++ b/static/ng/resources/js/components/modal-dialog/modal-dialog.directive.js @@ -6,9 +6,10 @@ .module('harbor.modal.dialog') .directive('modalDialog', modalDialog); - function ModalDialogController() { + ModalDialogController.$inject = ['$scope']; + + function ModalDialogController($scope) { var vm = this; - vm.action(); } function modalDialog() { @@ -17,6 +18,8 @@ 'templateUrl': '/static/ng/resources/js/components/modal-dialog/modal-dialog.directive.html', 'link': link, 'scope': { + 'contentType': '@', + 'title': '@', 'message': '@', 'action': '&' }, @@ -28,6 +31,27 @@ function link(scope, element, attrs, ctrl) { + console.log('Received contentType in modal:' + ctrl.contentType); + + scope.$watch('vm.message', function(current) { + if(current) { + switch(ctrl.contentType) { + case 'text/html': + element.find('.modal-body').html(current); break; + case 'text/plain': + element.find('.modal-body').text(current); break; + default: + element.find('.modal-body').text(current); break; + } + } + }); + + element.find('#btnOk').on('click', clickHandler); + + function clickHandler(e) { + ctrl.action(); + element.find('#myModal').modal('hide'); + } } } diff --git a/static/ng/resources/js/components/repository/list-repository.directive.html b/static/ng/resources/js/components/repository/list-repository.directive.html index 4090b9a57..088306f81 100644 --- a/static/ng/resources/js/components/repository/list-repository.directive.html +++ b/static/ng/resources/js/components/repository/list-repository.directive.html @@ -9,16 +9,17 @@
- +
diff --git a/static/ng/resources/js/components/repository/list-repository.directive.js b/static/ng/resources/js/components/repository/list-repository.directive.js index 72396a883..e2f21233b 100644 --- a/static/ng/resources/js/components/repository/list-repository.directive.js +++ b/static/ng/resources/js/components/repository/list-repository.directive.js @@ -5,14 +5,15 @@ .module('harbor.repository') .directive('listRepository', listRepository); - ListRepositoryController.$inject = ['$scope', 'ListRepositoryService', 'ListTagService', 'nameFilter', '$routeParams']; + ListRepositoryController.$inject = ['$scope', 'ListRepositoryService', 'DeleteRepositoryService', 'nameFilter', '$routeParams']; - function ListRepositoryController($scope, ListRepositoryService, ListTagService, nameFilter, $routeParams) { + function ListRepositoryController($scope, ListRepositoryService, DeleteRepositoryService, nameFilter, $routeParams) { var vm = this; vm.filterInput = ""; vm.retrieve = retrieve; vm.projectId = $routeParams.project_id; + vm.tagCount = {}; vm.retrieve(); @@ -24,11 +25,21 @@ vm.tag = val; }); - vm.message = "Are you sure to delete the tag of image?"; - vm.deleteImage = deleteImage; - - + $scope.$on('tagCount', function(e, val) { + vm.tagCount = val; + }); + $scope.$on('modalTitle', function(e, val) { + vm.modalTitle = val; + }); + + $scope.$on('modalMessage', function(e, val) { + vm.modalMessage = val; + }); + + vm.deleteByRepo = deleteByRepo; + vm.deleteImage = deleteImage; + function retrieve(){ ListRepositoryService(vm.projectId, vm.filterInput) .success(getRepositoryComplete) @@ -39,13 +50,35 @@ vm.repositories = data; } - function getRepositoryFailed(repsonse) { + function getRepositoryFailed(response) { console.log('Failed list repositories:' + response); } + + function deleteByRepo(repoName) { + vm.repoName = repoName; + vm.tag = ''; + vm.modalTitle = 'Delete repository - ' + repoName; + vm.modalMessage = 'After deleting the associated tags with the repository will be deleted together.
' + + 'And the corresponding image will be removed from the system.
' + + '
Delete this "' + repoName + '" repository now?'; + } + function deleteImage() { console.log('repoName:' + vm.repoName + ', tag:' + vm.tag); + DeleteRepositoryService(vm.repoName, vm.tag) + .success(deleteRepositorySuccess) + .error(deleteRepositoryFailed); } + + function deleteRepositorySuccess(data, status) { + vm.retrieve(); + } + + function deleteRepositoryFailed(data, status) { + console.log('Failed delete repository:' + data); + } + } function listRepository() { diff --git a/static/ng/resources/js/components/repository/list-tag.directive.html b/static/ng/resources/js/components/repository/list-tag.directive.html index 7c7e0ee60..0951c6304 100644 --- a/static/ng/resources/js/components/repository/list-tag.directive.html +++ b/static/ng/resources/js/components/repository/list-tag.directive.html @@ -14,7 +14,7 @@ - + diff --git a/static/ng/resources/js/components/repository/list-tag.directive.js b/static/ng/resources/js/components/repository/list-tag.directive.js index 751a71ca3..2ce35cb72 100644 --- a/static/ng/resources/js/components/repository/list-tag.directive.js +++ b/static/ng/resources/js/components/repository/list-tag.directive.js @@ -22,19 +22,33 @@ } }); - vm.deleteTag = deleteTag; + vm.deleteByTag = deleteByTag; function getTagComplete(response) { vm.tags = response.data; + vm.tagCount[vm.repoName] = vm.tags.length; + $scope.$emit('tagCount', vm.tagCount); } function getTagFailed(response) { console.log('Failed get tag:' + response); } - function deleteTag(e) { + function deleteByTag(e) { $scope.$emit('tag', e.tag); $scope.$emit('repoName', e.repoName); + $scope.$emit('modalTitle', 'Delete tag - ' + e.tag); + + var message; + if(vm.tags.length == 1) { + message = 'After deleting the associated repository with the tag will be deleted together,
' + + 'because a repository contains at least one tag. And the corresponding image will be removed from the system.
' + + '
Delete this "' + e.tag + '" tag now?'; + }else { + message = 'Delete this "' + e.tag + '" tag now?'; + } + + $scope.$emit('modalMessage', message); } } @@ -44,6 +58,7 @@ 'restrict': 'E', 'templateUrl': '/static/ng/resources/js/components/repository/list-tag.directive.html', 'scope': { + 'tagCount': '=', 'associateId': '=', 'repoName': '=' }, diff --git a/static/ng/resources/js/services/repository/services.delete-repository.js b/static/ng/resources/js/services/repository/services.delete-repository.js index 1e609f7bb..9d26c1bcb 100644 --- a/static/ng/resources/js/services/repository/services.delete-repository.js +++ b/static/ng/resources/js/services/repository/services.delete-repository.js @@ -11,9 +11,13 @@ return DeleteRepository; - function DeleteRepository(repository) { - + function DeleteRepository(repoName, tag) { + var params = (tag === '') ? {'repo_name' : repoName} : {'repo_name': repoName, 'tag': tag}; + console.log(params); + return $http + .delete('/api/repositories', { + 'params': params + }); } - } })(); \ No newline at end of file diff --git a/views/ng/sections/header-include.htm b/views/ng/sections/header-include.htm index 78efee531..4e4ad7a16 100644 --- a/views/ng/sections/header-include.htm +++ b/views/ng/sections/header-include.htm @@ -104,6 +104,7 @@ +