Commit 7e94f3d2e9811224e13fccca5e8e41890df584ac

Authored by Leonardo Merlin
1 parent 87efaa78

Add filter to ranking page

src/app/components/article-service/article.service.js
@@ -100,21 +100,17 @@ @@ -100,21 +100,17 @@
100 100
101 // var url = service.apiArticles + API.articleId.home; 101 // var url = service.apiArticles + API.articleId.home;
102 102
103 - // var paramsExtended = angular.extend({  
104 - // // 'fields[]': ['id', 'title', 'slug', 'abstract', 'categories', 'setting', 'children', 'children_count'],  
105 - // 'content_type':'ProposalsDiscussionPlugin::Proposal'  
106 - // }, params);  
107 -  
108 // UtilService.get(url, {params: paramsExtended}).then(function(data){ 103 // UtilService.get(url, {params: paramsExtended}).then(function(data){
109 // cbSuccess(data); 104 // cbSuccess(data);
110 // }).catch(function(error){ 105 // }).catch(function(error){
111 // cbError(error); 106 // cbError(error);
112 // }); 107 // });
113 108
114 - //  
115 - searchProposals({ 109 + var paramsExtended = angular.extend({
116 query: '' 110 query: ''
117 - }, cbSuccess, cbError); 111 + }, params);
  112 +
  113 + searchProposals(paramsExtended, cbSuccess, cbError);
118 } 114 }
119 115
120 function getProposalById (proposalId, params, cbSuccess, cbError) { 116 function getProposalById (proposalId, params, cbSuccess, cbError) {
src/app/components/category-list/category-list.directive.js
@@ -30,6 +30,12 @@ @@ -30,6 +30,12 @@
30 if(!vm.isCollapsed){ 30 if(!vm.isCollapsed){
31 vm.isCollapsed = false; 31 vm.isCollapsed = false;
32 } 32 }
  33 +
  34 + if(angular.isUndefined(vm.canUnselect) || vm.canUnselect === null){
  35 + vm.canUnselect = true;
  36 + } else {
  37 + vm.canUnselect = !(vm.canUnselect == 'false');
  38 + }
33 }; 39 };
34 40
35 CategoryListController.prototype.selectCategory = function(category, $event) { 41 CategoryListController.prototype.selectCategory = function(category, $event) {
@@ -38,11 +44,13 @@ @@ -38,11 +44,13 @@
38 // prevent glitch 44 // prevent glitch
39 $event.stopPropagation(); 45 $event.stopPropagation();
40 46
  47 + if(!category && !vm.canUnselect){
  48 + vm.$log.info('Unselect is disabled.');
  49 + return;
  50 + }
  51 +
41 if (category !== vm.selectedCategory) { 52 if (category !== vm.selectedCategory) {
42 - // selected new filter  
43 vm.selectedCategory = category; 53 vm.selectedCategory = category;
44 - } else {  
45 - vm.selectedCategory = null;  
46 } 54 }
47 55
48 // send event to all controllers 56 // send event to all controllers
@@ -65,7 +73,8 @@ @@ -65,7 +73,8 @@
65 templateUrl: 'app/components/category-list/category-list.html', 73 templateUrl: 'app/components/category-list/category-list.html',
66 scope: { 74 scope: {
67 categories: '=', 75 categories: '=',
68 - selectedCategory: '=' 76 + selectedCategory: '=',
  77 + canUnselect: '@'
69 }, 78 },
70 controller: CategoryListController, 79 controller: CategoryListController,
71 controllerAs: 'vm', 80 controllerAs: 'vm',
src/app/components/dialoga-service/dialoga.service.js
@@ -19,6 +19,7 @@ @@ -19,6 +19,7 @@
19 extendedService.getThemeBySlug = getThemeBySlug; 19 extendedService.getThemeBySlug = getThemeBySlug;
20 extendedService.getPrograms = getPrograms; 20 extendedService.getPrograms = getPrograms;
21 extendedService.getProgramBySlug = getProgramBySlug; 21 extendedService.getProgramBySlug = getProgramBySlug;
  22 + extendedService.getProgramsByThemeId = getProgramsByThemeId;
22 extendedService.getProgramsRandom = getProgramsRandom; 23 extendedService.getProgramsRandom = getProgramsRandom;
23 extendedService.getEvents = getEvents; // override 24 extendedService.getEvents = getEvents; // override
24 extendedService.getQuestions = getQuestions; 25 extendedService.getQuestions = getQuestions;
@@ -89,6 +90,7 @@ @@ -89,6 +90,7 @@
89 },cbError); 90 },cbError);
90 } 91 }
91 } 92 }
  93 +
