Download as
Browse Code »

Commit 3a6dd5ca472673816b65942618d05b6f04a7bc4c

Authored by Leonardo Merlin
1 parent 2f7d4504
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

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
  Diff comments   View file @3a6dd5c
... ... @@ -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
  Diff comments   View file @3a6dd5c
... ... @@ -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>
... ...