Commit 16b1a6fad493923168598ca67f8050199e93743f
1 parent
6e2ef9ed
Exists in
master
and in
28 other branches
Hide more comments button when there is no more pages to load
Showing
3 changed files
with
22 additions
and
2 deletions
Show diff stats
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> |