Merge branch 'master' into tags-block

Caio Almeida
2 parents 07ad018c 45978e40
Showing 125 changed files with 1743 additions and 537 deletions Show diff stats
gulp/watch.js
karma.conf.js
src/app/article/article-default-view-component.spec.ts
src/app/article/article-default-view.component.ts
src/app/article/article-view-component.spec.ts
src/app/article/article.html
src/app/article/cms/article-editor/article-editor.component.spec.ts
src/app/article/cms/article-editor/article-editor.component.ts
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/article/comment/comments.component.spec.ts
src/app/article/comment/comments.component.ts
src/app/article/comment/comments.html
src/app/article/content-viewer/navbar-actions.html
src/app/article/content-viewer/navbar-actions.spec.ts
src/app/environment/environment.html
src/app/layout/blocks/display-content/display-content-block.component.spec.ts
src/app/layout/blocks/display-content/display-content-block.component.ts
@@ -15,11 +15,13 @@ gulp.task(&#39;watch&#39;, [&#39;inject&#39;], function () {
  
   gulp.watch([path.join(conf.paths.src, '/*.html'), 'bower.json'], ['inject-reload']);
  
-  gulp.watch([
-    path.join(conf.paths.src, '/app/**/*.css'),
-    path.join(conf.paths.src, '/app/**/*.scss'),
-    path.join(conf.paths.src, conf.paths.plugins, '/**/*.scss')
-  ], function(event) {
+  var stylePaths = [path.join(conf.paths.src, conf.paths.plugins, '/**/*.scss')];
+  conf.paths.allSources.forEach(function(src) {
+    stylePaths.push(path.join(src, '/app/**/*.css'));
+    stylePaths.push(path.join(src, '/app/**/*.scss'));
+  });
+
+  gulp.watch(stylePaths, function(event) {
     if(isOnlyChange(event)) {
       gulp.start('styles-reload');
     } else {
@@ -126,6 +126,10 @@ module.exports = function (config) {
     };
  
  
+    if(config.grep) {
+      configuration.client = { args: ['--grep', config.grep] };
+    }
+
     if (coverage) {
  
         /*configuration.webpack = {
 import {Input, provide, Component} from 'ng-forward';
 import {ArticleViewComponent, ArticleDefaultViewComponent} from './article-default-view.component';
+import {ComponentTestHelper, createClass} from './../../spec/component-test-helper';
  
 import * as helpers from "../../spec/helpers";
  
@@ -9,113 +10,82 @@ const htmlTemplate: string = &#39;&lt;noosfero-article [article]=&quot;ctrl.article&quot; [profil
  
 describe("Components", () => {
  
-    describe("ArticleView Component", () => {
-
-        // the karma preprocessor html2js transform the templates html into js files which put
-        // the templates to the templateCache into the module templates
-        // we need to load the module templates here as the template for the 
-        // component Noosfero ArtileView will be load on our tests
-        beforeEach(angular.mock.module("templates"));
-
-        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],
-                providers: [
-                    helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
-                    helpers.provideFilters("translateFilter"),
-                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
-                    helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
-                ]
-            })
-            class ArticleContainerComponent {
-                article = { type: 'anyArticleType' };
-                profile = { name: 'profile-name' };
+    // the karma preprocessor html2js transform the templates html into js files which put
+    // the templates to the templateCache into the module templates
+    // we need to load the module templates here as the template for the 
+    // component Noosfero ArtileView will be load on our tests
+    beforeEach(angular.mock.module("templates"));
+
+    describe("Article Default View Component", () => {
+        let helper: ComponentTestHelper<ArticleDefaultViewComponent>;
+        const defaultViewTemplate: string = '<noosfero-default-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-default-article>';
+        let articleService: any = helpers.mocks.articleService;
+        let article = <noosfero.Article>{
+            id: 1,
+            profile: {
+                identifier: "1"
             }
-
-            helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
-                // and here we can inspect and run the test assertions
-
-                // gets the children component of ArticleContainerComponent 
-                let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-
-                // and checks if the article View rendered was the Default Article View
-                expect(articleView.constructor.prototype).toEqual(ArticleDefaultViewComponent.prototype);
-
-                // done needs to be called (it isn't really needed, as we can read in
-                // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
-                // because createAsync in ng-forward is not really async, but as the intention 
-                // here is write tests in angular 2 ways, this is recommended
-                done();
+        };
+        let state = <ng.ui.IStateService>jasmine.createSpyObj("state", ["go", "transitionTo"]);
+        let providers = [
+            provide('$state', { useValue: state }),
+            provide('ArticleService', { useValue: articleService })
+        ].concat(helpers.provideFilters("translateFilter"));
+
+        /**
+         * The beforeEach procedure will initialize the helper and parse
+         * the component according to the given providers. Unfortunetly, in
+         * this mode, the providers and properties given to the construtor
+         * can't be overriden.
+        */
+        beforeEach((done) => {
+            // Create the component bed for the test. Optionally, this could be done
+            // in each test if one needs customization of these parameters per test
+            let cls = createClass({
+                template: defaultViewTemplate,
+                directives: [ArticleDefaultViewComponent],
+                providers: providers,
+                properties: {
+                    article: article
+                }
             });
-
+            helper = new ComponentTestHelper<ArticleDefaultViewComponent>(cls, done);
         });
  
-        it("receives the article and profile as inputs", (done: Function) => {
-
-            // Creating a container component (ArticleContainerComponent) to include 
-            // the component under test (ArticleView)  
-            @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),
-                    helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
-                ]
-            })
-            class ArticleContainerComponent {
-                article = { type: 'anyArticleType' };
-                profile = { name: 'profile-name' };
-            }
-
-            // uses the TestComponentBuilder instance to initialize the component
-            helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
-                // and here we can inspect and run the test assertions 
-                let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+        function getArticle() {
+            return this.article;
+        }
  
-                // assure the article object inside the ArticleView matches
-                // the provided through the parent component
-                expect(articleView.article.type).toEqual("anyArticleType");
-                expect(articleView.profile.name).toEqual("profile-name");
-
-                // done needs to be called (it isn't really needed, as we can read in
-                // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
-                // because createAsync in ng-forward is not really async, but as the intention 
-                // here is write tests in angular 2 ways, this is recommended
-                done();
-            });
+        it("it should delete article when delete is activated", () => {
+            expect(helper.component.article).toEqual(article);
+            // Spy the state service
+            doDeleteArticle();
+            expect(state.transitionTo).toHaveBeenCalled();
         });
  
-
-        it("renders a article view which matches to the article type", done => {
-            // NoosferoTinyMceArticle component created to check if it will be used
-            // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleView)
-            // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
-            @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
-            class TinyMceArticleView {
-                @Input() article: any;
-                @Input() profile: any;
-            }
-
-            // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
-            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleViewComponent, TinyMceArticleView] })
-            class CustomArticleType {
-                article = { type: 'TinyMceArticle' };
-                profile = { name: 'profile-name' };
-            }
-            helpers.createComponentFromClass(CustomArticleType).then(fixture => {
-                let myComponent: CustomArticleType = fixture.componentInstance;
-                expect(myComponent.article.type).toEqual("TinyMceArticle");
-                expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
-                done();
+        /**
+         * Execute the delete method on the target component
+         */
+        function doDeleteArticle() {
+            // Create a mock for the ArticleService removeArticle method
+            spyOn(helper.component.articleService, 'removeArticle').and.callFake(function(param: noosfero.Article) {
+                return {
+                    catch: () => {}
+                };
             });
-        });
-
+            helper.component.delete();
+            expect(articleService.removeArticle).toHaveBeenCalled();
+            // After the component delete method execution, fire the
+            // ArticleEvent.removed event
+            simulateRemovedEvent();
+        }
+
+        /**
+         * Simulate the ArticleService ArticleEvent.removed event
+         */
+        function simulateRemovedEvent() {
+            helper.component.articleService["notifyArticleRemovedListeners"](article);
+        }
     });
+
 });
@@ -4,6 +4,7 @@ import {CommentsComponent} from &quot;./comment/comments.component&quot;;
 import {MacroDirective} from "./macro/macro.directive";
 import {ArticleToolbarHotspotComponent} from "../hotspot/article-toolbar-hotspot.component";
 import {ArticleContentHotspotComponent} from "../hotspot/article-content-hotspot.component";
