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> | ... | ... |