Add pagination to blog posts

Victor Costa
1 parent 3dd44ba2
Showing 3 changed files with 22 additions and 5 deletions Show diff stats
src/app/components/noosfero-articles/blog/blog.directive.js
src/app/components/noosfero-articles/blog/blog.html
src/app/components/noosfero-blocks/recent-documents/recent-documents.directive.js
@@ -22,13 +22,24 @@
     return directive;
  
     /** @ngInject */
-    function BlogController(noosfero) {
+    function BlogController(noosfero, Restangular) {
       var vm = this;
       vm.posts = [];
+      vm.perPage = 3;
+      vm.currentPage = 1;
  
-      noosfero.articles.one(vm.article.id).customGET('children', {content_type: 'TinyMceArticle'}).then(function(result) {
-        vm.posts = result.articles;
-      });
+      vm.loadPage = function() {
+        Restangular.setFullResponse(true);
+        noosfero.articles.one(vm.article.id).customGET('children', {
+          content_type: 'TinyMceArticle',
+          per_page: vm.perPage,
+          page: vm.currentPage
+        }).then(function(result) {
+          vm.totalPosts = result.headers('total');
+          vm.posts = result.data.articles;
+        });
+      }
+      vm.loadPage();
     }
   }
  
@@ -16,4 +16,9 @@
       </div>
     </div>
   </div>
+
+  <pagination ng-model="vm.currentPage" total-items="vm.totalPosts" class="pagination-sm center-block"
+    boundary-links="true" items-per-page="vm.perPage" ng-change="vm.loadPage()"
+    first-text="«" last-text="»" previous-text="‹" next-text="›">
+  </pagination>
 </div>
@@ -31,8 +31,9 @@
         $state.go("main.profile.page", {page: article.path, profile: article.profile.identifier}); 
       }
  
+      var limit = vm.block.settings.limit || 5;
       //FIXME get all text articles
-      noosfero.profiles.one(vm.profile.id).one('articles').get({content_type: 'TinyMceArticle'}).then(function(result) {
+      noosfero.profiles.one(vm.profile.id).one('articles').get({content_type: 'TinyMceArticle', per_page: limit}).then(function(result) {
         vm.documents = result.articles;
       });
     }
...	...	@@ -22,13 +22,24 @@
22	22	return directive;
23	23
24	24	/** @ngInject */
25		- function BlogController(noosfero) {
	25	+ function BlogController(noosfero, Restangular) {
26	26	var vm = this;
27	27	vm.posts = [];
	28	+ vm.perPage = 3;
	29	+ vm.currentPage = 1;
28	30
29		- noosfero.articles.one(vm.article.id).customGET('children', {content_type: 'TinyMceArticle'}).then(function(result) {
30		- vm.posts = result.articles;
31		- });
	31	+ vm.loadPage = function() {
	32	+ Restangular.setFullResponse(true);
	33	+ noosfero.articles.one(vm.article.id).customGET('children', {
	34	+ content_type: 'TinyMceArticle',
	35	+ per_page: vm.perPage,
	36	+ page: vm.currentPage
	37	+ }).then(function(result) {
	38	+ vm.totalPosts = result.headers('total');
	39	+ vm.posts = result.data.articles;
	40	+ });
	41	+ }
	42	+ vm.loadPage();
32	43	}
33	44	}
34	45
...	...
...	...	@@ -16,4 +16,9 @@
16	16	</div>
17	17	</div>
18	18	</div>
	19	+
	20	+ <pagination ng-model="vm.currentPage" total-items="vm.totalPosts" class="pagination-sm center-block"
	21	+ boundary-links="true" items-per-page="vm.perPage" ng-change="vm.loadPage()"
	22	+ first-text="«" last-text="»" previous-text="‹" next-text="›">
	23	+ </pagination>
19	24	</div>
...	...
...	...	@@ -31,8 +31,9 @@
31	31	$state.go("main.profile.page", {page: article.path, profile: article.profile.identifier});
32	32	}
33	33
	34	+ var limit = vm.block.settings.limit \|\| 5;
34	35	//FIXME get all text articles
35		- noosfero.profiles.one(vm.profile.id).one('articles').get({content_type: 'TinyMceArticle'}).then(function(result) {
	36	+ noosfero.profiles.one(vm.profile.id).one('articles').get({content_type: 'TinyMceArticle', per_page: limit}).then(function(result) {
36	37	vm.documents = result.articles;
37	38	});
38	39	}
...	...