92 function getThemeBySlug (slug, cbSuccess, cbError) { 94 function getThemeBySlug (slug, cbSuccess, cbError) {
93 if( !!CACHE.themes ){ 95 if( !!CACHE.themes ){
94 _getThemeBySlug(CACHE.themes); 96 _getThemeBySlug(CACHE.themes);
@@ -146,6 +148,28 @@ @@ -146,6 +148,28 @@
146 } 148 }
147 } 149 }
148 150
  151 + function getProgramsByThemeId (themeId, cbSuccess, cbError) {
  152 +
  153 + if( !CACHE.programs ){
  154 + getPrograms(_getProgramsByThemeId, cbError);
  155 + } else {
  156 + _getProgramsByThemeId();
  157 + }
  158 +
  159 + function _getProgramsByThemeId(){
  160 + var result = CACHE.programs.filter(function filterProgramBySlug (program) {
  161 + var category = program.categories[0];
  162 +
  163 + if(angular.equals(category.id, themeId)) {
  164 + return true;
  165 + }
  166 + return false;
  167 + });
  168 +
  169 + cbSuccess(result);
  170 + }
  171 + }
  172 +
149 // Ex.: /api/v1/dialoga_plugin/random_topics/103358 173 // Ex.: /api/v1/dialoga_plugin/random_topics/103358
150 // TODO: get endpoint for production 174 // TODO: get endpoint for production
151 // TODO: put at cache? 175 // TODO: put at cache?
src/app/components/topics-select/topics-select.directive.js 0 → 100644
@@ -0,0 +1,61 @@ @@ -0,0 +1,61 @@
  1 +(function() {
  2 + 'use strict';
  3 +
  4 + angular
  5 + .module('dialoga')
  6 + .directive('topicsSelect', topicsSelect);
  7 +
  8 + /** @ngInject */
  9 + function topicsSelect() {
  10 +
  11 + /** @ngInject */
  12 + function TopicsSelectController($rootScope, $log) {
  13 + $log.debug('TopicsSelectController');
  14 +
  15 + // alias
  16 + var vm = this;
  17 +
  18 + // dependencies
  19 + vm.$rootScope = $rootScope;
  20 + vm.$log = $log;
  21 +
  22 + // initialization
  23 + vm.init();
  24 + }
  25 +
  26 + TopicsSelectController.prototype.init = function() {
  27 + var vm = this;
  28 +
  29 + // vm.topics = null;
  30 + // vm.selectedTopic = null;
  31 + vm.topicFilter = vm.selectedTopic;
  32 + };
  33 +
  34 + TopicsSelectController.prototype.selectTopic = function() {
  35 + var vm = this;
  36 +
  37 + if (vm.topicFilter === null) {
  38 + vm.$log.debug('Default topic selected.');
  39 + return;
  40 + }
  41 +
  42 + // send event to all controllers
  43 + vm.$rootScope.$broadcast('change-selectedTopic', vm.topicFilter);
  44 + };
  45 +
  46 + var directive = {
  47 + restrict: 'E',
  48 + templateUrl: 'app/components/topics-select/topics-select.html',
  49 + scope: {
  50 + topics: '=',
  51 + selectedTopic: '='
  52 + },
  53 + controller: TopicsSelectController,
  54 + controllerAs: 'vm',
  55 + bindToController: true
  56 + };
  57 +
  58 + return directive;
  59 + }
  60 +
  61 +})();
