Commit 8a1cb95c58080d9367fb2a5905abbcc5f7b284d9
Committed by
Michel Felipe
1 parent
b77b920c
Exists in
master
and in
26 other branches
Display comment counts beside paragraphs
Showing
5 changed files
with
43 additions
and
5 deletions
Show diff stats
src/plugins/comment_paragraph/allow-comment/allow-comment.component.ts
| 1 | import {Component, Input, Inject} from "ng-forward"; | 1 | import {Component, Input, Inject} from "ng-forward"; |
| 2 | import {SideCommentsComponent} from "../side-comments/side-comments.component"; | 2 | import {SideCommentsComponent} from "../side-comments/side-comments.component"; |
| 3 | import {CommentParagraphEventService} from "../events/comment-paragraph-event.service"; | 3 | import {CommentParagraphEventService} from "../events/comment-paragraph-event.service"; |
| 4 | +import {CommentParagraphService} from "../http/comment-paragraph.service"; | ||
| 4 | 5 | ||
| 5 | @Component({ | 6 | @Component({ |
| 6 | selector: "comment-paragraph-plugin-allow-comment", | 7 | selector: "comment-paragraph-plugin-allow-comment", |
| 7 | templateUrl: "plugins/comment_paragraph/allow-comment/allow-comment.html", | 8 | templateUrl: "plugins/comment_paragraph/allow-comment/allow-comment.html", |
| 8 | directives: [SideCommentsComponent] | 9 | directives: [SideCommentsComponent] |
| 9 | }) | 10 | }) |
| 10 | -@Inject("$scope", CommentParagraphEventService) | 11 | +@Inject("$scope", CommentParagraphEventService, CommentParagraphService) |
| 11 | export class AllowCommentComponent { | 12 | export class AllowCommentComponent { |
| 12 | 13 | ||
| 13 | @Input() content: string; | 14 | @Input() content: string; |
| 14 | @Input() paragraphUuid: string; | 15 | @Input() paragraphUuid: string; |
| 15 | @Input() article: noosfero.Article; | 16 | @Input() article: noosfero.Article; |
| 17 | + commentsCount: number; | ||
| 16 | 18 | ||
| 17 | - constructor(private $scope: ng.IScope, private commentParagraphEventService: CommentParagraphEventService) { } | 19 | + constructor(private $scope: ng.IScope, |
| 20 | + private commentParagraphEventService: CommentParagraphEventService, | ||
| 21 | + private commentParagraphService: CommentParagraphService) { } | ||
| 18 | 22 | ||
| 19 | ngOnInit() { | 23 | ngOnInit() { |
| 20 | this.commentParagraphEventService.subscribeToggleCommentParagraph((article: noosfero.Article) => { | 24 | this.commentParagraphEventService.subscribeToggleCommentParagraph((article: noosfero.Article) => { |
| 21 | this.article = article; | 25 | this.article = article; |
| 22 | this.$scope.$apply(); | 26 | this.$scope.$apply(); |
| 23 | }); | 27 | }); |
| 28 | + this.commentParagraphService.commentParagraphCount(this.article, this.paragraphUuid).then((count: any) => { | ||
| 29 | + this.commentsCount = count; | ||
| 30 | + }); | ||
| 24 | } | 31 | } |
| 25 | 32 | ||
| 26 | isActivated() { | 33 | isActivated() { |
src/plugins/comment_paragraph/allow-comment/allow-comment.html
| 1 | <div class="paragraph-content" ng-bind-html="ctrl.content"></div> | 1 | <div class="paragraph-content" ng-bind-html="ctrl.content"></div> |
| 2 | <div ng-if="ctrl.isActivated()" class="actions"> | 2 | <div ng-if="ctrl.isActivated()" class="actions"> |
| 3 | - <a href="#" popover-placement="bottom" popover-trigger="outsideClick" uib-popover-template="'plugins/comment_paragraph/allow-comment/popover.html'" ng-click="ctrl.loadComments()"><i class="fa fa-fw fa-comments"></i></a> | 3 | + <a href="#" popover-placement="bottom" popover-trigger="outsideClick" |
| 4 | + uib-popover-template="'plugins/comment_paragraph/allow-comment/popover.html'" | ||
| 5 | + ng-click="ctrl.loadComments()"> | ||
| 6 | + <i class="fa fa-fw fa-comments"></i> <span class="count">{{ctrl.commentsCount}}</span> | ||
| 7 | + </a> | ||
| 4 | </div> | 8 | </div> |
src/plugins/comment_paragraph/allow-comment/allow-comment.scss
| @@ -10,5 +10,10 @@ comment-paragraph-plugin-allow-comment { | @@ -10,5 +10,10 @@ comment-paragraph-plugin-allow-comment { | ||
| 10 | .popover { | 10 | .popover { |
| 11 | width: 100%; | 11 | width: 100%; |
| 12 | } | 12 | } |
| 13 | + .count { | ||
| 14 | + font-size: 14px; | ||
| 15 | + font-weight: bold; | ||
| 16 | + color: rgb(99, 170, 204); | ||
| 17 | + } | ||
| 13 | } | 18 | } |
| 14 | } | 19 | } |
src/plugins/comment_paragraph/hotspot/comment-paragraph-article-button.html
| 1 | -<a href='#' (click)="ctrl.activateCommentParagraph()" ng-show="!ctrl.article.setting.comment_paragraph_plugin_activate">Enable</a> | ||
| 2 | -<a href='#' (click)="ctrl.deactivateCommentParagraph()" ng-show="ctrl.article.setting.comment_paragraph_plugin_activate">Disable</a> | 1 | +<a href='#' class="btn btn-default btn-xs" (click)="ctrl.activateCommentParagraph()" |
| 2 | + ng-show="!ctrl.article.setting.comment_paragraph_plugin_activate">Enable</a> | ||
| 3 | +<a href='#' class="btn btn-default btn-xs" (click)="ctrl.deactivateCommentParagraph()" | ||
| 4 | + ng-show="ctrl.article.setting.comment_paragraph_plugin_activate">Disable</a> |
src/plugins/comment_paragraph/http/comment-paragraph.service.ts
| @@ -6,6 +6,8 @@ import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service" | @@ -6,6 +6,8 @@ import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service" | ||
| 6 | @Inject("Restangular", "$q", "$log", ArticleService) | 6 | @Inject("Restangular", "$q", "$log", ArticleService) |
| 7 | export class CommentParagraphService extends RestangularService<noosfero.Comment> { | 7 | export class CommentParagraphService extends RestangularService<noosfero.Comment> { |
| 8 | 8 | ||
| 9 | + private commentParagraphCountsPromise: ng.IPromise<any>; | ||
| 10 | + | ||
| 9 | constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService, protected articleService: ArticleService) { | 11 | constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService, protected articleService: ArticleService) { |
| 10 | super(Restangular, $q, $log); | 12 | super(Restangular, $q, $log); |
| 11 | } | 13 | } |
| @@ -41,4 +43,22 @@ export class CommentParagraphService extends RestangularService<noosfero.Comment | @@ -41,4 +43,22 @@ export class CommentParagraphService extends RestangularService<noosfero.Comment | ||
| 41 | let articleElement = this.articleService.getElement(<number>article.id); | 43 | let articleElement = this.articleService.getElement(<number>article.id); |
| 42 | return this.articleService.post("comment_paragraph_plugin/deactivate", articleElement); | 44 | return this.articleService.post("comment_paragraph_plugin/deactivate", articleElement); |
| 43 | } | 45 | } |
| 46 | + | ||
| 47 | + commentParagraphCount(article: noosfero.Article, paragraphUuid: string) { | ||
| 48 | + return this.commentParagraphCounts(article).then((counts: any) => { | ||
| 49 | + return counts[paragraphUuid]; | ||
| 50 | + }); | ||
| 51 | + } | ||
| 52 | + | ||
| 53 | + private commentParagraphCounts(article: noosfero.Article) { | ||
| 54 | + if (!this.commentParagraphCountsPromise) { | ||
| 55 | + let articleElement = this.articleService.getElement(<number>article.id); | ||
| 56 | + this.commentParagraphCountsPromise = articleElement.customGET("comment_paragraph_plugin/comments/count").then((response: restangular.IResponse) => { | ||
| 57 | + return response.data; | ||
| 58 | + }).catch(() => { | ||
| 59 | + this.commentParagraphCountsPromise = null; | ||
| 60 | + }); | ||
| 61 | + } | ||
| 62 | + return this.commentParagraphCountsPromise; | ||
| 63 | + } | ||
| 44 | } | 64 | } |