+import {ArticleService} from "./../../lib/ng-noosfero-api/http/article.service";
  
 /**
  * @ngdoc controller
@@ -16,11 +17,29 @@ import {ArticleContentHotspotComponent} from &quot;../hotspot/article-content-hotspot
     selector: 'noosfero-default-article',
     templateUrl: 'app/article/article.html'
 })
+@Inject("$state", ArticleService)
 export class ArticleDefaultViewComponent {
  
     @Input() article: noosfero.Article;
     @Input() profile: noosfero.Profile;
  
+    constructor(private $state: ng.ui.IStateService, public articleService: ArticleService) {
+        // Subscribe to the Article Removed Event
+        this.articleService.subscribeToArticleRemoved((article: noosfero.Article) => {
+            if (this.article.parent) {
+                this.$state.transitionTo('main.profile.page', { page: this.article.parent.path, profile: this.article.profile.identifier });
+            } else {
+                this.$state.transitionTo('main.profile.info', { profile: this.article.profile.identifier });
+            }
+        });
+    }
+
+    delete() {
+        this.articleService.removeArticle(this.article).catch((cause: any) => {
+            throw new Error(`Problem removing the article: ${cause}`);
+        });
+    }
+
 }
  
 /**
@@ -60,4 +79,5 @@ export class ArticleViewComponent {
         private $injector: ng.auto.IInjectorService,
         private $compile: ng.ICompileService) {
     }
+
 }
@@ -0,0 +1,124 @@
+import {Input, provide, Component} from 'ng-forward';
+import {ArticleViewComponent, ArticleDefaultViewComponent} from './article-default-view.component';
+
+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>';
+
+
+describe("Components", () => {
+
+    // the karma preprocessor html2js transform the templates html into js files which put
+    // the templates to the templateCache into the module templates
+    // we need to load the module templates here as the template for the 
+    // component Noosfero ArtileView will be load on our tests
+    beforeEach(angular.mock.module("templates"));
+
+    describe("ArticleView Component", () => {
+        let state = <ng.ui.IStateService>jasmine.createSpyObj("state", ["go", "transitionTo"]);
+        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],
+                providers: [
+                    helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
+                    helpers.provideFilters("translateFilter"),
+                    helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
+                    helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
+                    helpers.createProviderToValue('ArticleService', helpers.mocks.articleService),
+                    helpers.createProviderToValue('$state', state)
+                ]
+            })
+            class ArticleContainerComponent {
+                article = { type: 'anyArticleType' };
+                profile = { name: 'profile-name' };
+            }
+
+            helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
+                // and here we can inspect and run the test assertions
+
+                // gets the children component of ArticleContainerComponent 
+                let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+                // and checks if the article View rendered was the Default Article View
+                expect(articleView.constructor.prototype).toEqual(ArticleDefaultViewComponent.prototype);
+
+                // done needs to be called (it isn't really needed, as we can read in
+                // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
+                // because createAsync in ng-forward is not really async, but as the intention 
+                // here is write tests in angular 2 ways, this is recommended
+                done();
+            });
+        });
+
+        it("receives the article and profile as inputs", (done: Function) => {
+
+            // Creating a container component (ArticleContainerComponent) to include 
+            // the component under test (ArticleView)  
+            @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),
+                    helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
+                    helpers.createProviderToValue('ArticleService', helpers.mocks.articleService),
+                    helpers.createProviderToValue('$state', state)
+                ]
+            })
+            class ArticleContainerComponent {
+                article = { type: 'anyArticleType' };
+                profile = { name: 'profile-name' };
+            }
+
+            // uses the TestComponentBuilder instance to initialize the component
+            helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
+                // and here we can inspect and run the test assertions 
+                let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+
+                // assure the article object inside the ArticleView matches
+                // the provided through the parent component
+                expect(articleView.article.type).toEqual("anyArticleType");
+                expect(articleView.profile.name).toEqual("profile-name");
+
+                // done needs to be called (it isn't really needed, as we can read in
+                // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
+                // because createAsync in ng-forward is not really async, but as the intention 
+                // here is write tests in angular 2 ways, this is recommended
+                done();
+            });
+        });
+
+
+        it("renders a article view which matches to the article type", done => {
+            // NoosferoTinyMceArticle component created to check if it will be used
+            // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleView)
+            // *** Important *** - the selector is what ng-forward uses to define the name of the directive provider
+            @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
+            class TinyMceArticleView {
+                @Input() article: any;
+                @Input() profile: any;
+            }
+
+            // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
+            @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleViewComponent, TinyMceArticleView] })
+            class CustomArticleType {
+                article = { type: 'TinyMceArticle' };
+                profile = { name: 'profile-name' };
+            }
+            helpers.createComponentFromClass(CustomArticleType).then(fixture => {
+                let myComponent: CustomArticleType = fixture.componentInstance;
+                expect(myComponent.article.type).toEqual("TinyMceArticle");
+                expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
+                done();
+            });
+        });
+
+    });
+});
@@ -7,6 +7,9 @@
     <a href="#" class="btn btn-default btn-xs" ui-sref="main.cmsEdit({profile: ctrl.profile.identifier, id: ctrl.article.id})">
       <i class="fa fa-pencil-square-o fa-fw fa-lg"></i> {{"article.actions.edit" | translate}}
     </a>
+    <a href="#" class="btn btn-default btn-xs" ng-click="ctrl.delete()">
+      <i class="fa fa-trash-o fa-fw fa-lg" ng-click="ctrl.delete()"></i> {{"article.actions.delete" | translate}}
+    </a>    
     <noosfero-hotspot-article-toolbar [article]="ctrl.article"></noosfero-hotspot-article-toolbar>
     <div class="page-info pull-right small text-muted">
       <span class="time">
@@ -0,0 +1,28 @@
+import {ArticleEditorComponent} from './article-editor.component';
+import {BasicEditorComponent} from "../basic-editor/basic-editor.component";
+import {ComponentTestHelper, createClass} from '../../../../spec/component-test-helper';
+import * as helpers from "../../../../spec/helpers";
+
+const htmlTemplate: string = '<article-editor [article]="ctrl.article"></article-editor>';
+
+describe("Components", () => {
+    describe("Article Editor Component", () => {
+
+        let helper: ComponentTestHelper<ArticleEditorComponent>;
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let properties = { article: { type: "TextArticle" } };
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [ArticleEditorComponent, BasicEditorComponent],
+                properties: properties
+            });
+            helper = new ComponentTestHelper<ArticleEditorComponent>(cls, done);
+        });
+
+        it("replace element with article basic editor when type is TextArticle", () => {
+            expect(helper.find("article-basic-editor").length).toEqual(1);
+        });
+    });
+});
@@ -16,10 +16,10 @@ export class ArticleEditorComponent {
         private $compile: ng.ICompileService) { }
  
     ngOnInit() {
-        let articleType = this.article.type.replace(/::/, '');
+        let articleType = this.article && this.article.type ? this.article.type.replace(/::/, '') : "TextArticle";
         let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;
         let directiveName = "article-basic-editor";
-        if (this.$injector.has(specificDirective + 'Directive')) {
+        if (specificDirective !== "articleEditor" && this.$injector.has(specificDirective + 'Directive')) {
             directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
         }
         this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
@@ -7,16 +7,28 @@ const htmlTemplate: string = &#39;&lt;noosfero-comment [article]=&quot;ctrl.article&quot; [commen
 describe("Components", () => {
     describe("Comment Component", () => {
  
-        beforeEach(angular.mock.module("templates"));
+        let properties: any;
+        let notificationService = helpers.mocks.notificationService;
+        let commentService = jasmine.createSpyObj("commentService", ["removeFromArticle"]);
  
+        beforeEach(angular.mock.module("templates"));
+        beforeEach(() => {
+            properties = {
+                article: { id: 1, accept_comments: true },
+                comment: { title: "title", body: "body" }
+            };
+        });
  
         function createComponent() {
-            let providers = helpers.provideFilters("translateFilter");
+            let providers = [
+                helpers.createProviderToValue('NotificationService', notificationService),
+                helpers.createProviderToValue("CommentService", commentService)
+            ].concat(helpers.provideFilters("translateFilter"));
  
             @Component({ selector: 'test-container-component', directives: [CommentComponent], template: htmlTemplate, providers: providers })
             class ContainerComponent {
-                article = { id: 1 };
-                comment = { title: "title", body: "body" };
+                article = properties['article'];
+                comment = properties['comment'];
             }
             return helpers.createComponentFromClass(ContainerComponent);
         }
@@ -52,5 +64,51 @@ describe(&quot;Components&quot;, () =&gt; {
                 done();
             });
         });
+
+        it("display reply button", done => {
+            createComponent().then(fixture => {
+                expect(fixture.debugElement.queryAll(".comment .actions .reply").length).toEqual(1);
+                done();
+            });
+        });
+
+        it("not display reply button when accept_comments is false", done => {
+            properties['article']['accept_comments'] = false;
+            createComponent().then(fixture => {
+                expect(fixture.debugElement.queryAll(".comment .actions .reply").length).toEqual(0);
+                done();
+            });
+        });
+
+        it("does not show the Remove button if user is not allowed to remove", done => {
+            createComponent().then(fixture => {
+                let component: CommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                component.allowRemove = () => false;
+                fixture.detectChanges();
+                expect(fixture.debugElement.queryAll("a.action.remove").length).toEqual(0);
+                done();
+            });
+        });
+
+        it("shows the Remove button if user is allowed to remove", done => {
+            createComponent().then(fixture => {
+                let component: CommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                component.allowRemove = () => true;
+                fixture.detectChanges();
+                expect(fixture.debugElement.queryAll("a.action.remove").length).toEqual(1);
+                done();
+            });
+        });
+
+        it("call comment service to remove comment", done => {
+            notificationService.confirmation = (params: any, func: Function) => { func(); };
+            commentService.removeFromArticle = jasmine.createSpy("removeFromArticle").and.returnValue(Promise.resolve());
+            createComponent().then(fixture => {
+                let component = fixture.debugElement.componentViewChildren[0].componentInstance;
+                component.remove();
+                expect(commentService.removeFromArticle).toHaveBeenCalled();
+                done();
+            });
+        });
     });
 });
 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',
+    outputs: ['commentRemoved'],
     templateUrl: 'app/article/comment/comment.html'
 })
+@Inject(CommentService, NotificationService)
 export class CommentComponent {
  
     @Input() comment: noosfero.CommentViewModel;
     @Input() article: noosfero.Article;
     @Input() displayActions = true;
     @Input() displayReplies = true;
+    @Output() commentRemoved: EventEmitter<Comment> = new EventEmitter<Comment>();
  
     showReply() {
         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>) => {
+                this.commentRemoved.next(this.comment);
+                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" 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;
     }
@@ -83,5 +83,26 @@ describe(&quot;Components&quot;, () =&gt; {
             });
         });
  
+        it("remove comment when calling commentRemoved", done => {
+            createComponent().then(fixture => {
+                let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                let comment = { id: 1 };
+                component.comments = <any>[comment];
+                component.commentRemoved(<any>comment);
+                expect(component.comments).toEqual([]);
+                done();
+            });
+        });
+
+        it("do nothing when call commentRemoved with a comment that doesn't belongs to the comments list", done => {
+            createComponent().then(fixture => {
+                let component: CommentsComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
+                let comment = { id: 1 };
+                component.comments = <any>[comment];
+                component.commentRemoved(<any>{ id: 2 });
+                expect(component.comments).toEqual([comment]);
+                done();
+            });
+        });
     });
 });
@@ -37,6 +37,13 @@ export class CommentsComponent {
         this.resetShowReply();
     }
  
+    commentRemoved(comment: noosfero.Comment): void {
+        let index = this.comments.indexOf(comment, 0);
+        if (index >= 0) {
+            this.comments.splice(index, 1);
+        }
+    }
+
     private resetShowReply() {
         this.comments.forEach((comment: noosfero.CommentViewModel) => {
             comment.__show_reply = false;
@@ -2,7 +2,7 @@
   <noosfero-post-comment (comment-saved)="ctrl.commentAdded($event.detail)" ng-if="ctrl.showForm" [article]="ctrl.article" [parent]="ctrl.parent" [comment]="ctrl.newComment"></noosfero-post-comment>
  
   <div class="comments-list">
-    <noosfero-comment ng-repeat="comment in ctrl.comments | orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment>
+    <noosfero-comment (comment-removed)="ctrl.commentRemoved($event.detail)" ng-repeat="comment in ctrl.comments | orderBy: 'created_at':true" [comment]="comment" [article]="ctrl.article"></noosfero-comment>
   </div>
   <button type="button" ng-if="ctrl.displayMore()" class="more-comments btn btn-default btn-block" ng-click="ctrl.loadNextPage()">{{"comment.pagination.more" | translate}}</button>
 </div>
 <ul class="nav navbar-nav">
-  <li ng-show="vm.profile">
-    <a ng-show="vm.parentId" href="#" role="button" ui-sref="main.cms({profile: vm.profile.identifier, parent_id: vm.parentId})">
-      <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.content_viewer_actions.new_post" | translate}}
-    </a>
-  </li>
-  <li ng-show="vm.profile">
-    <a href="#" role="button" ui-sref="main.cms({profile: vm.profile.identifier, parent_id: vm.parentId, type: 'CommentParagraphPlugin::Discussion'})">
-      <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.content_viewer_actions.new_post" | translate}}
-    </a>
-  </li>
+    <li class="dropdown profile-menu" uib-dropdown>
+        <a class="btn dropdown-toggle" data-toggle="dropdown" uib-dropdown-toggle>
+            {{"navbar.content_viewer_actions.new_item" | translate}}
+            <i class="fa fa-caret-down"></i>
+        </a>
+        <ul class="dropdown-menu" uib-dropdown-menu ng-show="vm.profile">
+            <li ng-show="vm.parentId">
+                <a href="#" ui-sref="main.cms({profile: vm.profile.identifier, parent_id: vm.parentId})">
+                    <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.content_viewer_actions.new_post" | translate}}
+                </a>
+            </li>
+            <li>
+                <a href="#" ui-sref="main.cms({profile: vm.profile.identifier, parent_id: vm.parentId, type: 'CommentParagraphPlugin::Discussion'})">
+                    <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.content_viewer_actions.new_discussion" | translate}}
+                </a>
+            </li>
+        </ul>
+    </li>
+   
 </ul>
+
@@ -0,0 +1,53 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider} from 'ng-forward';
+import {ComponentTestHelper, createClass} from "./../../../spec/component-test-helper";
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {ContentViewerActionsComponent} from '././content-viewer-actions.component';
+import * as helpers from "../../../spec/helpers";
+
+const htmlTemplate: string = '<content-viewer-actions [article]="ctrl.article" [profile]="ctrl.profile"></content-viewer-actions>';
+
+describe("Components", () => {
+
+    describe("Content Viewer Actions Component", () => {
+        let serviceMock = {
+            getEnvironmentPeople: (filters: any): any => {
+                return Promise.resolve([{ identifier: "person1" }]);
+            }
+        };
+        let providers = [
+            new Provider('ArticleService', { useValue: helpers.mocks.articleService }),
+            new Provider('ProfileService', { useValue: helpers.mocks.profileService })
+        ];
+
+        let helper: ComponentTestHelper<ContentViewerActionsComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        /**
+         * The beforeEach procedure will initialize the helper and parse
+         * the component according to the given providers. Unfortunetly, in
+         * this mode, the providers and properties given to the construtor
+         * can't be overriden.
+        */
+        beforeEach((done) => {
+            // Create the component bed for the test. Optionally, this could be done
+            // in each test if one needs customization of these parameters per test
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [ContentViewerActionsComponent],
+                providers: providers,
+                properties: {}
+            });
+            helper = new ComponentTestHelper<ContentViewerActionsComponent>(cls, done);
+        });
+
+        it("render the actions new item menu", () => {
+            expect(helper.all("a[class|='btn dropdown-toggle']")[0]).not.toBeNull();
+        });
+
+        it("render two menu item actions", () => {
+            expect(helper.all("ul")[1].find("li").length).toBe(2);
+        });
+    });
+});
 <div class="environment-container">
   <div class="row">
-    <noosfero-boxes [boxes]="vm.boxes" [owner]="vm.environment"></noosfero-boxes>
+    <noosfero-boxes ng-if="vm.boxes" [boxes]="vm.boxes" [owner]="vm.environment"></noosfero-boxes>
   </div>
 </div>
