Add button to remove comments from articles

Victor Costa
1 parent 4000a698
Showing 13 changed files with 106 additions and 17 deletions Show diff stats
src/app/article/comment/comment.component.spec.ts
src/app/article/comment/comment.component.ts
src/app/article/comment/comment.html
src/app/article/comment/comment.scss
src/app/shared/services/notification.service.spec.ts
src/app/shared/services/notification.service.ts
src/languages/en.json
src/languages/pt.json
src/lib/ng-noosfero-api/http/comment.service.spec.ts
src/lib/ng-noosfero-api/http/comment.service.ts
src/plugins/comment_paragraph/allow-comment/allow-comment.component.spec.ts
src/plugins/comment_paragraph/allow-comment/allow-comment.html
src/plugins/comment_paragraph/allow-comment/allow-comment.scss
@@ -18,7 +18,11 @@ describe(&quot;Components&quot;, () =&gt; {
         });
         function createComponent() {
-            let providers = helpers.provideFilters("translateFilter");
+            let commentService = jasmine.createSpyObj("commentService", ["removeFromArticle"]);
+            let providers = [
+                helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
+                helpers.createProviderToValue("CommentService", commentService)
+            ].concat(helpers.provideFilters("translateFilter"));
             @Component({ selector: 'test-container-component', directives: [CommentComponent], template: htmlTemplate, providers: providers })
             class ContainerComponent {
 import { Inject, Input, Component, Output, EventEmitter } from 'ng-forward';
 import { PostCommentComponent } from "./post-comment/post-comment.component";
+import { CommentService } from "../../../lib/ng-noosfero-api/http/comment.service";
+import { NotificationService } from "../../shared/services/notification.service";
 @Component({
     selector: 'noosfero-comment',
     templateUrl: 'app/article/comment/comment.html'
 })
+@Inject(CommentService, NotificationService)
 export class CommentComponent {
     @Input() comment: noosfero.CommentViewModel;
@@ -16,11 +19,23 @@ export class CommentComponent {
         return this.comment && this.comment.__show_reply === true;
     }
-    constructor() {
-    }
-
+    constructor(private commentService: CommentService,
+        private notificationService: NotificationService) { }
     reply() {
         this.comment.__show_reply = !this.comment.__show_reply;
     }
+
+    allowRemove() {
+        return true;
+    }
+
+    remove() {
+        this.notificationService.confirmation({ title: "comment.remove.confirmation.title", message: "comment.remove.confirmation.message" }, () => {
+            this.commentService.removeFromArticle(this.article, this.comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
+                // FIXME send event
+                this.notificationService.success({ title: "comment.remove.success.title", message: "comment.remove.success.message" });
+            });
+        });
+    }
 }
@@ -18,9 +18,14 @@
     <div class="title">{{ctrl.comment.title}}</div>
     <div class="body">{{ctrl.comment.body}}</div>
     <div class="actions" ng-if="ctrl.displayActions">
-      <a href="#" (click)="ctrl.reply()" class="small text-muted reply" ng-if="ctrl.article.accept_comments">
+      <a href="#" (click)="ctrl.reply()" class="action small text-muted reply" ng-if="ctrl.article.accept_comments">
+        <span class="bullet-separator">•</span>
         {{"comment.reply" | translate}}
       </a>
+      <a href="#" (click)="ctrl.remove()" class="action small text-muted remove" ng-if="ctrl.allowRemove()">
+        <span class="bullet-separator">•</span>
+        {{"comment.remove" | translate}}
+      </a>
     </div>
   </div>
   <noosfero-comments [show-form]="ctrl.showReply()" [article]="ctrl.article" [parent]="ctrl.comment" ng-if="ctrl.displayReplies"></noosfero-comments>
@@ -10,6 +10,22 @@
     .title {
       font-weight: bold;
     }
+    .actions {
+      .action {
+        text-decoration: none;
+        &:first-child {
+          .bullet-separator {
+            display: none;
+          }
+        }
+        .bullet-separator {
+          font-size: 8px;
+          vertical-align: middle;
+          margin: 3px;
+          color: #B6C2CA;
+        }
+      }
+    }
     .media-left {
       min-width: 40px;
     }
@@ -20,10 +20,10 @@ describe(&quot;Components&quot;, () =&gt; {
             let component: NotificationService = new NotificationService(<any>helpers.mocks.$log, <any>sweetAlert, <any>helpers.mocks.translatorService);
             component.error({ message: "message", title: "title" });
             expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
-                text: "message",
                 title: "title",
+                text: "message",
                 type: "error"
-            }));
+            }), null);
             done();
         });