src/app/components/topics-select/topics-select.html 0 → 100644
@@ -0,0 +1,9 @@ @@ -0,0 +1,9 @@
  1 +<div class="topics-dropdown">
  2 + <select
  3 + ng-model="vm.topicFilter"
  4 + ng-change="vm.selectTopic()"
  5 + ng-options="topic.title for topic in vm.topics track by topic.slug"
  6 + class="form-control">
  7 + <option value="">-- Selecione um programa --</option>
  8 + </select>
  9 +</div>
src/app/pages/propostas/propostas.controller.js
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 22
23 vm.init(); 23 vm.init();
24 vm.loadData(); 24 vm.loadData();
25 - vm.attachListeners(); 25 + // vm.attachListeners(); // attach listeners after load data (SYNC)
26 26
27 $log.debug('PropostasPageController'); 27 $log.debug('PropostasPageController');
28 } 28 }
@@ -32,6 +32,8 @@ @@ -32,6 +32,8 @@
32 32
33 vm.themes = null; 33 vm.themes = null;
34 vm.selectedTheme = null; 34 vm.selectedTheme = null;
  35 + vm.filtredPrograms = null;
  36 + vm.selectedProgram = null;
35 vm.proposals = null; 37 vm.proposals = null;
36 vm.filtredProposals = null; 38 vm.filtredProposals = null;
37 vm.query = null; 39 vm.query = null;
@@ -46,30 +48,108 @@ @@ -46,30 +48,108 @@
46 48
47 vm.loading = true; 49 vm.loading = true;
48 50
49 - // load Proposals  
50 - vm.loadingProposals = true;  
51 - vm.DialogaService.getProposals({}, function(data){  
52 - vm.proposals = data.articles;  
53 - vm.filtredProposals = vm.proposals;  
54 - vm.loadingProposals = false; 51 + // Behaviour:
  52 + // 1. Load themes
  53 + // 2. Select a Random Theme (T)
  54 + // 3. Load programs of T
  55 + // 4. Select a random program of T
  56 + // 5. Filter the list of proposals
  57 + // END.
  58 +
  59 + // 1. Load themes
  60 + vm.loadingThemes = true;
  61 + vm.DialogaService.getThemes(function(themes){
  62 + vm.themes = themes;
  63 + vm.loadingThemes = false;
55 vm.loading = false; 64 vm.loading = false;
  65 +
  66 + // 2. Select a Random Theme (T)
  67 + var selectedTheme = null;
  68 + if(vm.search.tema){
  69 +
  70 + // vanilla filter
  71 + var results = vm.themes.filter(function(t){
  72 + return t.slug === vm.search.tema;
  73 + });
  74 +
  75 + if(results && results.length > 0){
  76 + selectedTheme = results[0];
  77 + vm.selectedTheme = selectedTheme;
  78 + }
  79 + }
  80 +
  81 + if(!selectedTheme){
  82 + vm.selectedTheme = vm.themes[Math.floor(Math.random() * vm.themes.length)];
  83 + }
  84 +
  85 + // 3. Load programs of T
  86 + // (AND 4)
  87 + var themeId = vm.selectedTheme.id;
  88 + vm.loadPrograms(themeId, function(){
  89 + vm.loadProposals();
  90 + });
56 }, function (error) { 91 }, function (error) {
57 vm.error = error; 92 vm.error = error;
58 vm.$log.error(error); 93 vm.$log.error(error);
59 - vm.loadingProposals = false; 94 + vm.loadingThemes = false;
60 vm.loading = false; 95 vm.loading = false;
61 }); 96 });
  97 + };
