Commit 9d63c8c442b176f866852daea51b69955acd2781
1 parent
50f5272e
Exists in
master
and in
1 other branch
Add comments components
Showing
13 changed files
with
186 additions
and
3 deletions
Show diff stats
src/app/article/article-default-view.component.ts
1 | import { bundle, Input, Inject, Component, Directive } from 'ng-forward'; | 1 | import { bundle, Input, Inject, Component, Directive } from 'ng-forward'; |
2 | import {ArticleBlogComponent} from "./types/blog/blog.component"; | 2 | import {ArticleBlogComponent} from "./types/blog/blog.component"; |
3 | +import {CommentsComponent} from "./comment/comments.component"; | ||
3 | 4 | ||
4 | /** | 5 | /** |
5 | * @ngdoc controller | 6 | * @ngdoc controller |
@@ -29,7 +30,7 @@ export class ArticleDefaultViewComponent { | @@ -29,7 +30,7 @@ export class ArticleDefaultViewComponent { | ||
29 | @Component({ | 30 | @Component({ |
30 | selector: 'noosfero-article', | 31 | selector: 'noosfero-article', |
31 | template: 'not-used', | 32 | template: 'not-used', |
32 | - directives: [ArticleDefaultViewComponent, ArticleBlogComponent] | 33 | + directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent] |
33 | }) | 34 | }) |
34 | @Inject("$element", "$scope", "$injector", "$compile") | 35 | @Inject("$element", "$scope", "$injector", "$compile") |
35 | export class ArticleViewComponent { | 36 | export class ArticleViewComponent { |
src/app/article/article.html
@@ -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,24 @@ | @@ -0,0 +1,24 @@ | ||
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) | ||
12 | +export class CommentsComponent { | ||
13 | + | ||
14 | + comments: noosfero.Comment[]; | ||
15 | + @Input() article: noosfero.Article; | ||
16 | + | ||
17 | + constructor(private commentService: CommentService) { } | ||
18 | + | ||
19 | + ngOnInit() { | ||
20 | + this.commentService.getByArticle(this.article).then((result: noosfero.RestResult<noosfero.Comment[]>) => { | ||
21 | + this.comments = result.data; | ||
22 | + }); | ||
23 | + } | ||
24 | +} |
@@ -0,0 +1,27 @@ | @@ -0,0 +1,27 @@ | ||
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) | ||
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) { } | ||
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(() => { | ||
24 | + this.notificationService.success({ title: "Good job!", message: "Comment saved!" }); | ||
25 | + }); | ||
26 | + } | ||
27 | +} |
@@ -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> |
src/languages/en.json
@@ -22,5 +22,7 @@ | @@ -22,5 +22,7 @@ | ||
22 | "notification.error.default.title": "Oops...", | 22 | "notification.error.default.title": "Oops...", |
23 | "notification.profile.not_found": "Page not found", | 23 | "notification.profile.not_found": "Page not found", |
24 | "notification.http_error.401.message": "Unauthorized", | 24 | "notification.http_error.401.message": "Unauthorized", |
25 | - "notification.http_error.500.message": "Server error" | 25 | + "notification.http_error.500.message": "Server error", |
26 | + "comment.post": "Post", | ||
27 | + "comment.reply": "reply" | ||
26 | } | 28 | } |
src/languages/pt.json
@@ -22,5 +22,7 @@ | @@ -22,5 +22,7 @@ | ||
22 | "notification.error.default.title": "Oops...", | 22 | "notification.error.default.title": "Oops...", |
23 | "notification.profile.not_found": "Página não encontrada", | 23 | "notification.profile.not_found": "Página não encontrada", |
24 | "notification.http_error.401.message": "Não autorizado", | 24 | "notification.http_error.401.message": "Não autorizado", |
25 | - "notification.http_error.500.message": "Erro no servidor" | 25 | + "notification.http_error.500.message": "Erro no servidor", |
26 | + "comment.post": "Postar", | ||
27 | + "comment.reply": "responder" | ||
26 | } | 28 | } |
@@ -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 articleElement.customPOST(comment, this.getResourcePath(), {}, { 'Content-Type': 'application/json' }); | ||
32 | + } | ||
33 | +} |