@@ -36,7 +36,7 @@ describe(&quot;Components&quot;, () =&gt; {
             expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
                 text: NotificationService.DEFAULT_ERROR_MESSAGE,
                 type: "error"
-            }));
+            }), null);
             done();
         });
@@ -48,7 +48,7 @@ describe(&quot;Components&quot;, () =&gt; {
             component.success({ title: "title", message: "message", timer: 1000 });
             expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
                 type: "success"
-            }));
+            }), null);
             done();
         });
@@ -60,7 +60,7 @@ describe(&quot;Components&quot;, () =&gt; {
             component.httpError(500, {});
             expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
                 text: "notification.http_error.500.message"
-            }));
+            }), null);
             done();
         });
@@ -73,7 +73,22 @@ describe(&quot;Components&quot;, () =&gt; {
             expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
                 type: "success",
                 timer: NotificationService.DEFAULT_SUCCESS_TIMER
-            }));
+            }), null);
+            done();
+        });
+
+        it("display a confirmation dialog when call confirmation method", done => {
+            let sweetAlert = jasmine.createSpyObj("sweetAlert", ["swal"]);
+            sweetAlert.swal = jasmine.createSpy("swal");
+
+            let component: NotificationService = new NotificationService(<any>helpers.mocks.$log, <any>sweetAlert, <any>helpers.mocks.translatorService);
+            let func = () => { };
+            component.confirmation({ title: "title", message: "message" }, func);
+            expect(sweetAlert.swal).toHaveBeenCalledWith(jasmine.objectContaining({
+                title: "title",
+                text: "message",
+                type: "warning"
+            }), jasmine.any(Function));
             done();
         });
     });
@@ -36,15 +36,23 @@ export class NotificationService {
         this.showMessage({ title: title, text: message, timer: timer });
     }
-    private showMessage({title, text, type = "success", timer = null, showConfirmButton = true}) {
+    confirmation({title, message, showCancelButton = true, type = "warning"}, confirmationFunction: Function) {
+        this.showMessage({ title: title, text: message, showCancelButton: showCancelButton, type: type, closeOnConfirm: false }, confirmationFunction);
+    }
+
+    private showMessage({title, text, type = "success", timer = null, showConfirmButton = true, showCancelButton = false, closeOnConfirm = true}, confirmationFunction: Function = null) {
         this.$log.debug("Notification message:", title, text, type, this.translatorService.currentLanguage());
         this.SweetAlert.swal({
             title: this.translatorService.translate(title),
             text: this.translatorService.translate(text),
             type: type,
             timer: timer,
-            showConfirmButton: showConfirmButton
-        });
+            showConfirmButton: showConfirmButton,
+            showCancelButton: showCancelButton,
+            closeOnConfirm: closeOnConfirm
+        }, confirmationFunction ? (isConfirm: boolean) => {
+            if (isConfirm) confirmationFunction();
+        } : null);
     }
 }
@@ -35,7 +35,12 @@
   "comment.pagination.more": "More",
   "comment.post.success.title": "Good job!",
   "comment.post.success.message": "Comment saved!",
+  "comment.remove.success.title": "Good job!",
+  "comment.remove.success.message": "Comment removed!",
+  "comment.remove.confirmation.title": "Are you sure?",
+  "comment.remove.confirmation.message": "You will not be able to recover this comment!",
   "comment.reply": "reply",
