Commit e49eeeba9a4c15ebaee533a96d9808d5fba510c0

Authored by Leonardo Merlin
1 parent 3a6dd5ca

Add filter and search into programas page

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
... ... @@ -9,7 +9,7 @@
9 9 function routeConfig($stateProvider, $urlRouterProvider) {
10 10 $stateProvider
11 11 .state('inicio', {
12   - url: '/?limite&tema',
  12 + url: '/?tema&query',
13 13 ncyBreadcrumb: {label: 'Home'},
14 14 reloadOnSearch: false,
15 15 views: {
... ...
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>
... ...