Commit c0c46b5eccbebbc718bad687d6a8b341d51961c1
1 parent
ef3b9ec3
Exists in
master
and in
8 other branches
Refact: paginator is more generic now
Showing
10 changed files
with
89 additions
and
182 deletions
Show diff stats
src/app/components/app-paginator/app-paginator.directive.js
... | ... | @@ -19,31 +19,36 @@ |
19 | 19 | $log.debug('AppPaginatorController'); |
20 | 20 | } |
21 | 21 | |
22 | - AppPaginatorController.prototype.init = function () { | |
22 | + AppPaginatorController.prototype.init = function() { | |
23 | 23 | var vm = this; |
24 | 24 | |
25 | 25 | vm.page = vm.page || 1; |
26 | 26 | vm.perPage = vm.perPage || 20; |
27 | 27 | vm.total = vm.total || 0; |
28 | + | |
29 | + if ((vm.total % vm.perPage) === 0) { | |
30 | + vm.pages = vm.total / vm.perPage; | |
31 | + } else { | |
32 | + vm.pages = (vm.total / vm.perPage) + 1; | |
33 | + } | |
34 | + | |
35 | + vm.arraypages = new Array(Math.floor(vm.pages)); | |
28 | 36 | }; |
29 | 37 | |
30 | - AppPaginatorController.prototype.showPage = function (pageIndex) { | |
38 | + AppPaginatorController.prototype.showPage = function(pageIndex) { | |
31 | 39 | var vm = this; |
32 | 40 | |
33 | - if (pageIndex < 0) { | |
34 | - pageIndex = 0; | |
41 | + if (pageIndex < 1) { | |
42 | + pageIndex = 1; | |
35 | 43 | } |
36 | 44 | |
37 | - if (pageIndex > (vm.arraypages.length-1)) { | |
38 | - pageIndex = vm.arraypages.length-1; | |
45 | + if (pageIndex > vm.pages) { | |
46 | + pageIndex = vm.pages; | |
39 | 47 | } |
40 | 48 | |
41 | - if(vm.changePage){ | |
42 | - vm.changePage({pageIndex: (pageIndex + 1 )}); | |
43 | - }else{ | |
44 | - vm.proposalsPerPage = vm.getProposalsPerPage(pageIndex); | |
49 | + if (vm.changePage) { | |
50 | + vm.changePage({pageIndex: pageIndex}); | |
45 | 51 | } |
46 | - vm.currentPageIndex = pageIndex; | |
47 | 52 | }; |
48 | 53 | |
49 | 54 | var directive = { |
... | ... | @@ -60,7 +65,6 @@ |
60 | 65 | bindToController: true |
61 | 66 | }; |
62 | 67 | |
63 | - | |
64 | 68 | return directive; |
65 | 69 | } |
66 | 70 | ... | ... |
src/app/components/app-paginator/app-paginator.html
1 | -<nav ng-if="vm.arraypages.length > 1"> | |
1 | +<nav class="app-paginator" ng-if="vm.arraypages.length > 1"> | |
2 | 2 | <ul class="pagination"> |
3 | - <li ng-style="{'visibility': (vm.currentPageIndex === 0) ? 'hidden' : 'visible'}"> | |
4 | - <a class="btn-pagination" href="#" aria-label="Previous" ng-click="vm.showPage(vm.currentPageIndex-1)"> | |
3 | + <li ng-style="{'visibility': (vm.page === 1) ? 'hidden' : 'visible'}"> | |
4 | + <a class="btn-pagination" href="#" aria-label="Previous" ng-click="vm.showPage(vm.page-1)"> | |
5 | 5 | <span aria-hidden="true" class="glyphicon glyphicon-chevron-left pagination-icon"></span> |
6 | 6 | </a> |
7 | 7 | </li> |
8 | - <li ng-repeat="paginas in vm.arraypages track by $index" ng-class="{ 'active' : ($index) == vm.currentPageIndex }" > | |
9 | - <a class="btn-pagination" href="#" ng-click="vm.showPage($index)">{{::($index)+1}}</a> | |
8 | + <li ng-repeat="paginas in vm.arraypages track by $index" ng-class="{ 'active' : ($index) === (vm.page - 1) }" > | |
9 | + <a class="btn-pagination" href="#" ng-click="vm.showPage($index + 1)">{{::($index)+1}}</a> | |
10 | 10 | </li> |
11 | - <li ng-style="{'visibility': (vm.currentPageIndex === (vm.arraypages.length -1)) ? 'hidden' : 'visible'}"> | |
12 | - <a class="btn-pagination" href="#" aria-label="Next" ng-click="vm.showPage(vm.currentPageIndex+1)"> | |
11 | + <li ng-style="{'visibility': (vm.page === vm.arraypages.length) ? 'hidden' : 'visible'}"> | |
12 | + <a class="btn-pagination" href="#" aria-label="Next" ng-click="vm.showPage(vm.page+1)"> | |
13 | 13 | <span aria-hidden="true" class="glyphicon glyphicon-chevron-right pagination-icon"></span> |
14 | 14 | </a> |
15 | 15 | </li> | ... | ... |
... | ... | @@ -0,0 +1,40 @@ |
1 | +.app-paginator { | |
2 | + text-align: center; | |
3 | + | |
4 | + .btn-pagination { | |
5 | + background-color: transparent; | |
6 | + border: none; | |
7 | + border-radius: 100%; | |
8 | + font-weight: bold; | |
9 | + font-size: 20px; | |
10 | + padding: 0px 8px; | |
11 | + width: 28px; | |
12 | + height: 28px; | |
13 | + text-decoration: underline; | |
14 | + color: $defaultblue; | |
15 | + } | |
16 | + | |
17 | + .pagination-icon { | |
18 | + color: $defaultblue; | |
19 | + } | |
20 | + | |
21 | + .pagination > .active > a, | |
22 | + .pagination > .active > a:hover, | |
23 | + .pagination > .active > a:focus, | |
24 | + .pagination > .active > span, | |
25 | + .pagination > .active > span:hover, | |
26 | + .pagination > .active > span:focus { | |
27 | + background-color: $defaultblue; | |
28 | + text-decoration: none; | |
29 | + | |
30 | + } | |
31 | + | |
32 | + .pagination > .disabled > span, | |
33 | + .pagination > .disabled > span:hover, | |
34 | + .pagination > .disabled > span:focus, | |
35 | + .pagination > .disabled > a, | |
36 | + .pagination > .disabled > a:hover, | |
37 | + .pagination > .disabled > a:focus { | |
38 | + background-color: transparent; | |
39 | + } | |
40 | +} | ... | ... |
src/app/components/article-service/article.service.js
... | ... | @@ -96,16 +96,6 @@ |
96 | 96 | } |
97 | 97 | |
98 | 98 | function getProposals (params, cbSuccess, cbError) { |
99 | - // Ex.: /api/v1/articles/103358?fields= | |
100 | - | |
101 | - // var url = service.apiArticles + API.articleId.home; | |
102 | - | |
103 | - // UtilService.get(url, {params: paramsExtended}).then(function(data){ | |
104 | - // cbSuccess(data); | |
105 | - // }).catch(function(error){ | |
106 | - // cbError(error); | |
107 | - // }); | |
108 | - | |
109 | 99 | var paramsExtended = angular.extend({ |
110 | 100 | query: '' |
111 | 101 | }, params); |
... | ... | @@ -253,8 +243,9 @@ |
253 | 243 | // Ex.: /api/v1/search/article?type=ProposalsDiscussionPlugin::Proposal&query=cisternas |
254 | 244 | var url = '/api/v1/search/article'; |
255 | 245 | var paramsExtended = angular.extend({ |
256 | - // 'fields[]': ['id', 'title', 'slug', 'abstract', 'categories', 'setting', 'children_count', 'hits'], | |
257 | - 'type': 'ProposalsDiscussionPlugin::Proposal' | |
246 | + page: 1, | |
247 | + per_page: 20, | |
248 | + type: 'ProposalsDiscussionPlugin::Proposal' | |
258 | 249 | }, params); |
259 | 250 | |
260 | 251 | UtilService.get(url, {params: paramsExtended}).then(function(data){ | ... | ... |
src/app/components/proposal-list/proposal-list.directive.js
... | ... | @@ -9,20 +9,16 @@ |
9 | 9 | function proposalList() { |
10 | 10 | |
11 | 11 | /** @ngInject */ |
12 | - function ProposalListController(ArticleService, $state, $scope, $element, $timeout, $log) { | |
12 | + function ProposalListController($state, $element, $timeout, $log) { | |
13 | 13 | $log.debug('ProposalListController'); |
14 | 14 | |
15 | 15 | var vm = this; |
16 | - vm.ArticleService = ArticleService; | |
17 | 16 | vm.$state = $state; |
18 | - vm.$scope = $scope; | |
19 | 17 | vm.$element = $element; |
20 | 18 | vm.$timeout = $timeout; |
21 | 19 | vm.$log = $log; |
22 | 20 | |
23 | 21 | vm.init(); |
24 | - vm.loadData(); | |
25 | - vm.attachListeners(); | |
26 | 22 | } |
27 | 23 | |
28 | 24 | ProposalListController.prototype.init = function () { |
... | ... | @@ -33,76 +29,11 @@ |
33 | 29 | throw { name: 'NotDefined', message: 'The attribute "proposals" is undefined.'}; |
34 | 30 | } |
35 | 31 | |
36 | - if(!vm.perPage){ | |
37 | - vm.perPage = 5; | |
38 | - } | |
39 | - | |
40 | - vm.initPorposalList(); | |
41 | - }; | |
42 | - | |
43 | - ProposalListController.prototype.initPorposalList = function () { | |
44 | - var vm = this; | |
45 | - | |
46 | - vm.currentPageIndex = 0; | |
47 | - vm.proposalsPerPage = vm.getProposalsPerPage(0); | |
48 | - vm.proposalsLength = vm.total || vm.proposals.length; | |
49 | - | |
50 | - if ((vm.proposalsLength % vm.perPage) === 0) { | |
51 | - vm.pages = vm.proposalsLength / vm.perPage; | |
52 | - } else{ | |
53 | - vm.pages = (vm.proposalsLength / vm.perPage) + 1; | |
54 | - } | |
55 | - | |
56 | - // vm.arraypages = new Array(Math.ceil(vm.pages)); | |
57 | - vm.arraypages = new Array(Math.floor(vm.pages)); | |
58 | - }; | |
59 | - | |
60 | - ProposalListController.prototype.loadData = function () { | |
61 | - // async values | |
62 | - var vm = this; | |
63 | - | |
64 | - // requeue to wait until DOM be created | |
65 | 32 | vm.$timeout(function(){ |
66 | 33 | attachPopover.call(vm); |
67 | 34 | }, 1000); |
68 | 35 | }; |
69 | 36 | |
70 | - ProposalListController.prototype.attachListeners = function () { | |
71 | - var vm = this; | |
72 | - | |
73 | - vm.$scope.$watch('vm.proposals', function(/*newValue, oldValue*/) { | |
74 | - vm.initPorposalList(); | |
75 | - }); | |
76 | - }; | |
77 | - | |
78 | - ProposalListController.prototype.getProposalsPerPage = function (pageIndex) { | |
79 | - var vm = this; | |
80 | - | |
81 | - var initialIndex = pageIndex * vm.perPage; | |
82 | - var finalIndex = initialIndex + vm.perPage; | |
83 | - | |
84 | - return vm.proposals.slice(initialIndex, finalIndex); | |
85 | - }; | |
86 | - | |
87 | - ProposalListController.prototype.showPage = function (pageIndex) { | |
88 | - var vm = this; | |
89 | - | |
90 | - if (pageIndex < 0) { | |
91 | - pageIndex = 0; | |
92 | - } | |
93 | - | |
94 | - if (pageIndex > (vm.arraypages.length-1)) { | |
95 | - pageIndex = vm.arraypages.length-1; | |
96 | - } | |
97 | - | |
98 | - if(vm.changePage){ | |
99 | - vm.changePage({pageIndex: (pageIndex + 1 )}); | |
100 | - }else{ | |
101 | - vm.proposalsPerPage = vm.getProposalsPerPage(pageIndex); | |
102 | - } | |
103 | - vm.currentPageIndex = pageIndex; | |
104 | - }; | |
105 | - | |
106 | 37 | ProposalListController.prototype.showContent = function (proposal) { |
107 | 38 | var vm = this; |
108 | 39 | |
... | ... | @@ -132,11 +63,7 @@ |
132 | 63 | restrict: 'E', |
133 | 64 | templateUrl: 'app/components/proposal-list/proposal-list.html', |
134 | 65 | scope: { |
135 | - proposals: '=', | |
136 | - page: '=', | |
137 | - perPage: '=', | |
138 | - total: '=', | |
139 | - changePage: '&' | |
66 | + proposals: '=' | |
140 | 67 | }, |
141 | 68 | controller: ProposalListController, |
142 | 69 | controllerAs: 'vm', | ... | ... |
src/app/components/proposal-list/proposal-list.html
1 | 1 | <div class="proposal-list"> |
2 | - <div class="" ng-if="vm.loading"> | |
3 | - <div class="">Carregando...</div> | |
4 | - </div> | |
5 | - <div class="" ng-if="!vm.loading && vm.proposalsPerPage"> | |
2 | + <div class="" ng-if="vm.proposals"> | |
6 | 3 | <table class="table table-striped"> |
7 | 4 | <thead> |
8 | 5 | <tr> |
... | ... | @@ -14,7 +11,7 @@ |
14 | 11 | </tr> |
15 | 12 | </thead> |
16 | 13 | <tbody> |
17 | - <tr ng-repeat="proposal in vm.proposalsPerPage"> | |
14 | + <tr ng-repeat="proposal in vm.proposals"> | |
18 | 15 | <td class="color-theme-fg"> |
19 | 16 | <span class="position">{{::proposal.ranking_position}}º</span> |
20 | 17 | </td> |
... | ... | @@ -38,22 +35,5 @@ |
38 | 35 | </tr> |
39 | 36 | </tbody> |
40 | 37 | </table> |
41 | - <nav ng-if="vm.arraypages.length > 1"> | |
42 | - <ul class="pagination"> | |
43 | - <li ng-style="{'visibility': (vm.currentPageIndex === 0) ? 'hidden' : 'visible'}"> | |
44 | - <a class="btn-pagination" href="#" aria-label="Previous" ng-click="vm.showPage(vm.currentPageIndex-1)"> | |
45 | - <span aria-hidden="true" class="glyphicon glyphicon-chevron-left pagination-icon"></span> | |
46 | - </a> | |
47 | - </li> | |
48 | - <li ng-repeat="paginas in vm.arraypages track by $index" ng-class="{ 'active' : ($index) == vm.currentPageIndex }" > | |
49 | - <a class="btn-pagination" href="#" ng-click="vm.showPage($index)">{{::($index)+1}}</a> | |
50 | - </li> | |
51 | - <li ng-style="{'visibility': (vm.currentPageIndex === (vm.arraypages.length -1)) ? 'hidden' : 'visible'}"> | |
52 | - <a class="btn-pagination" href="#" aria-label="Next" ng-click="vm.showPage(vm.currentPageIndex+1)"> | |
53 | - <span aria-hidden="true" class="glyphicon glyphicon-chevron-right pagination-icon"></span> | |
54 | - </a> | |
55 | - </li> | |
56 | - </ul> | |
57 | - </nav> | |
58 | 38 | </div> |
59 | 39 | </div> | ... | ... |
src/app/components/proposal-list/proposal-list.scss
... | ... | @@ -80,45 +80,4 @@ |
80 | 80 | } |
81 | 81 | } |
82 | 82 | |
83 | - .btn-pagination { | |
84 | - background-color: transparent; | |
85 | - border: none; | |
86 | - border-radius: 100%; | |
87 | - font-weight: bold; | |
88 | - font-size: 20px; | |
89 | - padding: 0px 8px; | |
90 | - width: 28px; | |
91 | - height: 28px; | |
92 | - text-decoration: underline; | |
93 | - color: $defaultblue; | |
94 | - } | |
95 | - | |
96 | - .pagination-icon { | |
97 | - color: $defaultblue; | |
98 | - } | |
99 | - | |
100 | - .pagination > .active > a, | |
101 | - .pagination > .active > a:hover, | |
102 | - .pagination > .active > a:focus, | |
103 | - .pagination > .active > span, | |
104 | - .pagination > .active > span:hover, | |
105 | - .pagination > .active > span:focus { | |
106 | - background-color: $defaultblue; | |
107 | - text-decoration: none; | |
108 | - | |
109 | - } | |
110 | - | |
111 | - .pagination > .disabled > span, | |
112 | - .pagination > .disabled > span:hover, | |
113 | - .pagination > .disabled > span:focus, | |
114 | - .pagination > .disabled > a, | |
115 | - .pagination > .disabled > a:hover, | |
116 | - .pagination > .disabled > a:focus { | |
117 | - background-color: transparent; | |
118 | - } | |
119 | - | |
120 | - nav { | |
121 | - text-align: center; | |
122 | - } | |
123 | - | |
124 | 83 | } | ... | ... |
src/app/components/social-share/social-share.html
... | ... | @@ -3,11 +3,12 @@ |
3 | 3 | </div> |
4 | 4 | <ul class="social-share list-inline"> |
5 | 5 | <li> |
6 | + <!-- socialshare-via="687948707977695" --> | |
6 | 7 | <a href="#" role="button" |
7 | 8 | socialshare |
8 | 9 | socialshare-provider="facebook" |
9 | 10 | socialshare-type="feed" |
10 | - socialshare-via="687948707977695" | |
11 | + socialshare-via="476168325877872" | |
11 | 12 | socialshare-url="http://dialoga.gov.br" |
12 | 13 | socialshare-redirect-uri="https://dialoga.gov.br/" |
13 | 14 | socialshare-media="http://dialoga.gov.br/images/logo.png" | ... | ... |
src/app/pages/ranking/ranking.controller.js
... | ... | @@ -26,7 +26,7 @@ |
26 | 26 | var vm = this; |
27 | 27 | |
28 | 28 | vm.page = 1; |
29 | - vm.per_page = 3; | |
29 | + vm.per_page = 20; | |
30 | 30 | vm.themes = null; |
31 | 31 | vm.selectedTheme = null; |
32 | 32 | vm.filtredPrograms = null; |
... | ... | @@ -135,7 +135,10 @@ |
135 | 135 | |
136 | 136 | // load Proposals |
137 | 137 | vm.loadingProposals = true; |
138 | - vm.DialogaService.getProposals({}, function(data){ | |
138 | + vm.DialogaService.getProposals({ | |
139 | + page: vm.page, | |
140 | + per_page: vm.per_page | |
141 | + }, function(data){ | |
139 | 142 | vm.proposals = data.articles; |
140 | 143 | vm.filtredProposals = vm.proposals; |
141 | 144 | vm.loadingProposals = false; |
... | ... | @@ -155,7 +158,7 @@ |
155 | 158 | vm.selectedTheme = selectedCategory; |
156 | 159 | }); |
157 | 160 | |
158 | - vm.$scope.$watch('pageRanking.selectedTheme', function(newValue, oldValue) { | |
161 | + vm.$scope.$watch('pageRanking.selectedTheme', function(newValue/*, oldValue*/) { | |
159 | 162 | vm.search.tema = newValue ? newValue.slug : null; |
160 | 163 | vm.$location.search('tema', vm.search.tema); |
161 | 164 | |
... | ... | @@ -170,7 +173,7 @@ |
170 | 173 | vm.selectedProgram = selectedTopic; |
171 | 174 | }); |
172 | 175 | |
173 | - vm.$scope.$watch('pageRanking.selectedProgram', function(newValue, oldValue) { | |
176 | + vm.$scope.$watch('pageRanking.selectedProgram', function(newValue/*, oldValue*/) { | |
174 | 177 | vm.search.programa = newValue ? newValue.slug : null; |
175 | 178 | vm.$location.search('programa', vm.search.programa); |
176 | 179 | vm.filterProposals(); |
... | ... | @@ -193,6 +196,7 @@ |
193 | 196 | RankingPageController.prototype.changePage = function(pageIndex) { |
194 | 197 | var vm = this; |
195 | 198 | |
199 | + vm.page = pageIndex; | |
196 | 200 | vm.filterProposals(pageIndex); |
197 | 201 | }; |
198 | 202 | |
... | ... | @@ -206,14 +210,9 @@ |
206 | 210 | |
207 | 211 | var page = _page || vm.page; |
208 | 212 | var per_page = _per_page || vm.per_page; |
209 | - var input = vm.proposals; | |
210 | - var output = input; | |
211 | 213 | var query = vm.query; |
212 | - var selectedTheme = vm.selectedTheme; | |
213 | 214 | var selectedProgram = vm.selectedProgram; |
214 | 215 | |
215 | - var filter = vm.$filter('filter'); | |
216 | - | |
217 | 216 | if (selectedProgram) { |
218 | 217 | var params = { |
219 | 218 | page: page, |
... | ... | @@ -225,7 +224,7 @@ |
225 | 224 | |
226 | 225 | vm.loadingProposals = true; |
227 | 226 | vm.DialogaService.searchProposals(params, function(data){ |
228 | - vm.total_proposals = data._obj.headers('total'); | |
227 | + vm.total_proposals = parseInt(data._obj.headers('total')); | |
229 | 228 | vm.filtredProposals = data.articles; |
230 | 229 | vm.loadingProposals = false; |
231 | 230 | }, function (error) { | ... | ... |
src/app/pages/ranking/ranking.html
... | ... | @@ -47,8 +47,14 @@ |
47 | 47 | </div> |
48 | 48 | |
49 | 49 | <div class="row"> |
50 | - <div class="col-sm-12" ng-if="pageRanking.proposals"> | |
51 | - <proposal-list proposals="pageRanking.filtredProposals" per-page="pageRanking.per_page" total="pageRanking.total_proposals" change-page="pageRanking.changePage(pageIndex)"></proposal-list> | |
50 | + <div class="col-sm-12" ng-if="pageRanking.filtredProposals && pageRanking.total_proposals"> | |
51 | + <proposal-list proposals="pageRanking.filtredProposals" per-page="pageRanking.per_page" total="pageRanking.total_proposals"></proposal-list> | |
52 | + <app-paginator | |
53 | + page="pageRanking.page" | |
54 | + per-page="pageRanking.per_page" | |
55 | + total="pageRanking.total_proposals" | |
56 | + change-page="pageRanking.changePage(pageIndex)" | |
57 | + ></app-paginator> | |
52 | 58 | </div> |
53 | 59 | <div class="col-sm-12" ng-if="pageRanking.loadingProposals"> |
54 | 60 | <div class="alert alert-info" role="alert"> | ... | ... |