Commit e49eeeba9a4c15ebaee533a96d9808d5fba510c0
1 parent
3a6dd5ca
Exists in
master
and in
8 other branches
Add filter and search into programas page
Showing
5 changed files
with
208 additions
and
16 deletions
Show diff stats
src/app/components/dialoga-service/dialoga.service.js
... | ... | @@ -16,6 +16,7 @@ |
16 | 16 | extendedService.getAbout = getAbout; |
17 | 17 | extendedService.getTerms = getTerms; |
18 | 18 | extendedService.getThemes = getThemes; |
19 | + extendedService.getThemeBySlug = getThemeBySlug; | |
19 | 20 | extendedService.getPrograms = getPrograms; |
20 | 21 | extendedService.getProgramBySlug = getProgramBySlug; |
21 | 22 | extendedService.getProgramsRandom = getProgramsRandom; |
... | ... | @@ -88,6 +89,28 @@ |
88 | 89 | },cbError); |
89 | 90 | } |
90 | 91 | } |
92 | + function getThemeBySlug (slug, cbSuccess, cbError) { | |
93 | + if( !!CACHE.themes ){ | |
94 | + _getThemeBySlug(CACHE.themes); | |
95 | + }else{ | |
96 | + getThemes(_getThemeBySlug, cbError); | |
97 | + } | |
98 | + | |
99 | + function _getThemeBySlug () { | |
100 | + var result = null; | |
101 | + | |
102 | + for (var i = CACHE.themes.length - 1; i >= 0; i--) { | |
103 | + var theme = CACHE.themes[i]; | |
104 | + | |
105 | + if(theme && theme.slug && theme.slug === slug){ | |
106 | + result = theme; | |
107 | + break; | |
108 | + } | |
109 | + } | |
110 | + | |
111 | + cbSuccess(result); | |
112 | + } | |
113 | + } | |
91 | 114 | |
92 | 115 | function getPrograms (cbSuccess, cbError) { |
93 | 116 | if( !!CACHE.programs ){ | ... | ... |
src/app/index.route.js
src/app/pages/inicio/inicio.controller.js
... | ... | @@ -37,18 +37,14 @@ |
37 | 37 | |
38 | 38 | vm.loadData(); |
39 | 39 | vm.attachListeners(); |
40 | - vm.filter(); | |
41 | 40 | }; |
42 | 41 | |
43 | 42 | InicioPageController.prototype.loadData = function() { |
44 | 43 | var vm = this; |
45 | 44 | |
46 | - vm.loading = true; | |
47 | - vm.loadingEvents = true; | |
48 | - vm.loadingThemes = true; | |
49 | - vm.loadingPrograms = true; | |
50 | 45 | |
51 | 46 | // Load main content |
47 | + vm.loading = true; | |
52 | 48 | vm.DialogaService.getHome(function(data) { |
53 | 49 | vm.article = data.article; |
54 | 50 | |
... | ... | @@ -64,6 +60,7 @@ |
64 | 60 | }); |
65 | 61 | |
66 | 62 | // Load event list |
63 | + vm.loadingEvents = true; | |
67 | 64 | vm.DialogaService.getEvents({}, function(events) { |
68 | 65 | vm.events = events; |
69 | 66 | vm.loadingEvents = false; |
... | ... | @@ -76,6 +73,7 @@ |
76 | 73 | function _loadAfterHome () { |
77 | 74 | |
78 | 75 | // Load theme list |
76 | + vm.loadingThemes = true; | |
79 | 77 | vm.DialogaService.getThemes(function(data) { |
80 | 78 | vm.themes = data; |
81 | 79 | vm.loadingThemes = false; |
... | ... | @@ -84,6 +82,7 @@ |
84 | 82 | }); |
85 | 83 | |
86 | 84 | // Load program list |
85 | + vm.loadingPrograms = true; | |
87 | 86 | vm.DialogaService.getProgramsRandom({}, function(data) { |
88 | 87 | vm.programs = vm.article.children; |
89 | 88 | vm.filtredPrograms = data.articles; |
... | ... | @@ -91,6 +90,8 @@ |
91 | 90 | }, function(error) { |
92 | 91 | vm.$log.error('Error on getPrograms.', error); |
93 | 92 | }); |
93 | + | |
94 | + vm.filter(); | |
94 | 95 | } |
95 | 96 | |
96 | 97 | }; |
... | ... | @@ -138,10 +139,14 @@ |
138 | 139 | |
139 | 140 | if (vm.search && vm.search.tema) { |
140 | 141 | var slug = vm.search.tema; |
141 | - vm.ArticleService.getCategoryBySlug(slug, function(category){ | |
142 | - vm.selectedTheme = category; | |
142 | + vm.$log.debug('filter by theme', slug); | |
143 | + | |
144 | + vm.DialogaService.getThemeBySlug(slug, function(theme){ | |
145 | + vm.selectedTheme = theme; | |
146 | + vm.$log.debug('getThemeBySlug.slug', slug); | |
147 | + vm.$log.debug('getThemeBySlug.selectedTheme', theme); | |
143 | 148 | }, function(error){ |
144 | - vm.$log.error('Error when try to "getCategoryBySlug"', error); | |
149 | + vm.$log.error('Error when try to "getThemeBySlug"', error); | |
145 | 150 | }); |
146 | 151 | } |
147 | 152 | }; | ... | ... |
src/app/pages/programas/programas.controller.js
... | ... | @@ -6,39 +6,42 @@ |
6 | 6 | .controller('ProgramasPageController', ProgramasPageController); |
7 | 7 | |
8 | 8 | /** @ngInject */ |
9 | - function ProgramasPageController(DialogaService, $log) { | |
9 | + function ProgramasPageController(DialogaService, $scope, $location, $filter, $log) { | |
10 | 10 | var vm = this; |
11 | 11 | |
12 | 12 | vm.DialogaService = DialogaService; |
13 | + vm.$scope = $scope; | |
14 | + vm.$location = $location; | |
15 | + vm.$filter = $filter; | |
13 | 16 | vm.$log = $log; |
14 | 17 | |
15 | 18 | vm.init(); |
19 | + vm.loadData(); | |
20 | + vm.attachListeners(); | |
21 | + | |
16 | 22 | $log.debug('ProgramasPageController'); |
17 | 23 | } |
18 | 24 | |
19 | 25 | ProgramasPageController.prototype.init = function () { |
20 | 26 | var vm = this; |
21 | 27 | |
22 | - vm.article = null; | |
23 | 28 | vm.themes = null; |
24 | 29 | vm.selectedTheme = null; |
25 | 30 | vm.programs = null; |
26 | 31 | vm.filtredPrograms = null; |
27 | 32 | vm.query = null; |
33 | + vm.search = vm.$location.search(); | |
28 | 34 | |
29 | 35 | vm.loading = null; |
30 | 36 | vm.error = null; |
31 | - | |
32 | - vm.loadData(); | |
33 | 37 | }; |
34 | 38 | |
35 | - | |
36 | 39 | ProgramasPageController.prototype.loadData = function () { |
37 | 40 | var vm = this; |
38 | 41 | |
39 | 42 | vm.loading = true; |
40 | 43 | |
41 | - // load Programs | |
44 | + // // load Programs | |
42 | 45 | vm.loadingPrograms = true; |
43 | 46 | vm.DialogaService.getPrograms(function(programs){ |
44 | 47 | vm.programs = programs; |
... | ... | @@ -61,4 +64,165 @@ |
61 | 64 | vm.loadingThemes = false; |
62 | 65 | }); |
63 | 66 | }; |
67 | + | |
68 | + ProgramasPageController.prototype.attachListeners = function() { | |
69 | + var vm = this; | |
70 | + | |
71 | + vm.$scope.$on('change-selectedCategory', function (event, selectedCategory) { | |
72 | + vm.selectedTheme = selectedCategory; | |
73 | + vm.$log.debug('vm.selectedTheme', vm.selectedTheme); | |
74 | + }); | |
75 | + | |
76 | + vm.$scope.$watch('pageProgramas.selectedTheme', function(newValue/*, oldValue*/) { | |
77 | + vm.search.tema = newValue ? newValue.slug : null; | |
78 | + vm.$location.search('tema', vm.search.tema); | |
79 | + vm.filtredPrograms = vm.getFiltredPrograms(); | |
80 | + }); | |
81 | + | |
82 | + vm.$scope.$watch('pageProgramas.query', function(newValue/*, oldValue*/) { | |
83 | + vm.search.filtro = newValue ? newValue : null; | |
84 | + vm.$location.search('filtro', vm.search.filtro); | |
85 | + vm.filtredPrograms = vm.getFiltredPrograms(); | |
86 | + }); | |
87 | + }; | |
88 | + | |
89 | + ProgramasPageController.prototype.filter = function() { | |
90 | + var vm = this; | |
91 | + | |
92 | + if (vm.search && vm.search.tema) { | |
93 | + var slug = vm.search.tema; | |
94 | + vm.$log.debug('filter by theme', slug); | |
95 | + | |
96 | + vm.DialogaService.getThemeBySlug(slug, function(theme){ | |
97 | + vm.selectedTheme = theme; | |
98 | + vm.$log.debug('getThemeBySlug.slug', slug); | |
99 | + vm.$log.debug('getThemeBySlug.selectedTheme', theme); | |
100 | + }, function(error){ | |
101 | + vm.$log.error('Error when try to "getThemeBySlug"', error); | |
102 | + }); | |
103 | + } | |
104 | + }; | |
105 | + | |
106 | + ProgramasPageController.prototype.showAllPrograms = function($event) { | |
107 | + var vm = this; | |
108 | + $event.stopPropagation(); | |
109 | + | |
110 | + vm.resetFilterValues(); | |
111 | + | |
112 | + vm._showAllFlag = true; | |
113 | + | |
114 | + vm.filtredPrograms = vm.getFiltredPrograms(); | |
115 | + }; | |
116 | + | |
117 | + ProgramasPageController.prototype.resetFilterValues = function() { | |
118 | + var vm = this; | |
119 | + | |
120 | + vm.query = null; | |
121 | + vm.selectedTheme = null; | |
122 | + }; | |
123 | + | |
124 | + ProgramasPageController.prototype.getFiltredPrograms = function() { | |
125 | + var vm = this; | |
126 | + | |
127 | + if(!vm.programs){ | |
128 | + vm.$log.warn('No programs loaded yet. Abort.'); | |
129 | + return null; | |
130 | + } | |
131 | + | |
132 | + var input = vm.programs; | |
133 | + var output = input; | |
134 | + var query = vm.query; | |
135 | + var selectedTheme = vm.selectedTheme; | |
136 | + | |
137 | + var filter = vm.$filter('filter'); | |
138 | + | |
139 | + if (selectedTheme) { | |
140 | + output = _filterByCategory(output, selectedTheme); | |
141 | + } | |
142 | + | |
143 | + if (query) { | |
144 | + output = filter(output, query, false); | |
145 | + } | |
146 | + | |
147 | + if(!query && !selectedTheme && vm._showAllFlag){ | |
148 | + output = _balanceByCategory(output); | |
149 | + } | |
150 | + | |
151 | + return output; | |
152 | + }; | |
153 | + | |
154 | + function _filterByCategory (input, category) { | |
155 | + input = input || []; | |
156 | + | |
157 | + if (!category) { | |
158 | + // no filter | |
159 | + return input; | |
160 | + } | |
161 | + | |
162 | + var out = []; | |
163 | + for (var i = 0; i < input.length; i++) { | |
164 | + var program = input[i]; | |
165 | + if (program.categories[0].slug === category.slug) { | |
166 | + out.push(program); | |
167 | + } | |
168 | + } | |
169 | + | |
170 | + return out; | |
171 | + } | |
172 | + | |
173 | + function _balanceByCategory (input) { | |
174 | + var result = []; | |
175 | + var resultByCategory = {}; | |
176 | + | |
177 | + // divide by categories | |
178 | + for (var i = 0; i < input.length; i++) { | |
179 | + var program = input[i]; | |
180 | + var categorySlug = program.categories[0].slug; | |
181 | + | |
182 | + if (!resultByCategory[categorySlug]) { | |
183 | + resultByCategory[categorySlug] = []; | |
184 | + } | |
185 | + | |
186 | + resultByCategory[categorySlug].push(program); | |
187 | + } | |
188 | + | |
189 | + // shuffle each array | |
190 | + var prop = null; | |
191 | + var categoryWithPrograms = null; | |
192 | + // for (prop in resultByCategory) { | |
193 | + // if (resultByCategory.hasOwnProperty(prop)) { | |
194 | + // categoryWithPrograms = resultByCategory[prop]; | |
195 | + // resultByCategory[prop] = shuffle(categoryWithPrograms); | |
196 | + // } | |
197 | + // } | |
198 | + | |
199 | + // Concat all into result array | |
200 | + // > while has program at Lists on resultByCategory | |
201 | + var hasProgram = true; | |
202 | + while (hasProgram) { | |
203 | + | |
204 | + var foundProgram = false; | |
205 | + // each categoryList with array of program | |
206 | + prop = null; | |
207 | + categoryWithPrograms = null; | |
208 | + for (prop in resultByCategory) { | |
209 | + | |
210 | + if (resultByCategory.hasOwnProperty(prop)) { | |
211 | + categoryWithPrograms = resultByCategory[prop]; | |
212 | + | |
213 | + if (categoryWithPrograms.length > 0) { | |
214 | + var pivotProgram = categoryWithPrograms.pop(); | |
215 | + result.push(pivotProgram); | |
216 | + foundProgram = true; | |
217 | + } | |
218 | + } | |
219 | + } | |
220 | + | |
221 | + if (!foundProgram) { | |
222 | + hasProgram = false; | |
223 | + } | |
224 | + } | |
225 | + | |
226 | + return result; | |
227 | + } | |
64 | 228 | })(); | ... | ... |
src/app/pages/programas/programas.html
... | ... | @@ -72,7 +72,7 @@ |
72 | 72 | <div class="col-sm-12"> |
73 | 73 | <header class="header"> |
74 | 74 | <h2>Conheça os programas</h2> |
75 | - <button type="button" class="btn btn-link" ng-click="pageProgramas.showAll($event)"> | |
75 | + <button type="button" class="btn btn-link" ng-click="pageProgramas.showAllPrograms($event)"> | |
76 | 76 | <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Ver todos os {{::pageProgramas.programs.length}} programas |
77 | 77 | </button> |
78 | 78 | </header> | ... | ... |