upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor synced 2024-09-21 08:25:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

updates on modal-dialog and its application for UI.

Browse Source
This commit is contained in:
kunw 2016-05-11 18:42:28 +08:00
parent c9a305edcd
commit 601a930219
8 changed files with 98 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/ng/resources/js/components/modal-dialog/modal-dialog.directive.html
View File

@ -3,14 +3,13 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Modal title</h4>
<h4 class="modal-title">//vm.title//</h4>
</div>
<div class="modal-body">
<p>//vm.message//</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="vm.action()">Save changes</button>
<button type="button" class="btn btn-primary" id="btnOk">OK</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

28
static/ng/resources/js/components/modal-dialog/modal-dialog.directive.js
View File

@ -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');
}
}
}

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

@ -9,16 +9,17 @@
</div>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<modal-dialog action="vm.deleteImage()" message="//vm.message//"></modal-dialog>
<modal-dialog action="vm.deleteImage()" content-type="text/html" title="//vm.modalTitle//" message="//vm.modalMessage//"></modal-dialog>
<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="" 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> &nbsp;//repo// &nbsp;&nbsp;<span class="badge">//vm.tagCount[repo]//</span>
</a>
<a class="pull-right" style="margin-right: 78px;" href="javascript:void(0)" data-toggle="modal" data-target="#myModal" ng-click="vm.deleteByRepo(repo)"><span class="glyphicon glyphicon-trash"></span></a>
</h4>
</div>
<list-tag associate-id="$index + 1" repo-name="repo"></list-tag>
<list-tag associate-id="$index + 1" repo-name="repo" tag-count="vm.tagCount"></list-tag>
</div>
</div>
</div>

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

@ -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.<br/>' +
'And the corresponding image will be removed from the system.<br/>' +
'<br/>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() {

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

@ -14,7 +14,7 @@
<td>
<pull-command repo-name="//vm.repoName//" tag="//tag//"></pull-command>
</td>
<td><a href="javascript:void(0);" data-toggle="modal" data-target="#myModal" ng-click="vm.deleteTag({repoName: vm.repoName, tag: tag})"><span class="glyphicon glyphicon-trash"></span></a></td>
<td><a href="javascript:void(0);" data-toggle="modal" data-target="#myModal" ng-click="vm.deleteByTag({repoName: vm.repoName, tag: tag})"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>

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

@ -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,<br/>' +
'because a repository contains at least one tag. And the corresponding image will be removed from the system.<br/>' +
'<br/>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': '='
},

10
static/ng/resources/js/services/repository/services.delete-repository.js
View File

@ -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
});
}
}
})();

1
views/ng/sections/header-include.htm
View File

@ -104,6 +104,7 @@
<script src="/static/ng/resources/js/services/repository/services.list-repository.js"></script>
<script src="/static/ng/resources/js/services/repository/services.list-tag.js"></script>
<script src="/static/ng/resources/js/services/repository/services.list-manifest.js"></script>
<script src="/static/ng/resources/js/services/repository/services.delete-repository.js"></script>
<script src="/static/ng/resources/js/services/project-member/services.project-member.module.js"></script>
<script src="/static/ng/resources/js/services/project-member/services.current-project-member.js"></script>