+  "comment.remove": "remove",
   "article.actions.edit": "Edit",
   "article.actions.read_more": "Read More",
   "article.basic_editor.title": "Title",
@@ -35,7 +35,12 @@
   "comment.pagination.more": "Mais",
   "comment.post.success.title": "Bom trabalho!",
   "comment.post.success.message": "Comentário salvo com sucesso!",
+  "comment.remove.success.title": "Bom trabalho!",
+  "comment.remove.success.message": "Comentário removido com sucesso!",
+  "comment.remove.confirmation.title": "Tem certeza?",
+  "comment.remove.confirmation.message": "Você não poderá recuperar o comentário removido!",
   "comment.reply": "responder",
+  "comment.remove": "remover",
   "article.actions.edit": "Editar",
   "article.actions.read_more": "Ler mais",
   "article.basic_editor.title": "Título",
@@ -40,6 +40,17 @@ describe(&quot;Services&quot;, () =&gt; {
                 });
                 $httpBackend.flush();
             });
+
+            it("should remove a comment from an article", (done) => {
+                let articleId = 1;
+                let comment: noosfero.Comment = <any>{ id: 2 };
+                $httpBackend.expectDELETE(`/api/v1/articles/${articleId}/comments/${comment.id}`).respond(200, { comment: { id: 2 } });
+                commentService.removeFromArticle(<noosfero.Article>{ id: articleId }, comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
+                    expect(result.data).toEqual({ id: 2 });
+                    done();
+                });
+                $httpBackend.flush();
+            });
         });
@@ -31,4 +31,9 @@ export class CommentService extends RestangularService&lt;noosfero.Comment&gt; {
         let articleElement = this.articleService.getElement(<number>article.id);
         return this.create(comment, articleElement, null, { 'Content-Type': 'application/json' }, false);
     }
+
+    removeFromArticle(article: noosfero.Article, comment: noosfero.Comment): ng.IPromise<noosfero.RestResult<noosfero.Comment>> {
+        let articleElement = this.articleService.getElement(<number>article.id);
+        return this.remove(comment, articleElement);
+    }
 }
@@ -57,7 +57,7 @@ describe(&quot;Components&quot;, () =&gt; {
         });
         it('display button to side comments', () => {
-            expect(helper.all(".paragraph .actions a").length).toEqual(1);
+            expect(helper.all(".paragraph .paragraph-actions a").length).toEqual(1);
         });
         it('set display to true when click in show paragraph', () => {
 <div class="paragraph" ng-class="{'active' : ctrl.display}">
   <div class="paragraph-content" ng-bind-html="ctrl.content" ng-class="{'active' : ctrl.display}"></div>
-  <div ng-if="ctrl.isActivated()" class="actions">
+  <div ng-if="ctrl.isActivated()" class="paragraph-actions">
     <a href="#" popover-placement="right-top" popover-trigger="none"
       uib-popover-template="'plugins/comment_paragraph/allow-comment/popover.html'"
       (click)="ctrl.showParagraphComments()" popover-is-open="ctrl.display">
@@ -15,7 +15,7 @@ comment-paragraph-plugin-allow-comment {
       width: 95%;
       display: inline-block;
     }
-    .actions {
+    .paragraph-actions {
       width: 3%;
       display: inline-block;
       vertical-align: top;
	@@ -10,6 +10,22 @@		@@ -10,6 +10,22 @@
10	.title {	10	.title {
11	font-weight: bold;	11	font-weight: bold;
12	}	12	}
		13	+ .actions {
		14	+ .action {
		15	+ text-decoration: none;
		16	+ &:first-child {
		17	+ .bullet-separator {
		18	+ display: none;
		19	+ }
		20	+ }
		21	+ .bullet-separator {
		22	+ font-size: 8px;
		23	+ vertical-align: middle;
		24	+ margin: 3px;
		25	+ color: #B6C2CA;
		26	+ }
		27	+ }
		28	+ }
13	.media-left {	29	.media-left {
14	min-width: 40px;	30	min-width: 40px;
15	}	31	}
	@@ -40,6 +40,17 @@ describe("Services", () => {		@@ -40,6 +40,17 @@ describe("Services", () => {
40	});	40	});
41	$httpBackend.flush();	41	$httpBackend.flush();
42	});	42	});
		43	+
		44	+ it("should remove a comment from an article", (done) => {
		45	+ let articleId = 1;
		46	+ let comment: noosfero.Comment = <any>{ id: 2 };
		47	+ $httpBackend.expectDELETE(`/api/v1/articles/${articleId}/comments/${comment.id}`).respond(200, { comment: { id: 2 } });
		48	+ commentService.removeFromArticle(<noosfero.Article>{ id: articleId }, comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
		49	+ expect(result.data).toEqual({ id: 2 });
		50	+ done();
		51	+ });
		52	+ $httpBackend.flush();
		53	+ });