@@ -0,0 +1,75 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, provide} from 'ng-forward';
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+import {providers} from 'ng-forward/cjs/testing/providers';
+import {DisplayContentBlockComponent} from './display-content-block.component';
+import * as helpers from './../../../../spec/helpers';
+
+const htmlTemplate: string = '<noosfero-display-content-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-display-content-block>';
+
+describe("Components", () => {
+
+    describe("Display Content Block Component", () => {
+        let state = jasmine.createSpyObj("state", ["go"]);
+        let providers = [
+            provide('ArticleService', {
+                useValue: helpers.mocks.articleService
+            }),
+            provide('$state', { useValue: state })
+        ].concat(helpers.provideFilters("translateFilter"));
+
+        let sections: noosfero.Section[] = [
+            { value: 'abstract', checked: 'abstract'},
+            { value: 'title', checked: 'title' }
+        ];
+        let settings: noosfero.Settings = {
+            limit: 6,
+            sections: sections
+        };
+
+        let helper: ComponentTestHelper<DisplayContentBlockComponent>;
+
+        beforeEach(angular.mock.module("templates"));
+
+        /**
+         * The beforeEach procedure will initialize the helper and parse
+         * the component according to the given providers. Unfortunetly, in
+         * this mode, the providers and properties given to the construtor
+         * can't be overriden.
+        */
+        beforeEach((done) => {
+            // Create the component bed for the test. Optionally, this could be done
+            // in each test if one needs customization of these parameters per test
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [DisplayContentBlockComponent],
+                providers: providers,
+                properties: {
+                    block: {
+                        settings: settings
+                     }
+                }
+            });
+            helper = new ComponentTestHelper<DisplayContentBlockComponent>(cls, done);
+        });
+
+        it("verify settings is injected", () => {
+           expect(helper.component.block).not.toBeNull;
+           expect(helper.component.block.settings).not.toBeNull;
+           expect(helper.component.block.settings.limit).toEqual(6);
+           expect(helper.component.block.settings.sections.length).toEqual(3);
+        });
+
+        it("verify abstract is displayed", () => {
+            expect(helper.all("div[ng-bind-html|='article.abstract']")[0]).not.toBeNull;
+        });
+
+        it("verify title is displayed", () => {
+            expect(helper.all("div > h5")[0]).not.toBeNull;
+        });
+
+        it("verify body is not displayed", () => {
+            expect(helper.all("div[ng-bind-html|='article.body']")[0]).toBeNull;
+        });
+    });
+});
@@ -0,0 +1,54 @@
+import {Input, Inject, Component} from "ng-forward";
+import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+
+@Component({
+    selector: "noosfero-display-content-block",
+    templateUrl: 'app/layout/blocks/display-content/display-content-block.html',
+})
+@Inject(ArticleService, "$state")
+export class DisplayContentBlockComponent {
+
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile;
+
+    profile: noosfero.Profile;
+    articles: noosfero.Article[];
+    sections: noosfero.Section[];
+
+    documentsLoaded: boolean = false;
+
+    constructor(private articleService: ArticleService, private $state: ng.ui.IStateService) {}
+
+    ngOnInit() {
+        this.profile = this.owner;
+        let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
+        this.articleService.getByProfile(this.profile, { content_type: 'TinyMceArticle', per_page: limit })
+        .then((result: noosfero.RestResult<noosfero.Article[]>) => {
+            this.articles = <noosfero.Article[]>result.data;
+            this.sections = this.block.settings.sections;
+            // Add sections not defined by Noosfero API
+            this.addDefaultSections();
+            this.documentsLoaded = true;
+        });
+    }
+
+    /**
+     * This configuration doesn't exists on Noosfero. Statically typing here.
+     */
+    private addDefaultSections() {
+        let author: noosfero.Section = <noosfero.Section>{ value: 'author', checked: 'author' };
+        this.sections.push(author);
+    }
+
+    /**
+     * Returns whether a settings section should be displayed.
+     *
+     */
+    private display(section_name: string): boolean {
+        let section: noosfero.Section = this.sections.find( function(section: noosfero.Section) {
+            return section.value === section_name;
+        });
+        return section !== undefined && section.checked !== undefined;
+    }
+
+}
@@ -0,0 +1,46 @@
+<div class="{{ctrl.type}}-block">
+  <div ng-repeat="article in ctrl.articles" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: article.path})"" class="article">
+    <!-- Article Title -->
+    <div class="page-header" ng-if="ctrl.display('title')">
+        <h5 class="title media-heading" ng-bind="article.title"></h3>
+    </div>
+
+    <div class="sub-header clearfix">
+        <!-- Article Abstract and Read More Link -->
+        <div class="post-lead" ng-if="ctrl.display('abstract')">
+            <div ng-bind-html="article.abstract"></div>
+            <a href="#" ui-sref="main.profile.page({profile: ctrl.profile.identifier, page: article.path})">
+                <i class="fa fa-pencil-square-o fa-fw fa-lg"></i> {{"article.actions.read_more" | translate}}
+            </a>
+        </div>
+        <div class="page-info pull-right small text-muted" ng-if="ctrl.display('publish_date')">
+            <!-- Article Published Date -->
+            <span class="time">
+                <i class="fa fa-clock-o"></i> <span am-time-ago="article.created_at | dateFormat"></span>
+            </span>
+            <!-- Article Author -->
+            <span class="author" ng-if="ctrl.display('author')">
+                <i class="fa fa-user"></i>
+                <a ui-sref="main.profile.home({profile: article.author.identifier})" ng-if="article.author">
+                    <span class="author-name" ng-bind="article.author.name"></span>
+                </a>
+            </span>
+        </div>
+    </div>
+
+    <div class="post-lead">
+        <!-- Article Image -->
+        <img ng-show="ctrl.display('image')" ng-src="{{article.image.url}}" class="img-responsive article-image">
+        <!-- Article Body -->
+        <div ng-bind-html="article.body" ng-show="ctrl.display('body')"></div>
+    </div>
+
+    <!-- Article Tags -->
+    <div ng-if="ctrl.display('tags')" class="post-lead">
+        <div class="label" ng-repeat="tag in article.tag_list">
+            <span class="badge" ng-bind="tag"></span>
+        </div>
+    </div>
+
+  </div>
+</div>
@@ -0,0 +1,17 @@
+.members-block {
+  .member {
+    img, i.profile-image {
+      width: 60px;
+    }
+    img {
+      display: inline-block;
+      vertical-align: top;
+    }
+    i.profile-image {
+        text-align: center;
+        background-color: #889DB1;
+        color: #F1F1F1;
+        font-size: 4.5em;
+    }
+  }
+}
@@ -0,0 +1,2 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./display-content-block.component";
@@ -11,9 +11,9 @@ describe(&quot;Components&quot;, () =&gt; {
     describe("Recent Documents Block Component", () => {
  
         let settingsObj = {};
-        let mockedArticleService = {
-            getByProfile: (profile: noosfero.Profile, filters: any): any => {
-                return Promise.resolve({ data: [{ name: "article1" }], headers: (name: string) => { return name; } });
+        let mockedBlockService = {
+            getApiContent: (block: noosfero.Block): any => {
+                return Promise.resolve({ articles: [{ name: "article1" }], headers: (name: string) => { return name; } });
             }
         };
         let profile = { name: 'profile-name' };
@@ -25,8 +25,8 @@ describe(&quot;Components&quot;, () =&gt; {
         function getProviders() {
             return [
                 new Provider('$state', { useValue: state }),
-                new Provider('ArticleService', {
-                    useValue: mockedArticleService
+                new Provider('BlockService', {
+                    useValue: mockedBlockService
                 }),
             ].concat(provideFilters("truncateFilter", "stripTagsFilter"));
         }
@@ -44,7 +44,7 @@ describe(&quot;Components&quot;, () =&gt; {
         }
  
  
-        it("get recent documents from the article service", done => {
+        it("get recent documents from the block service", done => {
             tcb.createAsync(getComponent()).then(fixture => {
                 let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
                 expect(recentDocumentsBlock.documents).toEqual([{ name: "article1" }]);
@@ -61,20 +61,5 @@ describe(&quot;Components&quot;, () =&gt; {
             });
         });
  
-        it("it uses default limit 5 if not defined on block", done => {
-            settingsObj = null;
-            mockedArticleService = jasmine.createSpyObj("mockedArticleService", ["getByProfile"]);
-            (<any>mockedArticleService).mocked = true;
-            let thenMocked = jasmine.createSpy("then");
-            mockedArticleService.getByProfile = jasmine.createSpy("getByProfile").and.returnValue({then: thenMocked});
-            let getByProfileFunct = mockedArticleService.getByProfile;
-            tcb.createAsync(getComponent()).then(fixture => {
-                let recentDocumentsBlock: RecentDocumentsBlockComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-                recentDocumentsBlock.openDocument({ path: "path", profile: { identifier: "identifier" } });
-                expect(getByProfileFunct).toHaveBeenCalledWith(profile, { content_type: 'TinyMceArticle', per_page: 5 });
-                done();
-            });
-        });
-
     });
 });
 import {Component, Inject, Input} from "ng-forward";
-import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+import {BlockService} from "../../../../lib/ng-noosfero-api/http/block.service";
  
 @Component({
     selector: "noosfero-recent-documents-block",
     templateUrl: 'app/layout/blocks/recent-documents/recent-documents-block.html'
 })
-@Inject(ArticleService, "$state")
+@Inject(BlockService, "$state")
 export class RecentDocumentsBlockComponent {
  
     @Input() block: any;
@@ -13,23 +13,15 @@ export class RecentDocumentsBlockComponent {
  
     profile: any;
     documents: any;
-
     documentsLoaded: boolean = false;
  
-    constructor(private articleService: ArticleService, private $state: any) {
-    }
+    constructor(private blockService: BlockService, private $state: any) { }
  
     ngOnInit() {
         this.profile = this.owner;
         this.documents = [];
-
-        let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 5;
-        // FIXME get all text articles
-        // FIXME make the getByProfile a generic method where we tell the type passing a class TinyMceArticle
-        //       and the promise should be of type TinyMceArticle[], per example
-        this.articleService.getByProfile(this.profile, { content_type: 'TinyMceArticle', per_page: limit })
-        .then((result: noosfero.RestResult<noosfero.Article[]>) => {
-            this.documents = <noosfero.Article[]>result.data;
+        this.blockService.getApiContent(this.block).then((content: any) => {
+            this.documents = content.articles;
             this.documentsLoaded = true;
         });
     }
 <div ng-class="{'col-md-2-5': box.position!=1, 'col-md-7': box.position==1}">
-  <div ng-repeat="block in box.blocks | orderBy: 'position'" class="panel panel-default block {{block.type | lowercase}}" >
+  <div ng-repeat="block in box.blocks | displayBlocks:ctrl.isHomepage:ctrl.currentUser  | orderBy: 'position'" class="panel panel-default block {{block.type | lowercase}}" >
     <div class="panel-heading" ng-show="block.title">
       <h3 class="panel-title">{{block.title}}</h3>
     </div>
-    <div class="panel-body">
+    <div class="panel-body {{block.type | lowercase}}" >
       <noosfero-block [block]="block" [owner]="ctrl.owner"></noosfero-block>
     </div>
   </div>
 import {Component} from 'ng-forward';
-
 import {BoxesComponent} from './boxes.component';
-
-import {
-    createComponentFromClass,
-    quickCreateComponent,
-    provideEmptyObjects,
-    createProviderToValue,
-    provideFilters
-} from "../../../spec/helpers";
+import * as helpers from "../../../spec/helpers";
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
  
 // this htmlTemplate will be re-used between the container components in this spec file
 const htmlTemplate: string = '<noosfero-boxes [boxes]="ctrl.boxes" [owner]="ctrl.profile"></noosfero-blog>';
@@ -16,49 +9,79 @@ const htmlTemplate: string = &#39;&lt;noosfero-boxes [boxes]=&quot;ctrl.boxes&quot; [owner]=&quot;ctrl
  
 describe("Boxes Component", () => {
  
+    let helper: ComponentTestHelper<BoxesComponent>;
     beforeEach(() => {
         angular.mock.module("templates");
     });
  
-    @Component({
-        selector: 'test-container-component',
-        template: htmlTemplate,
-        directives: [BoxesComponent],
-        providers: []
-    })
-    class BoxesContainerComponent {
-        boxes: noosfero.Box[] = [
+    let properties = {
+        boxes: [
             { id: 1, position: 1 },
             { id: 2, position: 2 }
-        ];
-
-        owner: noosfero.Profile =  <noosfero.Profile> {
+        ],
+        owner: {
             id: 1,
             identifier: 'profile-name',
             type: 'Person'
-        };
-    }
+        }
+    };
+    beforeEach((done) => {
+        let cls = createClass({
+            template: htmlTemplate,
+            directives: [BoxesComponent],
+            properties: properties,
+            providers: [
+                helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
+                helpers.createProviderToValue('AuthService', helpers.mocks.authService),
+                helpers.createProviderToValue('$state', state),
+                helpers.createProviderToValue('TranslatorService', translatorService)
+            ]
+        });
+        helper = new ComponentTestHelper<BoxesComponent>(cls, done);
+    });
  
-    it("renders boxes into a container", (done: Function) => {
-        createComponentFromClass(BoxesContainerComponent).then((fixture) => {
-            let boxesHtml = fixture.debugElement;
-            expect(boxesHtml.query('div.col-md-7').length).toEqual(1);
-            expect(boxesHtml.query('div.col-md-2-5').length).toEqual(1);
+    let translatorService = jasmine.createSpyObj("translatorService", ["currentLanguage"]);
+    let state = jasmine.createSpyObj("state", ["current"]);
+    state.current = { name: "" };
  
-            done();
-        });
+    it("renders boxes into a container", () => {
+        expect(helper.find('div.col-md-7').length).toEqual(1);
+        expect(helper.find('div.col-md-2-5').length).toEqual(1);
+    });
+
+    it("check the boxes order", () => {
+        expect(helper.component.boxesOrder(properties['boxes'][0])).toEqual(1);
+        expect(helper.component.boxesOrder(properties['boxes'][1])).toEqual(0);
     });
  
-    it("check the boxes order", (done: Function) => {
-        createComponentFromClass(BoxesContainerComponent).then((fixture) => {
+    it("set isHomepage as false by default", () => {
+        expect(helper.component.isHomepage).toBeFalsy();
+    });
  
-            let boxesComponent: BoxesComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
-            let boxesContainer: BoxesContainerComponent = fixture.componentInstance;
+    it("set isHomepage as true when in profile home page", () => {
+        state.current = { name: "main.profile.home" };
+        helper.component.ngOnInit();
+        expect(helper.component.isHomepage).toBeTruthy();
+    });
  
-            expect(boxesComponent.boxesOrder(boxesContainer.boxes[0])).toEqual(1);
-            expect(boxesComponent.boxesOrder(boxesContainer.boxes[1])).toEqual(0);
+    it("set isHomepage as true when in profile info page", () => {
+        state.current = { name: "main.profile.info" };
+        helper.component.ngOnInit();
+        expect(helper.component.isHomepage).toBeTruthy();
+    });
  
-            done();
-        });
+    it("set isHomepage as true when in profile page", () => {
+        state.current = { name: "main.profile.page" };
+        state.params = { page: "/page" };
+        (<noosfero.Profile>helper.component.owner).homepage = '/page';
+        helper.component.ngOnInit();
+        expect(helper.component.isHomepage).toBeTruthy();
+    });
+
+    it("set isHomepage as true when in environment home page", () => {
+        state.current = { name: "main.environment.home" };
+        helper.component.owner = <noosfero.Environment>{};
+        helper.component.ngOnInit();
+        expect(helper.component.isHomepage).toBeTruthy();
     });
 });
 import {Input, Inject, Component} from 'ng-forward';
+import {SessionService, AuthService, AuthEvents} from "../../login";
+import {DisplayBlocks} from "./display-blocks.filter";
  
 @Component({
     selector: "noosfero-boxes",
-    templateUrl: "app/layout/boxes/boxes.html"
+    templateUrl: "app/layout/boxes/boxes.html",
+    directives: [DisplayBlocks]
 })
+@Inject("SessionService", 'AuthService', "$state", "$rootScope")
 export class BoxesComponent {
  
     @Input() boxes: noosfero.Box[];
-    @Input() owner: noosfero.Profile;
+    @Input() owner: noosfero.Profile | noosfero.Environment;
+
+    currentUser: noosfero.User;
+    isHomepage = true;
+
+    constructor(private session: SessionService,
+        private authService: AuthService,
+        private $state: ng.ui.IStateService,
+        private $rootScope: ng.IRootScopeService) {
+
+        this.currentUser = this.session.currentUser();
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
+            this.currentUser = this.session.currentUser();
+            this.verifyHomepage();
+        });
+        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
+            this.currentUser = this.session.currentUser();
+            this.verifyHomepage();
+        });
+        this.$rootScope.$on("$stateChangeSuccess", (event: ng.IAngularEvent, toState: ng.ui.IState) => {
+            this.verifyHomepage();
+        });
+    }
+
+    ngOnInit() {
+        this.verifyHomepage();
+    }
  
     boxesOrder(box: noosfero.Box) {
         if (box.position === 2) return 0;
         return box.position;
     }
+
+    private verifyHomepage() {
+        if (this.owner && ["Profile", "Community", "Person"].indexOf((<any>this.owner)['type']) >= 0) {
+            let profile = <noosfero.Profile>this.owner;
+            this.isHomepage = this.$state.current.name === "main.profile.home";
+            if (profile.homepage) {
+                this.isHomepage = this.isHomepage ||
+                    (this.$state.current.name === "main.profile.page" && profile.homepage === this.$state.params['page']);
+            } else {
+                this.isHomepage = this.isHomepage || this.$state.current.name === "main.profile.info";
+            }
+        } else {
+            this.isHomepage = this.$state.current.name === "main.environment.home";
+        }
+    }
 }
@@ -0,0 +1,100 @@
+import {quickCreateComponent} from "../../../spec/helpers";
+import {DisplayBlocks} from './display-blocks.filter';
+
+describe("Filters", () => {
+    describe("Display Blocks Filter", () => {
+
+        let translatorService = jasmine.createSpyObj("translatorService", ["currentLanguage"]);
+
+        it("not fail when blocks is null", done => {
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(null, true, <noosfero.User>{})).toEqual([]);
+            done();
+        });
+
+        it("return blocks when no setting is passed", done => {
+            let blocks = [{}];
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual(blocks);
+            done();
+        });
+
+        it("return blocks when no display is passed", done => {
+            let blocks = [{ setting: {} }];
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual(blocks);
+            done();
+        });
+
+        it("filter invisible blocks", done => {
+            let blocks = [{ settings: { display: "never" } }];
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual([]);
+            done();
+        });
+
+        it("filter blocks with except_home_page in homepage", done => {
+            let blocks = [{ settings: { display: "except_home_page" } }];
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual([]);
+            done();
+        });
+
+        it("filter blocks with home_page_only outside homepage", done => {
+            let blocks = [{ settings: { display: "home_page_only" } }];
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(<any>blocks, false, <noosfero.User>{})).toEqual([]);
+            done();
+        });
+
+        it("show all blocks when display_user is all for logged user", done => {
+            let blocks = [{ settings: { display_user: "all" } }];
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual(blocks);
+            done();
+        });
+
+        it("show all blocks when display_user is all for not logged user", done => {
+            let blocks = [{ settings: { display_user: "all" } }];
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(<any>blocks, true, null)).toEqual(blocks);
+            done();
+        });
+
+        it("filter blocks when display_user is logged for not logged user", done => {
+            let blocks = [{ settings: { display_user: "logged" } }];
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(<any>blocks, true, null)).toEqual([]);
+            done();
+        });
+
+        it("filter blocks when display_user is not_logged for logged user", done => {
+            let blocks = [{ settings: { display_user: "not_logged" } }];
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual([]);
+            done();
+        });
+
+        it("filter blocks with different language", done => {
+            let blocks = [{ settings: { language: "en" } }];
+            translatorService.currentLanguage = jasmine.createSpy("currentLanguage").and.returnValue("pt");
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual([]);
+            done();
+        });
+
+        it("filter blocks when hide is true", done => {
+            let blocks = [{ hide: true }];
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(<any>blocks, true, null)).toEqual([]);
+            done();
+        });
+
+        it("not filter blocks when hide is not true", done => {
+            let blocks = [{ id: 1, hide: false }, { id: 2 }];
+            let filter = new DisplayBlocks(translatorService);
+            expect(filter.transform(<any>blocks, true, null)).toEqual(blocks);
+            done();
+        });
+    });
+});
@@ -0,0 +1,39 @@
+import {Pipe, Inject} from "ng-forward";
+import {TranslatorService} from "../../shared/services/translator.service";
+
+@Pipe("displayBlocks")
+@Inject(TranslatorService)
+export class DisplayBlocks {
+
+    constructor(private translatorService: TranslatorService) { }
+
+    transform(blocks: noosfero.Block[], isHomepage: boolean, currentUser: noosfero.User) {
+        let selected: noosfero.Block[] = [];
+        blocks = blocks || [];
+        for (let block of blocks) {
+            if (this.visible(block, isHomepage) && this.displayToUser(block, currentUser) &&
+                this.displayOnLanguage(block, this.translatorService.currentLanguage())
+                && !block.hide) {
+                selected.push(block);
+            }
+        }
+        return selected;
+    }
+
+    private visible(block: noosfero.Block, isHomepage: boolean) {
+        let display = block.settings ? (<any>block.settings)['display'] : null;
+        return !display || ((isHomepage ? display !== "except_home_page" : display !== "home_page_only") && display !== "never");
+    }
+
+    private displayToUser(block: noosfero.Block, currentUser: noosfero.User) {
+        let displayUser = block.settings ? (<any>block.settings)['display_user'] : null;
+        return !displayUser || displayUser === "all" ||
+            (currentUser ? displayUser === "logged" : displayUser === "not_logged");
+    }
+
+    private displayOnLanguage(block: noosfero.Block, language: string) {
+        let displayLanguage = block.settings ? (<any>block.settings)['language'] : null;
+        return !displayLanguage || displayLanguage === "all" ||
+            language === displayLanguage;
+    }
+}
@@ -7,7 +7,8 @@
     .navbar-brand {
       .noosfero-logo {
         background: url("../assets/images/logo-noosfero.png") no-repeat;
-        padding: 0px 62px 64px 15px;
+        padding: 0px 62px 28px 15px;
+        background-size: 46px;
       }
     }
  
 import {Directive, Inject, Injectable} from "ng-forward";
-import {AuthEvents} from "./../../login/auth-events";
+import {AuthEvents} from "../../login/auth-events";
 import {AuthService} from "./../../login/auth.service";
 import {HtmlUtils} from "../html-utils";
 import {INgForwardJQuery} from 'ng-forward/cjs/util/jqlite-extensions';
@@ -10,15 +10,16 @@ import {BlockComponent} from &quot;../layout/blocks/block.component&quot;;
 import {EnvironmentComponent} from "../environment/environment.component";
 import {EnvironmentHomeComponent} from "../environment/environment-home.component";
 import {PeopleBlockComponent} from "../layout/blocks/people/people-block.component";
-import {LinkListBlockComponent} from "./../layout/blocks/link-list/link-list-block.component";
+import {DisplayContentBlockComponent} from "../layout/blocks/display-content/display-content-block.component";
+import {LinkListBlockComponent} from "../layout/blocks/link-list/link-list-block.component";
 import {RecentDocumentsBlockComponent} from "../layout/blocks/recent-documents/recent-documents-block.component";
 import {ProfileImageBlockComponent} from "../layout/blocks/profile-image/profile-image-block.component";
 import {RawHTMLBlockComponent} from "../layout/blocks/raw-html/raw-html-block.component";
 import {StatisticsBlockComponent} from "../layout/blocks/statistics/statistics-block.component";
 import {TagsBlockComponent} from "../layout/blocks/tags/tags-block.component";
  
-import {MembersBlockComponent} from "./../layout/blocks/members/members-block.component";
-import {CommunitiesBlockComponent} from "./../layout/blocks/communities/communities-block.component";
+import {MembersBlockComponent} from "../layout/blocks/members/members-block.component";
+import {CommunitiesBlockComponent} from "../layout/blocks/communities/communities-block.component";
  
 import {LoginBlockComponent} from "../layout/blocks/login-block/login-block.component";
  
@@ -95,7 +96,7 @@ export class EnvironmentContent {
     template: '<div ng-view></div>',
     directives: [
         ArticleBlogComponent, ArticleViewComponent, BoxesComponent, BlockComponent,
-        EnvironmentComponent, PeopleBlockComponent,
+        EnvironmentComponent, PeopleBlockComponent, DisplayContentBlockComponent,
         LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
         MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
         MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent, StatisticsBlockComponent,
@@ -0,0 +1,18 @@
+<ul class="nav navbar-nav">
+    <li class="dropdown profile-menu" uib-dropdown>
+        <a class="btn dropdown-toggle" data-toggle="dropdown" uib-dropdown-toggle>
+            {{"navbar.profile_actions.new_item" | translate}}
+            <i class="fa fa-caret-down"></i>
+        </a>
+        <ul class="dropdown-menu" uib-dropdown-menu ng-show="vm.profile">
+            <!-- FIXED HERE BUT SHOULD BE A HOTSPOT TO INCLUDE LINKS FROM THE PLUGIN -->
+            <li>
+                <a href="#" ui-sref="main.cms({profile: vm.profile.identifier, parent_id: null, type: 'CommentParagraphPlugin::Discussion'})">
+                    <i class="fa fa-file fa-fw fa-lg"></i> {{"navbar.profile_actions.new_discussion" | translate}}
+                </a>
+            </li>
+        </ul>
+    </li>
+   
+</ul>
+
@@ -0,0 +1,21 @@
+import {Component, Inject, provide} from "ng-forward";
+import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
+
+@Component({
+    selector: "profile-actions",
+    templateUrl: "app/article/content-viewer/navbar-actions.html",
+    providers: [
+        provide('profileService', { useClass: ProfileService })
+    ]
+})
+@Inject(ProfileService)
+export class ProfileActionsComponent {
+    profile: noosfero.Profile;
+    parentId: number;
+
+    constructor(profileService: ProfileService) {
+        profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
+            this.profile = profile;
+        });
+    }
+}
@@ -18,8 +18,10 @@ export class ProfileHomeComponent {
             return profileService.getHomePage(<number>this.profile.id, { fields: 'path' });
         }).then((response: restangular.IResponse) => {
             if (response.data.article) {
+                this.profile.homepage = response.data.article.path;
                 $state.transitionTo('main.profile.page', { page: response.data.article.path, profile: this.profile.identifier }, { location: false });
             } else {
+                this.profile.homepage = null;
                 $state.transitionTo('main.profile.info', { profile: this.profile.identifier }, { location: false });
             }
         });
@@ -9,7 +9,7 @@ import {ActivitiesComponent} from &quot;./activities/activities.component&quot;;
 import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
 import {NotificationService} from "../shared/services/notification.service";
 import {MyProfileComponent} from "./myprofile.component";
-
+import {ProfileActionsComponent} from "./profile-actions.component";
  
 /**
  * @ngdoc controller
@@ -37,13 +37,25 @@ import {MyProfileComponent} from &quot;./myprofile.component&quot;;
                 templateUrl: "app/profile/info/profile-info.html",
                 controller: ProfileInfoComponent,
                 controllerAs: "vm"
+            },
+            "actions@main": {
+                templateUrl: "app/profile/navbar-actions.html",
+                controller: ProfileActionsComponent,
+                controllerAs: "vm"
             }
         }
     },
     {
         name: 'main.profile.settings',
         url: "^/myprofile/:profile",
-        component: MyProfileComponent
+        component: MyProfileComponent,
+        views: {
+            "actions@main": {
+                templateUrl: "app/profile/navbar-actions.html",
+                controller: ProfileActionsComponent,
+                controllerAs: "vm"
+            }
+        }
     },
     {
         name: 'main.cms',
 <div class="profile-container">
   <div class="profile-header" ng-bind-html="vm.profile.custom_header"></div>
   <div class="row">
-    <noosfero-boxes [boxes]="vm.boxes" [owner]="vm.profile"></noosfero-boxes>
+    <noosfero-boxes ng-if="vm.boxes" [boxes]="vm.boxes" [owner]="vm.profile"></noosfero-boxes>
   </div>
   <div class="profile-footer" ng-bind-html="vm.profile.custom_footer"></div>
 </div>
@@ -6,7 +6,6 @@ export interface UserResponse {
     user: noosfero.User;
 }
  
-
 export interface INoosferoLocalStorage extends angular.storage.ILocalStorageService {
     currentUser: noosfero.User;
 }
@@ -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);
     }
  
 }
@@ -0,0 +1,19 @@
+export class ArrayUtils {
+
+    /**
+     * Returns if two arrays are equal
+     */
+    static arraysEqual(a: any, b: any): boolean {
+        if (a === b) return true;
+        if (a == null || b == null) return false;
+        if (a.length !== b.length) return false;
+
+        // If you don't care about the order of the elements inside
+        // the array, you should sort both arrays here.
+        for (let i = 0; i < a.length; ++i) {
+            if (a[i] !== b[i]) return false;
+        }
+        return true;
+    }
+
+}
 \ No newline at end of file
@@ -0,0 +1,36 @@
+export class HashMap<K extends EqualsObject, V> {
+    private values: Array<HashItem<K, V>> = new Array();
+
+    get(key: K): V {
+        let found = this.values.find( function(value: HashItem<K, V>) {
+            return value.key.equals(key);
+        });
+        if (found) {
+            return found.value;
+        }
+        return null;
+    }
+
+    put(key: K, value: V): void {
+        this.values.push(new HashItem(key, value));
+    }
+
+    clear() {
+        this.values = new Array();
+    }
+}
+
+export class HashItem<K, V> {
+    key: K;
+    value: V;
+    constructor(key: K, value: V) {
+        this.key = key;
+        this.value = value;
+    }
+}
+
+export abstract class EqualsObject {
+
+    abstract equals(other: any): boolean;
+
+}
 \ No newline at end of file
@@ -0,0 +1,3 @@
+/* Module Index Entry - generated using the script npm run generate-index */
+export * from "./hashmap";
+export * from "./arrays";
@@ -24,7 +24,12 @@
   "auth.form.login": "Login / Email address",
   "auth.form.password": "Password",
   "auth.form.login_button": "Login",
+  "navbar.content_viewer_actions.new_item": "New Item",
+  "navbar.profile_actions.new_item": "New Item",
   "navbar.content_viewer_actions.new_post": "New Post",
+  "//TODO": "Create a way to load plugin translatios - Move plugins translations to the plugins translations files",
+  "navbar.content_viewer_actions.new_discussion": "New Discussion",
+  "navbar.profile_actions.new_discussion": "New Discussion",
   "notification.error.default.message": "Something went wrong!",
   "notification.error.default.title": "Oops...",
   "notification.profile.not_found": "Page not found",
@@ -35,8 +40,15 @@
   "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.delete": "Delete",
+  "article.actions.read_more": "Read More",
   "article.basic_editor.title": "Title",
   "article.basic_editor.body": "Body",
   "article.basic_editor.save": "Save",
@@ -24,7 +24,9 @@
   "auth.form.login": "Login / Email",
   "auth.form.password": "Senha",
   "auth.form.login_button": "Login",
+  "navbar.content_viewer_actions.new_item": "Novo Item",
   "navbar.content_viewer_actions.new_post": "Novo Artigo",
+  "navbar.content_viewer_actions.new_discussion": "Nova Discussão",
   "notification.error.default.message": "Algo deu errado!",
   "notification.error.default.title": "Oops...",
   "notification.profile.not_found": "Página não encontrada",
@@ -35,8 +37,15 @@
   "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.delete": "Excluir",
+  "article.actions.read_more": "Ler mais",
   "article.basic_editor.title": "Título",
   "article.basic_editor.body": "Corpo",
   "article.basic_editor.save": "Salvar",
@@ -20,6 +20,15 @@ describe(&quot;Services&quot;, () =&gt; {
  
         describe("Succesfull requests", () => {
  
+            it("should remove article", (done) => {
+                let articleId = 1;
+                $httpBackend.expectDELETE(`/api/v1/articles/${articleId}`).respond(200, { success: "true" });
+                articleService.removeArticle(<noosfero.Article>{id: articleId});
+                $httpBackend.flush();
+                $httpBackend.verifyNoOutstandingExpectation();
+                done();
+            });
+
             it("should return article children", (done) => {
                 let articleId = 1;
                 $httpBackend.expectGET(`/api/v1/articles/${articleId}/children`).respond(200, { articles: [{ name: "article1" }] });
-import { Injectable, Inject } from "ng-forward";
+import { Injectable, Inject, EventEmitter } from "ng-forward";
 import {RestangularService} from "./restangular_service";
 import {ProfileService} from "./profile.service";
+import {NoosferoRootScope} from "./../../../app/shared/models/interfaces";
  
 @Injectable()
 @Inject("Restangular", "$q", "$log", ProfileService)
-
 export class ArticleService extends RestangularService<noosfero.Article> {
  
+    private articleRemoved: EventEmitter<noosfero.Article> = new EventEmitter<noosfero.Article>();
+
     constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService, protected profileService: ProfileService) {
         super(Restangular, $q, $log);
     }
@@ -22,6 +24,31 @@ export class ArticleService extends RestangularService&lt;noosfero.Article&gt; {
         };
     }
  
+    removeArticle(article: noosfero.Article) {
+        let restRequest: ng.IPromise<noosfero.RestResult<noosfero.Article>> = this.remove(article);
+        let deferred = this.$q.defer<noosfero.RestResult<noosfero.Article>>();
+        restRequest.then((result: any) => {
+            this.notifyArticleRemovedListeners(article);
+        }).catch(this.getHandleErrorFunction(deferred));
+        return deferred.promise;
+    }
+
+    /**
+     * Notify listeners that this article has been removed
+     */
+    private notifyArticleRemovedListeners(article: noosfero.Article) {
+        // let listener = this.events.get(this.removed);
+        // listener.next(article);
+        this.articleRemoved.next(article);
+    }
+
+    /**
+     * subscribes to the ArticleRemoved event emitter
+     */
+    subscribeToArticleRemoved(fn: Function) {
+        this.articleRemoved.subscribe(fn);
+    }
+
     updateArticle(article: noosfero.Article) {
         let headers = {
             'Content-Type': 'application/json'
@@ -103,3 +130,4 @@ export class ArticleService extends RestangularService&lt;noosfero.Article&gt; {
  
  
 }
+
@@ -0,0 +1,36 @@
+import {BlockService} from "./block.service";
+
+
+describe("Services", () => {
+
+    describe("Block Service", () => {
+
+        let $httpBackend: ng.IHttpBackendService;
+        let blockService: BlockService;
+
+        beforeEach(angular.mock.module("noosferoApp", ($translateProvider: angular.translate.ITranslateProvider) => {
+            $translateProvider.translations('en', {});
+        }));
+
+        beforeEach(inject((_$httpBackend_: ng.IHttpBackendService, _BlockService_: BlockService) => {
+            $httpBackend = _$httpBackend_;
+            blockService = _BlockService_;
+        }));
+
+
+        describe("Succesfull requests", () => {
+
+            it("should return api content of a block", (done) => {
+                let blockId = 1;
+                $httpBackend.expectGET(`/api/v1/blocks/${blockId}`).respond(200, { block: { api_content: [{ name: "article1" }] } });
+                blockService.getApiContent(<noosfero.Block>{ id: blockId }).then((content: any) => {
+                    expect(content).toEqual([{ name: "article1" }]);
+                    done();
+                });
+                $httpBackend.flush();
+            });
+        });
+
+
+    });
+});
@@ -0,0 +1,40 @@
+import { Injectable, Inject } from "ng-forward";
+import {RestangularService} from "./restangular_service";
+import {ProfileService} from "./profile.service";
+
+@Injectable()
+@Inject("Restangular", "$q", "$log")
+export class BlockService extends RestangularService<noosfero.Block> {
+
+    constructor(Restangular: restangular.IService, $q: ng.IQService, $log: ng.ILogService) {
+        super(Restangular, $q, $log);
+    }
+
+    getResourcePath() {
+        return "blocks";
+    }
+
+    getDataKeys() {
+        return {
+            singular: 'block',
+            plural: 'blocks'
+        };
+    }
+
+    getApiContent(block: noosfero.Block) {
+        let apiContentPromise = this.$q.defer();
+        if (block) {
+            if (block.api_content) {
+                apiContentPromise.resolve(block.api_content);
+            } else {
+                this.get(block.id)
+                    .then((result: noosfero.RestResult<noosfero.Block>) => {
+                        block = result.data;
+                        apiContentPromise.resolve(block.api_content);
+                    });
+            }
+        }
+        return apiContentPromise.promise;
+    }
+
+}
@@ -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);
+    }
 }
  
 namespace noosfero {
     export interface Article extends RestModel {
+        abstract: string;
         path: string;
         profile: Profile;
         type: string;
@@ -12,5 +13,6 @@ namespace noosfero {
         setting: any;
         start_date: string;
         end_date: string;
+        accept_comments: boolean;
     }
 }
 namespace noosfero {
-    export interface Block {
+    export interface Block extends RestModel {
         id: number;
-        settings: any;
+        settings: Settings;
+        limit: number;
+        api_content: any;
+        hide: boolean;
     }
 }
@@ -22,13 +22,13 @@ namespace noosfero {
          * @returns {string} The unque identifier for the Profile
          */
         identifier: string;
-        
+
         /**
          * @ngdoc property
          * @name created_at
          * @propertyOf noofero.Profile
          * @returns {string} The timestamp this object was created
-         */        
+         */
         created_at: string;
  
         /**
@@ -54,5 +54,13 @@ namespace noosfero {
          * @returns {string} A key => value custom fields data of Profile (e.g.: "{'Address':'Street A, Number 102...'}")
          */
         additional_data?: any;
+
+        /**
+         * @ngdoc property
+         * @name homepage
+         * @propertyOf noofero.Profile
+         * @returns {string} The Profile homepage
+         */
+        homepage: string;
     }
 }
@@ -0,0 +1,16 @@
+namespace noosfero {
+    /**
+     * @ngdoc interface
+     * @name noosfero.Section
+     * @description
+     *  Represents a block settings section. A Section has a value property, 
+     * which represents the Section name, and an optinally checked property which
+     * has the same value as the value property indicating that this property is
+     * selected in the block configuration.
+     */
+    export interface Section {
+
+        value: string;
+        checked: string;
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,9 @@
+namespace noosfero {
+    /**
+     * Represents a noosfero block settings.
+     */
+    export interface Settings {
+        sections: noosfero.Section[];
+        limit: number;
+    }
+}
 \ No newline at end of file
@@ -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', () => {
@@ -74,5 +74,17 @@ describe(&quot;Components&quot;, () =&gt; {
             functionToggleCommentParagraph({ id: 2 });
             expect(helper.component.article.id).toEqual(2);
         });
+
+        it('not display button to side comments when comments was closed and there is no comment paragraph', () => {
+            helper.component.article.accept_comments = false;
+            helper.component.commentsCount = 0;
+            expect(helper.component.isActivated()).toBeFalsy();
+        });
+
+        it('display button to side comments when comments was closed and there is some comments to display', () => {
+            helper.component.article.accept_comments = false;
+            helper.component.commentsCount = 2;
+            expect(helper.component.isActivated()).toBeTruthy();
+        });
     });
 });
@@ -32,7 +32,9 @@ export class AllowCommentComponent {
     }
  
     isActivated() {
-        return this.article && this.article.setting && this.article.setting.comment_paragraph_plugin_activate;
+        return this.article && this.article.setting &&
+            this.article.setting.comment_paragraph_plugin_activate &&
+            (this.article.accept_comments || this.commentsCount > 0);
     }
  
     showParagraphComments() {
 <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;
@@ -0,0 +1,42 @@
+import {DiscussionEditorComponent} from './discussion-editor.component';
+import {ComponentTestHelper, createClass} from './../../../../../spec/component-test-helper';
+
+const htmlTemplate: string = '<comment-paragraph-plugin-discussion-editor [article]="ctrl.article"></comment-paragraph-plugin-discussion-editor>';
+
+describe("Components", () => {
+    describe("Discussion Editor Component", () => {
+
+        let helper: ComponentTestHelper<DiscussionEditorComponent>;
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let properties = { article: {} };
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [DiscussionEditorComponent],
+                properties: properties
+            });
+            helper = new ComponentTestHelper<DiscussionEditorComponent>(cls, done);
+        });
+
+        it("set start_date as article start_date when it was defined", () => {
+            let article = {start_date: new Date()};
+            helper.changeProperties({article: article});
+            helper.component.ngOnInit();
+            expect(helper.component.start_date.getTime()).toEqual(article.start_date.getTime());
+        });
+
+        it("set start_date as current date when it was not defined", () => {
+            helper.changeProperties({article: {}});
+            helper.component.ngOnInit();
+            expect(helper.component.start_date.getTime()).toBeDefined();
+        });
+
+        it("set end_date as article end_date when it was defined", () => {
+            let article = {end_date: new Date()};
+            helper.changeProperties({article: article});
+            helper.component.ngOnInit();
+            expect(helper.component.end_date.getTime()).toEqual(article.end_date.getTime());
+        });
+    });
+});
@@ -0,0 +1,55 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Provider, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+import {DiscussionBlockComponent} from './discussion-block.component';
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+
+const htmlTemplate: string = '<noosfero-comment-paragraph-plugin-discussion-block [block]="ctrl.block" [owner]="ctrl.owner"></noosfero-comment-paragraph-plugin-discussion-block>';
+
+const tcb = new TestComponentBuilder();
+
+describe("Components", () => {
+    describe("Discussion Block Component", () => {
+
+        let helper: ComponentTestHelper<DiscussionBlockComponent>;
+        let settingsObj = {};
+        let mockedBlockService = {
+            getApiContent: (content: any): any => {
+                return Promise.resolve({ articles: [{ name: "article1" }], headers: (name: string) => { return name; } });
+            }
+        };
+        let profile = { name: 'profile-name' };
+
+        let state = jasmine.createSpyObj("state", ["go"]);
+
+        let providers = [
+            new Provider('$state', { useValue: state }),
+            new Provider('BlockService', {
+                useValue: mockedBlockService
+            }),
+        ].concat(provideFilters("truncateFilter", "stripTagsFilter", "translateFilter", "amDateFormatFilter"));
+
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [DiscussionBlockComponent],
+                providers: providers,
+                properties: { block: {} }
+            });
+            helper = new ComponentTestHelper<DiscussionBlockComponent>(cls, done);
+        });
+
+        it("get discussions from the block service", () => {
+            expect(helper.component.documents).toEqual([{ name: "article1" }]);
+            expect(helper.component.block.hide).toEqual(false);
+        });
+
+        it("go to article page when open a document", () => {
+            let block = helper.component;
+            block.openDocument({ path: "path", profile: { identifier: "identifier" } });
+            expect(state.go).toHaveBeenCalledWith("main.profile.page", { page: "path", profile: "identifier" });
+        });
+    });
+});
 import {Component, Inject, Input} from "ng-forward";
-import {ArticleService} from "../../../../lib/ng-noosfero-api/http/article.service";
+import {BlockService} from "../../../../lib/ng-noosfero-api/http/block.service";
  
 @Component({
     selector: "noosfero-comment-paragraph-plugin-discussion-block",
     templateUrl: 'plugins/comment_paragraph/block/discussion/discussion-block.html'
 })
-@Inject(ArticleService, "$state")
+@Inject(BlockService, "$state")
 export class DiscussionBlockComponent {
  
     @Input() block: any;
     @Input() owner: any;
  
-    profile: any;
-    documents: any;
+    profile: noosfero.Profile;
+    documents: Array<noosfero.Article>;
  
-    documentsLoaded: boolean = false;
-
-    constructor(private articleService: ArticleService, private $state: any) { }
+    constructor(private blockService: BlockService, private $state: any) { }
  
     ngOnInit() {
         this.profile = this.owner;
-        this.documents = [];
-
-        let limit = ((this.block && this.block.settings) ? this.block.settings.limit : null) || 50;
-        let params: any = { content_type: 'CommentParagraphPlugin::Discussion', per_page: limit, order: 'start_date DESC' };
-        let now = new Date().toISOString();
-        switch (this.block.settings['discussion_status']) {
-            case 0:
-                params['from_start_date'] = now;
-                break;
-            case 1:
-                params['until_start_date'] = now;
-                params['from_end_date'] = now;
-                break;
-            case 2:
-                params['until_end_date'] = now;
-                break;
-        }
-        console.log(this.block.settings['discussion_status']);
-        this.articleService.getByProfile(this.profile, params)
-            .then((result: noosfero.RestResult<noosfero.Article[]>) => {
-                this.documents = <noosfero.Article[]>result.data;
-                this.documentsLoaded = true;
-            });
+        this.blockService.getApiContent(this.block).then((content: any) => {
+            this.documents = content.articles;
+            this.block.hide = !this.documents || this.documents.length === 0;
+        });
     }
  
     openDocument(article: any) {
@@ -0,0 +1,110 @@
+import {CommentParagraphArticleContentHotspotComponent} from './article-content.component';
+import {ComponentTestHelper, createClass} from './../../../../spec/component-test-helper';
+
+const htmlTemplate: string = '<comment-paragraph-article-content-hotspot [article]="ctrl.article"></comment-paragraph-article-content-hotspot>';
+
+describe("Components", () => {
+    describe("Article Content Hotspot Component", () => {
+
+        let helper: ComponentTestHelper<CommentParagraphArticleContentHotspotComponent>;
+        beforeEach(angular.mock.module("templates"));
+
+        beforeEach((done) => {
+            let properties = { article: {} };
+            let cls = createClass({
+                template: htmlTemplate,
+                directives: [CommentParagraphArticleContentHotspotComponent],
+                properties: properties
+            });
+            helper = new ComponentTestHelper<CommentParagraphArticleContentHotspotComponent>(cls, done);
+        });
+
+        it("return false in isDiscussion when no type was specified", () => {
+            expect(helper.component.isDiscussion()).toBeFalsy();
+        });
+
+        it("return false in isDiscussion when other type was specified", () => {
+            helper.changeProperties({ article: { type: "TextArticle" } });
+            expect(helper.component.isDiscussion()).toBeFalsy();
+        });
+
+        it("return true in isDiscussion when discussion type was specified", () => {
+            helper.changeProperties({ article: { type: "CommentParagraphPlugin::Discussion" } });
+            expect(helper.component.isDiscussion()).toBeTruthy();
+        });
+
+        it("return true in notOpened when start date is after today", () => {
+            let date = new Date();
+            date.setDate(date.getDate() + 1);
+            helper.changeProperties({ article: { start_date: date.toISOString() } });
+            expect(helper.component.notOpened()).toBeTruthy();
+            expect(helper.component.available()).toBeFalsy();
+            expect(helper.component.closed()).toBeFalsy();
+        });
+
+        it("return false in notOpened when start date is before today", () => {
+            let date = new Date();
+            date.setDate(date.getDate() - 1);
+            helper.changeProperties({ article: { start_date: date.toISOString() } });
+            expect(helper.component.notOpened()).toBeFalsy();
+        });
+
+        it("return false in notOpened when start date is null", () => {
+            helper.changeProperties({ article: { start_date: null } });
+            expect(helper.component.notOpened()).toBeFalsy();
+        });
+
+        it("return true in closed when end date is before today", () => {
+            let date = new Date();
+            date.setDate(date.getDate() - 1);
+            helper.changeProperties({ article: { end_date: date.toISOString() } });
+            expect(helper.component.closed()).toBeTruthy();
+            expect(helper.component.available()).toBeFalsy();
+            expect(helper.component.notOpened()).toBeFalsy();
+        });
+
+        it("return false in closed when start date is after today", () => {
+            let date = new Date();
+            date.setDate(date.getDate() + 1);
+            helper.changeProperties({ article: { end_date: date.toISOString() } });
+            expect(helper.component.closed()).toBeFalsy();
+        });
+
+        it("return false in closed when end date is null", () => {
+            helper.changeProperties({ article: { start_date: null } });
+            expect(helper.component.closed()).toBeFalsy();
+        });
+
+        it("return true in available when start date is before today and end date is after", () => {
+            let date = new Date();
+            date.setDate(date.getDate() - 1);
+            let startDate = date.toISOString();
+            date.setDate(date.getDate() + 3);
+            let endDate = date.toISOString();
+            helper.changeProperties({ article: { start_date: startDate, end_date: endDate } });
+            expect(helper.component.available()).toBeTruthy();
+            expect(helper.component.closed()).toBeFalsy();
+            expect(helper.component.notOpened()).toBeFalsy();
+        });
+
+        it("return true in available when start date is before today and end date is null", () => {
+            let date = new Date();
+            date.setDate(date.getDate() - 1);
+            let startDate = date.toISOString();
+            helper.changeProperties({ article: { start_date: startDate, end_date: null } });
+            expect(helper.component.available()).toBeTruthy();
+            expect(helper.component.closed()).toBeFalsy();
+            expect(helper.component.notOpened()).toBeFalsy();
+        });
+
+        it("return true in available when start date is null and end date is after today", () => {
+            let date = new Date();
+            date.setDate(date.getDate() + 3);
+            let endDate = date.toISOString();
+            helper.changeProperties({ article: { start_date: null, end_date: endDate } });
+            expect(helper.component.available()).toBeTruthy();
+            expect(helper.component.closed()).toBeFalsy();
+            expect(helper.component.notOpened()).toBeFalsy();
+        });
+    });
+});
@@ -13,4 +13,20 @@ export class CommentParagraphArticleContentHotspotComponent {
     isDiscussion() {
         return this.article.type === "CommentParagraphPlugin::Discussion";
     }
+
+    notOpened() {
+        let now = new Date();
+        return !!this.article.start_date && new Date(this.article.start_date) > now;
+    }
+
+    available() {
+        let now = new Date();
+        return (!this.article.start_date || new Date(this.article.start_date) <= now) &&
+            (!this.article.end_date || new Date(this.article.end_date) >= now);
+    }
+
+    closed() {
+        let now = new Date();
+        return !!this.article.end_date && new Date(this.article.end_date) < now;
+    }
 }
 <div class="discussion-header" ng-if="ctrl.isDiscussion()">
-  <span class="description">{{"comment-paragraph-plugin.discussion.header" | translate}}</span>
-  <span class="start-date date" ng-if="ctrl.article.start_date">
-    <span class="description">{{"comment-paragraph-plugin.discussion.editor.start_date.label" | translate}}</span>
-    <span class="value">{{ctrl.article.start_date | amDateFormat:'DD/MM/YYYY'}}</span>
-  </span>
-  <span class="end-date date" ng-if="ctrl.article.end_date">
-    <span class="description">{{"comment-paragraph-plugin.discussion.editor.end_date.label" | translate}}</span>
-    <span class="value">{{ctrl.article.end_date | amDateFormat:'DD/MM/YYYY'}}</span>
-  </span>
+  <div class="icon">
+    <i class="fa fa-calendar fa-fw fa-lg"></i>
+  </div>
+  <div class="period">
+    <div ng-if="ctrl.notOpened()" class="description not-opened">
+      {{"comment-paragraph-plugin.discussion.notOpened.header" | translate:{date: (ctrl.article.start_date | dateFormat | amTimeAgo)} }}
+    </div>
+    <div ng-if="ctrl.available()" class="description available">
+      <div ng-if="ctrl.article.end_date" class="with-end-date">
+        {{"comment-paragraph-plugin.discussion.available.header" | translate:{date: (ctrl.article.end_date | dateFormat | amTimeAgo)} }}
+      </div>
+      <div ng-if="!ctrl.article.end_date" class="without-end-date">
+        {{"comment-paragraph-plugin.discussion.available.without-end.header" | translate}}
+      </div>
+    </div>
+    <div ng-if="ctrl.closed()" class="description closed">
+      {{"comment-paragraph-plugin.discussion.closed.header" | translate:{date: (ctrl.article.end_date | dateFormat | amTimeAgo)} }}
+    </div>
+  </div>
 </div>
 .discussion-header {
   @extend .pull-right;
   margin-bottom: 20px;
-  .date {
-    text-transform: lowercase;
-    font-size: 16px;
+  .period {
+    @extend .pull-right;
     .description {
       font-weight: bold;
-      color: #BFBFBF;
-    }
-    .value {
-      font-size: 15px;
-      color: #969696;
+      color: #A2A2A2;
     }
   }
-  .description {
-    font-weight: bold;
-    color: #BFBFBF;
+  .icon {
+    @extend .pull-right;
+    margin-left: 8px;
   }
 }
@@ -1,85 +0,0 @@
-import {CommentParagraphArticleButtonHotspotComponent} from "./comment-paragraph-article-button.component";
-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';
-
-let htmlTemplate = '<comment-paragraph-article-button-hotspot [article]="ctrl.article"></comment-paragraph-article-button-hotspot>';
-
-describe("Components", () => {
-    describe("Comment Paragraph Article Button Hotspot Component", () => {
-
-        let serviceMock = jasmine.createSpyObj("CommentParagraphService", ["deactivateCommentParagraph", "activateCommentParagraph"]);
-        let eventServiceMock = jasmine.createSpyObj("CommentParagraphEventService", ["toggleCommentParagraph"]);
-
-        let providers = [
-            new Provider('CommentParagraphService', { useValue: serviceMock }),
-            new Provider('CommentParagraphEventService', { useValue: eventServiceMock })
-        ].concat(helpers.provideFilters('translateFilter'));
-        let helper: ComponentTestHelper<CommentParagraphArticleButtonHotspotComponent>;
-
-        beforeEach(angular.mock.module("templates"));
-
-        beforeEach((done) => {
-            let cls = createClass({
-                template: htmlTemplate,
-                directives: [CommentParagraphArticleButtonHotspotComponent],
-                providers: providers,
-                properties: {
-                    article: {}
-                }
-            });
-            helper = new ComponentTestHelper<CommentParagraphArticleButtonHotspotComponent>(cls, done);
-        });
-
-        it('emit event when deactivate comment paragraph in an article', () => {
-            serviceMock.deactivateCommentParagraph = jasmine.createSpy("deactivateCommentParagraph").and.returnValue(
-                { then: (fn: Function) => { fn({ data: {} }); } }
-            );
-            eventServiceMock.toggleCommentParagraph = jasmine.createSpy("toggleCommentParagraph");
-            helper.component.deactivateCommentParagraph();
-
-            expect(serviceMock.deactivateCommentParagraph).toHaveBeenCalled();
-            expect(eventServiceMock.toggleCommentParagraph).toHaveBeenCalled();
-        });
-
-        it('emit event when activate comment paragraph in an article', () => {
-            serviceMock.activateCommentParagraph = jasmine.createSpy("activateCommentParagraph").and.returnValue(
-                { then: (fn: Function) => { fn({ data: {} }); } }
-            );
-            eventServiceMock.toggleCommentParagraph = jasmine.createSpy("toggleCommentParagraph");
-            helper.component.activateCommentParagraph();
-
-            expect(serviceMock.activateCommentParagraph).toHaveBeenCalled();
-            expect(eventServiceMock.toggleCommentParagraph).toHaveBeenCalled();
-        });
-
-        it('return true when comment paragraph is active', () => {
-            helper.component.article = <noosfero.Article>{ setting: { comment_paragraph_plugin_activate: true } };
-            helper.detectChanges();
-            expect(helper.component.isActivated()).toBeTruthy();
-        });
-
-        it('return false when comment paragraph is not active', () => {
-            expect(helper.component.isActivated()).toBeFalsy();
-        });
-
-        it('return false when article has no setting attribute', () => {
-            helper.component.article = <noosfero.Article>{};
-            helper.detectChanges();
-            expect(helper.component.isActivated()).toBeFalsy();
-        });
-
-        it('display activate button when comment paragraph is not active', () => {
-            expect(helper.all('.comment-paragraph-activate').length).toEqual(1);
-            expect(helper.all('.comment-paragraph-deactivate').length).toEqual(0);
-        });
-
-        it('display deactivate button when comment paragraph is active', () => {
-            helper.component.article = <noosfero.Article>{ setting: { comment_paragraph_plugin_activate: true } };
-            helper.detectChanges();
-            expect(helper.all('.comment-paragraph-deactivate').length).toEqual(1);
-            expect(helper.all('.comment-paragraph-activate').length).toEqual(0);
-        });
-    });
-});
@@ -1,38 +0,0 @@
-import { Input, Inject, Component } from "ng-forward";
-import {Hotspot} from "../../../app/hotspot/hotspot.decorator";
-import {CommentParagraphService} from "../http/comment-paragraph.service";
-import {CommentParagraphEventService} from "../events/comment-paragraph-event.service";
-
-@Component({
-    selector: "comment-paragraph-article-button-hotspot",
-    templateUrl: "plugins/comment_paragraph/hotspot/comment-paragraph-article-button.html",
-})
-@Inject("$scope", CommentParagraphService, CommentParagraphEventService)
-@Hotspot("article_extra_toolbar_buttons")
-export class CommentParagraphArticleButtonHotspotComponent {
-
-    @Input() article: noosfero.Article;
-
-    constructor(private $scope: ng.IScope,
-        private commentParagraphService: CommentParagraphService,
-        private commentParagraphEventService: CommentParagraphEventService) { }
-
-    deactivateCommentParagraph() {
-        this.toggleCommentParagraph(this.commentParagraphService.deactivateCommentParagraph(this.article));
-    }
-
-    activateCommentParagraph() {
-        this.toggleCommentParagraph(this.commentParagraphService.activateCommentParagraph(this.article));
-    }
-
-    isActivated() {
-        return this.article && this.article.setting && this.article.setting.comment_paragraph_plugin_activate;
-    }
-
-    private toggleCommentParagraph(promise: ng.IPromise<noosfero.RestResult<noosfero.Article>>) {
-        promise.then((result: noosfero.RestResult<noosfero.Article>) => {
-            this.article = result.data;
-            this.commentParagraphEventService.toggleCommentParagraph(this.article);
-        });
-    }
-}
@@ -1,8 +0,0 @@
-<a href='#' class="btn btn-default btn-xs comment-paragraph-activate" (click)="ctrl.activateCommentParagraph()"
-  ng-if="!ctrl.article.setting.comment_paragraph_plugin_activate">
-  <i class="fa fa-fw fa-plus"></i> {{"comment-paragraph-plugin.title" | translate}}
-</a>
-<a href='#' class="btn btn-default btn-xs comment-paragraph-deactivate" (click)="ctrl.deactivateCommentParagraph()"
-  ng-if="ctrl.article.setting.comment_paragraph_plugin_activate">
-  <i class="fa fa-fw fa-minus"></i> {{"comment-paragraph-plugin.title" | translate}}
-</a>
 import {AllowCommentComponent} from "./allow-comment/allow-comment.component";
-import {CommentParagraphArticleButtonHotspotComponent} from "./hotspot/comment-paragraph-article-button.component";
 import {CommentParagraphFormHotspotComponent} from "./hotspot/comment-paragraph-form.component";
 import {DiscussionEditorComponent} from "./article/cms/discussion-editor/discussion-editor.component";
 import {CommentParagraphArticleContentHotspotComponent} from "./hotspot/article-content/article-content.component";
 import {DiscussionBlockComponent} from "./block/discussion/discussion-block.component";
  
 export let mainComponents: any = [AllowCommentComponent, DiscussionEditorComponent, DiscussionBlockComponent];
-export let hotspots: any = [CommentParagraphArticleButtonHotspotComponent, CommentParagraphFormHotspotComponent, CommentParagraphArticleContentHotspotComponent];
+export let hotspots: any = [CommentParagraphFormHotspotComponent, CommentParagraphArticleContentHotspotComponent];
@@ -2,5 +2,9 @@
   "comment-paragraph-plugin.title": "Paragraph Comments",
   "comment-paragraph-plugin.discussion.editor.start_date.label": "From",
   "comment-paragraph-plugin.discussion.editor.end_date.label": "To",
-  "comment-paragraph-plugin.discussion.header": "Open for comments"
+  "comment-paragraph-plugin.discussion.header": "Open for comments",
+  "comment-paragraph-plugin.discussion.notOpened.header": "Discussion will start {{date}}",
+  "comment-paragraph-plugin.discussion.available.header": "Discussion will end {{date}}",
+  "comment-paragraph-plugin.discussion.available.without-end.header": "Discussion opened",
+  "comment-paragraph-plugin.discussion.closed.header": "Discussion finished {{date}}"
 }
@@ -2,5 +2,9 @@
   "comment-paragraph-plugin.title": "Comentários por Parágrafo",
   "comment-paragraph-plugin.discussion.editor.start_date.label": "De",
   "comment-paragraph-plugin.discussion.editor.end_date.label": "Até",
-  "comment-paragraph-plugin.discussion.header": "Aberto para comentários"
+  "comment-paragraph-plugin.discussion.header": "Aberto para comentários",
+  "comment-paragraph-plugin.discussion.notOpened.header": "Discussão iniciará {{date}}",
+  "comment-paragraph-plugin.discussion.available.header": "Discussão terminará {{date}}",
+  "comment-paragraph-plugin.discussion.available.without-end.header": "Discussão aberta",
+  "comment-paragraph-plugin.discussion.closed.header": "Discussão finalizada {{date}}"
 }
@@ -88,16 +88,23 @@ export class ComponentTestHelper&lt;T extends any&gt; {
             this.debugElement = fixture.debugElement;
             this.component = <T>this.debugElement.componentViewChildren[0].componentInstance;
             let mockObj = new this.mockComponent();
-            Object.keys(mockObj).forEach((key: any) => {
-                (<any>this.component)[key] = <any>mockObj[key];
-            });
-
+            if (this.component) {
+                Object.keys(mockObj).forEach((key: any) => {
+                    (<any>this.component)[key] = <any>mockObj[key];
+                });
+            }
         }).then(() => {
             // Force the resolution of components and sync
             done();
         });
     }
  
+    changeProperties(properties: any) {
+        Object.keys(properties).forEach((key: any) => {
+            this.component[key] = properties[key];
+        });
+    }
+
     /**
      * @ngdoc method
      * @name detectChanges
@@ -76,6 +76,32 @@ export var mocks: any = {
         isAuthenticated: () => { }
     },
     articleService: {
+        articleRemovedFn: null,
+        subscribeToArticleRemoved: (fn: Function) => {
+            mocks.articleService.articleRemovedFn = fn;
+        },
+        articleRemoved:
+            {
+                subscribe: (fn: Function) => {
+                    mocks.articleService.articleRemovedFn = fn;
+                },
+                next: (param: any) => {
+                    mocks.articleService.articleRemovedFn(param);
+                }
+            }
+        ,
+        removeArticle: (article: noosfero.Article) => {
+            return {
+                catch: (func?: Function) => {
+                }
+            };
+        },
+        notifyArticleRemovedListeners: (article: noosfero.Article) => {
+            mocks.articleService.articleRemoved.next(article);
+        },
+        subscribe: (eventType: any, fn: Function) => {
+            mocks.articleService.articleRemoved.subscribe(fn);
+        },
         getByProfile: (profileId: number, params?: any) => {
             return {
                 then: (func?: Function) => {
@@ -0,0 +1,70 @@
+.block-head-with-icon {
+  padding: 15px 15px 15px 55px;
+}
+
+.content-wrapper .block {
+  .panel-heading {
+    border: none;
+    border-radius: 3px 3px 0 0;
+    font-family: "Ubuntu Medium";
+    font-size: 15px;
+    font-variant: normal;
+    font-weight: normal;
+    line-height: 30px;
+    padding: 15px 15px 15px 15px;
+    text-transform: capitalize;
+    background-size: 30px 30px;
+    background: #DAE1C4;
+    color: #4F9CAC;
+  }
+
+  &.membersblock {
+    .panel-heading {
+      @extend .block-head-with-icon;
+      background: #DAE1C4 url("../assets/icons/participa-consulta/pessoas.png") no-repeat 15px center;
+      color: #4F9CAC;
+    }
+  }
+
+  &.statisticsblock {
+    .panel-heading {
+      @extend .block-head-with-icon;
+      background: #69677C url("../assets/icons/participa-consulta/indicadores.png") no-repeat 15px center;
+      color: #DAE1C4;
+    }
+  }
+}
+
+.col-md-7 {
+  .panel-body.linklistblock {
+    padding: 0px;
+  }
+
+  .link-list-block {
+    font-family: "Ubuntu";
+    font-size: 12px;
+    background: #69677C;
+    border-radius: 0 0 3px 3px;
+    padding: 4px 10px;
+    position: relative;
+
+    div, a {
+      display: inline-block;
+      background: #69677C;
+      border-radius: 0;
+      color: #FFF;
+      font-family: "Ubuntu Medium";
+      font-size: 16px;
+      margin: 0;
+      padding-right: 15px;
+      font-weight: bold;
+    }
+
+    div:first-child {
+      padding: 15px 5px 15px 50px;
+      background: #69677C url("../assets/icons/participa-consulta/home.png") no-repeat 7px center;
+      color: #FFF;
+      background-size: 30px 30px;
+    }
+  }
+}
@@ -0,0 +1,25 @@
+.navbar {
+  min-height: 123px;
+  background-color: #f9c404;
+  background-image: -moz-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%);
+  background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%, #fcdd4e), color-stop(100%, #f9c404));
+  background-image: -webkit-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%);
+  background-image: -o-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%);
+  background-image: -ms-radial-gradient(center, ellipse cover, #fcdd4e 1%, #f9c404 100%);
+  background-image: radial-gradient(ellipse at center, #fcdd4e 1%, #f9c404 100%);
+
+  .container-fluid {
+    .navbar-brand {
+      .noosfero-logo {
+        display: none;
+      }
+      .noosfero-name {
+        color: #03316f;
+        font-size: 40px;
+        font-weight: 800;
+        line-height: 1em;
+        letter-spacing: -0.05em;
+      }
+    }
+  }
+}
@@ -0,0 +1,35 @@
+@font-face {
+  font-family: 'Ubuntu';
+  font-weight: 300;
+  font-style: normal;
+  src: url('../assets/fonts/participa-consulta/Ubuntu-R.ttf');
+}
+
+@font-face {
+  font-family: 'Ubuntu Medium';
+  font-weight: 300;
+  font-style: normal;
+  src: url('../assets/fonts/participa-consulta/Ubuntu-M.ttf');
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+  font-weight: 300;
+  font-style: italic;
+  src: url('../assets/fonts/participa-consulta/Ubuntu-RI.ttf');
+}
+
+.skin-whbl .notifications-list .item-footer {
+  background: #DAE1C4;
+  color: #4F9CAC;
+}
+
+.profile-header, .profile-footer{
+  text-align: center;
+}
+
+.container-fluid .navbar-header .navbar-toggle{
+  &:hover, &:focus {
+    background-color: #7E7E7E;
+  }
+}
...	...	@@ -15,11 +15,13 @@ gulp.task('watch', ['inject'], function () {
15	15
16	16	gulp.watch([path.join(conf.paths.src, '/*.html'), 'bower.json'], ['inject-reload']);
17	17
18		- gulp.watch([
19		- path.join(conf.paths.src, '/app/*/.css'),
20		- path.join(conf.paths.src, '/app/*/.scss'),
21		- path.join(conf.paths.src, conf.paths.plugins, '/*/.scss')
22		- ], function(event) {
	18	+ var stylePaths = [path.join(conf.paths.src, conf.paths.plugins, '/*/.scss')];
	19	+ conf.paths.allSources.forEach(function(src) {
	20	+ stylePaths.push(path.join(src, '/app/*/.css'));
	21	+ stylePaths.push(path.join(src, '/app/*/.scss'));
	22	+ });
	23	+
	24	+ gulp.watch(stylePaths, function(event) {
23	25	if(isOnlyChange(event)) {
24	26	gulp.start('styles-reload');
25	27	} else {
...	...
...	...	@@ -126,6 +126,10 @@ module.exports = function (config) {
126	126	};
127	127
128	128
	129	+ if(config.grep) {
	130	+ configuration.client = { args: ['--grep', config.grep] };
	131	+ }
	132	+
129	133	if (coverage) {
130	134
131	135	/*configuration.webpack = {
...	...
1	1	import {Input, provide, Component} from 'ng-forward';
2	2	import {ArticleViewComponent, ArticleDefaultViewComponent} from './article-default-view.component';
	3	+import {ComponentTestHelper, createClass} from './../../spec/component-test-helper';
3	4
4	5	import * as helpers from "../../spec/helpers";
5	6
...	...	@@ -9,113 +10,82 @@ const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profil
9	10
10	11	describe("Components", () => {
11	12
12		- describe("ArticleView Component", () => {
13		-
14		- // the karma preprocessor html2js transform the templates html into js files which put
15		- // the templates to the templateCache into the module templates
16		- // we need to load the module templates here as the template for the
17		- // component Noosfero ArtileView will be load on our tests
18		- beforeEach(angular.mock.module("templates"));
19		-
20		- it("renders the default component when no specific component is found", (done: Function) => {
21		- // Creating a container component (ArticleContainerComponent) to include
22		- // the component under test (ArticleView)
23		- @Component({
24		- selector: 'test-container-component',
25		- template: htmlTemplate,
26		- directives: [ArticleViewComponent],
27		- providers: [
28		- helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
29		- helpers.provideFilters("translateFilter"),
30		- helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
31		- helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
32		- ]
33		- })
34		- class ArticleContainerComponent {
35		- article = { type: 'anyArticleType' };
36		- profile = { name: 'profile-name' };
	13	+ // the karma preprocessor html2js transform the templates html into js files which put
	14	+ // the templates to the templateCache into the module templates
	15	+ // we need to load the module templates here as the template for the
	16	+ // component Noosfero ArtileView will be load on our tests
	17	+ beforeEach(angular.mock.module("templates"));
	18	+
	19	+ describe("Article Default View Component", () => {
	20	+ let helper: ComponentTestHelper<ArticleDefaultViewComponent>;
	21	+ const defaultViewTemplate: string = '<noosfero-default-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-default-article>';
	22	+ let articleService: any = helpers.mocks.articleService;
	23	+ let article = <noosfero.Article>{
	24	+ id: 1,
	25	+ profile: {
	26	+ identifier: "1"
37	27	}
38		-
39		- helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
40		- // and here we can inspect and run the test assertions
41		-
42		- // gets the children component of ArticleContainerComponent
43		- let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
44		-
45		- // and checks if the article View rendered was the Default Article View
46		- expect(articleView.constructor.prototype).toEqual(ArticleDefaultViewComponent.prototype);
47		-
48		- // done needs to be called (it isn't really needed, as we can read in
49		- // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
50		- // because createAsync in ng-forward is not really async, but as the intention
51		- // here is write tests in angular 2 ways, this is recommended
52		- done();
	28	+ };
	29	+ let state = <ng.ui.IStateService>jasmine.createSpyObj("state", ["go", "transitionTo"]);
	30	+ let providers = [
	31	+ provide('$state', { useValue: state }),
	32	+ provide('ArticleService', { useValue: articleService })
	33	+ ].concat(helpers.provideFilters("translateFilter"));
	34	+
	35	+ /**
	36	+ * The beforeEach procedure will initialize the helper and parse
	37	+ * the component according to the given providers. Unfortunetly, in
	38	+ * this mode, the providers and properties given to the construtor
	39	+ * can't be overriden.
	40	+ */
	41	+ beforeEach((done) => {
	42	+ // Create the component bed for the test. Optionally, this could be done
	43	+ // in each test if one needs customization of these parameters per test
	44	+ let cls = createClass({
	45	+ template: defaultViewTemplate,
	46	+ directives: [ArticleDefaultViewComponent],
	47	+ providers: providers,
	48	+ properties: {
	49	+ article: article
	50	+ }
53	51	});
54		-
	52	+ helper = new ComponentTestHelper<ArticleDefaultViewComponent>(cls, done);
55	53	});
56	54
57		- it("receives the article and profile as inputs", (done: Function) => {
58		-
59		- // Creating a container component (ArticleContainerComponent) to include
60		- // the component under test (ArticleView)
61		- @Component({
62		- selector: 'test-container-component',
63		- template: htmlTemplate,
64		- directives: [ArticleViewComponent],
65		- providers: [
66		- helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
67		- helpers.provideFilters("translateFilter"),
68		- helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
69		- helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({}))
70		- ]
71		- })
72		- class ArticleContainerComponent {
73		- article = { type: 'anyArticleType' };
74		- profile = { name: 'profile-name' };
75		- }
76		-
77		- // uses the TestComponentBuilder instance to initialize the component
78		- helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
79		- // and here we can inspect and run the test assertions
80		- let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	55	+ function getArticle() {
	56	+ return this.article;
	57	+ }
81	58
82		- // assure the article object inside the ArticleView matches
83		- // the provided through the parent component
84		- expect(articleView.article.type).toEqual("anyArticleType");
85		- expect(articleView.profile.name).toEqual("profile-name");
86		-
87		- // done needs to be called (it isn't really needed, as we can read in
88		- // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
89		- // because createAsync in ng-forward is not really async, but as the intention
90		- // here is write tests in angular 2 ways, this is recommended
91		- done();
92		- });
	59	+ it("it should delete article when delete is activated", () => {
	60	+ expect(helper.component.article).toEqual(article);
	61	+ // Spy the state service
	62	+ doDeleteArticle();
	63	+ expect(state.transitionTo).toHaveBeenCalled();
93	64	});
94	65
95		-
96		- it("renders a article view which matches to the article type", done => {
97		- // NoosferoTinyMceArticle component created to check if it will be used
98		- // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleView)
99		- // * Important * - the selector is what ng-forward uses to define the name of the directive provider
100		- @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
101		- class TinyMceArticleView {
102		- @Input() article: any;
103		- @Input() profile: any;
104		- }
105		-
106		- // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
107		- @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleViewComponent, TinyMceArticleView] })
108		- class CustomArticleType {
109		- article = { type: 'TinyMceArticle' };
110		- profile = { name: 'profile-name' };
111		- }
112		- helpers.createComponentFromClass(CustomArticleType).then(fixture => {
113		- let myComponent: CustomArticleType = fixture.componentInstance;
114		- expect(myComponent.article.type).toEqual("TinyMceArticle");
115		- expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
116		- done();
	66	+ /**
	67	+ * Execute the delete method on the target component
	68	+ */
	69	+ function doDeleteArticle() {
	70	+ // Create a mock for the ArticleService removeArticle method
	71	+ spyOn(helper.component.articleService, 'removeArticle').and.callFake(function(param: noosfero.Article) {
	72	+ return {
	73	+ catch: () => {}
	74	+ };
117	75	});
118		- });
119		-
	76	+ helper.component.delete();
	77	+ expect(articleService.removeArticle).toHaveBeenCalled();
	78	+ // After the component delete method execution, fire the
	79	+ // ArticleEvent.removed event
	80	+ simulateRemovedEvent();
	81	+ }
	82	+
	83	+ /**
	84	+ * Simulate the ArticleService ArticleEvent.removed event
	85	+ */
	86	+ function simulateRemovedEvent() {
	87	+ helper.component.articleService["notifyArticleRemovedListeners"](article);
	88	+ }
120	89	});
	90	+
121	91	});
...	...
...	...	@@ -4,6 +4,7 @@ import {CommentsComponent} from "./comment/comments.component";
4	4	import {MacroDirective} from "./macro/macro.directive";
5	5	import {ArticleToolbarHotspotComponent} from "../hotspot/article-toolbar-hotspot.component";
6	6	import {ArticleContentHotspotComponent} from "../hotspot/article-content-hotspot.component";
	7	+import {ArticleService} from "./../../lib/ng-noosfero-api/http/article.service";
7	8
8	9	/**
9	10	* @ngdoc controller
...	...	@@ -16,11 +17,29 @@ import {ArticleContentHotspotComponent} from "../hotspot/article-content-hotspot
16	17	selector: 'noosfero-default-article',
17	18	templateUrl: 'app/article/article.html'
18	19	})
	20	+@Inject("$state", ArticleService)
19	21	export class ArticleDefaultViewComponent {
20	22
21	23	@Input() article: noosfero.Article;
22	24	@Input() profile: noosfero.Profile;
23	25
	26	+ constructor(private $state: ng.ui.IStateService, public articleService: ArticleService) {
	27	+ // Subscribe to the Article Removed Event
	28	+ this.articleService.subscribeToArticleRemoved((article: noosfero.Article) => {
	29	+ if (this.article.parent) {
	30	+ this.$state.transitionTo('main.profile.page', { page: this.article.parent.path, profile: this.article.profile.identifier });
	31	+ } else {
	32	+ this.$state.transitionTo('main.profile.info', { profile: this.article.profile.identifier });
	33	+ }
	34	+ });
	35	+ }
	36	+
	37	+ delete() {
	38	+ this.articleService.removeArticle(this.article).catch((cause: any) => {
	39	+ throw new Error(`Problem removing the article: ${cause}`);
	40	+ });
	41	+ }
	42	+
24	43	}
25	44
26	45	/**
...	...	@@ -60,4 +79,5 @@ export class ArticleViewComponent {
60	79	private $injector: ng.auto.IInjectorService,
61	80	private $compile: ng.ICompileService) {
62	81	}
	82	+
63	83	}
...	...
...	...	@@ -0,0 +1,124 @@
	1	+import {Input, provide, Component} from 'ng-forward';
	2	+import {ArticleViewComponent, ArticleDefaultViewComponent} from './article-default-view.component';
	3	+
	4	+import * as helpers from "../../spec/helpers";
	5	+
	6	+// this htmlTemplate will be re-used between the container components in this spec file
	7	+const htmlTemplate: string = '<noosfero-article [article]="ctrl.article" [profile]="ctrl.profile"></noosfero-article>';
	8	+
	9	+
	10	+describe("Components", () => {
	11	+
	12	+ // the karma preprocessor html2js transform the templates html into js files which put
	13	+ // the templates to the templateCache into the module templates
	14	+ // we need to load the module templates here as the template for the
	15	+ // component Noosfero ArtileView will be load on our tests
	16	+ beforeEach(angular.mock.module("templates"));
	17	+
	18	+ describe("ArticleView Component", () => {
	19	+ let state = <ng.ui.IStateService>jasmine.createSpyObj("state", ["go", "transitionTo"]);
	20	+ it("renders the default component when no specific component is found", (done: Function) => {
	21	+ // Creating a container component (ArticleContainerComponent) to include
	22	+ // the component under test (ArticleView)
	23	+ @Component({
	24	+ selector: 'test-container-component',
	25	+ template: htmlTemplate,
	26	+ directives: [ArticleViewComponent],
	27	+ providers: [
	28	+ helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
	29	+ helpers.provideFilters("translateFilter"),
	30	+ helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
	31	+ helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
	32	+ helpers.createProviderToValue('ArticleService', helpers.mocks.articleService),
	33	+ helpers.createProviderToValue('$state', state)
	34	+ ]
	35	+ })
	36	+ class ArticleContainerComponent {
	37	+ article = { type: 'anyArticleType' };
	38	+ profile = { name: 'profile-name' };
	39	+ }
	40	+
	41	+ helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
	42	+ // and here we can inspect and run the test assertions
	43	+
	44	+ // gets the children component of ArticleContainerComponent
	45	+ let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	46	+
	47	+ // and checks if the article View rendered was the Default Article View
	48	+ expect(articleView.constructor.prototype).toEqual(ArticleDefaultViewComponent.prototype);
	49	+
	50	+ // done needs to be called (it isn't really needed, as we can read in
	51	+ // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
	52	+ // because createAsync in ng-forward is not really async, but as the intention
	53	+ // here is write tests in angular 2 ways, this is recommended
	54	+ done();
	55	+ });
	56	+ });
	57	+
	58	+ it("receives the article and profile as inputs", (done: Function) => {
	59	+
	60	+ // Creating a container component (ArticleContainerComponent) to include
	61	+ // the component under test (ArticleView)
	62	+ @Component({
	63	+ selector: 'test-container-component',
	64	+ template: htmlTemplate,
	65	+ directives: [ArticleViewComponent],
	66	+ providers: [
	67	+ helpers.createProviderToValue('CommentService', helpers.mocks.commentService),
	68	+ helpers.provideFilters("translateFilter"),
	69	+ helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService),
	70	+ helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
	71	+ helpers.createProviderToValue('ArticleService', helpers.mocks.articleService),
	72	+ helpers.createProviderToValue('$state', state)
	73	+ ]
	74	+ })
	75	+ class ArticleContainerComponent {
	76	+ article = { type: 'anyArticleType' };
	77	+ profile = { name: 'profile-name' };
	78	+ }
	79	+
	80	+ // uses the TestComponentBuilder instance to initialize the component
	81	+ helpers.createComponentFromClass(ArticleContainerComponent).then((fixture) => {
	82	+ // and here we can inspect and run the test assertions
	83	+ let articleView: ArticleViewComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	84	+
	85	+ // assure the article object inside the ArticleView matches
	86	+ // the provided through the parent component
	87	+ expect(articleView.article.type).toEqual("anyArticleType");
	88	+ expect(articleView.profile.name).toEqual("profile-name");
	89	+
	90	+ // done needs to be called (it isn't really needed, as we can read in
	91	+ // here (https://github.com/ngUpgraders/ng-forward/blob/master/API.md#createasync)
	92	+ // because createAsync in ng-forward is not really async, but as the intention
	93	+ // here is write tests in angular 2 ways, this is recommended
	94	+ done();
	95	+ });
	96	+ });
	97	+
	98	+
	99	+ it("renders a article view which matches to the article type", done => {
	100	+ // NoosferoTinyMceArticle component created to check if it will be used
	101	+ // when a article with type 'TinyMceArticle' is provided to the noosfero-article (ArticleView)
	102	+ // * Important * - the selector is what ng-forward uses to define the name of the directive provider
	103	+ @Component({ selector: 'noosfero-tiny-mce-article', template: "<h1>TinyMceArticle</h1>" })
	104	+ class TinyMceArticleView {
	105	+ @Input() article: any;
	106	+ @Input() profile: any;
	107	+ }
	108	+
	109	+ // Creating a container component (ArticleContainerComponent) to include our NoosferoTinyMceArticle
	110	+ @Component({ selector: 'test-container-component', template: htmlTemplate, directives: [ArticleViewComponent, TinyMceArticleView] })
	111	+ class CustomArticleType {
	112	+ article = { type: 'TinyMceArticle' };
	113	+ profile = { name: 'profile-name' };
	114	+ }
	115	+ helpers.createComponentFromClass(CustomArticleType).then(fixture => {
	116	+ let myComponent: CustomArticleType = fixture.componentInstance;
	117	+ expect(myComponent.article.type).toEqual("TinyMceArticle");
	118	+ expect(fixture.debugElement.componentViewChildren[0].text()).toEqual("TinyMceArticle");
	119	+ done();
	120	+ });
	121	+ });
	122	+
	123	+ });
	124	+});
...	...
...	...	@@ -7,6 +7,9 @@
7	7	<a href="#" class="btn btn-default btn-xs" ui-sref="main.cmsEdit({profile: ctrl.profile.identifier, id: ctrl.article.id})">
8	8	<i class="fa fa-pencil-square-o fa-fw fa-lg"></i> {{"article.actions.edit" \| translate}}
9	9	</a>
	10	+ <a href="#" class="btn btn-default btn-xs" ng-click="ctrl.delete()">
	11	+ <i class="fa fa-trash-o fa-fw fa-lg" ng-click="ctrl.delete()"></i> {{"article.actions.delete" \| translate}}
	12	+ </a>
10	13	<noosfero-hotspot-article-toolbar [article]="ctrl.article"></noosfero-hotspot-article-toolbar>
11	14	<div class="page-info pull-right small text-muted">
12	15	<span class="time">
...	...
...	...	@@ -0,0 +1,28 @@
	1	+import {ArticleEditorComponent} from './article-editor.component';
	2	+import {BasicEditorComponent} from "../basic-editor/basic-editor.component";
	3	+import {ComponentTestHelper, createClass} from '../../../../spec/component-test-helper';
	4	+import * as helpers from "../../../../spec/helpers";
	5	+
	6	+const htmlTemplate: string = '<article-editor [article]="ctrl.article"></article-editor>';
	7	+
	8	+describe("Components", () => {
	9	+ describe("Article Editor Component", () => {
	10	+
	11	+ let helper: ComponentTestHelper<ArticleEditorComponent>;
	12	+ beforeEach(angular.mock.module("templates"));
	13	+
	14	+ beforeEach((done) => {
	15	+ let properties = { article: { type: "TextArticle" } };
	16	+ let cls = createClass({
	17	+ template: htmlTemplate,
	18	+ directives: [ArticleEditorComponent, BasicEditorComponent],
	19	+ properties: properties
	20	+ });
	21	+ helper = new ComponentTestHelper<ArticleEditorComponent>(cls, done);
	22	+ });
	23	+
	24	+ it("replace element with article basic editor when type is TextArticle", () => {
	25	+ expect(helper.find("article-basic-editor").length).toEqual(1);
	26	+ });
	27	+ });
	28	+});
...	...
...	...	@@ -16,10 +16,10 @@ export class ArticleEditorComponent {
16	16	private $compile: ng.ICompileService) { }
17	17
18	18	ngOnInit() {
19		- let articleType = this.article.type.replace(/::/, '');
	19	+ let articleType = this.article && this.article.type ? this.article.type.replace(/::/, '') : "TextArticle";
20	20	let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;
21	21	let directiveName = "article-basic-editor";
22		- if (this.$injector.has(specificDirective + 'Directive')) {
	22	+ if (specificDirective !== "articleEditor" && this.$injector.has(specificDirective + 'Directive')) {
23	23	directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
24	24	}
25	25	this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
...	...
...	...	@@ -7,16 +7,28 @@ const htmlTemplate: string = '<noosfero-comment [article]="ctrl.article" [commen
7	7	describe("Components", () => {
8	8	describe("Comment Component", () => {
9	9
10		- beforeEach(angular.mock.module("templates"));
	10	+ let properties: any;
	11	+ let notificationService = helpers.mocks.notificationService;
	12	+ let commentService = jasmine.createSpyObj("commentService", ["removeFromArticle"]);
11	13
	14	+ beforeEach(angular.mock.module("templates"));
	15	+ beforeEach(() => {
	16	+ properties = {
	17	+ article: { id: 1, accept_comments: true },
	18	+ comment: { title: "title", body: "body" }
	19	+ };
	20	+ });
12	21
13	22	function createComponent() {
14		- let providers = helpers.provideFilters("translateFilter");
	23	+ let providers = [
	24	+ helpers.createProviderToValue('NotificationService', notificationService),
	25	+ helpers.createProviderToValue("CommentService", commentService)
	26	+ ].concat(helpers.provideFilters("translateFilter"));
15	27
16	28	@Component({ selector: 'test-container-component', directives: [CommentComponent], template: htmlTemplate, providers: providers })
17	29	class ContainerComponent {
18		- article = { id: 1 };
19		- comment = { title: "title", body: "body" };
	30	+ article = properties['article'];
	31	+ comment = properties['comment'];
20	32	}
21	33	return helpers.createComponentFromClass(ContainerComponent);
22	34	}
...	...	@@ -52,5 +64,51 @@ describe("Components", () => {
52	64	done();
53	65	});
54	66	});
	67	+
	68	+ it("display reply button", done => {
	69	+ createComponent().then(fixture => {
	70	+ expect(fixture.debugElement.queryAll(".comment .actions .reply").length).toEqual(1);
	71	+ done();
	72	+ });
	73	+ });
	74	+
	75	+ it("not display reply button when accept_comments is false", done => {
	76	+ properties['article']['accept_comments'] = false;
	77	+ createComponent().then(fixture => {
	78	+ expect(fixture.debugElement.queryAll(".comment .actions .reply").length).toEqual(0);
	79	+ done();
	80	+ });
	81	+ });
	82	+
	83	+ it("does not show the Remove button if user is not allowed to remove", done => {
	84	+ createComponent().then(fixture => {
	85	+ let component: CommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	86	+ component.allowRemove = () => false;
	87	+ fixture.detectChanges();
	88	+ expect(fixture.debugElement.queryAll("a.action.remove").length).toEqual(0);
	89	+ done();
	90	+ });
	91	+ });
	92	+
	93	+ it("shows the Remove button if user is allowed to remove", done => {
	94	+ createComponent().then(fixture => {
	95	+ let component: CommentComponent = fixture.debugElement.componentViewChildren[0].componentInstance;
	96	+ component.allowRemove = () => true;
	97	+ fixture.detectChanges();
	98	+ expect(fixture.debugElement.queryAll("a.action.remove").length).toEqual(1);
	99	+ done();
	100	+ });
	101	+ });
	102	+
	103	+ it("call comment service to remove comment", done => {
	104	+ notificationService.confirmation = (params: any, func: Function) => { func(); };
	105	+ commentService.removeFromArticle = jasmine.createSpy("removeFromArticle").and.returnValue(Promise.resolve());
	106	+ createComponent().then(fixture => {
	107	+ let component = fixture.debugElement.componentViewChildren[0].componentInstance;
	108	+ component.remove();
	109	+ expect(commentService.removeFromArticle).toHaveBeenCalled();
	110	+ done();
	111	+ });
	112	+ });
55	113	});
56	114	});
...	...
1	1	import { Inject, Input, Component, Output, EventEmitter } from 'ng-forward';
2	2	import { PostCommentComponent } from "./post-comment/post-comment.component";
	3	+import { CommentService } from "../../../lib/ng-noosfero-api/http/comment.service";
	4	+import { NotificationService } from "../../shared/services/notification.service";
3	5
4	6	@Component({
5	7	selector: 'noosfero-comment',
	8	+ outputs: ['commentRemoved'],
6	9	templateUrl: 'app/article/comment/comment.html'
7	10	})
	11	+@Inject(CommentService, NotificationService)
8	12	export class CommentComponent {
9	13
10	14	@Input() comment: noosfero.CommentViewModel;
11	15	@Input() article: noosfero.Article;
12	16	@Input() displayActions = true;
13	17	@Input() displayReplies = true;
	18	+ @Output() commentRemoved: EventEmitter<Comment> = new EventEmitter<Comment>();
14	19
15	20	showReply() {
16	21	return this.comment && this.comment.__show_reply === true;
17	22	}
18	23
19		- constructor() {
20		- }
21		-
	24	+ constructor(private commentService: CommentService,
	25	+ private notificationService: NotificationService) { }
22	26
23	27	reply() {
24	28	this.comment.__show_reply = !this.comment.__show_reply;
25	29	}
	30	+
	31	+ allowRemove() {
	32	+ return true;
	33	+ }
	34	+
	35	+ remove() {
	36	+ this.notificationService.confirmation({ title: "comment.remove.confirmation.title", message: "comment.remove.confirmation.message" }, () => {
	37	+ this.commentService.removeFromArticle(this.article, this.comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
	38	+ this.commentRemoved.next(this.comment);
	39	+ this.notificationService.success({ title: "comment.remove.success.title", message: "comment.remove.success.message" });
	40	+ });
	41	+ });
	42	+ }
26	43	}
...	...