62 98
63 - // load themes  
64 - vm.loadingThemes = true;  
65 - vm.DialogaService.getThemes(function(themes){  
66 - vm.themes = themes;  
67 - vm.loadingThemes = false; 99 + PropostasPageController.prototype.loadPrograms = function (themeId, cb) {
  100 + var vm = this;
  101 +
  102 + vm.DialogaService.getProgramsByThemeId(themeId, function (programs){
  103 + vm.$log.debug('programs', programs);
  104 +
  105 + vm.filtredPrograms = programs;
  106 +
  107 + // 4. Select a random program of T
  108 + var selectedProgram = null;
  109 + if(vm.search.programa){
  110 +
  111 + // vanilla filter
  112 + var results = vm.filtredPrograms.filter(function(p){
  113 + return p.slug === vm.search.programa;
  114 + });
  115 +
  116 + if(results && results.length > 0){
  117 + selectedProgram = results[0];
  118 + vm.selectedProgram = selectedProgram;
  119 + }
  120 + }
  121 +
  122 + if(!selectedProgram){
  123 + vm.selectedProgram = vm.filtredPrograms[Math.floor(Math.random() * vm.filtredPrograms.length)];
  124 + }
  125 +
  126 + if(cb){
  127 + cb();
  128 + }
  129 + }, function(error){
  130 + vm.$log.error(error);
  131 + if(cb){
  132 + cb();
  133 + }
  134 + });
  135 + };
  136 +
  137 + PropostasPageController.prototype.loadProposals = function () {
  138 + var vm = this;
  139 +
  140 + // load Proposals
  141 + vm.loadingProposals = true;
  142 + vm.DialogaService.getProposals({}, function(data){
  143 + vm.proposals = data.articles;
  144 + vm.filtredProposals = vm.proposals;
  145 + vm.loadingProposals = false;
68 vm.loading = false; 146 vm.loading = false;
  147 +
  148 + vm.attachListeners();
69 }, function (error) { 149 }, function (error) {
70 vm.error = error; 150 vm.error = error;
71 vm.$log.error(error); 151 vm.$log.error(error);
72 - vm.loadingThemes = false; 152 + vm.loadingProposals = false;
73 vm.loading = false; 153 vm.loading = false;
74 }); 154 });
75 }; 155 };
@@ -81,12 +161,23 @@ @@ -81,12 +161,23 @@
81 vm.selectedTheme = selectedCategory; 161 vm.selectedTheme = selectedCategory;
82 }); 162 });
83 163
84 - vm.$scope.$watch('pagePropostas.selectedTheme', function(newValue/*, oldValue*/) { 164 + vm.$scope.$watch('pagePropostas.selectedTheme', function(newValue, oldValue) {
85 vm.search.tema = newValue ? newValue.slug : null; 165 vm.search.tema = newValue ? newValue.slug : null;
86 vm.$location.search('tema', vm.search.tema); 166 vm.$location.search('tema', vm.search.tema);
87 vm.filtredProposals = vm.getFiltredProposals(); 167 vm.filtredProposals = vm.getFiltredProposals();
88 }); 168 });
89 169
  170 + vm.$scope.$on('change-selectedTopic', function (event, selectedTopic) {
  171 + vm.selectedProgram = selectedTopic;
  172 + vm.$log.debug('change-selectedTopic', selectedTopic);
  173 + });
  174 +
  175 + vm.$scope.$watch('pagePropostas.selectedProgram', function(newValue, oldValue) {
  176 + vm.search.programa = newValue ? newValue.slug : null;
  177 + vm.$location.search('programa', vm.search.programa);
  178 + vm.filtredProposals = vm.getFiltredProposals();
  179 + });
  180 +
90 vm.$scope.$watch('pagePropostas.query', function(newValue/*, oldValue*/) { 181 vm.$scope.$watch('pagePropostas.query', function(newValue/*, oldValue*/) {
91 vm.search.filtro = newValue ? newValue : null; 182 vm.search.filtro = newValue ? newValue : null;
92 vm.$location.search('filtro', vm.search.filtro); 183 vm.$location.search('filtro', vm.search.filtro);
@@ -94,22 +185,22 @@ @@ -94,22 +185,22 @@
94 }); 185 });
95 }; 186 };
96 187
97 - PropostasPageController.prototype.filter = function() {  
98 - var vm = this; 188 + // PropostasPageController.prototype.filter = function() {
  189 + // var vm = this;
99 190
100 - if (vm.search && vm.search.tema) {  
101 - var slug = vm.search.tema;  
102 - vm.$log.debug('filter by theme', slug); 191 + // if (vm.search && vm.search.tema) {
  192 + // var slug = vm.search.tema;
  193 + // vm.$log.debug('filter by theme', slug);
103 194
104 - vm.DialogaService.getThemeBySlug(slug, function(theme){  
105 - vm.selectedTheme = theme;  
106 - vm.$log.debug('getThemeBySlug.slug', slug);  
107 - vm.$log.debug('getThemeBySlug.selectedTheme', theme);  
108 - }, function(error){  
109 - vm.$log.error('Error when try to "getThemeBySlug"', error);  
110 - });  
111 - }  
112 - }; 195 + // vm.DialogaService.getThemeBySlug(slug, function(theme){
  196 + // vm.selectedTheme = theme;
  197 + // vm.$log.debug('getThemeBySlug.slug', slug);
  198 + // vm.$log.debug('getThemeBySlug.selectedTheme', theme);
  199 + // }, function(error){
  200 + // vm.$log.error('Error when try to "getThemeBySlug"', error);
  201 + // });
  202 + // }
  203 + // };
