From 8a1cb95c58080d9367fb2a5905abbcc5f7b284d9 Mon Sep 17 00:00:00 2001
From: Victor Costa <vfcosta@gmail.com>
Date: Mon, 11 Apr 2016 14:12:20 -0300
Subject: [PATCH] Display comment counts beside paragraphs

---
 src/plugins/comment_paragraph/allow-comment/allow-comment.component.ts      | 11 +++++++++--
 src/plugins/comment_paragraph/allow-comment/allow-comment.html              |  6 +++++-
 src/plugins/comment_paragraph/allow-comment/allow-comment.scss              |  5 +++++
 src/plugins/comment_paragraph/hotspot/comment-paragraph-article-button.html |  6 ++++--
 src/plugins/comment_paragraph/http/comment-paragraph.service.ts             | 20 ++++++++++++++++++++
 5 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/plugins/comment_paragraph/allow-comment/allow-comment.component.ts b/src/plugins/comment_paragraph/allow-comment/allow-comment.component.ts
index fff18eb..5ae912a 100644
--- a/src/plugins/comment_paragraph/allow-comment/allow-comment.component.ts
+++ b/src/plugins/comment_paragraph/allow-comment/allow-comment.component.ts
@@ -1,26 +1,33 @@
 import {Component, Input, Inject} from "ng-forward";
 import {SideCommentsComponent} from "../side-comments/side-comments.component";
 import {CommentParagraphEventService} from "../events/comment-paragraph-event.service";
+import {CommentParagraphService} from "../http/comment-paragraph.service";
 
 @Component({
     selector: "comment-paragraph-plugin-allow-comment",
     templateUrl: "plugins/comment_paragraph/allow-comment/allow-comment.html",
     directives: [SideCommentsComponent]
 })
-@Inject("$scope", CommentParagraphEventService)
+@Inject("$scope", CommentParagraphEventService, CommentParagraphService)
 export class AllowCommentComponent {
 
     @Input() content: string;
     @Input() paragraphUuid: string;
     @Input() article: noosfero.Article;
+    commentsCount: number;
 
-    constructor(private $scope: ng.IScope, private commentParagraphEventService: CommentParagraphEventService) { }
+    constructor(private $scope: ng.IScope,
+        private commentParagraphEventService: CommentParagraphEventService,
+        private commentParagraphService: CommentParagraphService) { }
 
     ngOnInit() {
         this.commentParagraphEventService.subscribeToggleCommentParagraph((article: noosfero.Article) => {
             this.article = article;
             this.$scope.$apply();
         });
+        this.commentParagraphService.commentParagraphCount(this.article, this.paragraphUuid).then((count: any) => {
+            this.commentsCount = count;
+        });
     }
 
     isActivated() {
diff --git a/src/plugins/comment_paragraph/allow-comment/allow-comment.html b/src/plugins/comment_paragraph/allow-comment/allow-comment.html
index 6a76794..bc9998c 100644
--- a/src/plugins/comment_paragraph/allow-comment/allow-comment.html
+++ b/src/plugins/comment_paragraph/allow-comment/allow-comment.html
@@ -1,4 +1,8 @@
 <div class="paragraph-content" ng-bind-html="ctrl.content"></div>
 <div ng-if="ctrl.isActivated()" class="actions">
-  <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>
+  <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> <span class="count">{{ctrl.commentsCount}}</span>
+  </a>
 </div>
diff --git a/src/plugins/comment_paragraph/allow-comment/allow-comment.scss b/src/plugins/comment_paragraph/allow-comment/allow-comment.scss
index 555239d..464c08e 100644
--- a/src/plugins/comment_paragraph/allow-comment/allow-comment.scss
+++ b/src/plugins/comment_paragraph/allow-comment/allow-comment.scss
@@ -10,5 +10,10 @@ comment-paragraph-plugin-allow-comment {
     .popover {
       width: 100%;
     }
+    .count {
+      font-size: 14px;
+      font-weight: bold;
+      color: rgb(99, 170, 204);
+    }
   }
 }
diff --git a/src/plugins/comment_paragraph/hotspot/comment-paragraph-article-button.html b/src/plugins/comment_paragraph/hotspot/comment-paragraph-article-button.html
index b0896f1..474d143 100644
--- a/src/plugins/comment_paragraph/hotspot/comment-paragraph-article-button.html
+++ b/src/plugins/comment_paragraph/hotspot/comment-paragraph-article-button.html
@@ -1,2 +1,4 @@
-<a href='#' (click)="ctrl.activateCommentParagraph()" ng-show="!ctrl.article.setting.comment_paragraph_plugin_activate">Enable</a>
-<a href='#' (click)="ctrl.deactivateCommentParagraph()" ng-show="ctrl.article.setting.comment_paragraph_plugin_activate">Disable</a>
+<a href='#' class="btn btn-default btn-xs" (click)="ctrl.activateCommentParagraph()"
+  ng-show="!ctrl.article.setting.comment_paragraph_plugin_activate">Enable</a>
+<a href='#' class="btn btn-default btn-xs" (click)="ctrl.deactivateCommentParagraph()"
+  ng-show="ctrl.article.setting.comment_paragraph_plugin_activate">Disable</a>
diff --git a/src/plugins/comment_paragraph/http/comment-paragraph.service.ts b/src/plugins/comment_paragraph/http/comment-paragraph.service.ts
index 14c3dc0..29cbacb 100644
--- a/src/plugins/comment_paragraph/http/comment-paragraph.service.ts
+++ b/src/plugins/comment_paragraph/http/comment-paragraph.service.ts
@@ -6,6 +6,8 @@ import {ArticleService} from "../../../lib/ng-noosfero-api/http/article.service"
 @Inject("Restangular", "$q", "$log", ArticleService)
 export class CommentParagraphService extends RestangularService<noosfero.Comment> {
 
+    private commentParagraphCountsPromise: ng.IPromise<any>;
+
     constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService, protected articleService: ArticleService) {
         super(Restangular, $q, $log);
     }
@@ -41,4 +43,22 @@ export class CommentParagraphService extends RestangularService<noosfero.Comment
         let articleElement = this.articleService.getElement(<number>article.id);
         return this.articleService.post("comment_paragraph_plugin/deactivate", articleElement);
     }
+
+    commentParagraphCount(article: noosfero.Article, paragraphUuid: string) {
+        return this.commentParagraphCounts(article).then((counts: any) => {
+            return counts[paragraphUuid];
+        });
+    }
+
+    private commentParagraphCounts(article: noosfero.Article) {
+        if (!this.commentParagraphCountsPromise) {
+            let articleElement = this.articleService.getElement(<number>article.id);
+            this.commentParagraphCountsPromise = articleElement.customGET("comment_paragraph_plugin/comments/count").then((response: restangular.IResponse) => {
+                return response.data;
+            }).catch(() => {
+                this.commentParagraphCountsPromise = null;
+            });
+        }
+        return this.commentParagraphCountsPromise;
+    }
 }
--
libgit2 0.21.2