|
4 | 4 | angular.module('openshiftConsole').component('processTemplateDialog', { |
5 | 5 | controller: [ |
6 | 6 | '$scope', |
| 7 | + '$filter', |
| 8 | + 'Catalog', |
7 | 9 | 'DataService', |
| 10 | + 'KeywordService', |
| 11 | + 'NotificationsService', |
| 12 | + 'ProjectsService', |
| 13 | + 'RecentlyViewedProjectsService', |
8 | 14 | ProcessTemplateDialog |
9 | 15 | ], |
10 | 16 | controllerAs: '$ctrl', |
11 | 17 | bindings: { |
12 | 18 | template: '<', |
| 19 | + project: '<', |
| 20 | + useProjectTemplate: '<', |
13 | 21 | onDialogClosed: '&' |
14 | 22 | }, |
15 | 23 | templateUrl: 'views/directives/process-template-dialog.html' |
16 | 24 | }); |
17 | 25 |
|
18 | | - function ProcessTemplateDialog($scope, DataService) { |
| 26 | + function ProcessTemplateDialog($scope, |
| 27 | + $filter, |
| 28 | + Catalog, |
| 29 | + DataService, |
| 30 | + KeywordService, |
| 31 | + NotificationsService, |
| 32 | + ProjectsService, |
| 33 | + RecentlyViewedProjectsService) { |
19 | 34 | var ctrl = this; |
20 | 35 | var validityWatcher; |
21 | 36 |
|
| 37 | + ctrl.selectStep = { |
| 38 | + id: 'projectTemplates', |
| 39 | + label: 'Selection', |
| 40 | + view: 'views/directives/process-template-dialog/process-template-select.html', |
| 41 | + hidden: ctrl.useProjectTemplate !== true, |
| 42 | + allowed: true, |
| 43 | + valid: false, |
| 44 | + onShow: showSelect |
| 45 | + }; |
| 46 | + |
22 | 47 | ctrl.configStep = { |
23 | 48 | id: 'configuration', |
24 | 49 | label: 'Configuration', |
|
43 | 68 |
|
44 | 69 | ctrl.$onInit = function() { |
45 | 70 | ctrl.loginBaseUrl = DataService.openshiftAPIBaseUrl(); |
| 71 | + ctrl.preSelectedProject = ctrl.selectedProject = ctrl.project; |
| 72 | + listProjects(); |
| 73 | + |
| 74 | + ctrl.projectEmptyState = { |
| 75 | + icon: 'pficon pficon-info', |
| 76 | + title: 'No Project Selected', |
| 77 | + info: 'Please select a project from the dropdown to load Templates from that project.' |
| 78 | + }; |
| 79 | + |
| 80 | + ctrl.templatesEmptyState = { |
| 81 | + icon: 'pficon pficon-info', |
| 82 | + title: 'No Templates', |
| 83 | + info: 'The selected project has no templates available to import.' |
| 84 | + }; |
| 85 | + |
| 86 | + ctrl.filterConfig = { |
| 87 | + fields: [ |
| 88 | + { |
| 89 | + id: 'keyword', |
| 90 | + title: 'Keyword', |
| 91 | + placeholder: 'Filter by Keyword', |
| 92 | + filterType: 'text' |
| 93 | + } |
| 94 | + ], |
| 95 | + inlineResults: true, |
| 96 | + showTotalCountResults: true, |
| 97 | + itemsLabel: 'Item', |
| 98 | + itemsLabelPlural: 'Items', |
| 99 | + resultsCount: 0, |
| 100 | + appliedFilters: [], |
| 101 | + onFilterChange: filterChange |
| 102 | + }; |
46 | 103 | }; |
47 | 104 |
|
48 | 105 | ctrl.$onChanges = function(changes) { |
|
52 | 109 | ctrl.iconClass = getIconClass(); |
53 | 110 | } |
54 | 111 | } |
| 112 | + if (changes.useProjectTemplate) { |
| 113 | + initializeSteps(); |
| 114 | + } |
55 | 115 | }; |
56 | 116 |
|
57 | 117 | $scope.$on('templateInstantiated', function(event, message) { |
|
85 | 145 | } |
86 | 146 | }; |
87 | 147 |
|
| 148 | + ctrl.onProjectSelected = function(project) { |
| 149 | + ctrl.selectedProject = project; |
| 150 | + ctrl.configStep.valid = $scope.$ctrl.form.$valid && ctrl.selectedProject; |
| 151 | + }; |
| 152 | + |
| 153 | + ctrl.templateSelected = function(template) { |
| 154 | + ctrl.selectedTemplate = template; |
| 155 | + ctrl.template = _.get(template, 'resource'); |
| 156 | + ctrl.selectStep.valid = !!template; |
| 157 | + }; |
| 158 | + |
| 159 | + ctrl.templateProjectChange = function () { |
| 160 | + ctrl.templateProjectName = _.get(ctrl.templateProject, 'metadata.name'); |
| 161 | + |
| 162 | + // Get the templates for the selected project |
| 163 | + ctrl.catalogItems = {}; |
| 164 | + ctrl.templateSelected(); |
| 165 | + |
| 166 | + Catalog.getProjectCatalogItems(ctrl.templateProjectName, false, true).then( _.spread(function(catalogServiceItems, errorMessage) { |
| 167 | + ctrl.catalogItems = catalogServiceItems; |
| 168 | + ctrl.totalCount = ctrl.catalogItems.length; |
| 169 | + filterItems(); |
| 170 | + |
| 171 | + if (errorMessage) { |
| 172 | + NotificationsService.addNotification( |
| 173 | + { |
| 174 | + type: "error", |
| 175 | + message: errorMessage |
| 176 | + } |
| 177 | + ); |
| 178 | + } |
| 179 | + })); |
| 180 | + }; |
| 181 | + |
88 | 182 | function getIconClass() { |
89 | 183 | var icon = _.get(ctrl, 'template.metadata.annotations.iconClass', 'fa fa-clone'); |
90 | 184 | return (icon.indexOf('icon-') !== -1) ? 'font-icon ' + icon : icon; |
91 | 185 | } |
92 | 186 |
|
93 | 187 | function initializeSteps() { |
94 | | - ctrl.steps = [ctrl.configStep, ctrl.resultsStep]; |
| 188 | + if (!ctrl.steps) { |
| 189 | + ctrl.steps = [ctrl.selectStep, ctrl.configStep, ctrl.resultsStep]; |
| 190 | + } |
95 | 191 | } |
96 | 192 |
|
97 | 193 | function clearValidityWatcher() { |
|
101 | 197 | } |
102 | 198 | } |
103 | 199 |
|
| 200 | + function showSelect() { |
| 201 | + ctrl.selectStep.selected = true; |
| 202 | + ctrl.configStep.selected = false; |
| 203 | + ctrl.resultsStep.selected = false; |
| 204 | + ctrl.nextTitle = "Next >"; |
| 205 | + clearValidityWatcher(); |
| 206 | + listProjects(); |
| 207 | + } |
| 208 | + |
104 | 209 | function showConfig() { |
| 210 | + ctrl.selectStep.selected = false; |
105 | 211 | ctrl.configStep.selected = true; |
106 | 212 | ctrl.resultsStep.selected = false; |
107 | 213 | ctrl.nextTitle = "Create"; |
108 | 214 | ctrl.resultsStep.allowed = ctrl.configStep.valid; |
109 | 215 |
|
110 | 216 | validityWatcher = $scope.$watch("$ctrl.form.$valid", function(isValid) { |
111 | | - ctrl.configStep.valid = isValid; |
| 217 | + ctrl.configStep.valid = isValid && ctrl.selectedProject; |
112 | 218 | ctrl.resultsStep.allowed = isValid; |
113 | 219 | }); |
114 | 220 | } |
115 | 221 |
|
116 | 222 | function showResults() { |
| 223 | + ctrl.selectStep.selected = false; |
117 | 224 | ctrl.configStep.selected = false; |
118 | 225 | ctrl.resultsStep.selected = true; |
119 | 226 | ctrl.nextTitle = "Close"; |
|
124 | 231 | function instantiateTemplate() { |
125 | 232 | $scope.$broadcast('instantiateTemplate'); |
126 | 233 | } |
| 234 | + |
| 235 | + function filterForKeywords(searchText, items) { |
| 236 | + return KeywordService.filterForKeywords(items, ['name', 'tags'], KeywordService.generateKeywords(searchText)); |
| 237 | + } |
| 238 | + |
| 239 | + function filterChange(filters) { |
| 240 | + ctrl.filterConfig.appliedFilters = filters; |
| 241 | + filterItems(); |
| 242 | + } |
| 243 | + |
| 244 | + function filterItems() { |
| 245 | + ctrl.filteredItems = ctrl.catalogItems; |
| 246 | + if (ctrl.filterConfig.appliedFilters && ctrl.filterConfig.appliedFilters.length > 0) { |
| 247 | + _.each(ctrl.filterConfig.appliedFilters, function(filter) { |
| 248 | + ctrl.filteredItems = filterForKeywords(filter.value, ctrl.filteredItems); |
| 249 | + }); |
| 250 | + } |
| 251 | + |
| 252 | + // Deselect the currently selected template if it was filtered out |
| 253 | + if (!_.includes(ctrl.filteredItems, ctrl.selectedTemplate)) { |
| 254 | + ctrl.templateSelected(); |
| 255 | + } |
| 256 | + |
| 257 | + updateFilterControls(); |
| 258 | + } |
| 259 | + |
| 260 | + function updateFilterControls() { |
| 261 | + ctrl.filterConfig.resultsCount = ctrl.filteredItems.length; |
| 262 | + |
| 263 | + if (ctrl.totalCount <= 1) { |
| 264 | + $('.filter-pf.filter-fields input').attr('disabled', ''); |
| 265 | + } else { |
| 266 | + $('.filter-pf.filter-fields input').removeAttr("disabled"); |
| 267 | + } |
| 268 | + } |
| 269 | + |
| 270 | + var updateProjects = function() { |
| 271 | + var filteredProjects = _.reject(ctrl.unfilteredProjects, 'metadata.deletionTimestamp'); |
| 272 | + var projects = _.sortBy(filteredProjects, $filter('displayName')); |
| 273 | + ctrl.searchEnabled = !_.isEmpty(filteredProjects); |
| 274 | + |
| 275 | + ctrl.templateProjects = RecentlyViewedProjectsService.orderByMostRecentlyViewed(projects); |
| 276 | + }; |
| 277 | + |
| 278 | + function listProjects() { |
| 279 | + if (!ctrl.unfilteredProjects) { |
| 280 | + ProjectsService.list().then(function(projectData) { |
| 281 | + ctrl.unfilteredProjects = _.toArray(projectData.by("metadata.name")); |
| 282 | + }, function() { |
| 283 | + ctrl.unfilteredProjects = []; |
| 284 | + }).finally(function() { |
| 285 | + updateProjects(); |
| 286 | + }); |
| 287 | + } |
| 288 | + } |
127 | 289 | } |
128 | 290 | })(); |
0 commit comments