Merge branch 'comments' into ngforward

Victor Costa
2 parents 772e7865 fd340759
Showing 16 changed files with 231 additions and 20 deletions Show diff stats
src/app/article/article-default-view-component.spec.ts
src/app/article/article-default-view.component.ts
src/app/article/article.html
src/app/article/comment/comment.component.ts
src/app/article/comment/comment.html
src/app/article/comment/comment.scss
src/app/article/comment/comments.component.ts
src/app/article/comment/comments.html
src/app/article/comment/post-comment.component.ts
src/app/article/comment/post-comment.html
src/languages/en.json
src/languages/pt.json
src/lib/ng-noosfero-api/http/comment.service.ts
src/lib/ng-noosfero-api/http/restangular_service.ts
src/lib/ng-noosfero-api/interfaces/comment.ts
src/spec/mocks.ts
-
 import {Input, provide, Component} from 'ng-forward';
 import {ArticleViewComponent, ArticleDefaultViewComponent} from './article-default-view.component';
-import {createComponentFromClass, quickCreateComponent} from "../../spec/helpers";
+import * as helpers from "../../spec/helpers";
 // this htmlTemplate will be re-used between the container components in this spec file 
 const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
@@ -21,15 +20,22 @@ describe(&quot;Components&quot;, () =&gt; {
         it("renders the default component when no specific component is found", (done: Function) => {
             // Creating a container component (ArticleContainerComponent) to include 
             // the component under test (ArticleView)  
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleViewComponent] })
+            @Component({
+                selector: 'test-container-component',
+                template: htmlTemplate,
+                directives: [ArticleViewComponent],
+                providers: [
+                    helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
+                    helpers.provideFilters("translateFilter"),
+                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
+                ]
+            })
             class ArticleContainerComponent {
                 article = { type: 'anyArticleType' };
                 profile = { name: 'profile-name' };
-                constructor() {
-                }
             }
-            createComponentFromClass(ArticleContainerComponent).then((fixture) => {
+            helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
                 // and here we can inspect and run the test assertions
                 // gets the children component of ArticleContainerComponent 
@@ -51,16 +57,23 @@ describe(&quot;Components&quot;, () =&gt; {
             // Creating a container component (ArticleContainerComponent) to include 
             // the component under test (ArticleView)  
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleViewComponent] })
+            @Component({
+                selector: 'test-container-component',
+                template: htmlTemplate,
+                directives: [ArticleViewComponent],
+                providers: [
+                    helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
+                    helpers.provideFilters("translateFilter"),
+                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
+                ]
+            })
             class ArticleContainerComponent {
                 article = { type: 'anyArticleType' };
                 profile = { name: 'profile-name' };
-                constructor() {
-                }
             }
             // uses the TestComponentBuilder instance to initialize the component
-            createComponentFromClass(ArticleContainerComponent).then((fixture) => {
+            helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
                 // and here we can inspect and run the test assertions 
                 let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
@@ -93,10 +106,8 @@ describe(&quot;Components&quot;, () =&gt; {
             class CustomArticleType {
                 article = { type: 'TinyMceArticle' };
                 profile = { name: 'profile-name' };
-                constructor() {
-                }
             }
-            createComponentFromClass(CustomArticleType).then(fixture => {
+            helpers.createComponentFromClass(CustomArticleType).then(fixture => {
                 let myComponent: CustomArticleType = fixture.componentInstance;
                 expect(myComponent.article.type).toEqual("TinyMceArticle");
                 expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
@@ -105,4 +116,4 @@ describe(&quot;Components&quot;, () =&gt; {
         });
     });
-});
 \ No newline at end of file
+});
 import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
 import {ArticleBlogComponent} from "./types/blog/blog.component";
+import {CommentsComponent} from "./comment/comments.component";
 /**
  * @ngdoc controller
@@ -29,7 +30,7 @@ export class ArticleDefaultViewComponent {
 @Component({
     selector: 'noosfero-article',
     template: 'not-used',
-    directives: [ArticleDefaultViewComponent, ArticleBlogComponent]
+    directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent]
 })
 @Inject("$element", "$scope", "$injector", "$compile")
 export class ArticleViewComponent {
@@ -20,4 +20,6 @@
   <div class="page-body">
     <div ng-bind-html="ctrl.article.body"></div>
   </div>
+
+  <comments [article]="ctrl.article"></comments>
 </div>
@@ -0,0 +1,17 @@
+import { Input, Component } from 'ng-forward';
+
+@Component({
+    selector: 'comment',
+    templateUrl: 'app/article/comment/comment.html'
+})
+export class CommentComponent {
+
+    @Input() comment: noosfero.Comment;
+    @Input() article: noosfero.Article;
+
+    showReply: boolean = false;
+
+    reply() {
+        this.showReply = true;
+    }
+}
@@ -0,0 +1,25 @@
+<div class="comment media">
+  <div class="media-left">
+    <a ui-sref="main.profile.home({profile: ctrl.comment.author.identifier})">
+      <noosfero-profile-image [profile]="ctrl.comment.author"></noosfero-profile-image>
+    </a>
+  </div>
+  <div class="media-body">
+    <div class="heading clearfix">
+      <a class="pull-left" ui-sref="main.profile.home({profile: ctrl.comment.author.identifier})">
+        <h4 class="media-heading">{{ctrl.comment.author.name}}</h4>
+      </a>
+      <span class="date" am-time-ago="ctrl.comment.created_at | dateFormat"></span>
+      <a href="#" (click)="ctrl.reply()">
+        <span class="pull-right small text-muted">
+          {{"comment.reply" | translate}}
+        </span>
+      </a>
+    </div>
+    <div class="title">{{ctrl.comment.title}}</div>
+    <div class="body">{{ctrl.comment.body}}</div>
+  </div>
+
+  <post-comment ng-if="ctrl.showReply" [article]="ctrl.article" [reply-of]="ctrl.comment"></post-comment>
+
+</div>
@@ -0,0 +1,32 @@
+.comments {
+  .comment {
+    margin: 20px;
+    .date {
+      @extend .text-muted;
+      @extend .small;
+      margin-left: 8px;
+    }
+    .title {
+      font-weight: bold;
+    }
+    .media-left {
+      min-width: 40px;
+    }
+    .media-body {
+      background-color: #F9F9F9;
+      padding: 10px;
+    }
+    noosfero-profile-image {
+      img {
+        height: 30px;
+        width: 30px;
+        max-width: 30px;
+        display: inline-block;
+        @extend .img-circle;
+      }
+      i {
+        font-size: 1.7em;
+      }
+    }
+  }
+}
@@ -0,0 +1,28 @@
+import { Inject, Input, Component, provide } from 'ng-forward';
+import { PostCommentComponent } from "./post-comment.component";
+import { CommentService } from "../../../lib/ng-noosfero-api/http/comment.service";
+import { CommentComponent } from "./comment.component";
+
+@Component({
+    selector: 'comments',
+    templateUrl: 'app/article/comment/comments.html',
+    directives: [PostCommentComponent, CommentComponent]
+})
+@Inject(CommentService, "$rootScope")
+export class CommentsComponent {
+
+    comments: noosfero.Comment[] = [];
+    @Input() article: noosfero.Article;
+
+    constructor(private commentService: CommentService, private $rootScope: ng.IScope) {
+        $rootScope.$on("comment.received", (event: ng.IAngularEvent, comment: noosfero.Comment) => {
+            this.comments.push(comment);
+        });
+    }
+
+    ngOnInit() {
+        this.commentService.getByArticle(this.article).then((result: noosfero.RestResult<noosfero.Comment[]>) => {
+            this.comments = result.data;
+        });
+    }
+}
@@ -0,0 +1,7 @@
+<div class="comments">
+  <post-comment [article]="ctrl.article"></post-comment>
+  
+  <div class="comments-list">
+    <comment ng-repeat="comment in ctrl.comments" [comment]="comment" [article]="ctrl.article"></comment>
+  </div>
+</div>
@@ -0,0 +1,28 @@
+import { Inject, Input, Component } from 'ng-forward';
+import { CommentService } from "../../../lib/ng-noosfero-api/http/comment.service";
+import { NotificationService } from "../../shared/services/notification.service";
+
+@Component({
+    selector: 'post-comment',
+    templateUrl: 'app/article/comment/post-comment.html'
+})
+@Inject(CommentService, NotificationService, "$rootScope")
+export class PostCommentComponent {
+
+    @Input() article: noosfero.Article;
+    comment: noosfero.Comment;
+
+    @Input() replyOf: noosfero.Comment;
+
+    constructor(private commentService: CommentService, private notificationService: NotificationService, private $rootScope: ng.IScope) { }
+
+    save() {
+        if (this.replyOf) {
+            this.comment.reply_of_id = this.replyOf.id;
+        }
+        this.commentService.createInArticle(this.article, this.comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
+            this.$rootScope.$emit("comment.received", result.data);
+            this.notificationService.success({ title: "Good job!", message: "Comment saved!" });
+        });
+    }
+}
@@ -0,0 +1,6 @@
+<form>
+  <div class="form-group">
+    <textarea class="form-control custom-control" rows="3" ng-model="ctrl.comment.body"></textarea>
+  </div>
+  <button type="submit" class="btn btn-default" ng-click="ctrl.save()">{{"comment.post" | translate}}</button>
+</form>
@@ -22,5 +22,7 @@
   "notification.error.default.title": "Oops...",
   "notification.profile.not_found": "Page not found",
   "notification.http_error.401.message": "Unauthorized",
-  "notification.http_error.500.message": "Server error"
+  "notification.http_error.500.message": "Server error",
+  "comment.post": "Post",
+  "comment.reply": "reply"
 }
@@ -22,5 +22,7 @@
   "notification.error.default.title": "Oops...",
   "notification.profile.not_found": "Página não encontrada",
   "notification.http_error.401.message": "Não autorizado",
-  "notification.http_error.500.message": "Erro no servidor"
+  "notification.http_error.500.message": "Erro no servidor",
+  "comment.post": "Postar",
+  "comment.reply": "responder"
 }
@@ -0,0 +1,33 @@
+import { Injectable, Inject } from "ng-forward";
+import {RestangularService} from "./restangular_service";
+import {ArticleService} from "./article.service";
+
+@Injectable()
+@Inject("Restangular", "$q", "$log", ArticleService)
+export class CommentService extends RestangularService<noosfero.Comment> {
+
+    constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService, protected articleService: ArticleService) {
+        super(Restangular, $q, $log);
+    }
+
+    getResourcePath() {
+        return "comments";
+    }
+
+    getDataKeys() {
+        return {
+            singular: 'comment',
+            plural: 'comments'
+        };
+    }
+
+    getByArticle(article: noosfero.Article, params?: any): ng.IPromise<noosfero.RestResult<noosfero.Comment[]>> {
+        let articleElement = this.articleService.getElement(<number>article.id);
+        return this.list(articleElement);
+    }
+
+    createInArticle(article: noosfero.Article, comment: noosfero.Comment): ng.IPromise<noosfero.RestResult<noosfero.Comment>> {
+        let articleElement = this.articleService.getElement(<number>article.id);
+        return this.create(comment, articleElement, null, { 'Content-Type': 'application/json' }, false);
+    }
+}
@@ -221,13 +221,17 @@ export abstract class RestangularService&lt;T extends noosfero.RestModel&gt; {
      * Creates a new Resource into the resource collection
      * calls POST /resourcePath
      */
-    public create(obj: T, rootElement?: noosfero.RestModel, queryParams?: any, headers?: any): ng.IPromise<noosfero.RestResult<T>> {
+    public create(obj: T, rootElement?: noosfero.RestModel, queryParams?: any, headers?: any, isSub: boolean = true): ng.IPromise<noosfero.RestResult<T>> {
         let deferred = this.$q.defer<noosfero.RestResult<T>>();
         let restRequest: ng.IPromise<noosfero.RestResult<T>>;
-        let data = <any>{ };
-        data[this.getDataKeys().singular] = obj;
+        let data = <any>{};
+        if (isSub) {
+            data[this.getDataKeys().singular] = obj;
+        } else {
+            data = obj;
+        }
         if (rootElement) {
             restRequest = rootElement.all(this.getResourcePath()).post(data, queryParams, headers);
@@ -0,0 +1,5 @@
+namespace noosfero {
+    export interface Comment extends RestModel {
+        reply_of_id: number;
+    }
+}
@@ -73,6 +73,11 @@ export var mocks = {
         },
         instant: () => { }
     },
+    commentService: {
+        getByArticle: (article: noosfero.Article) => {
+            return Promise.resolve();
+        }
+    },
     sessionWithCurrentUser: (user: any) => {
         return {
             currentUser: () => { return user; }
@@ -111,5 +116,8 @@ export var mocks = {
         currentLanguage: () => { },
         changeLanguage: (lang: string) => { },
         translate: (text: string) => { return text; }
+    },
+    notificationService: {
+
     }
 };
	@@ -20,4 +20,6 @@		@@ -20,4 +20,6 @@
20	<div class="page-body">	20	<div class="page-body">
21	<div ng-bind-html="ctrl.article.body"></div>	21	<div ng-bind-html="ctrl.article.body"></div>
22	</div>	22	</div>
		23	+
		24	+ <comments [article]="ctrl.article"></comments>
23	</div>	25	</div>
@@ -0,0 +1,17 @@		@@ -0,0 +1,17 @@
	1	+import { Input, Component } from 'ng-forward';
	2	+
	3	+@Component({
	4	+ selector: 'comment',
	5	+ templateUrl: 'app/article/comment/comment.html'
	6	+})
	7	+export class CommentComponent {
	8	+
	9	+ @Input() comment: noosfero.Comment;
	10	+ @Input() article: noosfero.Article;
	11	+
	12	+ showReply: boolean = false;
	13	+
	14	+ reply() {
	15	+ this.showReply = true;
	16	+ }
	17	+}
@@ -0,0 +1,25 @@		@@ -0,0 +1,25 @@
	1	+<div class="comment media">
	2	+ <div class="media-left">
	3	+ <a ui-sref="main.profile.home({profile: ctrl.comment.author.identifier})">
	4	+ <noosfero-profile-image [profile]="ctrl.comment.author"></noosfero-profile-image>
	5	+ </a>
	6	+ </div>
	7	+ <div class="media-body">
	8	+ <div class="heading clearfix">
	9	+ <a class="pull-left" ui-sref="main.profile.home({profile: ctrl.comment.author.identifier})">
	10	+ <h4 class="media-heading">{{ctrl.comment.author.name}}</h4>
	11	+ </a>
	12	+ <span class="date" am-time-ago="ctrl.comment.created_at \| dateFormat"></span>
	13	+ <a href="#" (click)="ctrl.reply()">
	14	+ <span class="pull-right small text-muted">
	15	+ {{"comment.reply" \| translate}}
	16	+ </span>
	17	+ </a>
	18	+ </div>
	19	+ <div class="title">{{ctrl.comment.title}}</div>
	20	+ <div class="body">{{ctrl.comment.body}}</div>
	21	+ </div>
	22	+
	23	+ <post-comment ng-if="ctrl.showReply" [article]="ctrl.article" [reply-of]="ctrl.comment"></post-comment>
	24	+
	25	+</div>
@@ -0,0 +1,32 @@		@@ -0,0 +1,32 @@
	1	+.comments {
	2	+ .comment {
	3	+ margin: 20px;
	4	+ .date {
	5	+ @extend .text-muted;
	6	+ @extend .small;
	7	+ margin-left: 8px;
	8	+ }
	9	+ .title {
	10	+ font-weight: bold;
	11	+ }
	12	+ .media-left {
	13	+ min-width: 40px;
	14	+ }
	15	+ .media-body {
	16	+ background-color: #F9F9F9;
	17	+ padding: 10px;
	18	+ }
	19	+ noosfero-profile-image {
	20	+ img {
	21	+ height: 30px;
	22	+ width: 30px;
	23	+ max-width: 30px;
	24	+ display: inline-block;
	25	+ @extend .img-circle;
	26	+ }
	27	+ i {
	28	+ font-size: 1.7em;
	29	+ }
	30	+ }
	31	+ }
	32	+}
@@ -0,0 +1,28 @@		@@ -0,0 +1,28 @@
	1	+import { Inject, Input, Component, provide } from 'ng-forward';
	2	+import { PostCommentComponent } from "./post-comment.component";
	3	+import { CommentService } from "../../../lib/ng-noosfero-api/http/comment.service";
	4	+import { CommentComponent } from "./comment.component";
	5	+
	6	+@Component({
	7	+ selector: 'comments',
	8	+ templateUrl: 'app/article/comment/comments.html',
	9	+ directives: [PostCommentComponent, CommentComponent]
	10	+})
	11	+@Inject(CommentService, "$rootScope")
	12	+export class CommentsComponent {
	13	+
	14	+ comments: noosfero.Comment[] = [];
	15	+ @Input() article: noosfero.Article;
	16	+
	17	+ constructor(private commentService: CommentService, private $rootScope: ng.IScope) {
	18	+ $rootScope.$on("comment.received", (event: ng.IAngularEvent, comment: noosfero.Comment) => {
	19	+ this.comments.push(comment);
	20	+ });
	21	+ }
	22	+
	23	+ ngOnInit() {
	24	+ this.commentService.getByArticle(this.article).then((result: noosfero.RestResult<noosfero.Comment[]>) => {
	25	+ this.comments = result.data;
	26	+ });
	27	+ }
	28	+}
@@ -0,0 +1,7 @@		@@ -0,0 +1,7 @@
	1	+<div class="comments">
	2	+ <post-comment [article]="ctrl.article"></post-comment>
	3	+
	4	+ <div class="comments-list">
	5	+ <comment ng-repeat="comment in ctrl.comments" [comment]="comment" [article]="ctrl.article"></comment>
	6	+ </div>
	7	+</div>
@@ -0,0 +1,28 @@		@@ -0,0 +1,28 @@
	1	+import { Inject, Input, Component } from 'ng-forward';
	2	+import { CommentService } from "../../../lib/ng-noosfero-api/http/comment.service";
	3	+import { NotificationService } from "../../shared/services/notification.service";
	4	+
	5	+@Component({
	6	+ selector: 'post-comment',
	7	+ templateUrl: 'app/article/comment/post-comment.html'
	8	+})
	9	+@Inject(CommentService, NotificationService, "$rootScope")
	10	+export class PostCommentComponent {
	11	+
	12	+ @Input() article: noosfero.Article;
	13	+ comment: noosfero.Comment;
	14	+
	15	+ @Input() replyOf: noosfero.Comment;
	16	+
	17	+ constructor(private commentService: CommentService, private notificationService: NotificationService, private $rootScope: ng.IScope) { }
	18	+
	19	+ save() {
	20	+ if (this.replyOf) {
	21	+ this.comment.reply_of_id = this.replyOf.id;
	22	+ }
	23	+ this.commentService.createInArticle(this.article, this.comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
	24	+ this.$rootScope.$emit("comment.received", result.data);
	25	+ this.notificationService.success({ title: "Good job!", message: "Comment saved!" });
	26	+ });
	27	+ }
	28	+}
@@ -0,0 +1,6 @@		@@ -0,0 +1,6 @@
	1	+<form>
	2	+ <div class="form-group">
	3	+ <textarea class="form-control custom-control" rows="3" ng-model="ctrl.comment.body"></textarea>
	4	+ </div>
	5	+ <button type="submit" class="btn btn-default" ng-click="ctrl.save()">{{"comment.post" \| translate}}</button>
	6	+</form>
@@ -0,0 +1,33 @@		@@ -0,0 +1,33 @@
	1	+import { Injectable, Inject } from "ng-forward";
	2	+import {RestangularService} from "./restangular_service";
	3	+import {ArticleService} from "./article.service";
	4	+
	5	+@Injectable()
	6	+@Inject("Restangular", "$q", "$log", ArticleService)
	7	+export class CommentService extends RestangularService<noosfero.Comment> {
	8	+
	9	+ constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService, protected articleService: ArticleService) {
	10	+ super(Restangular, $q, $log);
	11	+ }
	12	+
	13	+ getResourcePath() {
	14	+ return "comments";
	15	+ }
	16	+
	17	+ getDataKeys() {
	18	+ return {
	19	+ singular: 'comment',
	20	+ plural: 'comments'
	21	+ };
	22	+ }
	23	+
	24	+ getByArticle(article: noosfero.Article, params?: any): ng.IPromise<noosfero.RestResult<noosfero.Comment[]>> {
	25	+ let articleElement = this.articleService.getElement(<number>article.id);
	26	+ return this.list(articleElement);
	27	+ }
	28	+
	29	+ createInArticle(article: noosfero.Article, comment: noosfero.Comment): ng.IPromise<noosfero.RestResult<noosfero.Comment>> {
	30	+ let articleElement = this.articleService.getElement(<number>article.id);
	31	+ return this.create(comment, articleElement, null, { 'Content-Type': 'application/json' }, false);
	32	+ }
	33	+}
@@ -0,0 +1,5 @@		@@ -0,0 +1,5 @@
	1	+namespace noosfero {
	2	+ export interface Comment extends RestModel {
	3	+ reply_of_id: number;
	4	+ }
	5	+}