Commit 3a6dd5ca472673816b65942618d05b6f04a7bc4c
1 parent
2f7d4504
Exists in
master
and in
8 other branches
Add filter and search into inicioPage
Showing
2 changed files
with
159 additions
and
9 deletions
Show diff stats
src/app/pages/inicio/inicio.controller.js
... | ... | @@ -7,12 +7,14 @@ |
7 | 7 | .controller('InicioPageController', InicioPageController); |
8 | 8 | |
9 | 9 | /** @ngInject */ |
10 | - function InicioPageController(DialogaService, $scope, $sce, $log) { | |
10 | + function InicioPageController(DialogaService, $scope, $location, $filter, $sce, $log) { | |
11 | 11 | var vm = this; |
12 | 12 | |
13 | 13 | // aliases |
14 | 14 | vm.DialogaService = DialogaService; |
15 | 15 | vm.$scope = $scope; |
16 | + vm.$location = $location; | |
17 | + vm.$filter = $filter; | |
16 | 18 | vm.$sce = $sce; |
17 | 19 | vm.$log = $log; |
18 | 20 | |
... | ... | @@ -29,11 +31,13 @@ |
29 | 31 | vm.programs = null; |
30 | 32 | vm.filtredPrograms = null; |
31 | 33 | vm.query = null; |
34 | + vm.search = vm.$location.search(); | |
32 | 35 | |
33 | 36 | vm.error = null; |
34 | 37 | |
35 | 38 | vm.loadData(); |
36 | 39 | vm.attachListeners(); |
40 | + vm.filter(); | |
37 | 41 | }; |
38 | 42 | |
39 | 43 | InicioPageController.prototype.loadData = function() { |
... | ... | @@ -52,7 +56,7 @@ |
52 | 56 | hideBackground(2000); |
53 | 57 | } |
54 | 58 | |
55 | - loadAfterHome(); | |
59 | + _loadAfterHome(); | |
56 | 60 | |
57 | 61 | vm.loading = false; |
58 | 62 | }, function(error) { |
... | ... | @@ -69,7 +73,7 @@ |
69 | 73 | vm.eventsError = true; |
70 | 74 | }); |
71 | 75 | |
72 | - function loadAfterHome () { | |
76 | + function _loadAfterHome () { | |
73 | 77 | |
74 | 78 | // Load theme list |
75 | 79 | vm.DialogaService.getThemes(function(data) { |
... | ... | @@ -112,11 +116,157 @@ |
112 | 116 | InicioPageController.prototype.attachListeners = function() { |
113 | 117 | var vm = this; |
114 | 118 | |
115 | - vm.$scope.$on('change-selectedCategory', function (selectedCategory) { | |
119 | + vm.$scope.$on('change-selectedCategory', function (event, selectedCategory) { | |
116 | 120 | vm.selectedTheme = selectedCategory; |
117 | 121 | }); |
122 | + | |
123 | + vm.$scope.$watch('pageInicio.selectedTheme', function(newValue/*, oldValue*/) { | |
124 | + vm.search.tema = newValue ? newValue.slug : null; | |
125 | + vm.$location.search('tema', vm.search.tema); | |
126 | + vm.filtredPrograms = vm.getFiltredPrograms(); | |
127 | + }); | |
128 | + | |
129 | + vm.$scope.$watch('pageInicio.query', function(newValue/*, oldValue*/) { | |
130 | + vm.search.filtro = newValue ? newValue : null; | |
131 | + vm.$location.search('filtro', vm.search.filtro); | |
132 | + vm.filtredPrograms = vm.getFiltredPrograms(); | |
133 | + }); | |
134 | + }; | |
135 | + | |
136 | + InicioPageController.prototype.filter = function() { | |
137 | + var vm = this; | |
138 | + | |
139 | + if (vm.search && vm.search.tema) { | |
140 | + var slug = vm.search.tema; | |
141 | + vm.ArticleService.getCategoryBySlug(slug, function(category){ | |
142 | + vm.selectedTheme = category; | |
143 | + }, function(error){ | |
144 | + vm.$log.error('Error when try to "getCategoryBySlug"', error); | |
145 | + }); | |
146 | + } | |
147 | + }; | |
148 | + | |
149 | + InicioPageController.prototype.showAllPrograms = function($event) { | |
150 | + var vm = this; | |
151 | + $event.stopPropagation(); | |
152 | + | |
153 | + vm.resetFilterValues(); | |
154 | + | |
155 | + vm.filtredPrograms = vm.getFiltredPrograms(); | |
156 | + }; | |
157 | + | |
158 | + InicioPageController.prototype.resetFilterValues = function() { | |
159 | + var vm = this; | |
160 | + | |
161 | + vm.query = null; | |
162 | + vm.selectedTheme = null; | |
163 | + }; | |
164 | + | |
165 | + InicioPageController.prototype.getFiltredPrograms = function() { | |
166 | + var vm = this; | |
167 | + | |
168 | + if(!vm.programs){ | |
169 | + vm.$log.warn('No programs loaded yet. Abort.'); | |
170 | + return null; | |
171 | + } | |
172 | + | |
173 | + var input = vm.programs; | |
174 | + var output = input; | |
175 | + var query = vm.query; | |
176 | + var selectedTheme = vm.selectedTheme; | |
177 | + | |
178 | + var filter = vm.$filter('filter'); | |
179 | + | |
180 | + if (selectedTheme) { | |
181 | + output = _filterByCategory(output, selectedTheme); | |
182 | + } | |
183 | + | |
184 | + if (query) { | |
185 | + output = filter(output, query, false); | |
186 | + } | |
187 | + | |
188 | + if(!query && !selectedTheme){ | |
189 | + output = _balanceByCategory(output); | |
190 | + } | |
191 | + | |
192 | + return output; | |
118 | 193 | }; |
119 | 194 | |
195 | + function _filterByCategory (input, category) { | |
196 | + input = input || []; | |
197 | + | |
198 | + if (!category) { | |
199 | + // no filter | |
200 | + return input; | |
201 | + } | |
202 | + | |
203 | + var out = []; | |
204 | + for (var i = 0; i < input.length; i++) { | |
205 | + var program = input[i]; | |
206 | + if (program.categories[0].slug === category.slug) { | |
207 | + out.push(program); | |
208 | + } | |
209 | + } | |
210 | + | |
211 | + return out; | |
212 | + } | |
213 | + | |
214 | + function _balanceByCategory (input) { | |
215 | + var result = []; | |
216 | + var resultByCategory = {}; | |
217 | + | |
218 | + // divide by categories | |
219 | + for (var i = 0; i < input.length; i++) { | |
220 | + var program = input[i]; | |
221 | + var categorySlug = program.categories[0].slug; | |
222 | + | |
223 | + if (!resultByCategory[categorySlug]) { | |
224 | + resultByCategory[categorySlug] = []; | |
225 | + } | |
226 | + | |
227 | + resultByCategory[categorySlug].push(program); | |
228 | + } | |
229 | + | |
230 | + // shuffle each array | |
231 | + var prop = null; | |
232 | + var categoryWithPrograms = null; | |
233 | + // for (prop in resultByCategory) { | |
234 | + // if (resultByCategory.hasOwnProperty(prop)) { | |
235 | + // categoryWithPrograms = resultByCategory[prop]; | |
236 | + // resultByCategory[prop] = shuffle(categoryWithPrograms); | |
237 | + // } | |
238 | + // } | |
239 | + | |
240 | + // Concat all into result array | |
241 | + // > while has program at Lists on resultByCategory | |
242 | + var hasProgram = true; | |
243 | + while (hasProgram) { | |
244 | + | |
245 | + var foundProgram = false; | |
246 | + // each categoryList with array of program | |
247 | + prop = null; | |
248 | + categoryWithPrograms = null; | |
249 | + for (prop in resultByCategory) { | |
250 | + | |
251 | + if (resultByCategory.hasOwnProperty(prop)) { | |
252 | + categoryWithPrograms = resultByCategory[prop]; | |
253 | + | |
254 | + if (categoryWithPrograms.length > 0) { | |
255 | + var pivotProgram = categoryWithPrograms.pop(); | |
256 | + result.push(pivotProgram); | |
257 | + foundProgram = true; | |
258 | + } | |
259 | + } | |
260 | + } | |
261 | + | |
262 | + if (!foundProgram) { | |
263 | + hasProgram = false; | |
264 | + } | |
265 | + } | |
266 | + | |
267 | + return result; | |
268 | + } | |
269 | + | |
120 | 270 | function injectIframeApiJs() { |
121 | 271 | var tag = document.createElement('script'); |
122 | 272 | tag.src = 'https://www.youtube.com/iframe_api'; | ... | ... |
src/app/pages/inicio/inicio.html
... | ... | @@ -66,8 +66,8 @@ |
66 | 66 | <div class="row visible-xs"> |
67 | 67 | <div class="col-xs-12"> |
68 | 68 | <div class="input-group input-group-lg input-group-search"> |
69 | - <label for="articleQueryFilter" class="control-label sr-only">Buscar programas:</label> | |
70 | - <input id="articleQueryFilter" type="search" class="form-control input-search" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas" > | |
69 | + <label for="articleQueryFilter1" class="control-label sr-only">Buscar programas:</label> | |
70 | + <input id="articleQueryFilter1" type="search" class="form-control input-search" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas" > | |
71 | 71 | <span class="input-group-btn"> |
72 | 72 | <button type="button" class="btn btn-default" ng-click="pageInicio.search()"> |
73 | 73 | <span class="icon-circle icon-small color-theme-common-bg"> |
... | ... | @@ -98,8 +98,8 @@ |
98 | 98 | <div class="row hidden-xs"> |
99 | 99 | <div class="col-xs-12"> |
100 | 100 | <div class="input-group input-group-lg input-group-search"> |
101 | - <label for="articleQueryFilter" class="control-label sr-only">Buscar programas:</label> | |
102 | - <input id="articleQueryFilter" type="search" class="form-control input-search" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas" > | |
101 | + <label for="articleQueryFilter2" class="control-label sr-only">Buscar programas:</label> | |
102 | + <input id="articleQueryFilter2" type="search" class="form-control input-search" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas" > | |
103 | 103 | <span class="input-group-btn"> |
104 | 104 | <button type="button" class="btn btn-default" ng-click="pageInicio.search()"> |
105 | 105 | <span class="icon-circle icon-small color-theme-common-bg"> |
... | ... | @@ -115,7 +115,7 @@ |
115 | 115 | <div class="col-sm-12"> |
116 | 116 | <header class="header"> |
117 | 117 | <h2>Programas</h2> |
118 | - <button type="button" class="btn btn-link" ng-click="pageInicio.showAll($event)"> | |
118 | + <button type="button" class="btn btn-link" ng-click="pageInicio.showAllPrograms($event)"> | |
119 | 119 | <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Ver todos os {{::pageInicio.programs.length}} programas |
120 | 120 | </button> |
121 | 121 | </header> | ... | ... |