diff --git a/src/app/article/comment/comment.component.spec.ts b/src/app/article/comment/comment.component.spec.ts index e0f2fca..c5bf006 100644 --- a/src/app/article/comment/comment.component.spec.ts +++ b/src/app/article/comment/comment.component.spec.ts @@ -1,8 +1,6 @@ import {Provider, provide, Component} from 'ng-forward'; import * as helpers from "../../../spec/helpers"; - import {CommentComponent} from './comment.component'; -import {PostCommentComponent} from './post-comment/post-comment.component'; const htmlTemplate: string = ''; @@ -11,12 +9,9 @@ describe("Components", () => { beforeEach(angular.mock.module("templates")); - let postCommentEventService = jasmine.createSpyObj("postCommentEventService", ["subscribe"]); function createComponent() { - let providers = [ - new Provider('PostCommentEventService', { useValue: postCommentEventService }) - ].concat(helpers.provideFilters("translateFilter")); + let providers = helpers.provideFilters("translateFilter"); @Component({ selector: 'test-container-component', directives: [CommentComponent], template: htmlTemplate, providers: providers }) class ContainerComponent { @@ -44,21 +39,16 @@ describe("Components", () => { createComponent().then(fixture => { let component: CommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance; component.reply(); - expect(component.showReply).toBeTruthy(1); + expect(component.showReply()).toBeTruthy("Reply was expected to be true"); done(); }); }); - it("close form when receive a reply", done => { - let func: Function; - postCommentEventService.subscribe = (fn: Function) => { - func = fn; - }; + it("show reply relies on current comment __showReply attribute", done => { createComponent().then(fixture => { let component = fixture.debugElement.componentViewChildren[0]; - component.componentInstance.showReply = true; - func({}); - expect(component.componentInstance.showReply).toEqual(false); + component.componentInstance.comment.__showReply = false; + expect(component.componentInstance.showReply()).toEqual(false); done(); }); }); diff --git a/src/app/article/comment/comment.component.ts b/src/app/article/comment/comment.component.ts index ac74189..a6092f5 100644 --- a/src/app/article/comment/comment.component.ts +++ b/src/app/article/comment/comment.component.ts @@ -1,27 +1,24 @@ -import { Inject, Input, Component } from 'ng-forward'; +import { Inject, Input, Component, Output, EventEmitter } from 'ng-forward'; import { PostCommentComponent } from "./post-comment/post-comment.component"; -import { PostCommentEventService } from "./post-comment/post-comment-event.service"; @Component({ selector: 'noosfero-comment', templateUrl: 'app/article/comment/comment.html' }) -@Inject(PostCommentEventService, "$scope") export class CommentComponent { - @Input() comment: noosfero.Comment; + @Input() comment: noosfero.CommentViewModel; @Input() article: noosfero.Article; - showReply: boolean = false; + showReply() { + return this.comment && this.comment.__show_reply === true; + } - constructor(postCommentEventService: PostCommentEventService, private $scope: ng.IScope) { - postCommentEventService.subscribe((comment: noosfero.Comment) => { - this.showReply = false; - this.$scope.$apply(); - }); + constructor() { } + reply() { - this.showReply = !this.showReply; + this.comment.__show_reply = !this.comment.__show_reply; } } diff --git a/src/app/article/comment/comment.html b/src/app/article/comment/comment.html index 7cf9b96..d23f5f6 100644 --- a/src/app/article/comment/comment.html +++ b/src/app/article/comment/comment.html @@ -17,5 +17,5 @@ {{"comment.reply" | translate}} - + diff --git a/src/app/article/comment/comments.component.spec.ts b/src/app/article/comment/comments.component.spec.ts index 17541af..2c33512 100644 --- a/src/app/article/comment/comments.component.spec.ts +++ b/src/app/article/comment/comments.component.spec.ts @@ -17,21 +17,13 @@ describe("Components", () => { commentService.getByArticle = jasmine.createSpy("getByArticle") .and.returnValue(helpers.mocks.promiseResultTemplate({ data: comments })); - let emitEvent: Function; - let postCommentEventService = { - subscribe: (fn: Function) => { - emitEvent = fn; - } - }; - let properties = { article: { id: 1 }, parent: null }; function createComponent() { // postCommentEventService = jasmine.createSpyObj("postCommentEventService", ["subscribe"]); let providers = [ helpers.createProviderToValue('CommentService', commentService), helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService), - helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})), - new Provider('PostCommentEventService', { useValue: postCommentEventService }) + helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})) ].concat(helpers.provideFilters("translateFilter")); return helpers.quickCreateComponent({ @@ -60,7 +52,8 @@ describe("Components", () => { it("update comments list when receive an reply", done => { properties.parent = { id: 3 }; createComponent().then(fixture => { - emitEvent({ id: 1, reply_of: { id: 3 } }); + (fixture.debugElement.componentViewChildren[0].componentInstance).commentAdded({ id: 1, reply_of: { id: 3 } }); + fixture.detectChanges(); expect(fixture.debugElement.queryAll("noosfero-comment").length).toEqual(3); done(); }); diff --git a/src/app/article/comment/comments.component.ts b/src/app/article/comment/comments.component.ts index f1612e9..3317ae7 100644 --- a/src/app/article/comment/comments.component.ts +++ b/src/app/article/comment/comments.component.ts @@ -1,26 +1,30 @@ -import { Inject, Input, Component, provide } from 'ng-forward'; +import { Inject, Input, Output, Component, provide, EventEmitter } from 'ng-forward'; +import {INgForwardJQuery} from "ng-forward/cjs/util/jqlite-extensions"; + + import { PostCommentComponent } from "./post-comment/post-comment.component"; import { CommentService } from "../../../lib/ng-noosfero-api/http/comment.service"; import { CommentComponent } from "./comment.component"; -import { PostCommentEventService } from "./post-comment/post-comment-event.service"; @Component({ selector: 'noosfero-comments', templateUrl: 'app/article/comment/comments.html', - directives: [PostCommentComponent, CommentComponent] + directives: [PostCommentComponent, CommentComponent], + outputs: ['commentAdded'] }) -@Inject(CommentService, PostCommentEventService, "$scope") +@Inject(CommentService, "$element") export class CommentsComponent { - comments: noosfero.Comment[] = []; + comments: noosfero.CommentViewModel[] = []; @Input() showForm = true; @Input() article: noosfero.Article; - @Input() parent: noosfero.Comment; + @Input() parent: noosfero.CommentViewModel; + protected page = 1; protected perPage = 5; protected total = 0; - constructor(protected commentService: CommentService, private postCommentEventService: PostCommentEventService, private $scope: ng.IScope) { } + constructor(protected commentService: CommentService) { } ngOnInit() { if (this.parent) { @@ -28,13 +32,20 @@ export class CommentsComponent { } else { this.loadNextPage(); } - this.postCommentEventService.subscribe((comment: noosfero.Comment) => { - if ((!this.parent && !comment.reply_of) || (comment.reply_of && this.parent && comment.reply_of.id === this.parent.id)) { - if (!this.comments) this.comments = []; - this.comments.push(comment); - this.$scope.$apply(); - } + } + + commentAdded(comment: noosfero.Comment): void { + this.comments.push(comment); + this.resetShowReply(); + } + + private resetShowReply() { + this.comments.forEach((comment: noosfero.CommentViewModel) => { + comment.__show_reply = false; }); + if (this.parent) { + this.parent.__show_reply = false; + } } loadComments() { diff --git a/src/app/article/comment/comments.html b/src/app/article/comment/comments.html index 09137da..347da4b 100644 --- a/src/app/article/comment/comments.html +++ b/src/app/article/comment/comments.html @@ -1,5 +1,5 @@
- +
diff --git a/src/app/article/comment/post-comment/post-comment-event.service.spec.ts b/src/app/article/comment/post-comment/post-comment-event.service.spec.ts deleted file mode 100644 index 4a96dfc..0000000 --- a/src/app/article/comment/post-comment/post-comment-event.service.spec.ts +++ /dev/null @@ -1,26 +0,0 @@ -import {PostCommentEventService} from "./post-comment-event.service"; -import {ComponentTestHelper, createClass} from '../../../../spec/component-test-helper'; -import * as helpers from "../../../../spec/helpers"; -import {Provider} from 'ng-forward'; -import {ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder'; - -describe("Services", () => { - describe("Comment Paragraph Event Service", () => { - let eventService: PostCommentEventService; - - beforeEach(() => { - eventService = new PostCommentEventService(); - eventService['eventEmitter'] = jasmine.createSpyObj("eventEmitter", ["next", "subscribe"]); - }); - - it('subscribe to post comment event', () => { - eventService.subscribe(() => { }); - expect(eventService['eventEmitter'].subscribe).toHaveBeenCalled(); - }); - - it('emit event when post comment', () => { - eventService.emit({}); - expect(eventService['eventEmitter'].next).toHaveBeenCalled(); - }); - }); -}); diff --git a/src/app/article/comment/post-comment/post-comment-event.service.ts b/src/app/article/comment/post-comment/post-comment-event.service.ts deleted file mode 100644 index fdbf8f7..0000000 --- a/src/app/article/comment/post-comment/post-comment-event.service.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {Injectable, EventEmitter} from "ng-forward"; - -@Injectable() -export class PostCommentEventService { - - private eventEmitter: EventEmitter; - - constructor() { - this.eventEmitter = new EventEmitter(); - } - - emit(comment: noosfero.Comment) { - this.eventEmitter.next(comment); - } - - subscribe(fn: (comment: noosfero.Comment) => void) { - this.eventEmitter.subscribe(fn); - } -} diff --git a/src/app/article/comment/post-comment/post-comment.component.spec.ts b/src/app/article/comment/post-comment/post-comment.component.spec.ts index 93da538..7c1149a 100644 --- a/src/app/article/comment/post-comment/post-comment.component.spec.ts +++ b/src/app/article/comment/post-comment/post-comment.component.spec.ts @@ -1,6 +1,5 @@ import {Provider, provide, Component} from 'ng-forward'; import * as helpers from "../../../../spec/helpers"; - import {PostCommentComponent} from './post-comment.component'; const htmlTemplate: string = ''; @@ -11,13 +10,11 @@ describe("Components", () => { beforeEach(angular.mock.module("templates")); let commentService = jasmine.createSpyObj("commentService", ["createInArticle"]); - let postCommentEventService = jasmine.createSpyObj("postCommentEventService", ["emit"]); let user = {}; let providers = [ new Provider('CommentService', { useValue: commentService }), new Provider('NotificationService', { useValue: helpers.mocks.notificationService }), - new Provider('SessionService', { useValue: helpers.mocks.sessionWithCurrentUser(user) }), - new Provider('PostCommentEventService', { useValue: postCommentEventService }) + new Provider('SessionService', { useValue: helpers.mocks.sessionWithCurrentUser(user) }) ].concat(helpers.provideFilters("translateFilter")); @Component({ selector: 'test-container-component', directives: [PostCommentComponent], template: htmlTemplate, providers: providers }) @@ -36,9 +33,10 @@ describe("Components", () => { it("emit an event when create comment", done => { helpers.createComponentFromClass(ContainerComponent).then(fixture => { let component: PostCommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance; + component.commentSaved.next = jasmine.createSpy("next"); commentService.createInArticle = jasmine.createSpy("createInArticle").and.returnValue(helpers.mocks.promiseResultTemplate({ data: {} })); component.save(); - expect(postCommentEventService.emit).toHaveBeenCalled(); + expect(component.commentSaved.next).toHaveBeenCalled(); done(); }); }); diff --git a/src/app/article/comment/post-comment/post-comment.component.ts b/src/app/article/comment/post-comment/post-comment.component.ts index a9e23fd..343eea4 100644 --- a/src/app/article/comment/post-comment/post-comment.component.ts +++ b/src/app/article/comment/post-comment/post-comment.component.ts @@ -1,28 +1,26 @@ -import { Inject, Input, Component } from 'ng-forward'; +import { Inject, Input, Output, EventEmitter, Component } from 'ng-forward'; import { CommentService } from "../../../../lib/ng-noosfero-api/http/comment.service"; import { NotificationService } from "../../../shared/services/notification.service"; import { SessionService } from "../../../login"; -import { PostCommentEventService } from "./post-comment-event.service"; @Component({ selector: 'noosfero-post-comment', - templateUrl: 'app/article/comment/post-comment/post-comment.html' + templateUrl: 'app/article/comment/post-comment/post-comment.html', + outputs: ['commentSaved'] }) -@Inject(CommentService, NotificationService, SessionService, PostCommentEventService) +@Inject(CommentService, NotificationService, SessionService) export class PostCommentComponent { - public static EVENT_COMMENT_RECEIVED = "comment.received"; - @Input() article: noosfero.Article; @Input() parent: noosfero.Comment; + @Output() commentSaved: EventEmitter = new EventEmitter(); comment = {}; private currentUser: noosfero.User; constructor(private commentService: CommentService, private notificationService: NotificationService, - private session: SessionService, - private postCommentEventService: PostCommentEventService) { + private session: SessionService) { this.currentUser = this.session.currentUser(); } @@ -31,7 +29,7 @@ export class PostCommentComponent { this.comment.reply_of_id = this.parent.id; } this.commentService.createInArticle(this.article, this.comment).then((result: noosfero.RestResult) => { - this.postCommentEventService.emit(result.data); + this.commentSaved.next(result.data); this.comment.body = ""; this.notificationService.success({ title: "comment.post.success.title", message: "comment.post.success.message" }); }); diff --git a/src/lib/ng-noosfero-api/interfaces/comment.ts b/src/lib/ng-noosfero-api/interfaces/comment.ts index f31ea3b..ac1ddc6 100644 --- a/src/lib/ng-noosfero-api/interfaces/comment.ts +++ b/src/lib/ng-noosfero-api/interfaces/comment.ts @@ -5,4 +5,8 @@ namespace noosfero { replies: Comment[]; body: string; } + + export interface CommentViewModel extends Comment { + __show_reply?: boolean; + } } -- libgit2 0.21.2