43	});	54	});
44		55
45		56
	@@ -31,4 +31,9 @@ export class CommentService extends RestangularService<noosfero.Comment> {		@@ -31,4 +31,9 @@ export class CommentService extends RestangularService<noosfero.Comment> {
31	let articleElement = this.articleService.getElement(<number>article.id);	31	let articleElement = this.articleService.getElement(<number>article.id);
32	return this.create(comment, articleElement, null, { 'Content-Type': 'application/json' }, false);	32	return this.create(comment, articleElement, null, { 'Content-Type': 'application/json' }, false);
33	}	33	}
		34	+
		35	+ removeFromArticle(article: noosfero.Article, comment: noosfero.Comment): ng.IPromise<noosfero.RestResult<noosfero.Comment>> {
		36	+ let articleElement = this.articleService.getElement(<number>article.id);
		37	+ return this.remove(comment, articleElement);
		38	+ }
34	}	39	}
	@@ -57,7 +57,7 @@ describe("Components", () => {		@@ -57,7 +57,7 @@ describe("Components", () => {
57	});	57	});
58		58
59	it('display button to side comments', () => {	59	it('display button to side comments', () => {
60	- expect(helper.all(".paragraph .actions a").length).toEqual(1);	60	+ expect(helper.all(".paragraph .paragraph-actions a").length).toEqual(1);
61	});	61	});
62		62
63	it('set display to true when click in show paragraph', () => {	63	it('set display to true when click in show paragraph', () => {
1	<div class="paragraph" ng-class="{'active' : ctrl.display}">	1	<div class="paragraph" ng-class="{'active' : ctrl.display}">
2	<div class="paragraph-content" ng-bind-html="ctrl.content" ng-class="{'active' : ctrl.display}"></div>	2	<div class="paragraph-content" ng-bind-html="ctrl.content" ng-class="{'active' : ctrl.display}"></div>
3	- <div ng-if="ctrl.isActivated()" class="actions">	3	+ <div ng-if="ctrl.isActivated()" class="paragraph-actions">
4	<a href="#" popover-placement="right-top" popover-trigger="none"	4	<a href="#" popover-placement="right-top" popover-trigger="none"
5	uib-popover-template="'plugins/comment_paragraph/allow-comment/popover.html'"	5	uib-popover-template="'plugins/comment_paragraph/allow-comment/popover.html'"
6	(click)="ctrl.showParagraphComments()" popover-is-open="ctrl.display">	6	(click)="ctrl.showParagraphComments()" popover-is-open="ctrl.display">
	@@ -15,7 +15,7 @@ comment-paragraph-plugin-allow-comment {		@@ -15,7 +15,7 @@ comment-paragraph-plugin-allow-comment {
15	width: 95%;	15	width: 95%;
16	display: inline-block;	16	display: inline-block;
17	}	17	}
18	- .actions {	18	+ .paragraph-actions {
19	width: 3%;	19	width: 3%;
20	display: inline-block;	20	display: inline-block;
21	vertical-align: top;	21	vertical-align: top;