Commit c0c46b5eccbebbc718bad687d6a8b341d51961c1

Authored by Leonardo Merlin
1 parent ef3b9ec3

Refact: paginator is more generic now

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>
... ...
src/app/components/app-paginator/app-paginator.scss 0 → 100644
... ... @@ -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">
... ...