Download as
Browse Code »

Commit 9d63c8c442b176f866852daea51b69955acd2781

Authored by Victor Costa
1 parent 50f5272e
Exists in master and in 1 other branch dev-fixes

Add comments components

Showing 13 changed files with 186 additions and 3 deletions   Show diff stats
src/app/article/article-default-view.component.ts
  Diff comments   View file @9d63c8c
1 1 import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
2 2 import {ArticleBlogComponent} from "./types/blog/blog.component";
  3 +import {CommentsComponent} from "./comment/comments.component";
3 4  
4 5 /**
5 6 * @ngdoc controller
... ... @@ -29,7 +30,7 @@ export class ArticleDefaultViewComponent {
29 30 @Component({
30 31 selector: 'noosfero-article',
31 32 template: 'not-used',
32   - directives: [ArticleDefaultViewComponent, ArticleBlogComponent]
  33 + directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent]
33 34 })
34 35 @Inject("$element", "$scope", "$injector", "$compile")
35 36 export class ArticleViewComponent {
... ...
src/app/article/article.html
  Diff comments   View file @9d63c8c
... ... @@ -20,4 +20,6 @@
20 20 <div class="page-body">
21 21 <div ng-bind-html="ctrl.article.body"></div>
22 22 </div>
  23 +
  24 + <comments [article]="ctrl.article"></comments>
23 25 </div>
... ...
src/app/article/comment/comment.component.ts 0 → 100644
  Diff comments   View file @9d63c8c
... ... @@ -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 +}
... ...
src/app/article/comment/comment.html 0 → 100644
  Diff comments   View file @9d63c8c
... ... @@ -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>
... ...
src/app/article/comment/comment.scss 0 → 100644
  Diff comments   View file @9d63c8c
... ... @@ -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 +}
... ...
src/app/article/comment/comments.component.ts 0 → 100644
  Diff comments   View file @9d63c8c
... ... @@ -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 +}
... ...
src/app/article/comment/comments.html 0 → 100644
  Diff comments   View file @9d63c8c
... ... @@ -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>
... ...
src/app/article/comment/post-comment.component.ts 0 → 100644
  Diff comments   View file @9d63c8c
... ... @@ -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 +}
... ...
src/app/article/comment/post-comment.html 0 → 100644
  Diff comments   View file @9d63c8c
... ... @@ -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
  Diff comments   View file @9d63c8c
... ... @@ -22,5 +22,7 @@
22 22 "notification.error.default.title": "Oops...",
23 23 "notification.profile.not_found": "Page not found",
24 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
  Diff comments   View file @9d63c8c
... ... @@ -22,5 +22,7 @@
22 22 "notification.error.default.title": "Oops...",
23 23 "notification.profile.not_found": "Página não encontrada",
24 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 }
... ...
src/lib/ng-noosfero-api/http/comment.service.ts 0 → 100644
  Diff comments   View file @9d63c8c
... ... @@ -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 +}
... ...
src/lib/ng-noosfero-api/interfaces/comment.ts 0 → 100644
  Diff comments   View file @9d63c8c
... ... @@ -0,0 +1,5 @@
  1 +namespace noosfero {
  2 + export interface Comment extends RestModel {
  3 + reply_of_id: number;
  4 + }
  5 +}
... ...