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 | } |