Commit 80287b3fb83b6039f68db087a3b9bb6c5a540ccd

Authored by Leonardo Merlin
1 parent 49ae9a42

respostas-page: fix basic filter and router

src/app/index.route.js
@@ -149,7 +149,7 @@ @@ -149,7 +149,7 @@
149 } 149 }
150 }) 150 })
151 .state('respostas', { 151 .state('respostas', {
152 - url: '/respostas?tema&filtro&task', 152 + url: '/respostas?tema&filtro',
153 reloadOnSearch: false, 153 reloadOnSearch: false,
154 ncyBreadcrumb: {label: 'Respostas'}, 154 ncyBreadcrumb: {label: 'Respostas'},
155 views: { 155 views: {
src/app/pages/respostas/respostas.controller.js
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 18
19 vm.init(); 19 vm.init();
20 vm.loadData(); 20 vm.loadData();
21 - // vm.attachListeners(); // attach listeners after load data (SYNC) 21 + vm.attachListeners();
22 vm.$rootScope.focusMainContent(); 22 vm.$rootScope.focusMainContent();
23 23
24 $log.debug('RespostasPageController'); 24 $log.debug('RespostasPageController');
@@ -31,11 +31,22 @@ @@ -31,11 +31,22 @@
31 vm.per_page = 10; 31 vm.per_page = 10;
32 vm.themes = null; 32 vm.themes = null;
33 vm.selectedTheme = null; 33 vm.selectedTheme = null;
34 - vm.filtredPrograms = null;  
35 vm.filtredProposals = null; 34 vm.filtredProposals = null;
36 vm.query = null; 35 vm.query = null;
37 vm.search = vm.$location.search(); 36 vm.search = vm.$location.search();
38 37
  38 + if (vm.search.tema) {
  39 + vm._filtredByThemeSlug = vm.search.tema;
  40 + }
  41 +
  42 + if (vm.search.filtro) {
  43 + vm._filtredByQuery = vm.search.filtro;
  44 + }
  45 +
  46 + if (vm.search.tema || vm.search.filtro) {
  47 + vm.loadingFilter = true;
  48 + }
  49 +
39 vm.loading = null; 50 vm.loading = null;
40 vm.error = null; 51 vm.error = null;
41 }; 52 };
@@ -57,11 +68,7 @@ @@ -57,11 +68,7 @@
57 vm.loadingThemes = false; 68 vm.loadingThemes = false;
58 vm.loading = false; 69 vm.loading = false;
59 70
60 - // REMOVED: function called twice.  
61 - // vm.loadProposals(function() {  
62 - // vm.attachListeners();  
63 - // });  
64 - vm.attachListeners(); 71 + vm.filter();
65 }, function(error) { 72 }, function(error) {
66 vm.error = error; 73 vm.error = error;
67 vm.$log.error(error); 74 vm.$log.error(error);
@@ -70,30 +77,6 @@ @@ -70,30 +77,6 @@
70 }); 77 });
71 }; 78 };
72 79
73 - // RespostasPageController.prototype.loadProposals = function(cb) {  
74 - // var vm = this;  
75 -  
76 - // // load Proposals  
77 - // vm.loadingProposals = true;  
78 - // vm.DialogaService.searchProposals({  
79 - // page: vm.page,  
80 - // per_page: vm.per_page  
81 - // }, function(data) {  
82 - // vm.filtredProposals = data.articles;  
83 - // vm.total_proposals = parseInt(data._obj.headers('total'));  
84 -  
85 - // vm.loadingProposals = false;  
86 -  
87 - // if (cb) {  
88 - // cb();  
89 - // }  
90 - // }, function(error) {  
91 - // vm.error = error;  
92 - // vm.$log.error(error);  
93 - // vm.loadingProposals = false;  
94 - // });  
95 - // };  
96 -  
97 RespostasPageController.prototype.attachListeners = function() { 80 RespostasPageController.prototype.attachListeners = function() {
98 var vm = this; 81 var vm = this;
99 82
@@ -101,16 +84,22 @@ @@ -101,16 +84,22 @@
101 vm.selectedTheme = selectedCategory; 84 vm.selectedTheme = selectedCategory;
102 }); 85 });
103 86
104 - vm.$scope.$watch('pagePropostas.selectedTheme', function(newValue/*, oldValue*/) { 87 + vm.$scope.$watch('pageRespostas.selectedTheme', function(newValue/*, oldValue*/) {
105 vm.search.tema = newValue ? newValue.slug : null; 88 vm.search.tema = newValue ? newValue.slug : null;
106 vm.$location.search('tema', vm.search.tema); 89 vm.$location.search('tema', vm.search.tema);
107 - vm.filterProposals(); 90 +
  91 + if (!vm.loadingFilter) {
  92 + vm.filterProposals();
  93 + }
108 }); 94 });
109 95
110 - vm.$scope.$watch('pagePropostas.query', function(newValue/*, oldValue*/) { 96 + vm.$scope.$watch('pageRespostas.query', function(newValue/*, oldValue*/) {
111 vm.search.filtro = newValue ? newValue : null; 97 vm.search.filtro = newValue ? newValue : null;
112 vm.$location.search('filtro', vm.search.filtro); 98 vm.$location.search('filtro', vm.search.filtro);
113 - vm.filterProposals(); 99 +
  100 + if (!vm.loadingFilter) {
  101 + vm.filterProposals();
  102 + }
114 }); 103 });
115 }; 104 };
116 105
@@ -128,6 +117,34 @@ @@ -128,6 +117,34 @@
128 vm.filterProposals(pageIndex); 117 vm.filterProposals(pageIndex);
129 }; 118 };
130 119
  120 + RespostasPageController.prototype.filter = function() {
  121 + var vm = this;
  122 +
  123 + if (vm.loadingThemes || vm.loadingProposals) {
  124 + vm.$log.info('No proposals or themes loaded yet. Abort.');
  125 + return;
  126 + }
  127 +
  128 + if (vm._filtredByThemeSlug) {
  129 + var slug = vm._filtredByThemeSlug;
  130 +
  131 + vm.DialogaService.getThemeBySlug(slug, function(theme) {
  132 + vm.selectedTheme = theme;
  133 + }, function(error) {
  134 + vm.$log.error('Error when try to "getThemeBySlug"', error);
  135 + });
  136 + }
  137 +
  138 + if (vm._filtredByQuery) {
  139 + vm.query = vm._filtredByQuery;
  140 + }
  141 +
  142 + if (vm._filtredByThemeSlug || vm._filtredByQuery) {
  143 + vm.filterProposals();
  144 + vm.loadingFilter = false;
  145 + }
  146 + };
  147 +