113 204
114 PropostasPageController.prototype.showAllPrograms = function($event) { 205 PropostasPageController.prototype.showAllPrograms = function($event) {
115 var vm = this; 206 var vm = this;
@@ -141,6 +232,7 @@ @@ -141,6 +232,7 @@
141 var output = input; 232 var output = input;
142 var query = vm.query; 233 var query = vm.query;
143 var selectedTheme = vm.selectedTheme; 234 var selectedTheme = vm.selectedTheme;
  235 + var selectedProgram = vm.selectedProgram;
144 236
145 var filter = vm.$filter('filter'); 237 var filter = vm.$filter('filter');
146 238
@@ -148,6 +240,10 @@ @@ -148,6 +240,10 @@
148 output = _filterByCategory(output, selectedTheme); 240 output = _filterByCategory(output, selectedTheme);
149 } 241 }
150 242
  243 + if (selectedProgram) {
  244 + output = _filterByProgram(output, selectedProgram);
  245 + }
  246 +
151 if (query) { 247 if (query) {
152 output = filter(output, query, false); 248 output = filter(output, query, false);
153 } 249 }
@@ -178,4 +274,23 @@ @@ -178,4 +274,23 @@
178 return out; 274 return out;
179 } 275 }
180 276
  277 + function _filterByProgram (input, program) {
  278 + input = input || [];
  279 +
  280 + if (!program) {
  281 + // no filter
  282 + return input;
  283 + }
  284 +
  285 + var out = [];
  286 + for (var i = 0; i < input.length; i++) {
  287 + var proposal = input[i];
  288 + if (proposal.parent.id === program.id) {
  289 + out.push(proposal);
  290 + }
  291 + }
  292 +
  293 + return out;
  294 + }
  295 +
181 })(); 296 })();
src/app/pages/propostas/propostas.scss
@@ -2,4 +2,8 @@ @@ -2,4 +2,8 @@
2 .proposal-box--middle { 2 .proposal-box--middle {
3 background-color: #fff; 3 background-color: #fff;
4 } 4 }
  5 +
  6 + .topics-select--wrapper {
  7 + margin: 20px 0;
  8 + }
5 } 9 }
src/app/pages/propostas/ranking.html
@@ -38,7 +38,10 @@ @@ -38,7 +38,10 @@
38 </div> 38 </div>
39 </div> 39 </div>
40 <div ng-if="pagePropostas.themes"> 40 <div ng-if="pagePropostas.themes">
41 - <category-list categories="pagePropostas.themes" selected-category="pagePropostas.selectedTheme"></category-list> 41 + <category-list categories="pagePropostas.themes" selected-category="pagePropostas.selectedTheme" can-unselect="false"></category-list>
  42 + </div>
  43 + <div ng-if="pagePropostas.filtredPrograms" class="topics-select--wrapper">
  44 + <topics-select topics="pagePropostas.filtredPrograms" selected-topic="pagePropostas.selectedProgram"></topics-select>
42 </div> 45 </div>
43 <div ng-if="!pagePropostas.themes && pagePropostas.loadingThemes"> 46 <div ng-if="!pagePropostas.themes && pagePropostas.loadingThemes">
44 <div class="alert alert-info" role="alert"> 47 <div class="alert alert-info" role="alert">