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 100  
101 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 103 // UtilService.get(url, {params: paramsExtended}).then(function(data){
109 104 // cbSuccess(data);
110 105 // }).catch(function(error){
111 106 // cbError(error);
112 107 // });
113 108  
114   - //
115   - searchProposals({
  109 + var paramsExtended = angular.extend({
116 110 query: ''
117   - }, cbSuccess, cbError);
  111 + }, params);
  112 +
  113 + searchProposals(paramsExtended, cbSuccess, cbError);
118 114 }
119 115  
120 116 function getProposalById (proposalId, params, cbSuccess, cbError) {
... ...
src/app/components/category-list/category-list.directive.js
... ... @@ -30,6 +30,12 @@
30 30 if(!vm.isCollapsed){
31 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 41 CategoryListController.prototype.selectCategory = function(category, $event) {
... ... @@ -38,11 +44,13 @@
38 44 // prevent glitch
39 45 $event.stopPropagation();
40 46  
  47 + if(!category && !vm.canUnselect){
  48 + vm.$log.info('Unselect is disabled.');
  49 + return;
  50 + }
  51 +
41 52 if (category !== vm.selectedCategory) {
42   - // selected new filter
43 53 vm.selectedCategory = category;
44   - } else {
45   - vm.selectedCategory = null;
46 54 }
47 55  
48 56 // send event to all controllers
... ... @@ -65,7 +73,8 @@
65 73 templateUrl: 'app/components/category-list/category-list.html',
66 74 scope: {
67 75 categories: '=',
68   - selectedCategory: '='
  76 + selectedCategory: '=',
  77 + canUnselect: '@'
69 78 },
70 79 controller: CategoryListController,
71 80 controllerAs: 'vm',
... ...
src/app/components/dialoga-service/dialoga.service.js
... ... @@ -19,6 +19,7 @@
19 19 extendedService.getThemeBySlug = getThemeBySlug;
20 20 extendedService.getPrograms = getPrograms;
21 21 extendedService.getProgramBySlug = getProgramBySlug;
  22 + extendedService.getProgramsByThemeId = getProgramsByThemeId;
22 23 extendedService.getProgramsRandom = getProgramsRandom;
23 24 extendedService.getEvents = getEvents; // override
24 25 extendedService.getQuestions = getQuestions;
... ... @@ -89,6 +90,7 @@
89 90 },cbError);
90 91 }
91 92 }
  93 +
92 94 function getThemeBySlug (slug, cbSuccess, cbError) {
93 95 if( !!CACHE.themes ){
94 96 _getThemeBySlug(CACHE.themes);
... ... @@ -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 173 // Ex.: /api/v1/dialoga_plugin/random_topics/103358
150 174 // TODO: get endpoint for production
151 175 // TODO: put at cache?
... ...
src/app/components/topics-select/topics-select.directive.js 0 → 100644
... ... @@ -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 @@
  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 22  
23 23 vm.init();
24 24 vm.loadData();
25   - vm.attachListeners();
  25 + // vm.attachListeners(); // attach listeners after load data (SYNC)
26 26  
27 27 $log.debug('PropostasPageController');
28 28 }
... ... @@ -32,6 +32,8 @@
32 32  
33 33 vm.themes = null;
34 34 vm.selectedTheme = null;
  35 + vm.filtredPrograms = null;
  36 + vm.selectedProgram = null;
35 37 vm.proposals = null;
36 38 vm.filtredProposals = null;
37 39 vm.query = null;
... ... @@ -46,30 +48,108 @@
46 48  
47 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 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 91 }, function (error) {
57 92 vm.error = error;
58 93 vm.$log.error(error);
59   - vm.loadingProposals = false;
  94 + vm.loadingThemes = false;
60 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 146 vm.loading = false;
  147 +
  148 + vm.attachListeners();
69 149 }, function (error) {
70 150 vm.error = error;
71 151 vm.$log.error(error);
72   - vm.loadingThemes = false;
  152 + vm.loadingProposals = false;
73 153 vm.loading = false;
74 154 });
75 155 };
... ... @@ -81,12 +161,23 @@
81 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 165 vm.search.tema = newValue ? newValue.slug : null;
86 166 vm.$location.search('tema', vm.search.tema);
87 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 181 vm.$scope.$watch('pagePropostas.query', function(newValue/*, oldValue*/) {
91 182 vm.search.filtro = newValue ? newValue : null;
92 183 vm.$location.search('filtro', vm.search.filtro);
... ... @@ -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 205 PropostasPageController.prototype.showAllPrograms = function($event) {
115 206 var vm = this;
... ... @@ -141,6 +232,7 @@
141 232 var output = input;
142 233 var query = vm.query;
143 234 var selectedTheme = vm.selectedTheme;
  235 + var selectedProgram = vm.selectedProgram;
144 236  
145 237 var filter = vm.$filter('filter');
146 238  
... ... @@ -148,6 +240,10 @@
148 240 output = _filterByCategory(output, selectedTheme);
149 241 }
150 242  
  243 + if (selectedProgram) {
  244 + output = _filterByProgram(output, selectedProgram);
  245 + }
  246 +
151 247 if (query) {
152 248 output = filter(output, query, false);
153 249 }
... ... @@ -178,4 +274,23 @@
178 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 2 .proposal-box--middle {
3 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 38 </div>
39 39 </div>
40 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 45 </div>
43 46 <div ng-if="!pagePropostas.themes && pagePropostas.loadingThemes">
44 47 <div class="alert alert-info" role="alert">
... ...