131 RespostasPageController.prototype.filterProposals = function(_page, _per_page) { 148 RespostasPageController.prototype.filterProposals = function(_page, _per_page) {
132 var vm = this; 149 var vm = this;
133 150
@@ -142,6 +159,7 @@ @@ -142,6 +159,7 @@
142 var params = { 159 var params = {
143 page: page, 160 page: page,
144 per_page: per_page, 161 per_page: per_page,
  162 + archived: true
145 }; 163 };
146 164
147 if (vm.selectedTheme) { 165 if (vm.selectedTheme) {
@@ -165,8 +183,6 @@ @@ -165,8 +183,6 @@
165 RespostasPageController.prototype.submitSearch = function() { 183 RespostasPageController.prototype.submitSearch = function() {
166 var vm = this; 184 var vm = this;
167 185
168 - vm.loadingFilter = true;  
169 -  
170 // scroll to result grid 186 // scroll to result grid
171 var $searchResult = angular.element('#search-result'); 187 var $searchResult = angular.element('#search-result');
172 if ($searchResult && $searchResult.length > 0) { 188 if ($searchResult && $searchResult.length > 0) {
src/app/pages/respostas/respostas.html
1 <div class="container"> 1 <div class="container">
2 - <div class="row">  
3 - <div class="col-sm-12">  
4 - <div ncy-breadcrumb></div> 2 + <div class="row">
  3 + <div class="col-sm-12">
  4 + <div ncy-breadcrumb></div>
  5 + </div>
5 </div> 6 </div>
6 - </div>  
7 </div> 7 </div>
8 -  
9 <div class="page--respostas" role="main"> 8 <div class="page--respostas" role="main">
10 - <section class="section-info" ng-if="pageRespostas.loading || pageRespostas.error">  
11 - <div class="container">  
12 - <div class="row">  
13 - <div class="col-md-12">  
14 - <div ng-if="pageRespostas.loading && !pageRespostas.error">  
15 - <div class="alert alert-info" role="alert">Carregando conteúdo...</div>  
16 - </div>  
17 -  
18 - <div ng-if="pageRespostas.error">  
19 - <div class="alert alert-danger" role="alert">  
20 - Erro ao carregar o conteúdo principal. 9 + <section class="section-info" ng-if="pageRespostas.loading || pageRespostas.error">
  10 + <div class="container">
  11 + <div class="row">
  12 + <div class="col-md-12">
  13 + <div ng-if="pageRespostas.loading && !pageRespostas.error">
  14 + <div class="alert alert-info" role="alert">Carregando conteúdo...</div>
  15 + </div>
  16 + <div ng-if="pageRespostas.error">
  17 + <div class="alert alert-danger" role="alert">
  18 + Erro ao carregar o conteúdo principal.
  19 + </div>
  20 + </div>
  21 + </div>
21 </div> 22 </div>
22 - </div>  
23 </div> 23 </div>
24 - </div>  
25 - </div>  
26 - </section>  
27 -  
28 - <section class="section--header" ng-if="pageRespostas.filtredProposals || pageRespostas.themes">  
29 - <div class="container">  
30 - <div class="row">  
31 - <div class="col-sm-12">  
32 - <h1>Respostas</h1>  
33 - </div>  
34 - </div>  
35 - </div>  
36 - </section>  
37 -  
38 - <section class="section--articles section-gray section-space-up" ng-if="pageRespostas.filtredProposals || pageRespostas.themes">  
39 - <div class="container">  
40 - <div id="lista-de-respostas" class="row">  
41 - <div class="col-sm-4 col-md-3">  
42 - <div class="row visible-xs">  
43 - <div class="col-xs-12">  
44 - <div class="input-group input-group-lg input-group-search">  
45 - <label for="articleQueryFilter" class="control-label sr-only">Buscar respostas:</label>  
46 - <input id="articleQueryFilter" type="search" class="form-control input-search" ng-model="pageRespostas.query" placeholder="Buscar respostas" aria-label="Buscar respostas">  
47 - <span class="input-group-btn">  
48 - <button type="button" class="btn btn-default" ng-click="pageRespostas.submitSearch()">  
49 - <span class="icon-circle icon-small color-theme-common-bg">  
50 - <span class="glyphicon glyphicon-search"></span>  
51 - </span>  
52 - <span class="sr-only">Buscar</span>  
53 - </button>  
54 - </span>  
55 - </div>  
56 - <br/>  
57 - </div>  
58 - </div>  
59 - <div ng-if="pageRespostas.themes">  
60 - <category-list categories="pageRespostas.themes" selected-category="pageRespostas.selectedTheme"></category-list>  
61 - </div>  
62 - <div ng-if="!pageRespostas.themes && pageRespostas.loadingThemes">  
63 - <div class="alert alert-info" role="alert">  
64 - Carregando temas. 24 + </section>
  25 + <section class="section--header" ng-if="pageRespostas.filtredProposals || pageRespostas.themes">
  26 + <div class="container">
  27 + <div class="row">
  28 + <div class="col-sm-12">
  29 + <h1>O Dialoga Brasil já respondeu às solicitações!</h1>
  30 + <p>
  31 + Vários programas contaram com centenas de participações e elas foram respondidas pelo governo.
  32 + Confira abaixo as propostas que foram respondidas:
  33 + </p>
  34 + </div>
65 </div> 35 </div>
66 - </div>  
67 - <div ng-if="!pageRespostas.themes && pageRespostas.themesError">  
68 - <div class="alert alert-danger" role="alert">  
69 - Não foi possível carregar a lista de temas neste momento.  
70 - </div>  
71 - </div>  
72 </div> 36 </div>
73 - <div class="col-sm-8 col-md-9">  
74 - <div class="row hidden-xs" ng-if="pageRespostas.filtredProposals">  
75 - <div class="col-xs-12">  
76 - <div class="input-group input-group-lg input-group-search">  
77 - <label for="articleQueryFilter" class="control-label sr-only">Buscar respostas:</label>  
78 - <input id="articleQueryFilter" type="search" class="form-control input-search" ng-model="pageRespostas.query" placeholder="Buscar respostas" aria-label="Buscar respostas">  
79 - <span class="input-group-btn">  
80 - <button type="button" class="btn btn-default" ng-click="pageRespostas.submitSearch()">  
81 - <span class="icon-circle icon-small color-theme-common-bg">  
82 - <span class="glyphicon glyphicon-search"></span>  
83 - </span>  
84 - <span class="sr-only">Buscar</span>  
85 - </button>  
86 - </span>  
87 - </div>  
88 - </div>  
89 - </div>  
90 -  
91 - <div id="search-result" class="row" ng-if="pageRespostas.filtredProposals">  
92 - <div class="col-sm-12">  
93 - <header class="header">  
94 - <h2>Total de Respostas: "<b>{{pageRespostas.total_proposals}} respostas</b>"</h2>  
95 - </header>  
96 - </div>  
97 - </div>  
98 -  
99 - <div class="row">  
100 - <div class="col-sm-12" ng-if="!pageRespostas.loadingProposals && pageRespostas.filtredProposals && pageRespostas.total_proposals">  
101 - <proposal-grid proposals="pageRespostas.filtredProposals"></proposal-grid>  
102 - <app-paginator  
103 - page="pageRespostas.page"  
104 - per-page="pageRespostas.per_page"  
105 - total="pageRespostas.total_proposals"  
106 - change-page="pageRespostas.changePage(pageIndex)"  
107 - ></app-paginator> 37 + </section>
  38 + <section class="section--articles section-gray section-space-up" ng-if="pageRespostas.filtredProposals || pageRespostas.themes">
  39 + <div class="container">
  40 + <div id="lista-de-respostas" class="row">
  41 + <div class="col-sm-4 col-md-3">
  42 + <div class="row visible-xs">
  43 + <div class="col-xs-12">
  44 + <div class="input-group input-group-lg input-group-search">
  45 + <label for="articleQueryFilter" class="control-label sr-only">Buscar respostas:</label>
  46 + <input id="articleQueryFilter" type="search" class="form-control input-search" ng-model="pageRespostas.query" placeholder="Buscar respostas" aria-label="Buscar respostas">
  47 + <div class="input-group-btn">
  48 + <button type="button" class="btn btn-default" ng-click="pageRespostas.submitSearch()">
  49 + <div class="icon-circle icon-small color-theme-common-bg">
  50 + <span class="glyphicon glyphicon-search"></span>
  51 + </div>
  52 + <span class="sr-only">Buscar</span>
  53 + </button>
  54 + </div>
  55 + </div>
  56 + <br/>
  57 + </div>
  58 + </div>
  59 + <div ng-if="pageRespostas.themes">
  60 + <category-list categories="pageRespostas.themes" selected-category="pageRespostas.selectedTheme"></category-list>
  61 + </div>
  62 + <div ng-if="!pageRespostas.themes && pageRespostas.loadingThemes">
  63 + <div class="alert alert-info" role="alert">
  64 + Carregando temas.
  65 + </div>
  66 + </div>
  67 + <div ng-if="!pageRespostas.themes && pageRespostas.themesError">
  68 + <div class="alert alert-danger" role="alert">
  69 + Não foi possível carregar a lista de temas neste momento.
  70 + </div>
  71 + </div>
  72 + </div>
  73 + <div class="col-sm-8 col-md-9">
  74 + <div class="row hidden-xs" ng-if="pageRespostas.filtredProposals">
  75 + <div class="col-xs-12">
  76 + <div class="input-group input-group-lg input-group-search">
  77 + <label for="articleQueryFilter" class="control-label sr-only">Buscar propostas:</label>
  78 + <input id="articleQueryFilter" type="search" class="form-control input-search" ng-model="pageRespostas.query" placeholder="Buscar respostas" aria-label="Buscar respostas">
  79 + <div class="input-group-btn">
  80 + <button type="button" class="btn btn-default" ng-click="pageRespostas.submitSearch()">
  81 + <div class="icon-circle icon-small color-theme-common-bg">
  82 + <span class="glyphicon glyphicon-search"></span>
  83 + </div>
  84 + <span class="sr-only">Buscar</span>
  85 + </button>
  86 + </div>
  87 + </div>
  88 + </div>
  89 + </div>
  90 + <div id="search-result" class="row" ng-if="pageRespostas.filtredProposals">
  91 + <div class="col-sm-12">
  92 + <header class="header">
  93 + <h2>Total de Propostas: "<b>{{pageRespostas.total_proposals}} propostas</b>"</h2>
  94 + </header>
  95 + </div>
  96 + </div>
  97 + <div class="row">
  98 + <div class="col-sm-12" ng-if="!pageRespostas.loadingProposals && pageRespostas.filtredProposals && pageRespostas.total_proposals">
  99 + <proposal-grid proposals="pageRespostas.filtredProposals"></proposal-grid>
  100 + <app-paginator page="pageRespostas.page" per-page="pageRespostas.per_page" total="pageRespostas.total_proposals" change-page="pageRespostas.changePage(pageIndex)"></app-paginator>
  101 + </div>
  102 + <div ng-if="pageRespostas.loadingProposals">
  103 + <div class="alert alert-info" role="alert">
  104 + Carregando propostas.
  105 + </div>
  106 + </div>
  107 + <div ng-if="!pageRespostas.loadingProposals && pageRespostas.proposalsError">
  108 + <div class="alert alert-danger" role="alert">
  109 + Não foi possível carregar a lista de propostas neste momento.
  110 + </div>
  111 + </div>
  112 + </div>
  113 + </div>
108 </div> 114 </div>
109 - <div ng-if="pageRespostas.loadingProposals">  
110 - <div class="alert alert-info" role="alert">  
111 - Carregando respostas.  
112 - </div>  
113 - </div>  
114 - <div ng-if="!pageRespostas.loadingProposals && pageRespostas.proposalsError">  
115 - <div class="alert alert-danger" role="alert">  
116 - Não foi possível carregar a lista de respostas neste momento.  
117 - </div>  
118 - </div>  
119 - </div>  
120 </div> 115 </div>
121 - </div>  
122 - </div>  
123 - </section> 116 + </section>
124 </div> 117 </div>
src/app/pages/respostas/respostas.scss
1 .page--respostas { 1 .page--respostas {
2 - // .proposal-box--middle {  
3 - // background-color: #fff;  
4 - // } 2 + .proposal-box--middle {
  3 + background-color: #fff;
  4 + }
5 5
6 - // .topics-select--wrapper {  
7 - // margin: 20px 0;  
8 - // } 6 + .topics-select--wrapper {
  7 + margin: 20px 0;
  8 + }
9 } 9 }