Commit 16b1a6fad493923168598ca67f8050199e93743f

Authored by Victor Costa
1 parent 6e2ef9ed

Hide more comments button when there is no more pages to load

src/app/article/comment/comments.component.spec.ts
@@ -60,14 +60,27 @@ describe("Components", () => { @@ -60,14 +60,27 @@ describe("Components", () => {
60 60
61 it("load comments for next page", done => { 61 it("load comments for next page", done => {
62 createComponent().then(fixture => { 62 createComponent().then(fixture => {
  63 + let headers = jasmine.createSpy("headers").and.returnValue(3);
63 commentService.getByArticle = jasmine.createSpy("getByArticle") 64 commentService.getByArticle = jasmine.createSpy("getByArticle")
64 - .and.returnValue(helpers.mocks.promiseResultTemplate({ data: { id: 4 } })); 65 + .and.returnValue(helpers.mocks.promiseResultTemplate({ data: { id: 4 }, headers: headers }));
65 let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance; 66 let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
66 component.loadNextPage(); 67 component.loadNextPage();
67 expect(component['page']).toEqual(3); 68 expect(component['page']).toEqual(3);
68 expect(component.comments.length).toEqual(3); 69 expect(component.comments.length).toEqual(3);
  70 + expect(component['total']).toEqual(3);
69 done(); 71 done();
70 }); 72 });
71 }); 73 });
  74 +
  75 + it("not display more when there is no more comments to load", done => {
  76 + createComponent().then(fixture => {
  77 + let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
  78 + component['total'] = 0;
  79 + component.parent = null;
  80 + expect(component.displayMore()).toBeFalsy();
  81 + done();
  82 + });
  83 + });
  84 +
72 }); 85 });
73 }); 86 });
src/app/article/comment/comments.component.ts
@@ -17,6 +17,7 @@ export class CommentsComponent { @@ -17,6 +17,7 @@ export class CommentsComponent {
17 @Input() parent: noosfero.Comment; 17 @Input() parent: noosfero.Comment;
18 private page = 1; 18 private page = 1;
19 private perPage = 5; 19 private perPage = 5;
  20 + private total = 0;
20 21
21 constructor(private commentService: CommentService, private $rootScope: ng.IScope) { 22 constructor(private commentService: CommentService, private $rootScope: ng.IScope) {
22 $rootScope.$on(PostCommentComponent.EVENT_COMMENT_RECEIVED, (event: ng.IAngularEvent, comment: noosfero.Comment) => { 23 $rootScope.$on(PostCommentComponent.EVENT_COMMENT_RECEIVED, (event: ng.IAngularEvent, comment: noosfero.Comment) => {
@@ -38,7 +39,13 @@ export class CommentsComponent { @@ -38,7 +39,13 @@ export class CommentsComponent {
38 loadNextPage() { 39 loadNextPage() {
39 this.commentService.getByArticle(this.article, { page: this.page, per_page: this.perPage }).then((result: noosfero.RestResult<noosfero.Comment[]>) => { 40 this.commentService.getByArticle(this.article, { page: this.page, per_page: this.perPage }).then((result: noosfero.RestResult<noosfero.Comment[]>) => {
40 this.comments = this.comments.concat(result.data); 41 this.comments = this.comments.concat(result.data);
  42 + this.total = result.headers ? result.headers("total") : this.comments.length;
41 this.page++; 43 this.page++;
42 }); 44 });
43 } 45 }
  46 +
  47 + displayMore() {
  48 + let pages = Math.ceil(this.total / this.perPage);
  49 + return !this.parent && pages >= this.page;
  50 + }
44 } 51 }
src/app/article/comment/comments.html
@@ -4,5 +4,5 @@ @@ -4,5 +4,5 @@
4 <div class="comments-list"> 4 <div class="comments-list">
5 <noosfero-comment ng-repeat="comment in ctrl.comments | orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment> 5 <noosfero-comment ng-repeat="comment in ctrl.comments | orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment>
6 </div> 6 </div>
7 - <button type="button" ng-if="!ctrl.parent" class="more-comments btn btn-default btn-block" ng-click="ctrl.loadNextPage()">{{"comment.pagination.more" | translate}}</button> 7 + <button type="button" ng-if="ctrl.displayMore()" class="more-comments btn btn-default btn-block" ng-click="ctrl.loadNextPage()">{{"comment.pagination.more" | translate}}</button>
8 </div> 8 </div>