diff --git a/endpoints/api/image.py b/endpoints/api/image.py index bfec31996..014bed412 100644 --- a/endpoints/api/image.py +++ b/endpoints/api/image.py @@ -11,7 +11,7 @@ from data import model from util.cache import cache_control_flask_restful -def image_view(image, image_map, include_locations=True, include_ancestors=True): +def image_view(image, image_map, include_ancestors=True): extended_props = image if image.storage and image.storage.id: extended_props = image.storage @@ -34,9 +34,6 @@ def image_view(image, image_map, include_locations=True, include_ancestors=True) 'sort_index': len(image.ancestors), } - if include_locations: - image_data['locations'] = list(image.storage.locations) - if include_ancestors: # Calculate the ancestors string, with the DBID's replaced with the docker IDs. ancestors = [docker_id(a) for a in image.ancestors.split('/')] @@ -48,7 +45,7 @@ def image_view(image, image_map, include_locations=True, include_ancestors=True) def historical_image_view(image, image_map): ancestors = [image_map[a] for a in image.ancestors.split('/')[1:-1]] normal_view = image_view(image, image_map) - normal_view['history'] = [image_view(parent, image_map, False, False) for parent in ancestors] + normal_view['history'] = [image_view(parent, image_map, False) for parent in ancestors] return normal_view @@ -60,7 +57,11 @@ class RepositoryImageList(RepositoryParamResource): @nickname('listRepositoryImages') def get(self, namespace, repository): """ List the images for the specified repository. """ - all_images = model.image.get_repository_images(namespace, repository) + repo = model.repository.get_repository(namespace, repository) + if not repo: + raise NotFound() + + all_images = model.image.get_repository_images_without_placements(repo) all_tags = model.tag.list_repository_tags(namespace, repository) tags_by_image_id = defaultdict(list) diff --git a/static/directives/image-info-sidebar.html b/static/directives/image-info-sidebar.html index ed89bb0ec..657aac6db 100644 --- a/static/directives/image-info-sidebar.html +++ b/static/directives/image-info-sidebar.html @@ -82,7 +82,7 @@ -
+
diff --git a/static/directives/multiselect-dropdown.html b/static/directives/multiselect-dropdown.html index c4fbf4f74..03b4919fe 100644 --- a/static/directives/multiselect-dropdown.html +++ b/static/directives/multiselect-dropdown.html @@ -1,7 +1,12 @@
@@ -25,7 +30,7 @@
-
  • +
  • No matching {{ itemName }}s found
    diff --git a/static/directives/repo-view/repo-panel-changes.html b/static/directives/repo-view/repo-panel-changes.html index 094df41b0..aed147d9d 100644 --- a/static/directives/repo-view/repo-panel-changes.html +++ b/static/directives/repo-view/repo-panel-changes.html @@ -3,14 +3,14 @@ error-message="'Could not load repository images'">

    Visualize Tags: - {{ item }}

    -
    +
    No tags selected to view
    Please select one or more tags above. @@ -18,7 +18,7 @@
    -
    +
    diff --git a/static/directives/repo-view/repo-panel-tags.html b/static/directives/repo-view/repo-panel-tags.html index a99681846..62fd389b3 100644 --- a/static/directives/repo-view/repo-panel-tags.html +++ b/static/directives/repo-view/repo-panel-tags.html @@ -58,6 +58,16 @@
    +
    + All {{ tags.length }} visible tags are selected. + Clear selection. +
    + +
    + All {{ tagsPerPage }} tags on this page are selected. + Select all {{ tags.length }} tags currently visible. +
    +
    @@ -88,7 +98,7 @@ diff --git a/static/js/directives/repo-view/repo-panel-changes.js b/static/js/directives/repo-view/repo-panel-changes.js index 585d03c51..bfbd83304 100644 --- a/static/js/directives/repo-view/repo-panel-changes.js +++ b/static/js/directives/repo-view/repo-panel-changes.js @@ -98,6 +98,11 @@ angular.module('quay').directive('repoPanelChanges', function () { controller: function($scope, $element, $timeout, ApiService, UtilService, ImageMetadataService) { $scope.tagNames = []; + $scope.$watch('selectedTags', function(selectedTags) { + if (!selectedTags) { return; } + $scope.selectedTagsSlice = selectedTags.slice(0, 10); + }); + var update = function() { if (!$scope.repository || !$scope.isEnabled) { return; } @@ -117,12 +122,12 @@ angular.module('quay').directive('repoPanelChanges', function () { $scope.tracker = new RepositoryImageTracker($scope.repository, $scope.images); - if ($scope.selectedTags && $scope.selectedTags.length) { + if ($scope.selectedTagsSlice && $scope.selectedTagsSlice.length) { refreshTree(); } }; - $scope.$watch('selectedTags', update) + $scope.$watch('selectedTagsSlice', update) $scope.$watch('repository', update); $scope.$watch('isEnabled', update); @@ -134,7 +139,7 @@ angular.module('quay').directive('repoPanelChanges', function () { var refreshTree = function() { if (!$scope.repository || !$scope.images || !$scope.isEnabled) { return; } - if ($scope.selectedTags.length < 1) { return; } + if ($scope.selectedTagsSlice.length < 1) { return; } $('#image-history-container').empty(); @@ -146,7 +151,7 @@ angular.module('quay').directive('repoPanelChanges', function () { $scope.getTimeSince, ImageMetadataService.getEscapedFormattedCommand, function(tag) { - return $.inArray(tag, $scope.selectedTags) >= 0; + return $.inArray(tag, $scope.selectedTagsSlice) >= 0; }); $scope.tree = tree.draw('image-history-container'); @@ -154,7 +159,7 @@ angular.module('quay').directive('repoPanelChanges', function () { // Give enough time for the UI to be drawn before we resize the tree. $timeout(function() { $scope.tree.notifyResized(); - $scope.setTag($scope.selectedTags[0]); + $scope.setTag($scope.selectedTagsSlice[0]); }, 100); // Listen for changes to the selected tag and image in the tree. diff --git a/static/js/directives/repo-view/repo-panel-tags.js b/static/js/directives/repo-view/repo-panel-tags.js index 98ef1ac71..fcdf14782 100644 --- a/static/js/directives/repo-view/repo-panel-tags.js +++ b/static/js/directives/repo-view/repo-panel-tags.js @@ -22,6 +22,8 @@ angular.module('quay').directive('repoPanelTags', function () { var orderBy = $filter('orderBy'); $scope.checkedTags = UIService.createCheckStateController([], 'name'); + $scope.checkedTags.setPage(0); + $scope.options = { 'predicate': 'last_modified_datetime', 'reverse': false, @@ -32,6 +34,7 @@ angular.module('quay').directive('repoPanelTags', function () { $scope.tagHistory = {}; $scope.tagActionHandler = null; $scope.showingHistory = false; + $scope.tagsPerPage = 50; var setTagState = function() { if (!$scope.repository || !$scope.selectedTags) { return; } @@ -99,22 +102,38 @@ angular.module('quay').directive('repoPanelTags', function () { $scope.imageMap = imageMap; $scope.imageTracks = imageTracks; + $scope.options.page = 0; $scope.tags = ordered; $scope.allTags = allTags; - $scope.checkedTags = UIService.createCheckStateController(ordered, 'name', checked); - $scope.checkedTags.listen(function(checked) { - $scope.selectedTags = checked.map(function(tag_info) { + $scope.checkedTags = UIService.createCheckStateController(ordered, 'name'); + $scope.checkedTags.setPage($scope.options.page, $scope.tagsPerPage); + + $scope.checkedTags.listen(function(allChecked, pageChecked) { + $scope.selectedTags = allChecked.map(function(tag_info) { return tag_info.name; }); + + $scope.fullPageSelected = ((pageChecked.length == $scope.tagsPerPage) && + (allChecked.length != $scope.tags.length)); + $scope.allTagsSelected = ((allChecked.length > $scope.tagsPerPage) && + (allChecked.length == $scope.tags.length)); }); + + $scope.checkedTags.setChecked(checked); } $scope.$watch('options.predicate', setTagState); $scope.$watch('options.reverse', setTagState); $scope.$watch('options.tagFilter', setTagState); + $scope.$watch('options.page', function(page) { + if (page != null && $scope.checkedTags) { + $scope.checkedTags.setPage(page, $scope.tagsPerPage); + } + }); + $scope.$watch('selectedTags', function(selectedTags) { if (!selectedTags || !$scope.repository || !$scope.imageMap) { return; } @@ -130,6 +149,14 @@ angular.module('quay').directive('repoPanelTags', function () { setTagState(); }); + $scope.clearSelectedTags = function() { + $scope.checkedTags.setChecked([]); + }; + + $scope.selectAllTags = function() { + $scope.checkedTags.setChecked($scope.tags); + }; + $scope.showHistory = function(value, opt_tagname) { $scope.options.historyFilter = opt_tagname ? opt_tagname : ''; $scope.showingHistory = value; diff --git a/static/js/pages/repo-view.js b/static/js/pages/repo-view.js index f5324ed5b..884dcae18 100644 --- a/static/js/pages/repo-view.js +++ b/static/js/pages/repo-view.js @@ -36,19 +36,6 @@ // Make sure we track the current user. UserService.updateUserIn($scope); - // Watch the selected tags and update the URL accordingly. - $scope.$watch('viewScope.selectedTags', function(selectedTags) { - if (!selectedTags || !$scope.viewScope.repository) { return; } - - var tags = filterTags(selectedTags); - if (!tags.length) { - $location.search('tag', null); - return; - } - - $location.search('tag', tags.join(',')); - }, true); - // Watch the repository to filter any tags removed. $scope.$watch('viewScope.repository', function(repository) { if (!repository) { return; } @@ -178,539 +165,4 @@ loadImages(callback); }; } - - function OldRepoViewCtrl($scope, $sanitize, Restangular, ImageMetadataService, ApiService, $routeParams, $rootScope, $location, $timeout, Config, UtilService) { - $scope.Config = Config; - - var namespace = $routeParams.namespace; - var name = $routeParams.name; - - $scope.pullCommands = []; - $scope.currentPullCommand = null; - - $rootScope.title = 'Loading...'; - - // Watch for the destruction of the scope. - $scope.$on('$destroy', function() { - if ($scope.tree) { - $scope.tree.dispose(); - } - }); - - // Watch for changes to the repository. - $scope.$watch('repo', function() { - $timeout(function() { - if ($scope.tree) { - $scope.tree.notifyResized(); - } - }); - }); - - // Watch for changes to the tag parameter. - $scope.$on('$routeUpdate', function(){ - if ($location.search().tag) { - $scope.setTag($location.search().tag, false); - } else if ($location.search().image) { - $scope.setImage($location.search().image, false); - } else { - $scope.setTag($location.search().tag, false); - } - }); - - // Start scope methods ////////////////////////////////////////// - - $scope.buildDialogShowCounter = 0; - $scope.getFormattedCommand = ImageMetadataService.getFormattedCommand; - - $scope.setCurrentPullCommand = function(pullCommand) { - $scope.currentPullCommand = pullCommand; - }; - - $scope.updatePullCommand = function() { - $scope.pullCommands = []; - - if ($scope.currentTag) { - $scope.pullCommands.push({ - 'title': 'docker pull (Tag ' + $scope.currentTag.name + ')', - 'shortTitle': 'Pull Tag', - 'icon': 'fa-tag', - 'command': 'docker pull ' + Config.getDomain() + '/' + namespace + '/' + name + ':' + $scope.currentTag.name - }); - } - - $scope.pullCommands.push({ - 'title': 'docker pull (Full Repository)', - 'shortTitle': 'Pull Repo', - 'icon': 'fa-code-fork', - 'command': 'docker pull ' + Config.getDomain() + '/' + namespace + '/' + name - }); - - if ($scope.currentTag) { - var squash = 'curl -L -f ' + Config.getHost('ACCOUNTNAME:PASSWORDORTOKEN'); - squash += '/c1/squash/' + namespace + '/' + name + '/' + $scope.currentTag.name; - squash += ' | docker load'; - - $scope.pullCommands.push({ - 'title': 'Squashed image (Tag ' + $scope.currentTag.name + ')', - 'shortTitle': 'Squashed', - 'icon': 'fa-file-archive-o', - 'command': squash, - 'experimental': true - }); - } - - $scope.currentPullCommand = $scope.pullCommands[0]; - }; - - $scope.showNewBuildDialog = function() { - $scope.buildDialogShowCounter++; - }; - - $scope.handleBuildStarted = function(build) { - getBuildInfo($scope.repo); - startBuildInfoTimer($scope.repo); - }; - - $scope.showBuild = function(buildInfo) { - $location.path('/repository/' + namespace + '/' + name + '/build'); - $location.search('current', buildInfo.id); - }; - - $scope.isPushing = function(images) { - if (!images) { return false; } - - var cached = images.__isPushing; - if (cached !== undefined) { - return cached; - } - - return images.__isPushing = $scope.isPushingInternal(images); - }; - - $scope.isPushingInternal = function(images) { - if (!images) { return false; } - - for (var i = 0; i < images.length; ++i) { - if (images[i].uploading) { return true; } - } - - return false; - }; - - $scope.getTooltipCommand = function(image) { - var sanitized = ImageMetadataService.getEscapedFormattedCommand(image); - return '' + sanitized + ''; - }; - - $scope.updateForDescription = function(content) { - $scope.repo.description = content; - $scope.repo.put(); - }; - - $scope.parseDate = function(dateString) { - return Date.parse(dateString); - }; - - $scope.getTimeSince = function(createdTime) { - return moment($scope.parseDate(createdTime)).fromNow(); - }; - - $scope.loadImageChanges = function(image) { - if (!image) { return; } - - var params = {'repository': namespace + '/' + name, 'image_id': image.id}; - $scope.currentImageChangeResource = ApiService.getImageChangesAsResource(params).get(function(ci) { - $scope.currentImageChanges = ci; - }); - }; - - $scope.getMoreCount = function(changes) { - if (!changes) { return 0; } - var addedDisplayed = Math.min(2, changes.added.length); - var removedDisplayed = Math.min(2, changes.removed.length); - var changedDisplayed = Math.min(2, changes.changed.length); - - return (changes.added.length + changes.removed.length + changes.changed.length) - - addedDisplayed - removedDisplayed - changedDisplayed; - }; - - $scope.showAddTag = function(image) { - $scope.toTagImage = image; - $('#addTagModal').modal('show'); - setTimeout(function() { - $('#tagName').focus(); - }, 500); - }; - - $scope.isOwnedTag = function(image, tagName) { - if (!image || !tagName) { return false; } - return image.tags.indexOf(tagName) >= 0; - }; - - $scope.isAnotherImageTag = function(image, tagName) { - if (!image || !tagName) { return false; } - return image.tags.indexOf(tagName) < 0 && $scope.repo.tags[tagName]; - }; - - $scope.askDeleteTag = function(tagName) { - if (!$scope.repo.can_admin) { return; } - - $scope.tagToDelete = tagName; - $('#confirmdeleteTagModal').modal('show'); - }; - - $scope.findImageForTag = function(tag) { - return tag && $scope.imageByDockerId && $scope.imageByDockerId[tag.image_id]; - }; - - $scope.createOrMoveTag = function(image, tagName, opt_invalid) { - if (opt_invalid) { return; } - - $scope.creatingTag = true; - - var params = { - 'repository': $scope.repo.namespace + '/' + $scope.repo.name, - 'tag': tagName - }; - - var data = { - 'image': image.id - }; - - var errorHandler = ApiService.errorDisplay('Cannot create or move tag', function(resp) { - $('#addTagModal').modal('hide'); - }); - - ApiService.changeTagImage(data, params).then(function(resp) { - $scope.creatingTag = false; - loadViewInfo(); - $('#addTagModal').modal('hide'); - }, errorHandler); - }; - - $scope.deleteTag = function(tagName) { - if (!$scope.repo.can_admin) { return; } - - var params = { - 'repository': namespace + '/' + name, - 'tag': tagName - }; - - var errorHandler = ApiService.errorDisplay('Cannot delete tag', function() { - $('#confirmdeleteTagModal').modal('hide'); - $scope.deletingTag = false; - }); - - $scope.deletingTag = true; - - ApiService.deleteFullTag(null, params).then(function() { - loadViewInfo(); - $('#confirmdeleteTagModal').modal('hide'); - $scope.deletingTag = false; - }, errorHandler); - }; - - $scope.getImagesForTagBySize = function(tag) { - var images = []; - forAllTagImages(tag, function(image) { - images.push(image); - }); - - images.sort(function(a, b) { - return b.size - a.size; - }); - - return images; - }; - - $scope.getTotalSize = function(tag) { - var size = 0; - forAllTagImages(tag, function(image) { - size += image.size; - }); - return size; - }; - - $scope.setImage = function(imageId, opt_updateURL) { - if (!$scope.images) { return; } - - var image = null; - for (var i = 0; i < $scope.images.length; ++i) { - var currentImage = $scope.images[i]; - if (currentImage.id == imageId || currentImage.id.substr(0, 12) == imageId) { - image = currentImage; - break; - } - } - - if (!image) { return; } - - $scope.currentTag = null; - $scope.currentImage = image; - $scope.loadImageChanges(image); - if ($scope.tree) { - $scope.tree.setImage(image.id); - } - - if (opt_updateURL) { - $location.search('tag', null); - $location.search('image', imageId.substr(0, 12)); - } - - $scope.updatePullCommand(); - }; - - $scope.setTag = function(tagName, opt_updateURL) { - var repo = $scope.repo; - if (!repo) { return; } - - var proposedTag = repo.tags[tagName]; - if (!proposedTag) { - // We must find a good default. - for (tagName in repo.tags) { - if (!proposedTag || tagName == 'latest') { - proposedTag = repo.tags[tagName]; - } - } - } - - if (proposedTag) { - $scope.currentTag = proposedTag; - $scope.currentImage = null; - - if ($scope.tree) { - $scope.tree.setTag(proposedTag.name); - } - - if (opt_updateURL) { - $location.search('image', null); - $location.search('tag', proposedTag.name); - } - } - - if ($scope.currentTag && !repo.tags[$scope.currentTag.name]) { - $scope.currentTag = null; - $scope.currentImage = null; - } - - $scope.updatePullCommand(); - }; - - $scope.getTagCount = function(repo) { - if (!repo) { return 0; } - var count = 0; - for (var tag in repo.tags) { - ++count; - } - return count; - }; - - $scope.hideTagMenu = function(tagName, clientX, clientY) { - $scope.currentMenuTag = null; - - var tagMenu = $("#tagContextMenu"); - tagMenu.hide(); - }; - - $scope.showTagMenu = function(tagName, clientX, clientY) { - if (!$scope.repo.can_admin) { return; } - - $scope.currentMenuTag = tagName; - - var tagMenu = $("#tagContextMenu"); - tagMenu.css({ - display: "block", - left: clientX, - top: clientY - }); - - tagMenu.on("blur", function() { - setTimeout(function() { - tagMenu.hide(); - }, 100); // Needed to allow clicking on menu items. - }); - - tagMenu.on("click", "a", function() { - setTimeout(function() { - tagMenu.hide(); - }, 100); // Needed to allow clicking on menu items. - }); - - tagMenu[0].focus(); - }; - - var getDefaultTag = function() { - if ($scope.repo === undefined) { - return undefined; - } else if ($scope.repo.tags.hasOwnProperty('latest')) { - return $scope.repo.tags['latest']; - } else { - for (key in $scope.repo.tags) { - return $scope.repo.tags[key]; - } - } - }; - - var forAllTagImages = function(tag, callback) { - if (!tag || !$scope.imageByDockerId) { return; } - - var tag_image = $scope.imageByDockerId[tag.image_id]; - if (!tag_image) { return; } - - // Callback the tag's image itself. - callback(tag_image); - - // Callback any parent images. - if (!tag_image.ancestors) { return; } - var ancestors = tag_image.ancestors.split('/'); - for (var i = 0; i < ancestors.length; ++i) { - var image = $scope.imageByDockerId[ancestors[i]]; - if (image) { - callback(image); - } - } - }; - - var fetchRepository = function() { - var params = {'repository': namespace + '/' + name}; - $rootScope.title = 'Loading Repository...'; - $scope.repository = ApiService.getRepoAsResource(params).get(function(repo) { - // Set the repository object. - $scope.repo = repo; - - // Set the default tag. - $scope.setTag($routeParams.tag); - - // Set the title of the page. - var qualifiedRepoName = namespace + '/' + name; - $rootScope.title = qualifiedRepoName; - var kind = repo.is_public ? 'public' : 'private'; - $rootScope.description = jQuery(UtilService.getFirstMarkdownLineAsText(repo.description)).text() || - 'Visualization of images and tags for ' + kind + ' Docker repository: ' + qualifiedRepoName; - - // Load the builds for this repository. If none are active it will cancel the poll. - startBuildInfoTimer(repo); - }); - }; - - var startBuildInfoTimer = function(repo) { - if ($scope.interval) { return; } - - getBuildInfo(repo); - $scope.interval = setInterval(function() { - $scope.$apply(function() { getBuildInfo(repo); }); - }, 5000); - - $scope.$on("$destroy", function() { - cancelBuildInfoTimer(); - }); - }; - - var cancelBuildInfoTimer = function() { - if ($scope.interval) { - clearInterval($scope.interval); - } - }; - - var getBuildInfo = function(repo) { - var params = { - 'repository': repo.namespace + '/' + repo.name - }; - - ApiService.getRepoBuilds(null, params, true).then(function(resp) { - // Build a filtered list of the builds that are currently running. - var runningBuilds = []; - for (var i = 0; i < resp.builds.length; ++i) { - var build = resp.builds[i]; - if (build['phase'] != 'complete' && build['phase'] != 'error') { - runningBuilds.push(build); - } - } - - var existingBuilds = $scope.runningBuilds || []; - $scope.runningBuilds = runningBuilds; - $scope.buildHistory = resp.builds; - - if (!runningBuilds.length) { - // Cancel the build timer. - cancelBuildInfoTimer(); - - // Mark the repo as no longer building. - $scope.repo.is_building = false; - - // Reload the repo information if all of the builds recently finished. - if (existingBuilds.length > 0) { - loadViewInfo(); - } - } - }); - }; - - var listImages = function() { - var params = {'repository': namespace + '/' + name}; - $scope.imageHistory = ApiService.listRepositoryImagesAsResource(params).get(function(resp) { - $scope.images = resp.images; - $scope.specificImages = []; - - // Build various images for quick lookup of images. - $scope.imageByDockerId = {}; - for (var i = 0; i < $scope.images.length; ++i) { - var currentImage = $scope.images[i]; - $scope.imageByDockerId[currentImage.id] = currentImage; - } - - // Dispose of any existing tree. - if ($scope.tree) { - $scope.tree.dispose(); - } - - // Create the new tree. - var tree = new ImageHistoryTree(namespace, name, resp.images, - UtilService.getFirstMarkdownLineAsText, $scope.getTimeSince, ImageMetadataService.getEscapedFormattedCommand); - - $scope.tree = tree.draw('image-history-container'); - if ($scope.tree) { - // If we already have a tag, use it - if ($scope.currentTag) { - $scope.tree.setTag($scope.currentTag.name); - } - - // Listen for changes to the selected tag and image in the tree. - $($scope.tree).bind('tagChanged', function(e) { - $scope.$apply(function() { $scope.setTag(e.tag, true); }); - }); - - $($scope.tree).bind('imageChanged', function(e) { - $scope.$apply(function() { $scope.setImage(e.image.id, true); }); - }); - - $($scope.tree).bind('showTagMenu', function(e) { - $scope.$apply(function() { $scope.showTagMenu(e.tag, e.clientX, e.clientY); }); - }); - - $($scope.tree).bind('hideTagMenu', function(e) { - $scope.$apply(function() { $scope.hideTagMenu(); }); - }); - } - - if ($routeParams.image) { - $scope.setImage($routeParams.image); - } - - $timeout(function() { - $scope.tree.notifyResized(); - }, 100); - - return resp.images; - }); - }; - - var loadViewInfo = function() { - fetchRepository(); - listImages(); - }; - - // Fetch the repository itself as well as the image history. - loadViewInfo(); - } })(); \ No newline at end of file diff --git a/static/js/services/ui-service.js b/static/js/services/ui-service.js index 7158eea8a..20e765258 100644 --- a/static/js/services/ui-service.js +++ b/static/js/services/ui-service.js @@ -2,14 +2,16 @@ * Service which provides helper methods for performing some simple UI operations. */ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$location', function($timeout, $rootScope, $location) { - var CheckStateController = function(items, itemKey, opt_checked) { + var CheckStateController = function(items, itemKey) { this.items = items; - this.itemKey = itemKey; - this.checked = opt_checked || []; - this.checkedMap = {}; - this.listeners_ = []; + this.checked = []; - this.buildMap_(); + this.allItems_ = items; + this.allCheckedMap_ = {}; + + this.itemKey_ = itemKey; + this.listeners_ = []; + this.page_ = null; }; CheckStateController.prototype.listen = function(callback) { @@ -17,7 +19,7 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio }; CheckStateController.prototype.isChecked = function(item) { - return !!this.checkedMap[item[this.itemKey]]; + return !!this.allCheckedMap_[item[this.itemKey_]]; }; CheckStateController.prototype.toggleItem = function(item) { @@ -29,38 +31,59 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio }; CheckStateController.prototype.toggleItems = function() { + this.updateMap_(this.checked, false); + if (this.checked.length) { this.checked = []; - this.checkedMap = {}; } else { this.checked = this.items.slice(); - this.buildMap_(); } + + this.updateMap_(this.checked, true); this.callListeners_(); }; - CheckStateController.prototype.setChecked = function(items) { - this.checked = items.slice(); - this.buildMap_(); + CheckStateController.prototype.setPage = function(page, pageSize) { + this.items = this.allItems_.slice(page * pageSize, (page + 1) * pageSize); + this.rebuildCheckedList_(); }; - CheckStateController.prototype.buildMap_ = function() { + CheckStateController.prototype.setChecked = function(items) { + this.allCheckedMap_ = {}; + this.updateMap_(items, true); + this.rebuildCheckedList_(); + }; + + CheckStateController.prototype.rebuildCheckedList_ = function() { var that = this; - this.checked.forEach(function(item) { + this.checked = []; + this.items.forEach(function(item) { + if (that.allCheckedMap_[item[that.itemKey_]]) { + that.checked.push(item); + } + }); + + this.callListeners_(); + }; + + CheckStateController.prototype.updateMap_ = function(items, is_checked) { + var that = this; + items.forEach(function(item) { if (item == null) { return; } - that.checkedMap[item[that.itemKey]] = true; + that.allCheckedMap_[item[that.itemKey_]] = is_checked; }); }; CheckStateController.prototype.checkByFilter = function(filter) { + this.updateMap_(this.checked, false); this.checked = $.grep(this.items, filter); - this.buildMap_(); + this.updateMap_(this.checked, true); this.callListeners_(); }; CheckStateController.prototype.checkItem = function(item) { this.checked.push(item); - this.checkedMap[item[this.itemKey]] = true; + this.allCheckedMap_[item[this.itemKey_]] = true; this.callListeners_(); }; @@ -68,17 +91,30 @@ angular.module('quay').factory('UIService', ['$timeout', '$rootScope', '$locatio this.checked = $.grep(this.checked, function(cItem) { return cItem != item; }); - this.checkedMap[item[this.itemKey]] = false; + + this.allCheckedMap_[item[this.itemKey_]] = false; this.callListeners_(); }; CheckStateController.prototype.callListeners_ = function() { - var checked = this.checked; + var that = this; + var allCheckedMap = this.allCheckedMap_; + var allChecked = []; + + this.allItems_.forEach(function(item) { + var key = item[that.itemKey_]; + if (!!allCheckedMap[key]) { + allChecked.push(item); + } + }); + this.listeners_.map(function(listener) { - listener(checked); + listener(allChecked, that.checked); }); }; + ////////////////////////////////////////////////////////////////////////////////////// + var uiService = {}; uiService.hidePopover = function(elem) {