Commit 6e2ef9ed6f97e22ac596c2f7f6ccb8bbf974ac87
1 parent
1d6363e0
Exists in
master
and in
28 other branches
Add pagination button for comment listing
Showing
5 changed files
with
26 additions
and
4 deletions
Show diff stats
src/app/article/comment/comments.component.spec.ts
| @@ -57,5 +57,17 @@ describe("Components", () => { | @@ -57,5 +57,17 @@ describe("Components", () => { | ||
| 57 | done(); | 57 | done(); |
| 58 | }); | 58 | }); |
| 59 | }); | 59 | }); |
| 60 | + | ||
| 61 | + it("load comments for next page", done => { | ||
| 62 | + createComponent().then(fixture => { | ||
| 63 | + commentService.getByArticle = jasmine.createSpy("getByArticle") | ||
| 64 | + .and.returnValue(helpers.mocks.promiseResultTemplate({ data: { id: 4 } })); | ||
| 65 | + let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance; | ||
| 66 | + component.loadNextPage(); | ||
| 67 | + expect(component['page']).toEqual(3); | ||
| 68 | + expect(component.comments.length).toEqual(3); | ||
| 69 | + done(); | ||
| 70 | + }); | ||
| 71 | + }); | ||
| 60 | }); | 72 | }); |
| 61 | }); | 73 | }); |
src/app/article/comment/comments.component.ts
| @@ -15,6 +15,8 @@ export class CommentsComponent { | @@ -15,6 +15,8 @@ export class CommentsComponent { | ||
| 15 | @Input() showForm = true; | 15 | @Input() showForm = true; |
| 16 | @Input() article: noosfero.Article; | 16 | @Input() article: noosfero.Article; |
| 17 | @Input() parent: noosfero.Comment; | 17 | @Input() parent: noosfero.Comment; |
| 18 | + private page = 1; | ||
| 19 | + private perPage = 5; | ||
| 18 | 20 | ||
| 19 | constructor(private commentService: CommentService, private $rootScope: ng.IScope) { | 21 | constructor(private commentService: CommentService, private $rootScope: ng.IScope) { |
| 20 | $rootScope.$on(PostCommentComponent.EVENT_COMMENT_RECEIVED, (event: ng.IAngularEvent, comment: noosfero.Comment) => { | 22 | $rootScope.$on(PostCommentComponent.EVENT_COMMENT_RECEIVED, (event: ng.IAngularEvent, comment: noosfero.Comment) => { |
| @@ -29,9 +31,14 @@ export class CommentsComponent { | @@ -29,9 +31,14 @@ export class CommentsComponent { | ||
| 29 | if (this.parent) { | 31 | if (this.parent) { |
| 30 | this.comments = this.parent.replies; | 32 | this.comments = this.parent.replies; |
| 31 | } else { | 33 | } else { |
| 32 | - this.commentService.getByArticle(this.article).then((result: noosfero.RestResult<noosfero.Comment[]>) => { | ||
| 33 | - this.comments = result.data; | ||
| 34 | - }); | 34 | + this.loadNextPage(); |
| 35 | } | 35 | } |
| 36 | } | 36 | } |
| 37 | + | ||
| 38 | + loadNextPage() { | ||
| 39 | + 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.page++; | ||
| 42 | + }); | ||
| 43 | + } | ||
| 37 | } | 44 | } |
src/app/article/comment/comments.html
| @@ -2,6 +2,7 @@ | @@ -2,6 +2,7 @@ | ||
| 2 | <noosfero-post-comment ng-if="ctrl.showForm" [article]="ctrl.article" [parent]="ctrl.parent"></noosfero-post-comment> | 2 | <noosfero-post-comment ng-if="ctrl.showForm" [article]="ctrl.article" [parent]="ctrl.parent"></noosfero-post-comment> |
| 3 | 3 | ||
| 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 | </div> | 8 | </div> |
src/languages/en.json
| @@ -32,5 +32,6 @@ | @@ -32,5 +32,6 @@ | ||
| 32 | "notification.http_error.500.message": "Server error", | 32 | "notification.http_error.500.message": "Server error", |
| 33 | "comment.post": "Post a comment", | 33 | "comment.post": "Post a comment", |
| 34 | "comment.post.placeholder": "Join the discussion...", | 34 | "comment.post.placeholder": "Join the discussion...", |
| 35 | + "comment.pagination.more": "More", | ||
| 35 | "comment.reply": "reply" | 36 | "comment.reply": "reply" |
| 36 | } | 37 | } |
src/languages/pt.json
| @@ -32,5 +32,6 @@ | @@ -32,5 +32,6 @@ | ||
| 32 | "notification.http_error.500.message": "Erro no servidor", | 32 | "notification.http_error.500.message": "Erro no servidor", |
| 33 | "comment.post": "Commentar", | 33 | "comment.post": "Commentar", |
| 34 | "comment.post.placeholder": "Participe da discussão...", | 34 | "comment.post.placeholder": "Participe da discussão...", |
| 35 | + "comment.pagination.more": "Mais", | ||
| 35 | "comment.reply": "responder" | 36 | "comment.reply": "responder" |
| 36 | } | 37 | } |